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

package/src/components/RecordEdition/editRecordModalReducer/editRecordModalReducer.ts

@@ -1,155 +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 {IRecordIdentityWhoAmI} from '../../../types/records';
-import {IValueVersion} from '../../../types/values';
-import {RecordFormAttributeFragment, RecordUpdateSubscription, ValueDetailsFragment} from '../../../_gqlTypes';
-import {RecordProperty} from '../../../_queries/records/getRecordPropertiesQuery';
-import {StandardValueTypes} from '../EditRecord/_types';
-
-export interface IRecordPropertyWithAttribute {
-    attribute: RecordFormAttributeFragment;
-    value: RecordProperty;
-    editingValue?: StandardValueTypes;
-}
-
-export interface IEditRecordReducerState {
-    record: IRecordIdentityWhoAmI;
-    libraryId: string;
-    activeValue: IRecordPropertyWithAttribute;
-    sidebarContent: 'summary' | 'valueDetails' | 'valuesVersions';
-    valuesVersion: IValueVersion;
-    originValuesVersion: IValueVersion;
-    refreshRequested: boolean;
-    externalUpdate: {
-        modifiers: IRecordIdentityWhoAmI[];
-        updatedValues: {
-            [attribute: string]: ValueDetailsFragment[];
-        };
-    };
-}
-
-export enum EditRecordReducerActionsTypes {
-    SET_RECORD = 'SET_RECORD',
-    SET_ACTIVE_VALUE = 'SET_ACTIVE_VALUE',
-    SET_SIDEBAR_CONTENT = 'SET_SIDEBAR_CONTENT',
-    SET_VALUES_VERSION = 'SET_VALUES_VERSION',
-    SET_EDITING_VALUE = 'SET_CURRENT_VALUE_CONTENT',
-    REQUEST_REFRESH = 'REQUEST_REFRESH',
-    REFRESH_DONE = 'REFRESH_DONE',
-    ADD_EXTERNAL_UPDATE = 'ADD_EXTERNAL_UPDATE',
-    CLEAR_EXTERNAL_UPDATE = 'CLEAR_EXTERNAL_UPDATE'
-}
-
-export type IEditRecordReducerActions =
-    | {
-          type: EditRecordReducerActionsTypes.SET_RECORD;
-          record: IEditRecordReducerState['record'];
-      }
-    | {
-          type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE;
-          value: IEditRecordReducerState['activeValue'];
-      }
-    | {
-          type: EditRecordReducerActionsTypes.SET_SIDEBAR_CONTENT;
-          content: IEditRecordReducerState['sidebarContent'];
-      }
-    | {
-          type: EditRecordReducerActionsTypes.SET_VALUES_VERSION;
-          valuesVersion: IEditRecordReducerState['valuesVersion'];
-      }
-    | {
-          type: EditRecordReducerActionsTypes.SET_EDITING_VALUE;
-          value: StandardValueTypes;
-      }
-    | {
-          type: EditRecordReducerActionsTypes.REQUEST_REFRESH;
-      }
-    | {
-          type: EditRecordReducerActionsTypes.REFRESH_DONE;
-      }
-    | {
-          type: EditRecordReducerActionsTypes.ADD_EXTERNAL_UPDATE;
-          modifier: IRecordIdentityWhoAmI;
-          updatedValues: RecordUpdateSubscription['recordUpdate']['updatedValues'];
-      }
-    | {
-          type: EditRecordReducerActionsTypes.CLEAR_EXTERNAL_UPDATE;
-      };
-
-export type EditRecordDispatchFunc = (action: IEditRecordReducerActions) => void;
-
-export const initialState: IEditRecordReducerState = {
-    record: null,
-    libraryId: null,
-    activeValue: null,
-    sidebarContent: 'summary',
-    valuesVersion: null,
-    originValuesVersion: null,
-    refreshRequested: false,
-    externalUpdate: {
-        modifiers: [],
-        updatedValues: {}
-    }
-};
-
-const editRecordModalReducer = (
-    state: IEditRecordReducerState,
-    action: IEditRecordReducerActions
-): IEditRecordReducerState => {
-    switch (action.type) {
-        case EditRecordReducerActionsTypes.SET_RECORD:
-            return {...state, record: action.record};
-        case EditRecordReducerActionsTypes.SET_ACTIVE_VALUE:
-            return {
-                ...state,
-                activeValue: action.value,
-                sidebarContent: action.value !== null ? 'valueDetails' : 'summary'
-            };
-        case EditRecordReducerActionsTypes.SET_SIDEBAR_CONTENT:
-            return {...state, sidebarContent: action.content};
-        case EditRecordReducerActionsTypes.SET_VALUES_VERSION:
-            return {...state, valuesVersion: action.valuesVersion};
-        case EditRecordReducerActionsTypes.SET_EDITING_VALUE:
-            return {
-                ...state,
-                activeValue: {
-                    ...state.activeValue,
-                    editingValue: action.value
-                }
-            };
-        case EditRecordReducerActionsTypes.REQUEST_REFRESH:
-            return {...state, refreshRequested: true};
-        case EditRecordReducerActionsTypes.REFRESH_DONE:
-            return {...state, refreshRequested: false};
-        case EditRecordReducerActionsTypes.ADD_EXTERNAL_UPDATE:
-            const newState = {...state};
-            const newModifiers = state.externalUpdate?.modifiers.find(m => m.id === action.modifier.id)
-                ? newState.externalUpdate?.modifiers ?? []
-                : [...(newState.externalUpdate?.modifiers ?? []), action.modifier];
-
-            const newValues = action.updatedValues.reduce(
-                (acc, updatedValue) => ({
-                    ...acc,
-                    [updatedValue.attribute]: [
-                        ...(newState.externalUpdate?.[updatedValue.attribute] ?? []),
-                        updatedValue.value
-                    ]
-                }),
-                {}
-            );
-
-            newState.externalUpdate = {
-                modifiers: newModifiers,
-                updatedValues: {...(state.externalUpdate?.updatedValues ?? {}), ...newValues}
-            };
-
-            return newState;
-        case EditRecordReducerActionsTypes.CLEAR_EXTERNAL_UPDATE:
-            return {...state, externalUpdate: {...initialState.externalUpdate}};
-        default:
-            return state;
-    }
-};
-
-export default editRecordModalReducer;

