feat: [UIE-8140] - IAM RBAC - Assign New Roles drawer update

[rodonnel-akamai]

Description 📝

Adding in the functionality behind the Assign New Roles drawer for a single user

Changes 🔄

List any change(s) relevant to the reviewer.

• Added Autocomplete for multiple roles to be selected
• Allow user to add and remove roles within the drawer

Does not include (will be introduced in a future PR - TODO are listed in code):

• Actual backend call - merely logs the results of the user selection when Assign is clicked
• Link for help text
• "Hide details" link, whose behavior is still not completely defined

Target release date 🗓️

(dev)

Preview 📷

Include a screenshot or screen recording of the change.

🔒 Use the Mask Sensitive Data setting for security.

💡 Use <video src="" /> tag when including recordings in table.

Before (Figma)	After

How to test 🧪

Prerequisites

(How to setup test environment)

• Ensure the Identity and Access Beta flag is enabled in dev tools
• Ensure the MSW is enabled in dev tools
• Click on the any username in the users table and go to the tab Assigned Roles or click on the user's menu View User Roles
• Click on Assign New Role

Verification steps

(How to verify changes)

• Confirm drawer opens
• Multiple roles can be selected and removed

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[jaalah-akamai]

@rodonnel-akamai I tried to explain things as thoroughly as I could this time around since you've asked. There may be some gaps in what I suggested, but read our docs and look at some other examples already in IAM. Happy to clarify any questions! 👍

[jaalah-akamai]

We're going to want to refactor this to use React Hook Form so a lot of this is going to change.

Essentially, you'll want to do something like:

const form = useForm<AssignNewRoleFormValues>({
  defaultValues: {
    roles: [{ role: null }],
  },
});

// shared/utilities
export interface AssignNewRoleFormValues {
  roles: {
    role: RolesType | null;
  }[];
}

[jaalah-akamai]

Removing roles will be handled by remove handler provided by RHF

  const { control, handleSubmit, watch, reset } = form;
  const { append, fields, remove } = useFieldArray({
    control,
    name: 'roles',
  });

  // We want to watch changes to this value since we're conditionally rendering "Add another role"
  const roles = watch('roles');

[jaalah-akamai]

Now that we're getting the roles from our RHF fields, this will have to change:

fields.map((field, index) => (
  <AssignSingleRole
    index={index}
    key={field.id}
    onRemove={() => remove(index)}
    options={allRoles}
    permissions={accountPermissions}
    selectedOption={field.role}
  />
))}

[jaalah-akamai]

Use values from RHF
values.roles.map((r) => r.role).filter(Boolean)

[jaalah-akamai]

Use the roles that we're watching:

{roles.length > 0 && roles.every((field) => field.role) && (

[jaalah-akamai]

We can use the built in append:

<LinkButton onClick={() => append({ role: null })}>

[jaalah-akamai]

There will no need for selectedOption anymore with RHF

[jaalah-akamai]

We can just inline this now that things are simpler:

<AssignedPermissionsPanel
  role={getRoleByName(permissions, value.value)}
/>

[jaalah-akamai]

In addition, we'll need to pass down the control via context:

const { control } = useFormContext<AssignNewRoleFormValues>();

[jaalah-akamai]

We'll need to wrap this in a Controller from RHF so that it can update the parent fields:

<Controller
  render={({ field: { onChange, value } }) => (
    <>
      <Autocomplete
        onChange={(event, newValue) => {
          onChange(newValue);
        }}
        renderOption={(props, option) => (
          <li {...props} key={option.label}>
            {option.label}
          </li>
        )}
        label="Assign New Roles"
        options={options}
        placeholder="Select a Role"
        textFieldProps={{ hideLabel: true }}
        value={value || null}
      />
      {value && (
        <AssignedPermissionsPanel
          role={getRoleByName(permissions, value.value)}
        />
      )}
    </>
  )}
  control={control}
  name={`roles.${index}.role`}
/>

[jaalah-akamai]

Same thing with spacing tokens

[jaalah-akamai]

I'd petition UX to revisit having an X button that's always disabled rather than just not showing it. Less code, cleaner, and better accessibility.

[dwiley-akamai]

Do you have the ESLint extension on the IDE you are using?

[dwiley-akamai]

Suggested change

	display={'flex'}
	flexDirection={'column'}
	display="flex"
	flexDirection="column"

[dwiley-akamai]

Suggested change

	<Divider
	sx={(theme) => ({
	marginBottom: theme.spacing(1.5),
	})}
	></Divider>
	<Divider
	sx={(theme) => ({
	marginBottom: theme.spacing(1.5),
	})}
	/>

[aaleksee-akamai]

@jaalah-akamai thanks a lot for such a detailed explanation - it helped a lot! I’ve updated this PR according to your comments.

[cpathipa]

@aaleksee-akamai This looks much better now. Thank you for addressing the feedback.

[github-actions]

Coverage Report: ✅
Base Coverage: 79.96%
Current Coverage: 79.96%

[aaleksee-akamai]

@cpathipa , I've resolved conflicts

[linode-gh-bot]

Cloud Manager UI test results

🎉 539 passing tests on test run #9 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	539 Passing	3 Skipped	113m 50s