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

packages/manager/src/features/IAM/Shared/AssignedEntitiesTable/ChangeRoleForEntityDrawer.test.tsx

@@ -11,7 +11,7 @@ import { ChangeRoleForEntityDrawer } from '../../Shared/AssignedEntitiesTable/Ch
 import type { EntitiesRole } from '../../Shared/types';
 
 const queryMocks = vi.hoisted(() => ({
-  useParams: vi.fn().mockReturnValue({}),
+  useParams: vi.fn().mockReturnValue({ username: 'test_user' }),
   useAccountRoles: vi.fn().mockReturnValue({}),
   useUserRoles: vi.fn().mockReturnValue({}),
 }));
@@ -47,6 +47,7 @@ const props = {
   onClose: vi.fn(),
   open: true,
   role: mockRole,
+  username: 'test_user',
 };
 
 const mockUpdateUserRole = vi.fn();

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

@@ -6,7 +6,7 @@ import {
 import { Button, CircleProgress, Select, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
-import { useNavigate } from '@tanstack/react-router';
+import { useNavigate, useParams } from '@tanstack/react-router';
 import React from 'react';
 
 import { CollapsibleTable } from 'src/components/CollapsibleTable/CollapsibleTable';
@@ -70,11 +70,8 @@ const ALL_ROLES_OPTION: SelectOption = {
   label: 'All Assigned Roles',
   value: 'all',
 };
-interface Props {
-  username?: string;
-}
-export const AssignedRolesTable = (props: Props) => {
-  const { username } = props;
+export const AssignedRolesTable = () => {
+  const { username } = useParams({ strict: false });
   const navigate = useNavigate();
   const theme = useTheme();
 
@@ -431,26 +428,22 @@ export const AssignedRolesTable = (props: Props) => {
         assignedRoles={assignedRoles}
         onClose={() => setIsAssignNewRoleDrawerOpen(false)}
         open={isAssignNewRoleDrawerOpen}
-        username={username}
       />
       <ChangeRoleDrawer
         mode={drawerMode}
         onClose={() => setIsChangeRoleDrawerOpen(false)}
         open={isChangeRoleDrawerOpen}
         role={selectedRole}
-        username={username}
       />
       <UnassignRoleConfirmationDialog
         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

@@ -13,6 +13,7 @@ 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';
 
@@ -38,18 +39,11 @@ interface Props {
   onClose: () => void;
   open: boolean;
   role: ExtendedRoleView | undefined;
-  username?: string;
 }
 
-export const ChangeRoleDrawer = ({
-  mode,
-  onClose,
-  open,
-  role,
-  username,
-}: Props) => {
+export const ChangeRoleDrawer = ({ mode, onClose, open, role }: Props) => {
   const theme = useTheme();
-
+  const { username } = useParams({ strict: false });
   const { data: accountRoles, isLoading: accountPermissionsLoading } =
     useAccountRoles();
 
@@ -67,7 +61,10 @@ export const ChangeRoleDrawer = ({
   const assignedRoles = isDefaultDelegationRolesForChildAccount
     ? defaultRolesData
     : userRolesData;
-  const { mutateAsync: updateUserRoles } = useUserRolesMutation(username || '');
+  const { mutateAsync: updateUserRoles } = useUserRolesMutation(
+    username,
+    Boolean(username)
+  );
 
   const { mutateAsync: updateDefaultRoles } =
     useUpdateDefaultDelegationAccessQuery();

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

@@ -25,11 +25,10 @@ const props = {
   onSuccess: vi.fn(),
   open: true,
   role: mockRole,
-  username: 'test_user',
 };
 
 const queryMocks = vi.hoisted(() => ({
-  useParams: vi.fn().mockReturnValue({}),
+  useParams: vi.fn().mockReturnValue({ username: 'test_user' }),
   useAccountRoles: vi.fn().mockReturnValue({}),
   useUserRoles: vi.fn().mockReturnValue({}),
 }));

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

@@ -5,6 +5,7 @@ import {
   useUserRolesMutation,
 } from '@linode/queries';
 import { ActionsPanel, Notice, Typography } from '@linode/ui';
+import { useParams } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import React from 'react';
 
@@ -20,12 +21,12 @@ interface Props {
   onSuccess?: () => void;
   open: boolean;
   role: ExtendedRoleView | undefined;
-  username?: string;
 }
 
 export const UnassignRoleConfirmationDialog = (props: Props) => {
-  const { onClose: _onClose, onSuccess, open, role, username } = props;
+  const { onClose: _onClose, onSuccess, open, role } = props;
   const { enqueueSnackbar } = useSnackbar();
+  const { username } = useParams({ strict: false });
   const { isDefaultDelegationRolesForChildAccount } =
     useIsDefaultDelegationRolesForChildAccount();
   const { data: defaultRolesData } = useGetDefaultDelegationAccessQuery({
@@ -45,11 +46,15 @@ export const UnassignRoleConfirmationDialog = (props: Props) => {
     isPending,
     mutateAsync: updateUserRoles,
     reset,
-  } = useUserRolesMutation(username || '');
+  } = useUserRolesMutation(username, Boolean(username));
 
   const { mutateAsync: updateDefaultRoles, isPending: isDefaultRolesPending } =
     useUpdateDefaultDelegationAccessQuery();
 
+  const mutationFn = isDefaultDelegationRolesForChildAccount
+    ? updateDefaultRoles
+    : updateUserRoles;
+
   const onClose = () => {
     reset(); // resets the error state of the useMutation
     _onClose();
@@ -65,11 +70,7 @@ export const UnassignRoleConfirmationDialog = (props: Props) => {
       initialRole,
     });
 
-    if (isDefaultDelegationRolesForChildAccount) {
-      await updateDefaultRoles(updatedUserRoles);
-    } else {
-      await updateUserRoles(updatedUserRoles);
-    }
+    await mutationFn(updatedUserRoles);
 
     enqueueSnackbar(`Role ${role?.name} has been deleted successfully.`, {
       variant: 'success',

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

@@ -1,9 +1,16 @@
-import { useUserRoles, useUserRolesMutation } from '@linode/queries';
+import {
+  useGetDefaultDelegationAccessQuery,
+  useUpdateDefaultDelegationAccessQuery,
+  useUserRoles,
+  useUserRolesMutation,
+} from '@linode/queries';
 import { ActionsPanel, Drawer, Notice, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
+import { useParams } from '@tanstack/react-router';
 import React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 
+import { useIsDefaultDelegationRolesForChildAccount } from '../../hooks/useDelegationRole';
 import { AssignedPermissionsPanel } from '../AssignedPermissionsPanel/AssignedPermissionsPanel';
 import { INTERNAL_ERROR_NO_CHANGES_SAVED } from '../constants';
 import { toEntityAccess } from '../utilities';
@@ -16,20 +23,36 @@ interface Props {
   onClose: () => void;
   open: boolean;
   role: ExtendedRoleView | undefined;
-  username?: string;
 }
 
-export const UpdateEntitiesDrawer = ({
-  onClose,
-  open,
-  role,
-  username,
-}: Props) => {
+export const UpdateEntitiesDrawer = ({ onClose, open, role }: Props) => {
   const theme = useTheme();
+  const { username } = useParams({ strict: false });
+  const { isDefaultDelegationRolesForChildAccount } =
+    useIsDefaultDelegationRolesForChildAccount();
+  const { data: defaultRolesData } = useGetDefaultDelegationAccessQuery({
+    enabled: isDefaultDelegationRolesForChildAccount,
+  });
+
+  const { data: userRolesData } = useUserRoles(
+    username ?? '',
+    !isDefaultDelegationRolesForChildAccount
+  );
+
+  const assignedRoles = isDefaultDelegationRolesForChildAccount
+    ? defaultRolesData
+    : userRolesData;
+  const { mutateAsync: updateUserRoles } = useUserRolesMutation(
+    username,
+    Boolean(username)
+  );
 
-  const { data: assignedRoles } = useUserRoles(username ?? '');
+  const { mutateAsync: updateDefaultRoles } =
+    useUpdateDefaultDelegationAccessQuery();
 
-  const { mutateAsync: updateUserRoles } = useUserRolesMutation(username || '');
+  const mutationFn = isDefaultDelegationRolesForChildAccount
+    ? updateDefaultRoles
+    : updateUserRoles;
 
   const formattedAssignedEntities: EntitiesOption[] = React.useMemo(() => {
     if (!role || !role.entity_names || !role.entity_ids) {
@@ -88,7 +111,7 @@ export const UpdateEntitiesDrawer = ({
         role!.entity_type
       );
 
-      await updateUserRoles({
+      await mutationFn({
         ...assignedRoles!,
         entity_access: entityAccess,
       });

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

@@ -23,6 +23,7 @@ const props = {
   onSuccess: vi.fn(),
   open: true,
   role: mockRole,
+  username: 'test_user',
 };
 
 const queryMocks = vi.hoisted(() => ({

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

@@ -52,7 +52,6 @@ const props = {
     account_access: [mockAccountAccessRole.id],
     entity_access: [],
   } as IamUserRoles,
-  username: 'test_user',
 };
 
 const mockUpdateUserRole = vi.fn();

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

@@ -15,6 +15,7 @@ import {
 } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
+import { useParams } from '@tanstack/react-router';
 import { enqueueSnackbar } from 'notistack';
 import React, { useEffect, useState } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
@@ -42,18 +43,16 @@ interface Props {
   assignedRoles?: IamUserRoles;
   onClose: () => void;
   open: boolean;
-  username?: string;
 }
 
 export const AssignNewRoleDrawer = ({
   assignedRoles,
-  username,
   onClose,
   open,
 }: Props) => {
   const theme = useTheme();
   const queryClient = useQueryClient();
-
+  const { username } = useParams({ strict: false });
   const { data: accountRoles } = useAccountRoles();
   const { isDefaultDelegationRolesForChildAccount } =
     useIsDefaultDelegationRolesForChildAccount();
@@ -100,23 +99,17 @@ export const AssignNewRoleDrawer = ({
   }, [accountRoles, assignedRoles]);
 
   const { mutateAsync: updateUserRoles, isPending: isUserRolesPending } =
-    useUserRolesMutation(username || '');
+    useUserRolesMutation(username, Boolean(username));
 
   const { mutateAsync: updateDefaultRoles, isPending: isDefaultRolesPending } =
     useUpdateDefaultDelegationAccessQuery();
 
   const onSubmit = async (values: AssignNewRoleFormValues) => {
     try {
-      const queryKey = iamQueries.user(username ?? '')._ctx.roles.queryKey;
-      const currentRoles = queryClient.getQueryData<IamUserRoles>(queryKey);
-      const currentDefaultRoles = queryClient.getQueryData<IamUserRoles>(
-        delegationQueries.defaultAccess.queryKey
-      );
-      const mergedRoles = mergeAssignedRolesIntoExistingRoles(
-        values,
-        structuredClone(currentRoles)
-      );
       if (isDefaultDelegationRolesForChildAccount) {
+        const currentDefaultRoles = queryClient.getQueryData<IamUserRoles>(
+          delegationQueries.defaultAccess.queryKey
+        );
         const mergedDefaultRoles = mergeAssignedRolesIntoExistingRoles(
           values,
           structuredClone(currentDefaultRoles)
@@ -126,6 +119,13 @@ export const AssignNewRoleDrawer = ({
         if (!username) {
           return;
         }
+        const queryKey = iamQueries.user(username ?? '')._ctx.roles.queryKey;
+        const currentRoles = queryClient.getQueryData<IamUserRoles>(queryKey);
+
+        const mergedRoles = mergeAssignedRolesIntoExistingRoles(
+          values,
+          structuredClone(currentRoles)
+        );
         await updateUserRoles(mergedRoles);
       }
       enqueueSnackbar(`Roles added.`, { variant: 'success' });

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

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

packages/queries/src/iam/iam.ts

@@ -30,15 +30,26 @@ export const useAccountRoles = (enabled = true) => {
   });
 };
 
-export const useUserRolesMutation = (username: string) => {
+export const useUserRolesMutation = (
+  username?: string,
+  enabled: boolean = true,
+) => {
   const queryClient = useQueryClient();
+
   return useMutation<IamUserRoles, APIError[], IamUserRoles>({
-    mutationFn: (data) => updateUserRoles(username, data),
+    mutationFn: (data) => {
+      if (!username) {
+        throw new Error('Username is required');
+      }
+      return updateUserRoles(username, data);
+    },
     onSuccess: (role) => {
-      queryClient.setQueryData<IamUserRoles>(
-        iamQueries.user(username)._ctx.roles.queryKey,
-        role,
-      );
+      if (username && enabled) {
+        queryClient.setQueryData<IamUserRoles>(
+          iamQueries.user(username)._ctx.roles.queryKey,
+          role,
+        );
+      }
     },
   });
 };