package/src/components/RecordEdition/editRecordModalReducer/editRecordModalReducerContext.ts

@@ -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 React, {Dispatch} from 'react';
-import {IEditRecordReducerActions, IEditRecordReducerState, initialState} from './editRecordModalReducer';
-
-export interface IEditRecordModalReducerContext {
-    state: IEditRecordReducerState;
-    dispatch: Dispatch<IEditRecordReducerActions>;
-}
-
-export const EditRecordModalReducerContext = React.createContext<IEditRecordModalReducerContext>({
-    state: initialState,
-    dispatch: () => initialState
-});

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

package/src/components/RecordEdition/editRecordModalReducer/useEditRecordModalReducer.ts

@@ -1,7 +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 {useContext} from 'react';
-import {EditRecordModalReducerContext} from './editRecordModalReducerContext';
-
-export const useEditRecordModalReducer = () => useContext(EditRecordModalReducerContext);

package/src/components/RecordEdition/index.ts

@@ -1,4 +0,0 @@
-export {default as EditRecord} from './EditRecord';
-export {default as EditRecordBtn} from './EditRecordBtn';
-export {default as EditRecordModal} from './EditRecordModal';
-export {default as EditRecordSidebar} from './EditRecordSidebar';

package/src/components/RecordPreviewWithModal/FileModal/FileModal.test.tsx

