feat: [UIE-9357] - IAM Delegation: refactoring

Author: mpolotsk-akamai

packages/manager/src/features/IAM/Roles/Defaults/DefaultRoles.tsx

@@ -1,13 +1,9 @@
-import { useGetDefaultDelegationAccessQuery } from '@linode/queries';
 import { Paper, Typography } from '@linode/ui';
 import * as React from 'react';
 
 import { AssignedRolesTable } from '../../Shared/AssignedRolesTable/AssignedRolesTable';
 
 export const DefaultRoles = () => {
-  const { data: assignedRoles, isLoading: assignedRolesLoading } =
-    useGetDefaultDelegationAccessQuery();
-
   return (
     <Paper>
       <Typography variant="h2">Default Roles for Delegate Users</Typography>
@@ -19,11 +15,7 @@ export const DefaultRoles = () => {
         For existing delegate users, use their Assigned Roles page to update the
         assignment.
       </Typography>
-      <AssignedRolesTable
-        assignedRoles={assignedRoles}
-        assignedRolesLoading={assignedRolesLoading}
-        isDefaultRolesView={true}
-      />
+      <AssignedRolesTable />
     </Paper>
   );
 };

packages/manager/src/features/IAM/Shared/AssignedRolesTable/AssignedRolesTable.test.tsx

@@ -68,13 +68,7 @@ describe('AssignedRolesTable', () => {
       data: {},
     });
 
-    renderWithTheme(
-      <AssignedRolesTable
-        assignedRoles={{ account_access: [], entity_access: [] }}
-        assignedRolesLoading={false}
-        username="test_user"
-      />
-    );
+    renderWithTheme(<AssignedRolesTable />);
 
     expect(screen.getByText('No items to display.')).toBeVisible();
   });
@@ -92,13 +86,7 @@ describe('AssignedRolesTable', () => {
       data: mockEntities,
     });
 
-    renderWithTheme(
-      <AssignedRolesTable
-        assignedRoles={mockUserRoles}
-        assignedRolesLoading={false}
-        username="test_user"
-      />
-    );
+    renderWithTheme(<AssignedRolesTable />);
 
     expect(screen.getByText('account_linode_admin')).toBeVisible();
     expect(screen.getAllByText('All Linodes')[0]).toBeVisible();
@@ -126,13 +114,7 @@ describe('AssignedRolesTable', () => {
       data: mockEntities,
     });
 
-    renderWithTheme(
-      <AssignedRolesTable
-        assignedRoles={mockUserRoles}
-        assignedRolesLoading={false}
-        username="test_user"
-      />
-    );
+    renderWithTheme(<AssignedRolesTable />);
 
     const searchInput = screen.getByPlaceholderText('Search');
     await userEvent.type(searchInput, 'NonExistentRole');
@@ -155,13 +137,7 @@ describe('AssignedRolesTable', () => {
       data: mockEntities,
     });
 
-    renderWithTheme(
-      <AssignedRolesTable
-        assignedRoles={mockUserRoles}
-        assignedRolesLoading={false}
-        username="test_user"
-      />
-    );
+    renderWithTheme(<AssignedRolesTable />);
 
     const searchInput = screen.getByPlaceholderText('Search');
     await userEvent.type(searchInput, 'account_linode_admin');
@@ -184,13 +160,7 @@ describe('AssignedRolesTable', () => {
       data: mockEntities,
     });
 
-    renderWithTheme(
-      <AssignedRolesTable
-        assignedRoles={mockUserRoles}
-        assignedRolesLoading={false}
-        username="test_user"
-      />
-    );
+    renderWithTheme(<AssignedRolesTable />);
 
     const autocomplete = screen.getByPlaceholderText('All Assigned Roles');
     await userEvent.type(autocomplete, 'Firewall Roles');
@@ -209,13 +179,7 @@ describe('AssignedRolesTable', () => {
       data: mockEntities,
     });
 
-    renderWithTheme(
-      <AssignedRolesTable
-        assignedRoles={mockUserRoles}
-        assignedRolesLoading={false}
-        isDefaultRolesView={true}
-      />
-    );
+    renderWithTheme(<AssignedRolesTable />);
 
     expect(screen.getByText('Add New Default Roles')).toBeVisible();
     expect(screen.queryByText('Assign New Roles')).not.toBeInTheDocument();

packages/manager/src/features/IAM/Shared/AssignedRolesTable/AssignedRolesTable.tsx

