refactor: [M3-9994] - Remove recompose from NodeBalancers

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

@@ -19,7 +19,7 @@ const node: NodeBalancerConfigNodeFields = {
   label: '',
   mode: 'accept',
   modifyStatus: 'new',
-  port: 80,
+  port: '80',
   weight: 100,
 };
 

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import NodeBalancerCreate from './NodeBalancerCreate';
+import { NodeBalancerCreate } from './NodeBalancerCreate';
 
 const queryMocks = vi.hoisted(() => ({
   useNavigate: vi.fn(() => vi.fn()),

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

@@ -21,7 +21,7 @@ import {
 import { scrollErrorIntoView } from '@linode/utilities';
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useNavigate } from '@tanstack/react-router';
+import { createLazyRoute, useNavigate } from '@tanstack/react-router';
 import { append, clone, compose, defaultTo, lensPath, over } from 'ramda';
 import * as React from 'react';
 
@@ -98,7 +98,7 @@ const defaultFieldsStates = {
   configs: [createNewNodeBalancerConfig(true)],
 };
 
-const NodeBalancerCreate = () => {
+export const NodeBalancerCreate = () => {
   const flags = useFlags();
   const { isGeckoLAEnabled } = useIsGeckoEnabled(
     flags.gecko2?.enabled,
@@ -303,7 +303,7 @@ const NodeBalancerCreate = () => {
     createNodeBalancer(nodeBalancerRequestData)
       .then((nodeBalancer) => {
         navigate({
-          params: { id: String(nodeBalancer.id) },
+          params: { id: nodeBalancer.id },
           to: '/nodebalancers/$id/summary',
         });
         // Analytics Event
@@ -810,4 +810,8 @@ export const fieldErrorsToNodePathErrors = (errors: APIError[]) => {
   }, []);
 };
 
-export default NodeBalancerCreate;
+export const nodeBalancerCreateLazyRoute = createLazyRoute(
+  '/nodebalancers/create'
+)({
+  component: NodeBalancerCreate,
+});

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

@@ -1,38 +1,34 @@
-import { useNodebalancerDeleteMutation } from '@linode/queries';
+import {
+  useNodebalancerDeleteMutation,
+  useNodeBalancerQuery,
+} from '@linode/queries';
 import { Notice, Typography } from '@linode/ui';
-import { useMatch, useNavigate } from '@tanstack/react-router';
-import * as React from 'react';
+import React from 'react';
 
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 
-import type { APIError, NodeBalancer } from '@linode/api-v4';
-
 interface Props {
-  isFetching: boolean;
-  nodeBalancerError: APIError[] | null;
-  open: boolean;
-  selectedNodeBalancer: NodeBalancer | undefined;
+  id: number;
+  onClose: () => void;
+  onSuccess?: () => void;
 }
 
-export const NodeBalancerDeleteDialog = ({
-  isFetching,
-  nodeBalancerError,
-  open,
-  selectedNodeBalancer,
-}: Props) => {
-  const navigate = useNavigate();
-  const match = useMatch({
-    strict: false,
-  });
-  const { error, isPending, mutateAsync } = useNodebalancerDeleteMutation(
-    selectedNodeBalancer?.id ?? -1
-  );
+export const NodeBalancerDeleteDialog = (props: Props) => {
+  const { id, onSuccess, onClose } = props;
+
+  const {
+    data: nodebalancer,
+    error: entityError,
+    isLoading,
+  } = useNodeBalancerQuery(id);
+
+  const { error, isPending, mutateAsync } = useNodebalancerDeleteMutation(id);
 
-  const label = selectedNodeBalancer?.label;
+  const label = nodebalancer?.label;
 
   const onDelete = async () => {
     await mutateAsync();
-    navigate({ to: '/nodebalancers' });
+    onSuccess?.();
   };
 
   return (
@@ -42,23 +38,15 @@ export const NodeBalancerDeleteDialog = ({
         name: label,
         primaryBtnText: 'Delete',
         type: 'NodeBalancer',
-        error: nodeBalancerError,
+        error: entityError,
       }}
-      errors={error ?? undefined}
+      errors={error}
       expand
       label={'NodeBalancer Label'}
-      loading={isPending || isFetching}
+      loading={isPending || isLoading}
       onClick={onDelete}
-      onClose={
-        match.routeId === '/nodebalancers/$id/settings/delete'
-          ? () =>
-              navigate({
-                params: { id: String(selectedNodeBalancer?.id) },
-                to: '/nodebalancers/$id/settings',
-              })
-          : () => navigate({ to: '/nodebalancers' })
-      }
-      open={open}
+      onClose={onClose}
+      open
       title={`Delete ${label ?? 'Unknown'}?`}
       typographyStyle={{ marginTop: '20px' }}
     >

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerAddFirewallDrawer.tsx

@@ -0,0 +1,32 @@
+import { Drawer } from '@linode/ui';
+import { createLazyRoute, useNavigate, useParams } from '@tanstack/react-router';
+import React from 'react';
+
+import { AddFirewallForm } from 'src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/AddFirewallForm';
+
+const NodeBalancerAddFirewallDrawer = () => {
+  const { id } = useParams({
+    from: '/nodebalancers/$id/settings/add-firewall',
+  });
+  const navigate = useNavigate();
+
+  const onClose = () => {
+    navigate({ to: '..' });
+  };
+
+  return (
+    <Drawer onClose={onClose} open title="Add Firewall">
+      <AddFirewallForm
+        entityId={id}
+        entityType="nodebalancer"
+        onCancel={onClose}
+      />
+    </Drawer>
+  );
+};
+
+export const nodeBalancerSettingsAddFirewallLazyRoute = createLazyRoute(
+  '/nodebalancers/$id/settings/add-firewall'
+)({
+  component: NodeBalancerAddFirewallDrawer,
+});

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

@@ -2,6 +2,7 @@
   nodeBalancerConfigFactory,
   nodeBalancerConfigNodeFactory,
 } from '@linode/utilities';
+import { QueryClient } from '@tanstack/react-query';
 import { waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
@@ -10,12 +11,16 @@
 import { http, HttpResponse, server } from 'src/mocks/testServer';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import NodeBalancerConfigurations from './NodeBalancerConfigurations';
+import { NodeBalancerConfigurations } from './NodeBalancerConfigurations';
 
 const props = {
   grants: undefined,
+  configId: undefined,
+  configs: [],
   nodeBalancerLabel: 'nb-1',
   nodeBalancerRegion: 'us-east',
+  nodeBalancerId: 1,
+  queryClient: new QueryClient(),
   params: {
     nodeBalancerId: '1',
   },
@@ -55,7 +60,7 @@
       }
     );
 
     expect(getByTestId(loadingTestId)).toBeInTheDocument();
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
 
@@ -112,7 +117,7 @@
       }
     );
 
     expect(getByTestId(loadingTestId)).toBeInTheDocument();
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
 
@@ -140,7 +145,7 @@
       }
     );
 
     expect(getByTestId(loadingTestId)).toBeInTheDocument();
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
 
@@ -175,7 +180,7 @@
       }
     );
 
     expect(getByTestId(loadingTestId)).toBeInTheDocument();
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));