@equinor/fusion-framework-react-components-bookmark 2.0.4 → 2.0.5

package/src/__tests__/AppNameField.test.tsx

@@ -1,39 +0,0 @@
-import { isValidElement } from 'react';
-import { Input, Progress } from '@equinor/eds-core-react';
-import { describe, expect, it } from 'vitest';
-import { AppNameField } from '../components/edit-bookmark/AppNameField';
-
-describe('AppNameField', () => {
-  it('shows an accessible progress indicator while the manifest is loading', () => {
-    const field = AppNameField({ id: 'app', isLoading: true });
-    const loadingIndicator = field.props.rightAdornments;
-
-    expect(field.type).toBe(Input);
-    expect(field.props.id).toBe('app');
-    expect(field.props['aria-busy']).toBe(true);
-    expect(isValidElement(loadingIndicator)).toBe(true);
-
-    // Guard the element shape before inspecting progress-specific props.
-    if (!isValidElement(loadingIndicator)) {
-      throw new Error('Expected a valid loading indicator');
-    }
-
-    expect(loadingIndicator.type).toBe(Progress.Circular);
-    expect(loadingIndicator.props).toMatchObject({
-      'aria-label': 'Loading app name',
-      size: 16,
-    });
-  });
-
-  it('shows the resolved display name without a progress indicator', () => {
-    const field = AppNameField({
-      id: 'app',
-      displayName: 'My app',
-      isLoading: false,
-    });
-
-    expect(field.props.value).toBe('My app');
-    expect(field.props['aria-busy']).toBe(false);
-    expect(field.props.rightAdornments).toBeUndefined();
-  });
-});

package/src/components/Bookmark.tsx

@@ -1,98 +0,0 @@
-import { EMPTY, map } from 'rxjs';
-import { useBookmarkGrouping } from '../hooks';
-import { BookmarkFilter } from './filter/BookmarkFilter';
-import { SectionList } from './sectionList/SectionList';
-import { useMemo } from 'react';
-
-import { Icon } from '@equinor/eds-core-react';
-import { chevron_down, chevron_right, share, more_vertical, add } from '@equinor/eds-icons';
-
-import styled from 'styled-components';
-import { Message } from './messages/Message';
-import { Loading } from './loading/Loading';
-import { useBookmarkComponentContext } from './BookmarkProvider';
-import { useObservableState } from '@equinor/fusion-observable/react';
-
-Icon.add({
-  chevron_down,
-  chevron_right,
-  share,
-  more_vertical,
-  add,
-});
-
-const Styled = {
-  Wrapper: styled.div`
-        padding-right: 1rem;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    `,
-  List: styled.div`
-        overflow-y: auto;
-        overflow-x: hidden;
-        height: calc((100vh - 85px) - 3rem);
-    `,
-  NoContentWrapper: styled.div`
-        position: absolute;
-        top: 150px;
-        bottom: 200px;
-        left: 0px;
-        right: 0px;
-    `,
-};
-
-/**
- * Renders the list of bookmark sections and the current bookmark's loading/message state.
- *
- * @returns The bookmark list UI
- */
-export const Bookmark = () => {
-  const { provider } = useBookmarkComponentContext();
-
-  const { value: bookmarks } = useObservableState(
-    useMemo(() => provider?.bookmarks$ || EMPTY, [provider]),
-  );
-
-  const { value: isLoading } = useObservableState(
-    useMemo(() => {
-      // Derive a boolean loading flag from whether 'fetch_bookmarks' is an active status
-      return (provider?.status$ || EMPTY).pipe(map((status) => !!status.has('fetch_bookmarks')));
-    }, [provider]),
-    { initial: true },
-  );
-
-  const { bookmarkGroups, groupingModes, searchText, setGroupBy, setSearchText, groupByKey } =
-    useBookmarkGrouping(bookmarks);
-
-  const content = useMemo(() => {
-    // Show the loading placeholder while bookmarks are still being fetched
-    if (isLoading) {
-      return <Loading />;
-    }
-    // Show an empty-state message when there are no bookmark groups to display
-    if (bookmarkGroups.length === 0) {
-      return (
-        <Message title="No Bookmarks" type="NoContent">
-          You have not created any bookmarks yet.
-        </Message>
-      );
-    }
-    return <SectionList bookmarkGroups={bookmarkGroups} />;
-  }, [isLoading, bookmarkGroups]);
-
-  return (
-    <Styled.Wrapper>
-      <BookmarkFilter
-        groupBy={groupByKey}
-        groupingModes={Object.keys(groupingModes)}
-        searchText={searchText ?? ''}
-        setGroupBy={setGroupBy}
-        setSearchText={setSearchText}
-      />
-      <Styled.List>{content}</Styled.List>
-    </Styled.Wrapper>
-  );
-};
-
-export default Bookmark;

