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

package/src/components/SimpleErrorBoundary/SimpleErrorBoundaryContent/SimpleErrorBoundaryContent.tsx

@@ -1,41 +0,0 @@
-// 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 {FrownOutlined} from '@ant-design/icons';
-import {Result} from 'antd';
-import {ErrorInfo} from 'react';
-import styled from 'styled-components';
-
-interface IErrorBoundaryContentProps {
-    error?: Error;
-    errorInfo?: ErrorInfo;
-}
-
-const ErrorResult = styled(Result)`
-    font-size: 1rem;
-
-    .ant-result-content {
-        padding: 1rem;
-        background: none;
-
-        details {
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            padding: 1rem;
-        }
-    }
-`;
-
-function SimpleErrorBoundaryContent({error, errorInfo}: IErrorBoundaryContentProps): JSX.Element {
-    return (
-        <ErrorResult status="error" title="An error occurred" icon={<FrownOutlined />}>
-            <details style={{whiteSpace: 'pre-wrap'}}>
-                {error && error.toString()}
-                <br />
-                {errorInfo.componentStack}
-            </details>
-        </ErrorResult>
-    );
-}
-
-export default SimpleErrorBoundaryContent;

package/src/components/SimpleErrorBoundary/SimpleErrorBoundaryContent/index.ts

@@ -1,5 +0,0 @@
-// 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 SimpleErrorBoundaryContent from './SimpleErrorBoundaryContent';
-export default SimpleErrorBoundaryContent;

package/src/components/SimpleErrorBoundary/index.ts

@@ -1,4 +0,0 @@
-// 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 {SimpleErrorBoundary} from './SimpleErrorBoundary';

package/src/components/SubmitStateNotifier/SubmitStateNotifier.test.tsx

@@ -1,13 +0,0 @@
-// 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 SubmitStateNotifier from './SubmitStateNotifier';
-
-describe('SubmitStateNotifier', () => {
-    test('Render test', async () => {
-        render(<SubmitStateNotifier state="processing" />);
-
-        expect(screen.getByRole('img')).toBeInTheDocument();
-    });
-});

package/src/components/SubmitStateNotifier/SubmitStateNotifier.tsx

@@ -1,83 +0,0 @@
-// 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 {CheckOutlined, CloseCircleOutlined, LoadingOutlined} from '@ant-design/icons';
-import {useEffect, useState} from 'react';
-import styled from 'styled-components';
-import {SubmitStateNotifierStates} from './_types';
-
-interface ISubmitStateNotifierProps {
-    state: SubmitStateNotifierStates;
-    style?: React.CSSProperties;
-}
-
-const delay = 3000;
-const animationDuration = 350;
-
-const SuccessIcon = styled(CheckOutlined)`
-    animation: appear 500ms, ${animationDuration}ms disappear ${delay - animationDuration}ms;
-    color: ${props => props.theme?.antd?.colorSuccess ?? 'inherit'};
-
-    @keyframes disappear {
-        from {
-            opacity: 1;
-            transform: scale(1);
-        }
-        to {
-            opacity: 0;
-            transform: scale(5);
-        }
-    }
-
-    @keyframes appear {
-        from {
-            opacity: 0;
-            transform: scale(5);
-        }
-        to {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-`;
-
-const ErrorIcon = styled(CloseCircleOutlined)`
-    color: ${props => props.theme?.antd?.colorError ?? 'inherit'};
-`;
-
-function SubmitStateNotifier({state, style}: ISubmitStateNotifierProps): JSX.Element {
-    let icon = null;
-    const [currentState, setCurrentState] = useState<ISubmitStateNotifierProps['state']>('idle');
-
-    useEffect(() => {
-        let timeoutId: NodeJS.Timeout;
-        setCurrentState(state);
-
-        // If state is succcess, set it to idle after 2 seconds
-        if (state === 'success') {
-            timeoutId = setTimeout(() => {
-                setCurrentState('idle');
-            }, delay);
-        }
-
-        return () => {
-            clearTimeout(timeoutId);
-        };
-    }, [state]);
-
-    switch (currentState) {
-        case 'processing':
-            icon = <LoadingOutlined />;
-            break;
-        case 'success':
-            icon = <SuccessIcon />;
-            break;
-        case 'error':
-            icon = <ErrorIcon />;
-            break;
-    }
-
-    return <span style={style}>{icon}</span>;
-}
-
-export default SubmitStateNotifier;

