feat: [UIE-8671] - IAM RBAC: facade roles description

packages/api-v4/.changeset/pr-12053-upcoming-features-1744891132478.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+added new types for iam ([#12053](https://github.com/linode/manager/pull/12053))

packages/api-v4/src/iam/types.ts

@@ -18,7 +18,8 @@ export type AccountAccessRole =
   | 'account_volume_admin'
   | 'firewall_creator'
   | 'linode_contributor'
-  | 'linode_creator';
+  | 'linode_creator'
+  | 'stackscript_creator';
 
 export type EntityAccessRole =
   | 'database_admin'
@@ -27,6 +28,8 @@ export type EntityAccessRole =
   | 'linode_contributor'
   | 'linode_creator'
   | 'linode_viewer'
+  | 'stackscript_admin'
+  | 'stackscript_viewer'
   | 'update_firewall';
 
 export interface IamUserPermissions {

packages/manager/.changeset/pr-12053-upcoming-features-1744891161989.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+implement a logic for getting a description for the facade roles ([#12053](https://github.com/linode/manager/pull/12053))

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

@@ -1,24 +1,27 @@
-import { Button, Select } from '@linode/ui';
+import { Button, Select, Typography } from '@linode/ui';
 import { capitalizeAllWords } from '@linode/utilities';
 import Grid from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
 import {
+  sortRows,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeaderCell,
   TableRow,
   TableRowExpanded,
-  sortRows,
 } from 'akamai-cds-react-components/Table';
 import React, { useState } from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
-import { StyledTextTooltip } from 'src/features/components/PlansPanel/PlansAvailabilityNotice.styles';
+import { Link } from 'src/components/Link';
 import { RolesTableActionMenu } from 'src/features/IAM/Roles/RolesTable/RolesTableActionMenu';
 import { RolesTableExpandedRow } from 'src/features/IAM/Roles/RolesTable/RolesTableExpandedRow';
-import { mapEntityTypesForSelect } from 'src/features/IAM/Shared/utilities';
+import {
+  getFacadeRoleDescription,
+  mapEntityTypesForSelect,
+} from 'src/features/IAM/Shared/utilities';
 
 import type { SelectOption } from '@linode/ui';
 import type { Order } from 'akamai-cds-react-components/Table';
@@ -45,16 +48,20 @@ export const RolesTable = ({ roles }: Props) => {
   }, [roles]);
 
   const [filterableEntityType, setFilterableEntityType] =
-    useState<SelectOption | null>(ALL_ROLES_OPTION);
+    useState<null | SelectOption>(ALL_ROLES_OPTION);
 
   const [sort, setSort] = useState<
-    { column: string; order: Order } | undefined
+    undefined | { column: string; order: Order }
   >(undefined);
 
   const [selectedRows, setSelectedRows] = useState<RoleMap[]>([]);
 
   const areAllSelected = React.useMemo(() => {
-    return !!rows?.length && !!selectedRows?.length && rows?.length === selectedRows?.length;
+    return (
+      !!rows?.length &&
+      !!selectedRows?.length &&
+      rows?.length === selectedRows?.length
+    );
   }, [rows, selectedRows]);
 
   const handleSort = (event: CustomEvent, column: string) => {
@@ -107,20 +114,18 @@ export const RolesTable = ({ roles }: Props) => {
   return (
     <Paper sx={(theme) => ({ marginTop: theme.spacing(2) })}>
       <Grid
-        sx={() => ({
-          justifyContent: 'space-between',
-        })}
         container
         direction="row"
         spacing={2}
+        sx={{ justifyContent: 'space-between' }}
       >
         <Grid
-          sx={() => ({
-            alignItems: 'center',
-            justifyContent: 'flex-start',
-          })}
           container
           direction="row"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+          }}
         >
           <DebouncedSearchTextField
             clearable
@@ -143,14 +148,14 @@ export const RolesTable = ({ roles }: Props) => {
           />
         </Grid>
         <Button
+          buttonType="primary"
+          disabled={selectedRows.length === 0}
+          onClick={() => handleAssignSelectedRoles()}
           tooltipText={
             selectedRows.length === 0
               ? 'You must select some roles to assign them.'
               : undefined
           }
-          buttonType="primary"
-          disabled={selectedRows.length === 0}
-          onClick={() => handleAssignSelectedRoles()}
         >
           Assign Selected Roles
         </Button>
@@ -176,19 +181,19 @@ export const RolesTable = ({ roles }: Props) => {
               sort={(event) => handleSort(event, 'access')}
               sortable
               sorted={sort?.column === 'access' ? sort.order : undefined}
-              style={{ minWidth: '18%' }}
+              style={{ minWidth: '14%' }}
             >
               Role Type
             </TableHeaderCell>
             <TableHeaderCell
               sort={(event) => handleSort(event, 'description')}
               sortable
               sorted={sort?.column === 'description' ? sort.order : undefined}
-              style={{ minWidth: '30%' }}
+              style={{ minWidth: '38%' }}
             >
               Description
             </TableHeaderCell>
-            <TableHeaderCell style={{ minWidth: '14%' }} />
+            <TableHeaderCell style={{ minWidth: '10%' }} />
           </TableRow>
         </TableHead>
         <TableBody>
@@ -210,20 +215,21 @@ export const RolesTable = ({ roles }: Props) => {
                 <TableCell style={{ minWidth: '26%' }}>
                   {roleRow.name}
                 </TableCell>
-                <TableCell style={{ minWidth: '18%' }}>
+                <TableCell style={{ minWidth: '14%' }}>
                   {capitalizeAllWords(roleRow.access, '_')}
                 </TableCell>
-                <TableCell style={{ minWidth: '30%' }}>
-                  {roleRow.description.length <= 80 ? (
-                    <>{roleRow.description}</>
+                <TableCell style={{ minWidth: '38%' }}>
+                  {roleRow.permissions.length ? (
+                    roleRow.description
                   ) : (
-                    <span>
-                      {roleRow.description.substring(0, 80)}{'... '}
-                      <StyledTextTooltip tooltipText={roleRow.description} displayText={'Show more'}/>
-                    </span>
+                    // TODO: update the link for the description when it's ready - UIE-8534
+                    <Typography>
+                      {getFacadeRoleDescription(roleRow)}{' '}
+                      <Link to="#">Learn more.</Link>
+                    </Typography>
                   )}
                 </TableCell>
-                <TableCell style={{ minWidth: '14%' }}>
+                <TableCell style={{ minWidth: '10%' }}>
                   <RolesTableActionMenu />
                 </TableCell>
                 <TableRowExpanded

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

@@ -1,17 +1,19 @@
-import { Paper, StyledLinkButton, Typography } from '@linode/ui';
-import { truncate } from '@linode/utilities';
+import { Paper, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import * as React from 'react';
 
+import { Link } from 'src/components/Link';
+
 import { Entities } from '../Entities/Entities';
 import { Permissions } from '../Permissions/Permissions';
-
-import type {
-  DrawerModes,
-  EntitiesOption,
-  ExtendedRole,
-  ExtendedRoleMap,
+import {
+  type DrawerModes,
+  type EntitiesOption,
+  type ExtendedRole,
+  type ExtendedRoleMap,
+  getFacadeRoleDescription,
 } from '../utilities';
+
 import type { SxProps, Theme } from '@mui/material';
 
 interface Props {
@@ -31,15 +33,9 @@ export const AssignedPermissionsPanel = ({
   sx,
   value,
 }: Props) => {
-  const [showFullDescription, setShowFullDescription] = React.useState(false);
-
   const theme = useTheme();
 
-  const description =
-    role.description.length < 110 || showFullDescription
-      ? role.description
-      : truncate(role.description, 110);
-
+  // TODO: update the link for the description when it's ready - UIE-8534
   return (
     <Paper
       sx={{
@@ -61,25 +57,18 @@ export const AssignedPermissionsPanel = ({
       </Typography>
       <Typography
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
           marginBottom: theme.tokens.spacing.S8,
+          marginTop: theme.tokens.spacing.S2,
           overflowWrap: 'anywhere',
           wordBreak: 'normal',
         }}
       >
-        {description}{' '}
-        {description.length > 110 && (
-          <StyledLinkButton
-            onClick={() => setShowFullDescription((show) => !show)}
-            sx={{
-              font: theme.tokens.alias.Typography.Label.Semibold.Xs,
-              width: 'max-content',
-            }}
-            type="button"
-          >
-            {showFullDescription ? 'Hide' : 'Expand'}
-          </StyledLinkButton>
+        {role.permissions.length ? (
+          role.description
+        ) : (
+          <>
+            {getFacadeRoleDescription(role)} <Link to="#">Learn more.</Link>
+          </>
         )}
       </Typography>
       <Permissions permissions={role.permissions} />

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

@@ -1,16 +1,12 @@
-import {
-  Autocomplete,
-  CircleProgress,
-  StyledLinkButton,
-  Typography,
-} from '@linode/ui';
-import { capitalize, truncate } from '@linode/utilities';
-import { Grid, useTheme } from '@mui/material';
+import { Autocomplete, CircleProgress, Typography } from '@linode/ui';
+import { useTheme } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 import React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 
 import { CollapsibleTable } from 'src/components/CollapsibleTable/CollapsibleTable';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
+import { Link } from 'src/components/Link';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
@@ -28,7 +24,9 @@ import { RemoveAssignmentConfirmationDialog } from '../RemoveAssignmentConfirmat
 import {
   addEntitiesNamesToRoles,
   combineRoles,
+  getFacadeRoleDescription,
   getFilteredRoles,
+  getFormattedEntityType,
   mapEntityTypes,
   mapRolesToPermissions,
   transformedAccountEntities,
@@ -126,8 +124,6 @@ export const AssignedRolesTable = () => {
 
   const [entityType, setEntityType] = React.useState<EntitiesType | null>(null);
 
-  const [showFullDescription, setShowFullDescription] = React.useState(false);
-
   const handleViewEntities = (
     roleName: AccountAccessRole | EntityAccessRole
   ) => {
@@ -154,7 +150,7 @@ export const AssignedRolesTable = () => {
               <Typography>
                 {role.entity_type === 'account'
                   ? 'All Entities'
-                  : `All ${capitalize(role.entity_type)}s`}
+                  : `All ${getFormattedEntityType(role.entity_type)}s`}
               </Typography>
             </TableCell>
           ) : (
@@ -177,12 +173,7 @@ export const AssignedRolesTable = () => {
           </TableCell>
         </>
       );
-
-      const description =
-        role.description.length < 150 || showFullDescription
-          ? role.description
-          : truncate(role.description, 150);
-
+      // TODO: update the link for 'Learn more' in the description when it's ready - UIE-8534
       const InnerTable = (
         <Grid
           sx={{
@@ -197,20 +188,16 @@ export const AssignedRolesTable = () => {
             Description
           </Typography>
           <Typography
-            sx={{ display: 'flex', flexDirection: 'column', marginBottom: 1 }}
+            sx={{
+              marginBottom: theme.tokens.spacing.S8,
+            }}
           >
-            {' '}
-            {description}{' '}
-            {description.length > 150 && (
-              <StyledLinkButton
-                onClick={() => setShowFullDescription((show) => !show)}
-                sx={{
-                  font: theme.tokens.alias.Typography.Label.Semibold.Xs,
-                  width: 'max-content',
-                }}
-              >
-                {showFullDescription ? 'Hide' : 'Expand'}
-              </StyledLinkButton>
+            {role.permissions.length ? (
+              role.description
+            ) : (
+              <>
+                {getFacadeRoleDescription(role)} <Link to="#">Learn more.</Link>
+              </>
             )}
           </Typography>
           <Permissions permissions={role.permissions} />
@@ -224,7 +211,7 @@ export const AssignedRolesTable = () => {
         label: role.name,
       };
     });
-  }, [roles, query, entityType, showFullDescription]);
+  }, [roles, query, entityType]);
 
   if (accountPermissionsLoading || entitiesLoading || assignedRolesLoading) {
     return <CircleProgress />;

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

@@ -73,7 +73,7 @@ describe('Entities', () => {
     const autocomplete = screen.queryAllByRole('combobox');
 
     expect(screen.getByText('Entities')).toBeVisible();
-    expect(screen.getByText('All firewalls')).toBeVisible();
+    expect(screen.getByText('All Firewalls')).toBeVisible();
 
     // check that the autocomplete doesn't exist
     expect(autocomplete.length).toBe(0);