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

package/src/components/LibraryItemsList/shared/SelectCellsBtn.tsx

@@ -1,50 +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 {Button, ButtonProps} from 'antd';
-import {SizeType} from 'antd/lib/config-provider/SizeContext';
-import React from 'react';
-import {IRecordIdentityWhoAmI} from '_ui/types/records';
-import useSearchReducer from '../hooks/useSearchReducer';
-import {SearchActionTypes} from '../hooks/useSearchReducer/searchReducer';
-
-interface ISelectCellsBtnProps extends ButtonProps {
-    record: IRecordIdentityWhoAmI;
-    size: SizeType;
-    text: string;
-    selectionType: SelectCellsBtnType;
-}
-
-export enum SelectCellsBtnType {
-    ONLY = 'ONLY',
-    ALL = 'ALL'
-}
-
-function SelectCellsBtn({selectionType, record, size, text, ...btnProps}: ISelectCellsBtnProps): JSX.Element {
-    const {state, dispatch} = useSearchReducer();
-
-    const _handleClick = (e: React.SyntheticEvent) => {
-        e.stopPropagation();
-
-        const selectionData = {id: record.id, library: record.library.id, label: record.label};
-
-        if (selectionType === SelectCellsBtnType.ONLY) {
-            dispatch({
-                type: SearchActionTypes.SET_SELECTION,
-                selected: [selectionData]
-            });
-        } else if (selectionType === SelectCellsBtnType.ALL) {
-            dispatch({
-                type: SearchActionTypes.SELECT_ALL
-            });
-        }
-    };
-
-    return (
-        <Button {...btnProps} aria-label="select-records" size={size} onClick={_handleClick}>
-            {text}
-        </Button>
-    );
-}
-
-export default SelectCellsBtn;

package/src/components/LibraryPicker/LibrariesList/LibrariesList.tsx

