From 0b1cf4e0aa72cbfbeda976294b02c04ef6314dac Mon Sep 17 00:00:00 2001
From: Ohad Koren <ohadkoren1997@gmail.com>
Date: Sun, 18 Feb 2024 11:14:07 +0200
Subject: [PATCH 1/3] multiple delete fix

---
 .../all-experiments/Experiments.tsx           | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/portal/src/app/components/all-experiments/Experiments.tsx b/portal/src/app/components/all-experiments/Experiments.tsx
index a873e800..1dfcedfd 100644
--- a/portal/src/app/components/all-experiments/Experiments.tsx
+++ b/portal/src/app/components/all-experiments/Experiments.tsx
@@ -26,18 +26,34 @@ const DuplicateAriaLabel: string = ALL_EXPERIMENTS_TABLE_EN.TABLE_COLUMNS.LINKS.
 
 export const Experiments: React.FC = () => {
   const { testSuites, status }: IUseExperimentsData = useExperimentsData();
+  const navigate = useNavigate();
   const [openDeleteModal, setOpenDeleteModal] = useState<boolean>(false);
   const [checkedRows, setCheckedRows] = useState<Record<number, boolean>>({});
-  const experimentsData = useMemo(() => (testSuites ? parseExperimentsData(testSuites): []), [testSuites]);
-  const navigate = useNavigate();
-
+  const [experimentsData, setExperimentsData] = useState<ExperimentData[]>([]);
   
+  const [deleteHandled, setDeleteHandled] = useState(false);
   const { post, status: deleteStatus, error: deleteError, cancelRequest: cancelRequestDelete }: IHttp<unknown>
     = useFetch<unknown>({ url: APIS.deleteExperiments });
   useFetchSpinner(deleteStatus);
   useErrorMessage(deleteError);
   useEffect(() => cancelRequestDelete, [cancelRequestDelete]);
 
+  // Update the experimentsData state when testSuites changes
+  useEffect(() => {
+    if (testSuites) {
+      setExperimentsData(parseExperimentsData(testSuites));
+    }
+  }, [testSuites]);
+
+  // Update the experimentsData state when delete operation is successful
+  useEffect(() => {
+    if (deleteStatus === FetchDataStatus.Success && !deleteHandled) {
+      setExperimentsData(prevExperimentsData => prevExperimentsData.filter(experiment => !checkedRows[experiment.id]));
+      setCheckedRows({});
+      setDeleteHandled(true);
+    }
+  }, [deleteStatus, deleteHandled, checkedRows]);
+
   const handleDeleteClick: () => void = useCallback((): void => {
     setOpenDeleteModal(true);
   }, []);
@@ -122,6 +138,7 @@ export const Experiments: React.FC = () => {
         accessor: () => null,
         cell: (cellInfo: CellContext<ExperimentData, unknown>) => (
           <Button
+            key={cellInfo.row.original.id}
             ariaLabel={DuplicateAriaLabel}
             size={ButtonSize.NONE}
             styleType={ButtonStyleType.WRAPPER}

From 394851e571a048f2a32855813f875777394e05e1 Mon Sep 17 00:00:00 2001
From: Ohad Koren <ohadkoren1997@gmail.com>
Date: Sun, 18 Feb 2024 11:33:23 +0200
Subject: [PATCH 2/3] fix length presentation issue + multiple times delete
 rows

---
 portal/src/app/components/all-experiments/Experiments.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/portal/src/app/components/all-experiments/Experiments.tsx b/portal/src/app/components/all-experiments/Experiments.tsx
index 1dfcedfd..3bc8bbda 100644
--- a/portal/src/app/components/all-experiments/Experiments.tsx
+++ b/portal/src/app/components/all-experiments/Experiments.tsx
@@ -60,6 +60,7 @@ export const Experiments: React.FC = () => {
 
   const handleCloseDeleteExperimentModal: (confirm?: boolean) => void = useCallback((confirm?: boolean): void => {
     if (confirm) {
+      setDeleteHandled(false);
       const ids: number[] = Object.keys(checkedRows).map((key: string) => parseInt(key))
       post({
         data: { ids }
@@ -168,7 +169,7 @@ export const Experiments: React.FC = () => {
       <>
         { status === FetchDataStatus.Success &&
           <div className={styles.title_options_container}>
-            <label className={styles.experiments_title}>{`${ALL_EXPERIMENTS_TABLE_EN.TITLE} (${testSuites.length})`}</label>
+            <label className={styles.experiments_title}>{`${ALL_EXPERIMENTS_TABLE_EN.TITLE} (${experimentsData.length})`}</label>
             {Object.values(checkedRows).some((value: boolean) => value) && (
               <Button
                 ariaLabel={DeleteAriaLabel}

From 509d1ebee1c9808302a71a80f3a1260a28f824dd Mon Sep 17 00:00:00 2001
From: Ohad Koren <ohadkoren1997@gmail.com>
Date: Sun, 18 Feb 2024 15:20:04 +0200
Subject: [PATCH 3/3] better coding

---
 .../components/all-experiments/Experiments.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/portal/src/app/components/all-experiments/Experiments.tsx b/portal/src/app/components/all-experiments/Experiments.tsx
index 3bc8bbda..81a02eb6 100644
--- a/portal/src/app/components/all-experiments/Experiments.tsx
+++ b/portal/src/app/components/all-experiments/Experiments.tsx
@@ -25,13 +25,13 @@ const DeleteAriaLabel: string = ALL_EXPERIMENTS_TABLE_EN.BUTTONS.DELETE;
 const DuplicateAriaLabel: string = ALL_EXPERIMENTS_TABLE_EN.TABLE_COLUMNS.LINKS.DUPLICATE;
 
 export const Experiments: React.FC = () => {
-  const { testSuites, status }: IUseExperimentsData = useExperimentsData();
   const navigate = useNavigate();
+  const { testSuites, status }: IUseExperimentsData = useExperimentsData();
   const [openDeleteModal, setOpenDeleteModal] = useState<boolean>(false);
   const [checkedRows, setCheckedRows] = useState<Record<number, boolean>>({});
   const [experimentsData, setExperimentsData] = useState<ExperimentData[]>([]);
-  
-  const [deleteHandled, setDeleteHandled] = useState(false);
+  const [itemsToDelete, setItemsToDelete] = useState<ExperimentData[]>([]);
+
   const { post, status: deleteStatus, error: deleteError, cancelRequest: cancelRequestDelete }: IHttp<unknown>
     = useFetch<unknown>({ url: APIS.deleteExperiments });
   useFetchSpinner(deleteStatus);
@@ -47,12 +47,11 @@ export const Experiments: React.FC = () => {
 
   // Update the experimentsData state when delete operation is successful
   useEffect(() => {
-    if (deleteStatus === FetchDataStatus.Success && !deleteHandled) {
-      setExperimentsData(prevExperimentsData => prevExperimentsData.filter(experiment => !checkedRows[experiment.id]));
+    if (deleteStatus === FetchDataStatus.Success) {
+      setExperimentsData(prevExperimentsData => prevExperimentsData.filter(experiment => !itemsToDelete.includes(experiment)));
       setCheckedRows({});
-      setDeleteHandled(true);
     }
-  }, [deleteStatus, deleteHandled, checkedRows]);
+  }, [deleteStatus, itemsToDelete]);
 
   const handleDeleteClick: () => void = useCallback((): void => {
     setOpenDeleteModal(true);
@@ -60,14 +59,15 @@ export const Experiments: React.FC = () => {
 
   const handleCloseDeleteExperimentModal: (confirm?: boolean) => void = useCallback((confirm?: boolean): void => {
     if (confirm) {
-      setDeleteHandled(false);
+      const items = experimentsData.filter(experiment => checkedRows[experiment.id]);
+      setItemsToDelete(items);
       const ids: number[] = Object.keys(checkedRows).map((key: string) => parseInt(key))
       post({
         data: { ids }
       });
     }
     setOpenDeleteModal(false);
-  }, [post, checkedRows]);
+  }, [post, experimentsData, checkedRows]);
 
   const handleCheckboxClick = useCallback((rowInfo: ExperimentData): void => {
     const rowId = rowInfo.id as number;