@@ -1,357 +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 {IPreviewScalar} from '@leav/utils';
-import {mockApplication} from '_ui/__mocks__/common/application';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import {themeVars} from '../../../antdTheme';
-import {GetFileDataDocument, GetFileDataQueryVariables, LibraryBehavior} from '../../../_gqlTypes';
-import {act, fireEvent, render, screen, waitFor, within} from '../../../_tests/testUtils';
-import FileModal from './FileModal';
-
-describe('FileModal', () => {
-    const mockFileData = {
-        __typename: 'Record',
-        id: mockRecord.id,
-        whoAmI: {
-            __typename: 'RecordIdentity',
-            ...mockRecord,
-            preview: {
-                ...mockRecord.preview,
-                pdf: '/path/to/file.pdf'
-            }
-        },
-        created_at: [{value: '2020-01-01T00:00:00.000Z', __typename: 'Value'}],
-        created_by: [{value: {id: '1', whoAmI: mockRecord, __typename: 'Record'}, __typename: 'LinkValue'}],
-        modified_at: [{value: '2020-01-02T00:00:00.000Z', __typename: 'Value'}],
-        modified_by: [{value: {id: '1', whoAmI: mockRecord, __typename: 'Record'}, __typename: 'LinkValue'}],
-        file_path: [{value: 'path/to/', __typename: 'Value'}],
-        file_name: [{__typename: 'Value', value: 'my_file.jpg'}],
-        previews_status: [
-            {
-                value:
-                    '{"big":{"message":"preview create","status":0},"huge":{"message":"preview create","status":0},"medium":{"message":"preview create","status":0},"small":{"message":"preview create","status":0},"tiny":{"message":"preview create","status":0}}',
-                __typename: 'Value'
-            }
-        ],
-        library: {
-            behavior: LibraryBehavior.files,
-            __typename: 'Library'
-        }
-    };
-
-    const mockVariables: GetFileDataQueryVariables = {
-        library: 'files',
-        fileId: mockRecord.id,
-        previewsStatusAttribute: 'files_previews_status'
-    };
-
-    test('Display file record properties', async () => {
-        const mocks = [
-            {
-                request: {
-                    query: GetFileDataDocument,
-                    variables: mockVariables
-                },
-                result: {data: {records: {list: [mockFileData]}}}
-            }
-        ];
-        render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-            mocks
-        });
-
-        await waitFor(() => screen.getByTestId('title-section'));
-        const titleSection = screen.getByTestId('title-section');
-        const sidebarSection = screen.getByTestId('sidebar-section');
-        expect(within(titleSection).getByText(mockFileData.whoAmI.label)).toBeInTheDocument();
-        expect(within(sidebarSection).getByText('/' + mockFileData.file_path[0].value)).toBeInTheDocument();
-        expect(within(sidebarSection).getByText(new RegExp(mockFileData.created_at[0].value))).toBeInTheDocument();
-        expect(within(sidebarSection).getByText(mockFileData.created_by[0].value.whoAmI.label)).toBeInTheDocument();
-    });
-
-    describe('Image file', () => {
-        test('Display image file', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {data: {records: {list: [mockFileData]}}}
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-
-            const images = within(contentSection).getAllByRole('img', {hidden: true});
-            // Load images
-            await act(async () => {
-                for (const image of images) {
-                    fireEvent.load(image);
-                }
-            });
-
-            expect(
-                within(contentSection)
-                    .getAllByRole('img')
-                    .find(img => img.getAttribute('src') === (mockFileData.whoAmI.preview as IPreviewScalar).huge)
-            ).toBeDefined();
-        });
-
-        test('Display fallback if image not available', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {
-                        data: {records: {list: [{...mockFileData, whoAmI: {...mockFileData.whoAmI, preview: null}}]}}
-                    }
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-            expect(within(contentSection).getByText(/no_preview/)).toBeInTheDocument();
-        });
-
-        test('Show checkerboard if app is in transparency mode', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {data: {records: {list: [mockFileData]}}}
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks,
-                currentApp: {...mockApplication, settings: {showTransparency: true}}
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-
-            const images = within(contentSection).getAllByRole('img', {hidden: true});
-            // Load images
-            await act(async () => {
-                for (const image of images) {
-                    fireEvent.load(image);
-                }
-            });
-
-            expect(screen.getByAltText('record preview')).toHaveStyle(`background: ${themeVars.checkerBoard}`);
-        });
-    });
-
-    describe('Handle video file', () => {
-        test('Display video player', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {
-                        data: {
-                            records: {
-                                list: [{...mockFileData, file_name: [{__typename: 'Value', value: 'some_file.mp4'}]}]
-                            }
-                        }
-                    }
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-            expect(within(contentSection).getByTestId('video-player')).toBeInTheDocument();
-        });
-
-        test('Display fallback if video not available', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {
-                        data: {
-                            records: {
-                                list: [
-                                    {
-                                        ...mockFileData,
-                                        file_name: [{__typename: 'Value', value: 'some_file.mp4'}],
-                                        whoAmI: {...mockFileData.whoAmI, preview: null}
-                                    }
-                                ]
-                            }
-                        }
-                    }
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-            expect(within(contentSection).getByText(/no_preview/)).toBeInTheDocument();
-        });
-    });
-
-    describe('Handle audio file', () => {
-        test('Display audio player', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {
-                        data: {
-                            records: {
-                                list: [{...mockFileData, file_name: [{__typename: 'Value', value: 'some_file.mp3'}]}]
-                            }
-                        }
-                    }
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-            expect(within(contentSection).getByTestId('audio-player')).toBeInTheDocument();
-        });
-
-        test('Display fallback if audio file is not available', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {
-                        data: {
-                            records: {
-                                list: [
-                                    {
-                                        ...mockFileData,
-                                        file_name: [{__typename: 'Value', value: 'some_file.mp4'}],
-                                        whoAmI: {...mockFileData.whoAmI, preview: null}
-                                    }
-                                ]
-                            }
-                        }
-                    }
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-            expect(within(contentSection).getByText(/no_preview/)).toBeInTheDocument();
-        });
-    });
-
-    describe('Handle document file', () => {
-        test('Display document viewer', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {
-                        data: {
-                            records: {
-                                list: [{...mockFileData, file_name: [{__typename: 'Value', value: 'some_file.pdf'}]}]
-                            }
-                        }
-                    }
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-            expect(await within(contentSection).findByTestId('document-viewer')).toBeInTheDocument();
-        });
-
-        test('Display fallback if document not available', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {
-                        data: {
-                            records: {
-                                list: [
-                                    {
-                                        ...mockFileData,
-                                        file_name: [{__typename: 'Value', value: 'some_file.pdf'}],
-                                        whoAmI: {...mockFileData.whoAmI, preview: null}
-                                    }
-                                ]
-                            }
-                        }
-                    }
-                }
-            ];
-
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-            expect(within(contentSection).getByText(/no_preview/)).toBeInTheDocument();
-        });
-    });
-
-    describe('Handle unknown file', () => {
-        test('Display generic view for unknown file', async () => {
-            const mocks = [
-                {
-                    request: {
-                        query: GetFileDataDocument,
-                        variables: mockVariables
-                    },
-                    result: {
-                        data: {
-                            records: {
-                                list: [{...mockFileData, file_name: [{__typename: 'Value', value: 'some_file.txt'}]}]
-                            }
-                        }
-                    }
-                }
-            ];
-            render(<FileModal fileId={mockRecord.id} libraryId="files" open onClose={jest.fn()} />, {
-                mocks
-            });
-
-            await waitFor(() => screen.getByTestId('content-section'));
-            const contentSection = screen.getByTestId('content-section');
-            expect(within(contentSection).getByText('TXT')).toBeInTheDocument();
-        });
-    });
-});