@@ -1,211 +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 {Key, useState} from 'react';
-import styled from 'styled-components';
-import {PreviewSize} from '../../../constants';
-import {useLang} from '../../../hooks';
-import {useSharedTranslation} from '../../../hooks/useSharedTranslation';
-import {
-    GetLibrariesQuery,
-    LibraryLightFragment,
-    PermissionsActions,
-    PermissionTypes,
-    SaveLibraryMutation,
-    useGetLibrariesQuery,
-    useIsAllowedQuery
-} from '../../../_gqlTypes';
-import {getLibrariesQuery} from '../../../_queries/libraries/getLibrariesQuery';
-import {extractPermissionFromQuery} from '../../../_utils';
-import {EditLibraryModal} from '../../EditLibraryModal';
-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 LibraryType = Override<LibraryLightFragment, {label: string}> & {key: string};
-
-interface ILibrariesListProps {
-    onSelect: (selectedLibraries: LibraryLightFragment[]) => void;
-    selected?: string[];
-    multiple?: boolean;
-    showSelected?: boolean;
-}
-
-function LibrariesList({
-    onSelect,
-    selected = [],
-    multiple = true,
-    showSelected = false
-}: ILibrariesListProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-    const {loading, error, data} = useGetLibrariesQuery();
-
-    const isAllowedQueryResult = useIsAllowedQuery({
-        fetchPolicy: 'cache-and-network',
-        variables: {
-            type: PermissionTypes.admin,
-            actions: [PermissionsActions.admin_create_library]
-        }
-    });
-    const canCreate = extractPermissionFromQuery(isAllowedQueryResult, PermissionsActions.admin_create_library);
-
-    const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>(showSelected ? selected : []);
-    const [search, setSearch] = useState('');
-    const [isNewLibraryModalOpen, setIsNewLibraryModalOpen] = useState(false);
-    const client = useApolloClient();
-
-    const _handleSelectionChange = (selection: Key[]) => {
-        setSelectedRowKeys(selection);
-        onSelect(_getLibsFromKeys(selection));
-    };
-
-    const _getLibsFromKeys = (keys: Key[], libsList?: LibraryLightFragment[]) => {
-        // The list coming from data might not be up to date after a create, so we use the one passed as argument
-        const list = libsList ?? data?.libraries?.list ?? [];
-        return list.filter(lib => keys.find(k => lib.id === k));
-    };
-
-    const _handleRowClick = (record: LibraryType) => {
-        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 _handleClickNewLibrary = () => {
-        setIsNewLibraryModalOpen(true);
-    };
-    const _handleCloseNewLibrary = () => setIsNewLibraryModalOpen(false);
-
-    const _handlePostCreate = async (newLibrary: SaveLibraryMutation['saveLibrary']) => {
-        const allLibrariesData = client.readQuery<GetLibrariesQuery>({query: getLibrariesQuery});
-
-        const newLibsList = [newLibrary, ...(allLibrariesData?.libraries?.list ?? [])];
-        if (allLibrariesData) {
-            client.writeQuery({
-                query: getLibrariesQuery,
-                data: {
-                    libraries: {
-                        ...allLibrariesData.libraries,
-                        list: newLibsList
-                    }
-                }
-            });
-        }
-        const newSelection = [...selectedRowKeys, newLibrary.id];
-        setSelectedRowKeys(newSelection);
-        onSelect(_getLibsFromKeys(newSelection, newLibsList));
-    };
-
-    if (loading) {
-        return <Loading />;
-    }
-
-    if (error || isAllowedQueryResult.error) {
-        return <ErrorDisplay message={error?.message || isAllowedQueryResult?.error?.message} />;
-    }
-
-    const columns: TableColumnsType<LibraryType> = [
-        {
-            title: t('libraries.library'),
-            key: 'library',
-            render: (_, library) => {
-                const libraryIdentity: IEntityData = {
-                    label: library.label,
-                    subLabel: library.id,
-                    preview: (library.icon?.whoAmI?.preview?.[PreviewSize.small] as string) ?? null,
-                    color: null
-                };
-                return <EntityCard entity={libraryIdentity} size={PreviewSize.small} />;
-            }
-        }
-    ];
-
-    const tableData: LibraryType[] = ([...data?.libraries?.list] ?? [])
-        .filter(lib => {
-            // Do not display already selected libraries unless showSelected is true
-            if (!showSelected && selected.find(selectedLib => selectedLib === lib.id)) {
-                return false;
-            }
-
-            // Filter based on search
-            const label = localizedTranslation(lib.label, lang);
-            const searchStr = search.toLowerCase();
-
-            // Search on id or label
-            return lib.id.toLowerCase().includes(searchStr) || label.toLowerCase().includes(searchStr);
-        })
-        .map(lib => ({
-            ...lib,
-            key: lib.id,
-            label: localizedTranslation(lib.label, lang)
-        }));
-
-    const tableHeader = (
-        <HeaderWrapper>
-            <Input.Search onChange={_handleSearchChange} placeholder={t('libraries.search') + '...'} allowClear />
-            {canCreate && (
-                <Button type="primary" icon={<PlusOutlined />} onClick={_handleClickNewLibrary}>
-                    {t('libraries.new_library')}
-                </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)
-                })}
-            />
-            {isNewLibraryModalOpen && (
-                <EditLibraryModal
-                    open={isNewLibraryModalOpen}
-                    onClose={_handleCloseNewLibrary}
-                    onPostCreate={_handlePostCreate}
-                    width={790}
-                />
-            )}
-        </>
-    );
-}
-
-export default LibrariesList;

package/src/components/LibraryPicker/LibrariesList/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 LibrariesList} from './LibrariesList';

package/src/components/LibraryPicker/LibraryPicker.test.tsx

