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

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,46 +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 * as React from 'react';
-import ErrorBoundaryContent from './ErrorBoundaryContent';
-
-interface IErrorBoundaryProps {
-    recoveryButtons?: React.ReactNode[];
-    children?: React.ReactNode;
-}
-
-interface IErrorBoundaryState {
-    error: Error;
-    errorInfo: React.ErrorInfo;
-}
-
-export class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
-    private constructor(props) {
-        super(props);
-        this.state = {error: null, errorInfo: null};
-    }
-
-    public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-        // Catch errors in any components below and re-render with error message
-        this.setState({
-            error,
-            errorInfo
-        });
-    }
-
-    public render(): React.ReactNode {
-        if (this.state.errorInfo) {
-            // Display error
-            return (
-                <ErrorBoundaryContent
-                    error={this.state.error}
-                    errorInfo={this.state.errorInfo}
-                    recoveryButtons={this.props.recoveryButtons}
-                />
-            );
-        }
-
-        // No error, just render children
-        return this.props.children;
-    }
-}

package/src/components/ErrorBoundary/ErrorBoundaryContent/ErrorBoundaryContent.tsx

@@ -1,59 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {FrownOutlined} from '@ant-design/icons';
-import {ConfigProvider, Result, Space, theme} from 'antd';
-import {ErrorInfo, ReactNode} from 'react';
-import styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {AntdThemeToken, customTheme, themeVars} from '../../../antdTheme';
-
-interface IErrorBoundaryContentProps {
-    error?: Error;
-    errorInfo?: ErrorInfo;
-    recoveryButtons?: ReactNode[];
-    showRecoveryButtons?: boolean;
-}
-
-const ErrorResult = styled(Result)<{$themeToken: AntdThemeToken}>`
-    font-size: 1rem;
-
-    .ant-result-content {
-        padding: 1rem;
-        background: none;
-
-        details {
-            border: 1px solid ${themeVars.borderColor};
-            border-radius: ${p => p.$themeToken.borderRadius}px;
-            padding: 1rem;
-        }
-    }
-`;
-
-const ButtonsWrapper = styled(Space)`
-    && {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 1rem;
-    }
-`;
-
-function ErrorBoundaryContent({error, errorInfo, recoveryButtons}: IErrorBoundaryContentProps): JSX.Element {
-    const {token} = theme.useToken();
-    const {t} = useSharedTranslation();
-
-    return (
-        <ConfigProvider theme={customTheme}>
-            <ErrorResult status="error" title={t('error.error_occurred')} icon={<FrownOutlined />} $themeToken={token}>
-                {!!recoveryButtons?.length && <ButtonsWrapper>{recoveryButtons}</ButtonsWrapper>}
-                <details style={{whiteSpace: 'pre-wrap'}}>
-                    {error && error.toString()}
-                    <br />
-                    {errorInfo.componentStack}
-                </details>
-            </ErrorResult>
-        </ConfigProvider>
-    );
-}
-
-export default ErrorBoundaryContent;

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

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

package/src/components/ErrorDisplay/ErrorDisplay.test.tsx

@@ -1,15 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {render, screen} from '_ui/_tests/testUtils';
-import ErrorDisplay from './ErrorDisplay';
-
-describe('ErrorDisplay', () => {
-    test('Display error', async () => {
-        render(<ErrorDisplay message="my_error_message" />);
-
-        const element = screen.getByText('my_error_message');
-
-        expect(element).toBeInTheDocument();
-    });
-});

package/src/components/ErrorDisplay/ErrorDisplay.tsx

