From 189e88f2925a9cd568f10df864614e1db572c23f Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Tue, 8 Aug 2023 15:56:57 +0200
Subject: [PATCH] feat(common): update GoupedDataTable

---
 .../common/GroupedDataTable/index.tsx         | 45 ++++++++-----------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/webapp/src/components/common/GroupedDataTable/index.tsx b/webapp/src/components/common/GroupedDataTable/index.tsx
index 0fd3e936c7..1e94edc68b 100644
--- a/webapp/src/components/common/GroupedDataTable/index.tsx
+++ b/webapp/src/components/common/GroupedDataTable/index.tsx
@@ -6,7 +6,6 @@ import { Button, IconButton, Tooltip } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import MaterialReactTable, {
-  MaterialReactTableProps,
   MRT_Row,
   MRT_RowSelectionState,
   MRT_ToggleDensePaddingButton,
@@ -15,24 +14,22 @@ import MaterialReactTable, {
   type MRT_ColumnDef,
 } from "material-react-table";
 import { useTranslation } from "react-i18next";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import CreateRowDialog from "./CreateRowDialog";
 import ConfirmationDialog from "../dialogs/ConfirmationDialog";
 
-export type TData = Record<string, unknown>;
+type TRow = { id: string; name: string; group: string };
 
-export interface GroupedDataTableProps<T extends TData> {
-  materialReactTableProps?: Partial<MaterialReactTableProps>;
-  data: T[];
-  columns: MRT_ColumnDef<T>[];
+export interface GroupedDataTableProps<TData extends TRow> {
+  data: TData[];
+  columns: MRT_ColumnDef<TData>[];
   groups: string[];
-  onSubmit: (values: T) => void;
+  onSubmit: (values: TData) => void;
   onDelete: (ids: string[]) => void;
 }
 
-function GroupedDataTable({
-  materialReactTableProps,
+function GroupedDataTable<TData extends TRow>({
   data,
   columns,
   groups,
@@ -47,12 +44,13 @@ function GroupedDataTable({
   const [tableData, setTableData] = useState(data);
   const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
 
-  const isAnyRowSelected = useMemo(() => {
-    return Object.values(rowSelection).some((value) => value);
-  }, [rowSelection]);
+  const isAnyRowSelected = useMemo(
+    () => Object.values(rowSelection).some((value) => value),
+    [rowSelection]
+  );
 
   const existingNames = useMemo(
-    () => tableData.map((row) => String(row.name).toLowerCase()),
+    () => tableData.map((row) => row.name.toLowerCase()),
     [tableData]
   );
 
@@ -73,23 +71,19 @@ function GroupedDataTable({
     const rowIndexes = Object.keys(rowSelection)
       .map(Number)
       .filter(Number.isInteger);
-    const rowsToDelete = rowIndexes.map((index) => tableData[index]);
-    const rowsToDeleteIds = rowsToDelete.map((row) => String(row.id));
-    onDelete(rowsToDeleteIds);
+    const rowIdsToDelete = rowIndexes.map((index) => tableData[index].id);
+    onDelete(rowIdsToDelete);
     setTableData((prevTableData) =>
-      prevTableData.filter((row) => !rowsToDelete.includes(row))
+      prevTableData.filter((row) => !rowIdsToDelete.includes(row.id))
     );
     setRowSelection({});
     setConfirmDialogOpen(false);
   };
 
-  const handleRowClick = useCallback(
-    (row: MRT_Row<TData>) => {
-      const clusterId = row.original.id;
-      navigate(`${location.pathname}/${clusterId}`);
-    },
-    [navigate, location.pathname]
-  );
+  const handleRowClick = (row: MRT_Row<TData>) => {
+    const clusterId = row.original.id;
+    navigate(`${location.pathname}/${clusterId}`);
+  };
 
   ////////////////////////////////////////////////////////////////
   // JSX
@@ -98,7 +92,6 @@ function GroupedDataTable({
   return (
     <>
       <MaterialReactTable
-        {...materialReactTableProps}
         data={tableData}
         columns={useMemo(() => columns, [columns])}
         initialState={{