package/src/components/BookmarkProvider.tsx

@@ -1,129 +0,0 @@
-import { Snackbar } from '@equinor/eds-core-react';
-import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
-import { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
-import { CreateBookmarkModal } from './create-bookmark';
-import { EditBookmarkModal } from './edit-bookmark';
-import { ImportBookmarkModal } from './import-bookmark';
-import type { IBookmarkProvider } from '@equinor/fusion-framework-module-bookmark';
-
-type BookmarkApp = {
-  appKey: string;
-  name?: string;
-};
-
-type BookmarkUser = {
-  id: string;
-  name?: string;
-};
-
-type ProviderState = {
-  provider?: IBookmarkProvider;
-  currentApp?: BookmarkApp | null;
-  currentUser?: BookmarkUser | null;
-  showCreateBookmark: () => void;
-  showEditBookmark: (bookmarkId: string) => void;
-  addBookmarkToClipboard: (bookmarkId: string) => void;
-};
-
-const bookmarkProviderContext = createContext<ProviderState | null>(null);
-
-type BookmarkProviderProps = {
-  readonly provider?: IBookmarkProvider;
-  readonly currentApp?: BookmarkApp;
-  readonly currentUser?: BookmarkUser;
-};
-
-/**
- * Hook for accessing the bookmark component context provided by `BookmarkProvider`.
- *
- * @returns The current bookmark provider state
- */
-export const useBookmarkComponentContext = () =>
-  useContext(bookmarkProviderContext) as ProviderState;
-
-/**
- * Provides bookmark state and modals (create/edit/import) to descendant bookmark components.
- *
- * @param props - The provider's props
- * @param props.provider - The bookmark provider used to fetch/manage bookmarks
- * @param props.currentApp - The app the bookmarks belong to
- * @param props.currentUser - The current user, used to determine bookmark ownership
- * @param props.children - The descendant components that can access the bookmark context
- * @returns The provider with its context and modals
- */
-export const BookmarkProvider = (props: PropsWithChildren<BookmarkProviderProps>) => {
-  const { provider, currentApp, currentUser, children } = props;
-
-  const [isCreateBookmarkOpen, setIsCreateBookmarkOpen] = useState(false);
-  const [editBookmarkId, setEditBookmarkId] = useState<string | undefined>();
-
-  const showCreateBookmark = useCallback(() => {
-    setIsCreateBookmarkOpen(true);
-  }, []);
-
-  const [snackbarContent, setSnackbarContent] = useState('');
-
-  const addBookmarkToClipboard = useCallback((bookmarkId: string) => {
-    const url = new URL(window.location.toString());
-    url.searchParams.set('bookmarkId', bookmarkId);
-    navigator.clipboard.writeText(String(url));
-    setSnackbarContent('Bookmark url copied to clipboard');
-  }, []);
-
-  // Render children without a live provider context when no provider is configured
-  if (!provider) {
-    return (
-      <bookmarkProviderContext.Provider
-        value={{
-          provider: undefined,
-          currentApp,
-          currentUser,
-          showCreateBookmark,
-          showEditBookmark: setEditBookmarkId,
-          addBookmarkToClipboard,
-        }}
-      >
-        {children}
-      </bookmarkProviderContext.Provider>
-    );
-  }
-
-  return (
-    <bookmarkProviderContext.Provider
-      value={{
-        provider,
-        currentApp,
-        currentUser,
-        showCreateBookmark,
-        showEditBookmark: setEditBookmarkId,
-        addBookmarkToClipboard,
-      }}
-    >
-      <CreateBookmarkModal isOpen={isCreateBookmarkOpen} onClose={setIsCreateBookmarkOpen} />
-      {editBookmarkId && (
-        <EditBookmarkModal
-          isOpen={!!editBookmarkId}
-          onClose={() => setEditBookmarkId(undefined)}
-          bookmarkId={editBookmarkId}
-        />
-      )}
-      <ImportBookmarkModal />
-      <Snackbar
-        autoHideDuration={2000}
-        onClose={() => setSnackbarContent('')}
-        open={!!snackbarContent}
-      >
-        {snackbarContent}
-      </Snackbar>
-      {children}
-    </bookmarkProviderContext.Provider>
-  );
-};
-
-declare module '@equinor/fusion-framework-module-event' {
-  interface FrameworkEventMap {
-    // onBookmarkOpen: FrameworkEvent<FrameworkEventInit<boolean, unknown>>;
-    onBookmarkEdit: FrameworkEvent<FrameworkEventInit<{ bookmarkId: string }, unknown>>;
-    onBookmarkUrlCopy: FrameworkEvent<FrameworkEventInit<{ url: string }, unknown>>;
-  }
-}

package/src/components/create-bookmark/CreateBookmarkModal.tsx

@@ -1,130 +0,0 @@
-import { type ChangeEvent, useCallback, useEffect, useId, useState } from 'react';
-
-import type { BookmarkCreateArgs } from '@equinor/fusion-framework-module-bookmark';
-import { useBookmarkComponentContext } from '../BookmarkProvider';
-
-import { Button, Checkbox, Dialog, Input, Label, Textarea } from '@equinor/eds-core-react';
-import styled from 'styled-components';
-import { from } from 'rxjs';
-
-const StyledContent = styled(Dialog.Content)`
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-`;
-
-/**
- * Modal for creating a new bookmark.
- *
- * @param props - The component's props
- * @param props.isOpen - Whether the modal is open
- * @param props.onClose - Callback invoked to close the modal
- * @returns The create bookmark modal
- */
-export const CreateBookmarkModal = ({
-  isOpen,
-  onClose,
-}: {
-  readonly isOpen: boolean;
-  readonly onClose: (b: boolean) => void;
-}) => {
-  const { provider, currentApp } = useBookmarkComponentContext();
-
-  const [state, setState] = useState<BookmarkCreateArgs<never>>({
-    name: '',
-    description: '',
-    isShared: false,
-  });
-
-  const nameId = useId();
-  const descriptionId = useId();
-
-  useEffect(() => {
-    setState((s) => ({ ...s, appKey: currentApp?.appKey || '' }));
-  }, [currentApp]);
-
-  const createBookmark = useCallback(
-    async (args: BookmarkCreateArgs<never>) => {
-      // Cannot create a bookmark without a provider to persist it
-      if (!provider) {
-        console.error('Provider not available');
-        return;
-      }
-      // TODO(#5089): Show success message
-      // TODO(#5090): should this call onCreated, with the new bookmark?
-      // TODO(#5090): should current bookmark be updated?
-      const sub = from(provider.createBookmark(args)).subscribe({
-        next: (bookmark) => {
-          console.debug('Bookmark created', bookmark);
-        },
-        error: (error) => {
-          console.error('Failed to create bookmark', error);
-        },
-        complete() {
-          onClose(false);
-        },
-      });
-      return () => sub.unsubscribe();
-    },
-    [onClose, provider],
-  );
-
-  return (
-    <Dialog style={{ width: '400px' }} open={isOpen}>
-      <Dialog.Header>Create bookmark</Dialog.Header>
-      <StyledContent>
-        <div>
-          <Label htmlFor={nameId} label="Name" />
-          <Input
-            id={nameId}
-            autoComplete="off"
-            value={state?.name}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              setState((s) => ({ ...s, name: event.target.value }));
-            }}
-          />
-        </div>
-        <div>
-          <Textarea
-            id={descriptionId}
-            label="Description"
-            rows={3}
-            rowsMax={10}
-            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
-              setState((s) => ({ ...s, description: event.target.value }));
-            }}
-          />
-        </div>
-        <div>
-          <Label htmlFor="app" label="App" />
-          <Input readOnly={true} value={currentApp?.name || currentApp?.appKey || ''} />
-        </div>
-
-        <div>
-          <Checkbox
-            label="Is Shared"
-            checked={state.isShared}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              setState((s) => ({ ...s, isShared: event.target.checked }));
-            }}
-          />
-        </div>
-      </StyledContent>
-      <Dialog.Actions>
-        <div style={{ display: 'flex', gap: '0.2em' }}>
-          <Button onClick={() => onClose(false)} variant="ghost">
-            Cancel
-          </Button>
-          <Button
-            disabled={!currentApp || !state.name}
-            onClick={() => {
-              createBookmark(state);
-            }}
-          >
-            Create
-          </Button>
-        </div>
-      </Dialog.Actions>
-    </Dialog>
-  );
-};

