Merge pull request #2479 from Inist-CNRS/fix/2475-icon-selection

Fix(fields): Correctly bind field icons and improve annotation list consistency
Inist-CNRS · Feb 5, 2025 · 2a48799 · 2a48799
2 parents 827f189 + 5d67984
commit 2a48799
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 22 deletions.
diff --git a/cypress/e2e/phase_1/admin_display.cy.js b/cypress/e2e/phase_1/admin_display.cy.js
@@ -58,6 +58,24 @@ describe('Home Page', () => {
             });
     });
 
+    it('should not select any icon when editing field if field has no icon', () => {
+        cy.findByRole('link', {
+            name: /Display/,
+        }).click();
+
+        fields.createNewField({
+            // This unselects home
+            fieldIcons: ['Home'],
+        });
+
+        cy.findByRole('gridcell', {
+            name: /newField/,
+            timeout: 1000,
+        }).click();
+
+        cy.get(`button[value="home"]`).should('not.have.class', 'Mui-selected');
+    });
+
     it('should select bound icons when editing a field', () => {
         cy.findByRole('link', {
             name: /Display/,

diff --git a/cypress/e2e/phase_4/annotation.cy.js b/cypress/e2e/phase_4/annotation.cy.js
@@ -56,7 +56,7 @@ describe('Annotation', () => {
                     'Dataset Description',
                     '[Doay]',
                     '',
-                    'n/a',
+                    '',
                     '',
                     'To Review',
                     '',
@@ -90,7 +90,7 @@ describe('Annotation', () => {
                     'Dataset Description',
                     '[Doay]',
                     '',
-                    'n/a',
+                    '',
                     "Cette collection n'a pas d'autre but que de présenter un manière d’utiliser l'application Lodex pour mettre en ligne des données.",
                     'To Review',
                     '',
@@ -124,7 +124,7 @@ describe('Annotation', () => {
                     'Nombre de films',
                     '[MzM2]',
                     '',
-                    'n/a',
+                    '',
                     '30',
                     'To Review',
                     '',
@@ -202,7 +202,7 @@ describe('Annotation', () => {
                         'rating',
                         '[bZE+]',
                         '',
-                        'n/a',
+                        '',
                         '',
                         'To Review',
                         '',
@@ -216,7 +216,7 @@ describe('Annotation', () => {
                         'actors',
                         '[K8Lu]',
                         '',
-                        'n/a',
+                        '',
                         '',
                         'To Review',
                         '',
@@ -286,7 +286,7 @@ describe('Annotation', () => {
                         'rating',
                         '[bZE+]',
                         '',
-                        'n/a',
+                        '',
                         '',
                         'Validated',
                         'Return applied',
@@ -300,7 +300,7 @@ describe('Annotation', () => {
                         'actors',
                         '[K8Lu]',
                         '',
-                        'n/a',
+                        '',
                         '',
                         'To Review',
                         '',
@@ -348,7 +348,7 @@ describe('Annotation', () => {
                     'Répartition par réalisateurs uniques',
                     '[xkoP]',
                     '',
-                    'n/a',
+                    '',
                     '',
                     'To Review',
                     '',

diff --git a/src/app/js/admin/annotations/AnnotationList.js b/src/app/js/admin/annotations/AnnotationList.js
@@ -13,10 +13,10 @@ import { useHistory } from 'react-router';
 import FieldInternalIcon from '../../fields/FieldInternalIcon';
 import { useTranslate } from '../../i18n/I18NContext';
 import AdminOnlyAlert from '../../lib/components/AdminOnlyAlert';
+import { AnnotationStatus } from './AnnotationStatus';
 import { ResourceTitleCell } from './ResourceTitleCell';
 import { ResourceUriCell } from './ResourceUriCell';
 import { useGetAnnotations } from './useGetAnnotations';
-import { AnnotationStatus } from './AnnotationStatus';
 
 const AnnotationListToolBar = () => {
     const { translate } = useTranslate();
@@ -120,7 +120,12 @@ export const AnnotationList = () => {
                         (operator) => operator.value === 'contains',
                     ),
                     renderCell: ({ value }) => {
-                        return value ?? translate('annotation_field_not_found');
+                        return (
+                            <Typography>
+                                {value ??
+                                    translate('annotation_field_not_found')}
+                            </Typography>
+                        );
                     },
                     flex: 1,
                     sortable: false,
@@ -133,9 +138,10 @@ export const AnnotationList = () => {
                         (operator) => operator.value === 'contains',
                     ),
                     renderCell: ({ value }) => {
-                        return value
-                            ? `[${value}]`
-                            : translate('annotation_field_not_found');
+                        if (!value) {
+                            return null;
+                        }
+                        return <Typography>[{value}]</Typography>;
                     },
                     flex: 1,
                     sortable: false,
@@ -150,8 +156,9 @@ export const AnnotationList = () => {
                     ),
                     renderCell: ({ value }) => {
                         if (!value) {
-                            return translate('annotation_field_not_found');
+                            return null;
                         }
+
                         return (
                             <>
                                 {value.map((scope) => (
@@ -169,14 +176,13 @@ export const AnnotationList = () => {
                 },
                 {
                     field: 'field.internalName',
+                    valueGetter: ({ row }) => row?.field,
                     headerName: translate('annotation_field_internal_name'),
-                    valueGetter: ({ row }) =>
-                        row?.field ? row?.field?.internalName ?? 'n/a' : null,
                     filterOperators: getGridStringOperators().filter(
                         (operator) => operator.value === 'contains',
                     ),
                     renderCell: ({ value }) => {
-                        return value ?? translate('annotation_field_not_found');
+                        return <Typography>{value?.internalName}</Typography>;
                     },
                     flex: 1,
                     sortable: false,
@@ -244,6 +250,9 @@ export const AnnotationList = () => {
                     ),
                     flex: 1,
                     sortable: true,
+                    renderCell({ value }) {
+                        return <Typography>{value}</Typography>;
+                    },
                 },
                 {
                     field: 'authorName',
@@ -253,6 +262,9 @@ export const AnnotationList = () => {
                     filterOperators: getGridStringOperators().filter(
                         (operator) => operator.value === 'contains',
                     ),
+                    renderCell({ value }) {
+                        return <Typography>{value}</Typography>;
+                    },
                 },
                 {
                     field: 'comment',
@@ -282,7 +294,11 @@ export const AnnotationList = () => {
 
                     flex: 1,
                     renderCell: ({ value }) => {
-                        return new Date(value).toLocaleDateString();
+                        return (
+                            <Typography>
+                                {new Date(value).toLocaleDateString()}
+                            </Typography>
+                        );
                     },
                     filterOperators: getGridDateOperators().filter((operator) =>
                         ['is', 'after', 'before'].includes(operator.value),
@@ -295,7 +311,11 @@ export const AnnotationList = () => {
 
                     flex: 1,
                     renderCell: ({ value }) => {
-                        return new Date(value).toLocaleDateString();
+                        return (
+                            <Typography>
+                                {new Date(value).toLocaleDateString()}
+                            </Typography>
+                        );
                     },
                     filterOperators: getGridDateOperators().filter((operator) =>
                         ['is', 'after', 'before'].includes(operator.value),

diff --git a/src/app/js/fields/FieldToggleInternalScope.js b/src/app/js/fields/FieldToggleInternalScope.js
@@ -6,17 +6,21 @@ import HomeIcon from '@mui/icons-material/Home';
 import { ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
-import { polyglot as polyglotPropTypes } from '../propTypes';
-import { translate } from '../i18n/I18NContext';
 import { useRouteMatch } from 'react-router-dom';
+import { translate } from '../i18n/I18NContext';
+import { polyglot as polyglotPropTypes } from '../propTypes';
 
 export const FieldToggleInternalScopeComponent = ({ input, p: polyglot }) => {
     const matches = useRouteMatch();
 
     const [values, setValues] = React.useState(input?.value || []);
 
     React.useEffect(() => {
-        if (!input) {
+        if (
+            !input ||
+            input.value !== '' ||
+            matches.params.fieldName !== 'new'
+        ) {
             return;
         }