fix(more resources): fix porting and functionality [r8s-103] (#8)

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

app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/ServiceAccountsDatatable.tsx

@@ -1,51 +1,55 @@
 import { User } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
+import { useMemo } from 'react';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { Authorized } from '@/react/hooks/useUser';
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
-import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
-import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import {
+  DefaultDatatableSettings,
+  TableSettings as KubeTableSettings,
+} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
-import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
-import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
+import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 
 import { Datatable, TableSettingsMenu } from '@@/datatables';
-import { useTableState } from '@@/datatables/useTableState';
 import { DeleteButton } from '@@/buttons/DeleteButton';
+import {
+  type FilteredColumnsTableSettings,
+  filteredColumnsSettings,
+} from '@@/datatables/types';
 
 import { ServiceAccount } from '../types';
-import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 import { useDeleteServiceAccountsMutation } from './queries/useDeleteServiceAccountsMutation';
 import { useGetAllServiceAccountsQuery } from './queries/useGetAllServiceAccountsQuery';
 
 const storageKey = 'serviceAccounts';
-const settingsStore = createStore(storageKey);
+interface TableSettings
+  extends KubeTableSettings,
+    FilteredColumnsTableSettings {}
 
 export function ServiceAccountsDatatable() {
-  useUnauthorizedRedirect(
-    { authorizations: ['K8sServiceAccountsW'] },
-    { to: 'kubernetes.dashboard' }
-  );
-
   const environmentId = useEnvironmentId();
-  const tableState = useTableState(settingsStore, storageKey);
-  const namespacesQuery = useNamespacesQuery(environmentId);
+  const tableState = useKubeStore<TableSettings>(
+    storageKey,
+    undefined,
+    (set) => ({
+      ...filteredColumnsSettings(set),
+    })
+  );
   const serviceAccountsQuery = useGetAllServiceAccountsQuery(environmentId, {
     refetchInterval: tableState.autoRefreshRate * 1000,
-    enabled: namespacesQuery.isSuccess,
   });
-
-  const columns = useColumns();
-
-  const filteredServiceAccounts = tableState.showSystemResources
-    ? serviceAccountsQuery.data
-    : serviceAccountsQuery.data?.filter(
-        (sa) => !isSystemNamespace(sa.namespace, namespacesQuery.data)
-      );
+  const filteredServiceAccounts = useMemo(
+    () =>
+      tableState.showSystemResources
+        ? serviceAccountsQuery.data
+        : serviceAccountsQuery.data?.filter((sa) => !sa.isSystem),
+    [serviceAccountsQuery.data, tableState.showSystemResources]
+  );
 
   return (
     <Datatable

app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/columns/index.tsx

@@ -2,6 +2,4 @@ import { name } from './name';
 import { namespace } from './namespace';
 import { created } from './created';
 
-export function useColumns() {
-  return [name, namespace, created];
-}
+export const columns = [name, namespace, created];

app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/columns/name.tsx

@@ -1,5 +1,4 @@
 import { SystemBadge } from '@@/Badge/SystemBadge';
-import { UnusedBadge } from '@@/Badge/UnusedBadge';
 
 import { columnHelper } from './helper';
 
@@ -9,9 +8,6 @@ export const name = columnHelper.accessor(
     if (row.isSystem) {
       result += ' system';
     }
-    if (row.isUnused) {
-      result += ' unused';
-    }
     return result;
   },
   {
@@ -21,7 +17,6 @@ export const name = columnHelper.accessor(
       <div className="flex gap-2">
         <div>{row.original.name}</div>
         {row.original.isSystem && <SystemBadge />}
-        {!row.original.isSystem && row.original.isUnused && <UnusedBadge />}
       </div>
     ),
   }