tech-story: [M3-9052] - Migrate PlacementGroups to Tanstack router

packages/manager/.changeset/pr-11474-tech-stories-1736547433123.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Refactor routing for Placement Groups to use Tanstack Router ([#11474](https://github.com/linode/manager/pull/11474))

packages/manager/.eslintrc.cjs

@@ -91,6 +91,7 @@ module.exports = {
         // for each new features added to the migration router, add its directory here
         'src/features/Betas/**/*',
         'src/features/Domains/**/*',
+        'src/features/PlacementGroups/**/*',
         'src/features/Volumes/**/*',
       ],
       rules: {
@@ -122,12 +123,6 @@ module.exports = {
                   'Please use routing utilities from @tanstack/react-router.',
                 name: 'react-router-dom',
               },
-              {
-                importNames: ['renderWithTheme'],
-                message:
-                  'Please use the wrapWithThemeAndRouter helper function for testing components being migrated to TanStack Router.',
-                name: 'src/utilities/testHelpers',
-              },
             ],
           },
         ],

packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts

@@ -155,7 +155,7 @@ describe('resize linode', () => {
     });
   });
 
-  it.only('resizes a linode by decreasing size', () => {
+  it('resizes a linode by decreasing size', () => {
     // Use `vlan_no_internet` security method.
     // This works around an issue where the Linode API responds with a 400
     // when attempting to interact with it shortly after booting up when the

packages/manager/cypress/e2e/core/placementGroups/delete-placement-groups.spec.ts

@@ -5,6 +5,7 @@
 import { mockGetAccount } from 'support/intercepts/account';
 import {
   mockDeletePlacementGroup,
+  mockGetPlacementGroup,
   mockGetPlacementGroups,
   mockUnassignPlacementGroupLinodes,
   mockDeletePlacementGroupError,
@@ -62,6 +63,7 @@ describe('Placement Group deletion', () => {
     });
 
     mockGetPlacementGroups([mockPlacementGroup]).as('getPlacementGroups');
+    mockGetPlacementGroup(mockPlacementGroup).as('getPlacementGroup');
 
     cy.visitWithLogin('/placement-groups');
     cy.wait('@getPlacementGroups');
@@ -172,6 +174,7 @@ describe('Placement Group deletion', () => {
     mockGetPlacementGroups([mockPlacementGroup, secondMockPlacementGroup]).as(
       'getPlacementGroups'
     );
+    mockGetPlacementGroup(mockPlacementGroup).as('getPlacementGroup');
 
     cy.visitWithLogin('/placement-groups');
     cy.wait(['@getPlacementGroups', '@getLinodes']);
@@ -296,6 +299,9 @@ describe('Placement Group deletion', () => {
               placementGroupAfterUnassignment,
               secondMockPlacementGroup,
             ]).as('getPlacementGroups');
+            mockGetPlacementGroup(placementGroupAfterUnassignment).as(
+              'getPlacementGroups'
+            );
 
             cy.findByText(mockLinode.label)
               .should('be.visible')
@@ -363,6 +369,7 @@ describe('Placement Group deletion', () => {
     });
 
     mockGetPlacementGroups([mockPlacementGroup]).as('getPlacementGroups');
+    mockGetPlacementGroup(mockPlacementGroup).as('getPlacementGroup');
 
     cy.visitWithLogin('/placement-groups');
     cy.wait('@getPlacementGroups');
@@ -488,6 +495,7 @@ describe('Placement Group deletion', () => {
     mockGetPlacementGroups([mockPlacementGroup, secondMockPlacementGroup]).as(
       'getPlacementGroups'
     );
+    mockGetPlacementGroup(mockPlacementGroup).as('getPlacementGroup');
 
     cy.visitWithLogin('/placement-groups');
     cy.wait(['@getPlacementGroups', '@getLinodes']);

packages/manager/cypress/e2e/core/placementGroups/placement-groups-linode-assignment.spec.ts

@@ -378,6 +378,7 @@ describe('Placement Groups Linode assignment', () => {
 
     mockGetRegions(mockRegions);
     mockGetLinodes(mockLinodes);
+    mockGetLinodeDetails(mockLinodeUnassigned.id, mockLinodeUnassigned);
     mockGetPlacementGroups([mockPlacementGroup]);
     mockGetPlacementGroup(mockPlacementGroup).as('getPlacementGroup');
 

packages/manager/cypress/e2e/core/placementGroups/update-placement-group-label.spec.ts

@@ -4,6 +4,7 @@
 
 import { randomLabel, randomNumber } from 'support/util/random';
 import {
+  mockGetPlacementGroup,
   mockGetPlacementGroups,
   mockUpdatePlacementGroup,
   mockUpdatePlacementGroupError,
@@ -48,6 +49,7 @@ describe('Placement Group update label flow', () => {
     };
 
     mockGetPlacementGroups([mockPlacementGroup]).as('getPlacementGroups');
+    mockGetPlacementGroup(mockPlacementGroup).as('getPlacementGroup');
 
     mockUpdatePlacementGroup(
       mockPlacementGroup.id,
@@ -114,6 +116,7 @@ describe('Placement Group update label flow', () => {
     };
 
     mockGetPlacementGroups([mockPlacementGroup]).as('getPlacementGroups');
+    mockGetPlacementGroup(mockPlacementGroup).as('getPlacementGroup');
 
     mockUpdatePlacementGroupError(
       mockPlacementGroup.id,

packages/manager/src/MainContent.tsx

@@ -32,7 +32,6 @@ import { switchAccountSessionContext } from './context/switchAccountSessionConte
 import { useIsACLPEnabled } from './features/CloudPulse/Utils/utils';
 import { useIsDatabasesEnabled } from './features/Databases/utilities';
 import { useIsIAMEnabled } from './features/IAM/Shared/utilities';
-import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
 import { useGlobalErrors } from './hooks/useGlobalErrors';
 import { useAccountSettings } from './queries/account/settings';
 import { useProfile } from './queries/profile/profile';
@@ -180,11 +179,6 @@ const AccountActivationLanding = React.lazy(
 const Firewalls = React.lazy(() => import('src/features/Firewalls'));
 const Databases = React.lazy(() => import('src/features/Databases'));
 const VPC = React.lazy(() => import('src/features/VPCs'));
-const PlacementGroups = React.lazy(() =>
-  import('src/features/PlacementGroups').then((module) => ({
-    default: module.PlacementGroups,
-  }))
-);
 
 const CloudPulse = React.lazy(() =>
   import('src/features/CloudPulse/CloudPulseLanding').then((module) => ({
@@ -230,7 +224,6 @@ export const MainContent = () => {
   const username = profile?.username || '';
 
   const { isDatabasesEnabled } = useIsDatabasesEnabled();
-  const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
 
   const { data: accountSettings } = useAccountSettings();
   const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
@@ -328,12 +321,6 @@ export const MainContent = () => {
                       <React.Suspense fallback={<SuspenseLoader />}>
                         <Switch>
                           <Route component={LinodesRoutes} path="/linodes" />
-                          {isPlacementGroupsEnabled && (
-                            <Route
-                              component={PlacementGroups}
-                              path="/placement-groups"
-                            />
-                          )}
                           <Route
                             component={NodeBalancers}
                             path="/nodebalancers"

packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.test.tsx

@@ -120,8 +120,8 @@ describe('PlacementGroupsAssignLinodesDrawer', () => {
     const { getByPlaceholderText, getByRole, getByText } = renderWithTheme(
       <PlacementGroupsAssignLinodesDrawer
         selectedPlacementGroup={placementGroupFactory.build({
-          placement_group_type: 'anti_affinity:local',
           label: 'PG-1',
+          placement_group_type: 'anti_affinity:local',
           region: 'us-east',
         })}
         onClose={vi.fn()}

packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.test.tsx

@@ -46,7 +46,7 @@ describe('PlacementGroupsCreateDrawer', () => {
     expect(radioInputs[0]).toBeChecked();
   });
 
-  it('Placement Group Type select should have the correct options', async () => {
+  it('Placement Group Type select should have the correct options', () => {
     const { getByPlaceholderText, getByText } = renderWithTheme(
       <PlacementGroupsCreateDrawer {...commonProps} />
     );
@@ -107,9 +107,9 @@ describe('PlacementGroupsCreateDrawer', () => {
       expect(
         queryMocks.useCreatePlacementGroup().mutateAsync
       ).toHaveBeenCalledWith({
-        placement_group_type: 'anti_affinity:local',
-        placement_group_policy: 'strict',
         label: 'my-label',
+        placement_group_policy: 'strict',
+        placement_group_type: 'anti_affinity:local',
         region: 'us-east',
       });
     });

packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx

@@ -11,6 +11,7 @@ import { createPlacementGroupSchema } from '@linode/validation';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { useLocation } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';

packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx

@@ -45,7 +45,7 @@ const props = {
 };
 
 describe('PlacementGroupsDeleteModal', () => {
-  it('should render the right form elements', async () => {
+  it('should render the right form elements', () => {
     queryMocks.usePreferences.mockReturnValue({
       data: preference,
     });
@@ -73,6 +73,7 @@ describe('PlacementGroupsDeleteModal', () => {
           region: 'us-east',
         })}
         disableUnassignButton={false}
+        isFetching={false}
       />
     );
 
@@ -115,6 +116,7 @@ describe('PlacementGroupsDeleteModal', () => {
           placement_group_type: 'anti_affinity:local',
         })}
         disableUnassignButton={false}
+        isFetching={false}
       />
     );
 

packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx

@@ -1,15 +1,7 @@
-import {
-  Button,
-  CircleProgress,
-  List,
-  ListItem,
-  Notice,
-  Typography,
-} from '@linode/ui';
+import { Button, List, ListItem, Notice, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { RemovableSelectionsList } from 'src/components/RemovableSelectionsList/RemovableSelectionsList';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import {
@@ -28,6 +20,7 @@ import type { ButtonProps } from '@linode/ui';
 
 interface Props {
   disableUnassignButton: boolean;
+  isFetching: boolean;
   linodes: Linode[] | undefined;
   onClose: () => void;
   open: boolean;
@@ -37,6 +30,7 @@ interface Props {
 export const PlacementGroupsDeleteModal = (props: Props) => {
   const {
     disableUnassignButton,
+    isFetching,
     linodes,
     onClose,
     open,
@@ -105,28 +99,6 @@ export const PlacementGroupsDeleteModal = (props: Props) => {
     return null;
   }
 
-  if (!assignedLinodes) {
-    return (
-      <ConfirmationDialog
-        sx={{
-          '& .MuiDialog-paper': {
-            '& > .MuiDialogContent-root > div': {
-              maxHeight: 300,
-              padding: 4,
-            },
-            maxHeight: 500,
-            width: 500,
-          },
-        }}
-        onClose={handleClose}
-        open={open}
-        title="Delete Placement Group"
-      >
-        <CircleProgress />
-      </ConfirmationDialog>
-    );
-  }
-
   return (
     <TypeToConfirmDialog
       entity={{
@@ -138,6 +110,7 @@ export const PlacementGroupsDeleteModal = (props: Props) => {
       disableTypeToConfirmInput={isDisabled}
       disableTypeToConfirmSubmit={isDisabled}
       expand
+      isFetching={isFetching}
       label="Placement Group"
       loading={deletePlacementLoading}
       onClick={onDelete}

packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx

@@ -5,15 +5,16 @@ import {
   placementGroupFactory,
   regionFactory,
 } from 'src/factories';
-import { renderWithTheme } from 'src/utilities/testHelpers';
+import { renderWithThemeAndRouter } from 'src/utilities/testHelpers';
 
 import { PlacementGroupsDetail } from './PlacementGroupsDetail';
 
 const queryMocks = vi.hoisted(() => ({
   useAllLinodesQuery: vi.fn().mockReturnValue({}),
-  useParams: vi.fn().mockReturnValue({}),
+  useParams: vi.fn().mockReturnValue({ id: 1 }),
   usePlacementGroupQuery: vi.fn().mockReturnValue({}),
   useRegionsQuery: vi.fn().mockReturnValue({}),
+  useSearch: vi.fn().mockReturnValue({ query: undefined }),
 }));
 
 vi.mock('src/queries/placementGroups', async () => {
@@ -32,11 +33,12 @@ vi.mock('src/queries/linodes/linodes', async () => {
   };
 });
 
-vi.mock('react-router-dom', async () => {
-  const actual = await vi.importActual('react-router-dom');
+vi.mock('@tanstack/react-router', async () => {
+  const actual = await vi.importActual('@tanstack/react-router');
   return {
     ...actual,
     useParams: queryMocks.useParams,
+    useSearch: queryMocks.useSearch,
   };
 });
 
@@ -48,19 +50,20 @@ vi.mock('src/queries/regions/regions', async () => {
   };
 });
 
-describe('PlacementGroupsLanding', () => {
-  it('renders a error page', () => {
-    const { getByText } = renderWithTheme(<PlacementGroupsDetail />);
+describe('PlacementGroupsDetail', () => {
+  it('renders a error page', async () => {
+    const { getByText } = await renderWithThemeAndRouter(
+      <PlacementGroupsDetail />
+    );
 
     expect(getByText('Not Found')).toBeInTheDocument();
   });
 
-  it('renders a loading state', () => {
+  it('renders a loading state', async () => {
     queryMocks.usePlacementGroupQuery.mockReturnValue({
       data: placementGroupFactory.build({
         id: 1,
       }),
-
       isLoading: true,
     });
     queryMocks.useAllLinodesQuery.mockReturnValue({
@@ -80,31 +83,34 @@ describe('PlacementGroupsLanding', () => {
       ],
     });
 
-    const { getByRole } = renderWithTheme(<PlacementGroupsDetail />, {
-      MemoryRouter: {
-        initialEntries: [{ pathname: '/placement-groups/1' }],
-      },
-    });
+    const { getByRole } = await renderWithThemeAndRouter(
+      <PlacementGroupsDetail />
+    );
 
     expect(getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('renders breadcrumbs, docs link and tabs', () => {
+  it('renders breadcrumbs, docs link and tabs', async () => {
     queryMocks.usePlacementGroupQuery.mockReturnValue({
       data: placementGroupFactory.build({
-        placement_group_type: 'anti_affinity:local',
         id: 1,
         is_compliant: true,
         label: 'My first PG',
+        placement_group_type: 'anti_affinity:local',
       }),
     });
-
-    const { getByText } = renderWithTheme(<PlacementGroupsDetail />, {
-      MemoryRouter: {
-        initialEntries: [{ pathname: '/placement-groups/1' }],
-      },
+    queryMocks.useAllLinodesQuery.mockReturnValue({
+      data: [],
+      isLoading: false,
+      page: 1,
+      pages: 1,
+      results: 0,
     });
 
+    const { getByText } = await renderWithThemeAndRouter(
+      <PlacementGroupsDetail />
+    );
+
     expect(getByText(/my first pg/i)).toBeInTheDocument();
     expect(getByText(/docs/i)).toBeInTheDocument();
   });