@@ -1,67 +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 {CloseCircleFilled, FrownOutlined, MinusCircleFilled} from '@ant-design/icons';
-import {Button, Result} from 'antd';
-import {ReactNode} from 'react';
-import {useHistory} from 'react-router-dom';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {ErrorDisplayTypes} from '../../constants';
-
-interface IErrorProps {
-    message?: string;
-    type?: ErrorDisplayTypes;
-    actionButton?: ReactNode;
-    showActionButton?: boolean;
-}
-
-function ErrorDisplay({
-    message,
-    actionButton,
-    showActionButton = true,
-    type = ErrorDisplayTypes.ERROR
-}: IErrorProps): JSX.Element {
-    const {t, i18n} = useSharedTranslation();
-    const history = useHistory();
-
-    const _handleBackHomeClick = () => history.replace('/');
-
-    const BackHomeButton = (
-        <Button type="primary" onClick={_handleBackHomeClick}>
-            {t('global.go_back_home')}
-        </Button>
-    );
-
-    const errorByType = {
-        [ErrorDisplayTypes.ERROR]: {
-            title: i18n.isInitialized ? t('error.error_occurred') : 'An error occurred',
-            icon: <CloseCircleFilled color="red" />,
-            message: '',
-            actionButton: null
-        },
-        [ErrorDisplayTypes.PERMISSION_ERROR]: {
-            title: t('error.access_denied'),
-            icon: <MinusCircleFilled color="red" />,
-            message: t('error.access_denied_details'),
-            actionButton: showActionButton ? BackHomeButton : null
-        },
-        [ErrorDisplayTypes.PAGE_NOT_FOUND]: {
-            title: t('error.page_not_found'),
-            icon: <FrownOutlined />,
-            message: '',
-            actionButton: showActionButton ? BackHomeButton : null
-        }
-    };
-
-    return (
-        <Result
-            title={errorByType[type].title}
-            subTitle={message ?? errorByType[type].message}
-            status="error"
-            icon={errorByType[type].icon}
-            extra={actionButton ?? errorByType[type].actionButton}
-        />
-    );
-}
-
-export default ErrorDisplay;

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

package/src/components/ErrorMessage/ErrorMessage.test.tsx

@@ -1,30 +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 {act, render, screen, waitFor} from '_ui/_tests/testUtils';
-import ErrorMessage from './ErrorMessage';
-
-describe('ErrorMessage', () => {
-    const _handleClose = jest.fn();
-    test('Display error message', async () => {
-        await act(async () => {
-            render(<ErrorMessage error="my error" onClose={_handleClose} />);
-        });
-
-        expect(screen.getByText('my error')).toBeInTheDocument();
-    });
-
-    test('Can close message', async () => {
-        await act(async () => {
-            render(<ErrorMessage error="my error" onClose={_handleClose} />);
-        });
-
-        const closeButton = screen.getByRole('button', {name: 'close'});
-        userEvent.click(closeButton);
-
-        await waitFor(() => {
-            expect(_handleClose).toBeCalled();
-        });
-    });
-});

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,45 +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, ExclamationCircleOutlined} from '@ant-design/icons';
-import {Button, Space} from 'antd';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-
-interface IErrorMessageProps {
-    error: string | string[];
-    onClose: () => void;
-}
-
-const ErrorMessageWrapper = styled.div`
-    color: ${themeVars.errorColor};
-    font-weight: bold;
-`;
-
-const ErrorsList = styled.ul`
-    list-style: none;
-`;
-
-function ErrorMessage({error, onClose}: IErrorMessageProps): JSX.Element {
-    const displayedError = Array.isArray(error) ? (
-        <ErrorsList>
-            {error.map((e, i) => (
-                <li key={i}>{e}</li>
-            ))}
-        </ErrorsList>
-    ) : (
-        error
-    );
-
-    return (
-        <ErrorMessageWrapper>
-            <Space size="small" align="start">
-                <ExclamationCircleOutlined />
-                {displayedError}
-                <Button onClick={onClose} size="small" icon={<CloseOutlined />} style={{border: 'none'}} />
-            </Space>
-        </ErrorMessageWrapper>
-    );
-}
-
-export default ErrorMessage;

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

package/src/components/ExportModal/ExportModal.test.tsx

@@ -1,44 +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 {ExportDocument} from '_ui/_gqlTypes';
-import {render, screen} from '_ui/_tests/testUtils';
-import ExportModal from './ExportModal';
-
-jest.mock('_ui/components/AttributesSelectionList', () => {
-    return function AttributesSelectionList() {
-        return <div>AttributesSelectionList</div>;
-    };
-});
-
-describe('ExportModal', () => {
-    test('Run export', async () => {
-        const onClose = jest.fn();
-
-        const mocks = [
-            {
-                request: {
-                    query: ExportDocument,
-                    variables: {library: 'test_lib', attributes: ['id'], filters: []}
-                },
-                result: {
-                    data: {
-                        export: '/path/to/file.xls'
-                    }
-                }
-            }
-        ];
-
-        render(
-            <ExportModal library="test_lib" selection={{selected: [], allSelected: false}} open onClose={onClose} />,
-            {mocks}
-        );
-
-        expect(screen.getByText('AttributesSelectionList')).toBeInTheDocument();
-
-        userEvent.click(screen.getByRole('button', {name: /start/}));
-
-        expect(await screen.findByText(/done/)).toBeInTheDocument();
-    });
-});