package/src/components/RecordPreviewWithModal/FileModal/FileModal.tsx

@@ -1,71 +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 {Button, Modal} from 'antd';
-import styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import useGetPreparedFileData from '../../../hooks/useGetPreparedFileData/useGetPreparedFileData';
-import {ErrorDisplay} from '../../ErrorDisplay';
-import {Loading} from '../../Loading';
-import FileModalContent from './FileModalContent';
-import {fileModalWidth} from './_constants';
-
-const StyledModal = styled(Modal)`
-    .ant-modal-close {
-        top: 0;
-        right: 0;
-        width: 4rem;
-        height: 4rem;
-        line-height: 4rem;
-    }
-
-    && .ant-modal-content {
-        padding: 0;
-    }
-`;
-
-const ModalFooter = styled.div`
-    padding: 0.5rem 1rem;
-`;
-
-interface IFileModalProps {
-    fileId: string;
-    libraryId: string;
-    open: boolean;
-    onClose: () => void;
-}
-
-function FileModal({fileId, libraryId, open, onClose}: IFileModalProps): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const {loading, error, fileData} = useGetPreparedFileData(libraryId, fileId);
-    const footerButtons = [
-        <Button aria-label={t('global.close')} key="close" onClick={onClose}>
-            {t('global.close')}
-        </Button>
-    ];
-
-    const footer = <ModalFooter>{footerButtons}</ModalFooter>;
-
-    return (
-        <StyledModal
-            open={open}
-            destroyOnClose
-            okText={t('global.close')}
-            onCancel={onClose}
-            width="90vw"
-            centered
-            style={{padding: 0, maxWidth: `${fileModalWidth}px`}}
-            bodyStyle={{height: 'calc(100vh - 12rem)', overflowY: 'auto', padding: 0}}
-            footer={footer}
-        >
-            {loading && <Loading />}
-            {!loading && (error || !fileData) && (
-                <ErrorDisplay message={error?.message ?? t('global.element_not_found')} />
-            )}
-            {!loading && !error && fileData && <FileModalContent fileData={fileData} />}
-        </StyledModal>
-    );
-}
-
-export default FileModal;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/AudioFile/AudioFile.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 {useState} from 'react';
-import {IFileViewerProps} from '../_types';
-
-function AudioFile({fileData, fallback}: IFileViewerProps): JSX.Element {
-    const [hasFailed, setHasFailed] = useState(false);
-
-    if (!fileData?.whoAmI?.preview?.original || hasFailed) {
-        return fallback as JSX.Element;
-    }
-
-    return (
-        <audio
-            controls
-            src={fileData.whoAmI.preview.original}
-            title={fileData.file_name[0].value}
-            data-testid="audio-player"
-            onError={() => {
-                setHasFailed(true);
-            }}
-        />
-    );
-}
-
-export default AudioFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/AudioFile/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 AudioFile from './AudioFile';
-export default AudioFile;