linode · aaleksee-akamai · Dec 18, 2024
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+fix invalid routes in the iam ([#11436](https://github.com/linode/manager/pull/11436))
@@ -231,7 +231,7 @@ export type ProductInformationBannerLocation =
   | 'Databases'
   | 'Domains'
   | 'Firewalls'
-  | 'Identity and Access Management'
+  | 'Identity and Access'
   | 'Images'
   | 'Kubernetes'
   | 'LinodeCreate' // Use for Marketplace banners

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { matchPath } from 'react-router-dom';
+import { matchPath, useHistory, useLocation } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
@@ -9,9 +9,6 @@ import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 
-import type { RouteComponentProps } from 'react-router-dom';
-type Props = RouteComponentProps<{}>;
-
 const Users = React.lazy(() =>
   import('./Users/UsersTable/Users').then((module) => ({
     default: module.UsersLanding,
@@ -24,28 +21,31 @@ const Roles = React.lazy(() =>
   }))
 );
 
-export const IdentityAccessManagementLanding = React.memo((props: Props) => {
+export const IdentityAccessLanding = React.memo(() => {
+  const history = useHistory();
+  const location = useLocation();
+
   const tabs = [
     {
-      routeName: `${props.match.url}/users`,
+      routeName: `/iam/users`,
       title: 'Users',
     },
     {
-      routeName: `${props.match.url}/roles`,
+      routeName: `/iam/roles`,
       title: 'Roles',
     },
   ];
 
   const navToURL = (index: number) => {
-    props.history.push(tabs[index].routeName);
+    history.push(tabs[index].routeName);
   };
 
   const getDefaultTabIndex = () => {
-    const tabChoice = tabs.findIndex((tab) =>
-      Boolean(matchPath(tab.routeName, { path: location.pathname }))
+    return (
+      tabs.findIndex((tab) =>
+        Boolean(matchPath(tab.routeName, { path: location.pathname }))
+      ) || 0
     );
-
-    return tabChoice;
   };
 
   const landingHeaderProps = {

@@ -3,7 +3,7 @@ import React from 'react';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import {
-  NO_ASSIGNED_RESOURCES_TEXT,
+  NO_ASSIGNED_ENTITIES_TEXT,
   NO_ASSIGNED_ROLES_TEXT,
 } from '../constants';
 import { NoAssignedRoles } from './NoAssignedRoles';
@@ -16,10 +16,10 @@ describe('NoAssignedRoles', () => {
     expect(getByText(NO_ASSIGNED_ROLES_TEXT)).toBeInTheDocument();
   });
 
-  it('renders with correct text for the Assigned Resources tab', () => {
+  it('renders with correct text for the Assigned Entities tab', () => {
     const { getByText } = renderWithTheme(
-      <NoAssignedRoles text={NO_ASSIGNED_RESOURCES_TEXT} />
+      <NoAssignedRoles text={NO_ASSIGNED_ENTITIES_TEXT} />
     );
-    expect(getByText(NO_ASSIGNED_RESOURCES_TEXT)).toBeInTheDocument();
+    expect(getByText(NO_ASSIGNED_ENTITIES_TEXT)).toBeInTheDocument();
   });
 });
@@ -5,4 +5,4 @@ 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.`;
+export const NO_ASSIGNED_ENTITIES_TEXT = `The user doesn't have any entities assigned yet. Once you assigned the user a role on specific entities, these entities will show up here.`;
@@ -14,9 +14,24 @@ import { Tabs } from 'src/components/Tabs/Tabs';
 import { useAccountUserPermissions } from 'src/queries/iam/iam';
 
 import { IAM_LABEL } from '../Shared/constants';
-import { UserProfile } from './UserDetails/UserProfile';
-import { UserResources } from './UserResources/UserResources';
-import { UserRoles } from './UserRoles/UserRoles';
+
+const UserDetails = React.lazy(() =>
+  import('./UserDetails/UserProfile').then((module) => ({
+    default: module.UserProfile,
+  }))
+);
+
+const UserRoles = React.lazy(() =>
+  import('./UserRoles/UserRoles').then((module) => ({
+    default: module.UserRoles,
+  }))
+);
+
+const UserEntities = React.lazy(() =>
+  import('./UserEntities/UserEntities').then((module) => ({
+    default: module.UserEntities,
+  }))
+);
 
 export const UserDetailsLanding = () => {
   const { username } = useParams<{ username: string }>();
@@ -35,8 +50,8 @@ export const UserDetailsLanding = () => {
       title: 'Assigned Roles',
     },
     {
-      routeName: `/iam/users/${username}/resources`,
-      title: 'Assigned Resources',
+      routeName: `/iam/users/${username}/entities`,
+      title: 'Assigned Entities',
     },
   ];
 
@@ -45,8 +60,10 @@ export const UserDetailsLanding = () => {
   };
 
   const getDefaultTabIndex = () => {
-    return tabs.findIndex((tab) =>
-      Boolean(matchPath(tab.routeName, { path: location.pathname }))
+    return (
+      tabs.findIndex((tab) =>
+        Boolean(matchPath(tab.routeName, { path: location.pathname }))
+      ) || 0
     );
   };
 
@@ -74,13 +91,13 @@ export const UserDetailsLanding = () => {
         <TabLinkList tabs={tabs} />
         <TabPanels>
           <SafeTabPanel index={idx}>
-            <UserProfile />
+            <UserDetails />
           </SafeTabPanel>
           <SafeTabPanel index={++idx}>
             <UserRoles assignedRoles={assignedRoles} />
           </SafeTabPanel>
           <SafeTabPanel index={++idx}>
-            <UserResources assignedRoles={assignedRoles} />
+            <UserEntities assignedRoles={assignedRoles} />
           </SafeTabPanel>
         </TabPanels>
       </Tabs>

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

@@ -8,7 +8,7 @@ import type { RouteComponentProps } from 'react-router-dom';
 
 const IAMLanding = React.lazy(() =>
   import('./IAMLanding').then((module) => ({
-    default: module.IdentityAccessManagementLanding,
+    default: module.IdentityAccessLanding,
   }))
 );
 
@@ -23,11 +23,39 @@ export const IdentityAccessManagement = (props: RouteComponentProps) => {
 
   return (
     <React.Suspense fallback={<SuspenseLoader />}>
-      <ProductInformationBanner bannerLocation="Identity and Access Management" />
+      <ProductInformationBanner bannerLocation="Identity and Access" />
       <Switch>
-        <Route component={UserDetails} path={`${path}/users/:username/`} />
+        <Route
+          component={UserDetails}
+          exact
+          path={`${path}/users/:username/details`}
+        />
+        <Route
+          component={UserDetails}
+          exact
+          path={`${path}/users/:username/roles`}
+        />
+        <Route
+          component={UserDetails}
+          exact
+          path={`${path}/users/:username/entities`}
+        />
+        <Route component={IAMLanding} exact path={`${path}/roles`} />
+
+        <Route component={IAMLanding} exact path={`${path}/users`} />
+
         <Redirect exact from={path} to={`${path}/users`} />
-        <Route component={IAMLanding} path={path} />
+        <Redirect
+          exact
+          from={`${path}/users/:username`}
+          to={`${path}/users/:username/details`}
+        />
+        <Redirect
+          from={`${path}/users/:username/*`}
+          to={`${path}/users/:username/details`}
+        />
+        <Redirect from={`${path}/roles/*`} to={`${path}/roles`} />
+        <Redirect from={`${path}/*`} to={`${path}/users`} />
       </Switch>
     </React.Suspense>
   );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,4 @@ 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.`;
		export const NO_ASSIGNED_ENTITIES_TEXT = `The user doesn't have any entities assigned yet. Once you assigned the user a role on specific entities, these entities will show up here.`;