feat: [UIE-9357] - IAM Delegation: Default Roles table

packages/manager/.changeset/pr-12990-upcoming-features-1761211528417.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM: Default Roles Table ([#12990](https://github.com/linode/manager/pull/12990))

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

@@ -1,18 +1,21 @@
-import { Paper, Stack, Typography } from '@linode/ui';
+import { Paper, Typography } from '@linode/ui';
 import * as React from 'react';
 
+import { AssignedRolesTable } from '../../Shared/AssignedRolesTable/AssignedRolesTable';
+
 export const DefaultRoles = () => {
   return (
     <Paper>
-      <Stack>
-        <Typography variant="h2">Default Roles for Delegate Users</Typography>
-        <Typography marginTop={2}>
-          View and manage roles to be assigned to delegate users by default.
-          Note that changes implemented here will apply to only new delegate
-          users. For existing delegate users, use their Assigned Roles page to
-          update the assignment.
-        </Typography>
-      </Stack>
+      <Typography variant="h2">Default Roles for Delegate Users</Typography>
+      <Typography mt={2}>
+        View and manage roles to be assigned to delegate users by default. Note
+        that changes implemented here will apply to only new delegate users.
+      </Typography>
+      <Typography mb={2}>
+        For existing delegate users, use their Assigned Roles page to update the
+        assignment.
+      </Typography>
+      <AssignedRolesTable />
     </Paper>
   );
 };

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

@@ -53,6 +53,9 @@
   }),
 ];
 
