feat: [PROD-14255] add datasets renaming in dataset manager

Author: csm-thu

public/locales/en/translation.json

@@ -183,6 +183,8 @@
           "deleteButtonTooltip": "Delete",
           "shareButtonTooltip": "Share",
           "refreshButtonTooltip": "Refresh",
+          "renameButtonTooltip": "Rename",
+          "emptyDatasetNameError": "Dataset name cannot be empty",
           "createSubdatasetButtonTooltip": "Create sub-dataset",
           "editParametersButtonTooltip": "Edit parameters of the dataset"
         },

public/locales/fr/translation.json

@@ -183,6 +183,8 @@
           "deleteButtonTooltip": "Supprimer",
           "shareButtonTooltip": "Partager",
           "refreshButtonTooltip": "Mettre à jour",
+          "renameButtonTooltip": "Renommer",
+          "emptyDatasetNameError": "Le nom du dataset ne doit pas être vide",
           "createSubdatasetButtonTooltip": "Créer un sous-dataset",
           "editParametersButtonTooltip": "Modifier les paramètres du dataset"
         },

src/views/DatasetManager/components/DatasetOverview/DatasetOverview.js

@@ -4,12 +4,11 @@ import React, { useMemo } from 'react';
 import { Card, CardContent, CardHeader, Grid } from '@mui/material';
 import { INGESTION_STATUS } from '../../../../services/config/ApiConstants';
 import { useDatasetOverview } from './DatasetOverviewHook';
-import { CategoryAccordion, DatasetOverviewPlaceholder, GraphIndicator } from './components';
+import { CategoryAccordion, DatasetOverviewPlaceholder, EditableDatasetName, GraphIndicator } from './components';
 import DatasetActions from './components/DatasetActions/DatasetActions';
 
 export const DatasetOverview = () => {
-  const { categories, graphIndicators, queriesResults, datasetIngestionStatus, dataset, datasetName } =
-    useDatasetOverview();
+  const { categories, graphIndicators, queriesResults, datasetIngestionStatus, dataset } = useDatasetOverview();
 
   const showPlaceholder = useMemo(
     () =>
@@ -24,15 +23,15 @@ export const DatasetOverview = () => {
     });
   }, [graphIndicators, queriesResults]);
 
+  const editableDatasetName = <EditableDatasetName />;
   return (
     <Card
       elevation={0}
       sx={{ p: 1, width: '100%', height: '100%', overflow: 'auto', backgroundColor: 'transparent' }}
       data-cy="dataset-overview-card"
     >
       <CardHeader
-        data-cy="dataset-name"
-        title={datasetName}
+        title={editableDatasetName}
         sx={{ height: '65px' }}
         action={<DatasetActions dataset={dataset}></DatasetActions>}
       ></CardHeader>

src/views/DatasetManager/components/DatasetOverview/DatasetOverviewHook.js

@@ -46,6 +46,5 @@ export const useDatasetOverview = () => {
     queriesResults,
     datasetIngestionStatus,
     dataset: currentDataset,
-    datasetName: currentDataset?.name,
   };
 };

src/views/DatasetManager/components/DatasetOverview/components/EditableDatasetName/EditableDatasetName.js