package/src/components/SubmitStateNotifier/_types.ts

@@ -1,4 +0,0 @@
-// 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 type SubmitStateNotifierStates = 'idle' | 'processing' | 'success' | 'error';

package/src/components/SubmitStateNotifier/index.ts

@@ -1,5 +0,0 @@
-// 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 SubmitStateNotifier} from './SubmitStateNotifier';
-export * from './_types';

package/src/components/TreePicker/TreePicker.test.tsx

@@ -1,208 +0,0 @@
-// 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 {GetTreesDocument, IsAllowedDocument, PermissionsActions, PermissionTypes} from '_ui/_gqlTypes';
-import {mockTreeSimple} from '_ui/__mocks__/common/tree';
-import {render, screen, waitFor, within} from '../../_tests/testUtils';
-import TreePicker from './TreePicker';
-
-window.matchMedia = query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-});
-
-jest.mock('../EditTreeModal', () => {
-    return {
-        EditTreeModal: () => {
-            return <div>EditTree</div>;
-        }
-    };
-});
-
-jest.mock('../../hooks/useSharedTranslation/useSharedTranslation');
-
-describe('TreePicker', () => {
-    const mockTreeA = {
-        __typename: 'Tree',
-        ...mockTreeSimple,
-        id: 'treeA'
-    };
-    const mockTreeB = {
-        __typename: 'Tree',
-        ...mockTreeSimple,
-        id: 'treeB'
-    };
-    const mockTreeC = {
-        __typename: 'Tree',
-        ...mockTreeSimple,
-        id: 'treeC'
-    };
-
-    const mocks = [
-        {
-            request: {
-                query: GetTreesDocument,
-                variables: {}
-            },
-            result: {
-                data: {
-                    trees: {
-                        list: [mockTreeA, mockTreeB, mockTreeC]
-                    }
-                }
-            }
-        },
-        {
-            request: {
-                query: IsAllowedDocument,
-                variables: {
-                    type: PermissionTypes.admin,
-                    actions: [PermissionsActions.admin_create_tree]
-                }
-            },
-            result: {
-                data: {
-                    isAllowed: [
-                        {
-                            name: PermissionsActions.admin_create_tree,
-                            allowed: true
-                        }
-                    ]
-                }
-            }
-        }
-    ];
-
-    test('Display trees', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<TreePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.getByText('treeA')).toBeInTheDocument();
-        expect(screen.getByText('treeB')).toBeInTheDocument();
-        expect(screen.getByText('treeC')).toBeInTheDocument();
-    });
-
-    test('Can filter list', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<TreePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.getByText('treeA')).toBeInTheDocument();
-        expect(screen.getByText('treeB')).toBeInTheDocument();
-        expect(screen.getByText('treeC')).toBeInTheDocument();
-
-        await userEvent.type(screen.getByRole('textbox'), 'treeA');
-        expect(screen.getByRole('textbox')).toHaveValue('treeA');
-
-        expect(screen.getByText('treeA')).toBeInTheDocument();
-        expect(screen.queryByText('treeB')).not.toBeInTheDocument();
-        expect(screen.queryByText('treeC')).not.toBeInTheDocument();
-    });
-
-    test('Select elements and submit', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<TreePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        userEvent.click(screen.getByText('treeA'));
-        const rows = screen.getAllByRole('row');
-        const rowAttributeA = rows[0];
-        const rowAttributeB = rows[1];
-        const rowAttributeC = rows[2];
-
-        // Select 'treeA'
-        const checkboxAttributeA = within(rowAttributeA).getByRole('checkbox'); // First checkbox is for the table header
-        await waitFor(() => expect(checkboxAttributeA).toBeChecked());
-
-        // Unselect 'treeA'
-        userEvent.click(checkboxAttributeA);
-        await waitFor(() => expect(checkboxAttributeA).not.toBeChecked());
-
-        // Select "treeB" and "treeC"
-        const checkboxAttributeB = within(rowAttributeB).getByRole('checkbox'); // First checkbox is for the table header
-        userEvent.click(checkboxAttributeB);
-
-        const checkboxAttributeC = within(rowAttributeC).getByRole('checkbox'); // First checkbox is for the table header
-        userEvent.click(checkboxAttributeC);
-
-        userEvent.click(screen.getByRole('button', {name: /submit/i}));
-
-        await waitFor(() => expect(mockHandleSubmit).toHaveBeenCalledWith([mockTreeB, mockTreeC]), {
-            timeout: 10000
-        });
-    });
-
-    test('If not multiple, only one element can be selected', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<TreePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open multiple={false} />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        userEvent.click(screen.getByText('treeA'));
-        const radioBtnAttributeA = within(screen.getByRole('row', {name: /treeA/i})).getByRole('radio');
-        const radioBtnAttributeB = within(screen.getByRole('row', {name: /treeA/i})).getByRole('radio');
-        await waitFor(() => expect(radioBtnAttributeA).toBeChecked());
-
-        userEvent.click(screen.getByText('treeB'));
-        await waitFor(() => expect(radioBtnAttributeB).toBeChecked());
-        await waitFor(() => expect(radioBtnAttributeA).not.toBeChecked());
-    });
-
-    test('Can create new tree', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<TreePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        const newTreeButton = screen.queryByRole('button', {name: /new_tree/i});
-        expect(newTreeButton).toBeInTheDocument();
-
-        userEvent.click(newTreeButton);
-        expect(await screen.findByText('EditTree')).toBeInTheDocument();
-    });
-
-    test('If not allowed, cannot create new tree', async () => {
-        const mocksNotAllowed = [
-            mocks[0],
-            {
-                request: {
-                    query: IsAllowedDocument,
-                    variables: {
-                        type: PermissionTypes.admin,
-                        actions: [PermissionsActions.admin_create_tree]
-                    }
-                },
-                result: {
-                    data: {
-                        isAllowed: [
-                            {
-                                name: PermissionsActions.admin_create_tree,
-                                allowed: false
-                            }
-                        ]
-                    }
-                }
-            }
-        ];
-
-        const mockHandleSubmit = jest.fn();
-        render(<TreePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {
-            mocks: mocksNotAllowed
-        });
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.queryByRole('button', {name: /new_tree/i})).not.toBeInTheDocument();
-    });
-});

