@leav/ui 0.0.1-alpha-1 → 0.0.1-alpha-2

package/src/components/SearchModal/SearchModal.test.tsx

@@ -0,0 +1,38 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {getLibraryDetailExtendedQuery} from '_ui/_queries/libraries/getLibraryDetailExtendQuery';
+import {render, screen, waitFor} from '_ui/_tests/testUtils';
+import {
+    mockGetLibraryDetailExtendedQuery,
+    mockGetLibraryDetailExtendedQueryVar
+} from '_ui/__mocks__/mockQuery/mockGetLibraryDetailExtendedQuery';
+import SearchModal from './SearchModal';
+
+jest.mock('_ui/components/LibraryItemsList', () => ({
+    LibraryItemsList: () => <div>LibraryItemsList</div>
+}));
+
+describe('SearchModal', () => {
+    test('should contain LibraryItemsList', async () => {
+        const mocks = [
+            {
+                request: {
+                    query: getLibraryDetailExtendedQuery(100),
+                    variables: mockGetLibraryDetailExtendedQueryVar
+                },
+                result: {
+                    data: mockGetLibraryDetailExtendedQuery
+                }
+            }
+        ];
+
+        render(<SearchModal libId="test" visible={true} setVisible={jest.fn()} submitAction={jest.fn()} />, {
+            mocks
+        });
+
+        await waitFor(() => screen.getByText('LibraryItemsList'));
+
+        expect(screen.getByText('LibraryItemsList')).toBeInTheDocument();
+    });
+});

package/src/components/SearchModal/SearchModal.tsx

@@ -0,0 +1,85 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {Modal} from 'antd';
+import {FunctionComponent, useState} from 'react';
+import {LibraryItemsList} from '_ui/components/LibraryItemsList';
+import {ErrorDisplayTypes} from '_ui/constants';
+import useGetLibraryDetailExtendedQuery from '_ui/hooks/useGetLibraryDetailExtendedQuery/useGetLibraryDetailExtendedQuery';
+import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
+import {ISearchSelection} from '_ui/types';
+import {ErrorDisplay} from '../ErrorDisplay';
+import {Loading} from '../Loading';
+
+interface ISearchModalProps {
+    libId: string;
+    visible: boolean;
+    setVisible: (visible: boolean) => void;
+    submitAction: (selection: ISearchSelection) => void;
+}
+
+export const SearchModal: FunctionComponent<ISearchModalProps> = ({visible, setVisible, submitAction, libId}) => {
+    const {t} = useSharedTranslation();
+    const [selection, setSelection] = useState<ISearchSelection>({selected: [], allSelected: false});
+
+    const _handleModalClose = () => {
+        setVisible(false);
+    };
+
+    const _handleOk = () => {
+        submitAction(selection);
+        _handleModalClose();
+    };
+
+    const _handleSelectionChange = (newSelection: ISearchSelection) => {
+        setSelection(newSelection);
+    };
+
+    const renderModal = (content: JSX.Element): JSX.Element => (
+        <Modal
+            open={visible}
+            onCancel={_handleModalClose}
+            width="95vw"
+            bodyStyle={{height: '90vh', overflow: 'hidden'}}
+            style={{
+                top: '1rem'
+            }}
+            onOk={_handleOk}
+            okText={t('global.apply')}
+            cancelText={t('global.cancel')}
+        >
+            {content}
+        </Modal>
+    );
+
+    const {loading, data, error} = useGetLibraryDetailExtendedQuery({library: libId});
+
+    if (loading) {
+        return renderModal(<Loading />);
+    }
+
+    if (error) {
+        return renderModal(<ErrorDisplay message={error.message} />);
+    }
+
+    if (!data?.libraries?.list?.length) {
+        return renderModal(<ErrorDisplay message={t('lib_detail.not_found', {libraryId: libId})} />);
+    }
+
+    if (!data.libraries.list[0].permissions.access_library) {
+        return <ErrorDisplay type={ErrorDisplayTypes.PERMISSION_ERROR} showActionButton={false} />;
+    }
+
+    return renderModal(
+        <div style={{position: 'relative'}}>
+            <LibraryItemsList
+                selectionMode={true}
+                library={data.libraries.list[0]}
+                style={{height: 'calc(100vh - 11rem)'}}
+                onSelectChange={_handleSelectionChange}
+            />
+        </div>
+    );
+};
+
+export default SearchModal;