package/src/components/ExportModal/ExportModal.tsx

@@ -1,205 +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 {LoadingOutlined} from '@ant-design/icons';
-import {Modal, Result, StepProps, Steps} from 'antd';
-import {useKitNotification} from 'aristid-ds';
-import {useState} from 'react';
-import {useTranslation} from 'react-i18next';
-import styled from 'styled-components';
-import {IFilter, ISearchSelection, ISelectedAttribute} from '_ui/types';
-import {
-    AttributeType,
-    RecordFilterCondition,
-    RecordFilterInput,
-    RecordFilterOperator,
-    useExportLazyQuery
-} from '_ui/_gqlTypes';
-import {getRequestFromFilters} from '_ui/_utils/getRequestFromFilter';
-import AttributesSelectionList from '../AttributesSelectionList';
-import {ErrorDisplay} from '../ErrorDisplay';
-
-export interface IExportModalProps {
-    open: boolean;
-    library: string;
-    selection: ISearchSelection;
-    filters?: IFilter[];
-    onClose: () => void;
-}
-
-enum ExportSteps {
-    ATTRIBUTE_SELECTION = 0,
-    PROCESSING = 1,
-    DONE = 2
-}
-
-const Content = styled.div`
-    margin-top: 2em;
-`;
-
-const CenteredWrapper = styled.div`
-    text-align: center;
-`;
-
-function ExportModal({library, onClose, selection, filters, open}: IExportModalProps): JSX.Element {
-    const {t} = useTranslation();
-    const {kitNotification} = useKitNotification();
-
-    const [selectedAttributes, setSelectedAttributes] = useState<ISelectedAttribute[]>([]);
-    const [currentStep, setCurrentStep] = useState<ExportSteps>(ExportSteps.ATTRIBUTE_SELECTION);
-    const [filepath, setFilepath] = useState<string>('');
-
-    const [runExport, {error: exportError}] = useExportLazyQuery({
-        fetchPolicy: 'no-cache',
-        onCompleted: data => {
-            setCurrentStep(ExportSteps.DONE);
-            setFilepath(data?.export);
-
-            kitNotification.info({
-                message: t('export.export_notification_title'),
-                description: null
-            });
-        },
-        onError: error => {
-            kitNotification.error({
-                message: t('error.error_occurred'),
-                description: error.message
-            });
-
-            setCurrentStep(ExportSteps.DONE);
-        }
-    });
-
-    const _runExport = () => {
-        setCurrentStep(ExportSteps.PROCESSING);
-
-        let queryFilters: RecordFilterInput[];
-        if (selection.allSelected) {
-            queryFilters = getRequestFromFilters(filters);
-        } else {
-            const selectedIds = selection.selected.map(elementSelected => elementSelected.id);
-
-            // Convert selected IDs to a search query with OR between each ID
-            queryFilters = selectedIds.length
-                ? [
-                      {
-                          operator: RecordFilterOperator.OPEN_BRACKET
-                      },
-                      ...selectedIds.reduce(
-                          (allFilters: RecordFilterInput[], id: string, index: number): RecordFilterInput[] => {
-                              allFilters.push({
-                                  field: 'id',
-                                  condition: RecordFilterCondition.EQUAL,
-                                  value: id
-                              });
-
-                              if (index < selectedIds.length - 1) {
-                                  allFilters.push({
-                                      operator: RecordFilterOperator.OR
-                                  });
-                              }
-
-                              return allFilters;
-                          },
-                          []
-                      ),
-                      {
-                          operator: RecordFilterOperator.CLOSE_BRACKET
-                      }
-                  ]
-                : [];
-        }
-
-        // For tree attribute, attribute path is [parent id].[library id].[attribute id].
-        // We don't want the library ID
-        const attributesToExport = selectedAttributes.length
-            ? selectedAttributes.map(selectedAttribute =>
-                  selectedAttribute?.parentAttributeData?.type === AttributeType.tree
-                      ? `${selectedAttribute?.parentAttributeData.id}.${selectedAttribute.id}`
-                      : selectedAttribute.path
-              )
-            : ['id'];
-
-        runExport({
-            variables: {
-                library,
-                attributes: attributesToExport,
-                filters: queryFilters
-            }
-        });
-    };
-
-    const _handleOk = () => {
-        if (currentStep === ExportSteps.DONE) {
-            onClose();
-            return;
-        }
-
-        _runExport();
-    };
-    const validateButtonLabel = t(currentStep === ExportSteps.DONE ? 'global.close' : 'export.start');
-
-    const stepsItems: StepProps[] = [
-        {
-            title: t('export.attributes_selection')
-        },
-        {
-            title: t('export.export_generation'),
-            icon: currentStep === ExportSteps.PROCESSING ? <LoadingOutlined /> : null
-        },
-        {
-            title: t('export.export_done'),
-            status: exportError ? 'error' : null
-        }
-    ];
-
-    return (
-        <Modal
-            title={t('export.title')}
-            okText={validateButtonLabel}
-            okType="primary"
-            cancelText={t('global.cancel')}
-            onOk={_handleOk}
-            onCancel={onClose}
-            open={open}
-            closable
-            width="90vw"
-            centered
-            confirmLoading={currentStep === ExportSteps.PROCESSING}
-            bodyStyle={{height: 'calc(100vh - 10rem)'}}
-            cancelButtonProps={{disabled: currentStep === ExportSteps.DONE}}
-            destroyOnClose
-        >
-            <Steps current={currentStep} style={{marginBottom: '2em'}} items={stepsItems} />
-            <Content>
-                {currentStep === ExportSteps.ATTRIBUTE_SELECTION && (
-                    <AttributesSelectionList
-                        library={library}
-                        multiple
-                        onSelectionChange={setSelectedAttributes}
-                        selectedAttributes={selectedAttributes}
-                        canExpandExtendedAttributes={false}
-                    />
-                )}
-                {currentStep === ExportSteps.PROCESSING && (
-                    <CenteredWrapper data-test-id="processing">{t('global.processing') + '...'}</CenteredWrapper>
-                )}
-                {currentStep === ExportSteps.DONE && (
-                    <CenteredWrapper data-test-id="done">
-                        {!exportError ? (
-                            <Result
-                                status="success"
-                                title={t('export.export_done')}
-                                subTitle={t('export.export_done_description')}
-                            />
-                        ) : (
-                            <ErrorDisplay message={exportError.message} />
-                        )}
-                    </CenteredWrapper>
-                )}
-            </Content>
-        </Modal>
-    );
-}
-
-export default ExportModal;

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

