refactor(kube/registries): migrate access table to react [EE-4706] (#10688)

app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx

@@ -0,0 +1,58 @@
+import { UserX } from 'lucide-react';
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+import { DeleteButton } from '@@/buttons/DeleteButton';
+
+type Item = { value: string };
+
+const columnHelper = createColumnHelper<Item>();
+
+const columns = [
+  columnHelper.accessor('value', {
+    header: 'Namespace',
+  }),
+];
+
+const tableKey = 'kube-access-table';
+
+const store = createPersistedStore(tableKey);
+
+export function AccessTable({
+  dataset,
+  onRemove,
+}: {
+  dataset: Array<Item>;
+  onRemove: (selectedItems: Array<Item>) => void;
+}) {
+  const tableState = useTableState(store, tableKey);
+
+  return (
+    <Datatable
+      title="Access"
+      titleIcon={UserX}
+      dataset={dataset}
+      columns={columns}
+      emptyContentLabel="No namespace has been authorized yet."
+      settingsManager={tableState}
+      renderTableActions={(selectedItems) => (
+        <DeleteButton
+          disabled={selectedItems.length === 0}
+          confirmMessage={
+            <>
+              <p>
+                This registry might be used by one or more applications inside
+                this environment. Removing the registry access could lead to a
+                service interruption for these applications.
+              </p>
+              <p>Are you sure you wish to continue?</p>
+            </>
+          }
+          onConfirmed={() => onRemove(selectedItems)}
+        />
+      )}
+    />
+  );
+}