package/src/components/SearchModal/index.ts

@@ -0,0 +1,4 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+export {SearchModal} from './SearchModal';

package/src/components/SelectTreeNode/SelectTreeNode.test.tsx

@@ -0,0 +1,100 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {QueryResult} from '@apollo/client';
+import {Mockify} from '@leav/utils';
+import userEvent from '@testing-library/user-event';
+import * as gqlTypes from '_ui/_gqlTypes';
+import {render, screen, waitFor} from '_ui/_tests/testUtils';
+import SelectTreeNode from './SelectTreeNode';
+
+describe('SelectTreeNode', () => {
+    test('Render tree and navigate', async () => {
+        const mockResultFromRoot = {
+            treeNodeChildren: {
+                totalCount: 1,
+                list: [
+                    {
+                        id: 'id1',
+                        record: {
+                            id: 'id1',
+                            active: true,
+                            whoAmI: {
+                                id: 'id1',
+                                label: 'label1',
+                                color: null,
+                                library: {
+                                    id: 'categories',
+                                    label: {fr: 'Catégories'},
+                                    behavior: gqlTypes.LibraryBehavior.standard,
+                                    __typename: 'Library'
+                                },
+                                preview: null,
+                                __typename: 'RecordIdentity'
+                            },
+                            __typename: 'Categorie'
+                        },
+                        childrenCount: 1
+                    }
+                ]
+            }
+        };
+
+        const mockResultFromChild = {
+            treeNodeChildren: {
+                totalCount: 1,
+                list: [
+                    {
+                        id: 'id2',
+                        record: {
+                            id: 'id2',
+                            active: true,
+                            whoAmI: {
+                                __typename: 'RecordIdentity',
+                                id: 'id2',
+                                label: 'label2',
+                                color: null,
+                                library: {
+                                    id: 'categories',
+                                    label: {fr: 'Catégories'},
+                                    behavior: gqlTypes.LibraryBehavior.standard,
+                                    __typename: 'Library'
+                                },
+                                preview: null
+                            },
+                            __typename: 'Categorie'
+                        },
+                        childrenCount: 0,
+                        __typename: 'TreeNode'
+                    }
+                ]
+            }
+        };
+
+        const mockResult: Mockify<
+            QueryResult<gqlTypes.TreeNodeChildrenQuery, gqlTypes.TreeNodeChildrenQueryVariables>
+        > = {
+            called: true,
+            loading: false,
+            error: null
+        };
+
+        const spy = jest.spyOn(gqlTypes, 'useTreeNodeChildrenLazyQuery').mockReturnValue([
+            jest.fn().mockImplementation(({variables}) => {
+                return variables.node === null ? {data: mockResultFromRoot} : {data: mockResultFromChild};
+            }),
+            mockResult as QueryResult<gqlTypes.TreeNodeChildrenQuery, gqlTypes.TreeNodeChildrenQueryVariables>
+        ]);
+
+        render(<SelectTreeNode tree={{id: 'treeId', label: {fr: 'Tree Label'}}} onSelect={jest.fn()} />);
+
+        await waitFor(() => screen.getByText('Tree Label'));
+        expect(screen.getByText('Tree Label')).toBeInTheDocument();
+
+        // Expand node => fetch children
+        await userEvent.click(screen.getAllByRole('img', {name: 'toggle-children'}).pop());
+        await waitFor(() => expect(screen.getByText('label2')).toBeInTheDocument());
+
+        spy.mockRestore();
+    });
+});

package/src/components/SelectTreeNode/SelectTreeNode.tsx

