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

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

package/src/components/EditAttributeModal/EditAttributeModal.test.tsx

@@ -1,335 +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 {mockAttributeWithDetails} from '_ui/__mocks__/common/attribute';
-import {act, fireEvent, render, screen, waitFor} from '../../_tests/testUtils';
-import EditAttributeModal from './EditAttributeModal';
-
-jest.mock('../../hooks/useSharedTranslation/useSharedTranslation');
-
-describe('EditAttributeModal', () => {
-    const mockResultIsAllowed: Mockify<typeof gqlTypes.useIsAllowedQuery> = {
-        loading: false,
-        data: {
-            isAllowed: [
-                {
-                    name: gqlTypes.PermissionsActions.admin_edit_attribute,
-                    allowed: true
-                },
-                {
-                    name: gqlTypes.PermissionsActions.admin_delete_attribute,
-                    allowed: true
-                },
-                {
-                    name: gqlTypes.PermissionsActions.admin_create_attribute,
-                    allowed: true
-                }
-            ]
-        },
-        called: true
-    };
-    jest.spyOn(gqlTypes, 'useIsAllowedQuery').mockImplementation(
-        () => mockResultIsAllowed as QueryResult<gqlTypes.IsAllowedQuery, gqlTypes.IsAllowedQueryVariables>
-    );
-
-    const mockGetAttributeByIdData = {
-        attributes: {
-            list: [{...mockAttributeWithDetails}]
-        }
-    };
-
-    const mockResultGetAttributeById: Mockify<typeof gqlTypes.useGetAttributeByIdQuery> = {
-        loading: false,
-        data: mockGetAttributeByIdData,
-        called: true
-    };
-
-    describe('Create attribute', () => {
-        test('Create new attribute', async () => {
-            const user = userEvent.setup();
-            const mockCheckAttributeExistenceLazyQuery = jest.fn().mockReturnValue({
-                data: {
-                    attributes: {
-                        totalCount: 0
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useCheckAttributeExistenceLazyQuery').mockImplementation(() => [
-                mockCheckAttributeExistenceLazyQuery,
-                null
-            ]);
-
-            const mockSaveAttributeMutation = jest.fn().mockReturnValue({
-                data: {
-                    saveAttribute: {
-                        ...mockAttributeWithDetails
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useSaveAttributeMutation').mockImplementation(() => [
-                mockSaveAttributeMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            const mockOnPostCreate = jest.fn();
-
-            render(<EditAttributeModal open onPostCreate={mockOnPostCreate} onClose={jest.fn()} />);
-            const idField = screen.getByRole('textbox', {name: /id/});
-
-            await user.type(screen.getByRole('textbox', {name: 'label_fr'}), 'label fr');
-            await user.type(screen.getByRole('textbox', {name: 'label_en'}), 'label_en');
-
-            await waitFor(() => {
-                expect(idField).toHaveValue('label_fr');
-            });
-
-            await act(async () => {
-                fireEvent.focus(screen.getByRole('textbox', {name: /id/i}));
-                fireEvent.blur(screen.getByRole('textbox', {name: /id/i}));
-            });
-
-            await waitFor(() => {
-                expect(mockCheckAttributeExistenceLazyQuery).toBeCalled();
-            });
-
-            expect(screen.queryByText(/id_already_exists/)).not.toBeInTheDocument();
-
-            await user.click(screen.getByRole('button', {name: /submit/i}));
-
-            await waitFor(() => {
-                expect(mockSaveAttributeMutation).toBeCalledWith({
-                    variables: {
-                        attribute: {
-                            id: 'label_fr',
-                            label: {
-                                fr: 'label fr',
-                                en: 'label_en'
-                            },
-                            description: {
-                                fr: '',
-                                en: ''
-                            },
-                            type: gqlTypes.AttributeType.simple,
-                            format: gqlTypes.AttributeFormat.text,
-                            unique: false,
-                            readonly: false,
-                            linked_library: null,
-                            linked_tree: null,
-                            multiple_values: false,
-                            versions_conf: null
-                        }
-                    }
-                });
-                expect(mockOnPostCreate).toBeCalled();
-            });
-        });
-
-        test('Display an error if ID is already used', async () => {
-            const user = userEvent.setup();
-            const mockCheckAttributeExistenceLazyQuery = jest.fn().mockReturnValue({
-                data: {
-                    attributes: {
-                        totalCount: 1
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useCheckAttributeExistenceLazyQuery').mockImplementation(() => [
-                mockCheckAttributeExistenceLazyQuery,
-                null
-            ]);
-
-            render(<EditAttributeModal 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(mockCheckAttributeExistenceLazyQuery).toBeCalled();
-            });
-
-            await waitFor(() => {
-                expect(screen.getByText(/id_already_exists/)).toBeInTheDocument();
-            });
-        });
-    });
-
-    describe('Edit existing attribute', () => {
-        test('Display edit form for existing attribute', async () => {
-            jest.spyOn(gqlTypes, 'useGetAttributeByIdQuery').mockImplementation(
-                () => mockResultGetAttributeById as QueryResult
-            );
-            render(<EditAttributeModal attributeId={mockAttributeWithDetails.id} open onClose={jest.fn()} />);
-
-            expect(screen.getByRole('textbox', {name: /id/})).toBeDisabled();
-            expect(screen.getByRole('combobox', {name: /type/})).toBeDisabled();
-            expect(screen.getByRole('combobox', {name: /format/})).toBeDisabled();
-            expect(screen.queryByRole('button', {name: /submit/i})).not.toBeInTheDocument();
-        });
-
-        test('Submit field on blur', async () => {
-            const user = userEvent.setup();
-            jest.spyOn(gqlTypes, 'useGetAttributeByIdQuery').mockImplementation(
-                () => mockResultGetAttributeById as QueryResult
-            );
-            const mockSaveAttributeMutation = jest.fn().mockReturnValue({
-                data: {
-                    saveAttribute: {
-                        ...mockAttributeWithDetails
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useSaveAttributeMutation').mockImplementation(() => [
-                mockSaveAttributeMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            render(<EditAttributeModal attributeId={mockAttributeWithDetails.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(`${mockAttributeWithDetails.label.fr} modified`);
-
-            await waitFor(() => {
-                expect(mockSaveAttributeMutation).toBeCalledWith({
-                    variables: {
-                        attribute: {
-                            id: mockAttributeWithDetails.id,
-                            label: {
-                                ...mockAttributeWithDetails.label,
-                                fr: `${mockAttributeWithDetails.label.fr} modified`
-                            }
-                        }
-                    }
-                });
-            });
-        });
-
-        test('Submit checkbox field on change', async () => {
-            const user = userEvent.setup();
-            jest.spyOn(gqlTypes, 'useGetAttributeByIdQuery').mockImplementation(
-                () => mockResultGetAttributeById as QueryResult
-            );
-            const mockSaveAttributeMutation = jest.fn().mockReturnValue({
-                data: {
-                    saveAttribute: {
-                        ...mockAttributeWithDetails
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useSaveAttributeMutation').mockImplementation(() => [
-                mockSaveAttributeMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            render(<EditAttributeModal attributeId={mockAttributeWithDetails.id} open onClose={jest.fn()} />);
-
-            const readonlyCheckbox = screen.getByRole('switch', {name: /readonly/i});
-            expect(readonlyCheckbox).not.toBeDisabled();
-
-            await user.click(readonlyCheckbox);
-
-            expect(mockSaveAttributeMutation).toBeCalledWith({
-                variables: {
-                    attribute: {
-                        id: mockAttributeWithDetails.id,
-                        readonly: true
-                    }
-                }
-            });
-        });
-    });
-
-    describe('Delete attribute', () => {
-        test('Can delete attribute', async () => {
-            const user = userEvent.setup();
-            jest.spyOn(gqlTypes, 'useGetAttributeByIdQuery').mockImplementation(
-                () => mockResultGetAttributeById as QueryResult
-            );
-
-            const mockDeleteAttributeMutation = jest.fn().mockReturnValue({
-                data: {
-                    deleteAttribute: {
-                        __typename: 'Attribute',
-                        id: mockAttributeWithDetails.id
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useDeleteAttributeMutation').mockImplementation(() => [
-                mockDeleteAttributeMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            render(<EditAttributeModal attributeId={mockAttributeWithDetails.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(mockDeleteAttributeMutation).toBeCalledWith({
-                        variables: {
-                            id: mockAttributeWithDetails.id
-                        }
-                    });
-                },
-                {
-                    timeout: 10000
-                }
-            );
-        });
-
-        test('If not allowed, cannot delete attribute', async () => {
-            const mockResultIsAllowedForbidden: Mockify<typeof gqlTypes.useIsAllowedQuery> = {
-                loading: false,
-                data: {
-                    isAllowed: [
-                        {
-                            name: gqlTypes.PermissionsActions.admin_edit_attribute,
-                            allowed: true
-                        },
-                        {
-                            name: gqlTypes.PermissionsActions.admin_delete_attribute,
-                            allowed: false
-                        }
-                    ]
-                },
-                called: true
-            };
-            jest.spyOn(gqlTypes, 'useIsAllowedQuery').mockImplementation(
-                () =>
-                    mockResultIsAllowedForbidden as QueryResult<
-                        gqlTypes.IsAllowedQuery,
-                        gqlTypes.IsAllowedQueryVariables
-                    >
-            );
-
-            jest.spyOn(gqlTypes, 'useGetAttributeByIdQuery').mockImplementation(
-                () => mockResultGetAttributeById as QueryResult
-            );
-            const mockDeleteAttributeMutation = jest.fn().mockReturnValue({
-                data: {
-                    deleteAttribute: {
-                        __typename: 'Attribute',
-                        id: mockAttributeWithDetails.id
-                    }
-                }
-            });
-            jest.spyOn(gqlTypes, 'useDeleteAttributeMutation').mockImplementation(() => [
-                mockDeleteAttributeMutation,
-                {loading: false, called: false, client: null, reset: null, error: null}
-            ]);
-
-            render(<EditAttributeModal attributeId={mockAttributeWithDetails.id} open onClose={jest.fn()} />);
-
-            expect(screen.queryByRole('button', {name: /delete/i})).not.toBeInTheDocument();
-        });
-    });
-});

package/src/components/EditAttributeModal/EditAttributeModal.tsx

@@ -1,178 +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
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-
-import {gql, useApolloClient} from '@apollo/client';
-import {localizedTranslation} from '@leav/utils';
-import {Button, Modal, ModalProps, Popconfirm} from 'antd';
-import {useState} from 'react';
-import {
-    AttributeDetailsFragment,
-    PermissionsActions,
-    PermissionTypes,
-    useDeleteAttributeMutation,
-    useIsAllowedQuery
-} from '_ui/_gqlTypes';
-import {useLang} from '../../hooks';
-import {useSharedTranslation} from '../../hooks/useSharedTranslation';
-import {extractPermissionFromQuery} from '../../_utils';
-import {ErrorDisplay} from '../ErrorDisplay';
-import {Loading} from '../Loading';
-import EditAttribute from './EditAttribute/EditAttribute';
-
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-interface IEditAttributeModalModalProps {
-    attributeId?: string;
-    open: boolean;
-    onPostCreate?: (attribute: AttributeDetailsFragment) => Promise<void>;
-    onClose?: () => void;
-    width?: ModalProps['width'];
-}
-
-function EditAttributeModal({
-    open,
-    attributeId,
-    onClose,
-    onPostCreate,
-    width
-}: IEditAttributeModalModalProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-    const apolloClient = useApolloClient();
-
-    const isAllowedQueryResult = useIsAllowedQuery({
-        fetchPolicy: 'cache-and-network',
-        variables: {
-            type: PermissionTypes.admin,
-            actions: [PermissionsActions.admin_edit_attribute, PermissionsActions.admin_delete_attribute]
-        }
-    });
-    const isReadOnly = !extractPermissionFromQuery(isAllowedQueryResult, PermissionsActions.admin_edit_attribute);
-    const canDelete = extractPermissionFromQuery(isAllowedQueryResult, PermissionsActions.admin_delete_attribute);
-
-    const [deleteAttribute] = useDeleteAttributeMutation();
-
-    const [submitFunction, setSubmitFunction] = useState<() => Promise<AttributeDetailsFragment>>();
-    const [submitLoading, setSubmitLoading] = useState(false);
-    const isEditing = !!attributeId;
-
-    const _handleSubmit = async () => {
-        if (!submitFunction) {
-            return;
-        }
-        setSubmitLoading(true);
-        try {
-            const savedAttribute = await submitFunction();
-            await onPostCreate(savedAttribute);
-            onClose();
-        } catch (e) {
-            console.error(e);
-        } finally {
-            setSubmitLoading(false);
-        }
-    };
-
-    const _handleDelete = async () => {
-        if (!attributeId) {
-            return;
-        }
-
-        const deleteRes = await deleteAttribute({
-            variables: {
-                id: attributeId
-            }
-        });
-
-        // Remove library from apollo cache
-        apolloClient.cache.evict({
-            id: apolloClient.cache.identify(deleteRes.data.deleteAttribute)
-        });
-
-        onClose();
-    };
-
-    const _handleSetSubmitFunction = submitFunc => {
-        setSubmitFunction(() => submitFunc);
-    };
-
-    let attributeLabel = t('attributes.new_attribute');
-
-    if (isEditing) {
-        // Try to find attribute in Apollo cache to get label
-        const cacheIdentifyStd = apolloClient.cache.identify({__typename: 'StandardAttribute', id: attributeId});
-        const cacheIdentifyLink = apolloClient.cache.identify({__typename: 'LinkAttribute', id: attributeId});
-        const cacheIdentifyTree = apolloClient.cache.identify({__typename: 'TreeAttribute', id: attributeId});
-        const fragment = gql`
-            fragment AttributeLabel on Attribute {
-                label
-            }
-        `;
-
-        const cacheFragment = isEditing
-            ? apolloClient.readFragment({id: cacheIdentifyStd, fragment}) ||
-              apolloClient.readFragment({id: cacheIdentifyLink, fragment}) ||
-              apolloClient.readFragment({id: cacheIdentifyTree, fragment}) ||
-              null
-            : null;
-
-        // Get application label from apollo cache if present
-        attributeLabel = cacheFragment ? localizedTranslation(cacheFragment.label, lang) : '';
-    }
-
-    const buttons = isEditing
-        ? [
-              canDelete ? (
-                  <Popconfirm
-                      key="delete_confirm"
-                      title={t('attributes.delete_confirm')}
-                      description={t('attributes.delete_confirm_warning')}
-                      okText={t('global.submit')}
-                      cancelText={t('global.cancel')}
-                      onConfirm={_handleDelete}
-                  >
-                      <Button key="delete" danger>
-                          {t('attributes.delete')}
-                      </Button>
-                  </Popconfirm>
-              ) : null,
-              <Button key="close" onClick={onClose}>
-                  {t('global.close')}
-              </Button>
-          ]
-        : [
-              <Button key="cancel" onClick={onClose}>
-                  {t('global.cancel')}
-              </Button>,
-              <Button key="submit" type="primary" onClick={_handleSubmit} loading={submitLoading}>
-                  {t('global.submit')}
-              </Button>
-          ];
-
-    return (
-        <Modal
-            open={open}
-            title={attributeLabel}
-            width={width ?? 800}
-            footer={buttons}
-            onCancel={onClose}
-            bodyStyle={{height: 'calc(95vh - 15rem)', overflow: 'auto'}}
-            centered
-        >
-            {isAllowedQueryResult.loading ? (
-                <Loading />
-            ) : isAllowedQueryResult.error ? (
-                <ErrorDisplay message={isAllowedQueryResult.error.message} />
-            ) : (
-                <EditAttribute
-                    attributeId={attributeId}
-                    onSetSubmitFunction={_handleSetSubmitFunction}
-                    readOnly={isReadOnly}
-                />
-            )}
-        </Modal>
-    );
-}
-
-export default EditAttributeModal;

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

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

@@ -1,119 +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 {Tabs, TabsProps, Spin} from 'antd';
-import styled from 'styled-components';
-import {useSharedTranslation} from '../../../hooks/useSharedTranslation';
-import {LibraryBehavior, SaveLibraryMutation, useGetLibraryByIdQuery} from '../../../_gqlTypes';
-import {ErrorDisplay} from '../../ErrorDisplay';
-import {Loading} from '../../Loading';
-import {EditLibraryAttributes} from './EditLibraryAttributes';
-import {EditLibraryInfo} from './EditLibraryInfo';
-import {EditLibraryPreviewsSettings} from './EditLibraryPreviewsSettings';
-import {EditLibraryIndexation} from './EditLibraryIndexation';
-import {LoadingOutlined} from '@ant-design/icons';
-
-interface IEditLibraryProps {
-    libraryId?: string;
-    onSetSubmitFunction?: (submitFunction: () => Promise<SaveLibraryMutation['saveLibrary']>) => void;
-    readOnly?: boolean;
-    indexationTask?: string;
-}
-
-const TabContentWrapper = styled.div`
-    height: calc(95vh - 15rem);
-    overflow-y: auto;
-`;
-
-function EditLibrary({
-    libraryId,
-    onSetSubmitFunction,
-    readOnly: isReadOnly,
-    indexationTask
-}: IEditLibraryProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const isEditing = !!libraryId;
-
-    const {loading, error, data} = useGetLibraryByIdQuery({
-        fetchPolicy: 'cache-and-network',
-        variables: {
-            id: libraryId
-        },
-        skip: !libraryId
-    });
-
-    if (loading) {
-        return <Loading />;
-    }
-
-    if (error) {
-        return <ErrorDisplay message={error.message} />;
-    }
-
-    const libraryData = data?.libraries?.list[0] ?? null;
-    const libraryInfoComp = (
-        <EditLibraryInfo library={libraryData} onSetSubmitFunction={onSetSubmitFunction} readOnly={isReadOnly} />
-    );
-
-    // If creating new library, return the form directly
-    if (!isEditing) {
-        return libraryInfoComp;
-    }
-
-    if (!libraryData) {
-        return <ErrorDisplay message={t('libraries.unknown_library')} />;
-    }
-
-    const tabs: TabsProps['items'] = [
-        {
-            key: 'info',
-            label: t('libraries.info'),
-            children: <TabContentWrapper>{libraryInfoComp}</TabContentWrapper>
-        },
-        {
-            key: 'attributes',
-            label: t('libraries.attributes'),
-            children: (
-                <TabContentWrapper>
-                    <EditLibraryAttributes library={libraryData} readOnly={isReadOnly} />
-                </TabContentWrapper>
-            )
-        },
-        {
-            key: 'Indexation',
-            label: (
-                <span>
-                    {!!indexationTask && <LoadingOutlined spin />}
-                    {t('libraries.indexation')}
-                </span>
-            ),
-            children: (
-                <TabContentWrapper>
-                    {
-                        <EditLibraryIndexation
-                            library={libraryData}
-                            indexationTask={indexationTask}
-                            readOnly={isReadOnly}
-                        />
-                    }
-                </TabContentWrapper>
-            )
-        }
-    ];
-
-    if (isEditing && libraryData.behavior === LibraryBehavior.files) {
-        tabs.push({
-            key: 'previews_settings',
-            label: t('libraries.previews_settings.title'),
-            children: (
-                <TabContentWrapper>
-                    <EditLibraryPreviewsSettings library={libraryData} readOnly={isReadOnly} />
-                </TabContentWrapper>
-            )
-        });
-    }
-
-    return <Tabs items={tabs} />;
-}
-
-export default EditLibrary;