refactor and get unused cluster roles

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/ClusterRolesDatatable/ClusterRolesDatatable.tsx

@@ -15,8 +15,12 @@ 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 { useClusterRoles } from './queries/useClusterRoles';
 import { useDeleteClusterRoles } from './queries/useDeleteClusterRoles';
@@ -27,26 +31,41 @@ const settingsStore = createStore(storageKey);
 export function ClusterRolesDatatable() {
   const environmentId = useEnvironmentId();
   const tableState = useTableState(settingsStore, storageKey);
+
   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"
@@ -149,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

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

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

@@ -5,6 +5,10 @@ export type ClusterRole = {
   isSystem: boolean;
 };
 
+export type ClusterRoleRowData = ClusterRole & {
+  isUnused: boolean;
+};
+
 export type DeleteRequestPayload = {
   clusterRoles: string[];
 };

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

@@ -25,7 +25,7 @@ import {
 
 import { RoleBinding } from './types';
 import { columns } from './columns';
-import { useAllRoleBindings } from './queries/useAllRoleBindings';
+import { useRoleBindings } from './queries/useRoleBindings';
 import { useDeleteRoleBindings } from './queries/useDeleteRoleBindings';
 
 const storageKey = 'roleBindings';
@@ -42,7 +42,7 @@ export function RoleBindingsDatatable() {
       ...filteredColumnsSettings(set),
     })
   );
-  const roleBindingsQuery = useAllRoleBindings(environmentId, {
+  const roleBindingsQuery = useRoleBindings(environmentId, {
     autoRefreshRate: tableState.autoRefreshRate * 1000,
   });
   const filteredRoleBindings = useMemo(

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 useAllRoleBindings(
+export function useRoleBindings(
   environmentId: EnvironmentId,
   options?: { autoRefreshRate?: number; enabled?: boolean }
 ) {

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

@@ -7,7 +7,6 @@ import { Authorized } from '@/react/hooks/useUser';
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
-import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
 import {
   DefaultDatatableSettings,
   TableSettings as KubeTableSettings,
@@ -22,12 +21,12 @@ import {
   filteredColumnsSettings,
 } from '@@/datatables/types';
 
-import { useAllRoleBindings } from '../RoleBindingsDatatable/queries/useAllRoleBindings';
+import { useRoleBindings } from '../RoleBindingsDatatable/queries/useRoleBindings';
 import { RoleBinding } from '../RoleBindingsDatatable/types';
 
 import { columns } from './columns';
 import { Role, RoleRowData } from './types';
-import { useAllRoles } from './queries/useAllRoles';
+import { useRoles } from './queries/useRoles';
 import { useDeleteRoles } from './queries/useDeleteRoles';
 
 const storageKey = 'roles';
@@ -36,11 +35,6 @@ interface TableSettings
     FilteredColumnsTableSettings {}
 
 export function RolesDatatable() {
-  useUnauthorizedRedirect(
-    { authorizations: ['K8sRolesW'] },
-    { to: 'kubernetes.dashboard' }
-  );
-
   const environmentId = useEnvironmentId();
   const tableState = useKubeStore<TableSettings>(
     storageKey,
@@ -49,10 +43,10 @@ export function RolesDatatable() {
       ...filteredColumnsSettings(set),
     })
   );
-  const rolesQuery = useAllRoles(environmentId, {
+  const rolesQuery = useRoles(environmentId, {
     autoRefreshRate: tableState.autoRefreshRate * 1000,
   });
-  const roleBindingsQuery = useAllRoleBindings(environmentId, {
+  const roleBindingsQuery = useRoleBindings(environmentId, {
     autoRefreshRate: tableState.autoRefreshRate * 1000,
   });
   const roleRowData = useRoleRowData(rolesQuery.data, roleBindingsQuery.data);

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

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

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

@@ -12,7 +12,6 @@ import {
   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';
 
@@ -35,11 +34,6 @@ interface TableSettings
     FilteredColumnsTableSettings {}
 
 export function ServiceAccountsDatatable() {
-  useUnauthorizedRedirect(
-    { authorizations: ['K8sServiceAccountsW'] },
-    { to: 'kubernetes.dashboard' }
-  );
-
   const environmentId = useEnvironmentId();
   const tableState = useKubeStore<TableSettings>(
     storageKey,