@@ -0,0 +1,232 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {DownOutlined} from '@ant-design/icons';
+import {localizedTranslation} from '@leav/utils';
+import {Spin, Tree} from 'antd';
+import {Key} from 'antd/lib/table/interface';
+import {EventDataNode} from 'antd/lib/tree';
+import {useEffect, useState} from 'react';
+import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
+import {TreeNodeChildrenQuery, useTreeNodeChildrenLazyQuery} from '_ui/_gqlTypes';
+import {defaultPaginationPageSize, ErrorDisplay} from '../..';
+import useLang from '../../hooks/useLang';
+import {SystemTranslation} from '../../types/scalars';
+import {ITreeNodeWithRecord} from '../../types/trees';
+
+interface ISelectTreeNodeProps {
+    tree: {id: string; label?: SystemTranslation | null};
+    selectedNode?: string;
+    onSelect: (node: ITreeNodeWithRecord, selected: boolean) => void;
+    onCheck?: (selection: ITreeNodeWithRecord[]) => void;
+    multiple?: boolean;
+    canSelectRoot?: boolean;
+    selectableLibraries?: string[]; // all by default
+}
+
+const _constructTreeContent = (data: TreeNodeChildrenQuery['treeNodeChildren']['list']): ITreeNodeWithRecord[] => {
+    return data.map(e => {
+        return {
+            record: e.record,
+            title: e.record.whoAmI.label || e.record.whoAmI.id,
+            id: e.id,
+            key: e.id,
+            isLeaf: !e.childrenCount,
+            children: []
+        };
+    });
+};
+
+const _getTreeNodeByKey = (key: string, treeContent: ITreeNodeWithRecord[]): ITreeNodeWithRecord => {
+    for (const node of treeContent) {
+        if (key === node.key) {
+            return node;
+        }
+
+        const n = _getTreeNodeByKey(key, node.children);
+
+        if (!!n) {
+            return n;
+        }
+    }
+};
+
+type ITreeMapElement = ITreeNodeWithRecord & {
+    isLeaf?: boolean;
+    paginationOffset: number;
+    children: ITreeMapElement[];
+    isShowMore?: boolean;
+    selectable?: boolean;
+};
+
+interface ITreeMap {
+    [nodeId: string]: ITreeMapElement;
+}
+
+function SelectTreeNode({
+    tree,
+    onSelect,
+    onCheck,
+    selectedNode: initSelectedNode,
+    multiple = false,
+    canSelectRoot = false,
+    selectableLibraries
+}: ISelectTreeNodeProps): JSX.Element {
+    const {lang} = useLang();
+    const {t} = useSharedTranslation();
+
+    const rootNode: ITreeMapElement = {
+        title: localizedTranslation(tree.label, lang) || tree.id,
+        record: null,
+        id: tree.id,
+        key: tree.id,
+        isLeaf: false,
+        paginationOffset: 0,
+        children: []
+    };
+
+    // As we'll fetch children when a node is expanded, we store the whole tree content in a hash map
+    // to make update easier and more efficient
+    const [treeMap, setTreeMap] = useState<ITreeMap>({
+        [tree.id]: rootNode
+    });
+    const [selectedNode, setSelectedNode] = useState<string>(initSelectedNode);
+    const [fetchError, setFetchError] = useState<string>();
+
+    // Retrieve tree content
+    const [loadTreeContent, {error, called}] = useTreeNodeChildrenLazyQuery();
+
+    const _fetchTreeContent = async (key?: string, offset: number = 0) => {
+        try {
+            const data = await loadTreeContent({
+                variables: {
+                    treeId: tree.id,
+                    node: key && key !== tree.id ? key : null,
+                    pagination: {
+                        limit: defaultPaginationPageSize,
+                        offset
+                    }
+                }
+            });
+
+            const formattedNodes = _constructTreeContent(data.data.treeNodeChildren.list);
+            const parentMapKey = key ?? tree.id;
+
+            const newTreeMap = {...treeMap};
+            const totalCount = data.data.treeNodeChildren.totalCount;
+            const parentElement = newTreeMap[parentMapKey];
+            const showMoreKey = '__showMore' + parentMapKey + offset;
+
+            parentElement.children = parentElement.children.filter(
+                child => !child.key.match(`__showMore${parentMapKey}`)
+            ) as ITreeMapElement[];
+
+            for (const node of formattedNodes) {
+                const nodeForTreeMap = {...node, paginationOffset: 0};
+                newTreeMap[nodeForTreeMap.key] = nodeForTreeMap as ITreeMapElement;
+                parentElement.paginationOffset = offset;
+                parentElement.children.push(nodeForTreeMap);
+            }
+
+            if (totalCount > parentElement.paginationOffset + defaultPaginationPageSize) {
+                const showMoreElement: ITreeMapElement = {
+                    id: parentMapKey,
+                    key: showMoreKey,
+                    record: null,
+                    title: t('tree-node-selection.show_more'),
+                    isLeaf: false,
+                    paginationOffset: 0,
+                    isShowMore: true,
+                    selectable: false,
+                    children: []
+                };
+
+                parentElement.children.push(showMoreElement);
+            }
+            setTreeMap(newTreeMap);
+
+            setFetchError(null);
+        } catch (err) {
+            setFetchError((err as Error).message);
+        }
+    };
+
+    useEffect(() => {
+        setSelectedNode(initSelectedNode);
+    }, [initSelectedNode]);
+
+    useEffect(() => {
+        // Load root
+        _fetchTreeContent();
+    }, []);
+
+    const _handleLoadData = async (nodeData: EventDataNode<ITreeMapElement>) => {
+        const {id, isShowMore} = nodeData as EventDataNode<ITreeMapElement>;
+
+        // Handle offset if we get here through the "show more" element
+        const currentNodeOffset = treeMap[id]?.paginationOffset ?? 0;
+        const paginationOffset = isShowMore
+            ? (treeMap[id]?.paginationOffset ?? 0) + defaultPaginationPageSize
+            : currentNodeOffset;
+
+        if (id === tree.id && !isShowMore) {
+            // Root has already been loaded
+            return;
+        }
+
+        await _fetchTreeContent(String(id), paginationOffset);
+    };
+
+    const _handleSelect = (_, e: {selected: boolean; node: any}) => {
+        const node = treeMap[e.node.key];
+        const isRoot = node.id === tree.id;
+
+        if (
+            (!canSelectRoot && isRoot) ||
+            (!isRoot &&
+                typeof selectableLibraries !== 'undefined' &&
+                selectableLibraries.indexOf(node.record.whoAmI.library.id) === -1)
+        ) {
+            return;
+        }
+
+        if (node) {
+            onSelect(node, e.selected);
+        }
+    };
+
+    const _handleCheck = (selection: {checked: Key[]} | Key[]) => {
+        const checkedKeys = typeof selection === 'object' ? (selection as {checked: Key[]}).checked : selection;
+        const nodes = checkedKeys.map(key => treeMap[key]);
+        onCheck(nodes);
+    };
+
+    if (!called) {
+        return <Spin />;
+    }
+
+    if (error || fetchError) {
+        return <ErrorDisplay message={error?.message ?? fetchError} />;
+    }
+
+    return (
+        <Tree
+            defaultExpandedKeys={[tree.id]} // TODO: Should be selectedNode but more changes are needed
+            multiple={multiple}
+            selectable={true}
+            selectedKeys={[selectedNode]}
+            onSelect={_handleSelect}
+            onCheck={_handleCheck}
+            treeData={[treeMap[rootNode.key]]}
+            loadData={_handleLoadData}
+            checkStrictly
+            checkable={multiple}
+            showLine={{
+                showLeafIcon: false
+            }}
+            switcherIcon={<DownOutlined aria-label="toggle-children" />}
+        />
+    );
+}
+
+export default SelectTreeNode;

