Tech Stories - [M3-10021]: Reroute IAM (linode#12312)

* intitial commit - save progress

* replace utils

* fix units

* missing usePagination instances

* missing unit

* another missing unit

* fix user roles filtering

* Added changeset: Reroute IAM

* some redirect feedback

* feedback @kwojtowiakamai

* feedback @kwojtowiakamai

* feedback @kwojtowiakamai

Author: abailly-akamai

packages/manager/.changeset/pr-12312-tech-stories-1748963557069.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Reroute IAM ([#12312](https://github.com/linode/manager/pull/12312))

packages/manager/eslint.config.js

@@ -413,6 +413,7 @@ export const baseConfig = [
       'src/features/Events/**/*',
       'src/features/Firewalls/**/*',
       'src/features/Help/**/*',
+      'src/features/IAM/**/*',
       'src/features/Images/**/*',
       'src/features/Kubernetes/**/*',
       'src/features/Longview/**/*',

packages/manager/src/MainContent.tsx

@@ -36,7 +36,6 @@ import { ENABLE_MAINTENANCE_MODE } from './constants';
 import { complianceUpdateContext } from './context/complianceUpdateContext';
 import { sessionExpirationContext } from './context/sessionExpirationContext';
 import { switchAccountSessionContext } from './context/switchAccountSessionContext';
-import { useIsIAMEnabled } from './features/IAM/hooks/useIsIAMEnabled';
 import { TOPMENU_HEIGHT } from './features/TopMenu/constants';
 import { useGlobalErrors } from './hooks/useGlobalErrors';
 import { migrationRouter } from './routes';
@@ -112,12 +111,6 @@ const LinodesRoutes = React.lazy(() =>
   }))
 );
 
-const IAM = React.lazy(() =>
-  import('src/features/IAM').then((module) => ({
-    default: module.IdentityAccessManagement,
-  }))
-);
-
 export const MainContent = () => {
   const contentRef = React.useRef<HTMLDivElement>(null);
   const { classes, cx } = useStyles();
@@ -153,8 +146,6 @@ export const MainContent = () => {
   const { data: accountSettings } = useAccountSettings();
   const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
 
-  const { isIAMEnabled } = useIsIAMEnabled();
-
   const isNarrowViewport = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down(960)
   );
@@ -286,9 +277,6 @@ export const MainContent = () => {
                                   component={LinodesRoutes}
                                   path="/linodes"
                                 />
-                                {isIAMEnabled && (
-                                  <Route component={IAM} path="/iam" />
-                                )}
                                 <Redirect exact from="/" to={defaultRoot} />
                                 {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
                                 <Redirect from="/dashboard" to={defaultRoot} />

packages/manager/src/dev-tools/ServiceWorkerTool.tsx

@@ -139,7 +139,7 @@ export const ServiceWorkerTool = () => {
       JSON.stringify(currentNotificationsData) !==
       JSON.stringify(customNotificationsData);
 
-    const hasCustomUserAccountPermissionsChanges = 
+    const hasCustomUserAccountPermissionsChanges =
       JSON.stringify(currentUserAccountPermissionsData) !==
       JSON.stringify(customUserAccountPermissionsData);
     const hasCustomUserEntityPermissionsChanges =

packages/manager/src/features/IAM/IAMLanding.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { matchPath, useHistory, useLocation } from 'react-router-dom';
 
-import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 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 { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList';
+import { useTabs } from 'src/hooks/useTabs';
 
 import { IAM_DOCS_LINK } from './Shared/constants';
 
@@ -24,31 +23,16 @@ const Roles = React.lazy(() =>
 );
 
 export const IdentityAccessLanding = React.memo(() => {
-  const history = useHistory();
-  const location = useLocation();
-
-  const tabs = [
+  const { tabs, tabIndex, handleTabChange } = useTabs([
     {
-      routeName: `/iam/users`,
+      to: `/iam/users`,
       title: 'Users',
     },
     {
-      routeName: `/iam/roles`,
+      to: `/iam/roles`,
       title: 'Roles',
     },
-  ];
-
-  const navToURL = (index: number) => {
-    history.push(tabs[index].routeName);
-  };
-
-  const getDefaultTabIndex = () => {
-    return (
-      tabs.findIndex((tab) =>
-        Boolean(matchPath(tab.routeName, { path: location.pathname }))
-      ) || 0
-    );
-  };
+  ]);
 
   const landingHeaderProps = {
     breadcrumbProps: {
@@ -63,11 +47,9 @@ export const IdentityAccessLanding = React.memo(() => {
 
   return (
     <>
-      <DocumentTitleSegment segment="Identity and Access" />
       <LandingHeader {...landingHeaderProps} spacingBottom={4} />
-
-      <Tabs index={getDefaultTabIndex()} onChange={navToURL}>
-        <TabLinkList tabs={tabs} />
+      <Tabs index={tabIndex} onChange={handleTabChange}>
+        <TanStackTabLinkList tabs={tabs} />
 
         <React.Suspense fallback={<SuspenseLoader />}>
           <TabPanels>

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

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import React from 'react';
 
 import { accountRolesFactory } from 'src/factories/accountRoles';
-import { renderWithTheme } from 'src/utilities/testHelpers';
+import { renderWithThemeAndRouter } from 'src/utilities/testHelpers';
 
 import { RolesLanding } from './Roles';
 
@@ -33,25 +33,25 @@ beforeEach(() => {
 });
 
 describe('RolesLanding', () => {
-  it('renders loading state when permissions are loading', () => {
+  it('renders loading state when permissions are loading', async () => {
     queryMocks.useAccountRoles.mockReturnValue({
       data: null,
       isLoading: true,
     });
 
-    renderWithTheme(<RolesLanding />);
+    await renderWithThemeAndRouter(<RolesLanding />);
 
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('renders roles table when permissions are loaded', () => {
+  it('renders roles table when permissions are loaded', async () => {
     const mockPermissions = accountRolesFactory.build();
     queryMocks.useAccountRoles.mockReturnValue({
       data: mockPermissions,
       isLoading: false,
     });
 
-    renderWithTheme(<RolesLanding />);
+    await renderWithThemeAndRouter(<RolesLanding />);
     // RolesTable has a textbox at the top
     expect(screen.getByRole('textbox')).toBeInTheDocument();
   });

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

@@ -1,7 +1,7 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { renderWithTheme } from 'src/utilities/testHelpers';
+import { renderWithThemeAndRouter } from 'src/utilities/testHelpers';
 
 import { RolesTable } from './RolesTable';
 
@@ -43,27 +43,26 @@ beforeEach(() => {
 });
 
 describe('RolesTable', () => {
-  it('renders no roles when roles array is empty', () => {
-    const { getByText, getByTestId } = renderWithTheme(
+  it('renders no roles when roles array is empty', async () => {
+    const { getByText, getByTestId } = await renderWithThemeAndRouter(
       <RolesTable roles={[]} />
     );
 
     expect(getByTestId('roles-table')).toBeInTheDocument();
     expect(getByText('No items to display.')).toBeInTheDocument();
   });
 
-  it('renders roles correctly when roles array is provided', () => {
-    const { getByText, getByTestId, getAllByRole } = renderWithTheme(
-      <RolesTable roles={mockRoles} />
-    );
+  it('renders roles correctly when roles array is provided', async () => {
+    const { getByText, getByTestId, getAllByRole } =
+      await renderWithThemeAndRouter(<RolesTable roles={mockRoles} />);
 
     expect(getByTestId('roles-table')).toBeInTheDocument();
     expect(getAllByRole('combobox').length).toEqual(1);
     expect(getByText('Account volume admin')).toBeInTheDocument();
   });
 
   it('filters roles to warranted results based on search input', async () => {
-    renderWithTheme(<RolesTable roles={mockRoles} />);
+    await renderWithThemeAndRouter(<RolesTable roles={mockRoles} />);
     const searchInput: HTMLInputElement = screen.getByPlaceholderText('Search');
     fireEvent.change(searchInput, { target: { value: 'Account' } });
 
@@ -78,7 +77,7 @@ describe('RolesTable', () => {
   });
 
   it('filters roles to no results based on search input if warranted', async () => {
-    renderWithTheme(<RolesTable roles={mockRoles} />);
+    await renderWithThemeAndRouter(<RolesTable roles={mockRoles} />);
 
     const searchInput: HTMLInputElement = screen.getByPlaceholderText('Search');
     fireEvent.change(searchInput, {

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

@@ -24,7 +24,7 @@ import {
   getFacadeRoleDescription,
   mapEntityTypesForSelect,
 } from 'src/features/IAM/Shared/utilities';
-import { usePagination } from 'src/hooks/usePagination';
+import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
 import { ROLES_TABLE_PREFERENCE_KEY } from '../../Shared/constants';
 
@@ -52,7 +52,11 @@ export const RolesTable = ({ roles = [] }: Props) => {
   const [selectedRows, setSelectedRows] = useState<RoleView[]>([]);
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
 
-  const pagination = usePagination(1, ROLES_TABLE_PREFERENCE_KEY);
+  const pagination = usePaginationV2({
+    currentRoute: '/iam/roles',
+    initialPage: 1,
+    preferenceKey: ROLES_TABLE_PREFERENCE_KEY,
+  });
 
   // Filtering
   const getFilteredRows = (

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

@@ -6,12 +6,13 @@ import { accountEntityFactory } from 'src/factories/accountEntities';
 import { accountRolesFactory } from 'src/factories/accountRoles';
 import { userRolesFactory } from 'src/factories/userRoles';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
-import { renderWithTheme } from 'src/utilities/testHelpers';
+import { renderWithThemeAndRouter } from 'src/utilities/testHelpers';
 
 import { AssignedRolesTable } from './AssignedRolesTable';
 
 const queryMocks = vi.hoisted(() => ({
   useAccountEntities: vi.fn().mockReturnValue({}),
+  useParams: vi.fn().mockReturnValue({}),
   useAccountRoles: vi.fn().mockReturnValue({}),
   useUserRoles: vi.fn().mockReturnValue({}),
 }));
@@ -33,6 +34,14 @@ vi.mock('src/queries/entities/entities', async () => {
   };
 });
 
+vi.mock('@tanstack/react-router', async () => {
+  const actual = await vi.importActual('@tanstack/react-router');
+  return {
+    ...actual,
+    useParams: queryMocks.useParams,
+  };
+});
+
 const mockEntities = [
   accountEntityFactory.build({
     id: 7,
@@ -46,12 +55,18 @@ const mockEntities = [
 ];
 
 describe('AssignedRolesTable', () => {
+  beforeEach(() => {
+    queryMocks.useParams.mockReturnValue({
+      username: 'test_user',
+    });
+  });
+
   it('should display no roles text if there are no roles assigned to user', async () => {
     queryMocks.useUserRoles.mockReturnValue({
       data: {},
     });
 
-    renderWithTheme(<AssignedRolesTable />);
+    await renderWithThemeAndRouter(<AssignedRolesTable />);
 
     expect(screen.getByText('No items to display.')).toBeVisible();
   });
@@ -69,7 +84,7 @@ describe('AssignedRolesTable', () => {
       data: makeResourcePage(mockEntities),
     });
 
-    renderWithTheme(<AssignedRolesTable />);
+    await renderWithThemeAndRouter(<AssignedRolesTable />);
 
     expect(screen.getByText('account_linode_admin')).toBeVisible();
     expect(screen.getAllByText('All Linodes')[0]).toBeVisible();
@@ -97,7 +112,7 @@ describe('AssignedRolesTable', () => {
       data: makeResourcePage(mockEntities),
     });
 
-    renderWithTheme(<AssignedRolesTable />);
+    await renderWithThemeAndRouter(<AssignedRolesTable />);
 
     const searchInput = screen.getByPlaceholderText('Search');
     await userEvent.type(searchInput, 'NonExistentRole');
@@ -120,7 +135,7 @@ describe('AssignedRolesTable', () => {
       data: makeResourcePage(mockEntities),
     });
 
-    renderWithTheme(<AssignedRolesTable />);
+    await renderWithThemeAndRouter(<AssignedRolesTable />);
 
     const searchInput = screen.getByPlaceholderText('Search');
     await userEvent.type(searchInput, 'account_linode_admin');
@@ -143,7 +158,7 @@ describe('AssignedRolesTable', () => {
       data: makeResourcePage(mockEntities),
     });
 
-    renderWithTheme(<AssignedRolesTable />);
+    await renderWithThemeAndRouter(<AssignedRolesTable />);
 
     const autocomplete = screen.getByPlaceholderText('All Assigned Roles');
     await userEvent.type(autocomplete, 'Firewall Roles');

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

@@ -1,8 +1,8 @@
 import { Button, CircleProgress, Select, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
+import { useNavigate, useParams } from '@tanstack/react-router';
 import React from 'react';
-import { useHistory, useParams } from 'react-router-dom';
 
 import { CollapsibleTable } from 'src/components/CollapsibleTable/CollapsibleTable';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
@@ -13,7 +13,7 @@ import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableSortCell } from 'src/components/TableSortCell/TableSortCell';
-import { usePagination } from 'src/hooks/usePagination';
+import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 import { useAccountEntities } from 'src/queries/entities/entities';
 import { useAccountRoles, useUserRoles } from 'src/queries/iam/iam';
 
@@ -63,15 +63,19 @@ const ALL_ROLES_OPTION: SelectOption = {
 };
 
 export const AssignedRolesTable = () => {
-  const { username } = useParams<{ username: string }>();
-  const history = useHistory();
+  const { username } = useParams({ from: '/iam/users/$username' });
+  const navigate = useNavigate();
   const theme = useTheme();
 
   const [order, setOrder] = React.useState<'asc' | 'desc'>('asc');
   const [orderBy, setOrderBy] = React.useState<OrderByKeys>('name');
   const [isInitialLoad, setIsInitialLoad] = React.useState(true);
 
-  const pagination = usePagination(1, ASSIGNED_ROLES_TABLE_PREFERENCE_KEY);
+  const pagination = usePaginationV2({
+    currentRoute: '/iam/users/$username/roles',
+    initialPage: 1,
+    preferenceKey: ASSIGNED_ROLES_TABLE_PREFERENCE_KEY,
+  });
 
   const handleOrderChange = (newOrderBy: OrderByKeys) => {
     if (orderBy === newOrderBy) {
@@ -163,9 +167,10 @@ export const AssignedRolesTable = () => {
     roleName: AccountAccessRole | EntityAccessRole
   ) => {
     const selectedRole = roleName;
-    history.push({
-      pathname: `/iam/users/${username}/entities`,
-      state: { selectedRole },
+    navigate({
+      to: '/iam/users/$username/entities',
+      params: { username },
+      search: { selectedRole },
     });
   };