@@ -0,0 +1,122 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Edit as EditIcon } from '@mui/icons-material';
+import { FormControl, FormHelperText, IconButton, OutlinedInput, Stack, Typography } from '@mui/material';
+import { FadingTooltip, PermissionsGate } from '@cosmotech/ui';
+import { ACL_PERMISSIONS } from '../../../../../../services/config/accessControl';
+import { useEditableDatasetName } from './EditableDatasetNameHook';
+
+const sanitizeValue = (value) => value.trim();
+
+export const EditableDatasetName = () => {
+  const { t } = useTranslation();
+  const { dataset, datasetName, renameDataset } = useEditableDatasetName();
+
+  const [error, setError] = useState(null);
+  const [isEditing, setEditing] = useState(false);
+  const [textFieldValue, setTextFieldValue] = useState(datasetName ?? '');
+
+  useEffect(() => {
+    setTextFieldValue(datasetName);
+  }, [datasetName]);
+
+  const startEdition = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setEditing(true);
+  };
+
+  const editableTextField = useMemo(() => {
+    const stopEdition = (event) => {
+      event && event.stopPropagation();
+      setEditing(false);
+      setError(null);
+    };
+
+    const cancelEdition = (event) => {
+      setTextFieldValue(datasetName);
+      stopEdition(event);
+    };
+
+    const confirmChanges = (event) => {
+      const sanitizedValue = sanitizeValue(event.target.value);
+      if (error == null && sanitizedValue.length !== 0 && sanitizedValue !== datasetName) {
+        renameDataset(sanitizedValue);
+        setTextFieldValue(sanitizedValue);
+      } else setTextFieldValue(datasetName);
+
+      stopEdition(event);
+    };
+
+    const processNewValue = (event) => {
+      const newValue = event.target.value;
+      setTextFieldValue(newValue);
+
+      const sanitizedValue = sanitizeValue(newValue);
+      if (sanitizedValue.length !== 0) setError(null);
+      else
+        setError(
+          t('commoncomponents.datasetmanager.overview.actions.emptyDatasetNameError', 'Dataset name cannot be empty')
+        );
+    };
+
+    return (
+      <FormControl data-cy="dataset-name-editable-text-field">
+        <OutlinedInput
+          autoFocus
+          value={textFieldValue}
+          error={error != null}
+          onChange={processNewValue}
+          onBlur={confirmChanges}
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') cancelEdition(event);
+            else if (event.key === 'Enter') confirmChanges(event);
+          }}
+          onFocus={(event) => event.stopPropagation()}
+          size="small"
+          sx={{ minWidth: '400px', marginLeft: 0.5, padding: 0.5 }}
+        />
+        <FormHelperText error>{error}</FormHelperText>
+      </FormControl>
+    );
+  }, [datasetName, error, renameDataset, setTextFieldValue, t, textFieldValue]);
+
+  const datasetNameElement = useMemo(
+    () => (
+      <Typography data-cy="dataset-name" variant="h6">
+        {datasetName}
+      </Typography>
+    ),
+    [datasetName]
+  );
+
+  const datasetNameWithEditButton = useMemo(() => {
+    return (
+      <Stack direction="row" spacing={1} alignItems="stretch" justifyContent="flex-start">
+        {datasetNameElement}
+        <FadingTooltip
+          title={t('commoncomponents.datasetmanager.overview.actions.renameButtonTooltip', 'Rename')}
+          disableInteractive={true}
+        >
+          <IconButton onClick={startEdition} data-cy="rename-dataset-button">
+            <EditIcon color="primary" />
+          </IconButton>
+        </FadingTooltip>
+      </Stack>
+    );
+  }, [datasetNameElement, t]);
+
+  const userPermissions = dataset?.security?.currentUserPermissions ?? [];
+  return (
+    <PermissionsGate
+      userPermissions={userPermissions}
+      necessaryPermissions={[ACL_PERMISSIONS.DATASET.WRITE]}
+      RenderNoPermissionComponent={() => datasetNameElement}
+    >
+      {isEditing ? editableTextField : datasetNameWithEditButton}
+    </PermissionsGate>
+  );
+};

src/views/DatasetManager/components/DatasetOverview/components/EditableDatasetName/EditableDatasetNameHook.js

@@ -0,0 +1,28 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+import { useCallback } from 'react';
+import {
+  useCurrentDataset,
+  useSelectedDatasetIndex,
+  useUpdateDataset,
+} from '../../../../../../state/hooks/DatasetHooks';
+
+export const useEditableDatasetName = () => {
+  const currentDataset = useCurrentDataset();
+  const selectedDatasetIndex = useSelectedDatasetIndex();
+  const updateDataset = useUpdateDataset();
+
+  const renameDataset = useCallback(
+    (newDatasetName) => {
+      if (!currentDataset) return;
+      updateDataset(currentDataset.id, { name: newDatasetName }, selectedDatasetIndex);
+    },
+    [currentDataset, selectedDatasetIndex, updateDataset]
+  );
+
+  return {
+    dataset: currentDataset,
+    datasetName: currentDataset?.name,
+    renameDataset,
+  };
+};

src/views/DatasetManager/components/DatasetOverview/components/EditableDatasetName/index.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+
+export { EditableDatasetName } from './EditableDatasetName';

src/views/DatasetManager/components/DatasetOverview/components/index.js

@@ -4,3 +4,4 @@
 export { default as GraphIndicator } from './GraphIndicator';
 export { default as CategoryAccordion } from './CategoryAccordion';
 export { DatasetOverviewPlaceholder } from './DatasetOverviewPlaceholder';
+export { EditableDatasetName } from './EditableDatasetName';