From 8721e36db0c657c3d07599e3669e22e35d27f6aa Mon Sep 17 00:00:00 2001
From: Jonathan ARNAULT <jonathan@marmelab.com>
Date: Thu, 9 Jan 2025 10:56:35 +0100
Subject: [PATCH] Feat(fields): Improve UX and deletion modal text

---
 .prettierrc                                  |  3 +-
 jsconfig.json                                |  3 +-
 src/app/custom/translations.tsv              |  3 +-
 src/app/js/admin/field/DeleteFieldsButton.js | 23 ++++--
 src/app/js/fields/FieldGrid.js               | 72 ++++++++++--------
 src/app/js/fields/FieldRepresentation.js     | 80 ++++++++++----------
 6 files changed, 99 insertions(+), 85 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 90063671ea..baa36dd94e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,5 +3,6 @@
     "singleQuote": true,
     "trailingComma": "all",
     "semi": true,
-    "htmlWhitespaceSensitivity": "ignore"
+    "htmlWhitespaceSensitivity": "ignore",
+    "organizeImportsSkipDestructiveCodeActions": true
 }
diff --git a/jsconfig.json b/jsconfig.json
index d6898eddaf..9a71a76f49 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -3,7 +3,8 @@
         "target": "ES6",
         "module": "commonjs",
         "allowSyntheticDefaultImports": true,
-        "resolveJsonModule": true
+        "resolveJsonModule": true,
+        "jsx": "react"
     },
     "exclude": ["src/build", "node_modules"]
 }
diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv
index d3f95e3f24..8d96f86b82 100644
--- a/src/app/custom/translations.tsv
+++ b/src/app/custom/translations.tsv
@@ -1173,6 +1173,7 @@
 "label_format_size"	"Size"	"Taille"
 "export_csv"	"Save as CSV"	"Sauvegarder en CSV"
 "delete_selected_fields"	"Delete selected fields"	"Supprimer les champs sélectionnés"
-"delete_selected_fields_title"	"The following fields will be deleted"	"Les champs suivants seront supprimés"
+"delete_selected_fields_title"	"Delete selected fields"	"Supprimer la sélection"
+"delete_selected_fields_helptext"	"Are you sure you want to delete the selected field ? |||| Are you sure you want to delete the %{smart_count} selected fields ?"	"Êtes-vous sûr de vouloir supprimer le champs sélectionné ? |||| Êtes-vous sûr de vouloir supprimer les %{smart_count} champs sélectionné ?"
 "cancel"	"Cancel"	"Annuler" 
 "select_field"	"Select field"	"Sélectionner le champ" 
diff --git a/src/app/js/admin/field/DeleteFieldsButton.js b/src/app/js/admin/field/DeleteFieldsButton.js
index bf6fe5c5f5..ea2f7798a9 100644
--- a/src/app/js/admin/field/DeleteFieldsButton.js
+++ b/src/app/js/admin/field/DeleteFieldsButton.js
@@ -1,22 +1,23 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import compose from 'recompose/compose';
-import translate from 'redux-polyglot/translate';
-import { polyglot as polyglotPropTypes } from '../../propTypes';
-import { fromFields } from '../../sharedSelectors';
+import { Delete as DeleteIcon } from '@mui/icons-material';
 import {
     Button,
     Dialog,
     DialogActions,
     DialogContent,
+    DialogContentText,
     DialogTitle,
     List,
     ListItem,
 } from '@mui/material';
-import { Delete as DeleteIcon } from '@mui/icons-material';
+import PropTypes from 'prop-types';
+import React, { useCallback, useMemo, useState } from 'react';
+import { connect } from 'react-redux';
+import compose from 'recompose/compose';
+import translate from 'redux-polyglot/translate';
 import { removeFieldList } from '../../fields';
 import FieldRepresentation from '../../fields/FieldRepresentation';
