refactor(k8s): namespace core logic (#12142)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Ali <83188384+testA113@users.noreply.github.com>

app/react/kubernetes/volumes/ListView/VolumesDatatable.tsx

@@ -1,6 +1,6 @@
 import { Database } from 'lucide-react';
 
-import { useAuthorizations } from '@/react/hooks/useUser';
+import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
 import KubernetesVolumeHelper from '@/kubernetes/helpers/volumeHelper';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
@@ -8,7 +8,6 @@ import { refreshableSettings } from '@@/datatables/types';
 import { Datatable, TableSettingsMenu } from '@@/datatables';
 import { useTableStateWithStorage } from '@@/datatables/useTableState';
 import { DeleteButton } from '@@/buttons/DeleteButton';
-import { useRepeater } from '@@/datatables/useRepeater';
 
 import { systemResourcesSettings } from '../../datatables/SystemResourcesSettings';
 import { CreateFromManifestButton } from '../../components/CreateFromManifestButton';
@@ -18,19 +17,13 @@ import {
 } from '../../datatables/DefaultDatatableSettings';
 import { SystemResourceDescription } from '../../datatables/SystemResourceDescription';
 import { useNamespacesQuery } from '../../namespaces/queries/useNamespacesQuery';
+import { useAllVolumesQuery } from '../queries/useVolumesQuery';
+import { isSystemNamespace } from '../../namespaces/queries/useIsSystemNamespace';
+import { useDeleteVolumes } from '../queries/useDeleteVolumes';
 
-import { VolumeViewModel } from './types';
 import { columns } from './columns';
 
-export function VolumesDatatable({
-  dataset,
-  onRemove,
-  onRefresh,
-}: {
-  dataset: Array<VolumeViewModel>;
-  onRemove(items: Array<VolumeViewModel>): void;
-  onRefresh(): void;
-}) {
+export function VolumesDatatable() {
   const tableState = useTableStateWithStorage<TableSettings>(
     'kube-volumes',
     'Name',
@@ -40,40 +33,54 @@ export function VolumesDatatable({
     })
   );
 
-  const hasWriteAuth = useAuthorizations('K8sVolumesW', undefined, true);
-
-  useRepeater(tableState.autoRefreshRate, onRefresh);
+  const { authorized: hasWriteAuth } = useAuthorizations(
+    'K8sVolumesW',
+    undefined,
+    true
+  );
 
   const envId = useEnvironmentId();
+  const deleteVolumesMutation = useDeleteVolumes(envId);
   const namespaceListQuery = useNamespacesQuery(envId);
+  const namespaces = namespaceListQuery.data ?? [];
+  const volumesQuery = useAllVolumesQuery(envId, {
+    refetchInterval: tableState.autoRefreshRate * 1000,
+  });
+  const volumes = volumesQuery.data ?? [];
 
-  const filteredDataset = tableState.showSystemResources
-    ? dataset
-    : dataset.filter((item) => !isSystem(item));
+  const filteredVolumes = tableState.showSystemResources
+    ? volumes
+    : volumes.filter(
+        (volume) =>
+          !isSystemNamespace(volume.ResourcePool.Namespace.Name, namespaces)
+      );
 
   return (
     <Datatable
-      noWidget
       data-cy="k8s-volumes-datatable"
-      dataset={filteredDataset}
+      isLoading={volumesQuery.isLoading || namespaceListQuery.isLoading}
+      dataset={filteredVolumes}
       columns={columns}
       settingsManager={tableState}
       title="Volumes"
       titleIcon={Database}
-      isRowSelectable={({ original: item }) =>
-        hasWriteAuth &&
-        !(isSystem(item) && !KubernetesVolumeHelper.isUsed(item))
+      getRowId={(row) => row.PersistentVolumeClaim.Name}
+      disableSelect={!hasWriteAuth}
+      isRowSelectable={({ original: volume }) =>
+        !isSystemNamespace(volume.ResourcePool.Namespace.Name, namespaces) &&
+        !KubernetesVolumeHelper.isUsed(volume)
       }
       renderTableActions={(selectedItems) => (
-        <>
+        <Authorized authorizations="K8sVolumesW">
           <DeleteButton
             confirmMessage="Do you want to remove the selected volume(s)?"
-            onConfirmed={() => onRemove(selectedItems)}
+            onConfirmed={() => deleteVolumesMutation.mutate(selectedItems)}
             disabled={selectedItems.length === 0}
+            isLoading={deleteVolumesMutation.isLoading}
             data-cy="k8s-volumes-delete-button"
           />
           <CreateFromManifestButton data-cy="k8s-volumes-deploy-button" />
-        </>
+        </Authorized>
       )}
       renderTableSettings={() => (
         <TableSettingsMenu>
@@ -87,9 +94,4 @@ export function VolumesDatatable({
       }
     />
   );
-
-  function isSystem(item: VolumeViewModel) {
-    return !!namespaceListQuery.data?.[item.ResourcePool.Namespace.Name]
-      .IsSystem;
-  }
 }