fix: [M3-9883] - Fix Upgrade Interface issues: URL navigation and Unable to find this Interfaces Firewall device in Edit Interface Drawer (#12146)

coliu-akamai · bnussman-akamai · web-flow · commit bb8ad103a59a · 2025-05-05T11:08:56.000-04:00
* fix diff issue when navigating to network tab

* initial invalidation - maybe can tighten up a bit?

* vpc invalidations so far

* remove stray console logs

* update changelog

* Update packages/queries/src/linodes/interfaces.ts

Co-authored-by: Banks Nussman &lt;115251059+bnussman-akamai@users.noreply.github.com&gt;

* fix invalidation and fix firewall error subnet linode row

* remove comment

* update test

---------

Co-authored-by: Banks Nussman &lt;115251059+bnussman-akamai@users.noreply.github.com&gt;
diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
@@ -101,6 +101,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Add non-dismissible option support to Dismissible Banner ([#12115](https://github.com/linode/manager/pull/12115))
 - Add mocks and update `PlansPanel` to support `mtc-tt-2025` plans in selected regions (#12050)
 - IAM RBAC: Implement method to merge user-selected roles into existing roles ([#12125](https://github.com/linode/manager/pull/12125))
+- Add navigation to Linode Network tab after successfully upgrading interfaces ([#12146](https://github.com/linode/manager/pull/12146))
+- Fix "Error retrieving Firewalls" message in Subnet Linode Row after upgrading interfaces ([#12146](https://github.com/linode/manager/pull/12146))
 
 ## [2025-04-22] - v1.140.0
 
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/UpgradeInterfaces/DialogContents/SuccessDialogContent.tsx
@@ -97,8 +97,8 @@ export const SuccessDialogContent = (
             onClick={() => {
               const newPath = location.pathname
                 .split('/')
-                // remove 'upgrade-interfaces' from URL
-                .slice(0, -1)
+                // keep only xxx/linodes/:linodeId
+                .slice(0, 3)
                 // join everything back together
                 .join('/')
                 .concat('/networking');
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx
@@ -15,7 +15,7 @@ import {
 } from 'src/factories';
 import { linodeConfigFactory } from 'src/factories/linodeConfigs';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
-import { HttpResponse, http, server } from 'src/mocks/testServer';
+import { http, HttpResponse, server } from 'src/mocks/testServer';
 import {
   mockMatchMedia,
   renderWithTheme,
@@ -82,26 +82,22 @@ describe('SubnetLinodeRow', () => {
     const handlePowerActionsLinode = vi.fn();
     const handleUnassignLinode = vi.fn();
 
-    const {
-      getAllByRole,
-      getAllByText,
-      getByTestId,
-      getByText,
-    } = renderWithTheme(
-      wrapWithTableBody(
-        <SubnetLinodeRow
-          handlePowerActionsLinode={handlePowerActionsLinode}
-          handleUnassignLinode={handleUnassignLinode}
-          isVPCLKEEnterpriseCluster={false}
-          linodeId={linodeFactory1.id}
-          subnet={subnetFactory.build()}
-          subnetId={1}
-          subnetInterfaces={[{ active: true, config_id: config.id, id: 1 }]}
-        />
-      )
-    );
+    const { getAllByRole, getAllByText, getByTestId, findByText } =
+      renderWithTheme(
+        wrapWithTableBody(
+          <SubnetLinodeRow
+            handlePowerActionsLinode={handlePowerActionsLinode}
+            handleUnassignLinode={handleUnassignLinode}
+            isVPCLKEEnterpriseCluster={false}
+            linodeId={linodeFactory1.id}
+            subnet={subnetFactory.build()}
+            subnetId={1}
+            subnetInterfaces={[{ active: true, config_id: config.id, id: 1 }]}
+          />
+        )
+      );
 
-    // Loading state should render
+    // Loading states should render
     expect(getByTestId(loadingTestId)).toBeInTheDocument();
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
@@ -113,7 +109,6 @@ describe('SubnetLinodeRow', () => {
     );
 
     getAllByText('10.0.0.0');
-    getByText(mockFirewall0);
 
     const plusChipButton = getAllByRole('button')[1];
     expect(plusChipButton).toHaveTextContent('+1');
@@ -127,6 +122,8 @@ describe('SubnetLinodeRow', () => {
     expect(unassignLinodeButton).toHaveTextContent('Unassign Linode');
     await userEvent.click(unassignLinodeButton);
     expect(handleUnassignLinode).toHaveBeenCalled();
+    const firewall = await findByText(mockFirewall0);
+    expect(firewall).toBeVisible();
   });
 
   it('should display the ip, range, and firewall for a Linode using Linode Interfaces', async () => {
@@ -148,24 +145,20 @@ describe('SubnetLinodeRow', () => {
     const handlePowerActionsLinode = vi.fn();
     const handleUnassignLinode = vi.fn();
 
-    const {
-      getAllByRole,
-      getAllByText,
-      getByTestId,
-      getByText,
-    } = renderWithTheme(
-      wrapWithTableBody(
-        <SubnetLinodeRow
-          handlePowerActionsLinode={handlePowerActionsLinode}
-          handleUnassignLinode={handleUnassignLinode}
-          isVPCLKEEnterpriseCluster={false}
-          linodeId={linodeFactory1.id}
-          subnet={subnetFactory.build()}
-          subnetId={1}
-          subnetInterfaces={[{ active: true, config_id: null, id: 1 }]}
-        />
-      )
-    );
+    const { getAllByRole, getAllByText, getByTestId, findByText } =
+      renderWithTheme(
+        wrapWithTableBody(
+          <SubnetLinodeRow
+            handlePowerActionsLinode={handlePowerActionsLinode}
+            handleUnassignLinode={handleUnassignLinode}
+            isVPCLKEEnterpriseCluster={false}
+            linodeId={linodeFactory1.id}
+            subnet={subnetFactory.build()}
+            subnetId={1}
+            subnetInterfaces={[{ active: true, config_id: null, id: 1 }]}
+          />
+        )
+      );
 
     // Loading state should render
     expect(getByTestId(loadingTestId)).toBeInTheDocument();
@@ -180,7 +173,8 @@ describe('SubnetLinodeRow', () => {
 
     getAllByText('10.0.0.0');
     getAllByText('10.0.0.1');
-    getByText(mockFirewall0);
+    const firewall = await findByText(mockFirewall0);
+    expect(firewall).toBeVisible();
   });
 
   it('should not display reboot linode button if the linode has all active interfaces', async () => {
@@ -215,15 +209,15 @@ describe('SubnetLinodeRow', () => {
     const { getAllByRole, getByTestId } = renderWithTheme(
       wrapWithTableBody(
         <SubnetLinodeRow
-          subnetInterfaces={[
-            { active: true, config_id: config.id, id: vpcInterface.id },
-          ]}
           handlePowerActionsLinode={handlePowerActionsLinode}
           handleUnassignLinode={handleUnassignLinode}
           isVPCLKEEnterpriseCluster={false}
           linodeId={linodeFactory1.id}
           subnet={subnetFactory.build()}
           subnetId={0}
+          subnetInterfaces={[
+            { active: true, config_id: config.id, id: vpcInterface.id },
+          ]}
         />
       )
     );
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
@@ -13,7 +13,7 @@ import { TableRow } from 'src/components/TableRow';
 import { getLinodeIconStatus } from 'src/features/Linodes/LinodesLanding/utils';
 import { determineNoneSingleOrMultipleWithChip } from 'src/utilities/noneSingleOrMultipleWithChip';
 
-import { useInterfaceAndFirewallDataForLinode } from '../../../hooks/useInterfaceAndFirewallDataForLinode';
+import { useInterfaceDataForLinode } from '../../../hooks/useInterfaceDataForLinode';
 import {
   VPC_REBOOT_MESSAGE,
   WARNING_ICON_UNRECOMMENDED_CONFIG,
@@ -25,10 +25,13 @@ import {
   hasUnrecommendedConfigurationLinodeInterface,
 } from '../utils';
 import { StyledWarningIcon } from './SubnetLinodeRow.styles';
+import {
+  ConfigInterfaceFirewallCell,
+  LinodeInterfaceFirewallCell,
+} from './SubnetLinodeRowFirewallsCell';
 
 import type {
   APIError,
-  Firewall,
   Interface,
   Linode,
   LinodeInterface,
@@ -82,18 +85,16 @@ export const SubnetLinodeRow = (props: Props) => {
 
   /**
    * We need to handle support for both legacy interfaces and Linode interfaces.
-   * The below hook gives us the relevant firewall and interface data depending on
+   * The below hook gives us the relevant interface data depending on
    * interface type.
    */
-  const { firewallsInfo, interfacesInfo } =
-    useInterfaceAndFirewallDataForLinode({
-      configId, // subnet.linodes.interfaces data now includes config_id, so we no longer have to fetch all configs
-      interfaceId,
-      isLinodeInterface,
-      linodeId,
-    });
+  const { interfacesInfo } = useInterfaceDataForLinode({
+    configId, // subnet.linodes.interfaces data now includes config_id, so we no longer have to fetch all configs
+    interfaceId,
+    isLinodeInterface,
+    linodeId,
+  });
 
-  const { attachedFirewalls, firewallsError, firewallsLoading } = firewallsInfo;
   const {
     config, // undefined if this Linode is using Linode Interfaces. Used to determine an unrecommended configuration
     configInterface, // undefined if this Linode is using Linode Interfaces
@@ -225,13 +226,14 @@ export const SubnetLinodeRow = (props: Props) => {
         </TableCell>
       </Hidden>
       <Hidden smDown>
-        <TableCell>
-          {getFirewallsCellString(
-            attachedFirewalls?.data ?? [],
-            firewallsLoading,
-            firewallsError ?? undefined
-          )}
-        </TableCell>
+        {isLinodeInterface ? (
+          <LinodeInterfaceFirewallCell
+            interfaceId={interfaceId}
+            linodeId={linodeId}
+          />
+        ) : (
+          <ConfigInterfaceFirewallCell linodeId={linodeId} />
+        )}
       </Hidden>
       <TableCell actionCell>
         {!isVPCLKEEnterpriseCluster && (
@@ -270,26 +272,6 @@ export const SubnetLinodeRow = (props: Props) => {
   );
 };
 
-const getFirewallsCellString = (
-  data: Firewall[],
-  loading: boolean,
-  error?: APIError[]
-): JSX.Element | string => {
-  if (loading) {
-    return 'Loading...';
-  }
-
-  if (error) {
-    return 'Error retrieving Firewalls';
-  }
-
-  if (data.length === 0) {
-    return 'None';
-  }
-
-  return getFirewallLinks(data);
-};
-
 const getSubnetLinodeIPv4CellString = (
   interfaceData: Interface | LinodeInterface | undefined,
   loading: boolean,
@@ -357,30 +339,6 @@ const getIPRangesCellContents = (
   }
 };
 
-const getFirewallLinks = (data: Firewall[]): JSX.Element => {
-  const firstThreeFirewalls = data.slice(0, 3);
-  return (
-    <>
-      {firstThreeFirewalls.map((firewall, idx) => (
-        <Link
-          className="link secondaryLink"
-          data-testid="firewall-row-link"
-          key={firewall.id}
-          to={`/firewalls/${firewall.id}`}
-        >
-          {idx > 0 && `, `}
-          {firewall.label}
-        </Link>
-      ))}
-      {data.length > 3 && (
-        <span>
-          {`, `}plus {data.length - 3} more.
-        </span>
-      )}
-    </>
-  );
-};
-
 export const SubnetLinodeTableRowHead = (
   <TableRow>
     <TableCell>Linode Label</TableCell>
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRowFirewallsCell.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRowFirewallsCell.tsx
@@ -0,0 +1,95 @@
+import {
+  useLinodeFirewallsQuery,
+  useLinodeInterfaceFirewallsQuery,
+} from '@linode/queries';
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import { TableCell } from 'src/components/TableCell';
+
+import type { APIError, Firewall } from '@linode/api-v4';
+
+export const ConfigInterfaceFirewallCell = (props: { linodeId: number }) => {
+  const { linodeId } = props;
+  const {
+    data: attachedFirewalls,
+    error,
+    isLoading,
+  } = useLinodeFirewallsQuery(linodeId);
+
+  return (
+    <TableCell>
+      {getFirewallsCellString(
+        attachedFirewalls?.data ?? [],
+        isLoading,
+        error ?? undefined
+      )}
+    </TableCell>
+  );
+};
+
+export const LinodeInterfaceFirewallCell = (props: {
+  interfaceId: number;
+  linodeId: number;
+}) => {
+  const { linodeId, interfaceId } = props;
+  const {
+    data: attachedFirewalls,
+    error,
+    isLoading,
+  } = useLinodeInterfaceFirewallsQuery(linodeId, interfaceId);
+
+  return (
+    <TableCell>
+      {getFirewallsCellString(
+        attachedFirewalls?.data ?? [],
+        isLoading,
+        error ?? undefined
+      )}
+    </TableCell>
+  );
+};
+
+const getFirewallsCellString = (
+  data: Firewall[],
+  loading: boolean,
+  error?: APIError[]
+): JSX.Element | string => {
+  if (loading) {
+    return 'Loading...';
+  }
+
+  if (error) {
+    return 'Error retrieving Firewalls';
+  }
+
+  if (data.length === 0) {
+    return 'None';
+  }
+
+  return getFirewallLinks(data);
+};
+
+const getFirewallLinks = (data: Firewall[]): JSX.Element => {
+  const firstThreeFirewalls = data.slice(0, 3);
+  return (
+    <>
+      {firstThreeFirewalls.map((firewall, idx) => (
+        <Link
+          className="link secondaryLink"
+          data-testid="firewall-row-link"
+          key={firewall.id}
+          to={`/firewalls/${firewall.id}`}
+        >
+          {idx > 0 && `, `}
+          {firewall.label}
+        </Link>
+      ))}
+      {data.length > 3 && (
+        <span>
+          {`, `}plus {data.length - 3} more.
+        </span>
+      )}
+    </>
+  );
+};
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.test.tsx
@@ -156,6 +156,11 @@ describe('VPC Subnets table', () => {
   });
 
   it('should disable Create Subnet button if the VPC is associated with a LKE-E cluster', async () => {
+    server.use(
+      http.get('*/networking/firewalls/settings', () => {
+        return HttpResponse.json(firewallSettingsFactory.build());
+      })
+    );
     const { getByRole, queryByTestId } = await renderWithThemeAndRouter(
       <VPCSubnetsTable
         isVPCLKEEnterpriseCluster={true}
diff --git a/packages/manager/src/hooks/useInterfaceDataForLinode.ts b/packages/manager/src/hooks/useInterfaceDataForLinode.ts
diff --git a/packages/queries/src/linodes/interfaces.ts b/packages/queries/src/linodes/interfaces.ts
