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