From 53b4832ddca4ca7f0b19949ab22a579e8665f149 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Fri, 22 Mar 2024 09:46:07 +0100
Subject: [PATCH] fix(clusters-ui): issues with deletion

---
 webapp/public/locales/en/main.json            |  1 +
 webapp/public/locales/fr/main.json            |  1 +
 .../Modelization/Areas/Thermal/index.tsx      |  3 +-
 .../common/GroupedDataTable/index.tsx         | 33 ++++++++++++-------
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/webapp/public/locales/en/main.json b/webapp/public/locales/en/main.json
index aa800ee1b5..0798174306 100644
--- a/webapp/public/locales/en/main.json
+++ b/webapp/public/locales/en/main.json
@@ -77,6 +77,7 @@
   "global.error.failedtoretrievejobs": "Failed to retrieve job information",
   "global.error.failedtoretrievelogs": "Failed to retrieve job logs",
   "global.error.failedtoretrievedownloads": "Failed to retrieve downloads list",
+  "global.error.deleteFailed": "Unable to delete",
   "global.area.add": "Add an area",
   "login.error": "Failed to authenticate",
   "tasks.title": "Tasks",
diff --git a/webapp/public/locales/fr/main.json b/webapp/public/locales/fr/main.json
index 98a72e00b6..bafb48829f 100644
--- a/webapp/public/locales/fr/main.json
+++ b/webapp/public/locales/fr/main.json
@@ -77,6 +77,7 @@
   "global.error.failedtoretrievejobs": "Échec de la récupération des tâches",
   "global.error.failedtoretrievelogs": "Échec de la récupération des logs",
   "global.error.failedtoretrievedownloads": "Échec de la récupération des exports",
+  "global.error.deleteFailed": "Impossible d'effectuer la suppression",
   "global.area.add": "Ajouter une zone",
   "login.error": "Échec de l'authentification",
   "tasks.title": "Tâches",
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx
index 46bd508ae3..2cc9ccc7fc 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx
@@ -128,7 +128,8 @@ function Thermal() {
     return createThermalCluster(study.id, areaId, cluster);
   };
 
-  const handleDeleteSelection = (ids: string[]) => {
+  const handleDeleteSelection = (rows: ThermalClusterWithCapacity[]) => {
+    const ids = rows.map((row) => row.id);
     return deleteThermalClusters(study.id, areaId, ids);
   };
 
diff --git a/webapp/src/components/common/GroupedDataTable/index.tsx b/webapp/src/components/common/GroupedDataTable/index.tsx
index 8014bca43b..042186f9c1 100644
--- a/webapp/src/components/common/GroupedDataTable/index.tsx
+++ b/webapp/src/components/common/GroupedDataTable/index.tsx
@@ -25,6 +25,9 @@ import * as R from "ramda";
 import * as RA from "ramda-adjunct";
 import { usePrevious } from "react-use";
 import useUpdateEffectOnce from "../../../hooks/useUpdateEffectOnce";
+import { PromiseAny } from "../../../utils/tsUtils";
+import useEnqueueErrorSnackbar from "../../../hooks/useEnqueueErrorSnackbar";
+import { toError } from "../../../utils/fnUtils";
 
 export interface GroupedDataTableProps<TData extends TRow> {
   data: TData[];
@@ -32,7 +35,7 @@ export interface GroupedDataTableProps<TData extends TRow> {
   columns: Array<MRT_ColumnDef<TData, any>>;
   groups: string[] | readonly string[];
   onCreate?: (values: TData) => Promise<TData>;
-  onDelete?: (ids: string[]) => void;
+  onDelete?: (rows: TData[]) => PromiseAny | void;
   onNameClick?: (row: MRT_Row<TData>) => void;
   isLoading?: boolean;
   deleteConfirmationMessage?: string | ((count: number) => string);
@@ -60,6 +63,8 @@ function GroupedDataTable<TData extends TRow>({
   >("");
   const [tableData, setTableData] = useState(data);
   const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
+  const [isSaving, setIsSaving] = useState(false);
+  const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
   const callbacksRef = useAutoUpdateRef({ onNameClick });
   const prevData = usePrevious(data);
 
@@ -126,7 +131,7 @@ function GroupedDataTable<TData extends TRow>({
       expanded: true,
       columnPinning: { left: [GROUP_COLUMN_ID] },
     },
-    state: { isLoading, rowSelection },
+    state: { isLoading, isSaving, rowSelection },
     enableGrouping: true,
     enableStickyFooter: true,
     enableStickyHeader: true,
@@ -231,24 +236,30 @@ function GroupedDataTable<TData extends TRow>({
     }
   };
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!onDelete) {
       return;
     }
 
-    const rowIndexes = Object.keys(rowSelection)
-      .map(Number)
-      // ignore groups names
-      .filter(Number.isInteger);
+    const rowsToDelete = selectedRows;
 
-    const rowIdsToDelete = rowIndexes.map((index) => tableData[index].id);
-
-    onDelete(rowIdsToDelete);
     setTableData((prevTableData) =>
-      prevTableData.filter((row) => !rowIdsToDelete.includes(row.id)),
+      prevTableData.filter((row) => !rowsToDelete.includes(row)),
     );
+
     setRowSelection({});
     closeDialog();
+
+    setIsSaving(true);
+
+    try {
+      await onDelete(rowsToDelete);
+    } catch (error) {
+      enqueueErrorSnackbar(t("global.error.deleteFailed"), toError(error));
+      setTableData((prevTableData) => [...prevTableData, ...rowsToDelete]);
+    }
+
+    setIsSaving(false);
   };
 
   const handleDuplicate = async (name: string) => {