fix: [UIE-9943], [UIE-9944], [UIE-9950], [UIE-9951], [UIE-9954] - IAM: UI fix for Parent/Child

packages/manager/.changeset/pr-13275-fixed-1768409925911.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+IAM Delegation: UI issues in Default Entity Access table, Default Roles labels/messages, and missing Make a Payment tooltip ([#13275](https://github.com/linode/manager/pull/13275))

packages/manager/cypress/e2e/core/billing/restricted-user-billing.spec.ts

@@ -259,8 +259,7 @@ describe('restricted user billing flows', () => {
     assertEditBillingInfoDisabled(restrictedUserTooltip);
     assertAddPaymentMethodDisabled(restrictedUserTooltip);
     assertMakeAPaymentDisabled(
-      restrictedUserTooltip +
-        ` Please contact your ${ADMINISTRATOR} to request the necessary permissions.`
+      `You don't have permissions to make a payment. Please contact your ${ADMINISTRATOR} to request the necessary permissions.`
     );
   });
 
@@ -289,8 +288,7 @@ describe('restricted user billing flows', () => {
     assertEditBillingInfoDisabled(restrictedUserTooltip);
     assertAddPaymentMethodDisabled(restrictedUserTooltip);
     assertMakeAPaymentDisabled(
-      restrictedUserTooltip +
-        ` Please contact your ${PARENT_USER} to request the necessary permissions.`
+      `You don't have permissions to make a payment. Please contact your ${PARENT_USER} to request the necessary permissions.`
     );
   });
 

packages/manager/src/features/Billing/BillingLanding/BillingLanding.tsx

@@ -6,8 +6,8 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { MaintenanceBannerV2 } from 'src/components/MaintenanceBanner/MaintenanceBannerV2';
 import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
+import { ADMINISTRATOR, PARENT_USER } from 'src/features/Account/constants';
 import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
-import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useIsIAMDelegationEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
@@ -38,6 +38,7 @@ export const BillingLanding = () => {
   const isChildUser = profile?.user_type === 'child';
   const isParentUser = profile?.user_type === 'parent';
 
+  const contactPerson = isChildUser ? PARENT_USER : ADMINISTRATOR;
   const isChildAccountAccessRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'child_account_access',
   });
@@ -70,10 +71,7 @@ export const BillingLanding = () => {
       disabled: isReadOnly || isAkamaiAccount,
       tooltipText: isAkamaiAccount
         ? 'This feature is not available for Akamai accounts.'
-        : getRestrictedResourceText({
-            isChildUser,
-            resourceType: 'Account',
-          }),
+        : `You don't have permissions to make a payment. Please contact your ${contactPerson} to request the necessary permissions.`,
     },
     createButtonText: 'Make a Payment',
     docsLabel: 'How Linode Billing Works',

packages/manager/src/features/IAM/Roles/Defaults/DefaultEntityAccess.tsx

@@ -22,7 +22,7 @@ export const DefaultEntityAccess = () => {
     <Paper>
       {hasAssignedEntities ? (
         <>
-          <Stack marginBottom={2.5}>
+          <Stack marginBottom={2}>
             <Typography variant="h2">
               Default Entity Access for Delegate Users
             </Typography>

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

@@ -215,7 +215,7 @@ export const AssignedEntitiesTable = ({ username }: Props) => {
     }
 
     if (!entities || !assignedRoles || filteredRoles.length === 0) {
-      return <TableRowEmpty colSpan={3} message={'No items to display.'} />;
+      return <TableRowEmpty colSpan={4} message={'No items to display.'} />;
     }
 
     if (assignedRoles && entities) {
@@ -243,7 +243,9 @@ export const AssignedEntitiesTable = ({ username }: Props) => {
                   onClick: () => {
                     handleRemoveAssignment(el);
                   },
-                  title: 'Remove Assignment',
+                  title: isDefaultDelegationRolesForChildAccount
+                    ? 'Remove'
+                    : 'Remove Assignment',
                   tooltip: !permissionToCheck
                     ? 'You do not have permission to remove this assignment.'
                     : undefined,

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

@@ -35,6 +35,12 @@ export const AssignedRolesActionMenu = ({
     ? permissions?.update_default_delegate_access
     : permissions?.is_account_admin;
 
+  const removeTooltip = !permissionToCheck
+    ? isDefaultDelegationRolesForChildAccount
+      ? 'You do not have permission to remove this role.'
+      : 'You do not have permission to unassign this role.'
+    : undefined;
+
   const accountMenu: Action[] = [
     {
       disabled: !permissionToCheck,
@@ -51,10 +57,10 @@ export const AssignedRolesActionMenu = ({
       onClick: () => {
         handleUnassignRole(role);
       },
-      title: 'Unassign Role',
-      tooltip: !permissionToCheck
-        ? 'You do not have permission to unassign this role.'
-        : undefined,
+      title: isDefaultDelegationRolesForChildAccount
+        ? 'Remove'
+        : 'Unassign Role',
+      tooltip: removeTooltip,
     },
   ];
 
@@ -91,7 +97,9 @@ export const AssignedRolesActionMenu = ({
       onClick: () => {
         handleUnassignRole(role);
       },
-      title: 'Unassign Role',
+      title: isDefaultDelegationRolesForChildAccount
+        ? 'Remove'
+        : 'Unassign Role',
     },
   ];
 

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

@@ -100,14 +100,24 @@ export const UnassignRoleConfirmationDialog = (props: Props) => {
       error={getErrorMessage(error)}
       onClose={onClose}
       open={open}
-      title={`Unassign the ${role?.name} role?`}
+      title={
+        isDefaultDelegationRolesForChildAccount
+          ? `Remove the ${role?.name} role from the list?`
+          : `Unassign the ${role?.name} role?`
+      }
     >
-      <Notice variant="warning">
+      {isDefaultDelegationRolesForChildAccount ? (
         <Typography>
-          You’re about to remove the <strong>{role?.name}</strong> role from{' '}
-          <strong>{username}</strong>. The change will be applied immediately.
+          The role won’t be added to delegate users by default.
         </Typography>
-      </Notice>
+      ) : (
+        <Notice variant="warning">
+          <Typography>
+            You’re about to remove the <strong>{role?.name}</strong> role from{' '}
+            <strong>{username}</strong>. The change will be applied immediately.
+          </Typography>
+        </Notice>
+      )}
     </ConfirmationDialog>
   );
 };

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

@@ -113,21 +113,21 @@ export const RemoveAssignmentConfirmationDialog = (props: Props) => {
           : `Remove the ${role?.entity_name} entity from the ${role?.role_name} role assignment?`
       }
     >
-      <Notice variant="warning">
-        {isDefaultDelegationRolesForChildAccount ? (
-          <Typography>
-            Delegate users won’t get the {role?.role_name} access on the{' '}
-            {role?.entity_name} entity by default.
-          </Typography>
-        ) : (
+      {isDefaultDelegationRolesForChildAccount ? (
+        <Typography>
+          Delegate users won’t get the {role?.role_name} access on the{' '}
+          {role?.entity_name} entity by default.
+        </Typography>
+      ) : (
+        <Notice variant="warning">
           <Typography>
             You’re about to remove the <strong>{role?.entity_name}</strong>{' '}
             entity from the <strong>{role?.role_name}</strong> role for{' '}
             <strong>{username}</strong>. This change will be applied
             immediately.
           </Typography>
-        )}
-      </Notice>
+        </Notice>
+      )}
     </ConfirmationDialog>
   );
 };