@equinor/fusion-framework-react-components-bookmark 1.0.8 → 1.0.10

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { EMPTY, from, of } from 'rxjs';
 
@@ -14,173 +14,170 @@ import styled from 'styled-components';
 import { useBookmarkComponentContext } from '../BookmarkProvider';
 
 const Styled = {
-    Dialog: styled(Dialog)`
+  Dialog: styled(Dialog)`
         width: 500px;
     `,
-    DialogContent: styled(Dialog.Content)`
+  DialogContent: styled(Dialog.Content)`
         display: flex;
         flex-direction: column;
         gap: 1rem;
     `,
-    CheckboxWrapper: styled.div`
+  CheckboxWrapper: styled.div`
         display: flex;
         gap: 1rem;
     `,
-    Actions: styled.div`
+  Actions: styled.div`
         display: flex;
         gap: 0.2em;
     `,
 };
 
 export const EditBookmarkModal = ({
-    isOpen,
-    onClose,
-    bookmarkId,
+  isOpen,
+  onClose,
+  bookmarkId,
 }: {
-    readonly isOpen: boolean;
-    readonly onClose: (b: boolean) => void;
-    readonly bookmarkId: string;
+  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 [updatePayload, setUpdatePayload] = useState(false);
-
-    const bookmark$ = useMemo(
-        () => from(provider ? provider.getBookmark(bookmarkId) : EMPTY),
-        [provider, bookmarkId],
-    );
-
-    const { value: bookmark, complete: isLoadingBookmark } = useObservableState(bookmark$);
-
-    // set the state when the bookmark is loaded
-    useEffect(() => {
-        if (bookmark) {
-            const { name, description, isShared } = bookmark;
-            setState({ name, description, isShared });
-        }
-    }, [bookmark]);
-
-    // TODO - this should be on the bookmark object
-    const appProvider = useFrameworkModule<AppModule>('app');
-    const { value: appName } = useObservableState(
-        useMemo(
-            () =>
-                bookmark && appProvider
-                    ? appProvider.getAppManifest(bookmark.appKey)
-                    : of(undefined),
-            [appProvider, bookmark],
-        ),
-    );
-
-    const updateBookmark = useCallback(
-        async (updates: BookmarkUpdate) => {
-            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: Show success message
-            // TODO: should this call onUpdated, with the updated bookmark?
-            onClose(false);
+  const { provider, addBookmarkToClipboard, currentApp } = useBookmarkComponentContext();
+
+  const [state, setState] = useState<BookmarkUpdate>({
+    name: '',
+    description: '',
+    isShared: false,
+  });
+
+  const [updatePayload, setUpdatePayload] = useState(false);
+
+  const bookmark$ = useMemo(
+    () => from(provider ? provider.getBookmark(bookmarkId) : EMPTY),
+    [provider, bookmarkId],
+  );
+
+  const { value: bookmark, complete: isLoadingBookmark } = useObservableState(bookmark$);
+
+  // set the state when the bookmark is loaded
+  useEffect(() => {
+    if (bookmark) {
+      const { name, description, isShared } = bookmark;
+      setState({ name, description, isShared });
+    }
+  }, [bookmark]);
+
+  // TODO - this should be on the bookmark object
+  const appProvider = useFrameworkModule<AppModule>('app');
+  const { value: appName } = useObservableState(
+    useMemo(
+      () => (bookmark && appProvider ? appProvider.getAppManifest(bookmark.appKey) : of(undefined)),
+      [appProvider, bookmark],
+    ),
+  );
+
+  const updateBookmark = useCallback(
+    async (updates: BookmarkUpdate) => {
+      if (!provider) {
+        console.error('Provider not available');
+        return;
+      }
+      from(
+        provider.updateBookmark(bookmarkId, updates, {
+          excludePayloadGeneration: !updatePayload,
+        }),
+      ).subscribe({
+        next: (updatedBookmark) => {
+          console.debug('Bookmark updated', updatedBookmark);
         },
-        [onClose, provider, bookmarkId, updatePayload],
-    );
-
-    // TODO - add loading spinner
-    isLoadingBookmark;
-
-    return (
-        <Styled.Dialog open={isOpen}>
-            <Dialog.Header>Edit bookmark</Dialog.Header>
-            <Styled.DialogContent>
-                <div>
-                    <Label htmlFor="name" label="Name" />
-                    <Input
-                        id="name"
-                        autoComplete="off"
-                        value={state?.name}
-                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                            setState((s) => ({ ...s, name: event.target.value }));
-                        }}
-                    />
-                </div>
-                <div>
-                    <TextField
-                        id="storybook-multiline-three"
-                        label="Description"
-                        value={state?.description}
-                        multiline
-                        rows={3}
-                        rowsMax={10}
-                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                            setState((s) => ({ ...s, description: event.target.value }));
-                        }}
-                    />
-                </div>
-                <div>
-                    <Label htmlFor="app" label="App" />
-                    {/** TODO - show ghost while loading app name  */}
-                    <Input readOnly={true} value={appName?.displayName || ''} />
-                </div>
-
-                <Styled.CheckboxWrapper>
-                    <Checkbox
-                        label="Is Shared"
-                        checked={state.isShared}
-                        onChange={(changeEvent: ChangeEvent<HTMLInputElement>) => {
-                            const isShared = changeEvent.target.checked;
-                            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>
-    );
+        error: (error) => {
+          console.error('Failed to update bookmark', error);
+        },
+        complete: () => {
+          onClose(false);
+        },
+      });
+      // TODO: Show success message
+      // TODO: should this call onUpdated, with the updated bookmark?
+      onClose(false);
+    },
+    [onClose, provider, bookmarkId, updatePayload],
+  );
+
+  // TODO - add loading spinner
+  isLoadingBookmark;
+
+  return (
+    <Styled.Dialog open={isOpen}>
+      <Dialog.Header>Edit bookmark</Dialog.Header>
+      <Styled.DialogContent>
+        <div>
+          <Label htmlFor="name" label="Name" />
+          <Input
+            id="name"
+            autoComplete="off"
+            value={state?.name}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setState((s) => ({ ...s, name: event.target.value }));
+            }}
+          />
+        </div>
+        <div>
+          <TextField
+            id="storybook-multiline-three"
+            label="Description"
+            value={state?.description}
+            multiline
+            rows={3}
+            rowsMax={10}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setState((s) => ({ ...s, description: event.target.value }));
+            }}
+          />
+        </div>
+        <div>
+          <Label htmlFor="app" label="App" />
+          {/** TODO - show ghost while loading app name  */}
+          <Input readOnly={true} value={appName?.displayName || ''} />
+        </div>
+
+        <Styled.CheckboxWrapper>
+          <Checkbox
+            label="Is Shared"
+            checked={state.isShared}
+            onChange={(changeEvent: ChangeEvent<HTMLInputElement>) => {
+              const isShared = changeEvent.target.checked;
+              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/filter/Filter.tsx

@@ -1,18 +1,18 @@
 import { Search, Autocomplete } from '@equinor/eds-core-react';
-import { GroupingKeys } from '../../hooks/useBookmarkGrouping';
+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;
+  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`
+  Root: styled.div`
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -20,39 +20,19 @@ const Styled = {
 };
 
 export const BookmarkFilter = ({
-    searchText,
-    setGroupBy,
-    setSearchText,
-    groupingModes,
-    groupBy,
+  searchText,
+  setGroupBy,
+  setSearchText,
+  groupingModes,
+  groupBy,
 }: BookmarkFilterProps) => {
-    return (
-        <Search
-            placeholder="Search in my bookmarks"
-            value={searchText ?? ''}
-            onChange={(e) => {
-                setSearchText(e.currentTarget.value.length ? e.currentTarget.value : null);
-            }}
-        />
-    );
-    return (
-        <Styled.Root>
-            <Search
-                placeholder="Search in my bookmarks"
-                value={searchText ?? ''}
-                onChange={(e) => {
-                    setSearchText(e.currentTarget.value.length ? e.currentTarget.value : null);
-                }}
-            />
-            <Autocomplete
-                options={groupingModes}
-                selectedOptions={[groupBy]}
-                multiple={false}
-                hideClearButton
-                autoWidth
-                onOptionsChange={(changes) => setGroupBy(changes.selectedItems[0] as GroupingKeys)}
-                label={''}
-            />
-        </Styled.Root>
-    );
+  return (
+    <Search
+      placeholder="Search in my bookmarks"
+      value={searchText ?? ''}
+      onChange={(e) => {
+        setSearchText(e.currentTarget.value.length ? e.currentTarget.value : null);
+      }}
+    />
+  );
 };

package/src/components/import-bookmark/ImportBookmark.tsx

@@ -8,85 +8,81 @@ import { map, switchMap } from 'rxjs/operators';
 import { useObservableState } from '@equinor/fusion-observable/react';
 
 const Styled = {
-    Actions: styled.div`
+  Actions: styled.div`
         display: flex;
         gap: 1rem;
     `,
 };
 
 export const ImportBookmarkModal = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-    const { provider, currentUser } = useBookmarkComponentContext();
+  const { provider, currentUser } = useBookmarkComponentContext();
 
-    // Observe changes to current bookmark and check if it is already in bookmarks or favorites
-    const newBookmark$ = useMemo(() => {
-        if (!provider) {
-            return of(null);
+  // Observe changes to current bookmark and check if it is already in bookmarks or favorites
+  const newBookmark$ = useMemo(() => {
+    if (!provider) {
+      return of(null);
+    }
+    return provider.currentBookmark$.pipe(
+      // filter out null values, not interested in those
+      filter((bookmark) => !!bookmark),
+      switchMap((bookmark) => {
+        const checkBookmark = bookmark && bookmark.createdBy.id !== currentUser?.id;
+        if (!checkBookmark) {
+          return of(null);
         }
-        return provider.currentBookmark$.pipe(
-            // filter out null values, not interested in those
-            filter((bookmark) => !!bookmark),
-            switchMap((bookmark) => {
-                const checkBookmark = bookmark && bookmark.createdBy.id !== currentUser?.id;
-                if (!checkBookmark) {
-                    return of(null);
-                }
-                return from(provider.isBookmarkInFavorites(bookmark.id)).pipe(
-                    map((isFavorite) => (isFavorite ? null : bookmark)),
-                );
-            }),
+        return from(provider.isBookmarkInFavorites(bookmark.id)).pipe(
+          map((isFavorite) => (isFavorite ? null : bookmark)),
         );
-    }, [provider, currentUser?.id]);
+      }),
+    );
+  }, [provider, currentUser?.id]);
 
-    const { value: newBookmark } = useObservableState(newBookmark$);
+  const { value: newBookmark } = useObservableState(newBookmark$);
 
-    useEffect(() => {
-        if (newBookmark) {
-            setIsOpen(true);
-        }
-    }, [newBookmark]);
+  useEffect(() => {
+    if (newBookmark) {
+      setIsOpen(true);
+    }
+  }, [newBookmark]);
 
-    const onAddBookmarkFavorite = useCallback(
-        (e: React.MouseEvent<HTMLButtonElement>) => {
-            if (!provider) {
-                console.error('Provider not available');
-                return;
-            }
-            from(provider.addBookmarkToFavorites(e.currentTarget.value)).subscribe({
-                complete: () => {
-                    setIsOpen(false);
-                },
-            });
+  const onAddBookmarkFavorite = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (!provider) {
+        console.error('Provider not available');
+        return;
+      }
+      from(provider.addBookmarkToFavorites(e.currentTarget.value)).subscribe({
+        complete: () => {
+          setIsOpen(false);
         },
-        [provider],
-    );
+      });
+    },
+    [provider],
+  );
 
-    if (!newBookmark) {
-        return null;
-    }
+  if (!newBookmark) {
+    return null;
+  }
 
-    return (
-        <Dialog style={{ width: '600px' }} open={isOpen}>
-            <Dialog.Header>Import bookmark</Dialog.Header>
-            <Dialog.Content>
-                <p>This bookmark was created by {newBookmark.createdBy.name}</p>
-                <p>Would you like to import it?</p>
-            </Dialog.Content>
-            <Dialog.Actions>
-                <Styled.Actions>
-                    <Button
-                        onClick={() => setIsOpen(false)}
-                        variant={'ghost'}
-                        style={{ width: '70px' }}
-                    >
-                        No
-                    </Button>
-                    <Button value={newBookmark.id} onClick={onAddBookmarkFavorite} variant="ghost">
-                        Import
-                    </Button>
-                </Styled.Actions>
-            </Dialog.Actions>
-        </Dialog>
-    );
+  return (
+    <Dialog style={{ width: '600px' }} open={isOpen}>
+      <Dialog.Header>Import bookmark</Dialog.Header>
+      <Dialog.Content>
+        <p>This bookmark was created by {newBookmark.createdBy.name}</p>
+        <p>Would you like to import it?</p>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Styled.Actions>
+          <Button onClick={() => setIsOpen(false)} variant={'ghost'} style={{ width: '70px' }}>
+            No
+          </Button>
+          <Button value={newBookmark.id} onClick={onAddBookmarkFavorite} variant="ghost">
+            Import
+          </Button>
+        </Styled.Actions>
+      </Dialog.Actions>
+    </Dialog>
+  );
 };

package/src/components/loading/Loading.tsx

@@ -2,15 +2,15 @@ import { CircularProgress } from '@equinor/eds-core-react';
 import React from 'react';
 
 export const Loading = () => (
-    <div
-        style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '100%',
-            width: '100%',
-        }}
-    >
-        <CircularProgress />
-    </div>
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      width: '100%',
+    }}
+  >
+    <CircularProgress />
+  </div>
 );