package/src/components/TreePicker/TreePicker.tsx

@@ -1,60 +0,0 @@
-// 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 {useState} from 'react';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {TreeLightFragment} from '_ui/_gqlTypes';
-import {TreesList} from './TreesList';
-
-interface ITreePickerProps {
-    open: boolean;
-    onClose: () => void;
-    onSubmit: (selectedTrees: TreeLightFragment[]) => Promise<void>;
-    selected?: string[];
-    multiple?: boolean;
-    showSelected?: boolean;
-}
-
-function TreePicker({
-    open,
-    onClose,
-    onSubmit,
-    selected = [],
-    multiple = true,
-    showSelected = false
-}: ITreePickerProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const [selectedTrees, setSelectedTrees] = useState<TreeLightFragment[]>([]);
-    const [isLoading, setIsLoading] = useState(false);
-
-    const _handleSelect = (selection: TreeLightFragment[]) => {
-        setSelectedTrees(selection);
-    };
-
-    const _handleSubmit = async () => {
-        setIsLoading(true);
-        await onSubmit(selectedTrees);
-        setIsLoading(false);
-        onClose();
-    };
-
-    return (
-        <Modal
-            open={open}
-            onCancel={onClose}
-            width={800}
-            title={t('trees.select_trees')}
-            onOk={_handleSubmit}
-            destroyOnClose
-            okText={t('global.submit')}
-            cancelText={t('global.cancel')}
-            confirmLoading={isLoading}
-            centered
-        >
-            <TreesList onSelect={_handleSelect} selected={selected} multiple={multiple} showSelected={showSelected} />
-        </Modal>
-    );
-}
-
-export default TreePicker;

