Revert "upcoming: [M3-9530] - Display interface type first in Linode Network IP Addresses table (linode#11865)"

jdamore-linode · jdamore-linode · commit 7b812dee4c7c · 2025-03-27T11:20:29.000-04:00
This reverts commit 8214508.
diff --git a/packages/manager/.changeset/pr-11865-changed-1742248570726.md b/packages/manager/.changeset/pr-11865-changed-1742248570726.md
diff --git a/packages/manager/cypress/e2e/core/linodes/linode-network.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-network.spec.ts
@@ -83,7 +83,7 @@ describe('IP Addresses', () => {
    * - Confirms the success toast message after editing RDNS
    */
   it('checks for the toast message upon editing an RDNS', () => {
-    cy.findByLabelText('Linode IP Addresses')
+    cy.findByLabelText('IPv4 Addresses')
       .should('be.visible')
       .within(() => {
         // confirm table headers
@@ -99,7 +99,7 @@ describe('IP Addresses', () => {
       .should('be.visible')
       .closest('tr')
       .within(() => {
-        cy.findByText('Public – IPv4').should('be.visible');
+        cy.findByText('IPv4 – Public').should('be.visible');
         cy.findByText(mockRDNS).should('be.visible');
 
         // open up the edit RDNS drawer
@@ -136,7 +136,7 @@ describe('IP Addresses', () => {
       .should('be.visible')
       .closest('tr')
       .within(() => {
-        cy.findByText('Public – IPv4').should('be.visible');
+        cy.findByText('IPv4 – Public').should('be.visible');
         ui.actionMenu
           .findByTitle(`Action menu for IP Address ${linodeIPv4}`)
           .should('be.visible');
@@ -147,7 +147,7 @@ describe('IP Addresses', () => {
       .should('be.visible')
       .closest('tr')
       .within(() => {
-        cy.findByText('Range – IPv6').should('be.visible');
+        cy.findByText('IPv6 – Range').should('be.visible');
         ui.actionMenu
           .findByTitle(`Action menu for IP Address ${_ipv6Range.range}`)
           .should('be.visible');
diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx
@@ -34,7 +34,7 @@ import {
   StyledVPCBox,
   sxLastListItem,
 } from './LinodeEntityDetail.styles';
-import { ipTableId } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses';
+import { ipv4TableID } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses';
 import { lishLink, sshLink } from './LinodesDetail/utilities';
 
 import type { LinodeHandlers } from './LinodesLanding/LinodesLanding';
@@ -291,7 +291,7 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
                     variant="body1"
                   >
                     <HashLink
-                      to={`/linodes/${linodeId}/networking#${ipTableId}`}
+                      to={`/linodes/${linodeId}/networking#${ipv4TableID}`}
                     >
                       View all IP Addresses
                     </HashLink>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/DeleteIPDialog.tsx b/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;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/DeleteRangeDialog.tsx b/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';
 
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ExplainerCopy.tsx b/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';
 
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx
@@ -1,10 +1,3 @@
-import {
-  useAllIPv6RangesQuery,
-  useAllLinodesQuery,
-  useAssignAdressesMutation,
-  useLinodeIPsQuery,
-  useLinodeQuery,
-} from '@linode/queries';
 import {
   ActionsPanel,
   Autocomplete,
@@ -19,6 +12,13 @@ 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';
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.test.tsx
@@ -135,10 +135,10 @@ describe('ipResponseToDisplayRows', () => {
     );
 
     expect(
-      ipDisplays.find((ipDisplay) => ipDisplay.type === 'Public – IPv4')
+      ipDisplays.find((ipDisplay) => ipDisplay.type === 'IPv4 – Public')
     ).toBeUndefined();
     expect(
-      ipDisplays.find((ipDisplay) => ipDisplay.type === 'VPC NAT – IPv4')
+      ipDisplays.find((ipDisplay) => ipDisplay.type === 'VPC IPv4 – NAT')
     ).toBeDefined();
   });
 });
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx
@@ -1,8 +1,8 @@
 import {
-  useAllIPsQuery,
+  usePreferences,
   useLinodeIPsQuery,
   useLinodeQuery,
-  usePreferences,
+  useAllIPsQuery,
 } from '@linode/queries';
 import { CircleProgress, Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
@@ -59,7 +59,7 @@ export const LinodeIPAddressRow = (props: LinodeIPAddressRowProps) => {
   );
 
   const isOnlyPublicIP =
-    ips?.ipv4.public.length === 1 && type === 'Public – IPv4';
+    ips?.ipv4.public.length === 1 && type === 'IPv4 – Public';
 
   return (
     <StyledTableRow
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.test.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.test.ts
@@ -1,9 +1,9 @@
+import { LinodeIPsResponse } from '@linode/api-v4/lib/linodes';
+
 import { ipAddressFactory } from 'src/factories/networking';
 
-import { createType, ipResponseToDisplayRows } from './LinodeIPAddresses';
 import { listIPv6InRange } from './LinodeIPAddressRow';
-
-import type { LinodeIPsResponse } from '@linode/api-v4/lib/linodes';
+import { createType, ipResponseToDisplayRows } from './LinodeIPAddresses';
 
 describe('listIPv6InRange utility function', () => {
   const ipv4List = ipAddressFactory.buildList(4);
@@ -86,19 +86,21 @@ 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('Public – IPv4');
-    expect(createType(privateIPv4, 'Private')).toBe('Private – IPv4');
+    expect(createType(publicIPv4, 'Public')).toBe('IPv4 – Public');
+    expect(createType(privateIPv4, 'Private')).toBe('IPv4 – Private');
 
-    expect(createType(publicIPv4, 'Reserved')).toBe('Reserved IPv4 (public)');
-    expect(createType(privateIPv4, 'Reserved')).toBe('Reserved IPv4 (private)');
+    expect(createType(publicIPv4, 'Reserved')).toBe('IPv4 – Reserved (public)');
+    expect(createType(privateIPv4, 'Reserved')).toBe(
+      'IPv4 – Reserved (private)'
+    );
 
-    expect(createType(publicIPv4, 'Shared')).toBe('Shared – IPv4');
+    expect(createType(publicIPv4, 'Shared')).toBe('IPv4 – Shared');
   });
 
   it('creates the correct type for ipv6', () => {
     const ipv6 = ipAddressFactory.build({ type: 'ipv6' });
 
-    expect(createType(ipv6, 'SLAAC')).toBe('Public – IPv6 – SLAAC');
-    expect(createType(ipv6, 'Link Local')).toBe('Link Local – IPv6');
+    expect(createType(ipv6, 'SLAAC')).toBe('IPv6 – SLAAC');
+    expect(createType(ipv6, 'Link Local')).toBe('IPv6 – Link Local');
   });
 });
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx
@@ -1,8 +1,3 @@
-import {
-  useLinodeIPsQuery,
-  useLinodeQuery,
-  useRegionsQuery,
-} from '@linode/queries';
 import {
   Box,
   Button,
@@ -26,6 +21,11 @@ import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useVPCConfigInterface } from 'src/hooks/useVPCConfigInterface';
+import {
+  useLinodeQuery,
+  useLinodeIPsQuery,
+  useRegionsQuery,
+} from '@linode/queries';
 
 import { AddIPDrawer } from './AddIPDrawer';
 import { DeleteIPDialog } from './DeleteIPDialog';
@@ -48,7 +48,7 @@ import type {
   LinodeIPsResponse,
 } from '@linode/api-v4';
 
-export const ipTableId = 'ips';
+export const ipv4TableID = 'ips';
 
 interface LinodeIPAddressesProps {
   linodeID: number;
@@ -207,15 +207,10 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => {
         )}
       </Paper>
       {/* @todo: It'd be nice if we could always sort by public -> private. */}
-      <OrderBy
-        data={ipDisplay}
-        order="asc"
-        orderBy="type"
-        preferenceKey={'linode-network-ip-table'}
-      >
+      <OrderBy data={ipDisplay} order="asc" orderBy="type">
         {({ data: orderedData, handleOrderChange, order, orderBy }) => {
           return (
-            <Table aria-label="Linode IP Addresses" id={ipTableId}>
+            <Table aria-label="IPv4 Addresses" id={ipv4TableID}>
               <TableHead>
                 <TableRow>
                   <TableCell sx={{ width: '15%' }}>Address</TableCell>
@@ -240,7 +235,7 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => {
                     {...ipDisplay}
                     {...handlers}
                     isVPCOnlyLinode={
-                      isVPCOnlyLinode && ipDisplay.type === 'Public – IPv4'
+                      isVPCOnlyLinode && ipDisplay.type === 'IPv4 – Public'
                     }
                     key={`${ipDisplay.address}-${ipDisplay.type}`}
                     linodeId={linodeID}
@@ -344,15 +339,15 @@ export const vpcConfigInterfaceToDisplayRows = (
   if (ipv4?.vpc) {
     ipDisplay.push({
       address: ipv4.vpc,
-      type: 'VPC – IPv4',
+      type: 'IPv4 – VPC',
       ...emptyProps,
     });
   }
 
   if (ipv4?.nat_1_1) {
     ipDisplay.push({
       address: ipv4.nat_1_1,
-      type: 'VPC NAT – IPv4',
+      type: 'VPC IPv4 – NAT',
       ...emptyProps,
     });
   }
@@ -361,7 +356,7 @@ export const vpcConfigInterfaceToDisplayRows = (
     ip_ranges.forEach((ip_range) => {
       ipDisplay.push({
         address: ip_range,
-        type: 'VPC – Range – IPv4',
+        type: 'IPv4 – VPC – Range',
         ...emptyProps,
       });
     });
@@ -428,7 +423,7 @@ export const ipResponseToDisplayRows = (
         gateway: '',
         rdns: '',
         subnetMask: '',
-        type: 'Range – IPv6' as IPDisplay['type'],
+        type: 'IPv6 – Range' as IPDisplay['type'],
       };
     })
   );
@@ -460,13 +455,16 @@ const ipToDisplay = (ip: IPAddress, key: ipKey): IPDisplay => {
 };
 
 export const createType = (ip: IPAddress, key: ipKey) => {
-  if (key === 'Reserved' && ip.type === 'ipv4') {
-    return ip.public ? 'Reserved IPv4 (public)' : 'Reserved IPv4 (private)';
-  }
+  let type = '';
+  type += ip.type === 'ipv4' ? 'IPv4' : 'IPv6';
+
+  type += ' – ';
 
-  if (key === 'SLAAC') {
-    return 'Public – IPv6 – SLAAC';
+  if (key === 'Reserved') {
+    type += ip.public ? 'Reserved (public)' : 'Reserved (private)';
+  } else {
+    type += key;
   }
 
-  return `${key} – ${ip.type === 'ipv4' ? 'IPv4' : 'IPv6'}`;
+  return type;
 };
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.test.tsx
@@ -38,7 +38,7 @@ describe('LinodeNetworkingActionMenu', () => {
       <LinodeNetworkingActionMenu
         {...props}
         ipAddress={mockLinodeIPv4}
-        ipType="Public – IPv4"
+        ipType="IPv4 – Public"
       />
     );
 
@@ -54,7 +54,7 @@ describe('LinodeNetworkingActionMenu', () => {
       <LinodeNetworkingActionMenu
         {...props}
         ipAddress={mockLinodeIPv6Range}
-        ipType="Range – IPv6"
+        ipType="IPv6 – Range"
       />
     );
 
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx
@@ -25,6 +25,7 @@ interface Props {
 export const LinodeNetworkingActionMenu = (props: Props) => {
   const theme = useTheme<Theme>();
   const matchesMdDown = useMediaQuery(theme.breakpoints.down('lg'));
+
   const {
     ipAddress,
     ipType,
@@ -36,15 +37,15 @@ export const LinodeNetworkingActionMenu = (props: Props) => {
   } = props;
 
   const showEdit = ![
-    'Link Local – IPv6',
-    'Private – IPv4',
-    'Reserved IPv4 (private)',
-    'Reserved IPv4 (public)',
-    'VPC NAT – IPv4',
-    'VPC – IPv4',
+    'IPv4 – Private',
+    'IPv4 – Reserved (private)',
+    'IPv4 – Reserved (public)',
+    'IPv4 – VPC',
+    'IPv6 – Link Local',
+    'VPC IPv4 – NAT',
   ].includes(ipType);
 
-  const deletableIPTypes = ['Private – IPv4', 'Public – IPv4', 'Range – IPv6'];
+  const deletableIPTypes = ['IPv4 – Public', 'IPv4 – Private', 'IPv6 – Range'];
 
   // if we have a 116 we don't want to give the option to remove it
   const is116Range = ipAddress?.prefix === 116;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/types.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/types.ts
@@ -1,12 +1,12 @@
 export type IPTypes =
-  | 'Link Local – IPv6'
-  | 'Private – IPv4'
-  | 'Public – IPv4'
-  | 'Public – IPv6 – SLAAC'
-  | 'Range – IPv6'
-  | 'Reserved IPv4 (private)'
-  | 'Reserved IPv4 (public)'
-  | 'Shared – IPv4'
-  | 'VPC NAT – IPv4'
-  | 'VPC – IPv4'
-  | 'VPC – Range – IPv4';
+  | 'IPv4 – Private'
+  | 'IPv4 – Public'
+  | 'IPv4 – Reserved (private)'
+  | 'IPv4 – Reserved (public)'
+  | 'IPv4 – Shared'
+  | 'IPv4 – VPC – Range'
+  | 'IPv4 – VPC'
+  | 'IPv6 – Link Local'
+  | 'IPv6 – Range'
+  | 'IPv6 – SLAAC'
+  | 'VPC IPv4 – NAT';
