@equinor/fusion-framework-react-components-bookmark 0.1.0

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

@@ -0,0 +1,56 @@
+import { css } from '@emotion/css';
+import { Button, Dialog } from '@equinor/eds-core-react';
+import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { useEffect, useState } from 'react';
+
+const styles = {
+    actionWrapper: css`
+        display: flex;
+        gap: 1rem;
+    `,
+};
+
+export const ImportBookmarkModal = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const { currentBookmark, bookmarks, addBookmarkFavorite } = useBookmark();
+
+    useEffect(() => {
+        if (!bookmarks || !currentBookmark || bookmarks.length === 0) return;
+
+        if (bookmarks.findIndex(({ id }) => id === currentBookmark.id) === -1) {
+            setIsOpen(true);
+        }
+    }, [bookmarks, currentBookmark]);
+
+    return (
+        <Dialog style={{ width: '600px' }} open={isOpen}>
+            <Dialog.Header>Import bookmark</Dialog.Header>
+            <Dialog.Content>
+                <p>This bookmark was created by {currentBookmark?.createdBy.name}</p>
+                <p>Would you like to import it?</p>
+            </Dialog.Content>
+            <Dialog.Actions>
+                <div className={styles.actionWrapper}>
+                    <Button
+                        onClick={() => setIsOpen(false)}
+                        variant={'ghost'}
+                        style={{ width: '70px' }}
+                    >
+                        No
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            console.log(currentBookmark?.id);
+                            currentBookmark && addBookmarkFavorite(currentBookmark.id);
+                            setIsOpen(false);
+                        }}
+                        variant="ghost"
+                    >
+                        Import
+                    </Button>
+                </div>
+            </Dialog.Actions>
+        </Dialog>
+    );
+};

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

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

package/src/components/loading/Loading.tsx

@@ -0,0 +1,16 @@
+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>
+);

package/src/components/row/MoreMenu.tsx

@@ -0,0 +1,32 @@
+import { Menu } from '@equinor/eds-core-react';
+import { MutableRefObject } from 'react';
+import { MenuOption } from './Row';
+
+type MenuProps = {
+    pRef: MutableRefObject<HTMLElement | null>;
+    onClose: VoidFunction;
+    open: boolean;
+    options: MenuOption[];
+};
+
+export const MoreMenu = ({ pRef, onClose, open, options }: MenuProps) => {
+    return (
+        <Menu open={open} anchorEl={pRef.current}>
+            {options.map(({ onClick, name, disabled, Icon }) => (
+                <Menu.Item
+                    disabled={disabled}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onClick();
+                        onClose();
+                    }}
+                    key={name}
+                >
+                    {Icon && Icon}
+                    {name}
+                </Menu.Item>
+            ))}
+        </Menu>
+    );
+};

package/src/components/row/Row.tsx

@@ -0,0 +1,90 @@
+import { css } from '@emotion/css';
+import { Icon, Typography } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+import { useOutsideClick } from '@equinor/eds-utils';
+import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { MutableRefObject, ReactNode, useRef } from 'react';
+import { MoreMenu } from './MoreMenu';
+
+export type MenuOption = {
+    name: string;
+    disabled: boolean;
+    onClick: VoidFunction;
+    Icon?: ReactNode;
+};
+
+type RowProps = {
+    name: string;
+    id: string;
+    menuOpen: boolean;
+    onMenuOpen: (id: string) => void;
+    menuOptions: MenuOption[];
+    children?: ReactNode;
+};
+
+const styles = {
+    iconRow: css`
+        display: flex;
+        flex-direction: row;
+        gap: 0.2em;
+        align-items: center;
+    `,
+    row: css`
+        cursor: pointer;
+        &:hover {
+            background-color: ${tokens.colors.ui.background__light.hex};
+        }
+
+        display: flex;
+        align-items: center;
+        height: 32px;
+        min-height: 32px;
+        max-height: 32px;
+        justify-content: space-between;
+        border-bottom: 1px solid ${tokens.colors.ui.background__medium.hex};
+    `,
+};
+
+export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: RowProps) => {
+    const pRef = useRef<HTMLElement | null>(null);
+    const { setCurrentBookmark } = useBookmark();
+
+    useOutsideClick(pRef.current, () => onMenuOpen(''));
+
+    return (
+        <li
+            className={styles.row}
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setCurrentBookmark(id);
+            }}
+        >
+            <Typography>{name}</Typography>
+            <div className={styles.iconRow}>
+                {children}
+                {!!menuOptions?.length && (
+                    <Icon
+                        name="more_vertical"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onMenuOpen(id);
+                        }}
+                        color={tokens.colors.interactive.primary__resting.hex}
+                        ref={pRef as unknown as MutableRefObject<SVGSVGElement>}
+                    />
+                )}
+
+                <MoreMenu
+                    open={menuOpen}
+                    options={menuOptions}
+                    onClose={() => {
+                        onMenuOpen('');
+                    }}
+                    pRef={pRef}
+                />
+            </div>
+        </li>
+    );
+};

