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

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/PreviewsSettingsList/PreviewsSettingsList.tsx

@@ -1,241 +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 {CloseOutlined, ExpandAltOutlined, PlusOutlined} from '@ant-design/icons';
-import {getInvertColor, localizedTranslation} from '@leav/utils';
-import {Button, Input, Popconfirm, Space, Table, TableColumnsType, Tag, Tooltip} from 'antd';
-import {useState} from 'react';
-import styled from 'styled-components';
-import {useLang} from '../../../../../hooks';
-import {useSharedTranslation} from '../../../../../hooks/useSharedTranslation';
-import {LibraryPreviewsSettingsFragment} from '../../../../../_gqlTypes';
-import {BasicButton} from '../../../../BasicButton';
-import {FloatingMenu} from '../../../../FloatingMenu';
-import {EditPreviewsSettingsModal} from '../EditPreviewsSettingsModal';
-
-const HeaderWrapper = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.5rem;
-
-    > input {
-        flex-grow: 1;
-    }
-`;
-
-const LabelCellWrapper = styled.div`
-    .floating-menu {
-        display: none;
-    }
-
-    &:hover .floating-menu {
-        display: block;
-    }
-`;
-
-interface IPreviewsSettingsListProps {
-    previewsSettings: LibraryPreviewsSettingsFragment[];
-    readOnly: boolean;
-    onChange: (previewSettings: LibraryPreviewsSettingsFragment[]) => void;
-}
-
-function PreviewsSettingsList({
-    previewsSettings,
-    readOnly,
-    onChange: onChangePreviewSettings
-}: IPreviewsSettingsListProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-
-    const [search, setSearch] = useState('');
-    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-    const [editModalDataIndex, setEditModalDataIndex] = useState<number>(null);
-
-    const columns: TableColumnsType<LibraryPreviewsSettingsFragment> = [
-        {
-            title: t('libraries.previews_settings.label'),
-            dataIndex: 'label',
-            key: 'label',
-            render: (label, previewsSetting, index) => {
-                const description = previewsSetting.description
-                    ? localizedTranslation(previewsSetting.description, lang)
-                    : null;
-
-                const menuActions = [
-                    {
-                        label: t('libraries.previews_settings.edit'),
-                        icon: <ExpandAltOutlined />,
-                        onClick: () => {
-                            setEditModalDataIndex(index);
-                            setIsEditModalOpen(true);
-                        }
-                    }
-                ];
-
-                return (
-                    <LabelCellWrapper>
-                        <Tooltip title={description}>{localizedTranslation(label, lang)}</Tooltip>
-                        <FloatingMenu actions={menuActions} />
-                    </LabelCellWrapper>
-                );
-            }
-        },
-        {
-            title: t('libraries.previews_settings.background'),
-            dataIndex: ['versions', 'background'],
-            key: 'background',
-            width: '150px',
-            render: background => {
-                const isBgDefined = background && background !== 'false';
-                const bgLabel = isBgDefined ? background : t('libraries.previews_settings.transparent');
-                const fontColor = isBgDefined ? getInvertColor(background) : null;
-
-                return (
-                    <Tag
-                        color={isBgDefined ? background : null}
-                        style={{color: fontColor, borderColor: fontColor}}
-                        bordered
-                    >
-                        {bgLabel}
-                    </Tag>
-                );
-            }
-        },
-        {
-            title: t('libraries.previews_settings.density'),
-            dataIndex: ['versions', 'density'],
-            key: 'density',
-            width: '150px',
-            render: value => (value ? `${value} dpi` : null)
-        },
-        {
-            title: t('libraries.previews_settings.sizes'),
-            dataIndex: ['versions', 'sizes'],
-            key: 'sizes',
-            render: (value: LibraryPreviewsSettingsFragment['versions']['sizes']) => {
-                return (
-                    <Space wrap size="small">
-                        {value.map(({name, size}) => (
-                            <Tooltip key={name} title={name}>
-                                <Tag key={name}>{size}</Tag>
-                            </Tooltip>
-                        ))}
-                    </Space>
-                );
-            }
-        }
-    ];
-
-    if (!readOnly) {
-        columns.push({
-            key: 'actions',
-            width: '50px',
-            dataIndex: null,
-            title: null,
-            align: 'center',
-            render: (_, item, index) => {
-                const _handleDeleteSettings = async () => {
-                    const newPreviewsSettings = [...previewsSettings];
-
-                    // Remove element at index
-                    newPreviewsSettings.splice(index, 1);
-                    await onChangePreviewSettings(newPreviewsSettings);
-                };
-
-                return (
-                    <Popconfirm
-                        onConfirm={_handleDeleteSettings}
-                        title={t('libraries.previews_settings.delete_settings_confirm')}
-                        okText={t('global.submit')}
-                        cancelText={t('global.cancel')}
-                    >
-                        <BasicButton
-                            shape="circle"
-                            size="small"
-                            danger
-                            icon={<CloseOutlined />}
-                            centered
-                            aria-label="delete"
-                            disabled={item.system}
-                        />
-                    </Popconfirm>
-                );
-            }
-        });
-    }
-
-    const _handleCloseEditModal = () => {
-        setIsEditModalOpen(false);
-        setEditModalDataIndex(null);
-    };
-
-    const _handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSearch(e.target.value);
-    };
-
-    const _handleClickAdd = () => {
-        setIsEditModalOpen(true);
-    };
-
-    const tableHeader = (
-        <HeaderWrapper>
-            <Input.Search onChange={_handleSearchChange} placeholder={t('global.search') + '...'} allowClear />
-            {!readOnly && (
-                <Button type="primary" icon={<PlusOutlined />} onClick={_handleClickAdd}>
-                    {t('libraries.previews_settings.add_settings')}
-                </Button>
-            )}
-        </HeaderWrapper>
-    );
-
-    const data = previewsSettings
-        .filter(previewSetting => {
-            // Filter based on search
-            const label = localizedTranslation(previewSetting.label, lang);
-            const searchStr = search.toLowerCase();
-
-            // Search on label
-            return label.toLowerCase().includes(searchStr);
-        })
-        .map((previewSetting, index) => ({
-            ...previewSetting,
-            key: index
-        }));
-
-    const _handleSubmit = async (previewSetting: LibraryPreviewsSettingsFragment) => {
-        const newPreviewsSettings = [...previewsSettings];
-        if (editModalDataIndex !== null) {
-            newPreviewsSettings[editModalDataIndex] = previewSetting;
-        } else {
-            newPreviewsSettings.push(previewSetting);
-        }
-        await onChangePreviewSettings(newPreviewsSettings);
-        _handleCloseEditModal();
-    };
-
-    return (
-        <>
-            <Table
-                columns={columns}
-                dataSource={data}
-                pagination={false}
-                title={() => tableHeader}
-                size="middle"
-                bordered
-                scroll={{y: 'calc(95vh - 22rem)'}}
-            />
-            {isEditModalOpen && (
-                <EditPreviewsSettingsModal
-                    open={isEditModalOpen}
-                    onClose={_handleCloseEditModal}
-                    onSubmit={_handleSubmit}
-                    readOnly={readOnly}
-                    previewsSetting={previewsSettings[editModalDataIndex] ?? null}
-                />
-            )}
-        </>
-    );
-}
-
-export default PreviewsSettingsList;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/PreviewsSettingsList/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 PreviewsSettingsList} from './PreviewsSettingsList';

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

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

package/src/components/EditLibraryModal/EditLibraryModal.test.tsx

@@ -1,346 +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 {QueryResult} from '@apollo/client';
-import {Mockify} from '@leav/utils';
-import userEvent from '@testing-library/user-event';
-import * as gqlTypes from '_ui/_gqlTypes';
-import {mockLibraryWithDetails} from '_ui/__mocks__/common/library';
-import {act, fireEvent, render, screen, waitFor} from '../../_tests/testUtils';
-import EditLibraryModal from './EditLibraryModal';
-
-jest.mock('../../hooks/useSharedTranslation/useSharedTranslation');
-
-describe('EditLibraryModal', () => {
-    const mockResultIsAllowed: Mockify<typeof gqlTypes.useIsAllowedQuery> = {
-        loading: false,
-        data: {
-            isAllowed: [
-                {
-                    name: gqlTypes.PermissionsActions.admin_edit_library,
-                    allowed: true
-                },
-                {
-                    name: gqlTypes.PermissionsActions.admin_delete_library,
-                    allowed: true
-                },
-                {
-                    name: gqlTypes.PermissionsActions.admin_create_library,
-                    allowed: true
-                }
-            ]
-        },
-        called: true
-    };
-    jest.spyOn(gqlTypes, 'useIsAllowedQuery').mockImplementation(
-        () => mockResultIsAllowed as QueryResult<gqlTypes.IsAllowedQuery, gqlTypes.IsAllowedQueryVariables>
-    );
-
-    const mockGetLibraryByIdData = {
-        libraries: {
-            list: [
-                {
-                    ...mockLibraryWithDetails,
-                    recordIdentityConf: {
-                        ...mockLibraryWithDetails.recordIdentityConf,
-                        __typename: 'RecordIdentityConf'
-                    }
-                }
-            ]
-        }
-    };
-    const mockResultGetLibById: Mockify<typeof gqlTypes.useGetLibraryByIdQuery> = {
-        loading: false,
-        data: mockGetLibraryByIdData,
-        called: true
-    };
-
-    describe('Create library', () => {
-        test('Create new library', async () => {
-            const user = userEvent.setup();
-            const mockCheckLibraryExistenceLazyQuery = jest.fn().mockReturnValue({
-                data: {
-                    libraries: {
-                        totalCount: 0
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useCheckLibraryExistenceLazyQuery').mockImplementation(() => [
-                mockCheckLibraryExistenceLazyQuery,
-                null
-            ]);
-
-            const mockSaveLibraryMutation = jest.fn().mockReturnValue({
-                data: {
-                    saveLibrary: {
-                        ...mockLibraryWithDetails
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useSaveLibraryMutation').mockImplementation(() => [
-                mockSaveLibraryMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            const mockOnPostCreate = jest.fn();
-
-            render(<EditLibraryModal open onPostCreate={mockOnPostCreate} onClose={jest.fn()} />);
-
-            const inputs = await screen.findAllByRole('textbox', {name: /label|id/i});
-            const labelFr = inputs[0];
-            const labelEn = inputs[1];
-            const idField = inputs[2];
-
-            await user.type(labelFr, 'label fr');
-            await user.type(labelEn, 'label_en');
-
-            await waitFor(() => {
-                expect(idField).toHaveValue('label_fr');
-            });
-
-            await act(async () => {
-                fireEvent.focus(idField);
-                fireEvent.blur(idField);
-            });
-
-            expect(mockCheckLibraryExistenceLazyQuery).toBeCalled();
-
-            expect(screen.queryByText(/id_already_exists/)).not.toBeInTheDocument();
-
-            await user.click(screen.getByRole('button', {name: /submit/i}));
-
-            expect(mockSaveLibraryMutation).toBeCalledWith({
-                variables: {
-                    library: {
-                        id: 'label_fr',
-                        label: {
-                            fr: 'label fr',
-                            en: 'label_en'
-                        },
-                        behavior: 'standard'
-                    }
-                }
-            });
-            expect(mockOnPostCreate).toBeCalled();
-        });
-
-        test('Display an error if ID is already used', async () => {
-            const user = userEvent.setup();
-            const mockCheckLibraryExistenceLazyQuery = jest.fn().mockReturnValue({
-                data: {
-                    libraries: {
-                        totalCount: 1
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useCheckLibraryExistenceLazyQuery').mockImplementation(() => [
-                mockCheckLibraryExistenceLazyQuery,
-                null
-            ]);
-
-            render(<EditLibraryModal open onPostCreate={jest.fn()} onClose={jest.fn()} />);
-
-            const idInput = screen.getByRole('textbox', {name: /id/i});
-            await user.type(idInput, 'my_id');
-            fireEvent.blur(idInput);
-
-            await waitFor(() => {
-                expect(mockCheckLibraryExistenceLazyQuery).toBeCalled();
-            });
-
-            await waitFor(() => {
-                expect(screen.getByText(/id_already_exists/)).toBeInTheDocument();
-            });
-        });
-    });
-
-    describe('Edit existing library', () => {
-        test('Display edit form for existing library', async () => {
-            jest.spyOn(gqlTypes, 'useGetLibraryByIdQuery').mockImplementation(
-                () => mockResultGetLibById as QueryResult
-            );
-            render(<EditLibraryModal libraryId={mockLibraryWithDetails.id} open onClose={jest.fn()} />);
-
-            expect(screen.getByRole('textbox', {name: /id/})).toBeDisabled();
-            expect(screen.getByRole('combobox', {name: /behavior/})).toBeDisabled();
-            expect(screen.queryByRole('button', {name: /submit/i})).not.toBeInTheDocument();
-            expect(
-                screen.getAllByRole('combobox', {name: /label|subLabel|preview|color|treeColorPreview/})
-            ).toHaveLength(5);
-        });
-
-        test('Submit field on blur', async () => {
-            const user = userEvent.setup();
-            jest.spyOn(gqlTypes, 'useGetLibraryByIdQuery').mockImplementation(
-                () => mockResultGetLibById as QueryResult
-            );
-            const mockSaveLibraryMutation = jest.fn().mockReturnValue({
-                data: {
-                    saveLibrary: {
-                        ...mockLibraryWithDetails
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useSaveLibraryMutation').mockImplementation(() => [
-                mockSaveLibraryMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            render(<EditLibraryModal libraryId={mockLibraryWithDetails.id} open onClose={jest.fn()} />);
-
-            const labelFrInput = screen.getByRole('textbox', {name: 'label_fr'});
-            expect(labelFrInput).not.toBeDisabled();
-
-            await user.type(labelFrInput, ' modified{enter}');
-
-            expect(labelFrInput).toHaveValue(`${mockLibraryWithDetails.label.fr} modified`);
-
-            await waitFor(() => {
-                expect(mockSaveLibraryMutation).toBeCalledWith({
-                    variables: {
-                        library: {
-                            id: mockLibraryWithDetails.id,
-                            label: {
-                                ...mockLibraryWithDetails.label,
-                                fr: `${mockLibraryWithDetails.label.fr} modified`
-                            }
-                        }
-                    }
-                });
-            });
-        });
-
-        test('Submit select field on change', async () => {
-            const user = userEvent.setup();
-            jest.spyOn(gqlTypes, 'useGetLibraryByIdQuery').mockImplementation(
-                () => mockResultGetLibById as QueryResult
-            );
-            const mockSaveLibraryMutation = jest.fn().mockReturnValue({
-                data: {
-                    saveLibrary: {
-                        ...mockLibraryWithDetails
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useSaveLibraryMutation').mockImplementation(() => [
-                mockSaveLibraryMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            render(<EditLibraryModal libraryId={mockLibraryWithDetails.id} open onClose={jest.fn()} />);
-
-            const labelSelect = screen.getByRole('combobox', {name: /label/});
-            expect(labelSelect).not.toBeDisabled();
-
-            await user.click(labelSelect);
-
-            const labelOption = screen.getByText(mockLibraryWithDetails.attributes[0].label.fr);
-            expect(labelOption).toBeInTheDocument();
-            user.click(labelOption);
-
-            await waitFor(
-                () => {
-                    expect(mockSaveLibraryMutation).toBeCalledWith({
-                        variables: {
-                            library: {
-                                id: mockLibraryWithDetails.id,
-                                recordIdentityConf: {
-                                    ...mockLibraryWithDetails.recordIdentityConf,
-                                    label: mockLibraryWithDetails.attributes[0].id
-                                }
-                            }
-                        }
-                    });
-                },
-                {
-                    timeout: 10000
-                }
-            );
-        });
-    });
-
-    describe('Delete library', () => {
-        test('Can delete library', async () => {
-            const user = userEvent.setup();
-            jest.spyOn(gqlTypes, 'useGetLibraryByIdQuery').mockImplementation(
-                () => mockResultGetLibById as QueryResult
-            );
-            const mockDeleteLibraryMutation = jest.fn().mockReturnValue({
-                data: {
-                    deleteLibrary: {
-                        __typename: 'Library',
-                        id: mockLibraryWithDetails.id
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useDeleteLibraryMutation').mockImplementation(() => [
-                mockDeleteLibraryMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            render(<EditLibraryModal libraryId={mockLibraryWithDetails.id} open onClose={jest.fn()} />);
-
-            await user.click(screen.getByRole('button', {name: /delete/i}));
-            await user.click(screen.getByRole('button', {name: /submit/i})); // confirm
-
-            await waitFor(
-                () => {
-                    expect(mockDeleteLibraryMutation).toBeCalledWith({
-                        variables: {
-                            id: mockLibraryWithDetails.id
-                        }
-                    });
-                },
-                {
-                    timeout: 10000
-                }
-            );
-        });
-
-        test('If not allowed, cannot delete library', async () => {
-            const mockResultIsAllowedForbidden: Mockify<typeof gqlTypes.useIsAllowedQuery> = {
-                loading: false,
-                data: {
-                    isAllowed: [
-                        {
-                            name: gqlTypes.PermissionsActions.admin_edit_library,
-                            allowed: true
-                        },
-                        {
-                            name: gqlTypes.PermissionsActions.admin_delete_library,
-                            allowed: false
-                        }
-                    ]
-                },
-                called: true
-            };
-            jest.spyOn(gqlTypes, 'useIsAllowedQuery').mockImplementation(
-                () =>
-                    mockResultIsAllowedForbidden as QueryResult<
-                        gqlTypes.IsAllowedQuery,
-                        gqlTypes.IsAllowedQueryVariables
-                    >
-            );
-
-            jest.spyOn(gqlTypes, 'useGetLibraryByIdQuery').mockImplementation(
-                () => mockResultGetLibById as QueryResult
-            );
-            const mockDeleteLibraryMutation = jest.fn().mockReturnValue({
-                data: {
-                    deleteLibrary: {
-                        __typename: 'Library',
-                        id: mockLibraryWithDetails.id
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useDeleteLibraryMutation').mockImplementation(() => [
-                mockDeleteLibraryMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            render(<EditLibraryModal libraryId={mockLibraryWithDetails.id} open onClose={jest.fn()} />);
-
-            expect(screen.queryByRole('button', {name: /delete/i})).not.toBeInTheDocument();
-        });
-    });
-});