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/ClusterRolesView/ClusterRoleBindingsDatatable/ClusterRoleBindingsDatatable.tsx

@@ -20,8 +20,8 @@ import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSe
 
 import { ClusterRoleBinding } from './types';
 import { columns } from './columns';
-import { useGetClusterRoleBindingsQuery } from './queries/useGetClusterRoleBindingsQuery';
-import { useDeleteClusterRoleBindingsMutation } from './queries/useDeleteClusterRoleBindingsMutation';
+import { useClusterRoleBindings } from './queries/useClusterRoleBindings';
+import { useDeleteClusterRoleBindings } from './queries/useDeleteClusterRoleBindings';
 
 const storageKey = 'clusterRoleBindings';
 const settingsStore = createStore(storageKey);
@@ -29,12 +29,9 @@ const settingsStore = createStore(storageKey);
 export function ClusterRoleBindingsDatatable() {
   const environmentId = useEnvironmentId();
   const tableState = useTableState(settingsStore, storageKey);
-  const clusterRoleBindingsQuery = useGetClusterRoleBindingsQuery(
-    environmentId,
-    {
-      autoRefreshRate: tableState.autoRefreshRate * 1000,
-    }
-  );
+  const clusterRoleBindingsQuery = useClusterRoleBindings(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
 
   const filteredClusterRoleBindings = useMemo(
     () =>
@@ -102,7 +99,7 @@ type TableActionsProps = {
 function TableActions({ selectedItems }: TableActionsProps) {
   const environmentId = useEnvironmentId();
   const deleteClusterRoleBindingsMutation =
-    useDeleteClusterRoleBindingsMutation(environmentId);
+    useDeleteClusterRoleBindings(environmentId);
   const router = useRouter();
 
   async function handleRemoveClick(roles: SelectedRole[]) {

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/queries/useClusterRoleBindings.ts

@@ -9,7 +9,7 @@ import { ClusterRoleBinding } from '../types';
 
 import { queryKeys } from './query-keys';
 
-export function useGetClusterRoleBindingsQuery(
+export function useClusterRoleBindings(
   environmentId: EnvironmentId,
   options?: { autoRefreshRate?: number }
 ) {

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/queries/useDeleteClusterRoleBindings.ts

@@ -6,9 +6,7 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { queryKeys } from './query-keys';
 
-export function useDeleteClusterRoleBindingsMutation(
-  environmentId: EnvironmentId
-) {
+export function useDeleteClusterRoleBindings(environmentId: EnvironmentId) {
   const queryClient = useQueryClient();
   return useMutation(deleteClusterRoleBindings, {
     ...withInvalidate(queryClient, [queryKeys.list(environmentId)]),

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/types.ts

@@ -15,12 +15,8 @@ export type ClusterRoleBinding = {
   name: string;
   uid: string;
   namespace: string;
-  resourceVersion: string;
-  creationDate: string;
-  annotations: Record<string, string> | null;
-
   roleRef: ClusterRoleRef;
   subjects: ClusterRoleSubject[] | null;
-
+  creationDate: string;
   isSystem: boolean;
 };

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/ClusterRolesDatatable.tsx

@@ -15,11 +15,15 @@ import { LoadingButton } from '@@/buttons';
 import { useTableState } from '@@/datatables/useTableState';
 
 import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
+import { useClusterRoleBindings } from '../ClusterRoleBindingsDatatable/queries/useClusterRoleBindings';
+import { useRoleBindings } from '../../RolesView/RoleBindingsDatatable/queries/useRoleBindings';
+import { ClusterRoleBinding } from '../ClusterRoleBindingsDatatable/types';
+import { RoleBinding } from '../../RolesView/RoleBindingsDatatable/types';
 
-import { ClusterRole } from './types';
+import { ClusterRole, ClusterRoleRowData } from './types';
 import { columns } from './columns';
-import { useGetClusterRolesQuery } from './queries/useGetClusterRolesQuery';
-import { useDeleteClusterRolesMutation } from './queries/useDeleteClusterRolesMutation';
+import { useClusterRoles } from './queries/useClusterRoles';
+import { useDeleteClusterRoles } from './queries/useDeleteClusterRoles';
 
 const storageKey = 'clusterRoles';
 const settingsStore = createStore(storageKey);
@@ -27,26 +31,41 @@ const settingsStore = createStore(storageKey);
 export function ClusterRolesDatatable() {
   const environmentId = useEnvironmentId();
   const tableState = useTableState(settingsStore, storageKey);
-  const clusterRolesQuery = useGetClusterRolesQuery(environmentId, {
+
+  const clusterRolesQuery = useClusterRoles(environmentId, {
     autoRefreshRate: tableState.autoRefreshRate * 1000,
   });
+  const clusterRoleBindingsQuery = useClusterRoleBindings(environmentId);
+  const roleBindingsQuery = useRoleBindings(environmentId);
+
+  const clusterRolesWithUnusedFlag = useClusterRolesWithUnusedFlag(
+    clusterRolesQuery.data,
+    clusterRoleBindingsQuery.data,
+    roleBindingsQuery.data
+  );
+
+  const filteredClusterRoles = useMemo(
+    () =>
+      clusterRolesWithUnusedFlag.filter(
+        (cr) => tableState.showSystemResources || !cr.isSystem
+      ),
+    [clusterRolesWithUnusedFlag, tableState.showSystemResources]
+  );
+
+  const isLoading =
+    clusterRolesQuery.isLoading ||
+    clusterRoleBindingsQuery.isLoading ||
+    roleBindingsQuery.isLoading;
 
   const { authorized: isAuthorizedToAddEdit } = useAuthorizations([
     'K8sClusterRolesW',
   ]);
-  const filteredClusterRoles = useMemo(
-    () =>
-      clusterRolesQuery.data?.filter(
-        (cr) => tableState.showSystemResources || !cr.isSystem
-      ),
-    [clusterRolesQuery.data, tableState.showSystemResources]
-  );
 
   return (
     <Datatable
       dataset={filteredClusterRoles || []}
       columns={columns}
-      isLoading={clusterRolesQuery.isLoading}
+      isLoading={isLoading}
       settingsManager={tableState}
       emptyContentLabel="No supported cluster roles found"
       title="Cluster Roles"
@@ -82,8 +101,7 @@ type TableActionsProps = {
 
 function TableActions({ selectedItems }: TableActionsProps) {
   const environmentId = useEnvironmentId();
-  const deleteClusterRolesMutation =
-    useDeleteClusterRolesMutation(environmentId);
+  const deleteClusterRolesMutation = useDeleteClusterRoles(environmentId);
   const router = useRouter();
 
   async function handleRemoveClick(roles: SelectedRole[]) {
@@ -150,3 +168,38 @@ function TableActions({ selectedItems }: TableActionsProps) {
     </Authorized>
   );
 }
+
+// Updated custom hook
+function useClusterRolesWithUnusedFlag(
+  clusterRoles?: ClusterRole[],
+  clusterRoleBindings?: ClusterRoleBinding[],
+  roleBindings?: RoleBinding[]
+): ClusterRoleRowData[] {
+  return useMemo(() => {
+    if (!clusterRoles || !clusterRoleBindings || !roleBindings) {
+      return [];
+    }
+
+    const usedRoleNames = new Set<string>();
+
+    // Check ClusterRoleBindings
+    clusterRoleBindings.forEach((binding) => {
+      if (binding.roleRef.kind === 'ClusterRole') {
+        usedRoleNames.add(binding.roleRef.name);
+      }
+    });
+
+    // Check RoleBindings
+    roleBindings.forEach((binding) => {
+      if (binding.roleRef.kind === 'ClusterRole') {
+        usedRoleNames.add(binding.roleRef.name);
+      }
+    });
+
+    // Mark cluster roles as unused if they're not in the usedRoleNames set
+    return clusterRoles.map((clusterRole) => ({
+      ...clusterRole,
+      isUnused: !usedRoleNames.has(clusterRole.name) && !clusterRole.isSystem,
+    }));
+  }, [clusterRoles, clusterRoleBindings, roleBindings]);
+}

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/helper.ts

@@ -1,5 +1,5 @@
 import { createColumnHelper } from '@tanstack/react-table';
 
-import { ClusterRole } from '../types';
+import { ClusterRoleRowData } from '../types';
 
-export const columnHelper = createColumnHelper<ClusterRole>();
+export const columnHelper = createColumnHelper<ClusterRoleRowData>();

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx

@@ -9,9 +9,6 @@ export const name = columnHelper.accessor(
     if (row.isSystem) {
       result += ' system';
     }
-    if (row.isUnused) {
-      result += ' unused';
-    }
     return result;
   },
   {

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/queries/useClusterRoles.ts

@@ -9,7 +9,7 @@ import { ClusterRole } from '../types';
 
 import { queryKeys } from './query-keys';
 
-export function useGetClusterRolesQuery(
+export function useClusterRoles(
   environmentId: EnvironmentId,
   options?: { autoRefreshRate?: number }
 ) {

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/queries/useDeleteClusterRoles.ts

@@ -6,7 +6,7 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { queryKeys } from './query-keys';
 
-export function useDeleteClusterRolesMutation(environmentId: EnvironmentId) {
+export function useDeleteClusterRoles(environmentId: EnvironmentId) {
   const queryClient = useQueryClient();
   return useMutation(deleteClusterRoles, {
     onSuccess: () =>

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/types.ts

@@ -1,23 +1,14 @@
-export type Rule = {
-  verbs: string[];
-  apiGroups: string[];
-  resources: string[];
-};
-
 export type ClusterRole = {
   name: string;
-  uid: string;
-  namespace: string;
-  resourceVersion: string;
   creationDate: string;
-  annotations?: Record<string, string>;
-
-  rules: Rule[];
-
-  isUnused: boolean;
+  uid: string;
   isSystem: boolean;
 };
 
+export type ClusterRoleRowData = ClusterRole & {
+  isUnused: boolean;
+};
+
 export type DeleteRequestPayload = {
   clusterRoles: string[];
 };

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesView.tsx

@@ -11,7 +11,10 @@ import { ClusterRoleBindingsDatatable } from './ClusterRoleBindingsDatatable/Clu
 
 export function ClusterRolesView() {
   useUnauthorizedRedirect(
-    { authorizations: ['K8sClusterRoleBindingsW', 'K8sClusterRolesW'] },
+    {
+      authorizations: ['K8sClusterRoleBindingsW', 'K8sClusterRolesW'],
+      adminOnlyCE: true,
+    },
     { to: 'kubernetes.dashboard' }
   );
 

app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/RoleBindingsDatatable.tsx

@@ -2,45 +2,56 @@ import { Trash2, Link as LinkIcon } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
 import { Row } from '@tanstack/react-table';
 import clsx from 'clsx';
+import { useMemo } from 'react';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
-import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
-import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
+import {
+  DefaultDatatableSettings,
+  TableSettings as KubeTableSettings,
+} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
-import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
+import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 
 import { confirmDelete } from '@@/modals/confirm';
 import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
 import { LoadingButton } from '@@/buttons';
-import { useTableState } from '@@/datatables/useTableState';
-
-import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
+import {
+  type FilteredColumnsTableSettings,
+  filteredColumnsSettings,
+} from '@@/datatables/types';
 
 import { RoleBinding } from './types';
 import { columns } from './columns';
-import { useGetAllRoleBindingsQuery } from './queries/useGetAllRoleBindingsQuery';
-import { useDeleteRoleBindingsMutation } from './queries/useDeleteRoleBindingsMutation';
+import { useRoleBindings } from './queries/useRoleBindings';
+import { useDeleteRoleBindings } from './queries/useDeleteRoleBindings';
 
 const storageKey = 'roleBindings';
-const settingsStore = createStore(storageKey);
+interface TableSettings
+  extends KubeTableSettings,
+    FilteredColumnsTableSettings {}
 
 export function RoleBindingsDatatable() {
   const environmentId = useEnvironmentId();
-  const tableState = useTableState(settingsStore, storageKey);
-  const namespacesQuery = useNamespacesQuery(environmentId);
-  const roleBindingsQuery = useGetAllRoleBindingsQuery(environmentId, {
+  const tableState = useKubeStore<TableSettings>(
+    storageKey,
+    undefined,
+    (set) => ({
+      ...filteredColumnsSettings(set),
+    })
+  );
+  const roleBindingsQuery = useRoleBindings(environmentId, {
     autoRefreshRate: tableState.autoRefreshRate * 1000,
-    enabled: namespacesQuery.isSuccess,
   });
-
-  const filteredRoleBindings = tableState.showSystemResources
-    ? roleBindingsQuery.data
-    : roleBindingsQuery.data?.filter(
-        (rb) => !isSystemNamespace(rb.namespace, namespacesQuery.data)
-      );
+  const filteredRoleBindings = useMemo(
+    () =>
+      tableState.showSystemResources
+        ? roleBindingsQuery.data
+        : roleBindingsQuery.data?.filter((rb) => !rb.isSystem),
+    [roleBindingsQuery.data, tableState.showSystemResources]
+  );
 
   const { authorized: isAuthorisedToAddEdit } = useAuthorizations([
     'K8sRoleBindingsW',
@@ -100,8 +111,7 @@ type TableActionsProps = {
 
 function TableActions({ selectedItems }: TableActionsProps) {
   const environmentId = useEnvironmentId();
-  const deleteRoleBindingsMutation =
-    useDeleteRoleBindingsMutation(environmentId);
+  const deleteRoleBindingsMutation = useDeleteRoleBindings(environmentId);
   const router = useRouter();
 
   async function handleRemoveClick(roles: SelectedRole[]) {

app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/queries/useDeleteRoleBindings.ts

@@ -6,7 +6,7 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { queryKeys } from './query-keys';
 
-export function useDeleteRoleBindingsMutation(environmentId: EnvironmentId) {
+export function useDeleteRoleBindings(environmentId: EnvironmentId) {
   const queryClient = useQueryClient();
   return useMutation(deleteRoleBindings, {
     ...withInvalidate(queryClient, [queryKeys.list(environmentId)]),

app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/queries/useRoleBindings.ts

@@ -8,7 +8,7 @@ import { RoleBinding } from '../types';
 
 import { queryKeys } from './query-keys';
 
-export function useGetAllRoleBindingsQuery(
+export function useRoleBindings(
   environmentId: EnvironmentId,
   options?: { autoRefreshRate?: number; enabled?: boolean }
 ) {

app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/types.ts

@@ -15,12 +15,8 @@ export type RoleBinding = {
   name: string;
   uid: string;
   namespace: string;
-  resourceVersion: string;
-  creationDate: string;
-  annotations: Record<string, string> | null;
-
   roleRef: RoleRef;
   subjects: RoleSubject[] | null;
-
+  creationDate: string;
   isSystem: boolean;
 };

app/react/kubernetes/more-resources/RolesView/RolesDatatable/RolesDatatable.tsx

@@ -1,56 +1,70 @@
 import { Trash2, UserCheck } 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 { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
-import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
-import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
-import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
+import {
+  DefaultDatatableSettings,
+  TableSettings as KubeTableSettings,
+} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 
 import { confirmDelete } from '@@/modals/confirm';
 import { Datatable, TableSettingsMenu } from '@@/datatables';
 import { LoadingButton } from '@@/buttons';
-import { useTableState } from '@@/datatables/useTableState';
+import {
+  type FilteredColumnsTableSettings,
+  filteredColumnsSettings,
+} from '@@/datatables/types';
 
-import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
+import { useRoleBindings } from '../RoleBindingsDatatable/queries/useRoleBindings';
+import { RoleBinding } from '../RoleBindingsDatatable/types';
 
 import { columns } from './columns';
-import { Role } from './types';
-import { useGetAllRolesQuery } from './queries/useGetAllRolesQuery';
-import { useDeleteRolesMutation } from './queries/useDeleteRolesMutation';
+import { Role, RoleRowData } from './types';
+import { useRoles } from './queries/useRoles';
+import { useDeleteRoles } from './queries/useDeleteRoles';
 
 const storageKey = 'roles';
-const settingsStore = createStore(storageKey);
+interface TableSettings
+  extends KubeTableSettings,
+    FilteredColumnsTableSettings {}
 
 export function RolesDatatable() {
   const environmentId = useEnvironmentId();
-  const tableState = useTableState(settingsStore, storageKey);
-  const namespacesQuery = useNamespacesQuery(environmentId);
-  const rolesQuery = useGetAllRolesQuery(environmentId, {
-    autoRefreshRate: tableState.autoRefreshRate * 1000,
-    enabled: namespacesQuery.isSuccess,
-  });
-  useUnauthorizedRedirect(
-    { authorizations: ['K8sRolesW'] },
-    { to: 'kubernetes.dashboard' }
+  const tableState = useKubeStore<TableSettings>(
+    storageKey,
+    undefined,
+    (set) => ({
+      ...filteredColumnsSettings(set),
+    })
   );
+  const rolesQuery = useRoles(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
+  const roleBindingsQuery = useRoleBindings(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
+  const roleRowData = useRoleRowData(rolesQuery.data, roleBindingsQuery.data);
 
-  const filteredRoles = tableState.showSystemResources
-    ? rolesQuery.data
-    : rolesQuery.data?.filter(
-        (role) => !isSystemNamespace(role.namespace, namespacesQuery.data)
-      );
+  const filteredRoles = useMemo(
+    () =>
+      tableState.showSystemResources
+        ? roleRowData
+        : roleRowData.filter((role) => !role.isSystem),
+    [roleRowData, tableState.showSystemResources]
+  );
 
   return (
     <Datatable
       dataset={filteredRoles || []}
       columns={columns}
       settingsManager={tableState}
-      isLoading={rolesQuery.isLoading}
+      isLoading={rolesQuery.isLoading || roleBindingsQuery.isLoading}
       emptyContentLabel="No roles found"
       title="Roles"
       titleIcon={UserCheck}
@@ -85,7 +99,7 @@ type TableActionsProps = {
 
 function TableActions({ selectedItems }: TableActionsProps) {
   const environmentId = useEnvironmentId();
-  const deleteRolesMutation = useDeleteRolesMutation(environmentId);
+  const deleteRolesMutation = useDeleteRoles(environmentId);
   const router = useRouter();
 
   return (
@@ -155,3 +169,26 @@ function TableActions({ selectedItems }: TableActionsProps) {
     return roles;
   }
 }
+
+// Mark roles that are used by a role binding
+
+// Mark roles that are used by a role binding
+function useRoleRowData(
+  roles?: Role[],
+  roleBindings?: RoleBinding[]
+): RoleRowData[] {
+  const roleRowData = useMemo(
+    () =>
+      roles?.map((role) => {
+        const isUsed = roleBindings?.some(
+          (roleBinding) =>
+            roleBinding.roleRef.name === role.name &&
+            roleBinding.namespace === role.namespace
+        );
+        return { ...role, isUnused: !isUsed };
+      }),
+    [roles, roleBindings]
+  );
+
+  return roleRowData ?? [];
+}

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/helper.ts

@@ -1,5 +1,5 @@
 import { createColumnHelper } from '@tanstack/react-table';
 
-import { Role } from '../types';
+import { RoleRowData } from '../types';
 
-export const columnHelper = createColumnHelper<Role>();
+export const columnHelper = createColumnHelper<RoleRowData>();

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/namespace.tsx

@@ -3,7 +3,7 @@ import { Row } from '@tanstack/react-table';
 import { filterHOC } from '@@/datatables/Filter';
 import { Link } from '@@/Link';
 
-import { Role } from '../types';
+import { RoleRowData } from '../types';
 
 import { columnHelper } from './helper';
 
@@ -26,7 +26,7 @@ export const namespace = columnHelper.accessor((row) => row.namespace, {
     filter: filterHOC('Filter by namespace'),
   },
   enableColumnFilter: true,
-  filterFn: (row: Row<Role>, _columnId: string, filterValue: string[]) =>
+  filterFn: (row: Row<RoleRowData>, _columnId: string, filterValue: string[]) =>
     filterValue.length === 0 ||
     filterValue.includes(row.original.namespace ?? ''),
 });

app/react/kubernetes/more-resources/RolesView/RolesDatatable/queries/useDeleteRoles.ts

@@ -6,7 +6,7 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { queryKeys } from './query-keys';
 
-export function useDeleteRolesMutation(environmentId: EnvironmentId) {
+export function useDeleteRoles(environmentId: EnvironmentId) {
   const queryClient = useQueryClient();
   return useMutation(deleteRole, {
     ...withInvalidate(queryClient, [queryKeys.list(environmentId)]),

app/react/kubernetes/more-resources/RolesView/RolesDatatable/queries/useRoles.ts

@@ -11,7 +11,7 @@ const queryKeys = {
     ['environments', environmentId, 'kubernetes', 'roles'] as const,
 };
 
-export function useGetAllRolesQuery(
+export function useRoles(
   environmentId: EnvironmentId,
   options?: { autoRefreshRate?: number; enabled?: boolean }
 ) {

app/react/kubernetes/more-resources/RolesView/RolesDatatable/types.ts

@@ -8,12 +8,10 @@ export type Role = {
   name: string;
   uid: string;
   namespace: string;
-  resourceVersion: string;
   creationDate: string;
-  annotations?: Record<string, string>;
-
-  rules: Rule[];
-
   isSystem: boolean;
+};
+
+export type RoleRowData = Role & {
   isUnused: boolean;
 };

app/react/kubernetes/more-resources/RolesView/RolesView.tsx

@@ -11,7 +11,7 @@ import { RoleBindingsDatatable } from './RoleBindingsDatatable';
 
 export function RolesView() {
   useUnauthorizedRedirect(
-    { authorizations: ['K8sRoleBindingsW', 'K8sRolesW'] },
+    { authorizations: ['K8sRoleBindingsW', 'K8sRolesW'], adminOnlyCE: true },
     { to: 'kubernetes.dashboard' }
   );
 

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>
     ),
   }

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

@@ -1,8 +1,14 @@
+import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
+
 import { PageHeader } from '@@/PageHeader';
 
 import { ServiceAccountsDatatable } from './ServiceAccountsDatatable';
 
 export function ServiceAccountsView() {
+  useUnauthorizedRedirect(
+    { authorizations: ['K8sServiceAccountsW'], adminOnlyCE: true },
+    { to: 'kubernetes.dashboard' }
+  );
   return (
     <>
       <PageHeader

app/react/kubernetes/more-resources/ServiceAccountsView/types.ts

@@ -1,10 +1,7 @@
 export type ServiceAccount = {
   name: string;
-  namespace: string;
-  resourceVersion: string;
   uid: string;
+  namespace: string;
   creationDate: string;
-
   isSystem: boolean;
-  isUnused: boolean;
 };