feat: [UIE-8138] - add new no assigned roles component (#11401)

packages/manager/.changeset/pr-11401-upcoming-features-1733923108694.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add new no assigned roles component for iam ([#11401](https://github.com/linode/manager/pull/11401))

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import {
+  NO_ASSIGNED_RESOURCES_TEXT,
+  NO_ASSIGNED_ROLES_TEXT,
+} from '../constants';
+import { NoAssignedRoles } from './NoAssignedRoles';
+
+describe('NoAssignedRoles', () => {
+  it('renders with correct text for the Assigned Roles tab', () => {
+    const { getByText } = renderWithTheme(
+      <NoAssignedRoles text={NO_ASSIGNED_ROLES_TEXT} />
+    );
+    expect(getByText(NO_ASSIGNED_ROLES_TEXT)).toBeInTheDocument();
+  });
+
+  it('renders with correct text for the Assigned Resources tab', () => {
+    const { getByText } = renderWithTheme(
+      <NoAssignedRoles text={NO_ASSIGNED_RESOURCES_TEXT} />
+    );
+    expect(getByText(NO_ASSIGNED_RESOURCES_TEXT)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Paper, Stack, Typography } from '@linode/ui';
+import React from 'react';
+
+import EmptyNotificationIcon from 'src/assets/icons/emptynotification.svg';
+
+interface Props {
+  text: string;
+}
+
+export const NoAssignedRoles = (props: Props) => {
+  const { text } = props;
+
+  return (
+    <Paper variant="outlined">
+      <Stack alignItems="center" paddingY={10} spacing={2}>
+        <EmptyNotificationIcon />
+        <Typography sx={{ marginTop: 1 }}>{text}</Typography>
+      </Stack>
+    </Paper>
+  );
+};

packages/manager/src/features/IAM/Shared/constants.ts

@@ -2,3 +2,7 @@
 
 // Labels
 export const IAM_LABEL = 'Identity and Access';
+
+export const NO_ASSIGNED_ROLES_TEXT = `The user doesn't have any roles assigned yet. Once you assign the role, it will show up here.`;
+
+export const NO_ASSIGNED_RESOURCES_TEXT = `The user doesn't have any resource assigned yet. Once you assigned the user a role on specific resources, these resources will show up here.`;

packages/manager/src/features/IAM/Shared/utilities.ts

@@ -12,7 +12,7 @@ export const useIsIAMEnabled = () => {
   const isIAMEnabled = flags.iam?.enabled;
 
   return {
-    isIAMEnabled,
     isIAMBeta: flags.iam?.beta,
+    isIAMEnabled,
   };
 };

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

@@ -1,22 +1,29 @@
 import React from 'react';
 import {
+  matchPath,
   useHistory,
   useLocation,
   useParams,
-  matchPath,
 } from 'react-router-dom';
+
 import { LandingHeader } from 'src/components/LandingHeader';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
+import { useAccountUserPermissions } from 'src/queries/iam/iam';
+
 import { IAM_LABEL } from '../Shared/constants';
+import { UserResources } from './UserResources/UserResources';
+import { UserRoles } from './UserRoles/UserRoles';
 
 export const UserDetailsLanding = () => {
   const { username } = useParams<{ username: string }>();
   const location = useLocation();
   const history = useHistory();
 
+  const { data: assignedRoles } = useAccountUserPermissions(username ?? '');
+
   const tabs = [
     {
       routeName: `/iam/users/${username}/details`,
@@ -37,11 +44,9 @@ export const UserDetailsLanding = () => {
   };
 
   const getDefaultTabIndex = () => {
-    const tabChoice = tabs.findIndex((tab) =>
+    return tabs.findIndex((tab) =>
       Boolean(matchPath(tab.routeName, { path: location.pathname }))
     );
-
-    return tabChoice;
   };
 
   let idx = 0;
@@ -71,10 +76,10 @@ export const UserDetailsLanding = () => {
             <p>user details - UIE-8137</p>
           </SafeTabPanel>
           <SafeTabPanel index={++idx}>
-            <p>UIE-8138 - User Roles - Assigned Roles Table</p>
+            <UserRoles assignedRoles={assignedRoles} />
           </SafeTabPanel>
           <SafeTabPanel index={++idx}>
-            <p>UIE-8139 - User Roles - Resources Table</p>
+            <UserResources assignedRoles={assignedRoles} />
           </SafeTabPanel>
         </TabPanels>
       </Tabs>

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

@@ -0,0 +1,37 @@
+import { Paper, Stack, Typography } from '@linode/ui';
+import { isEmpty } from 'ramda';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+
+import { NO_ASSIGNED_RESOURCES_TEXT } from '../../Shared/constants';
+import { NoAssignedRoles } from '../../Shared/NoAssignedRoles/NoAssignedRoles';
+
+import type { IamUserPermissions } from '@linode/api-v4';
+
+interface Props {
+  assignedRoles?: IamUserPermissions;
+}
+
+export const UserResources = ({ assignedRoles }: Props) => {
+  const { username } = useParams<{ username: string }>();
+
+  const hasAssignedRoles = assignedRoles ? !isEmpty(assignedRoles) : false;
+
+  return (
+    <>
+      <DocumentTitleSegment segment={`${username} - User Resources`} />
+      <Paper>
+        <Stack spacing={3}>
+          <Typography variant="h2">Assigned Resources</Typography>
+          {hasAssignedRoles ? (
+            <p>UIE-8139 - RBAC-5: User Roles - Resources Table</p>
+          ) : (
+            <NoAssignedRoles text={NO_ASSIGNED_RESOURCES_TEXT} />
+          )}
+        </Stack>
+      </Paper>
+    </>
+  );
+};

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

@@ -0,0 +1,50 @@
+import { Button, Paper, Stack, Typography } from '@linode/ui';
+import { isEmpty } from 'ramda';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+
+import { NO_ASSIGNED_ROLES_TEXT } from '../../Shared/constants';
+import { NoAssignedRoles } from '../../Shared/NoAssignedRoles/NoAssignedRoles';
+
+import type { IamUserPermissions } from '@linode/api-v4';
+
+interface Props {
+  assignedRoles?: IamUserPermissions;
+}
+
+export const UserRoles = ({ assignedRoles }: Props) => {
+  const { username } = useParams<{ username: string }>();
+
+  const handleClick = () => {
+    // mock for UIE-8140: RBAC-4: User Roles - Assign New Role
+  };
+
+  const hasAssignedRoles = assignedRoles ? !isEmpty(assignedRoles) : false;
+
+  return (
+    <>
+      <DocumentTitleSegment segment={`${username} - User Roles`} />
+      <Paper>
+        <Stack spacing={3}>
+          <Stack
+            alignItems="center"
+            direction="row"
+            justifyContent="space-between"
+          >
+            <Typography variant="h2">Assigned Roles</Typography>
+            <Button buttonType="primary" onClick={handleClick}>
+              Assign New Role
+            </Button>
+          </Stack>
+          {hasAssignedRoles ? (
+            <p>UIE-8138 - assigned roles table</p>
+          ) : (
+            <NoAssignedRoles text={NO_ASSIGNED_ROLES_TEXT} />
+          )}
+        </Stack>
+      </Paper>
+    </>
+  );
+};

packages/manager/src/mocks/serverHandlers.ts

@@ -127,6 +127,7 @@ import type {
   User,
   VolumeStatus,
 } from '@linode/api-v4';
+import { userPermissionsFactory } from 'src/factories/userPermissions';
 
 export const makeResourcePage = <T>(
   e: T[],
@@ -390,6 +391,12 @@ const vpc = [
   }),
 ];
 
+const iam = [
+  http.get('*/iam/role-permissions/users/:username', () => {
+    return HttpResponse.json(userPermissionsFactory.build());
+  }),
+];
+
 const nanodeType = linodeTypeFactory.build({ id: 'g6-nanode-1' });
 const standardTypes = linodeTypeFactory.buildList(7);
 const dedicatedTypes = dedicatedTypeFactory.buildList(7);
@@ -2705,4 +2712,5 @@ export const handlers = [
   ...statusPage,
   ...databases,
   ...vpc,
+  ...iam,
 ];