settings modals

Author: abailly-akamai

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

@@ -1,30 +1,50 @@
+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;
+  device?: FirewallDevice | undefined;
+  devices?: FirewallDevice[] | undefined;
   firewallId: number;
   firewallLabel: string;
+  isFetching?: boolean;
+  nodeBalancerId?: number;
   onClose: () => void;
   onService: boolean | undefined;
   open: boolean;
 }
 
 export const RemoveDeviceDialog = React.memo((props: Props) => {
-  const { device, firewallId, firewallLabel, onClose, onService, open } = props;
+  const {
+    device: _device,
+    devices,
+    firewallId,
+    firewallLabel,
+    isFetching,
+    nodeBalancerId,
+    onClose,
+    onService,
+    open,
+  } = props;
 
   const { enqueueSnackbar } = useSnackbar();
+  const device =
+    _device ??
+    devices?.find(
+      (device) =>
+        device.entity.type === 'nodebalancer' &&
+        device.entity.id === nodeBalancerId
+    );
   const deviceType = device?.entity.type;
 
   const { error, isPending, mutateAsync } = useRemoveFirewallDeviceMutation(
@@ -105,6 +125,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/NodeBalancerDeleteDialog.test.tsx

@@ -18,6 +18,7 @@ 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({}),
 }));
@@ -34,6 +35,7 @@ vi.mock('@tanstack/react-router', async () => {
   const actual = await vi.importActual('@tanstack/react-router');
   return {
     ...actual,
+    useMatch: queryMocks.useMatch,
     useNavigate: queryMocks.useNavigate,
   };
 });

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

@@ -1,6 +1,6 @@
 import { useNodebalancerDeleteMutation } from '@linode/queries';
 import { Notice, Typography } from '@linode/ui';