package/src/components/section/Section.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { ReactNode } from 'react';
+import { Button, Icon, Typography } from '@equinor/eds-core-react';
+import { chevron_down, chevron_right } from '@equinor/eds-icons';
+
+import { css } from '@emotion/css';
+import { tokens } from '@equinor/eds-tokens';
+import styled from '@emotion/styled';
+
+const styles = {
+    childrenFlex: css`
+        margin-left: 0.7rem;
+        padding-left: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        border-left: 1px solid ${tokens.colors.infographic.primary__moss_green_100.hex};
+    `,
+};
+
+const StyledButton = styled(Button)`
+    width: 100%;
+    padding: 0;
+    padding-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: none;
+    border: none;
+    color: ${tokens.colors.infographic.primary__moss_green_100.hex};
+    cursor: pointer;
+    :hover {
+        background: none;
+    }
+`;
+
+Icon.add({
+    chevron_down,
+    chevron_right,
+});
+
+type SectionProps = {
+    name: string;
+    children: ReactNode;
+};
+export const Section = ({ children, name }: SectionProps) => {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    return (
+        <div>
+            <StyledButton variant="ghost" onClick={() => setIsExpanded((s) => !s)}>
+                <Icon name={isExpanded ? chevron_down.name : chevron_right.name} />
+                <Typography variant="h6">{name}</Typography>
+            </StyledButton>
+            {isExpanded && <ol className={styles.childrenFlex}>{children}</ol>}
+        </div>
+    );
+};

package/src/components/sectionList/SectionList.tsx

