@equinor/fusion-framework-react-components-bookmark 0.0.0-context-error-20240131144633

package/src/components/filter/Filter.tsx

@@ -0,0 +1,58 @@
+import { Search, Autocomplete } from '@equinor/eds-core-react';
+import { 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;
+    `,
+};
+
+export const BookmarkFilter = ({
+    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>
+    );
+};

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

@@ -0,0 +1,57 @@
+import { Button, Dialog } from '@equinor/eds-core-react';
+import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { useEffect, useState } from 'react';
+
+import styled from 'styled-components';
+
+const Styled = {
+    Actions: styled.div`
+        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>
+                <Styled.Actions>
+                    <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>
+                </Styled.Actions>
+            </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/messages/Message.tsx

@@ -0,0 +1,82 @@
+import { Icon, Typography } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+import { error_outlined, file_description } from '@equinor/eds-icons';
+
+export type PortalMessageType = 'Error' | 'Info' | 'Warning' | 'NoContent';
+
+const getMessageType = (type?: PortalMessageType) => {
+    switch (type) {
+        case 'Error':
+            return { color: tokens.colors.interactive.danger__resting.hex, icon: error_outlined };
+        case 'Info':
+            return { color: tokens.colors.interactive.primary__resting.hex, icon: error_outlined };
+        case 'Warning':
+            return { color: tokens.colors.interactive.warning__resting.hex, icon: error_outlined };
+        case 'NoContent':
+            return {
+                color: tokens.colors.interactive.primary__resting.hex,
+                icon: file_description,
+            };
+        default:
+            return undefined;
+    }
+};
+
+const Styles = {
+    Wrapper: styled.div`
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        justify-content: center;
+    `,
+    Content: styled.div`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        justify-content: center;
+    `,
+};
+
+type MessageProps = {
+    readonly title: string;
+    readonly body?: React.FC | string;
+    readonly type?: PortalMessageType;
+    readonly color?: string;
+};
+
+export const Message = ({
+    title,
+    type = 'Info',
+    color,
+    children,
+}: PropsWithChildren<MessageProps>) => {
+    const currentType = getMessageType(type);
+    return (
+        <Styles.Wrapper>
+            <Icon
+                data-testid="icon"
+                size={40}
+                color={currentType?.color || color || tokens.colors.text.static_icons__tertiary.hex}
+                data={currentType?.icon || error_outlined}
+            />
+            <Styles.Content>
+                <Typography
+                    color={tokens.colors.text.static_icons__default.hex}
+                    variant={'h3'}
+                    aria-label={`Title for ${type} message`}
+                >
+                    {title}
+                </Typography>
+
+                <Typography>{children && children}</Typography>
+            </Styles.Content>
+        </Styles.Wrapper>
+    );
+};

package/src/components/row/MoreMenu.tsx

@@ -0,0 +1,34 @@
+import { Menu } from '@equinor/eds-core-react';
+import { MutableRefObject } from 'react';
+import { MenuOption } from './Row';
+
+type MenuProps = {
+    readonly pRef: MutableRefObject<HTMLElement | null>;
+    readonly onClose: VoidFunction;
+    readonly open: boolean;
+    readonly 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,92 @@
+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';
+
+import styled from 'styled-components';
+
+export type MenuOption = {
+    name: string;
+    disabled: boolean;
+    onClick: VoidFunction;
+    Icon?: ReactNode;
+};
+
+type RowProps = {
+    readonly name: string;
+    readonly id: string;
+    readonly menuOpen: boolean;
+    readonly onMenuOpen: (id: string) => void;
+    readonly menuOptions: MenuOption[];
+    readonly children?: ReactNode;
+};
+
+const Styled = {
+    Icons: styled.div`
+        display: flex;
+        flex-direction: row;
+        gap: 0.2em;
+        align-items: center;
+    `,
+    ListItem: styled.div`
+        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(''));
+
+    // TODO: @noggling fix this
+    return (
+        /* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions*/
+        <Styled.ListItem
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setCurrentBookmark(id);
+            }}
+        >
+            <Typography>{name}</Typography>
+            <Styled.Icons>
+                {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}
+                />
+            </Styled.Icons>
+        </Styled.ListItem>
+    );
+};

package/src/components/section/Section.tsx

@@ -0,0 +1,57 @@
+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 { tokens } from '@equinor/eds-tokens';
+import styled from 'styled-components';
+
+const Styled = {
+    Button: 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;
+        }
+    `,
+    List: styled.ol`
+        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};
+    `,
+};
+
+Icon.add({
+    chevron_down,
+    chevron_right,
+});
+
+type SectionProps = {
+    readonly name: string;
+    readonly children: ReactNode;
+};
+export const Section = ({ children, name }: SectionProps) => {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    return (
+        <div>
+            <Styled.Button variant="ghost" onClick={() => setIsExpanded((s) => !s)}>
+                <Icon name={isExpanded ? chevron_down.name : chevron_right.name} />
+                <Typography variant="h6">{name}</Typography>
+            </Styled.Button>
+            {isExpanded && <Styled.List>{children}</Styled.List>}
+        </div>
+    );
+};

package/src/components/sectionList/SectionList.tsx

@@ -0,0 +1,161 @@
+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';
+// TODO - export from `@equinor/fusion-framework-react-module-bookmark`
+import type { 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, 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';
+
+Icon.add({
+    delete_to_trash,
+    edit,
+    share,
+    close,
+    update,
+});
+
+type SectionListProps = {
+    readonly bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
+};
+
+export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
+    const { deleteBookmarkById, getCurrentAppKey, updateBookmark, removeBookmarkFavorite } =
+        useBookmark();
+
+    const user = useCurrentUser();
+    const [isMenuByIdOpen, setIsMenuByIdOpen] = useState('');
+
+    const { event } = useFramework().modules;
+
+    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,
+        );
+
+    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 | undefined>,
+    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,45 @@
+import { Icon } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+import { useFramework } from '@equinor/fusion-framework-react';
+
+import styled from 'styled-components';
+
+const Styled = {
+    Row: styled.div`
+        display: flex;
+        align-items: center;
+        gap: 0.2em;
+    `,
+    CreatedBy: styled.p`
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 16px;
+        letter-spacing: 0em;
+        text-align: right;
+    `,
+};
+
+type SharedIconProps = {
+    readonly createdBy: string;
+    readonly createdById: string;
+};
+
+export const SharedIcon = ({ createdBy, createdById }: SharedIconProps) => {
+    const myId = useFramework().modules.auth.defaultAccount?.localAccountId;
+
+    const isMe = createdById === myId;
+
+    return (
+        <Styled.Row>
+            {!isMe && <Styled.CreatedBy>shared by {createdBy}</Styled.CreatedBy>}
+            <Icon
+                name="share"
+                color={
+                    isMe
+                        ? tokens.colors.interactive.primary__resting.hex
+                        : tokens.colors.interactive.disabled__border.hex
+                }
+            />
+        </Styled.Row>
+    );
+};

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(' ');