@@ -1,207 +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 {GetLibrariesDocument, IsAllowedDocument, PermissionsActions, PermissionTypes} from '_ui/_gqlTypes';
-import {mockLibrarySimple} from '_ui/__mocks__/common/library';
-import {render, screen, waitFor, within} from '../../_tests/testUtils';
-import LibraryPicker from './LibraryPicker';
-
-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('../EditLibraryModal', () => {
-    return {
-        EditLibraryModal: () => {
-            return <div>EditLibrary</div>;
-        }
-    };
-});
-
-jest.mock('../../hooks/useSharedTranslation/useSharedTranslation');
-
-describe('LibraryPicker', () => {
-    const mockLibA = {
-        __typename: 'Library',
-        ...mockLibrarySimple,
-        id: 'libA'
-    };
-    const mockLibB = {
-        __typename: 'Library',
-        ...mockLibrarySimple,
-        id: 'libB'
-    };
-    const mockLibC = {
-        __typename: 'Library',
-        ...mockLibrarySimple,
-        id: 'libC'
-    };
-
-    const mocks = [
-        {
-            request: {
-                query: GetLibrariesDocument,
-                variables: {}
-            },
-            result: {
-                data: {
-                    libraries: {
-                        list: [mockLibA, mockLibB, mockLibC]
-                    }
-                }
-            }
-        },
-        {
-            request: {
-                query: IsAllowedDocument,
-                variables: {
-                    type: PermissionTypes.admin,
-                    actions: [PermissionsActions.admin_create_library]
-                }
-            },
-            result: {
-                data: {
-                    isAllowed: [
-                        {
-                            name: PermissionsActions.admin_create_library,
-                            allowed: true
-                        }
-                    ]
-                }
-            }
-        }
-    ];
-
-    test('Display libraries', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<LibraryPicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.getByText('libA')).toBeInTheDocument();
-        expect(screen.getByText('libB')).toBeInTheDocument();
-        expect(screen.getByText('libC')).toBeInTheDocument();
-    });
-
-    test('Can filter list', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<LibraryPicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.getByText('libA')).toBeInTheDocument();
-        expect(screen.getByText('libB')).toBeInTheDocument();
-        expect(screen.getByText('libC')).toBeInTheDocument();
-
-        await userEvent.type(screen.getByRole('textbox'), 'libA');
-        expect(screen.getByRole('textbox')).toHaveValue('libA');
-
-        expect(screen.getByText('libA')).toBeInTheDocument();
-        expect(screen.queryByText('libB')).not.toBeInTheDocument();
-        expect(screen.queryByText('libC')).not.toBeInTheDocument();
-    });
-
-    test('Select elements and submit', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<LibraryPicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        userEvent.click(screen.getByText('libA'));
-
-        // Select 'libA'
-        const rows = screen.getAllByRole('row');
-        const rowLibA = rows[0];
-        const rowLibB = rows[1];
-        const rowLibC = rows[2];
-
-        const checkboxLibA = within(rowLibA).getByRole('checkbox');
-        await waitFor(() => expect(checkboxLibA).toBeChecked());
-
-        // Unselect 'libA'
-        userEvent.click(checkboxLibA);
-        await waitFor(() => expect(checkboxLibA).not.toBeChecked());
-
-        // Select "libB" and "libC"
-        const checkboxLibB = within(rowLibB).getByRole('checkbox');
-        userEvent.click(checkboxLibB);
-
-        const checkboxLibC = within(rowLibC).getByRole('checkbox');
-        userEvent.click(checkboxLibC);
-
-        userEvent.click(screen.getByRole('button', {name: /submit/i}));
-
-        await waitFor(() => expect(mockHandleSubmit).toHaveBeenCalledWith([mockLibB, mockLibC]), {
-            timeout: 10000
-        });
-    });
-
-    test('If not multiple, only one element can be selected', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<LibraryPicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open multiple={false} />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        userEvent.click(screen.getByText('libA'));
-        const radioBtnLibA = within(screen.getByRole('row', {name: /libA/i})).getByRole('radio');
-        const radioBtnLibB = within(screen.getByRole('row', {name: /libA/i})).getByRole('radio');
-        await waitFor(() => expect(radioBtnLibA).toBeChecked());
-
-        userEvent.click(screen.getByText('libB'));
-        await waitFor(() => expect(radioBtnLibB).toBeChecked());
-        await waitFor(() => expect(radioBtnLibA).not.toBeChecked());
-    });
-
-    test('Can create new library', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<LibraryPicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        const newLibButton = screen.queryByRole('button', {name: /new_library/i});
-        expect(newLibButton).toBeInTheDocument();
-
-        userEvent.click(newLibButton);
-        expect(await screen.findByText('EditLibrary')).toBeInTheDocument();
-    });
-
-    test('If not allowed, cannot create new library', async () => {
-        const mocksNotAllowed = [
-            mocks[0],
-            {
-                request: {
-                    query: IsAllowedDocument,
-                    variables: {
-                        type: PermissionTypes.admin,
-                        actions: [PermissionsActions.admin_create_library]
-                    }
-                },
-                result: {
-                    data: {
-                        isAllowed: [
-                            {
-                                name: PermissionsActions.admin_create_library,
-                                allowed: false
-                            }
-                        ]
-                    }
-                }
-            }
-        ];
-
-        const mockHandleSubmit = jest.fn();
-        render(<LibraryPicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks: mocksNotAllowed});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.queryByRole('button', {name: /new_library/i})).not.toBeInTheDocument();
-    });
-});