package/src/components/FieldsGroup/FieldsGroup.test.tsx

@@ -1,18 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {render, screen} from '../../_tests/testUtils';
-import FieldsGroup from './FieldsGroup';
-
-describe('FieldsGroup', () => {
-    test('Render test', async () => {
-        render(
-            <FieldsGroup label="My Label">
-                <div>CHILD</div>
-            </FieldsGroup>
-        );
-
-        expect(screen.getByRole('group', {name: 'My Label'})).toBeInTheDocument();
-        expect(screen.getByText('CHILD')).toBeInTheDocument();
-    });
-});

package/src/components/FieldsGroup/FieldsGroup.tsx

@@ -1,43 +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 {theme} from 'antd';
-import React from 'react';
-import styled, {CSSObject} from 'styled-components';
-import {AntdThemeToken} from '../../antdTheme';
-
-interface IFieldsGroupProps {
-    label?: string | React.ReactNode;
-    style?: CSSObject;
-    children: React.ReactNode;
-}
-
-const FieldsSet = styled.fieldset<{$themeToken: AntdThemeToken; style: CSSObject}>`
-    border-radius: ${props => props.$themeToken.borderRadius}px;
-    border: 1px solid ${props => props.$themeToken.colorBorderSecondary};
-    padding: ${props => props.$themeToken.padding}px ${props => props.$themeToken.padding / 2}px;
-    margin-bottom: ${props => props.$themeToken.padding}px;
-
-    legend {
-        border: none;
-        padding: 0 0.5rem;
-        margin: 0 0 0 5%;
-        font-size: 1em;
-        color: ${props => props.$themeToken.colorTextSecondary};
-        width: auto;
-    }
-
-    ${props => props.style}
-`;
-
-function FieldsGroup({label, children, style}: IFieldsGroupProps): JSX.Element {
-    const {token} = theme.useToken();
-    return (
-        <FieldsSet $themeToken={token} style={style}>
-            {label && <legend>{label}</legend>}
-            {children}
-        </FieldsSet>
-    );
-}
-
-export default FieldsGroup;

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