fix(@leav/ui): avoid suggest preview is clickable when there is no pr…

libs/ui/src/components/RecordEdition/EditRecordSidebar/RecordSummary/RecordSummary.tsx

@@ -25,7 +25,7 @@ export const Wrapper = styled(Space)`
 `;
 
 function RecordSummary({record}: IRecordSummaryProps): JSX.Element {
-    const preview = String(record?.preview?.medium);
+    const preview = record?.preview?.medium ? String(record?.preview?.medium) : null;
     const previewFile = record?.preview?.file;
     const {token} = theme.useToken();
 

libs/ui/src/components/RecordPreviewWithModal/RecordPreviewWithModal.test.tsx

@@ -7,26 +7,55 @@ import {themeVars} from '../../antdTheme';
 import {render, screen} from '../../_tests/testUtils';
 import RecordPreviewWithModal from './RecordPreviewWithModal';
 
-jest.mock('_ui/components/RecordPreviewWithModal/FileModal', () => {
-    return function FileModal() {
-        return <div>FileModal</div>;
-    };
-});
+const fileModalLabel = 'FileModal';
+
+jest.mock('_ui/components/RecordPreviewWithModal/FileModal', () => () => <div>{fileModalLabel}</div>);
 
 describe('RecordPreviewWithModal', () => {
-    test('Display modal on click', async () => {
-        const previewFile = {
-            ...mockRecord.preview.file
-        };
+    describe('With preview', () => {
+        beforeEach(() => {
+            const previewFile = {
+                ...mockRecord.preview.file
+            };
+
+            render(<RecordPreviewWithModal label="my file" image="/my_file.jpg" previewFile={previewFile} />);
+        });
+
+        test('Display modal on click', async () => {
+            expect(screen.getByAltText('record preview')).toBeVisible();
+            expect(screen.queryByText(fileModalLabel)).not.toBeInTheDocument();
+
+            await userEvent.click(screen.getByTestId('click-handler'));
+
+            expect(screen.getByText(fileModalLabel)).toBeVisible();
+        });
+
+        test('should display overlay when preview is provided', async () => {
+            await userEvent.hover(screen.getByTestId('click-handler'));
+
+            expect(screen.queryByTitle('record_summary.preview_title')).toBeVisible();
+        });
+    });
+
+    describe('Without preview', () => {
+        beforeEach(() => {
+            render(<RecordPreviewWithModal label="my file" image="/my_file.jpg" previewFile={undefined} />);
+        });
+
+        test('should not display modal on click', async () => {
+            expect(screen.getByAltText('record preview')).toBeVisible();
+            expect(screen.queryByText(fileModalLabel)).not.toBeInTheDocument();
 
-        render(<RecordPreviewWithModal label="my file" image="/my_file.jpg" previewFile={previewFile} />);
+            await userEvent.click(screen.getByTestId('click-handler'));
 
-        expect(screen.getByAltText('record preview')).toBeInTheDocument();
-        expect(screen.queryByText('FileModal')).not.toBeInTheDocument();
+            expect(screen.queryByText(fileModalLabel)).not.toBeInTheDocument();
+        });
 
-        userEvent.click(screen.getByTestId('click-handler'));
+        test('should not display overlay', async () => {
+            await userEvent.hover(screen.getByTestId('click-handler'));
 
-        expect(await screen.findByText('FileModal')).toBeInTheDocument();
+            expect(screen.queryByTitle('record_summary.preview_title')).not.toBeInTheDocument();
+        });
     });
 
     test('Show checkerboard if app is in transparency mode', async () => {

libs/ui/src/components/RecordPreviewWithModal/RecordPreviewWithModal.tsx

@@ -3,26 +3,27 @@
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
 import {EyeOutlined} from '@ant-design/icons';
 import {IPreviewScalar} from '@leav/utils';
-import {useState} from 'react';
+import {FunctionComponent, useState} from 'react';
 import styled from 'styled-components';
 import {themeVars} from '../../antdTheme';
 import {EntityPreview, IEntityPreviewProps} from '../EntityPreview';
 import FileModal from './FileModal';
+import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
 
 interface IRecordPreviewWithModalProps extends Omit<IEntityPreviewProps, 'onClick'> {
     previewFile: IPreviewScalar['file'];
     showTransparency?: boolean;
 }
 
-const ClickHandler = styled.div`
+const DivClickHandler = styled.div<{$isClickable?: boolean}>`
     position: relative;
-    cursor: pointer;
+    cursor: ${({$isClickable}) => ($isClickable ? 'pointer' : 'default')};
     width: fit-content;
     height: fit-content;
     margin: auto;
 `;
 
-const Overlay = styled.div`
+const DivOverlay = styled.div`
     background: ${themeVars.secondaryBg}99; // Hexadecimal color + opacity
     position: absolute;
     top: 0;
@@ -34,41 +35,53 @@ const Overlay = styled.div`
     align-items: center;
     font-size: 2em;
 
-    ${ClickHandler}:hover & {
+    ${DivClickHandler}:hover & {
         display: flex;
     }
 `;
 
-function RecordPreviewWithModal({
+const RecordPreviewWithModal: FunctionComponent<IRecordPreviewWithModalProps> = ({
     previewFile,
     imageStyle,
     showTransparency = false,
     ...recordPreviewProps
-}: IRecordPreviewWithModalProps): JSX.Element {
+}) => {
+    const {t} = useSharedTranslation();
+
     const [isPreviewModalOpen, setPreviewModalOpen] = useState(false);
     const fileId = previewFile?.id;
     const fileLibraryId = previewFile?.library;
 
+    const isPreviewClickable = previewFile !== undefined;
+
     const _handlePreviewClick = () => {
-        setPreviewModalOpen(true);
+        if (isPreviewClickable) {
+            setPreviewModalOpen(true);
+        }
     };
 
     const _handleClosePreviewModal = () => setPreviewModalOpen(false);
 
     return (
         <>
-            <ClickHandler onClick={_handlePreviewClick} data-testid="click-handler">
+            <DivClickHandler
+                $isClickable={isPreviewClickable}
+                onClick={_handlePreviewClick}
+                data-testid="click-handler"
+            >
                 <EntityPreview
                     imageStyle={{
                         background: showTransparency ? themeVars.checkerBoard : 'transparent',
                         ...imageStyle
                     }}
                     {...recordPreviewProps}
                 />
-                <Overlay>
-                    <EyeOutlined />
-                </Overlay>
-            </ClickHandler>
+                {isPreviewClickable && (
+                    <DivOverlay title={t('record_summary.preview_title')}>
+                        <EyeOutlined />
+                    </DivOverlay>
+                )}
+            </DivClickHandler>
             {isPreviewModalOpen && (
                 <FileModal
                     open={isPreviewModalOpen}
@@ -79,6 +92,6 @@ function RecordPreviewWithModal({
             )}
         </>
     );
-}
+};
 
 export default RecordPreviewWithModal;

libs/ui/src/locales/en/shared.json

@@ -444,6 +444,7 @@
         "field_external_update": "This field has been updated"
     },
     "record_summary": {
+        "preview_title": "Click here to visualize preview.",
         "id": "Identifier",
         "label": "Label",
         "library": "Library",

libs/ui/src/locales/fr/shared.json

@@ -447,6 +447,7 @@
         "field_external_update": "Ce champ a été modifié"
     },
     "record_summary": {
+        "preview_title": "Cliquez ici pour voir l’aperçu.",
         "id": "Identifiant",
         "label": "Libellé",
         "library": "Bibliothèque",

libs/utils/src/types/files.ts

@@ -17,5 +17,5 @@ export interface IPreviewScalar {
     pdf?: string;
     file: FileRecord;
     original: string;
-    [key: string]: string | FileRecord;
+    [key: string]: string | FileRecord; // FIXME should be only a string
 }