+import { polyglot as polyglotPropTypes } from '../../propTypes';
+import { fromFields } from '../../sharedSelectors';
 
 const DeleteFieldsButtonComponent = ({
     fields,
@@ -72,6 +73,11 @@ const DeleteFieldsButtonComponent = ({
                     {polyglot.t('delete_selected_fields_title')}
                 </DialogTitle>
                 <DialogContent>
+                    <DialogContentText>
+                        {polyglot.t('delete_selected_fields_helptext', {
+                            smart_count: fieldsToDelete.length,
+                        })}
+                    </DialogContentText>
                     <List>
                         {fieldsToDelete.map((field) => (
                             <ListItem
@@ -111,6 +117,7 @@ const DeleteFieldsButtonComponent = ({
 DeleteFieldsButtonComponent.propTypes = {
     fields: PropTypes.array,
     selectedFields: PropTypes.arrayOf(PropTypes.string).isRequired,
+    isFieldsLoading: PropTypes.bool.isRequired,
     filter: PropTypes.string,
     subresourceId: PropTypes.string,
     p: polyglotPropTypes.isRequired,
diff --git a/src/app/js/fields/FieldGrid.js b/src/app/js/fields/FieldGrid.js
index 19a77fc94b..c1f8919b67 100644
--- a/src/app/js/fields/FieldGrid.js
+++ b/src/app/js/fields/FieldGrid.js
@@ -1,13 +1,13 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
-import { connect } from 'react-redux';
-import translate from 'redux-polyglot/translate';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import copy from 'copy-to-clipboard';
 import compose from 'lodash/flowRight';
 import PropTypes from 'prop-types';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import GridLayout from 'react-grid-layout';
-import { Box, IconButton, Tooltip } from '@mui/material';
-import { useMeasure } from 'react-use';
 import 'react-grid-layout/css/styles.css';
-import copy from 'copy-to-clipboard';
+import { connect } from 'react-redux';
+import { useMeasure } from 'react-use';
+import translate from 'redux-polyglot/translate';
 
 import {
     FileCopy as FileCopyIcon,
@@ -16,17 +16,17 @@ import {
 
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 
-import { polyglot as polyglotPropTypes } from '../propTypes';
-import { NoField } from './NoField';
 import { useDidUpdateEffect } from '../lib/useDidUpdateEffect';
+import { polyglot as polyglotPropTypes } from '../propTypes';
 import { fromFields } from '../sharedSelectors';
+import { NoField } from './NoField';
 
-import { loadField, changePositions, saveFieldFromData } from '../fields';
+import { changePositions, loadField, saveFieldFromData } from '../fields';
 
-import fieldApi from '../admin/api/field';
-import { toast } from '../../../common/tools/toast';
-import { useLocation, useHistory } from 'react-router';
+import { useHistory, useLocation } from 'react-router';
 import { SCOPE_DOCUMENT } from '../../../common/scope';
+import { toast } from '../../../common/tools/toast';
+import fieldApi from '../admin/api/field';
 import FieldRepresentation from './FieldRepresentation';
 
 const ROOT_PADDING = 16;
@@ -156,8 +156,14 @@ const FieldGridItem = connect((state, { field }) => ({
     }, [field, completedField]);
 
     const handleCopyToClipboard = (event, text) => {
+        // Only copy to clipboard if the user clicks on the field name
+        if (event.target.firstChild.nodeName !== '#text') {
+            return;
+        }
+
         event.stopPropagation();
         event.preventDefault();
+
         copy(text);
         toast(polyglot.t('fieldidentifier_copied_clipboard'), {
             type: toast.TYPE.SUCCESS,
@@ -187,29 +193,31 @@ const FieldGridItem = connect((state, { field }) => ({
             </Box>
 
             {completedField && (
-                <Tooltip
-                    enterDelay={300}
-                    placement="top"
-                    arrow
-                    title={polyglot.t('completes_field_X', {
-                        field: completedField.label,
-                    })}
+                <Box
+                    sx={{
+                        width: '100%',
+                        display: 'block',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        textWrap: 'nowrap',
+                        textAlign: 'left',
+                    }}
                 >
-                    <Box
-                        sx={{
-                            width: '100%',
-                            display: 'block',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            textWrap: 'nowrap',
-                            textAlign: 'left',
-                        }}
-                    >
-                        {polyglot.t('completes_field_X', {
+                    <Tooltip
+                        enterDelay={300}
+                        placement="top"
+                        arrow
+                        title={polyglot.t('completes_field_X', {
                             field: completedField.label,
                         })}
-                    </Box>
-                </Tooltip>
+                    >
+                        <span>
+                            {polyglot.t('completes_field_X', {
+                                field: completedField.label,
+                            })}
+                        </span>
+                    </Tooltip>
+                </Box>
             )}
 
             <Box
diff --git a/src/app/js/fields/FieldRepresentation.js b/src/app/js/fields/FieldRepresentation.js
index c2aba5089d..59d96560e2 100644
--- a/src/app/js/fields/FieldRepresentation.js
+++ b/src/app/js/fields/FieldRepresentation.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import { Box, Checkbox, Tooltip, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
-import { Box, Tooltip, Checkbox, Typography } from '@mui/material';
-import FieldInternalIcon from './FieldInternalIcon';
+import React from 'react';
 import translate from 'redux-polyglot/translate';
 import { polyglot as polyglotPropTypes } from '../propTypes';
+import FieldInternalIcon from './FieldInternalIcon';
 
 function FieldRepresentation({
     field,
@@ -28,8 +28,6 @@ function FieldRepresentation({
     return (
         <>
             <Box
-                width="100%"
-                maxWidth="100%"
                 display="grid"
                 gridTemplateColumns={
                     handleToggleSelectedField ? 'auto auto 1fr' : 'auto 1fr'
@@ -64,32 +62,30 @@ function FieldRepresentation({
                 )}
 
                 {field.label && (
-                    <Tooltip
-                        title={field.label}
-                        enterDelay={300}
-                        placement="top"
-                        arrow
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            display: 'block',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            textWrap: 'nowrap',
+                            textAlign: 'left',
+                        }}
                     >
-                        <Typography
-                            variant="body2"
-                            sx={{
-                                display: 'block',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                textWrap: 'nowrap',
-                                textAlign: 'left',
-                            }}
+                        <Tooltip
+                            title={field.label}
+                            enterDelay={300}
+                            placement="top"
+                            arrow
                         >
-                            {field.label}
-                        </Typography>
-                    </Tooltip>
+                            <span>{field.label}</span>
+                        </Tooltip>
+                    </Typography>
                 )}
             </Box>
 
             {(field.internalScopes || field.internalName) && !shortMode && (
                 <Box
-                    width="100%"
-                    maxWidth="100%"
                     display="grid"
                     gridTemplateColumns={
                         field.internalScopes && field.internalName
@@ -117,26 +113,26 @@ function FieldRepresentation({
                     )}
 
                     {field.internalName && (
-                        <Tooltip
-                            title={field.internalName}
-                            enterDelay={300}
-                            placement="top"
-                            arrow
+                        <Typography
+                            variant="body2"
+                            sx={{
+                                display: 'block',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                textWrap: 'nowrap',
+                                fontStyle: 'italic',
+                                textAlign: 'left',
+                            }}
                         >
-                            <Typography
-                                variant="body2"
-                                sx={{
-                                    display: 'block',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    textWrap: 'nowrap',
-                                    fontStyle: 'italic',
-                                    textAlign: 'left',
-                                }}
+                            <Tooltip
+                                title={field.internalName}
+                                enterDelay={300}
+                                placement="top"
+                                arrow
                             >
-                                {field.internalName}
-                            </Typography>
-                        </Tooltip>
+                                <span>{field.internalName}</span>
+                            </Tooltip>
+                        </Typography>
                     )}
                 </Box>
             )}