package/src/components/create-bookmark/index.ts

@@ -1 +0,0 @@
-export { CreateBookmarkModal } from './CreateBookmarkModal';

package/src/components/edit-bookmark/AppNameField.tsx

@@ -1,27 +0,0 @@
-import { Input, Progress } from '@equinor/eds-core-react';
-
-/**
- * Renders the bookmark's app name while making manifest resolution visible.
- *
- * @param props - The resolved display name and whether the manifest request is pending.
- * @returns A read-only app name field with an accessible loading indicator when needed.
- */
-export const AppNameField = ({
-  id,
-  displayName,
-  isLoading,
-}: {
-  readonly id: string;
-  readonly displayName?: string;
-  readonly isLoading: boolean;
-}) => (
-  <Input
-    id={id}
-    readOnly={true}
-    value={displayName ?? ''}
-    aria-busy={isLoading}
-    rightAdornments={
-      isLoading ? <Progress.Circular aria-label="Loading app name" size={16} /> : undefined
-    }
-  />
-);

package/src/components/edit-bookmark/EditBookmarkModal.tsx

@@ -1,203 +0,0 @@
-import { type ChangeEvent, useCallback, useEffect, useId, useMemo, useState } from 'react';
-
-import { EMPTY, from, of } from 'rxjs';
-
-import { useObservableState } from '@equinor/fusion-observable/react';
-
-import { useFrameworkModule } from '@equinor/fusion-framework-react';
-import type { AppModule } from '@equinor/fusion-framework-module-app';
-import type { BookmarkUpdate } from '@equinor/fusion-framework-module-bookmark';
-
-import { Button, Checkbox, Dialog, Input, Label, Textarea } from '@equinor/eds-core-react';
-import styled from 'styled-components';
-
-import { useBookmarkComponentContext } from '../BookmarkProvider';
-import { AppNameField } from './AppNameField';
-
-const Styled = {
-  Dialog: styled(Dialog)`
-        width: 500px;
-    `,
-  DialogContent: styled(Dialog.Content)`
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    `,
-  CheckboxWrapper: styled.div`
-        display: flex;
-        gap: 1rem;
-    `,
-  Actions: styled.div`
-        display: flex;
-        gap: 0.2em;
-    `,
-};
-
-/**
- * Modal for editing an existing bookmark.
- *
- * @param props - The component's props
- * @param props.isOpen - Whether the modal is open
- * @param props.onClose - Callback invoked to close the modal
- * @param props.bookmarkId - The id of the bookmark to edit
- * @returns The edit bookmark modal
- */
-export const EditBookmarkModal = ({
-  isOpen,
-  onClose,
-  bookmarkId,
-}: {
-  readonly isOpen: boolean;
-  readonly onClose: (b: boolean) => void;
-  readonly bookmarkId: string;
-}) => {
-  const { provider, addBookmarkToClipboard, currentApp } = useBookmarkComponentContext();
-
-  const [state, setState] = useState<BookmarkUpdate>({
-    name: '',
-    description: '',
-    isShared: false,
-  });
-
-  const nameId = useId();
-  const descriptionId = useId();
-  const appId = useId();
-
-  const [updatePayload, setUpdatePayload] = useState(false);
-
-  const bookmark$ = useMemo(
-    () => from(provider ? provider.getBookmark(bookmarkId) : EMPTY),
-    [provider, bookmarkId],
-  );
-
-  const { value: bookmark } = useObservableState(bookmark$);
-
-  // set the state when the bookmark is loaded
-  useEffect(() => {
-    // Only populate local state once the bookmark has actually loaded
-    if (bookmark) {
-      const { name, description, isShared } = bookmark;
-      setState({ name, description, isShared });
-    }
-  }, [bookmark]);
-
-  // TODO(#5091): this should be on the bookmark object
-  const appProvider = useFrameworkModule<AppModule>('app');
-  const { value: appName, error: appNameError } = useObservableState(
-    useMemo(
-      () => (bookmark && appProvider ? appProvider.getAppManifest(bookmark.appKey) : of(undefined)),
-      [appProvider, bookmark],
-    ),
-  );
-  // Only report a pending manifest request; missing providers and failed requests are not loading.
-  const isAppNameLoading = Boolean(
-    bookmark && appProvider && appName === undefined && appNameError === null,
-  );
-
-  const updateBookmark = useCallback(
-    async (updates: BookmarkUpdate) => {
-      // Cannot update a bookmark without a provider to persist the change
-      if (!provider) {
-        console.error('Provider not available');
-        return;
-      }
-      from(
-        provider.updateBookmark(bookmarkId, updates, {
-          excludePayloadGeneration: !updatePayload,
-        }),
-      ).subscribe({
-        next: (updatedBookmark) => {
-          console.debug('Bookmark updated', updatedBookmark);
-        },
-        error: (error) => {
-          console.error('Failed to update bookmark', error);
-        },
-        complete: () => {
-          onClose(false);
-        },
-      });
-      // TODO(#5089): Show success message
-      // TODO(#5090): should this call onUpdated, with the updated bookmark?
-      onClose(false);
-    },
-    [onClose, provider, bookmarkId, updatePayload],
-  );
-
-  return (
-    <Styled.Dialog open={isOpen}>
-      <Dialog.Header>Edit bookmark</Dialog.Header>
-      <Styled.DialogContent>
-        <div>
-          <Label htmlFor={nameId} label="Name" />
-          <Input
-            id={nameId}
-            autoComplete="off"
-            value={state?.name}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              setState((s) => ({ ...s, name: event.target.value }));
-            }}
-          />
-        </div>
-        <div>
-          <Textarea
-            id={descriptionId}
-            label="Description"
-            value={state?.description}
-            rows={3}
-            rowsMax={10}
-            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
-              setState((s) => ({ ...s, description: event.target.value }));
-            }}
-          />
-        </div>
-        <div>
-          <Label htmlFor={appId} label="App" />
-          <AppNameField
-            id={appId}
-            displayName={appName?.displayName}
-            isLoading={isAppNameLoading}
-          />
-        </div>
-
-        <Styled.CheckboxWrapper>
-          <Checkbox
-            label="Is Shared"
-            checked={state.isShared}
-            onChange={(changeEvent: ChangeEvent<HTMLInputElement>) => {
-              const isShared = changeEvent.target.checked;
-              // Copy the bookmark URL when the user shares it so it's easy to send along
-              if (isShared) {
-                addBookmarkToClipboard(bookmarkId);
-              }
-              setState((s) => ({ ...s, isShared }));
-            }}
-          />
-          {/* only allow updating payload if the app is the same as the creator of the app */}
-          {bookmark?.appKey === currentApp?.name && provider?.canCreateBookmarks && (
-            <Checkbox
-              label="Update bookmark with current view"
-              checked={updatePayload}
-              onChange={() => {
-                setUpdatePayload((s) => !s);
-              }}
-            />
-          )}
-        </Styled.CheckboxWrapper>
-      </Styled.DialogContent>
-      <Dialog.Actions>
-        <Styled.Actions>
-          <Button onClick={() => onClose(false)} variant="ghost">
-            Cancel
-          </Button>
-          <Button
-            onClick={() => {
-              updateBookmark(state);
-            }}
-          >
-            Save
-          </Button>
-        </Styled.Actions>
-      </Dialog.Actions>
-    </Styled.Dialog>
-  );
-};

