Role selection modal lacks tooltip/warning for storage-consumer and custom roles

[eve-scality]

Analysis Report

Root Cause

The role selection modal in AccountRoleSelectButtonAndModal.tsx renders a table of available IAM roles. The "Role Name" column's Cell renderer (lines 30-48) checks if a role name is in the SCALITY_INTERNAL_ROLES array and, if so, shows a tooltip saying "This is a Scality predefined Role". For all other roles — including storage-usage-consumer-role (the API name for the storage-consumer-role mentioned in the ticket) and any custom IAM roles — the else branch at line 45 simply renders the bare role name with no tooltip, warning, or indication that UI sections may be unavailable.

Two specific gaps exist:

1. storage-usage-consumer-role is completely missing from the codebase. It is not defined as a constant in hooks.ts (where all other Scality roles like storage-manager-role, storage-account-owner-role, data-consumer-role, data-accessor-role are defined at lines 138-147), nor is it included in SCALITY_INTERNAL_ROLES. Therefore, it gets no tooltip at all — not even the generic "predefined Role" one.

2. Custom IAM roles get no warning. The else branch at line 45-46 renders just <>{roleName}</> with no visual indication that some UI sections may not be available depending on the role's permissions.

Affected Component

• Repo: scality/zenko-ui
• Path: src/react/account/AccountRoleSelectButtonAndModal.tsx
• Version: main

Evidence

1. src/react/account/AccountRoleSelectButtonAndModal.tsx:30 — The Cell renderer only shows a tooltip for roles in SCALITY_INTERNAL_ROLES. The else branch (line 45-46) renders custom roles and storage-usage-consumer-role with no tooltip or warning about limited UI availability.

   Cell({ value: roleName }: { value: string }) {
           if (SCALITY_INTERNAL_ROLES.includes(roleName)) {
             return (
               <Stack gap="r8">
                 {roleName}
                 <Tooltip
                   overlay={'This is a Scality predefined Role'}
                   overlayStyle={{
                     width: '12rem',
                   }}
                 >
                   <Icon name="Info" color="buttonSecondary" />
                 </Tooltip>
               </Stack>
             );
           } else {
             return <>{roleName}</>;
           }
         },
   

2. src/react/utils/hooks.ts:138 — The SCALITY_INTERNAL_ROLES array does not include 'storage-usage-consumer-role'. There is no constant defined for this role anywhere in the codebase, so it falls into the else branch and gets no tooltip or warning.

   export const STORAGE_MANAGER_ROLE = 'storage-manager-role';
   export const STORAGE_ACCOUNT_OWNER_ROLE = 'storage-account-owner-role';
   const DATA_CONSUMER_ROLE = 'data-consumer-role';
   const DATA_ACCESSOR_ROLE = 'data-accessor-role';
   export const SCALITY_INTERNAL_ROLES = [
     STORAGE_MANAGER_ROLE,
     STORAGE_ACCOUNT_OWNER_ROLE,
     DATA_CONSUMER_ROLE,
     DATA_ACCESSOR_ROLE,
   ];
   

3. src/react/account/AccountRoleSelectButtonAndModal.tsx:119 — When storage-manager-role exists in an account, only that role is shown. But when it doesn't exist (e.g. for accounts with only storage-usage-consumer-role or custom roles), ALL roles are shown — yet none of these non-internal roles get any warning about limited UI availability.

   const storageManagerRoles = parsedRoles.filter(
             (role) => role.roleName === STORAGE_MANAGER_ROLE,
           );
           return storageManagerRoles.length > 0 ? storageManagerRoles : parsedRoles;
   

Impact

Low severity. Users who select storage-usage-consumer-role or custom IAM roles in the role selection modal receive no warning that some UI sections (notably the Data Browser) may be unavailable. This leads to user confusion when they assume a role and find parts of the UI inaccessible, but does not cause data loss or functional failures.

Confidence

high

Recommendation

Make the following changes to add appropriate warnings:

1. Add storage-usage-consumer-role constant in src/react/utils/hooks.ts:

   export const STORAGE_USAGE_CONSUMER_ROLE = 'storage-usage-consumer-role';

   Also add it to SCALITY_INTERNAL_ROLES since it is a Scality predefined role.

2. Update the Cell renderer in AccountRoleSelectButtonAndModal.tsx (lines 30-48) to handle three cases:

   • Scality internal roles (existing behavior): show "This is a Scality predefined Role" tooltip
   • storage-usage-consumer-role: show a specific warning: "Data Browser unavailable for this role"
   • Custom roles (not in any known Scality role list): show a tooltip: "Some UI sections may not be available depending on this role's permissions"

   Example implementation:

   Cell({ value: roleName }: { value: string }) {
     let tooltipMessage: string | null = null;
     if (roleName === STORAGE_USAGE_CONSUMER_ROLE) {
       tooltipMessage = 'Data Browser unavailable for this role';
     } else if (SCALITY_INTERNAL_ROLES.includes(roleName)) {
       tooltipMessage = 'This is a Scality predefined Role';
     } else {
       tooltipMessage = 'Some UI sections may not be available depending on this role\'s permissions';
     }
     return (
       <Stack gap="r8">
         {roleName}
         <Tooltip overlay={tooltipMessage} overlayStyle={{ width: '14rem' }}>
           <Icon name={roleName === STORAGE_USAGE_CONSUMER_ROLE ? 'Exclamation-circle' : 'Info'} 
                 color={roleName === STORAGE_USAGE_CONSUMER_ROLE ? 'statusWarning' : 'buttonSecondary'} />
         </Tooltip>
       </Stack>
     );
   }

3. Add tests for the new tooltip behavior covering all three role types.