package/src/components/SelectTreeNode/index.ts

@@ -0,0 +1,4 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+export {default as SelectTreeNode} from './SelectTreeNode';

package/src/components/SelectTreeNodeModal/SelectTreeNodeModal.test.tsx

@@ -0,0 +1,35 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import userEvent from '@testing-library/user-event';
+import {render, screen, waitFor} from '../../_tests/testUtils';
+import SelectTreeNodeModal from './SelectTreeNodeModal';
+
+jest.mock('_ui/components/SelectTreeNode', () => ({
+    SelectTreeNode: () => <div>SelectTreeNode</div>
+}));
+
+describe('SelectTreeNodeModal', () => {
+    test('Should render', async () => {
+        const onSubmit = jest.fn();
+
+        render(
+            <SelectTreeNodeModal
+                tree={{id: 'treeId', label: {fr: 'tree'}}}
+                visible
+                onSubmit={onSubmit}
+                onClose={jest.fn()}
+            />
+        );
+
+        expect(screen.getByText('SelectTreeNode')).toBeInTheDocument();
+
+        const applyBtn = screen.getByRole('button', {name: 'global.apply'});
+
+        expect(applyBtn).toBeInTheDocument();
+
+        userEvent.click(applyBtn);
+
+        await waitFor(() => expect(onSubmit).toBeCalled());
+    });
+});

package/src/components/SelectTreeNodeModal/SelectTreeNodeModal.tsx