@@ -17,6 +17,7 @@ import { TableSortCell } from 'src/components/TableSortCell/TableSortCell';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 import { useAllAccountEntities } from 'src/queries/entities/entities';
 
+import { useAssignedRoles } from '../../hooks/useAssignedRoles';
 import { usePermissions } from '../../hooks/usePermissions';
 import { AssignedEntities } from '../../Users/UserRoles/AssignedEntities';
 import { AssignNewRoleDrawer } from '../../Users/UserRoles/AssignNewRoleDrawer';
@@ -55,7 +56,6 @@ import type {
   AccessType,
   AccountRoleType,
   EntityRoleType,
-  IamUserRoles,
 } from '@linode/api-v4';
 import type { SelectOption } from '@linode/ui';
 import type { TableItem } from 'src/components/CollapsibleTable/CollapsibleTable';
@@ -66,23 +66,17 @@ const ALL_ROLES_OPTION: SelectOption = {
   label: 'All Assigned Roles',
   value: 'all',
 };
-
 interface Props {
-  assignedRoles?: IamUserRoles;
-  assignedRolesLoading?: boolean;
-  isDefaultRolesView?: boolean;
   username?: string;
 }
-
-export const AssignedRolesTable = ({
-  isDefaultRolesView = false,
-  assignedRoles,
-  assignedRolesLoading,
-  username,
-}: Props) => {
+export const AssignedRolesTable = (props: Props) => {
+  const { username } = props;
   const navigate = useNavigate();
   const theme = useTheme();
 
+  const { assignedRoles, assignedRolesLoading, isDefaultRolesView } =
+    useAssignedRoles(username);
+
   const [order, setOrder] = React.useState<'asc' | 'desc'>('asc');
   const [orderBy, setOrderBy] = React.useState<OrderByKeys>('name');
   const [isInitialLoad, setIsInitialLoad] = React.useState(true);

packages/manager/src/features/IAM/Users/UserRoles/UserRoles.tsx

@@ -71,11 +71,7 @@ export const UserRoles = () => {
           >
             View and manage roles assigned to the user.
           </Typography>
-          <AssignedRolesTable
-            assignedRoles={assignedRoles}
-            assignedRolesLoading={isLoading}
-            username={username}
-          />
+          <AssignedRolesTable username={username} />
         </Paper>
       ) : (
         <NoAssignedRoles

packages/manager/src/features/IAM/hooks/useAssignedRoles.test.tsx

@@ -0,0 +1,105 @@
+import { renderHook } from '@testing-library/react';
+import { vi } from 'vitest';
+
+import {
+  userDefaultRolesFactory,
+  userRolesFactory,
+} from 'src/factories/userRoles';
+
+import { useAssignedRoles } from './useAssignedRoles';
+
+const {
+  mockUseGetDefaultDelegationAccessQuery,
+  mockUseUserRoles,
+  mockUsePermissions,
+  mockUseLocation,
+} = vi.hoisted(() => ({
+  mockUseGetDefaultDelegationAccessQuery: vi.fn(),
+  mockUseUserRoles: vi.fn(),
+  mockUsePermissions: vi.fn(),
+  mockUseLocation: vi.fn(),
+}));
+
+vi.mock('@linode/queries', () => ({
+  useGetDefaultDelegationAccessQuery: mockUseGetDefaultDelegationAccessQuery,
+  useUserRoles: mockUseUserRoles,
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+  useLocation: mockUseLocation,
+}));
+
+vi.mock('./usePermissions', () => ({
+  usePermissions: mockUsePermissions,
+}));
+
+describe('useAssignedRoles', () => {
+  const mockDefaultRolesData = userDefaultRolesFactory.build();
+  const mockUserRolesData = userRolesFactory.build();
+
+  const mockPermissions = {
+    is_account_admin: true,
+  };
+
+  const USER_ROLES_PATH = '/iam/users/testuser/roles';
+  const DEFAULT_ROLES_PATH = '/iam/roles/defaults/roles';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default mock implementations
+    mockUsePermissions.mockReturnValue({
+      data: mockPermissions,
+    });
+
+    mockUseGetDefaultDelegationAccessQuery.mockReturnValue({
+      data: mockDefaultRolesData,
+      isLoading: false,
+      error: null,
+    });
+
+    mockUseUserRoles.mockReturnValue({
+      data: mockUserRolesData,
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  describe('when on default roles view', () => {
+    beforeEach(() => {
+      mockUseLocation.mockReturnValue({
+        pathname: DEFAULT_ROLES_PATH,
+      });
+    });
+
+    it('should return default roles data when on default roles view without username', () => {
+      const { result } = renderHook(() => useAssignedRoles());
+
+      expect(result.current).toEqual({
+        assignedRoles: mockDefaultRolesData,
+        assignedRolesLoading: false,
+        assignedRolesError: null,
+        isDefaultRolesView: true,
+      });
+    });
+  });
+
+  describe('when on user roles view', () => {
+    beforeEach(() => {
+      mockUseLocation.mockReturnValue({
+        pathname: USER_ROLES_PATH,
+      });
+    });
+
+    it('should return user roles data when on user roles view', () => {
+      const { result } = renderHook(() => useAssignedRoles('testuser'));
+
+      expect(result.current).toEqual({
+        assignedRoles: mockUserRolesData,
+        assignedRolesLoading: false,
+        assignedRolesError: null,
+        isDefaultRolesView: false,
+      });
+    });
+  });
+});

packages/manager/src/features/IAM/hooks/useAssignedRoles.ts

@@ -0,0 +1,65 @@
+import {
+  useGetDefaultDelegationAccessQuery,
+  useUserRoles,
+} from '@linode/queries';
+import { useLocation } from '@tanstack/react-router';
+
+import { usePermissions } from './usePermissions';
+
+/**
+ * Custom hook for fetching assigned roles data based on the current view context.
+ *
+ * This hook automatically determines whether to fetch default delegation access data
+ * or user-specific roles data based on the current pathname. It supports both:
+ * - Default roles view: Fetches default delegation access for all users
+ * - User roles view: Fetches roles assigned to a specific user
+ *
+ * @param username - Optional username for fetching user-specific roles.
+ *                   Not required for default roles view.
+ * @returns Object containing:
+ *   - assignedRoles: The fetched roles data
+ *   - assignedRolesLoading: Loading state
+ *   - assignedRolesError: Error state if fetch fails
+ *   - isDefaultRolesView: Boolean indicating current view context
+ */
+export const useAssignedRoles = (username?: string) => {
+  const { data: permissions } = usePermissions('account', ['is_account_admin']);
+  const location = useLocation();
+  // Check if we're on the default roles view based on the current path
+  const isDefaultRolesView = location.pathname.includes(
+    '/iam/roles/defaults/roles'
+  );
+  // TODO: use useIsDefaultDelegationRolesForChildAccount when available
+  const shouldFetchDefaultRoles = isDefaultRolesView && !username;
+  const shouldFetchUserRoles =
+    !isDefaultRolesView && permissions?.is_account_admin;
+
+  const {
+    data: defaultRolesData,
+    isLoading: defaultRolesLoading,
+    error: defaultRolesError,
+  } = useGetDefaultDelegationAccessQuery(shouldFetchDefaultRoles);
+
+  const {
+    data: userRolesData,
+    isLoading: userRolesLoading,
+    error: userRolesError,
+  } = useUserRoles(username ?? '', shouldFetchUserRoles);
+
+  // Return the appropriate data based on the view
+  if (isDefaultRolesView) {
+    return {
+      assignedRoles: defaultRolesData,
+      assignedRolesLoading: defaultRolesLoading,
+      assignedRolesError: defaultRolesError,
+      isDefaultRolesView: true,
+    };
+  }
+
+  return {
+    assignedRoles: userRolesData,
+    assignedRolesLoading: userRolesLoading,
+    assignedRolesError: userRolesError,
+    isDefaultRolesView: false,
+  };
+};

packages/queries/src/iam/delegation.ts

@@ -323,12 +323,12 @@ export const useGenerateChildAccountTokenQuery = (): UseMutationResult<
  * - Audience: Child account administrators reviewing default delegate access.
  * - Data: IamUserRoles with `account_access` and `entity_access` for `GET /iam/delegation/default-role-permissions`.
  */
-export const useGetDefaultDelegationAccessQuery = (): UseQueryResult<
-  IamUserRoles,
-  APIError[]
-> => {
+export const useGetDefaultDelegationAccessQuery = (
+  enabled: boolean = true,
+): UseQueryResult<IamUserRoles, APIError[]> => {
   return useQuery<IamUserRoles, APIError[]>({
     ...delegationQueries.defaultAccess,
+    enabled,
   });
 };