upcoming: [M3-9530] - Display interface type first in Linode Network IP Addresses table

packages/manager/.changeset/pr-11865-upcoming-features-1742248570726.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Display interface type first in Linode Network IP Addresses table ([#11865](https://github.com/linode/manager/pull/11865))

packages/manager/cypress/e2e/core/linodes/linode-network.spec.ts

@@ -73,7 +73,7 @@ describe('IP Addresses', () => {
    * - Confirms the success toast message after editing RDNS
    */
   it('checks for the toast message upon editing an RDNS', () => {
-    cy.findByLabelText('IPv4 Addresses')
+    cy.findByLabelText('Linode IP Addresses')
       .should('be.visible')
       .within(() => {
         // confirm table headers

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

@@ -34,7 +34,7 @@ import {
   StyledVPCBox,
   sxLastListItem,
 } from './LinodeEntityDetail.styles';
-import { ipv4TableID } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses';
+import { ipTableId } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses';
 import { lishLink, sshLink } from './LinodesDetail/utilities';
 
 import type { LinodeHandlers } from './LinodesLanding/LinodesLanding';
@@ -289,7 +289,7 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
                     variant="body1"
                   >
                     <HashLink
-                      to={`/linodes/${linodeId}/networking#${ipv4TableID}`}
+                      to={`/linodes/${linodeId}/networking#${ipTableId}`}
                     >
                       View all IP Addresses
                     </HashLink>

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/DeleteIPDialog.tsx

@@ -1,9 +1,9 @@
+import { useLinodeIPDeleteMutation } from '@linode/queries';
 import { ActionsPanel, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { useLinodeIPDeleteMutation } from '@linode/queries';
 
 interface Props {
   address: string;

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/DeleteRangeDialog.tsx

@@ -1,9 +1,9 @@
+import { useLinodeRemoveRangeMutation } from '@linode/queries';
 import { ActionsPanel, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { useLinodeRemoveRangeMutation } from '@linode/queries';
 
 import type { IPRange } from '@linode/api-v4';
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ExplainerCopy.tsx

@@ -1,7 +1,7 @@
+import { useLinodeQuery } from '@linode/queries';
 import * as React from 'react';
 
 import { SupportLink } from 'src/components/SupportLink';
-import { useLinodeQuery } from '@linode/queries';
 
 import type { IPType } from './AddIPDrawer';
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx

@@ -1,3 +1,10 @@
+import {
+  useAllIPv6RangesQuery,
+  useAllLinodesQuery,
+  useAssignAdressesMutation,
+  useLinodeIPsQuery,
+  useLinodeQuery,
+} from '@linode/queries';
 import {
   ActionsPanel,
   Autocomplete,
@@ -12,13 +19,6 @@ import Grid from '@mui/material/Grid2';
 import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
-import {
-  useAllLinodesQuery,
-  useLinodeQuery,
-  useAssignAdressesMutation,
-  useLinodeIPsQuery,
-  useAllIPv6RangesQuery,
-} from '@linode/queries';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import type { APIError, IPRange } from '@linode/api-v4';

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.test.tsx

@@ -15,9 +15,13 @@ import { LinodeIPAddressRow } from './LinodeIPAddressRow';
 import type { IPAddressRowHandlers } from './LinodeIPAddressRow';
 
 const ips = linodeIPFactory.build();
-const ipDisplay = ipResponseToDisplayRows(ips)[0];
+const ipDisplay = ipResponseToDisplayRows({
+  displayIPKeyFirst: false,
+  ipResponse: ips,
+})[0];
 const ipDisplayVPC = vpcConfigInterfaceToDisplayRows(
-  linodeConfigInterfaceFactoryWithVPC.build()
+  linodeConfigInterfaceFactoryWithVPC.build(),
+  false
 )[0];
 
 const handlers: IPAddressRowHandlers = {
@@ -127,10 +131,11 @@ describe('LinodeIPAddressRow', () => {
 
 describe('ipResponseToDisplayRows', () => {
   it('should not return a Public IPv4 row if there is a VPC interface with 1:1 NAT', () => {
-    const ipDisplays = ipResponseToDisplayRows(
-      ips,
-      linodeConfigInterfaceFactoryWithVPC.build()
-    );
+    const ipDisplays = ipResponseToDisplayRows({
+      configInterfaceWithVPC: linodeConfigInterfaceFactoryWithVPC.build(),
+      displayIPKeyFirst: false,
+      ipResponse: ips,
+    });
 
     expect(
       ipDisplays.find((ipDisplay) => ipDisplay.type === 'IPv4 – Public')

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx

@@ -1,8 +1,8 @@
 import {
-  usePreferences,
+  useAllIPsQuery,
   useLinodeIPsQuery,
   useLinodeQuery,
-  useAllIPsQuery,
+  usePreferences,
 } from '@linode/queries';
 import { CircleProgress, Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
@@ -13,6 +13,7 @@ import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { LinkButton } from 'src/components/LinkButton';
 import { TableCell } from 'src/components/TableCell';
 import { StyledTableRow } from 'src/features/Linodes/LinodeEntityDetail.styles';
+import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes';
 
 import { LinodeNetworkingActionMenu } from './LinodeNetworkingActionMenu';
 
@@ -58,8 +59,13 @@ export const LinodeIPAddressRow = (props: LinodeIPAddressRowProps) => {
     (preferences) => preferences?.maskSensitiveData
   );
 
+  const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled();
+  const publicIPv4Type = isLinodeInterfacesEnabled
+    ? 'Public – IPv4'
+    : 'IPv4 – Public';
+
   const isOnlyPublicIP =
-    ips?.ipv4.public.length === 1 && type === 'IPv4 – Public';
+    ips?.ipv4.public.length === 1 && type === publicIPv4Type;
 
   return (
     <StyledTableRow

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.test.ts

@@ -1,9 +1,11 @@
-import { LinodeIPsResponse } from '@linode/api-v4/lib/linodes';
-
 import { ipAddressFactory } from 'src/factories/networking';
 
-import { listIPv6InRange } from './LinodeIPAddressRow';
 import { createType, ipResponseToDisplayRows } from './LinodeIPAddresses';
+import { listIPv6InRange } from './LinodeIPAddressRow';
+
+import type { LinodeIPsResponse } from '@linode/api-v4/lib/linodes';
+
+// @TODO Linode Interfaces - clean up test cases for IP tests once we remove feature flag
 
 describe('listIPv6InRange utility function', () => {
   const ipv4List = ipAddressFactory.buildList(4);
@@ -62,20 +64,29 @@ describe('ipResponseToDisplayRows utility function', () => {
   };
 
   it('returns a display row for each IP/range', () => {
-    const result = ipResponseToDisplayRows(response);
+    const result = ipResponseToDisplayRows({
+      displayIPKeyFirst: false,
+      ipResponse: response,
+    });
     expect(result).toHaveLength(7);
   });
 
   it('includes the meta _ip field for IP addresses', () => {
-    const result = ipResponseToDisplayRows(response);
+    const result = ipResponseToDisplayRows({
+      displayIPKeyFirst: false,
+      ipResponse: response,
+    });
     // Check the first six rows (the IPs)
     for (let i = 0; i < 5; i++) {
       expect(result[i]._ip).toBeDefined();
     }
   });
 
   it('includes the meta _range field for IP ranges', () => {
-    const result = ipResponseToDisplayRows(response);
+    const result = ipResponseToDisplayRows({
+      displayIPKeyFirst: false,
+      ipResponse: response,
+    });
     // Check the last row (the IPv6 range)
     expect(result[6]._range).toBeDefined();
   });
@@ -86,21 +97,60 @@ describe('createType utility function', () => {
     const publicIPv4 = ipAddressFactory.build({ public: true, type: 'ipv4' });
     const privateIPv4 = ipAddressFactory.build({ public: false, type: 'ipv4' });
 
-    expect(createType(publicIPv4, 'Public')).toBe('IPv4 – Public');
-    expect(createType(privateIPv4, 'Private')).toBe('IPv4 – Private');
+    expect(
+      createType({ displayIPKeyFirst: false, ip: publicIPv4, key: 'Public' })
+    ).toBe('IPv4 – Public');
+    expect(
+      createType({ displayIPKeyFirst: false, ip: privateIPv4, key: 'Private' })
+    ).toBe('IPv4 – Private');
+
+    expect(
+      createType({ displayIPKeyFirst: false, ip: publicIPv4, key: 'Reserved' })
+    ).toBe('IPv4 – Reserved (public)');
+    expect(
+      createType({ displayIPKeyFirst: false, ip: privateIPv4, key: 'Reserved' })
+    ).toBe('IPv4 – Reserved (private)');
+
+    expect(
+      createType({ displayIPKeyFirst: false, ip: publicIPv4, key: 'Shared' })
+    ).toBe('IPv4 – Shared');
 
-    expect(createType(publicIPv4, 'Reserved')).toBe('IPv4 – Reserved (public)');
-    expect(createType(privateIPv4, 'Reserved')).toBe(
-      'IPv4 – Reserved (private)'
-    );
+    // Linode Interface changes to IP types
+    expect(
+      createType({ displayIPKeyFirst: true, ip: publicIPv4, key: 'Public' })
+    ).toBe('Public – IPv4');
+    expect(
+      createType({ displayIPKeyFirst: true, ip: privateIPv4, key: 'Private' })
+    ).toBe('Private – IPv4');
+
+    expect(
+      createType({ displayIPKeyFirst: true, ip: publicIPv4, key: 'Reserved' })
+    ).toBe('Reserved IPv4 (public)');
+    expect(
+      createType({ displayIPKeyFirst: true, ip: privateIPv4, key: 'Reserved' })
+    ).toBe('Reserved IPv4 (private)');
 
-    expect(createType(publicIPv4, 'Shared')).toBe('IPv4 – Shared');
+    expect(
+      createType({ displayIPKeyFirst: true, ip: publicIPv4, key: 'Shared' })
+    ).toBe('Shared – IPv4');
   });
 
   it('creates the correct type for ipv6', () => {
     const ipv6 = ipAddressFactory.build({ type: 'ipv6' });
 
-    expect(createType(ipv6, 'SLAAC')).toBe('IPv6 – SLAAC');
-    expect(createType(ipv6, 'Link Local')).toBe('IPv6 – Link Local');
+    expect(
+      createType({ displayIPKeyFirst: false, ip: ipv6, key: 'SLAAC' })
+    ).toBe('IPv6 – SLAAC');
+    expect(
+      createType({ displayIPKeyFirst: false, ip: ipv6, key: 'Link Local' })
+    ).toBe('IPv6 – Link Local');
+
+    // Linode Interfaces related - test cases:
+    expect(
+      createType({ displayIPKeyFirst: true, ip: ipv6, key: 'SLAAC' })
+    ).toBe('Public – SLAAC – IPv6');
+    expect(
+      createType({ displayIPKeyFirst: true, ip: ipv6, key: 'Link Local' })
+    ).toBe('Link Local – IPv6');
   });
 });