feat: [UIE-8792], [UIE-8794] - IAM: Roles Table pagination fix, Assign Roles Drawer UI fix (linode#12317)

* feat: [UIE-8792], [UIE-8794] - Roles Table pagination fix, Assign Roles Drawer UI fix

* feat: [UIE-8792], [UIE-8794] - fix after rebase

* Added changeset: IAM RBAC: Roles Table - Hide pagination when results are empty or only one short page, fix styling issues in Assign Roles Drawer

Author: mpolotsk-akamai

packages/manager/.changeset/pr-12317-upcoming-features-1748960578731.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM RBAC: Roles Table - Hide pagination when results are empty or only one short page, fix styling issues in Assign Roles Drawer ([#12317](https://github.com/linode/manager/pull/12317))

packages/manager/src/features/IAM/Roles/RolesTable/AssignSelectedRolesDrawer.tsx

@@ -118,7 +118,11 @@ export const AssignSelectedRolesDrawer = ({
   };
 
   return (
-    <Drawer onClose={onClose} open={open} title="Assign Selected Roles to User">
+    <Drawer
+      onClose={onClose}
+      open={open}
+      title={`Assign Role${selectedRoles.length > 1 ? `s` : ``}`}
+    >
       <FormProvider {...form}>
         <form onSubmit={handleSubmit(onSubmit)}>
           {formState.errors.root?.message && (
@@ -139,10 +143,12 @@ export const AssignSelectedRolesDrawer = ({
             direction="column"
             sx={() => ({
               justifyContent: 'space-between',
-              marginBottom: theme.spacingFunction(16),
+              marginBottom: theme.spacingFunction(20),
             })}
           >
-            <Typography variant={'h3'}>Users</Typography>
+            <Typography mb={theme.spacingFunction(8)} variant="h3">
+              Users
+            </Typography>
             {allUsers && allUsers?.data?.length > 0 && (
               <Controller
                 control={control}
@@ -160,7 +166,6 @@ export const AssignSelectedRolesDrawer = ({
                     }}
                     options={getUserOptions() || []}
                     placeholder="Select a User"
-                    sx={{ marginTop: theme.tokens.spacing.S12 }}
                     textFieldProps={{ hideLabel: true }}
                   />
                 )}
@@ -175,7 +180,6 @@ export const AssignSelectedRolesDrawer = ({
             spacing={2}
             sx={() => ({
               justifyContent: 'space-between',
-              marginBottom: theme.spacingFunction(16),
             })}
           >
             <Typography variant={'h3'}>

packages/manager/src/features/IAM/Roles/RolesTable/AssignSingleSelectedRole.tsx

@@ -29,7 +29,8 @@ export const AssignSingleSelectedRole = ({
         {index !== 0 && (
           <Divider
             sx={{
-              marginBottom: theme.tokens.spacing.S12,
+              marginBottom: theme.tokens.spacing.S6,
+              marginTop: theme.tokens.spacing.S12,
             }}
           />
         )}

packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx

@@ -39,7 +39,7 @@ const ALL_ROLES_OPTION: SelectOption = {
 interface Props {
   roles?: RoleView[];
 }
-
+const DEFAULT_PAGE_SIZE = 10;
 export const RolesTable = ({ roles = [] }: Props) => {
   // Filter string for the search bar
   const [filterString, setFilterString] = React.useState('');
@@ -288,14 +288,16 @@ export const RolesTable = ({ roles = [] }: Props) => {
             )}
           </TableBody>
         </Table>
-        <Pagination
-          count={filteredRows.length}
-          onPageChange={handlePageChange}
-          onPageSizeChange={handlePageSizeChange}
-          page={pagination.page}
-          pageSize={pagination.pageSize}
-          style={{ borderTop: 0 }}
-        />
+        {sortedRows.length !== 0 && sortedRows.length > DEFAULT_PAGE_SIZE && (
+          <Pagination
+            count={filteredRows.length}
+            onPageChange={handlePageChange}
+            onPageSizeChange={handlePageSizeChange}
+            page={pagination.page}
+            pageSize={pagination.pageSize}
+            style={{ borderTop: 0 }}
+          />
+        )}
       </Paper>
       <AssignSelectedRolesDrawer
         onClose={() => setIsDrawerOpen(false)}

packages/manager/src/features/IAM/Shared/AssignedPermissionsPanel/AssignedPermissionsPanel.style.ts

@@ -22,7 +22,7 @@ export const StyledTitle = styled(Typography, {
 
 export const StyledDescription = styled(Typography)(({ theme }) => ({
   marginBottom: theme.tokens.spacing.S12,
-  marginTop: theme.tokens.spacing.S6,
+  marginTop: theme.tokens.spacing.S8,
   overflowWrap: 'anywhere',
   wordBreak: 'normal',
 }));
@@ -34,5 +34,5 @@ export const StyledEntityBox = styled(Box, {
 })<{
   hideDetails: boolean | undefined;
 }>(({ theme, hideDetails }) => ({
-  marginTop: !hideDetails ? theme.tokens.spacing.S12 : undefined,
+  marginTop: !hideDetails ? theme.tokens.spacing.S16 : undefined,
 }));

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

@@ -55,7 +55,7 @@ export const Entities = ({
         <FormLabel>
           <Typography
             sx={{
-              marginBottom: theme.tokens.spacing.S4,
+              marginBottom: theme.tokens.spacing.S8,
               font: theme.tokens.alias.Typography.Label.Bold.S,
             }}
           >

packages/manager/src/features/IAM/Shared/Permissions/Permissions.style.ts

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 export const StyledTitle = styled(Typography, { label: 'StyledTitle' })(
   ({ theme }) => ({
     font: theme.tokens.alias.Typography.Label.Bold.S,
-    marginBottom: theme.tokens.spacing.S4,
+    marginBottom: theme.tokens.spacing.S8,
   })
 );