@@ -0,0 +1,171 @@
+import { Icon } from '@equinor/eds-core-react';
+import { useBookmarkGrouping } from '../../hooks';
+import { Row } from '../row/Row';
+import { Section } from '../section/Section';
+import { SharedIcon } from '../shared/SharedIcon';
+import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
+import { useCallback, useEffect, useState } from 'react';
+import { delete_to_trash, share, edit, close, update } from '@equinor/eds-icons';
+import { useFramework } from '@equinor/fusion-framework-react';
+import { appendBookmarkIdToUrl } from '../../utils/append-bookmark-to-uri';
+import { filterEmptyGroups, sortByName, toHumanReadable } from '../../utils/utils';
+import { Loading } from '../loading/Loading';
+
+Icon.add({
+    delete_to_trash,
+    edit,
+    share,
+    close,
+    update,
+});
+
+type SectionListProps = {
+    bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
+};
+
+export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
+    const { deleteBookmarkById, getCurrentAppKey, updateBookmark, removeBookmarkFavorite } =
+        useBookmark();
+
+    const [loading, setLoading] = useState(true);
+
+    const user = useCurrentUser();
+    const [isMenuByIdOpen, setIsMenuByIdOpen] = useState('');
+
+    const { event } = useFramework().modules;
+
+    useEffect(() => {
+        return event.addEventListener('onBookmarksChanged', () => {
+            setLoading(false);
+        });
+    }, [event]);
+
+    const editBookmark = useCallback(
+        (bookmarkId: string) => {
+            event.dispatchEvent('onBookmarkEdit', { detail: { bookmarkId } });
+        },
+        [event]
+    );
+
+    const shareBookmark = useCallback(
+        (bookmark: Bookmark) => {
+            if (!bookmark.isShared) {
+                const url = appendBookmarkIdToUrl(bookmark.id);
+                navigator.clipboard.writeText(url);
+                event.dispatchEvent('onBookmarkUrlCopy', { detail: { url } });
+            }
+            updateBookmark({ ...bookmark, isShared: !bookmark.isShared });
+        },
+        [event, updateBookmark]
+    );
+
+    const updateBookmarkWithCurrentView = useCallback(
+        (bookmark: Bookmark) => {
+            updateBookmark({ ...bookmark }, { updatePayload: true });
+        },
+        [updateBookmark]
+    );
+
+    const createMenuOptions = (bookmark: Bookmark) =>
+        createBookmarkActions(
+            bookmark,
+            deleteBookmarkById,
+            editBookmark,
+            shareBookmark,
+            removeBookmarkFavorite,
+            updateBookmarkWithCurrentView,
+            getCurrentAppKey(),
+            user?.localAccountId
+        );
+
+    if (loading) return <Loading />;
+
+    return (
+        <>
+            {bookmarkGroups.filter(filterEmptyGroups).map(({ groupingProperty, values }) => (
+                <Section key={groupingProperty} name={toHumanReadable(groupingProperty)}>
+                    {values.sort(sortByName).map((b) => (
+                        <Row
+                            menuOptions={createMenuOptions(b)}
+                            key={b.id}
+                            name={b.name}
+                            id={b.id}
+                            menuOpen={isMenuByIdOpen === b.id}
+                            onMenuOpen={(id: string) => {
+                                setIsMenuByIdOpen(id);
+                            }}
+                        >
+                            {b.isShared && (
+                                <SharedIcon
+                                    createdById={b.createdBy.azureUniqueId}
+                                    createdBy={b.createdBy.name}
+                                />
+                            )}
+                        </Row>
+                    ))}
+                </Section>
+            ))}
+        </>
+    );
+};
+
+function createBookmarkActions(
+    bookmark: Bookmark,
+    deleteBookmarkById: (bookmarkId: string) => Promise<string>,
+    editBookmark: (bookmark: string) => void,
+    shareBookmark: (bookmark: Bookmark) => void,
+    removeBookmarkFavorite: (bookmarkId: string) => void,
+    updateBookmarkWithCurrentView: (bookmark: Bookmark) => void,
+    appKey?: string,
+    localAccountId?: string
+) {
+    if (bookmark.createdBy.azureUniqueId === localAccountId) {
+        return [
+            {
+                name: 'Edit',
+                disabled: appKey !== bookmark.appKey,
+                onClick: () => {
+                    editBookmark(bookmark.id);
+                },
+                Icon: <Icon name="edit" />,
+            },
+            {
+                name: 'Update with current view',
+                disabled: appKey !== bookmark.appKey,
+                onClick: () => {
+                    updateBookmarkWithCurrentView(bookmark);
+                },
+                Icon: <Icon name="update" />,
+            },
+            {
+                name: 'Remove',
+                disabled: false,
+                onClick: () => {
+                    deleteBookmarkById(bookmark.id);
+                },
+                Icon: <Icon name="delete_to_trash" />,
+            },
+            {
+                name: bookmark.isShared ? 'Unshare' : 'Share',
+                disabled: false,
+                onClick: () => {
+                    shareBookmark(bookmark);
+                },
+                Icon: <Icon name="share" />,
+            },
+        ];
+    } else {
+        return [
+            {
+                name: 'Unfavourite',
+                disabled: false,
+                onClick: () => {
+                    removeBookmarkFavorite(bookmark.id);
+                },
+                Icon: <Icon name="close" />,
+            },
+        ];
+    }
+}