package/src/components/TreePicker/TreesList/TreesList.tsx

@@ -1,208 +0,0 @@
-// 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 {PlusOutlined} from '@ant-design/icons';
-import {useApolloClient} from '@apollo/client';
-import {localizedTranslation, Override} from '@leav/utils';
-import {Button, Input, Table, TableColumnsType} from 'antd';
-import {ComponentProps, Key, useState} from 'react';
-import styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {
-    GetTreesQuery,
-    PermissionsActions,
-    PermissionTypes,
-    TreeLightFragment,
-    useGetTreesQuery,
-    useIsAllowedQuery
-} from '_ui/_gqlTypes';
-import {getTreesQuery} from '_ui/_queries/trees/getTreesQuery';
-import {extractPermissionFromQuery} from '_ui/_utils';
-import {PreviewSize} from '../../../constants';
-import {useLang} from '../../../hooks';
-import {EditTreeModal} from '../../EditTreeModal';
-import {EntityCard, IEntityData} from '../../EntityCard';
-import {ErrorDisplay} from '../../ErrorDisplay';
-import {Loading} from '../../Loading';
-
-const HeaderWrapper = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.5rem;
-
-    > input {
-        flex-grow: 1;
-    }
-`;
-
-type TreeType = Override<GetTreesQuery['trees']['list'][number], {label: string}> & {key: string};
-
-interface ITreesListProps {
-    onSelect: (selectedTrees: TreeLightFragment[]) => void;
-    selected?: string[];
-    multiple?: boolean;
-    showSelected?: boolean;
-}
-
-function TreesList({onSelect, selected = [], multiple = true, showSelected = false}: ITreesListProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-    const {loading, error, data} = useGetTreesQuery();
-
-    const isAllowedQueryResult = useIsAllowedQuery({
-        fetchPolicy: 'cache-and-network',
-        variables: {
-            type: PermissionTypes.admin,
-            actions: [PermissionsActions.admin_create_tree]
-        }
-    });
-    const canCreate = extractPermissionFromQuery(isAllowedQueryResult, PermissionsActions.admin_create_tree);
-
-    const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>(showSelected ? selected : []);
-    const [search, setSearch] = useState('');
-    const [isNewTreeModalOpen, setIsNewTreeModalOpen] = useState(false);
-    const client = useApolloClient();
-
-    const _getTreesFromKeys = (keys: Key[], treesList?: TreeLightFragment[]): TreeLightFragment[] => {
-        // The list coming from data might not be up to date after a create, so we use the one passed as argument
-        const list = treesList ?? data?.trees?.list ?? [];
-        return list.filter(tree => keys.find(k => tree.id === k));
-    };
-
-    const _handleSelectionChange = (selection: Key[]) => {
-        setSelectedRowKeys(selection);
-        const treesSelected = _getTreesFromKeys(selection);
-        onSelect(treesSelected);
-    };
-
-    const _handleRowClick = (record: TreeType) => {
-        let newSelection: Key[];
-
-        if (selectedRowKeys.indexOf(record.key) === -1) {
-            newSelection = multiple ? [...selectedRowKeys, record.key] : [record.key]; // Add to selection
-        } else {
-            newSelection = multiple ? selectedRowKeys.filter(key => key !== record.key) : []; // Remove from selection
-        }
-
-        _handleSelectionChange(newSelection);
-    };
-
-    const _handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSearch(e.currentTarget.value);
-    };
-
-    const _handleClickNewTree = () => {
-        setIsNewTreeModalOpen(true);
-    };
-    const _handleCloseNewAttribute = () => setIsNewTreeModalOpen(false);
-
-    const _handlePostCreate: ComponentProps<typeof EditTreeModal>['onPostCreate'] = async newTree => {
-        const allTreesData = client.readQuery<GetTreesQuery>({query: getTreesQuery});
-
-        const newTreesList = [newTree, ...(allTreesData?.trees?.list ?? [])];
-        if (allTreesData) {
-            client.writeQuery({
-                query: getTreesQuery,
-                data: {
-                    trees: {
-                        ...allTreesData.trees,
-                        list: newTreesList
-                    }
-                }
-            });
-        }
-
-        const newSelection = [...selectedRowKeys, newTree.id];
-        setSelectedRowKeys(newSelection);
-        const treesSelected = _getTreesFromKeys(newSelection, newTreesList);
-        onSelect(treesSelected);
-    };
-
-    if (loading) {
-        return <Loading />;
-    }
-
-    if (error) {
-        return <ErrorDisplay message={error.message} />;
-    }
-
-    const columns: TableColumnsType<TreeType> = [
-        {
-            title: t('trees.tree'),
-            key: 'tree',
-            render: (_, tree) => {
-                const treeIdentity: IEntityData = {
-                    label: tree.label,
-                    subLabel: tree.id,
-                    preview: null,
-                    color: null
-                };
-                return <EntityCard entity={treeIdentity} size={PreviewSize.small} />;
-            }
-        }
-    ];
-
-    const tableData: TreeType[] = ([...data?.trees?.list] ?? [])
-        .filter(tree => {
-            // Do not display already selected libraries
-            if (!showSelected && selected.find(selectedTree => selectedTree === tree.id)) {
-                return false;
-            }
-
-            // Filter based on search
-            const label = localizedTranslation(tree.label, lang);
-            const searchStr = search.toLowerCase();
-
-            // Search on id or label
-            return tree.id.toLowerCase().includes(searchStr) || label.toLowerCase().includes(searchStr);
-        })
-        .map(tree => ({
-            ...tree,
-            key: tree.id,
-            label: localizedTranslation(tree.label, lang)
-        }));
-
-    const tableHeader = (
-        <HeaderWrapper>
-            <Input.Search onChange={_handleSearchChange} placeholder={t('global.search') + '...'} allowClear />
-            {canCreate && (
-                <Button type="primary" icon={<PlusOutlined />} onClick={_handleClickNewTree}>
-                    {t('trees.new_tree')}
-                </Button>
-            )}
-        </HeaderWrapper>
-    );
-
-    return (
-        <>
-            <Table
-                size="middle"
-                rowSelection={{
-                    type: multiple ? 'checkbox' : 'radio',
-                    selectedRowKeys,
-                    onChange: _handleSelectionChange
-                }}
-                columns={columns}
-                dataSource={tableData}
-                bordered
-                pagination={false}
-                scroll={{y: 'calc(95vh - 20rem)'}}
-                title={() => tableHeader}
-                onRow={record => ({
-                    onClick: () => _handleRowClick(record)
-                })}
-            />
-            {isNewTreeModalOpen && (
-                <EditTreeModal
-                    open={isNewTreeModalOpen}
-                    onClose={_handleCloseNewAttribute}
-                    onPostCreate={_handlePostCreate}
-                    width={790}
-                />
-            )}
-        </>
-    );
-}
-
-export default TreesList;

package/src/components/TreePicker/TreesList/index.ts

@@ -1,4 +0,0 @@
-// 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 TreesList} from './TreesList';

package/src/components/TreePicker/index.ts

@@ -1,4 +0,0 @@
-// 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 TreePicker} from './TreePicker';