refactor(edge/groups): migrate view to react [EE-4683] (#10592)

app/react/edge/edge-groups/ListView/EdgeGroupsDatatable.tsx

@@ -0,0 +1,37 @@
+import { LayoutGrid } from 'lucide-react';
+
+import { Datatable } from '@@/datatables';
+import { useTableState } from '@@/datatables/useTableState';
+import { createPersistedStore } from '@@/datatables/types';
+
+import { useEdgeGroups } from '../queries/useEdgeGroups';
+
+import { columns } from './columns';
+import { TableActions } from './TableActions';
+
+const tableKey = 'edge-groups';
+
+const settingsStore = createPersistedStore(tableKey);
+
+export function EdgeGroupsDatatable() {
+  const tableState = useTableState(settingsStore, tableKey);
+  const edgeGroupsQuery = useEdgeGroups();
+
+  return (
+    <Datatable
+      title="Edge Groups"
+      titleIcon={LayoutGrid}
+      columns={columns}
+      dataset={edgeGroupsQuery.data || []}
+      settingsManager={tableState}
+      emptyContentLabel="No Edge group available."
+      isLoading={edgeGroupsQuery.isLoading}
+      renderTableActions={(selectedItems) => (
+        <TableActions selectedItems={selectedItems} />
+      )}
+      isRowSelectable={({ original: item }) =>
+        !(item.HasEdgeStack || item.HasEdgeJob || item.HasEdgeConfig)
+      }
+    />
+  );
+}