update roles tables

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

@@ -14,6 +14,7 @@ export type ClusterRoleSubject = {
 export type ClusterRoleBinding = {
   name: string;
   uid: string;
+  namespace: string;
   roleRef: ClusterRoleRef;
   subjects: ClusterRoleSubject[] | null;
   creationDate: string;

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

@@ -2,44 +2,55 @@ 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 { useAllRoleBindings } from './queries/useAllRoleBindings';
+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 = useAllRoleBindings(environmentId, {
     autoRefreshRate: tableState.autoRefreshRate * 1000,
-    enabled: namespacesQuery.isSuccess,
   });
-
-  const filteredRoleBindings = tableState.showSystemResources
+  const filteredRoleBindings = useMemo(
+    () =>
+      tableState.showSystemResources
         ? roleBindingsQuery.data
-    : roleBindingsQuery.data?.filter(
-        (rb) => !isSystemNamespace(rb.namespace, namespacesQuery.data)
+        : roleBindingsQuery.data?.filter((rb) => !rb.isSystem),
+    [roleBindingsQuery.data, tableState.showSystemResources]
   );
 
   const { authorized: isAuthorisedToAddEdit } = useAuthorizations([
@@ -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/useAllRoleBindings.ts

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

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/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,48 +1,68 @@
 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 { useAllRoleBindings } from '../RoleBindingsDatatable/queries/useAllRoleBindings';
+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 { useAllRoles } from './queries/useAllRoles';
+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 filteredRoles = tableState.showSystemResources
-    ? rolesQuery.data
-    : rolesQuery.data?.filter(
-        (role) => !isSystemNamespace(role.namespace, namespacesQuery.data)
+  const environmentId = useEnvironmentId();
+  const tableState = useKubeStore<TableSettings>(
+    storageKey,
+    undefined,
+    (set) => ({
+      ...filteredColumnsSettings(set),
+    })
+  );
+  const rolesQuery = useAllRoles(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
+  const roleBindingsQuery = useAllRoleBindings(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
+  const roleRowData = useRoleRowData(rolesQuery.data, roleBindingsQuery.data);
+
+  const filteredRoles = useMemo(
+    () =>
+      tableState.showSystemResources
+        ? roleRowData
+        : roleRowData.filter((role) => !role.isSystem),
+    [roleRowData, tableState.showSystemResources]
   );
 
   return (
@@ -50,7 +70,7 @@ export function RolesDatatable() {
       dataset={filteredRoles || []}
       columns={columns}
       settingsManager={tableState}
-      isLoading={rolesQuery.isLoading}
+      isLoading={rolesQuery.isLoading || roleBindingsQuery.isLoading}
       emptyContentLabel="No roles found"
       title="Roles"
       titleIcon={UserCheck}
@@ -85,7 +105,7 @@ type TableActionsProps = {
 
 function TableActions({ selectedItems }: TableActionsProps) {
   const environmentId = useEnvironmentId();
-  const deleteRolesMutation = useDeleteRolesMutation(environmentId);
+  const deleteRolesMutation = useDeleteRoles(environmentId);
   const router = useRouter();
 
   return (
@@ -155,3 +175,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/useAllRoles.ts

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

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/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;
 };