refactor: [M3-9531] - Nodebalancer routing (Tanstack)

packages/manager/.changeset/pr-11858-tech-stories-1742221656603.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Nodebalancer routing (Tanstack) ([#11858](https://github.com/linode/manager/pull/11858))

packages/manager/.eslintrc.cjs

@@ -146,6 +146,7 @@ module.exports = {
         'src/features/Firewalls/**/*',
         'src/features/Images/**/*',
         'src/features/Longview/**/*',
+        'src/features/NodeBalancers/**/*',
         'src/features/PlacementGroups/**/*',
         'src/features/StackScripts/**/*',
         'src/features/Volumes/**/*',

packages/manager/src/MainContent.tsx

@@ -129,9 +129,6 @@ const Profile = React.lazy(() =>
     default: module.Profile,
   }))
 );
-const NodeBalancers = React.lazy(
-  () => import('src/features/NodeBalancers/NodeBalancers')
-);
 const SupportTickets = React.lazy(
   () => import('src/features/Support/SupportTickets')
 );
@@ -368,10 +365,6 @@ export const MainContent = () => {
                         <React.Suspense fallback={<SuspenseLoader />}>
                           <Switch>
                             <Route component={LinodesRoutes} path="/linodes" />
-                            <Route
-                              component={NodeBalancers}
-                              path="/nodebalancers"
-                            />
                             <Route component={Managed} path="/managed" />
                             <Route
                               component={ObjectStorage}

packages/manager/src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog.tsx

@@ -1,28 +1,37 @@
+import {
+  linodeQueries,
+  nodebalancerQueries,
+  useRemoveFirewallDeviceMutation,
+} from '@linode/queries';
 import { ActionsPanel, Typography } from '@linode/ui';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import {
-  useRemoveFirewallDeviceMutation,
-  linodeQueries,
-  nodebalancerQueries,
-} from '@linode/queries';
 
 import type { FirewallDevice } from '@linode/api-v4';
 
 export interface Props {
   device: FirewallDevice | undefined;
   firewallId: number;
   firewallLabel: string;
+  isFetching?: boolean;
   onClose: () => void;
   onService: boolean | undefined;
   open: boolean;
 }
 
 export const RemoveDeviceDialog = React.memo((props: Props) => {
-  const { device, firewallId, firewallLabel, onClose, onService, open } = props;
+  const {
+    device,
+    firewallId,
+    firewallLabel,
+    isFetching,
+    onClose,
+    onService,
+    open,
+  } = props;
 
   const { enqueueSnackbar } = useSnackbar();
   const deviceType = device?.entity.type;
@@ -105,6 +114,7 @@ export const RemoveDeviceDialog = React.memo((props: Props) => {
         />
       }
       error={error?.[0]?.reason}
+      isFetching={isFetching}
       onClose={onClose}
       open={open}
       title={dialogTitle}

packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx

@@ -4,6 +4,18 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import NodeBalancerCreate from './NodeBalancerCreate';
 
+const queryMocks = vi.hoisted(() => ({
+  useNavigate: vi.fn(() => vi.fn()),
+}));
+
+vi.mock('@tanstack/react-router', async () => {
+  const actual = await vi.importActual('@tanstack/react-router');
+  return {
+    ...actual,
+    useNavigate: queryMocks.useNavigate,
+  };
+});
+
 // Note: see nodeblaancers-create-in-complex-form.spec.ts for an e2e test of this flow
 describe('NodeBalancerCreate', () => {
   it('renders all parts of the NodeBalancerCreate page', () => {

packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx

@@ -20,10 +20,9 @@ import {
 import { scrollErrorIntoView } from '@linode/utilities';
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { createLazyRoute } from '@tanstack/react-router';
+import { useNavigate } from '@tanstack/react-router';
 import { append, clone, compose, defaultTo, lensPath, over } from 'ramda';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
 
 import { CheckoutSummary } from 'src/components/CheckoutSummary/CheckoutSummary';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
@@ -98,6 +97,7 @@ const defaultFieldsStates = {
 };
 
 const NodeBalancerCreate = () => {
+  const navigate = useNavigate();
   const { data: agreements } = useAccountAgreements();
   const { data: profile } = useProfile();
   const { data: regions } = useRegionsQuery();
@@ -109,8 +109,6 @@ const NodeBalancerCreate = () => {
     mutateAsync: createNodeBalancer,
   } = useNodebalancerCreateMutation();
 
-  const history = useHistory();
-
   const [
     nodeBalancerFields,
     setNodeBalancerFields,
@@ -303,7 +301,10 @@ const NodeBalancerCreate = () => {
 
     createNodeBalancer(nodeBalancerRequestData)
       .then((nodeBalancer) => {
-        history.push(`/nodebalancers/${nodeBalancer.id}/summary`);
+        navigate({
+          params: { id: String(nodeBalancer.id) },
+          to: '/nodebalancers/$id/summary',
+        });
         // Analytics Event
         sendCreateNodeBalancerEvent(`Region: ${nodeBalancer.region}`);
       })
@@ -807,10 +808,4 @@ export const fieldErrorsToNodePathErrors = (errors: APIError[]) => {
   }, []);
 };
 
-export const nodeBalancerCreateLazyRoute = createLazyRoute(
-  '/nodebalancers/create'
-)({
-  component: NodeBalancerCreate,
-});
-
 export default NodeBalancerCreate;

packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx

@@ -1,22 +1,25 @@
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
+import { nodeBalancerFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { NodeBalancerDeleteDialog } from './NodeBalancerDeleteDialog';
 
 import type { ManagerPreferences } from '@linode/utilities';
 
 const props = {
-  id: 1,
-  label: 'nb-1',
-  onClose: vi.fn(),
+  isFetching: false,
   open: true,
+  selectedNodeBalancer: nodeBalancerFactory.build(),
 };
 
 const preference: ManagerPreferences['type_to_confirm'] = true;
 
+const navigate = vi.fn();
 const queryMocks = vi.hoisted(() => ({
+  useMatch: vi.fn(() => ({})),
+  useNavigate: vi.fn(() => navigate),
   usePreferences: vi.fn().mockReturnValue({}),
 }));
 
@@ -28,6 +31,15 @@ vi.mock('@linode/queries', async () => {
   };
 });
 
+vi.mock('@tanstack/react-router', async () => {
+  const actual = await vi.importActual('@tanstack/react-router');
+  return {
+    ...actual,
+    useMatch: queryMocks.useMatch,
+    useNavigate: queryMocks.useNavigate,
+  };
+});
+
 queryMocks.usePreferences.mockReturnValue({
   data: preference,
 });
@@ -50,7 +62,7 @@ describe('NodeBalancerDeleteDialog', () => {
         'Traffic will no longer be routed through this NodeBalancer. Please check your DNS settings and either provide the IP address of another active NodeBalancer, or route traffic directly to your Linode.'
       )
     ).toBeVisible();
-    expect(getByText('Delete nb-1?')).toBeVisible();
+    expect(getByText('Delete nodebalancer-id-1?')).toBeVisible();
     expect(getByText('NodeBalancer Label')).toBeVisible();
     expect(getByText('Cancel')).toBeVisible();
     expect(getByText('Delete')).toBeVisible();
@@ -62,6 +74,6 @@ describe('NodeBalancerDeleteDialog', () => {
     );
 
     await userEvent.click(getByText('Cancel'));
-    expect(props.onClose).toHaveBeenCalled();
+    expect(navigate).toHaveBeenCalled();
   });
 });

packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx

@@ -1,30 +1,36 @@
+import { useNodebalancerDeleteMutation } from '@linode/queries';
 import { Notice, Typography } from '@linode/ui';
+import { useMatch, useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
 
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
-import { useNodebalancerDeleteMutation } from '@linode/queries';
+
+import type { NodeBalancer } from '@linode/api-v4';
 
 interface Props {
-  id: number;
-  label: string;
-  onClose: () => void;
+  isFetching: boolean;
   open: boolean;
+  selectedNodeBalancer: NodeBalancer | undefined;
 }
 
 export const NodeBalancerDeleteDialog = ({
-  id,
-  label,
-  onClose,
+  isFetching,
   open,
+  selectedNodeBalancer,
 }: Props) => {
-  const { error, isPending, mutateAsync } = useNodebalancerDeleteMutation(id);
-  const { push } = useHistory();
+  const navigate = useNavigate();
+  const match = useMatch({
+    strict: false,
+  });
+  const { error, isPending, mutateAsync } = useNodebalancerDeleteMutation(
+    selectedNodeBalancer?.id ?? -1
+  );
+
+  const label = selectedNodeBalancer?.label;
 
   const onDelete = async () => {
     await mutateAsync();
-    onClose();
-    push('/nodebalancers');
+    navigate({ to: '/nodebalancers' });
   };
 
   return (
@@ -35,12 +41,20 @@ export const NodeBalancerDeleteDialog = ({
         primaryBtnText: 'Delete',
         type: 'NodeBalancer',
       }}
+      onClose={
+        match.routeId === '/nodebalancers/$id/settings/delete'
+          ? () =>
+              navigate({
+                params: { id: String(selectedNodeBalancer?.id) },
+                to: '/nodebalancers/$id/settings',
+              })
+          : () => navigate({ to: '/nodebalancers' })
+      }
       errors={error ?? undefined}
       expand
       label={'NodeBalancer Label'}
-      loading={isPending}
+      loading={isPending || isFetching}
       onClick={onDelete}
-      onClose={onClose}
       open={open}
       title={`Delete ${label}?`}
       typographyStyle={{ marginTop: '20px' }}

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.test.tsx

@@ -16,6 +16,9 @@ const props = {
   grants: undefined,
   nodeBalancerLabel: 'nb-1',
   nodeBalancerRegion: 'us-east',
+  params: {
+    nodeBalancerId: '1',
+  },
 };
 
 const loadingTestId = 'circle-progress';