package/src/components/LibraryPicker/LibraryPicker.tsx

@@ -1,62 +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 {LibraryLightFragment} from '_ui/_gqlTypes';
-import {LibrariesList} from './LibrariesList';
-
-interface ILibraryPickerProps {
-    open: boolean;
-    onClose: () => void;
-    onSubmit: (selectedLibraries: LibraryLightFragment[]) => void;
-    selected?: string[];
-    multiple?: boolean;
-    showSelected?: boolean;
-}
-
-function LibraryPicker({
-    open,
-    onClose,
-    onSubmit,
-    selected = [],
-    multiple = true,
-    showSelected = false
-}: ILibraryPickerProps): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const [selectedLibraries, setSelectedLibraries] = useState<LibraryLightFragment[]>([]);
-
-    const _handleSelect = (selection: LibraryLightFragment[]) => {
-        setSelectedLibraries(selection);
-    };
-
-    const _handleSubmit = () => {
-        onSubmit(selectedLibraries);
-        onClose();
-    };
-
-    return (
-        <Modal
-            open={open}
-            onCancel={onClose}
-            width={800}
-            title={t('libraries.select_libraries')}
-            onOk={_handleSubmit}
-            destroyOnClose
-            okText={t('global.submit')}
-            cancelText={t('global.cancel')}
-            centered
-        >
-            <LibrariesList
-                onSelect={_handleSelect}
-                selected={selected}
-                multiple={multiple}
-                showSelected={showSelected}
-            />
-        </Modal>
-    );
-}
-
-export default LibraryPicker;

package/src/components/LibraryPicker/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 LibraryPicker} from './LibraryPicker';

package/src/components/List/List.test.tsx

@@ -1,66 +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 {render, screen, waitFor, within} from '_ui/_tests/testUtils';
-import List from './List';
-
-describe('List', () => {
-    test('Render items', async () => {
-        render(<List dataSource={['Item A', 'Item B']} />);
-
-        const rows = screen.getAllByRole('listitem');
-        expect(rows).toHaveLength(2);
-        expect(rows[0].textContent).toBe('Item A');
-    });
-
-    test('Can override items rendering', async () => {
-        render(<List dataSource={['Item A', 'Item B']} renderItemContent={item => <div>{item + 'Override'}</div>} />);
-
-        expect(screen.getByText('Item AOverride')).toBeInTheDocument();
-    });
-
-    test('Can select elements', async () => {
-        const onSelect = jest.fn();
-
-        render(<List dataSource={['Item A', 'Item B']} selectable selectedItems={[]} onSelectionChange={onSelect} />);
-
-        const firstRow = screen.getAllByRole('listitem')[0];
-        userEvent.hover(firstRow);
-
-        const checkbox = within(firstRow).getByRole('checkbox');
-        expect(checkbox).toBeInTheDocument();
-        expect(checkbox).not.toBeChecked();
-
-        userEvent.click(checkbox);
-
-        await waitFor(() => {
-            expect(onSelect).toBeCalledWith(['Item A']);
-        });
-    });
-
-    test('Automatically check selected elements', async () => {
-        const onSelect = jest.fn();
-
-        render(
-            <List
-                dataSource={['Item A', 'Item B']}
-                selectable
-                selectedItems={['Item B']}
-                onSelectionChange={onSelect}
-            />
-        );
-
-        const secondRow = screen.getAllByRole('listitem')[1];
-
-        const checkbox = within(secondRow).getByRole('checkbox');
-        expect(checkbox).toBeInTheDocument();
-        expect(checkbox).toBeChecked();
-
-        userEvent.click(checkbox);
-
-        await waitFor(() => {
-            expect(onSelect).toBeCalledWith([]);
-        });
-    });
-});