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

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/ValuesList/ValuesList.tsx

@@ -1,79 +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 {CopyOutlined} from '@ant-design/icons';
-import {IDateRangeValue} from '@leav/utils';
-import {Button, Tooltip} from 'antd';
-import {SyntheticEvent} from 'react';
-import styled from 'styled-components';
-import List from '_ui/components/List';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {AttributeFormat, RecordFormAttributeStandardAttributeFragment} from '_ui/_gqlTypes';
-
-export interface IValueOfValuesList {
-    value: string;
-    rawValue: string | IDateRangeValue;
-    isNewValue: boolean;
-    canCopy: boolean;
-}
-
-interface IValuesListProps {
-    attribute: RecordFormAttributeStandardAttributeFragment;
-    valuesList: IValueOfValuesList[];
-    onValueSelect: (value: string | IDateRangeValue) => void;
-    onValueCopy: (value: string | IDateRangeValue) => void;
-}
-const ListItem = styled.div`
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-`;
-
-function ValuesList({attribute, valuesList: values, onValueCopy, onValueSelect}: IValuesListProps): JSX.Element {
-    const {t, i18n} = useSharedTranslation();
-    const _handleClick = (item: IValueOfValuesList) => {
-        onValueSelect(item.rawValue);
-    };
-
-    const renderItem = (item: IValueOfValuesList) => {
-        const _handleCopy = (e: SyntheticEvent) => {
-            e.stopPropagation();
-
-            onValueCopy(item.rawValue);
-        };
-
-        const valueToDisplay =
-            attribute.format === AttributeFormat.date
-                ? new Intl.DateTimeFormat(i18n.language).format(new Date(Number(item.value) * 1000))
-                : item.value;
-
-        return (
-            <ListItem>
-                <span>
-                    {valueToDisplay}
-                    {item.isNewValue && ` (${t('record_edition.new_value')})`}
-                </span>
-                {item.canCopy && (
-                    <Tooltip title={t('record_edition.copy_value')}>
-                        <Button icon={<CopyOutlined />} shape="circle" onClick={_handleCopy} />
-                    </Tooltip>
-                )}
-            </ListItem>
-        );
-    };
-
-    return (
-        <List
-            dataSource={values}
-            bordered
-            size="small"
-            maxHeight={250}
-            locale={{emptyText: t('record_edition.no_matching_value')}}
-            renderItemContent={renderItem}
-            onItemClick={_handleClick}
-        />
-    );
-}
-
-export default ValuesList;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/ValuesList/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 ValuesList from './ValuesList';
-export default ValuesList;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/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 StandardFieldValue from './StandardFieldValue';
-export default StandardFieldValue;

package/src/components/RecordEdition/EditRecord/uiElements/StandardField/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 StandardField from './StandardField';
-export default StandardField;

package/src/components/RecordEdition/EditRecord/uiElements/TextBlock/TextBlock.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 {mockCommonFormElementProps, mockFormElementTextBlock} from '_ui/__mocks__/common/form';
-import TextBlock from './TextBlock';
-
-describe('TextBlock', () => {
-    test('Render text block with markdown converted', async () => {
-        render(<TextBlock {...mockCommonFormElementProps} element={mockFormElementTextBlock} />);
-
-        expect(screen.getByText(/text content/i)).toBeInTheDocument();
-        expect(screen.getByText('text content')).toHaveStyle('font-weight: bold');
-    });
-});

package/src/components/RecordEdition/EditRecord/uiElements/TextBlock/TextBlock.tsx

@@ -1,13 +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 {IFormTextBlockSettings} from '@leav/utils';
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import {IFormElementProps} from '../../_types';
-
-function TextBlock({element}: IFormElementProps<IFormTextBlockSettings>): JSX.Element {
-    return <ReactMarkdown>{element.settings.content}</ReactMarkdown>;
-}
-
-export default TextBlock;

package/src/components/RecordEdition/EditRecord/uiElements/TextBlock/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 TextBlock from './TextBlock';
-export default TextBlock;

package/src/components/RecordEdition/EditRecord/uiElements/TreeField/TreeField.test.tsx