package/src/components/edit-bookmark/index.ts

@@ -1 +0,0 @@
-export * from './EditBookmarkModal';

package/src/components/filter/BookmarkFilter.tsx

@@ -1,44 +0,0 @@
-import { Search } from '@equinor/eds-core-react';
-import type { GroupingKeys } from '../../hooks/useBookmarkGrouping';
-
-import styled from 'styled-components';
-
-type BookmarkFilterProps = {
-  readonly searchText: string;
-  readonly setSearchText: (newVal: string | null) => void;
-  readonly setGroupBy: (groupBy: GroupingKeys) => void;
-  readonly groupingModes: string[];
-  readonly groupBy: string;
-};
-
-const _Styled = {
-  Root: styled.div`
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    `,
-};
-
-/**
- * Search and grouping filter controls for the bookmark list.
- *
- * @param props - The component's props
- * @returns The filter controls
- */
-export const BookmarkFilter = ({
-  searchText,
-  setGroupBy: _setGroupBy,
-  setSearchText,
-  groupingModes: _groupingModes,
-  groupBy: _groupBy,
-}: BookmarkFilterProps) => {
-  return (
-    <Search
-      placeholder="Search in my bookmarks"
-      value={searchText ?? ''}
-      onChange={(e) => {
-        setSearchText(e.currentTarget.value.length ? e.currentTarget.value : null);
-      }}
-    />
-  );
-};