+const mockUserRoles = userRolesFactory.build();
+const mockAccountRoles = accountRolesFactory.build();
+
 describe('AssignedRolesTable', () => {
   beforeEach(() => {
     queryMocks.useParams.mockReturnValue({
@@ -72,11 +75,11 @@
 
   it('should display roles and menu when data is available', async () => {
     queryMocks.useUserRoles.mockReturnValue({
-      data: userRolesFactory.build(),
+      data: mockUserRoles,
     });
 
     queryMocks.useAccountRoles.mockReturnValue({
-      data: accountRolesFactory.build(),
+      data: mockAccountRoles,
     });
 
     queryMocks.useAllAccountEntities.mockReturnValue({
@@ -100,11 +103,11 @@
 
   it('should display empty state when no roles match filters', async () => {
     queryMocks.useUserRoles.mockReturnValue({
-      data: userRolesFactory.build(),
+      data: mockUserRoles,
     });
 
     queryMocks.useAccountRoles.mockReturnValue({
-      data: accountRolesFactory.build(),
+      data: mockAccountRoles,
     });
 
     queryMocks.useAllAccountEntities.mockReturnValue({
@@ -123,11 +126,11 @@
 
   it('should filter roles based on search query', async () => {
     queryMocks.useUserRoles.mockReturnValue({
-      data: userRolesFactory.build(),
+      data: mockUserRoles,
     });
 
     queryMocks.useAccountRoles.mockReturnValue({
-      data: accountRolesFactory.build(),
+      data: mockAccountRoles,
     });
 
     queryMocks.useAllAccountEntities.mockReturnValue({
@@ -146,11 +149,11 @@
 
   it('should filter roles based on selected resource type', async () => {
     queryMocks.useUserRoles.mockReturnValue({
-      data: userRolesFactory.build(),
+      data: mockUserRoles,
     });
 
     queryMocks.useAccountRoles.mockReturnValue({
-      data: accountRolesFactory.build(),
+      data: mockAccountRoles,
     });
 
     queryMocks.useAllAccountEntities.mockReturnValue({
@@ -166,4 +169,19 @@
       expect(screen.queryByText('account_firewall_creator')).toBeVisible();
     });
   });
+
+  it('should show different button text for default roles view', async () => {
+    queryMocks.useAccountRoles.mockReturnValue({
+      data: mockAccountRoles,
+    });
+
+    queryMocks.useAllAccountEntities.mockReturnValue({
+      data: mockEntities,
+    });
+
+    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

@@ -1,8 +1,12 @@
-import { useAccountRoles, useUserRoles } from '@linode/queries';
+import {
+  useAccountRoles,
+  useGetDefaultDelegationAccessQuery,
+  useUserRoles,
+} from '@linode/queries';
 import { Button, CircleProgress, Select, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
-import { useNavigate, useParams } from '@tanstack/react-router';
+import { useNavigate } from '@tanstack/react-router';
 import React from 'react';
 
 import { CollapsibleTable } from 'src/components/CollapsibleTable/CollapsibleTable';
@@ -17,6 +21,7 @@ import { TableSortCell } from 'src/components/TableSortCell/TableSortCell';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 import { useAllAccountEntities } from 'src/queries/entities/entities';
 
+import { useIsDefaultDelegationRolesForChildAccount } from '../../hooks/useDelegationRole';
 import { usePermissions } from '../../hooks/usePermissions';
 import { AssignedEntities } from '../../Users/UserRoles/AssignedEntities';
 import { AssignNewRoleDrawer } from '../../Users/UserRoles/AssignNewRoleDrawer';
@@ -65,9 +70,11 @@ const ALL_ROLES_OPTION: SelectOption = {
   label: 'All Assigned Roles',
   value: 'all',
 };
-
-export const AssignedRolesTable = () => {
-  const { username } = useParams({ from: '/iam/users/$username' });
+interface Props {
+  username?: string;
+}
+export const AssignedRolesTable = (props: Props) => {
+  const { username } = props;
   const navigate = useNavigate();
   const theme = useTheme();
 
@@ -76,8 +83,33 @@ export const AssignedRolesTable = () => {
   const [isInitialLoad, setIsInitialLoad] = React.useState(true);
   const { data: permissions } = usePermissions('account', ['is_account_admin']);
 
+  // Determine if we're on the default roles view based on delegation role and path
+  const { isDefaultDelegationRolesForChildAccount } =
+    useIsDefaultDelegationRolesForChildAccount();
+
+  const shouldFetchDefaultRoles =
+    isDefaultDelegationRolesForChildAccount && !username;
+  const shouldFetchUserRoles =
+    !isDefaultDelegationRolesForChildAccount && permissions?.is_account_admin;
+
+  const { data: defaultRolesData, isLoading: defaultRolesLoading } =
+    useGetDefaultDelegationAccessQuery({ enabled: shouldFetchDefaultRoles });
+
+  const { data: userRolesData, isLoading: userRolesLoading } = useUserRoles(
+    username ?? '',
+    shouldFetchUserRoles
+  );
+
+  const assignedRoles = isDefaultDelegationRolesForChildAccount
+    ? defaultRolesData
+    : userRolesData;
+  const assignedRolesLoading = isDefaultDelegationRolesForChildAccount
+    ? defaultRolesLoading
+    : userRolesLoading;
   const pagination = usePaginationV2({
-    currentRoute: '/iam/users/$username/roles',
+    currentRoute: isDefaultDelegationRolesForChildAccount
+      ? '/iam/roles/defaults/roles'
+      : '/iam/users/$username/roles',
     initialPage: 1,
     preferenceKey: ASSIGNED_ROLES_TABLE_PREFERENCE_KEY,
   });
@@ -139,9 +171,6 @@ export const AssignedRolesTable = () => {
     {}
   );
 
-  const { data: assignedRoles, isLoading: assignedRolesLoading } = useUserRoles(
-    username ?? ''
-  );
   const { filterableOptions, roles } = React.useMemo(() => {
     if (!assignedRoles || !accountRoles) {
       return { filterableOptions: [], roles: [] };
@@ -174,7 +203,7 @@ export const AssignedRolesTable = () => {
     const selectedRole = roleName;
     navigate({
       to: '/iam/users/$username/entities',
-      params: { username },
+      params: { username: username || '' },
       search: { selectedRole },
     });
   };
@@ -388,7 +417,9 @@ export const AssignedRolesTable = () => {
                 : undefined
             }
           >
-            Assign New Roles
+            {isDefaultDelegationRolesForChildAccount
+              ? 'Add New Default Roles'
+              : 'Assign New Roles'}
           </Button>
         </Grid>
       </Grid>
@@ -401,24 +432,33 @@ export const AssignedRolesTable = () => {
       />
       <AssignNewRoleDrawer
         assignedRoles={assignedRoles}
+        isDefaultRolesView={isDefaultDelegationRolesForChildAccount}
         onClose={() => setIsAssignNewRoleDrawerOpen(false)}
         open={isAssignNewRoleDrawerOpen}
+        username={username}
       />
       <ChangeRoleDrawer
+        assignedRoles={assignedRoles}
+        isDefaultRolesView={isDefaultDelegationRolesForChildAccount}
         mode={drawerMode}
         onClose={() => setIsChangeRoleDrawerOpen(false)}
         open={isChangeRoleDrawerOpen}
         role={selectedRole}
+        username={username}
       />
       <UnassignRoleConfirmationDialog
+        assignedRoles={assignedRoles}
+        isDefaultRolesView={isDefaultDelegationRolesForChildAccount}
         onClose={() => setIsUnassignRoleDialogOpen(false)}
         open={isUnassignRoleDialogOpen}
         role={selectedRole}
+        username={username}
       />
       <UpdateEntitiesDrawer
         onClose={() => setIsUpdateEntitiesDrawerOpen(false)}
         open={isUpdateEntitiesDrawerOpen}
         role={selectedRole}
+        username={username}
       />
       <RemoveAssignmentConfirmationDialog
         onClose={() => setIsRemoveAssignmentDialogOpen(false)}

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

@@ -1,6 +1,6 @@
 import {
   useAccountRoles,
-  useUserRoles,
+  useUpdateDefaultDelegationAccessQuery,
   useUserRolesMutation,
 } from '@linode/queries';
 import {
@@ -11,7 +11,6 @@ import {
   Typography,
 } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
-import { useParams } from '@tanstack/react-router';
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
@@ -30,24 +29,36 @@ import {
 
 import type { DrawerModes, EntitiesOption, ExtendedRoleView } from '../types';
 import type { RolesType } from '../utilities';
+import type { IamUserRoles } from '@linode/api-v4';
 
 interface Props {
+  assignedRoles?: IamUserRoles;
+  isDefaultRolesView?: boolean;
   mode: DrawerModes;
   onClose: () => void;
   open: boolean;
   role: ExtendedRoleView | undefined;
+  username?: string;
 }
 
-export const ChangeRoleDrawer = ({ mode, onClose, open, role }: Props) => {
+export const ChangeRoleDrawer = ({
+  mode,
+  onClose,
+  open,
+  role,
+  username,
+  assignedRoles,
+  isDefaultRolesView,
+}: Props) => {
   const theme = useTheme();
-  const { username } = useParams({ from: '/iam/users/$username' });
 
   const { data: accountRoles, isLoading: accountPermissionsLoading } =
     useAccountRoles();
 
-  const { data: assignedRoles } = useUserRoles(username ?? '');
+  const { mutateAsync: updateUserRoles } = useUserRolesMutation(username || '');
 
-  const { mutateAsync: updateUserRoles } = useUserRolesMutation(username);
+  const { mutateAsync: updateDefaultRoles } =
+    useUpdateDefaultDelegationAccessQuery();
 
   const formattedAssignedEntities: EntitiesOption[] = React.useMemo(() => {
     if (!role || !role.entity_names || !role.entity_ids) {
@@ -132,7 +143,11 @@ export const ChangeRoleDrawer = ({ mode, onClose, open, role }: Props) => {
         newRole,
       });
 
-      await updateUserRoles(updatedUserRoles);
+      if (isDefaultRolesView) {
+        await updateDefaultRoles(updatedUserRoles);
+      } else {
+        await updateUserRoles(updatedUserRoles);
+      }
 
       handleClose();
     } catch (errors) {