-import { useNavigate } from '@tanstack/react-router';
+import { useMatch, useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
@@ -19,6 +19,9 @@ export const NodeBalancerDeleteDialog = ({
   selectedNodeBalancer,
 }: Props) => {
   const navigate = useNavigate();
+  const match = useMatch({
+    strict: false,
+  });
   const { error, isPending, mutateAsync } = useNodebalancerDeleteMutation(
     selectedNodeBalancer?.id ?? -1
   );
@@ -38,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 || isFetching}
       onClick={onDelete}
-      onClose={() => navigate({ to: '/nodebalancers' })}
       open={open}
       title={`Delete ${label}?`}
       typographyStyle={{ marginTop: '20px' }}

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

@@ -9,8 +9,12 @@ const firewall = firewallFactory.build({ label: 'mock-firewall-1' });
 
 // Set up various mocks for tests
 
+const navigate = vi.fn();
 const queryMocks = vi.hoisted(() => ({
+  useMatch: vi.fn(() => ({})),
+  useNavigate: vi.fn(() => navigate),
   useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
+  useParams: vi.fn(() => ({})),
 }));
 
 vi.mock('@linode/queries', async () => {
@@ -21,6 +25,16 @@ 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,
+    useParams: queryMocks.useParams,
+  };
+});
+
 const props = {
   displayFirewallInfoText: false,
   nodeBalancerId: 1,
@@ -32,6 +46,9 @@ describe('NodeBalancerFirewalls', () => {
       data: { data: [firewall] },
       isLoading: false,
     });
+    queryMocks.useParams.mockReturnValue({
+      id: '1',
+    });
   });
 
   afterEach(() => {

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

@@ -1,5 +1,10 @@
-import { useNodeBalancersFirewallsQuery } from '@linode/queries';
+import {
+  useAllFirewallDevicesQuery,
+  useFirewallQuery,
+  useNodeBalancersFirewallsQuery,
+} from '@linode/queries';
 import { Box, Button, Stack, Typography } from '@linode/ui';
+import { useMatch, useNavigate } from '@tanstack/react-router';
 import React from 'react';
 
 import { Drawer } from 'src/components/Drawer';
@@ -14,18 +19,22 @@ import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { RemoveDeviceDialog } from 'src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog';
 import { AddFirewallForm } from 'src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/AddFirewallForm';
+import { useDialogData } from 'src/hooks/useDialogData';
 
 import { NodeBalancerFirewallsRow } from './NodeBalancerFirewallsRow';
 
-import type { Firewall, FirewallDevice } from '@linode/api-v4';
+import type { Firewall } from '@linode/api-v4';
 
 interface Props {
   nodeBalancerId: number;
 }
 
 export const NodeBalancerFirewalls = (props: Props) => {
   const { nodeBalancerId } = props;
-
+  const navigate = useNavigate();
+  const match = useMatch({
+    strict: false,
+  });
   const {
     data: attachedFirewallData,
     error,
@@ -34,27 +43,35 @@ export const NodeBalancerFirewalls = (props: Props) => {
 
   const attachedFirewalls = attachedFirewallData?.data;
 
-  const [selectedFirewall, setSelectedFirewall] = React.useState<Firewall>();
-
-  const [
-    deviceToBeRemoved,
-    setDeviceToBeRemoved,
-  ] = React.useState<FirewallDevice>();
-
-  const [
-    isRemoveDeviceDialogOpen,
-    setIsRemoveDeviceDialogOpen,
-  ] = React.useState<boolean>(false);
+  const isUnassignFirewallRoute =
+    match.routeId ===
+    '/nodebalancers/$id/settings/unassign-firewall/$firewallId';
 
-  const [
-    isAddFirewallDrawerOpen,
-    setIsAddFirewalDrawerOpen,
-  ] = React.useState<boolean>(false);
-
-  const handleClickUnassign = (device: FirewallDevice, firewall: Firewall) => {
-    setDeviceToBeRemoved(device);
-    setSelectedFirewall(firewall);
-    setIsRemoveDeviceDialogOpen(true);
+  const {
+    data: selectedFirewall,
+    isFetching: isFetchingSelectedFirewall,
+  } = useDialogData({
+    enabled: isUnassignFirewallRoute,
+    paramKey: 'firewallId',
+    queryHook: useFirewallQuery,
+    redirectToOnNotFound: '/nodebalancers/$id/settings',
+  });
+
+  const { data: devices, isFetching: isFetchingDevices } = useDialogData({
+    enabled: isUnassignFirewallRoute,
+    paramKey: 'firewallId',
+    queryHook: useAllFirewallDevicesQuery,
+    redirectToOnNotFound: '/nodebalancers/$id/settings',
+  });
+
+  const handleClickUnassign = (firewall: Firewall) => {
+    navigate({
+      params: {
+        firewallId: String(firewall.id),
+        id: String(nodeBalancerId),
+      },
+      to: '/nodebalancers/$id/settings/unassign-firewall/$firewallId',
+    });
   };
 
   const renderTableContent = () => {
@@ -72,10 +89,11 @@ export const NodeBalancerFirewalls = (props: Props) => {
 
     return attachedFirewalls.map((attachedFirewall) => (
       <NodeBalancerFirewallsRow
+        devices={devices}
         firewall={attachedFirewall}
         key={`firewall-${attachedFirewall.id}`}
-        nodeBalancerID={nodeBalancerId}
-        onClickUnassign={handleClickUnassign}
+        nodeBalancerId={nodeBalancerId}
+        onClickUnassign={() => handleClickUnassign(attachedFirewall)}
       />
     ));
   };
@@ -94,9 +112,14 @@ export const NodeBalancerFirewalls = (props: Props) => {
           to your NodeBalancer. Only inbound rules are applied to NodeBalancers.
         </Typography>
         <Button
+          onClick={() =>
+            navigate({
+              params: { id: String(nodeBalancerId) },
+              to: '/nodebalancers/$id/settings/add-firewall',
+            })
+          }
           buttonType="primary"
           disabled={attachedFirewallData && attachedFirewallData.results >= 1}
-          onClick={() => setIsAddFirewalDrawerOpen(true)}
           tooltipText="NodeBalanacers can only have one Firewall assigned."
         >
           Add Firewall
@@ -114,22 +137,42 @@ export const NodeBalancerFirewalls = (props: Props) => {
         <TableBody>{renderTableContent()}</TableBody>
       </Table>
       <RemoveDeviceDialog
-        device={deviceToBeRemoved}
+        onClose={() =>
+          navigate({
+            params: { id: String(nodeBalancerId) },
+            to: '/nodebalancers/$id/settings',
+          })
+        }
+        open={
+          match.routeId ===
+          '/nodebalancers/$id/settings/unassign-firewall/$firewallId'
+        }
+        devices={devices}
         firewallId={selectedFirewall?.id ?? -1}
         firewallLabel={selectedFirewall?.label ?? ''}
-        onClose={() => setIsRemoveDeviceDialogOpen(false)}
+        isFetching={isFetchingDevices || isFetchingSelectedFirewall}
+        nodeBalancerId={nodeBalancerId}
         onService
-        open={isRemoveDeviceDialogOpen}
       />
       <Drawer
-        onClose={() => setIsAddFirewalDrawerOpen(false)}
-        open={isAddFirewallDrawerOpen}
+        onClose={() =>
+          navigate({
+            params: { id: String(nodeBalancerId) },
+            to: '/nodebalancers/$id/settings',
+          })
+        }
+        open={match.routeId === '/nodebalancers/$id/settings/add-firewall'}
         title="Add Firewall"
       >
         <AddFirewallForm
+          onCancel={() =>
+            navigate({
+              params: { id: String(nodeBalancerId) },
+              to: '/nodebalancers/$id/settings',
+            })
+          }
           entityId={nodeBalancerId}
           entityType="nodebalancer"
-          onCancel={() => setIsAddFirewalDrawerOpen(false)}
         />
       </Drawer>
     </Stack>

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

@@ -25,8 +25,9 @@ vi.mock('@linode/queries', async () => {
 });
 
 const props = {
+  devices: [],
   firewall,
-  nodeBalancerID: 1,
+  nodeBalancerId: 1,
   onClickUnassign: vi.fn(),
 };
 

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

@@ -1,4 +1,3 @@
-import { useAllFirewallDevicesQuery } from '@linode/queries';
 import { capitalize } from '@linode/utilities';
 import * as React from 'react';
 
@@ -16,27 +15,17 @@ import { NodeBalancerFirewallsActionMenu } from './NodeBalancerFirewallsActionMe
 import type { Firewall, FirewallDevice } from '@linode/api-v4';
 
 interface Props {
+  devices: FirewallDevice[] | undefined;
   firewall: Firewall;
-  nodeBalancerID: number;
-  onClickUnassign: (
-    device: FirewallDevice | undefined,
-    firewall: Firewall
-  ) => void;
+  nodeBalancerId: number;
+  onClickUnassign: () => void;
 }
 
 export const NodeBalancerFirewallsRow = (props: Props) => {
-  const { firewall, nodeBalancerID, onClickUnassign } = props;
+  const { firewall, onClickUnassign } = props;
 
   const { id: firewallID, label, rules, status } = firewall;
 
-  const { data: devices } = useAllFirewallDevicesQuery(firewallID);
-
-  const firewallDevice = devices?.find(
-    (device) =>
-      device.entity.type === 'nodebalancer' &&
-      device.entity.id === nodeBalancerID
-  );
-
   const count = getCountOfRules(rules);
 
   return (
@@ -54,7 +43,7 @@ export const NodeBalancerFirewallsRow = (props: Props) => {
       <TableCell actionCell>
         <NodeBalancerFirewallsActionMenu
           firewallID={firewallID}
-          onUnassign={() => onClickUnassign(firewallDevice, firewall)}
+          onUnassign={onClickUnassign}
         />
       </TableCell>
     </TableRow>