@@ -0,0 +1,75 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {Button, Modal} from 'antd';
+import {useState} from 'react';
+import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
+import {SystemTranslation} from '../../types/scalars';
+import {ITreeNode, ITreeNodeWithRecord} from '../../types/trees';
+import {SelectTreeNode} from '../SelectTreeNode';
+
+interface ISelectTreeNodeModalProps {
+    tree: {id: string; label?: SystemTranslation | null};
+    selectedNodeKey?: string;
+    visible: boolean;
+    onSubmit: (treeNode: ITreeNode) => void;
+    onClose: () => void;
+    canSelectRoot?: boolean;
+}
+
+export default function SelectTreeNodeModal({
+    tree,
+    selectedNodeKey,
+    onSubmit,
+    visible,
+    onClose,
+    canSelectRoot = false
+}: ISelectTreeNodeModalProps): JSX.Element {
+    const {t} = useSharedTranslation();
+    const [selectedNode, setSelectedNode] = useState<ITreeNode>({
+        id: selectedNodeKey,
+        key: selectedNodeKey,
+        title: '',
+        children: []
+    });
+
+    const handleCancel = () => {
+        onClose();
+    };
+
+    const handleApply = () => {
+        onSubmit(selectedNode);
+        onClose();
+    };
+
+    const onSelect = (node: ITreeNodeWithRecord, selected: boolean) => {
+        setSelectedNode(!selected ? undefined : node);
+    };
+
+    return (
+        <Modal
+            open={visible}
+            onCancel={handleCancel}
+            title={t('tree-node-selection.title')}
+            width="70rem"
+            bodyStyle={{maxHeight: '80vh', overflowY: 'auto'}}
+            centered
+            footer={[
+                <Button key="cancel" onClick={handleCancel}>
+                    {t('global.cancel')}
+                </Button>,
+                <Button type="primary" key="add" onClick={handleApply}>
+                    {t('global.apply')}
+                </Button>
+            ]}
+            destroyOnClose
+        >
+            <SelectTreeNode
+                tree={tree}
+                onSelect={onSelect}
+                selectedNode={selectedNode?.key}
+                canSelectRoot={canSelectRoot}
+            />
+        </Modal>
+    );
+}

package/src/components/SelectTreeNodeModal/index.ts

@@ -0,0 +1,5 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import SelectTreeNodeModal from './SelectTreeNodeModal';
+export default SelectTreeNodeModal;

package/src/components/SimpleErrorBoundary/SimpleErrorBoundary.test.tsx

@@ -0,0 +1,24 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {render, screen} from '../../_tests/testUtils';
+import {SimpleErrorBoundary} from './SimpleErrorBoundary';
+
+describe('SimpleErrorBoundary', () => {
+    beforeAll(() => jest.spyOn(console, 'error').mockImplementation(jest.fn()));
+    afterAll(() => (console.error as jest.Mock).mockRestore());
+
+    const ComponentWithError = () => {
+        throw new Error('boom!');
+    };
+
+    test('Display error message', async () => {
+        render(
+            <SimpleErrorBoundary>
+                <ComponentWithError />
+            </SimpleErrorBoundary>
+        );
+
+        expect(await screen.findByText(/boom/)).toBeInTheDocument();
+    });
+});

package/src/components/SimpleErrorBoundary/SimpleErrorBoundary.tsx

@@ -0,0 +1,39 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import * as React from 'react';
+import SimpleErrorBoundaryContent from './SimpleErrorBoundaryContent';
+
+interface ISimpleErrorBoundaryProps {
+    children?: React.ReactNode;
+}
+
+interface ISimpleErrorBoundaryState {
+    error: Error;
+    errorInfo: React.ErrorInfo;
+}
+
+export class SimpleErrorBoundary extends React.Component<ISimpleErrorBoundaryProps, ISimpleErrorBoundaryState> {
+    private constructor(props) {
+        super(props);
+        this.state = {error: null, errorInfo: null};
+    }
+
+    public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        // Catch errors in any components below and re-render with error message
+        this.setState({
+            error,
+            errorInfo
+        });
+    }
+
+    public render(): React.ReactNode {
+        if (this.state.errorInfo) {
+            // Display error
+            return <SimpleErrorBoundaryContent error={this.state.error} errorInfo={this.state.errorInfo} />;
+        }
+
+        // No error, just render children
+        return this.props.children;
+    }
+}