@@ -1,249 +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 {ICommonFieldsSettings} from '@leav/utils';
-import userEvent from '@testing-library/user-event';
-import {
-    EditRecordReducerActionsTypes,
-    initialState
-} from '_ui/components/RecordEdition/editRecordModalReducer/editRecordModalReducer';
-import * as useEditRecordModalReducer from '_ui/components/RecordEdition/editRecordModalReducer/useEditRecordModalReducer';
-import {RecordFormElementsValueTreeValue} from '_ui/hooks/useGetRecordForm/useGetRecordForm';
-import * as useRefreshFieldValues from '_ui/hooks/useRefreshFieldValues/useRefreshFieldValues';
-import {RecordFormAttributeTreeAttributeFragment} from '_ui/_gqlTypes';
-import {act, ICustomRenderOptions, render, screen, waitFor, within} from '_ui/_tests/testUtils';
-import {mockAttributeTree} from '_ui/__mocks__/common/attribute';
-import {mockFormElementTree, mockTreeValueA} from '_ui/__mocks__/common/form';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import {mockTreeRecord} from '_ui/__mocks__/common/treeElements';
-import TreeField from '.';
-import {RecordEditionContext} from '../../hooks/useRecordEditionContext';
-import {
-    APICallStatus,
-    DeleteMultipleValuesFunc,
-    DeleteValueFunc,
-    IFormElementProps,
-    ISubmitMultipleResult,
-    SubmitValueFunc
-} from '../../_types';
-
-jest.mock('_ui/components/SelectTreeNode', () => ({
-    SelectTreeNode: () => <div>SelectTreeNode</div>
-}));
-
-// To skip ellipsis in RecordCard, which is not very predictable during tests (sometimes only render "...")
-jest.mock('antd/lib/typography/Paragraph', () => {
-    return function Paragraph({children}) {
-        return <div>{children}</div>;
-    };
-});
-
-describe('TreeField', () => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    const mockEditRecordModalDispatch = jest.fn();
-    jest.spyOn(useEditRecordModalReducer, 'useEditRecordModalReducer').mockImplementation(() => ({
-        state: initialState,
-        dispatch: mockEditRecordModalDispatch
-    }));
-
-    jest.spyOn(useRefreshFieldValues, 'default').mockImplementation(() => ({
-        fetchValues: jest.fn().mockResolvedValue([])
-    }));
-
-    const mockSubmitRes: ISubmitMultipleResult = {
-        status: APICallStatus.SUCCESS,
-        values: [
-            {
-                ...(mockTreeValueA as RecordFormElementsValueTreeValue),
-                id_value: '987655',
-                version: null,
-                attribute: {...mockAttributeTree, system: false},
-                metadata: null
-            }
-        ]
-    };
-    const mockHandleSubmit: SubmitValueFunc = jest.fn(async () => {
-        return mockSubmitRes;
-    });
-    const mockHandleDelete: DeleteValueFunc = jest.fn().mockReturnValue({status: APICallStatus.SUCCESS});
-
-    const mockHandleDeleteMultipleValues: DeleteMultipleValuesFunc = jest
-        .fn()
-        .mockReturnValue({status: APICallStatus.SUCCESS});
-
-    const baseProps = {
-        onValueSubmit: mockHandleSubmit,
-        onValueDelete: mockHandleDelete,
-        onDeleteMultipleValues: mockHandleDeleteMultipleValues
-    };
-
-    const _renderTreeField = (
-        props: Partial<IFormElementProps<ICommonFieldsSettings>>,
-        renderOptions?: ICustomRenderOptions
-    ) => {
-        const allProps = {
-            ...baseProps,
-            ...(props as IFormElementProps<ICommonFieldsSettings>)
-        };
-
-        return render(
-            <RecordEditionContext.Provider
-                value={{
-                    record: mockRecord,
-                    readOnly: false,
-                    elements: null
-                }}
-            >
-                <TreeField {...allProps} />
-            </RecordEditionContext.Provider>,
-            renderOptions
-        );
-    };
-
-    beforeEach(() => jest.clearAllMocks());
-
-    test('If no values, display "add values" button', async () => {
-        _renderTreeField({
-            element: {...mockFormElementTree, values: []}
-        });
-
-        expect(screen.getByRole('button', {name: /add/})).toBeInTheDocument();
-    });
-
-    test('If multiple values, can add a new value', async () => {
-        _renderTreeField({
-            element: {
-                ...mockFormElementTree,
-                attribute: {...mockFormElementTree.attribute, multiple_values: true}
-            }
-        });
-
-        const addValueBtn = screen.getByRole('button', {name: /add/});
-        expect(addValueBtn).toBeInTheDocument();
-
-        userEvent.click(addValueBtn);
-
-        await waitFor(() => {
-            expect(screen.getByText('SelectTreeNode')).toBeInTheDocument();
-        });
-    });
-
-    test('If readonly attribute, cannot add a new value', async () => {
-        _renderTreeField({
-            element: {
-                ...mockFormElementTree,
-                attribute: {...mockFormElementTree.attribute, multiple_values: true, readonly: true}
-            }
-        });
-
-        expect(screen.queryByRole('button', {name: /add/})).not.toBeInTheDocument();
-    });
-
-    test('If not multiple values, cannot add a new value', async () => {
-        _renderTreeField({
-            element: {
-                ...mockFormElementTree,
-                attribute: {...mockFormElementTree.attribute, multiple_values: false}
-            }
-        });
-
-        expect(screen.queryByRole('button', {name: /add/})).not.toBeInTheDocument();
-    });
-
-    test('Can delete existing value', async () => {
-        _renderTreeField({
-            element: mockFormElementTree
-        });
-
-        expect(screen.getAllByRole('button', {name: /delete-value/, hidden: true})).toHaveLength(2);
-    });
-
-    test('Can delete all values', async () => {
-        _renderTreeField({
-            element: mockFormElementTree
-        });
-
-        const deleteAllButton = screen.getByRole('button', {name: /delete-all-values/, hidden: true});
-        expect(deleteAllButton).toBeInTheDocument();
-
-        // Click on the parent, because of the issue on Tooltip. See DeleteAllValuesBtn component file
-        userEvent.click(deleteAllButton.parentElement);
-
-        userEvent.click(await screen.findByRole('button', {name: /confirm/}));
-
-        await waitFor(() => {
-            expect(baseProps.onDeleteMultipleValues).toBeCalled();
-        });
-    });
-
-    test('Can edit linked node', async () => {
-        _renderTreeField({
-            element: mockFormElementTree
-        });
-
-        expect(screen.getAllByRole('button', {name: 'edit-record', hidden: true})).toHaveLength(2);
-    });
-
-    test('Can display value details', async () => {
-        _renderTreeField({
-            element: mockFormElementTree
-        });
-
-        const valueDetailsButtons = screen.getAllByRole('button', {name: /info/, hidden: true});
-        expect(valueDetailsButtons).toHaveLength(3); // 1 per value + 1 for the attribute
-
-        userEvent.click(valueDetailsButtons[0]);
-
-        await waitFor(() => {
-            expect(mockEditRecordModalDispatch).toBeCalled();
-        });
-        expect(mockEditRecordModalDispatch.mock.calls[0][0].type).toBe(EditRecordReducerActionsTypes.SET_ACTIVE_VALUE);
-    });
-
-    test('Can select value from values list', async () => {
-        const mockRecordFromList = {
-            ...mockTreeRecord,
-            whoAmI: {...mockTreeRecord.whoAmI, label: 'Record from value'}
-        };
-        const mockAttribute: RecordFormAttributeTreeAttributeFragment = {
-            ...mockFormElementTree.attribute,
-            linked_tree: {
-                id: 'some_tree',
-                label: {fr: 'Mon arbre'}
-            },
-            treeValuesList: {
-                enable: true,
-                allowFreeEntry: true,
-                values: [
-                    {
-                        id: '123456',
-                        record: mockRecordFromList,
-                        ancestors: [{record: mockRecordFromList}]
-                    }
-                ]
-            },
-            multiple_values: true
-        };
-
-        _renderTreeField({
-            element: {...mockFormElementTree, attribute: mockAttribute}
-        });
-
-        const addValueBtn = screen.getByRole('button', {name: /add/});
-
-        userEvent.click(addValueBtn);
-
-        const valuesAddBlock = within(await screen.findByTestId('values-add'));
-
-        const elementInList = await waitFor(() => valuesAddBlock.getByText(mockRecordFromList.whoAmI.label));
-        expect(elementInList).toBeInTheDocument();
-
-        await act(async () => {
-            userEvent.click(elementInList);
-        });
-
-        await waitFor(() => {
-            expect(mockHandleSubmit).toBeCalled();
-        });
-    });
-});