feat: [UIE-8140, UIE-8662, UIE-8769] - IAM RBAC: fix bugs for the drawer (#12227)

* feat: [UIE-8140, UIE-8662, UIE-8769] - IAM RBAC: fix bugs for the drawer

* Added changeset: IAM RBAC: fix bugs in the assign new roles drawer

* fix styles after updating to mui v7

---------

Co-authored-by: cpathipa <[email protected]>

Author: aaleksee-akamai

packages/manager/.changeset/pr-12227-upcoming-features-1747318764898.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM RBAC: fix bugs in the assign new roles drawer ([#12227](https://github.com/linode/manager/pull/12227))

packages/manager/src/features/IAM/Roles/RolesTable/RolesTableExpandedRow.test.tsx

@@ -13,6 +13,6 @@ describe('RolesTableExpandedRow', () => {
   it('renders when used', () => {
     renderWithTheme(<RolesTableExpandedRow permissions={[]} />);
 
-    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByText('Permissions')).toBeVisible();
   });
 });

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

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -26,6 +26,7 @@ const mockEntities = [
   accountEntityFactory.build({
     id: 7,
     type: 'linode',
+    label: 'linode',
   }),
   accountEntityFactory.build({
     id: 1,
@@ -102,6 +103,34 @@ describe('Entities', () => {
     expect(autocomplete).toHaveLength(1);
     expect(autocomplete[0]).toBeVisible();
     expect(autocomplete[0]).toHaveAttribute('placeholder', 'None');
+    const link = screen.getByRole('link', { name: /Create an Image Entity/i });
+    expect(link).toBeVisible();
+  });
+
+  it('renders correct data when it is an entity access', () => {
+    queryMocks.useAccountEntities.mockReturnValue({
+      data: makeResourcePage(mockEntities),
+    });
+
+    renderWithTheme(
+      <Entities
+        access="entity_access"
+        mode="assign-role"
+        onChange={mockOnChange}
+        type="vpc"
+        value={mockValue}
+      />
+    );
+
+    expect(screen.getByText('Entities')).toBeVisible();
+
+    // Verify comboboxes exist
+    const autocomplete = screen.getAllByRole('combobox');
+    expect(autocomplete).toHaveLength(1);
+    expect(autocomplete[0]).toBeVisible();
+    expect(autocomplete[0]).toHaveAttribute('placeholder', 'None');
+    const link = screen.getByRole('link', { name: /Create a VPC Entity/i });
+    expect(link).toBeVisible();
   });
 
   it('renders correct options in Autocomplete dropdown when it is an entity access', async () => {
@@ -126,7 +155,11 @@ describe('Entities', () => {
     expect(screen.getByText('firewall-1')).toBeVisible();
   });
 
-  it('updates selected options when Autocomplete value changes when it is an entity access', () => {
+  it('updates selected options when Autocomplete value changes when it is an entity access', async () => {
+    queryMocks.useAccountEntities.mockReturnValue({
+      data: makeResourcePage(mockEntities),
+    });
+
     renderWithTheme(
       <Entities
         access="entity_access"
@@ -138,9 +171,8 @@ describe('Entities', () => {
     );
 
     const autocomplete = screen.getAllByRole('combobox')[0];
-    fireEvent.change(autocomplete, { target: { value: 'linode7' } });
-    fireEvent.keyDown(autocomplete, { key: 'Enter' });
-    expect(screen.getByText('test-1')).toBeVisible();
+    await userEvent.click(autocomplete);
+    expect(screen.getByText('linode')).toBeVisible();
   });
 
   it('renders Autocomplete as readonly when mode is "change-role"', () => {

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

@@ -116,7 +116,8 @@ export const Entities = ({
         <Notice spacingBottom={0} spacingTop={8} variant="warning">
           <Typography fontSize="inherit">
             <Link to={getCreateLinkForEntityType(type)}>
-              Create a {getFormattedEntityType(type)} Entity
+              Create {type === 'image' ? `an` : `a`}{' '}
+              {getFormattedEntityType(type)} Entity{' '}
             </Link>{' '}
             first or choose a different role to continue assignment.
           </Typography>

packages/manager/src/features/IAM/Shared/Permissions/Permissions.style.ts

@@ -1,23 +1,19 @@
 import { Box, Typography } from '@linode/ui';
-import { GridLegacy } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-export const sxTooltipIcon = {
-  marginLeft: 1,
-  padding: 0,
-};
-
-export const StyledGrid = styled(GridLegacy, { label: 'StyledGrid' })(() => ({
-  alignItems: 'center',
-  marginBottom: 2,
-}));
+export const StyledTitle = styled(Typography, { label: 'StyledTitle' })(
+  ({ theme }) => ({
+    font: theme.tokens.alias.Typography.Label.Bold.S,
+    marginBottom: theme.tokens.spacing.S4,
+  })
+);
 
 export const StyledPermissionItem = styled(Typography, {
   label: 'StyledPermissionItem',
 })(({ theme }) => ({
   borderRight: `1px solid ${theme.tokens.alias.Border.Normal}`,
   display: 'inline-block',
-  padding: `0px ${theme.spacing(0.75)} ${theme.spacing(0.25)}`,
+  padding: `0px ${theme.tokens.spacing.S6} ${theme.tokens.spacing.S2}`,
 }));
 
 export const StyledContainer = styled('div', {

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

@@ -1,4 +1,4 @@
-import { StyledLinkButton, TooltipIcon, Typography } from '@linode/ui';
+import { StyledLinkButton, Typography } from '@linode/ui';
 import { debounce } from '@mui/material';
 import { Grid } from '@mui/material';
 import * as React from 'react';
@@ -8,9 +8,8 @@ import {
   StyledBox,
   StyledClampedContent,
   StyledContainer,
-  StyledGrid,
   StyledPermissionItem,
-  sxTooltipIcon,
+  StyledTitle,
 } from './Permissions.style';
 
 import type { PermissionType } from '@linode/api-v4/lib/iam/types';
@@ -43,24 +42,9 @@ export const Permissions = ({ permissions }: Props) => {
     };
   }, [calculateHiddenItems, handleResize]);
 
-  // TODO: update the link for TooltipIcon when it's ready - UIE-8534
   return (
     <Grid container data-testid="parent" direction="column">
-      <StyledGrid container item md={1}>
-        <Typography
-          sx={(theme) => ({
-            font: theme.tokens.alias.Typography.Label.Bold.S,
-          })}
-        >
-          Permissions
-        </Typography>
-
-        <TooltipIcon
-          status="help"
-          sxTooltipIcon={sxTooltipIcon}
-          text="Link is coming..."
-        />
-      </StyledGrid>
+      <StyledTitle>Permissions</StyledTitle>
       {!permissions.length ? (
         <Typography>
           This role doesn’t include permissions. Refer to the role description

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

@@ -1,6 +1,7 @@
-import { ActionsPanel, Drawer, Typography } from '@linode/ui';
+import { ActionsPanel, Drawer, Notice, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
+import { enqueueSnackbar } from 'notistack';
 import React, { useState } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
@@ -46,7 +47,7 @@ export const AssignNewRoleDrawer = ({ onClose, open }: Props) => {
     },
   });
 
-  const { control, handleSubmit, reset, watch } = form;
+  const { control, handleSubmit, reset, watch, formState, setError } = form;
   const { append, fields, remove } = useFieldArray({
     control,
     name: 'roles',
@@ -64,16 +65,24 @@ export const AssignNewRoleDrawer = ({ onClose, open }: Props) => {
     return getAllRoles(accountPermissions);
   }, [accountPermissions]);
 
-  const { mutateAsync: updateUserRolePermissions } =
+  const { mutateAsync: updateUserRolePermissions, isPending } =
     useAccountUserPermissionsMutation(username);
 
   const onSubmit = handleSubmit(async (values: AssignNewRoleFormValues) => {
-    const mergedRoles = mergeAssignedRolesIntoExistingRoles(
-      values,
-      existingRoles
-    );
-    await updateUserRolePermissions(mergedRoles);
-    handleClose();
+    try {
+      const mergedRoles = mergeAssignedRolesIntoExistingRoles(
+        values,
+        existingRoles
+      );
+
+      await updateUserRolePermissions(mergedRoles);
+      enqueueSnackbar(`Roles added.`, {
+        variant: 'success',
+      });
+      handleClose();
+    } catch (error) {
+      setError(error.field ?? 'root', { message: error[0].reason });
+    }
   });
 
   const handleClose = () => {
@@ -84,10 +93,19 @@ export const AssignNewRoleDrawer = ({ onClose, open }: Props) => {
   // TODO - add a link 'Learn more" - UIE-8534
   return (
     <Drawer onClose={onClose} open={open} title="Assign New Roles">
-      {' '}
       <FormProvider {...form}>
         <form onSubmit={onSubmit}>
-          <Typography sx={{ marginBottom: 3 }}>
+          {formState.errors.root?.message && (
+            <Notice variant="error">
+              <Typography>
+                Internal Error - Issue with updating permissions.
+                <br />
+                No changes were saved.
+              </Typography>
+            </Notice>
+          )}
+
+          <Typography sx={{ marginBottom: 2.5 }}>
             Select a role you want to assign to a user. Some roles require
             selecting entities they should apply to. Configure the first role
             and continue adding roles or save the assignment.
@@ -139,6 +157,7 @@ export const AssignNewRoleDrawer = ({ onClose, open }: Props) => {
               'data-testid': 'submit',
               label: 'Assign',
               type: 'submit',
+              loading: formState.isSubmitting || isPending,
             }}
             secondaryButtonProps={{
               'data-testid': 'cancel',

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

@@ -30,7 +30,10 @@ export const AssignSingleRole = ({
 }: Props) => {
   const theme = useTheme();
 
-  const { control } = useFormContext<AssignNewRoleFormValues>();
+  const { control, watch, setValue } =
+    useFormContext<AssignNewRoleFormValues>();
+  const role = watch(`roles.${index}.role`);
+  const roles = watch('roles');
 
   return (
     <Box display="flex">
@@ -46,39 +49,63 @@ export const AssignSingleRole = ({
 
         <Controller
           control={control}
-          name={`roles.${index}`}
-          render={({ field: { onChange, value } }) => (
-            <>
-              <Autocomplete
-                label="Assign New Roles"
-                onChange={(event, newValue) => {
-                  onChange({
-                    ...value,
-                    role: newValue,
-                  });
-                }}
-                options={options}
-                placeholder="Select a Role"
-                textFieldProps={{ hideLabel: true }}
-                value={value?.role || null}
-              />
-              {value?.role && (
-                <AssignedPermissionsPanel
-                  hideDetails={hideDetails}
-                  mode="assign-role"
-                  onChange={(updatedEntities) => {
-                    onChange({
-                      ...value,
-                      entities: updatedEntities,
-                    });
-                  }}
-                  role={getRoleByName(permissions, value.role?.value)!}
-                  value={value.entities || []}
-                />
-              )}
-            </>
+          name={`roles.${index}.role`}
+          render={({ field: { onChange, value }, fieldState }) => (
+            <Autocomplete
+              errorText={fieldState.error?.message}
+              label="Assign New Roles"
+              onChange={(event, newValue) => {
+                onChange(newValue);
+                setValue(`roles.${index}.entities`, null);
+              }}
+              options={options}
+              placeholder="Select a Role"
+              textFieldProps={{ hideLabel: true }}
+              value={value || null}
+            />
           )}
+          rules={{
+            validate: (value) => {
+              if (!value) {
+                return roles.length === 1
+                  ? 'Select a role.'
+                  : 'Select a role or remove this entry.';
+              }
+              return true;
+            },
+          }}
         />
+
+        {role && (
+          <Controller
+            control={control}
+            name={`roles.${index}.entities`}
+            render={({ field: { onChange, value }, fieldState }) => (
+              <AssignedPermissionsPanel
+                errorText={fieldState.error?.message}
+                hideDetails={hideDetails}
+                mode="assign-role"
+                onChange={(updatedEntities) => {
+                  onChange(updatedEntities);
+                }}
+                role={getRoleByName(permissions, role?.value)!}
+                value={value || []}
+              />
+            )}
+            rules={{
+              validate: (value) => {
+                if (role.access === 'account_access') return true;
+                if (
+                  role.access === 'entity_access' &&
+                  (!value || value.length === 0)
+                ) {
+                  return 'Select entities.';
+                }
+                return true;
+              },
+            }}
+          />
+        )}
       </Box>
       <Box
         sx={{
@@ -91,7 +118,7 @@ export const AssignSingleRole = ({
           verticalAlign: 'top',
         }}
       >
-        <Button disabled={index === 0} onClick={() => onRemove(index)}>
+        <Button disabled={roles.length === 1} onClick={() => onRemove(index)}>
           <DeleteIcon />
         </Button>
       </Box>