package/src/components/shared/SharedIcon.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import { Icon } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+import { useFramework } from '@equinor/fusion-framework-react';
+
+type SharedIconProps = {
+    createdBy: string;
+    createdById: string;
+};
+
+export const SharedIcon = ({ createdBy, createdById }: SharedIconProps) => {
+    const myId = useFramework().modules.auth.defaultAccount?.localAccountId;
+
+    const isMe = createdById === myId;
+
+    return (
+        <StyledRow>
+            {!isMe && <StyledCreatedBy>shared by {createdBy}</StyledCreatedBy>}
+            <Icon
+                name="share"
+                color={
+                    isMe
+                        ? tokens.colors.interactive.primary__resting.hex
+                        : tokens.colors.interactive.disabled__border.hex
+                }
+            />
+        </StyledRow>
+    );
+};
+
+const StyledRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.2em;
+`;
+
+const StyledCreatedBy = styled.p`
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0em;
+    text-align: right;
+`;

package/src/hooks/index.ts

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

package/src/hooks/useBookmarkGrouping.ts

@@ -0,0 +1,54 @@
+import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+
+import { useState } from 'react';
+
+export type GroupingKeys = 'Group by app' | 'Created by' | 'Group by Context';
+
+const groupingModes: Record<GroupingKeys, (item: Bookmark) => string> = {
+    'Group by app': (item: Bookmark) => item.appKey,
+    'Created by': (item: Bookmark) => item.createdBy.name,
+    'Group by Context': (item: Bookmark) => item?.context?.name ?? 'Unknown',
+} as const;
+
+export const useBookmarkGrouping = (bookmarks?: Bookmark[]) => {
+    const [searchText, setSearchText] = useState<string | null>(null);
+
+    const [groupByKey, setGroupBy] = useState<keyof typeof groupingModes>('Group by app');
+
+    const bookmarkGroups = groupBy(bookmarks || [], groupingModes[groupByKey], searchText, 'name');
+
+    return {
+        setGroupBy,
+        setSearchText,
+        searchText,
+        bookmarkGroups,
+        groupingModes,
+        groupByKey,
+    };
+};
+
+const groupBy = <T>(
+    array: T[],
+    getKey: (item: T) => string,
+    searchText: string | null,
+    field: keyof T
+) => {
+    return (
+        array
+            ?.map(getKey)
+            .filter((v, i, a) => a.indexOf(v) === i)
+            .map((groupingProperty) => ({
+                groupingProperty,
+                values: array
+                    .filter((s) => getKey(s) === groupingProperty)
+                    .filter((s) => {
+                        const fieldData = s[field];
+                        if (typeof fieldData === 'string' && searchText) {
+                            return fieldData.includes(searchText);
+                        }
+
+                        return true;
+                    }),
+            })) ?? []
+    );
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Bookmark } from './components/Bookmark';
+export { BookmarkProvider } from './components/BookmarkProvider';

package/src/utils/append-bookmark-to-uri.ts

@@ -0,0 +1,5 @@
+export const appendBookmarkIdToUrl = (id: string): string => {
+    const url = new URL(window.location.toString());
+    url.searchParams.set('bookmarkId', id);
+    return url.toString();
+};

package/src/utils/utils.ts

@@ -0,0 +1,12 @@
+import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+
+/** Helpers.. */
+export const filterEmptyGroups = (i: { values: Bookmark[] }) => i.values.length;
+export const sortByName = (a: Bookmark, b: Bookmark) => a.name.localeCompare(b.name);
+// const extractNameFromMail = (mail: string) => mail.split('@')[0].toLowerCase();
+
+export const toHumanReadable = (val: string) =>
+    val
+        .split('-')
+        .map((s) => `${s[0].toUpperCase()}${s.slice(1)}`)
+        .join(' ');

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "rootDir": "src",
+    "declarationDir": "./dist/types",
+    "baseUrl": "src",
+  },
+  "references": [
+
+  ],
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}