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

package/src/components/DeactivateRecordsModal/DeactivateRecordsModal.tsx

@@ -1,78 +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 {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IFilter, ISearchSelection} from '_ui/types';
-import {useDeactivateRecordsMutation} from '_ui/_gqlTypes';
-import {getRequestFromFilters} from '_ui/_utils/getRequestFromFilter';
-import {ErrorDisplay} from '../ErrorDisplay';
-import useSearchReducer from '../LibraryItemsList/hooks/useSearchReducer';
-import {SearchActionTypes} from '../LibraryItemsList/hooks/useSearchReducer/searchReducer';
-import {Loading} from '../Loading';
-
-interface IDeactivateRecordsModalProps {
-    open: boolean;
-    library: string;
-    selection: ISearchSelection;
-    filters?: IFilter[];
-    onClose: () => void;
-}
-
-function DeactivateRecordsModal({
-    library,
-    onClose,
-    open,
-    selection,
-    filters
-}: IDeactivateRecordsModalProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {dispatch: searchDispatch} = useSearchReducer();
-
-    const hasSelectedAll = selection.allSelected;
-
-    const [deactivateRecords, {loading, error, called}] = useDeactivateRecordsMutation({
-        variables: {
-            libraryId: library,
-            recordsIds: hasSelectedAll ? null : selection.selected.map(record => record.id),
-            filters: hasSelectedAll ? getRequestFromFilters(filters) : null
-        }
-    });
-
-    const _handleOk = async () => {
-        try {
-            // Run the deactivate mutation
-            await deactivateRecords();
-
-            searchDispatch({type: SearchActionTypes.SET_LOADING, loading: true}); // Refresh the search
-            searchDispatch({type: SearchActionTypes.CLEAR_SELECTION}); // Refresh the search
-
-            onClose();
-        } catch (e) {
-            // Errors are handled with the error variable
-        }
-    };
-
-    return (
-        <Modal
-            title={t('records_deactivation.title')}
-            okText={t('global.submit')}
-            cancelText={t('global.cancel')}
-            onOk={_handleOk}
-            onCancel={onClose}
-            confirmLoading={loading}
-            open={open}
-            closable
-            centered
-            okButtonProps={{className: 'submit-btn'}}
-            destroyOnClose
-        >
-            {loading && <Loading data-testid="loading" />}
-            {!loading && error && <ErrorDisplay message={error.message} />}
-            {!called && t('records_deactivation.confirm')}
-        </Modal>
-    );
-}
-
-export default DeactivateRecordsModal;

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

package/src/components/Dimmer/Dimmer.test.tsx

@@ -1,21 +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} from '_ui/_tests/testUtils';
-import Dimmer from './Dimmer';
-
-describe('Dimmer', () => {
-    test('Render dimmer, handle onclick', async () => {
-        const _handleClick = jest.fn();
-
-        render(<Dimmer onClick={_handleClick} />);
-
-        const dimmerElem = screen.getByTestId('dimmer');
-        expect(dimmerElem).toBeInTheDocument();
-
-        userEvent.click(dimmerElem);
-
-        await waitFor(() => expect(_handleClick).toBeCalled());
-    });
-});

package/src/components/Dimmer/Dimmer.tsx

@@ -1,27 +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 React from 'react';
-import styled from 'styled-components';
-
-interface IDimmerProps {
-    onClick: () => void;
-}
-
-const DimmerElem = styled.div`
-    position: fixed;
-    z-index: 1;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.2);
-`;
-
-function Dimmer({onClick}: IDimmerProps): JSX.Element {
-    const _handleClick = () => onClick();
-
-    return <DimmerElem data-testid="dimmer" onClick={_handleClick} />;
-}
-
-export default Dimmer;

package/src/components/Dimmer/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 Dimmer from './Dimmer';
-export default Dimmer;

package/src/components/EditApplication/EditApplication.test.tsx

