Merge pull request #12062 from aaleksee-akamai/UIE-8672-fix-empty-state

feat: [UIE-8672, UIE-8702, UIE-8703] - IAM RBAC: fix bugs

Author: cpathipa

packages/manager/.changeset/pr-12062-upcoming-features-1744990576571.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM RBAC: Fix bugs in the Entities component and the loading state for tabs ([#12062](https://github.com/linode/manager/pull/12062))

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

@@ -6,14 +6,9 @@ import { Link } from 'src/components/Link';
 
 import { Entities } from '../Entities/Entities';
 import { Permissions } from '../Permissions/Permissions';
-import {
-  type DrawerModes,
-  type EntitiesOption,
-  type ExtendedRole,
-  type ExtendedRoleMap,
-  getFacadeRoleDescription,
-} from '../utilities';
 
+import type { EntitiesOption } from '../types';
+import { getFacadeRoleDescription, type DrawerModes, type ExtendedRole, type ExtendedRoleMap } from '../utilities';
 import type { SxProps, Theme } from '@mui/material';
 
 interface Props {

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

@@ -29,7 +29,7 @@ import {
   getFormattedEntityType,
   mapEntityTypes,
   mapRolesToPermissions,
-  transformedAccountEntities,
+  groupAccountEntitiesByType,
 } from '../utilities';
 import { AssignedRolesActionMenu } from './AssignedRolesActionMenu';
 import { ChangeRoleDrawer } from './ChangeRoleDrawer';
@@ -112,7 +112,7 @@ export const AssignedRolesTable = () => {
     const resourceTypes = getResourceTypes(roles);
 
     if (entities) {
-      const transformedEntities = transformedAccountEntities(entities.data);
+      const transformedEntities = groupAccountEntitiesByType(entities.data);
 
       roles = addEntitiesNamesToRoles(roles, transformedEntities);
     }

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

@@ -21,12 +21,8 @@ import {
 import { AssignedPermissionsPanel } from '../AssignedPermissionsPanel/AssignedPermissionsPanel';
 import { getAllRoles, getRoleByName, updateUserRoles } from '../utilities';
 
-import type {
-  DrawerModes,
-  EntitiesOption,
-  ExtendedRoleMap,
-  RolesType,
-} from '../utilities';
+import type { EntitiesOption } from '../types';
+import type { DrawerModes, ExtendedRoleMap, RolesType } from '../utilities';
 
 interface Props {
   mode: DrawerModes;
@@ -76,7 +72,7 @@ export const ChangeRoleDrawer = ({ mode, onClose, open, role }: Props) => {
     reset,
     setError,
     watch,
-  } = useForm<{ roleName: RolesType | null }>({
+  } = useForm<{ roleName: null | RolesType }>({
     defaultValues: {
       roleName: null,
     },
@@ -149,6 +145,8 @@ export const ChangeRoleDrawer = ({ mode, onClose, open, role }: Props) => {
         </Typography>
 
         <Controller
+          control={control}
+          name="roleName"
           render={({ field, fieldState }) => (
             <Autocomplete
               errorText={fieldState.error?.message}
@@ -161,8 +159,6 @@ export const ChangeRoleDrawer = ({ mode, onClose, open, role }: Props) => {
               value={field.value || null}
             />
           )}
-          control={control}
-          name="roleName"
           rules={{ required: 'Role is required.' }}
         />
 

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

@@ -13,11 +13,8 @@ import {
 import { AssignedPermissionsPanel } from '../AssignedPermissionsPanel/AssignedPermissionsPanel';
 import { toEntityAccess } from '../utilities';
 
-import type {
-  EntitiesOption,
-  ExtendedRoleMap,
-  UpdateEntitiesFormValues,
-} from '../utilities';
+import type { EntitiesOption } from '../types';
+import type { ExtendedRoleMap, UpdateEntitiesFormValues } from '../utilities';
 import type { EntityAccessRole } from '@linode/api-v4';
 
 interface Props {

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

@@ -7,8 +7,7 @@ import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { Entities } from './Entities';
-
-import type { EntitiesOption } from '../utilities';
+import { EntitiesOption } from '../types';
 
 const queryMocks = vi.hoisted(() => ({
   useAccountEntities: vi.fn().mockReturnValue({}),

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

@@ -1,21 +1,21 @@
-import { Autocomplete, Notice, Typography } from '@linode/ui';
+import { Autocomplete, Notice, TextField, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import React from 'react';
 
 import { FormLabel } from 'src/components/FormLabel';
 import { Link } from 'src/components/Link';
 import { useAccountEntities } from 'src/queries/entities/entities';
 
+import { type DrawerModes, getFormattedEntityType } from '../utilities';
 import {
   getCreateLinkForEntityType,
-  getFormattedEntityType,
-  placeholderMap,
-  transformedAccountEntities,
-} from '../utilities';
+  getEntitiesByType,
+  getPlaceholder,
+  mapEntitiesToOptions,
+} from './utils';
 
-import type { DrawerModes, EntitiesOption } from '../utilities';
+import type { EntitiesOption } from '../types';
 import type {
-  AccountEntity,
   EntityType,
   EntityTypePermissions,
   IamAccessType,
@@ -46,16 +46,18 @@ export const Entities = ({
       return [];
     }
     const typeEntities = getEntitiesByType(type, entities.data);
-    return typeEntities ? transformedEntities(typeEntities) : [];
+    return typeEntities ? mapEntitiesToOptions(typeEntities) : [];
   }, [entities, access, type]);
 
   if (access === 'account_access') {
     return (
       <>
         <FormLabel>
           <Typography
-            marginBottom={0.5}
-            sx={{ marginTop: theme.tokens.spacing.S12 }}
+            sx={{
+              marginTop: theme.tokens.spacing.S12,
+              marginBottom: theme.tokens.spacing.S4,
+            }}
             variant="inherit"
           >
             Entities
@@ -73,7 +75,7 @@ export const Entities = ({
   return (
     <>
       <Autocomplete
-        errorText={errorText}
+        disabled={!memoizedEntities.length}
         getOptionLabel={(option) => option.label}
         isOptionEqualToValue={(option, value) => option.value === value.value}
         label="Entities"
@@ -88,7 +90,20 @@ export const Entities = ({
           value.length,
           memoizedEntities.length
         )}
-        readOnly={getReadonlyState(mode, memoizedEntities.length)}
+        readOnly={mode === 'change-role'}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            error={!!errorText}
+            errorText={errorText}
+            label="Entities"
+            placeholder={getPlaceholder(
+              type,
+              value.length,
+              memoizedEntities.length
+            )}
+          />
+        )}
         sx={{ marginTop: theme.tokens.spacing.S12 }}
         value={value || []}
       />
@@ -105,38 +120,3 @@ export const Entities = ({
     </>
   );
 };
-
-const getPlaceholder = (
-  type: EntityType | EntityTypePermissions,
-  currentValueLength: number,
-  possibleEntitiesLength: number
-): string =>
-  currentValueLength > 0
-    ? ' '
-    : possibleEntitiesLength === 0
-      ? 'None'
-      : placeholderMap[type] || 'Select';
-
-const getReadonlyState = (
-  mode: DrawerModes | undefined,
-  possibleEntitiesLength: number
-): boolean => mode === 'change-role' || possibleEntitiesLength === 0;
-
-const transformedEntities = (
-  entities: { id: number; label: string }[]
-): EntitiesOption[] => {
-  return entities.map((entity) => ({
-    label: entity.label,
-    value: entity.id,
-  }));
-};
-
-const getEntitiesByType = (
-  roleEntityType: EntityType | EntityTypePermissions,
-  entities: AccountEntity[]
-): Pick<AccountEntity, 'id' | 'label'>[] | undefined => {
-  const entitiesMap = transformedAccountEntities(entities);
-
-  // Find the first matching entity by type
-  return entitiesMap.get(roleEntityType as EntityType);
-};

packages/manager/src/features/IAM/Shared/Entities/utils.test.ts

@@ -0,0 +1,68 @@
+import { accountEntityFactory } from 'src/factories/accountEntities';
+
+import {
+  getCreateLinkForEntityType,
+  getEntitiesByType,
+  getPlaceholder,
+  placeholderMap,
+} from './utils';
+
+describe('getCreateLinkForEntityType', () => {
+  it('should return the correct create link for a given entity type', () => {
+    expect(getCreateLinkForEntityType('linode')).toBe('/linodes/create');
+    expect(getCreateLinkForEntityType('volume')).toBe('/volumes/create');
+    expect(getCreateLinkForEntityType('firewall')).toBe('/firewalls/create');
+  });
+});
+
+describe('getPlaceholder', () => {
+  it('should return a space if currentValueLength is greater than 0', () => {
+    expect(getPlaceholder('linode', 1, 10)).toBe(' ');
+  });
+
+  it('should return "None" if possibleEntitiesLength is 0', () => {
+    expect(getPlaceholder('linode', 0, 0)).toBe('None');
+  });
+
+  it('should return the placeholder from placeholderMap if type exists', () => {
+    expect(getPlaceholder('linode', 0, 10)).toBe(placeholderMap['linode']);
+  });
+});
+
+describe('getEntitiesByType', () => {
+  it('should return entities of the type "linode', () => {
+    const mockEntities = [
+      ...accountEntityFactory.buildList(3, {
+        type: 'linode',
+      }),
+      accountEntityFactory.build({
+        type: 'firewall',
+      }),
+    ];
+
+    const result = getEntitiesByType('linode', mockEntities);
+
+    expect(result).toEqual([
+      { id: 1, label: 'test-1' },
+      { id: 2, label: 'test-2' },
+      { id: 3, label: 'test-3' },
+    ]);
+  });
+
+  it('should return entities of the type "linode', () => {
+    const mockEntities = [
+      ...accountEntityFactory.buildList(3, {
+        type: 'linode',
+      }),
+      accountEntityFactory.build({
+        id: 1,
+        label: 'firewall-1',
+        type: 'firewall',
+      }),
+    ];
+
+    const result = getEntitiesByType('firewall', mockEntities);
+
+    expect(result).toEqual([{ id: 1, label: 'firewall-1' }]);
+  });
+});

packages/manager/src/features/IAM/Shared/Entities/utils.ts

@@ -0,0 +1,66 @@
+import { groupAccountEntitiesByType } from '../utilities';
+
+import type { EntitiesOption } from '../types';
+import type {
+  AccountEntity,
+  EntityType,
+  EntityTypePermissions,
+} from '@linode/api-v4';
+
+export const placeholderMap: Record<string, string> = {
+  account: 'Select Account',
+  database: 'Select Databases',
+  domain: 'Select Domains',
+  firewall: 'Select Firewalls',
+  image: 'Select Images',
+  linode: 'Select Linodes',
+  longview: 'Select Longviews',
+  nodebalancer: 'Select Nodebalancers',
+  stackscript: 'Select Stackscripts',
+  volume: 'Select Volumes',
+  vpc: 'Select VPCs',
+};
+
+export const getCreateLinkForEntityType = (
+  entityType: EntityType | EntityTypePermissions
+): string => {
+  // TODO - find the exceptions to this rule - most use the route of /{entityType}s/create (note the "s")
+  return `/${entityType}s/create`;
+};
+
+export const getPlaceholder = (
+  type: EntityType | EntityTypePermissions,
+  currentValueLength: number,
+  possibleEntitiesLength: number
+): string => {
+  let placeholder: string;
+
+  if (currentValueLength > 0) {
+    placeholder = ' ';
+  } else if (possibleEntitiesLength === 0) {
+    placeholder = 'None';
+  } else {
+    placeholder = placeholderMap[type] || 'Select';
+  }
+
+  return placeholder;
+};
+
+export const mapEntitiesToOptions = (
+  entities: { id: number; label: string }[]
+): EntitiesOption[] => {
+  return entities.map((entity) => ({
+    label: entity.label,
+    value: entity.id,
+  }));
+};
+
+export const getEntitiesByType = (
+  roleEntityType: EntityType | EntityTypePermissions,
+  entities: AccountEntity[]
+): Pick<AccountEntity, 'id' | 'label'>[] | undefined => {
+  const entitiesMap = groupAccountEntitiesByType(entities);
+
+  // Find the first matching entity by type
+  return entitiesMap.get(roleEntityType as EntityType);
+};

packages/manager/src/features/IAM/Shared/types.ts

@@ -0,0 +1,4 @@
+export interface EntitiesOption {
+  label: string;
+  value: number;
+}