chore: [M3-9440] - Improve Banner Spacing (#11724)

* improve-banner-spacing * update test * add changeset --------- Co-authored-by: Banks Nussman <[email protected]>
linode · Feb 28, 2025 · 569c5ee · 569c5ee
1 parent b3f863f
commit 569c5ee
Show file tree

Hide file tree

Showing 20 changed files with 703 additions and 282 deletions.
diff --git a/packages/api-v4/.changeset/pr-11762-upcoming-features-1740743199251.md b/packages/api-v4/.changeset/pr-11762-upcoming-features-1740743199251.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+update types for iam ([#11762](https://github.com/linode/manager/pull/11762))
diff --git a/packages/api-v4/src/iam/types.ts b/packages/api-v4/src/iam/types.ts
@@ -16,6 +16,7 @@ export type AccountAccessType =
   | 'linode_creator'
   | 'linode_contributor'
   | 'account_admin'
+  | 'account_viewer'
   | 'firewall_creator';
 
 export type RoleType =

diff --git a/packages/manager/.changeset/pr-11762-upcoming-features-1740739892540.md b/packages/manager/.changeset/pr-11762-upcoming-features-1740739892540.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+update assigned roles and entities table, update styles for permission component ([#11762](https://github.com/linode/manager/pull/11762))
diff --git a/packages/manager/src/factories/accountResources.ts b/packages/manager/src/factories/accountResources.ts
@@ -16,6 +16,38 @@ export const accountResourcesFactory = Factory.Sync.makeFactory<
         id: 23456789,
         name: 'linode-uk-123',
       },
+      {
+        id: 1,
+        name: 'debian-us-1',
+      },
+      {
+        id: 2,
+        name: 'linode-uk-1',
+      },
+      {
+        id: 3,
+        name: 'debian-us-2',
+      },
+      {
+        id: 4,
+        name: 'linode-uk-2',
+      },
+      {
+        id: 5,
+        name: 'debian-us-3',
+      },
+      {
+        id: 6,
+        name: 'linode-uk-3',
+      },
+      {
+        id: 7,
+        name: 'debian-us-4',
+      },
+      {
+        id: 8,
+        name: 'linode-uk-4',
+      },
     ],
   },
   {

diff --git a/packages/manager/src/factories/userPermissions.ts b/packages/manager/src/factories/userPermissions.ts
@@ -9,6 +9,7 @@ export const userPermissionsFactory = Factory.Sync.makeFactory<IamUserPermission
       'linode_creator',
       'firewall_creator',
       'account_admin',
+      'account_viewer',
     ],
     resource_access: [
       {
@@ -21,6 +22,46 @@ export const userPermissionsFactory = Factory.Sync.makeFactory<IamUserPermission
         resource_type: 'linode',
         roles: ['linode_contributor', 'linode_viewer'],
       },
+      {
+        resource_id: 1,
+        resource_type: 'linode',
+        roles: ['linode_contributor'],
+      },
+      {
+        resource_id: 2,
+        resource_type: 'linode',
+        roles: ['linode_contributor'],
+      },
+      {
+        resource_id: 3,
+        resource_type: 'linode',
+        roles: ['linode_contributor'],
+      },
+      {
+        resource_id: 4,
+        resource_type: 'linode',
+        roles: ['linode_contributor'],
+      },
+      {
+        resource_id: 5,
+        resource_type: 'linode',
+        roles: ['linode_contributor'],
+      },
+      {
+        resource_id: 6,
+        resource_type: 'linode',
+        roles: ['linode_contributor'],
+      },
+      {
+        resource_id: 7,
+        resource_type: 'linode',
+        roles: ['linode_contributor'],
+      },
+      {
+        resource_id: 8,
+        resource_type: 'linode',
+        roles: ['linode_contributor'],
+      },
       {
         resource_id: 45678901,
         resource_type: 'firewall',

diff --git a/...ges/manager/src/features/IAM/Shared/AssignedPermissionsPanel/AssignedPermissionsPanel.tsx b/...ges/manager/src/features/IAM/Shared/AssignedPermissionsPanel/AssignedPermissionsPanel.tsx
@@ -1,4 +1,5 @@
 import { Paper, StyledLinkButton, Typography } from '@linode/ui';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { truncate } from 'src/utilities/truncate';
@@ -24,30 +25,41 @@ type Props = {
 export const AssignedPermissionsPanel = ({ role }: Props) => {
   const [showFullDescription, setShowFullDescription] = React.useState(false);
 
+  const theme = useTheme();
+
   const description =
     role.description.length < 110 || showFullDescription
       ? role.description
       : truncate(role.description, 110);
 
   return (
     <Paper
-      sx={(theme) => ({
+      sx={{
         backgroundColor:
           theme.name === 'light'
             ? theme.tokens.color.Neutrals[5]
             : theme.tokens.color.Neutrals[90],
         marginTop: theme.spacing(1.25),
-        padding: `${theme.spacing(1)} ${theme.spacing(1.25)}`,
-      })}
+        padding: `${theme.tokens.spacing[50]} ${theme.tokens.spacing[40]}`,
+      }}
     >
       <Typography
-        sx={{ marginBottom: 1, overflowWrap: 'anywhere', wordBreak: 'normal' }}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          marginBottom: theme.tokens.spacing[50],
+          overflowWrap: 'anywhere',
+          wordBreak: 'normal',
+        }}
       >
         {description}{' '}
         {description.length > 110 && (
           <StyledLinkButton
+            sx={{
+              font: theme.tokens.typography.Label.Semibold.Xs,
+              width: 'max-content',
+            }}
             onClick={() => setShowFullDescription((show) => !show)}
-            sx={{ fontSize: '0.875rem' }}
           >
             {showFullDescription ? 'Hide' : 'Expand'}
           </StyledLinkButton>

diff --git a/packages/manager/src/features/IAM/Shared/AssignedRolesTable/AssignedRolesTable.test.tsx b/packages/manager/src/features/IAM/Shared/AssignedRolesTable/AssignedRolesTable.test.tsx
@@ -60,7 +60,7 @@ describe('AssignedRolesTable', () => {
     );
 
     expect(getByText('account_linode_admin')).toBeInTheDocument();
-    expect(getAllByText('All linodes')[0]).toBeInTheDocument();
+    expect(getAllByText('All Linodes')[0]).toBeInTheDocument();
 
     const actionMenuButton = getAllByLabelText('action menu')[0];
     expect(actionMenuButton).toBeInTheDocument();