@@ -1,315 +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 {
-    CheckApplicationExistenceDocument,
-    GetApplicationByIdDocument,
-    GetApplicationModulesDocument,
-    SaveApplicationDocument
-} from '_ui/_gqlTypes';
-import {mockApplication} from '_ui/__mocks__/common/application';
-import {cleanup, render, screen, waitFor} from '../../_tests/testUtils';
-import EditApplication from './EditApplication';
-
-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()
-});
-
-// This test suite is very slow, I don't really know why. Increse the timeout for now.
-jest.setTimeout(15000);
-
-jest.mock('../../hooks/useSharedTranslation/useSharedTranslation');
-
-describe('EditApplication', () => {
-    beforeEach(() => {
-        jest.resetAllMocks();
-    });
-
-    const commonMocks = [
-        {
-            request: {
-                query: GetApplicationModulesDocument,
-                variables: {}
-            },
-            result: {
-                data: {
-                    applicationsModules: [
-                        {
-                            id: 'module1',
-                            description: 'Module 1',
-                            version: 'v1.0'
-                        }
-                    ]
-                }
-            }
-        },
-        {
-            request: {
-                query: CheckApplicationExistenceDocument,
-                variables: {
-                    id: 'test_app_fr_edited'
-                }
-            },
-            result: {
-                data: {
-                    applications: []
-                }
-            }
-        },
-        {
-            request: {
-                query: CheckApplicationExistenceDocument,
-                variables: {
-                    endpoint: 'test-app-fr-edited'
-                }
-            },
-            result: {
-                data: {
-                    applications: []
-                }
-            }
-        }
-    ];
-
-    describe('Create new app', () => {
-        test('Display creation form', async () => {
-            render(<EditApplication />, {mocks: commonMocks});
-
-            // Get all at once for performance reason
-            const inputs = await screen.findAllByRole('textbox', {name: /label|description/});
-
-            await userEvent.type(inputs[0], 'Test app fr');
-            await userEvent.type(inputs[1], 'Test app en');
-            await userEvent.type(inputs[2], 'Test app description fr');
-            await userEvent.type(inputs[3], 'Test app description en');
-
-            const idField = screen.getByRole('textbox', {name: /id/});
-            expect(idField).toHaveValue('test_app_fr');
-
-            const endpointField = screen.getByRole('textbox', {name: /endpoint/});
-            expect(endpointField).toHaveValue('test-app-fr');
-
-            //Hide some fields based on type
-            expect(screen.getByRole('combobox', {name: /module/})).toBeInTheDocument();
-
-            //Change type
-            await userEvent.click(screen.getByText(/internal/)); // Open "type" dropdown
-            await userEvent.click(await screen.findByText('applications.type_external')); // Select "external"
-
-            expect(screen.queryByRole('combobox', {name: /module/})).not.toBeInTheDocument();
-        });
-
-        test('Do not generate id if user has modified it', async () => {
-            render(<EditApplication />, {mocks: commonMocks});
-            const idField = screen.getByRole('textbox', {name: /id/});
-            const labelFrField = screen.getByRole('textbox', {name: /label_fr/});
-            const endpointField = screen.getByRole('textbox', {name: /endpoint/});
-
-            await userEvent.type(labelFrField, 'Test app fr');
-
-            expect(idField).toHaveValue('test_app_fr');
-
-            await userEvent.type(idField, '_edited');
-            await userEvent.type(endpointField, '-edited');
-            await userEvent.type(labelFrField, 'Test app fr updated');
-
-            expect(idField).toHaveValue('test_app_fr_edited');
-            expect(endpointField).toHaveValue('test-app-fr-edited');
-            cleanup();
-        });
-    });
-
-    describe('Edit existing app', () => {
-        const mocks = [
-            ...commonMocks,
-            {
-                request: {
-                    query: GetApplicationByIdDocument,
-                    variables: {
-                        id: mockApplication.id
-                    }
-                },
-                result: {
-                    data: {
-                        applications: {
-                            __typename: 'ApplicationsList',
-                            list: [{...mockApplication}]
-                        }
-                    }
-                }
-            }
-        ];
-
-        test('Display tabs', async () => {
-            render(<EditApplication applicationId={mockApplication.id} />, {mocks});
-
-            await waitFor(() => expect(screen.getByRole('tablist')).toBeInTheDocument());
-
-            expect(screen.getByRole('tab', {name: /info/})).toHaveAttribute('aria-selected', 'true');
-        });
-
-        test('Can select default active tab', async () => {
-            render(<EditApplication applicationId={mockApplication.id} activeTab="info" />, {
-                mocks
-            });
-
-            await waitFor(() => expect(screen.getByRole('tablist')).toBeInTheDocument());
-
-            expect(screen.getByRole('tab', {name: /info/})).toBeInTheDocument();
-        });
-
-        test('Can pass custom tabs', async () => {
-            const customTabs = [
-                {
-                    key: 'custom',
-                    label: 'Custom',
-                    children: <div>Custom tab</div>
-                }
-            ];
-
-            render(
-                <EditApplication applicationId={mockApplication.id} activeTab="custom" additionalTabs={customTabs} />,
-                {
-                    mocks
-                }
-            );
-
-            await waitFor(() => expect(screen.getByRole('tablist')).toBeInTheDocument());
-
-            expect(screen.getByRole('tab', {name: /custom/i})).toBeInTheDocument();
-            expect(screen.getByText('Custom tab')).toBeInTheDocument();
-        });
-
-        test('Can pass custom tabs', async () => {
-            const customTabs = [
-                {
-                    key: 'custom',
-                    label: 'Custom',
-                    children: <div>Custom tab</div>
-                }
-            ];
-
-            render(
-                <EditApplication applicationId={mockApplication.id} activeTab="custom" additionalTabs={customTabs} />,
-                {
-                    mocks
-                }
-            );
-
-            await waitFor(() => expect(screen.getByRole('tablist')).toBeInTheDocument());
-
-            expect(screen.getByRole('tab', {name: /custom/i})).toBeInTheDocument();
-            expect(screen.getByText('Custom tab')).toBeInTheDocument();
-        });
-
-        describe('Info form tab', () => {
-            test('Can edit application', async () => {
-                let saveCalled = false;
-                const mockSave = [
-                    ...commonMocks,
-                    {
-                        request: {
-                            query: SaveApplicationDocument,
-                            variables: {
-                                application: {
-                                    id: mockApplication.id,
-                                    label: {
-                                        ...mockApplication.label,
-                                        fr: mockApplication.label.fr + 'updated'
-                                    }
-                                }
-                            }
-                        },
-                        result: () => {
-                            saveCalled = true;
-                            return {
-                                data: {
-                                    saveApplication: {
-                                        ...mockApplication,
-                                        label: {
-                                            ...mockApplication.label,
-                                            fr: mockApplication.label.fr + 'updated'
-                                        }
-                                    }
-                                }
-                            };
-                        }
-                    }
-                ];
-
-                render(<EditApplication applicationId={mockApplication.id} />, {
-                    mocks: [...mocks, ...mockSave]
-                });
-
-                await waitFor(() => expect(screen.getByRole('form')).toBeInTheDocument());
-
-                // Get all fields at once for performance reasons
-                screen.getAllByRole('textbox', {name: /label|description|endpoint/}).forEach(field => {
-                    expect(field).not.toBeDisabled();
-                });
-
-                expect(screen.getByRole('textbox', {name: /id/})).toBeDisabled();
-
-                screen.getAllByRole('combobox', {name: /type|module/}).forEach(field => {
-                    expect(field).toBeDisabled();
-                });
-
-                // Update and submit field
-                await userEvent.type(screen.getByRole('textbox', {name: 'label_fr'}), 'updated{Enter}');
-                await waitFor(() => expect(saveCalled).toBe(true));
-            });
-
-            test('If app administration is not allowed, cannot edit anything', async () => {
-                const mocksNotAllowed = [
-                    ...commonMocks,
-                    {
-                        request: {
-                            query: GetApplicationByIdDocument,
-                            variables: {
-                                id: mockApplication.id
-                            }
-                        },
-                        result: {
-                            data: {
-                                applications: {
-                                    __typename: 'ApplicationsList',
-                                    list: [
-                                        {
-                                            ...mockApplication,
-                                            permissions: {
-                                                ...mockApplication.permissions,
-                                                admin_application: false
-                                            }
-                                        }
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                ];
-
-                render(<EditApplication applicationId={mockApplication.id} />, {
-                    mocks: mocksNotAllowed
-                });
-
-                await waitFor(() => expect(screen.getByRole('form')).toBeInTheDocument());
-
-                screen.getAllByRole('textbox').forEach(field => {
-                    expect(field).toBeDisabled();
-                });
-
-                screen.getAllByRole('combobox').forEach(field => {
-                    expect(field).toBeDisabled();
-                });
-            });
-        });
-    });
-});

package/src/components/EditApplication/EditApplication.tsx

@@ -1,64 +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 {KitTabs} from 'aristid-ds';
-import {ComponentProps} from 'react';
-import styled, {CSSObject} from 'styled-components';
-import {useGetApplicationByIdQuery} from '_ui/_gqlTypes';
-import {useSharedTranslation} from '../../hooks/useSharedTranslation';
-import {ErrorDisplay} from '../ErrorDisplay';
-import {Loading} from '../Loading';
-import {EditApplicationInfo} from './EditApplicationInfo';
-import {IEditApplicationProps} from './_types';
-
-const TabContentWrapper = styled.div<{$style?: CSSObject}>`
-    ${props => props.$style}
-`;
-
-function EditApplication({
-    applicationId,
-    onSetSubmitFunction,
-    tabContentStyle,
-    additionalTabs = [],
-    activeTab = 'info'
-}: IEditApplicationProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const isEditing = !!applicationId;
-
-    const {loading, error, data} = useGetApplicationByIdQuery({
-        variables: {
-            id: applicationId
-        },
-        skip: !applicationId
-    });
-
-    if (loading) {
-        return <Loading />;
-    }
-
-    if (error) {
-        return <ErrorDisplay message={error.message} />;
-    }
-
-    const application = data?.applications?.list[0] ?? null;
-
-    const appInfoComp = <EditApplicationInfo application={application} onSetSubmitFunction={onSetSubmitFunction} />;
-
-    // If creating new application, return the form directly
-    if (!isEditing) {
-        return appInfoComp;
-    }
-
-    const tabs: ComponentProps<typeof KitTabs>['items'] = [
-        {
-            key: 'info',
-            label: t('applications.info'),
-            children: <TabContentWrapper style={tabContentStyle}>{appInfoComp}</TabContentWrapper>
-        },
-        ...additionalTabs
-    ];
-
-    return <KitTabs items={tabs} defaultActiveKey={activeTab} />;
-}
-
-export default EditApplication;

package/src/components/EditApplication/EditApplicationInfo/EditApplicationInfo.tsx

@@ -1,166 +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 {Form} from 'antd';
-import {useEffect} from 'react';
-import {useLang} from '../../../hooks';
-import {
-    GetApplicationByIdQuery,
-    useCheckApplicationExistenceLazyQuery,
-    useSaveApplicationMutation
-} from '../../../_gqlTypes';
-import EditApplicationInfoForm from './EditApplicationInfoForm';
-
-interface IEditApplicationInfoProps {
-    application: GetApplicationByIdQuery['applications']['list'][number];
-    onSetSubmitFunction?: (submitFunction: () => Promise<void>) => void;
-}
-
-function EditApplicationInfo({application, onSetSubmitFunction}: IEditApplicationInfoProps): JSX.Element {
-    const {availableLangs} = useLang();
-    const [form] = Form.useForm();
-    const isEditing = !!application;
-
-    const [saveApplication, {loading}] = useSaveApplicationMutation();
-
-    const [checkApplicationExistence] = useCheckApplicationExistenceLazyQuery({
-        fetchPolicy: 'no-cache',
-        nextFetchPolicy: 'no-cache',
-        variables: {},
-        partialRefetch: false
-    });
-
-    const _submitForm = async () => {
-        await form.validateFields();
-        const values = form.getFieldsValue();
-
-        const label = Object.keys(values)
-            .filter(key => key.startsWith('label_'))
-            .reduce((acc, key) => {
-                acc[key.replace('label_', '')] = values[key];
-                return acc;
-            }, {});
-
-        const description = Object.keys(values)
-            .filter(key => key.startsWith('description_'))
-            .reduce((acc, key) => {
-                acc[key.replace('description_', '')] = values[key];
-                return acc;
-            }, {});
-
-        try {
-            await saveApplication({
-                variables: {
-                    application: {
-                        id: values.id,
-                        label,
-                        description,
-                        module: values.module,
-                        type: values.type,
-                        endpoint: values.endpoint
-                    }
-                }
-            });
-        } catch (e) {
-            // Display errors in form
-            form.setFields(
-                Object.keys(e.graphQLErrors?.[0]?.extensions?.fields ?? {}).map(fieldName => {
-                    return {
-                        name: fieldName,
-                        errors: [e.graphQLErrors[0].extensions.fields[fieldName]]
-                    };
-                })
-            );
-
-            throw e;
-        }
-    };
-
-    const _submitField = async (field: string, value: any) => {
-        if (!form.isFieldTouched(field) || !isEditing) {
-            return;
-        }
-
-        await form.validateFields([field]);
-
-        let dataToSave;
-        if (field.startsWith('label_')) {
-            const modifiedLang = field.replace('label_', '');
-            dataToSave = {
-                label: availableLangs.reduce((acc, lang) => {
-                    acc[lang] = lang === modifiedLang ? value : form.getFieldValue(`label_${lang}`);
-                    return acc;
-                }, {})
-            };
-        } else if (field.startsWith('description_')) {
-            const modifiedLang = field.replace('description_', '');
-            dataToSave = {
-                description: availableLangs.reduce((acc, lang) => {
-                    acc[lang] = lang === modifiedLang ? value : form.getFieldValue(`description_${lang}`);
-                    return acc;
-                }, {})
-            };
-        } else {
-            dataToSave = {
-                [field]: value
-            };
-        }
-
-        try {
-            await saveApplication({
-                variables: {
-                    application: {
-                        id: application.id,
-                        ...dataToSave
-                    }
-                }
-            });
-
-            form.setFields([
-                {
-                    name: field,
-                    touched: false
-                }
-            ]);
-        } catch (err) {
-            // Display errors in form
-            form.setFields([
-                {
-                    name: field,
-                    errors: [err.graphQLErrors?.[0]?.extensions?.fields?.[field] ?? err.message]
-                }
-            ]);
-        }
-    };
-
-    const _isApplicationUnique = async (fieldToCheck: 'id' | 'endpoint', value: any) => {
-        const {data: applicationExistenceData} = await checkApplicationExistence({
-            variables: {
-                // Force undefined values to fix a weird bug where both values are sent to the server even if only one is passed
-                id: undefined,
-                endpoint: undefined,
-                [fieldToCheck]: value
-            }
-        });
-
-        return !applicationExistenceData?.applications?.totalCount;
-    };
-
-    useEffect(() => {
-        if (onSetSubmitFunction) {
-            onSetSubmitFunction(_submitForm);
-        }
-    }, []);
-
-    return (
-        <EditApplicationInfoForm
-            form={form}
-            onSubmitField={_submitField}
-            onCheckApplicationUniqueness={_isApplicationUnique}
-            application={application}
-            loading={loading}
-        />
-    );
-}
-
-export default EditApplicationInfo;