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' }
   );