fix: [UIE-10093], [UIE-10139] - IAM Users Table: Fix pagination when the last user on a page is removed, UX copy updates (#13352)

* fix: [UIE-10093] - IAM users table UI fix

* fix: [UIE-10139] - IAM UX copy updates

* test fix

* revert prop drilling

* test fix

Author: mpolotsk-akamai

packages/manager/src/features/IAM/Delegations/AccountDelegationsTableRow.tsx

@@ -118,7 +118,7 @@ export const AccountDelegationsTableRow = ({ delegation, index }: Props) => {
             sx={{ fontStyle: 'italic', textTransform: 'capitalize' }}
             variant="body1"
           >
-            no delegate users added
+            No Users Added
           </Typography>
         )}
       </TableCell>

packages/manager/src/features/IAM/Users/UserDetails/UserEmailPanel.tsx

@@ -48,9 +48,12 @@ export const UserEmailPanel = ({ activeUser }: Props) => {
 
   const disabledReason = isProxyOrDelegateUserType
     ? RESTRICTED_FIELD_TOOLTIP
-    : profileUserName !== activeUser.username
-      ? 'You can\u{2019}t change another user\u{2019}s email address.'
-      : undefined;
+    : activeUser.user_type === 'delegate' &&
+        profileUserName !== activeUser.username
+      ? 'E-mail addresses of delegate users are not displayed.'
+      : profileUserName !== activeUser.username
+        ? 'You can\u{2019}t change another user\u{2019}s email address.'
+        : undefined;
 
   // This should be disabled if this is NOT the current user or if the proxy user is viewing their own profile.
   const disableEmailField =

packages/manager/src/features/IAM/Users/UsersTable/Users.tsx

@@ -134,7 +134,11 @@ export const UsersLanding = () => {
   const isSmDown = useMediaQuery(theme.breakpoints.down('sm'));
   const isLgDown = useMediaQuery(theme.breakpoints.up('lg'));
 
-  const numColsLg = isLgDown ? 4 : 3;
+  const numColsLg = isLgDown
+    ? isChildOrDelegateWithDelegationEnabled
+      ? 5
+      : 4
+    : 3;
 
   const numCols = isSmDown ? 2 : numColsLg;
 
@@ -159,8 +163,17 @@ export const UsersLanding = () => {
     setSelectedUsername(username);
   };
 
-  const canCreateUser = permissions.create_user;
+  const handleDeleteDialogClose = () => {
+    const removedLastOnPage =
+      users && users?.data.length % pagination.pageSize === 1;
 
+    setIsDeleteDialogOpen(false);
+    if (removedLastOnPage) {
+      pagination.handlePageChange(pagination.page - 1);
+    }
+  };
+
+  const canCreateUser = permissions.create_user;
   return (
     <React.Fragment>
       <Paper sx={(theme) => ({ marginTop: theme.tokens.spacing.S16 })}>
@@ -256,7 +269,7 @@ export const UsersLanding = () => {
         open={isCreateDrawerOpen}
       />
       <UserDeleteConfirmation
-        onClose={() => setIsDeleteDialogOpen(false)}
+        onClose={handleDeleteDialogClose}
         open={isDeleteDialogOpen}
         username={selectedUsername}
       />

packages/manager/src/features/IAM/Users/UsersTable/UsersLandingTableHead.test.tsx

@@ -45,6 +45,7 @@ const defaultProps = {
     order: 'asc' as Order,
     orderBy: 'username',
   },
+  isChildWithDelegationEnabled: true,
 };
 
 describe('UsersLandingTableHead', () => {