upcoming: [M3-9590] - Update Linode Networking UI for Linode Interfaces

packages/manager/src/components/ShowMore/ShowMore.tsx

@@ -29,7 +29,7 @@ export const ShowMore = <T extends {}>(props: ShowMoreProps<T>) => {
 
   return (
     <React.Fragment>
-      <StyledChip
+      <Chip
         {...chipProps}
         sx={
           anchorEl
@@ -62,28 +62,6 @@ export const ShowMore = <T extends {}>(props: ShowMoreProps<T>) => {
   );
 };
 
-const StyledChip = styled(Chip)(({ theme }) => ({
-  '& .MuiChip-label': {
-    paddingLeft: 6,
-    paddingRight: 6,
-  },
-  '&:focus': {
-    backgroundColor: theme.bg.lightBlue1,
-    outline: `1px dotted ${theme.tokens.color.Neutrals[50]}`,
-  },
-  '&:hover': {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.tokens.color.Neutrals.White,
-  },
-  backgroundColor: theme.bg.lightBlue1,
-  font: theme.font.bold,
-  lineHeight: 1,
-  marginLeft: theme.spacing(0.5),
-  paddingLeft: 2,
-  paddingRight: 2,
-  position: 'relative',
-}));
-
 const StyledPopover = styled(Popover)(({ theme }) => ({
   '& .MuiPopover-paper': {
     '&::-webkit-scrollbar': {

packages/manager/src/features/Linodes/LinodeCreate/Networking/VPC.tsx

@@ -14,6 +14,7 @@ import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 import { LinkButton } from 'src/components/LinkButton';
+import { VPCPublicIPLabel } from 'src/features/VPCs/components/VPCPublicIPLabel';
 import {
   REGION_CAVEAT_HELPER_TEXT,
   VPC_AUTO_ASSIGN_IPV4_TOOLTIP,
@@ -24,7 +25,6 @@ import { VPCAvailability } from './VPCAvailability';
 import { VPCRanges } from './VPCRanges';
 
 import type { LinodeCreateFormValues } from '../utilities';
-import { VPCPublicIPLabel } from 'src/features/VPCs/components/VPCPublicIPLabel';
 
 interface Props {
   index: number;
@@ -80,6 +80,7 @@ export const VPC = ({ index }: Props) => {
               label="VPC"
               loading={isLoading}
               noMarginTop
+              noOptionsText="There are no VPCs in the selected region."
               onBlur={field.onBlur}
               onChange={(e, vpc) => {
                 field.onChange(vpc?.id ?? null);

packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx

@@ -1,4 +1,4 @@
-import { useAllVPCsQuery, useRegionsQuery } from '@linode/queries';
+import { useAllVPCsQuery, useRegionQuery } from '@linode/queries';
 import {
   Autocomplete,
   Box,
@@ -12,7 +12,6 @@ import {
   TooltipIcon,
   Typography,
 } from '@linode/ui';
-import { doesRegionSupportFeature } from '@linode/utilities';
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
@@ -39,8 +38,6 @@ export const VPC = () => {
   const { control, formState, setValue } =
     useFormContext<CreateLinodeRequest>();
 
-  const { data: regions } = useRegionsQuery();
-
   const [regionId, selectedVPCId, selectedSubnetId, linodeVPCIPAddress] =
     useWatch({
       control,
@@ -52,11 +49,9 @@ export const VPC = () => {
       ],
     });
 
-  const regionSupportsVPCs = doesRegionSupportFeature(
-    regionId,
-    regions ?? [],
-    'VPCs'
-  );
+  const { data: region } = useRegionQuery(regionId);
+
+  const regionSupportsVPCs = region?.capabilities.includes('VPCs') ?? false;
 
   const {
     data: vpcs,
@@ -117,6 +112,7 @@ export const VPC = () => {
                 label="Assign VPC"
                 loading={isLoading}
                 noMarginTop
+                noOptionsText="There are no VPCs in the selected region."
                 onBlur={field.onBlur}
                 onChange={(e, vpc) => {
                   field.onChange(vpc?.id ?? null);

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

@@ -26,6 +26,7 @@ import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useVPCInterface } from 'src/hooks/useVPCInterface';
+import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes';
 
 import { AddIPDrawer } from './AddIPDrawer';
 import { DeleteIPDialog } from './DeleteIPDialog';
@@ -63,6 +64,7 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => {
   const { data: ips, error, isLoading } = useLinodeIPsQuery(linodeID);
   const { data: linode } = useLinodeQuery(linodeID);
   const { data: regions } = useRegionsQuery();
+  const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled();
 
   const linodeIsInDistributedRegion = getIsDistributedRegion(
     regions ?? [],
@@ -161,11 +163,15 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => {
         {isSmallScreen ? (
           <ActionMenu
             actionsList={[
-              {
-                disabled: isLinodesGrantReadOnly,
-                onClick: () => setIsAddDrawerOpen(true),
-                title: 'Add an IP Address',
-              },
+              ...(!isLinodeInterfacesEnabled
+                ? [
+                    {
+                      disabled: isLinodesGrantReadOnly,
+                      onClick: () => setIsAddDrawerOpen(true),
+                      title: 'Add an IP Address',
+                    },
+                  ]
+                : []),
               {
                 disabled: isLinodesGrantReadOnly,
                 onClick: () => setIsTransferDialogOpen(true),
@@ -195,13 +201,15 @@ export const LinodeIPAddresses = (props: LinodeIPAddressesProps) => {
             >
               IP Sharing
             </Button>
-            <Button
-              buttonType="primary"
-              disabled={isLinodesGrantReadOnly}
-              onClick={() => setIsAddDrawerOpen(true)}
-            >
-              Add an IP Address
-            </Button>
+            {!isLinodeInterfacesEnabled && (
+              <Button
+                buttonType="primary"
+                disabled={isLinodesGrantReadOnly}
+                onClick={() => setIsAddDrawerOpen(true)}
+              >
+                Add an IP Address
+              </Button>
+            )}
           </Stack>
         )}
       </Paper>

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/AddInterfaceDrawer/VPC/VPCDetails.tsx

@@ -36,6 +36,7 @@ export const VPCDetails = ({ regionId }: Props) => {
             label="VPC"
             loading={isLoading}
             noMarginTop
+            noOptionsText="You have no VPCs in this Linode's region."
             onBlur={field.onBlur}
             onChange={(e, vpc) => {
               field.onChange(vpc?.id ?? null);

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/EditInterfaceDrawer/VPCInterface/VPCIPv4Address.tsx

@@ -8,6 +8,7 @@ import {
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
+import { ErrorMessage } from 'src/components/ErrorMessage';
 import { VPCPublicIPLabel } from 'src/features/VPCs/components/VPCPublicIPLabel';
 
 import type {
@@ -31,7 +32,11 @@ export const VPCIPv4Address = (props: Props) => {
 
   return (
     <Stack spacing={1}>
-      {error && <Notice text={error} variant="error" />}
+      {error && (
+        <Notice variant="error">
+          <ErrorMessage message={error} />
+        </Notice>
+      )}
       <Stack spacing={1.5}>
         <Controller
           control={control}

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/EditInterfaceDrawer/VPCInterface/VPCIPv4Addresses.tsx

@@ -2,6 +2,8 @@ import { Notice, Stack, Typography } from '@linode/ui';
 import React from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
+import { ErrorMessage } from 'src/components/ErrorMessage';
+
 import { VPCIPv4Address } from './VPCIPv4Address';
 
 import type {
@@ -35,7 +37,9 @@ export const VPCIPv4Addresses = (props: Props) => {
     <Stack spacing={1}>
       <Typography variant="h3">IPv4 Addresses</Typography>
       {errors.vpc?.ipv4?.addresses?.message && (
-        <Notice text={errors.vpc?.ipv4?.addresses?.message} variant="error" />
+        <Notice variant="error">
+          <ErrorMessage message={errors.vpc?.ipv4?.addresses?.message} />
+        </Notice>
       )}
       <Stack spacing={2}>
         {fields.map((field, index) => (

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/EditInterfaceDrawer/VPCInterface/VPCIPv4Ranges.tsx

@@ -15,7 +15,7 @@ import { VPCRangesDescription } from 'src/features/VPCs/components/VPCRangesDesc
 import type { ModifyLinodeInterfacePayload } from '@linode/api-v4';
 
 export const VPCIPv4Ranges = () => {
-  const { control } = useFormContext<ModifyLinodeInterfacePayload>();
+  const { control, setFocus } = useFormContext<ModifyLinodeInterfacePayload>();
   const { fields, remove, append } = useFieldArray({
     control,
     name: 'vpc.ipv4.ranges',
@@ -40,14 +40,24 @@ export const VPCIPv4Ranges = () => {
                 containerProps={{ flexGrow: 1 }}
                 errorText={fieldState.error?.message}
                 hideLabel
+                inputRef={field.ref}
                 label={`VPC IPv4 Range ${index}`}
                 onChange={field.onChange}
                 value={field.value}
               />
             )}
           />
           <IconButton
-            onClick={() => remove(index)}
+            onClick={() => {
+              remove(index);
+
+              const previousRangeIndex = index - 1;
+
+              // If there is a previous range, focus it when the current one is removed
+              if (previousRangeIndex >= 0) {
+                setFocus(`vpc.ipv4.ranges.${previousRangeIndex}.range`);
+              }
+            }}
             sx={{ p: 1 }}
             title="Remove"
           >

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaceIPs.tsx

@@ -0,0 +1,40 @@
+import { Stack, Typography } from '@linode/ui';
+import React from 'react';
+
+import { MaskableText } from 'src/components/MaskableText/MaskableText';
+import { ShowMore } from 'src/components/ShowMore/ShowMore';
+
+import { getLinodeInterfaceIPs } from './LinodeInterfaceIPs.utils';
+
+import type { LinodeInterface } from '@linode/api-v4';
+
+interface Props {
+  linodeInterface: LinodeInterface;
+}
+
+export const LinodeInterfaceIPs = ({ linodeInterface }: Props) => {
+  const [primary, ...ips] = getLinodeInterfaceIPs(linodeInterface);
+
+  if (!primary && ips.length === 0) {
+    return <Typography>None</Typography>;
+  }
+
+  return (
+    <Stack direction="row" spacing={1.5}>
+      <MaskableText isToggleable text={primary} />
+      {ips.length > 0 && (
+        <ShowMore
+          ariaItemType="IP Address"
+          items={ips}
+          render={(ips) => (
+            <Stack>
+              {ips.map((ip) => (
+                <MaskableText isToggleable key={ip} text={ip} />
+              ))}
+            </Stack>
+          )}
+        />
+      )}
+    </Stack>
+  );
+};

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaceIPs.utils.test.ts

@@ -0,0 +1,96 @@
+import {
+  linodeInterfaceFactoryPublic,
+  linodeInterfaceFactoryVlan,
+  linodeInterfaceFactoryVPC,
+} from '@linode/utilities';
+
+import { getLinodeInterfaceIPs } from './LinodeInterfaceIPs.utils';
+
+describe('getLinodeInterfaceIPs', () => {
+  it('should return VPC IPs with the primary IP first', () => {
+    const linodeInterface = linodeInterfaceFactoryVPC.build({
+      vpc: {
+        ipv4: {
+          addresses: [
+            { address: '10.0.0.1' },
+            {
+              address: '10.0.0.2',
+              primary: true,
+              nat_1_1_address: '255.255.255.255',
+            },
+            { address: '10.0.0.3' },
+          ],
+          ranges: [{ range: '10.0.0.5/32' }],
+        },
+      },
+    });
+
+    const ips = getLinodeInterfaceIPs(linodeInterface);
+
+    expect(ips).toStrictEqual([
+      '10.0.0.2',
+      '255.255.255.255',
+      '10.0.0.1',
+      '10.0.0.3',
+      '10.0.0.5/32',
+    ]);
+  });
+
+  it('should return Public Interface IPs with the primary IP first', () => {
+    const linodeInterface = linodeInterfaceFactoryPublic.build({
+      public: {
+        ipv4: {
+          addresses: [
+            { address: '10.0.0.1' },
+            {
+              address: '10.0.0.2',
+              primary: true,
+            },
+            { address: '10.0.0.3' },
+          ],
+        },
+        ipv6: {
+          ranges: [{ range: '192.168.1.0/24' }],
+          shared: [],
+          slaac: [{ address: '2600:3c11::f03c:93ff:fe3a:130f', prefix: '64' }],
+        },
+      },
+    });
+
+    const ips = getLinodeInterfaceIPs(linodeInterface);
+
+    expect(ips).toStrictEqual([
+      '10.0.0.2',
+      '10.0.0.1',
+      '10.0.0.3',
+      '192.168.1.0/24',
+      '2600:3c11::f03c:93ff:fe3a:130f',
+    ]);
+  });
+
+  it('should return an empty array for VLAN without a IPAM Address', () => {
+    const linodeInterface = linodeInterfaceFactoryVlan.build({
+      vlan: {
+        ipam_address: '',
+        vlan_label: 'vlan-1',
+      },
+    });
+
+    const ips = getLinodeInterfaceIPs(linodeInterface);
+
+    expect(ips).toStrictEqual([]);
+  });
+
+  it('should return an empty with the IPAM Addresss for VLAN with an IPAM Address', () => {
+    const linodeInterface = linodeInterfaceFactoryVlan.build({
+      vlan: {
+        ipam_address: '192.168.21.34',
+        vlan_label: 'vlan-1',
+      },
+    });
+
+    const ips = getLinodeInterfaceIPs(linodeInterface);
+
+    expect(ips).toStrictEqual(['192.168.21.34']);
+  });
+});