revert: [M3-9080] - Tanstack routing for VPCs (#11991)

* revert: [M3-9080] - Tanstack routing for VPCs

* fix issues found

---------

Co-authored-by: Jaalah Ramos <[email protected]>
Co-authored-by: Connie Liu <[email protected]>

Author: 3 people

packages/manager/.changeset/pr-11906-fixed-1742567649683.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Pagination for subnets in VPC Subnet table ([#11906](https://github.com/linode/manager/pull/11906))

packages/manager/.changeset/pr-11906-fixed-1742567667084.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+IP incrementation in Subnet Create drawer ([#11906](https://github.com/linode/manager/pull/11906))

packages/manager/.changeset/pr-11906-tech-stories-1742567613345.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+VPC rerouting (TanStack) ([#11906](https://github.com/linode/manager/pull/11906))

packages/manager/.eslintrc.cjs

@@ -151,6 +151,7 @@ module.exports = {
         'src/features/PlacementGroups/**/*',
         'src/features/StackScripts/**/*',
         'src/features/Volumes/**/*',
+        'src/features/VPCs/**/*',
       ],
       rules: {
         'no-restricted-imports': [

packages/manager/cypress/e2e/core/vpc/vpc-details-page.spec.ts

@@ -11,6 +11,7 @@ import {
   mockDeleteSubnet,
   mockDeleteVPC,
   mockEditSubnet,
+  mockGetSubnet,
   mockGetSubnets,
   mockGetVPC,
   mockGetVPCs,
@@ -177,6 +178,7 @@ describe('VPC details page', () => {
     cy.findByText(mockVPC.label).should('be.visible');
     cy.findByText('Subnets (1)').should('be.visible');
     cy.findByText(mockSubnet.label).should('be.visible');
+    mockGetSubnet(mockVPC.id, mockSubnet.id, mockSubnet);
 
     // edit a subnet
     const mockEditedSubnet = subnetFactory.build({
@@ -201,6 +203,7 @@ describe('VPC details page', () => {
       .should('be.visible')
       .click();
     ui.actionMenuItem.findByTitle('Edit').should('be.visible').click();
+    mockGetSubnet(mockVPC.id, mockEditedSubnet.id, mockEditedSubnet);
 
     ui.drawer
       .findByTitle('Edit Subnet')

packages/manager/cypress/e2e/core/vpc/vpc-landing-page.spec.ts

@@ -3,6 +3,7 @@ import {
   MOCK_DELETE_VPC_ERROR,
   mockDeleteVPC,
   mockDeleteVPCError,
+  mockGetVPC,
   mockGetVPCs,
   mockUpdateVPC,
 } from 'support/intercepts/vpc';
@@ -100,6 +101,7 @@ describe('VPC landing page', () => {
     };
 
     mockGetVPCs([mockVPCs[1]]).as('getVPCs');
+    mockGetVPC(mockVPCs[1]).as('getVPC');
     mockUpdateVPC(mockVPCs[1].id, mockUpdatedVPC).as('updateVPC');
 
     cy.visitWithLogin('/vpcs');
@@ -165,6 +167,7 @@ describe('VPC landing page', () => {
 
     // Delete VPCs Flow
     mockGetVPCs(mockVPCs).as('getVPCs');
+    mockGetVPC(mockVPCs[0]).as('getVPC');
     mockDeleteVPC(mockVPCs[0].id).as('deleteVPC');
 
     cy.visitWithLogin('/vpcs');
@@ -254,6 +257,7 @@ describe('VPC landing page', () => {
     ];
 
     mockGetVPCs(mockVPCs).as('getVPCs');
+    mockGetVPC(mockVPCs[0]).as('getVPC');
     mockDeleteVPCError(mockVPCs[0].id).as('deleteVPCError');
 
     cy.visitWithLogin('/vpcs');
@@ -302,6 +306,7 @@ describe('VPC landing page', () => {
           .click();
       });
 
+    mockGetVPC(mockVPCs[1]).as('getVPC');
     cy.findByText(mockVPCs[1].label)
       .should('be.visible')
       .closest('tr')

packages/manager/cypress/e2e/core/vpc/vpc-linodes-update.spec.ts

@@ -19,6 +19,7 @@ import {
 import { mockGetLinodes } from 'support/intercepts/linodes';
 import {
   mockCreateSubnet,
+  mockGetSubnet,
   mockGetSubnets,
   mockGetVPC,
   mockGetVPCs,
@@ -110,6 +111,8 @@ describe('VPC assign/unassign flows', () => {
 
     cy.wait(['@createSubnet', '@getVPC', '@getSubnets', '@getLinodes']);
 
+    mockGetSubnet(mockVPC.id, mockSubnet.id, mockSubnet);
+
     // confirm that newly created subnet should now appear on VPC's detail page
     cy.findByText(mockVPC.label).should('be.visible');
     cy.findByText('Subnets (1)').should('be.visible');
@@ -231,6 +234,8 @@ describe('VPC assign/unassign flows', () => {
     cy.findByText('Subnets (1)').should('be.visible');
     cy.findByText(mockSubnet.label).should('be.visible');
 
+    mockGetSubnet(mockVPC.id, mockSubnet.id, mockSubnet);
+
     // unassign a linode to the subnet
     ui.actionMenu
       .findByTitle(`Action menu for Subnet ${mockSubnet.label}`)

packages/manager/cypress/support/intercepts/vpc.ts

@@ -132,6 +132,27 @@ export const mockGetSubnets = (
   );
 };
 
+/**
+ * Intercepts GET request to get a specific subnet and mocks response.
+ *
+ * @param vpcId - ID of VPC for which to mock response.
+ * @param subnetId - ID of subnet for which to mock response.
+ * @param subnet - Subnet for which to mock response
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetSubnet = (
+  vpcId: number,
+  subnetId: number,
+  subnet: Subnet
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'GET',
+    apiMatcher(`vpcs/${vpcId}/subnets/${subnetId}`),
+    subnet
+  );
+};
+
 /**
  * Intercepts DELETE request to delete a subnet of a VPC and mocks response
  *

packages/manager/src/MainContent.tsx

@@ -1,3 +1,9 @@
+import {
+  useAccountSettings,
+  useMutatePreferences,
+  usePreferences,
+  useProfile,
+} from '@linode/queries';
 import { Box } from '@linode/ui';
 import { useMediaQuery } from '@mui/material';
 import Grid from '@mui/material/Grid2';
@@ -24,12 +30,6 @@ import {
   useNotificationContext,
 } from 'src/features/NotificationCenter/NotificationCenterContext';
 import { TopMenu } from 'src/features/TopMenu/TopMenu';
-import {
-  useMutatePreferences,
-  usePreferences,
-  useAccountSettings,
-  useProfile,
-} from '@linode/queries';
 
 import { useIsPageScrollable } from './components/PrimaryNav/utils';
 import { ENABLE_MAINTENANCE_MODE } from './constants';
@@ -156,7 +156,6 @@ const AccountActivationLanding = React.lazy(
   () => import('src/components/AccountActivation/AccountActivationLanding')
 );
 const Databases = React.lazy(() => import('src/features/Databases'));
-const VPC = React.lazy(() => import('src/features/VPCs'));
 
 const CloudPulseMetrics = React.lazy(() =>
   import('src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding').then(
@@ -377,7 +376,6 @@ export const MainContent = () => {
                             {isDatabasesEnabled && (
                               <Route component={Databases} path="/databases" />
                             )}
-                            <Route component={VPC} path="/vpcs" />
                             {isACLPEnabled && (
                               <Route
                                 component={CloudPulseMetrics}

packages/manager/src/features/Linodes/PowerActionsDialogOrDrawer.tsx

@@ -1,23 +1,24 @@
+import {
+  useAllLinodeConfigsQuery,
+  useBootLinodeMutation,
+  useRebootLinodeMutation,
+  useShutdownLinodeMutation,
+} from '@linode/queries';
 import { ActionsPanel, Autocomplete, Notice, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Link } from 'src/components/Link';
 import { useEventsPollingActions } from 'src/queries/events/events';
-import {
-  useAllLinodeConfigsQuery,
-  useBootLinodeMutation,
-  useRebootLinodeMutation,
-  useShutdownLinodeMutation,
-} from '@linode/queries';
 
 import type { Config } from '@linode/api-v4/lib/linodes';
 
 export type Action = 'Power Off' | 'Power On' | 'Reboot';
 
 interface Props {
   action: Action;
+  isFetching?: boolean;
   isOpen: boolean;
   linodeId: number | undefined;
   linodeLabel?: string | undefined;
@@ -36,7 +37,7 @@ export const selectDefaultConfig = (configs?: Config[]) =>
   configs?.length === 1 ? configs[0].id : undefined;
 
 export const PowerActionsDialog = (props: Props) => {
-  const { action, isOpen, linodeId, linodeLabel, onClose } = props;
+  const { action, isFetching, isOpen, linodeId, linodeLabel, onClose } = props;
   const theme = useTheme();
 
   const {
@@ -139,6 +140,7 @@ export const PowerActionsDialog = (props: Props) => {
         />
       }
       error={error?.[0].reason}
+      isFetching={isFetching}
       onClose={handleOnClose}
       open={isOpen}
       title={`${action} Linode ${linodeLabel ?? ''}?`}
@@ -170,15 +172,15 @@ export const PowerActionsDialog = (props: Props) => {
           autoHighlight
           disablePortal={false}
           errorText={configsError?.[0].reason}
+          helperText="If no value is selected, the last booted config will be used."
           label="Config"
           loading={configsLoading}
           onChange={(_, option) => setSelectConfigID(option?.value ?? null)}
           options={configOptions}
-          helperText="If no value is selected, the last booted config will be used."
         />
       )}
       {props.action === 'Power Off' && (
-        <Notice variant="warning" spacingBottom={0}>
+        <Notice spacingBottom={0} variant="warning">
           <Typography>
             <strong>Note: </strong>Powered down Linodes will still accrue
             charges. See the&nbsp;

packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx

@@ -2,6 +2,7 @@ import { Notice } from '@linode/ui';
 import { getQueryParamsFromQueryString } from '@linode/utilities';
 import * as React from 'react';
 import { useFormContext } from 'react-hook-form';
+// eslint-disable-next-line no-restricted-imports
 import { useLocation } from 'react-router-dom';
 
 import { Link } from 'src/components/Link';

packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx

@@ -3,6 +3,7 @@ import { TextField } from '@linode/ui';
 import { getQueryParamsFromQueryString } from '@linode/utilities';
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
+// eslint-disable-next-line no-restricted-imports
 import { useLocation } from 'react-router-dom';
 
 import { Link } from 'src/components/Link';

packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx

@@ -43,8 +43,8 @@ export const SubnetNode = (props: Props) => {
     <Grid key={idx} sx={{ maxWidth: 460 }}>
       <Grid container direction="row" spacing={2}>
         <Grid
-          sx={{ ...(!showRemoveButton && { width: '100%' }), flexGrow: 1 }}
           size={showRemoveButton ? 11 : 12}
+          sx={{ ...(!showRemoveButton && { width: '100%' }), flexGrow: 1 }}
         >
           <Controller
             render={({ field, fieldState }) => (

packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx

@@ -1,7 +1,6 @@
 import { ActionsPanel, Notice, Paper } from '@linode/ui';
 import Grid from '@mui/material/Grid2';
 import { styled } from '@mui/material/styles';
-import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { FormProvider } from 'react-hook-form';
 
@@ -78,10 +77,6 @@ const VPCCreate = () => {
   );
 };
 
-export const vpcCreateLazyRoute = createLazyRoute('/vpcs/create')({
-  component: VPCCreate,
-});
-
 const StyledActionsPanel = styled(ActionsPanel, {
   label: 'StyledActionsPanel',
 })(({ theme }) => ({

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx

@@ -13,6 +13,7 @@ import type { Subnet } from '@linode/api-v4';
 beforeAll(() => mockMatchMedia());
 
 const props = {
+  isFetching: false,
   onClose: vi.fn(),
   open: true,
   subnet: {

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx

@@ -57,6 +57,7 @@ import type { ExtendedIP } from 'src/utilities/ipUtils';
 // @TODO VPC: if all subnet action menu item related components use (most of) this as their props, might be worth
 // putting this in a common file and naming it something like SubnetActionMenuItemProps or something
 interface SubnetAssignLinodesDrawerProps {
+  isFetching: boolean;
   onClose: () => void;
   open: boolean;
   subnet?: Subnet;
@@ -73,7 +74,7 @@ interface LinodeAndConfigData extends Linode {
 export const SubnetAssignLinodesDrawer = (
   props: SubnetAssignLinodesDrawerProps
 ) => {
-  const { onClose, open, subnet, vpcId, vpcRegion } = props;
+  const { isFetching, onClose, open, subnet, vpcId, vpcRegion } = props;
   const {
     invalidateQueries,
     setUnassignLinodesErrors,
@@ -413,6 +414,7 @@ export const SubnetAssignLinodesDrawer = (
         subnet?.ipv4 ?? subnet?.ipv6
       })`}
       NotFoundComponent={NotFound}
+      isFetching={isFetching}
       onClose={handleOnClose}
       open={open}
     >
@@ -444,12 +446,17 @@ export const SubnetAssignLinodesDrawer = (
           // We only want to be able to assign linodes that were not already assigned to this subnet
           options={linodeOptionsToAssign}
           placeholder="Select Linode or type to search"
-          sx={{ marginBottom: '8px' }}
+          sx={(theme) => ({ marginBottom: theme.spacingFunction(8) })}
           value={values.selectedLinode?.id || null}
         />
         {values.selectedLinode?.id && (
           <>
-            <Box alignItems="center" display="flex" flexDirection="row">
+            <Box
+              alignItems="center"
+              display="flex"
+              flexDirection="row"
+              sx={(theme) => ({ marginLeft: theme.spacingFunction(2) })}
+            >
               <FormControlLabel
                 control={
                   <Checkbox
@@ -477,7 +484,7 @@ export const SubnetAssignLinodesDrawer = (
                 disabled={userCannotAssignLinodes}
                 errorText={assignLinodesErrors['ipv4.vpc']}
                 label="VPC IPv4"
-                sx={{ marginBottom: '8px' }}
+                sx={(theme) => ({ marginBottom: theme.spacingFunction(8) })}
                 value={values.chosenIP}
               />
             )}
@@ -511,11 +518,11 @@ export const SubnetAssignLinodesDrawer = (
               linodeConfigs.length === 1) && (
               <AssignIPRanges
                 sx={{
-                  marginBottom: theme.spacing(),
+                  marginBottom: theme.spacingFunction(8),
                   marginTop:
                     linodeConfigs.length > 1
-                      ? theme.spacing(2)
-                      : theme.spacing(),
+                      ? theme.spacingFunction(16)
+                      : theme.spacingFunction(8),
                 }}
                 handleIPRangeChange={handleIPRangeChange}
                 ipRanges={values.ipRanges}

packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx

@@ -61,12 +61,12 @@ export const SubnetCreateDrawer = (props: Props) => {
     setError,
     watch,
   } = useForm<CreateSubnetPayload>({
-    defaultValues: {
+    mode: 'onBlur',
+    resolver: yupResolver(createSubnetSchemaIPv4),
+    values: {
       ipv4: recommendedIPv4,
       label: '',
     },
-    mode: 'onBlur',
-    resolver: yupResolver(createSubnetSchemaIPv4),
   });
 
   const ipv4 = watch('ipv4');

packages/manager/src/features/VPCs/VPCDetail/SubnetDeleteDialog.test.tsx

@@ -8,6 +8,7 @@ import { SubnetDeleteDialog } from './SubnetDeleteDialog';
 import type { ManagerPreferences } from '@linode/utilities';
 
 const props = {
+  isFetching: false,
   onClose: vi.fn(),
   open: true,
   subnet: subnetFactory.build({ label: 'some subnet' }),