upcoming: [M3-9981] – Add support for VPC IPv6 in the Assign/Unassign Linodes drawers (linode#12778)

Author: dwiley-akamai

packages/api-v4/.changeset/pr-12778-upcoming-features-1756838250295.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Make `address` an optional property on the IPv6SLAAC object ([#12778](https://github.com/linode/manager/pull/12778))

packages/api-v4/src/linodes/types.ts

@@ -191,7 +191,7 @@ export interface ConfigInterfaceIPv4 {
 }
 
 export interface IPv6SLAAC {
-  address: string;
+  address?: string;
   range: string;
 }
 

packages/manager/.changeset/pr-12778-upcoming-features-1756838142101.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add VPC IPv6 support in Assign Linodes and Unassign Linodes drawers ([#12778](https://github.com/linode/manager/pull/12778))

packages/manager/cypress/e2e/core/vpc/vpc-linodes-update.spec.ts

@@ -50,9 +50,10 @@ describe('VPC assign/unassign flows', () => {
   });
 
   beforeEach(() => {
-    // TODO - Remove mock once `nodebalancerVpc` feature flag is removed.
+    // TODO - Remove mock once `nodebalancerVpc` and `vpcIpv6  feature flags are removed.
     mockAppendFeatureFlags({
       nodebalancerVpc: false,
+      vpcIpv6: false,
     }).as('getFeatureFlags');
   });
 
@@ -166,9 +167,7 @@ describe('VPC assign/unassign flows', () => {
           .click();
 
         // Auto-assign IPv4 checkbox checked by default
-        cy.findByLabelText(
-          'Auto-assign a VPC IPv4 address for this Linode'
-        ).should('be.checked');
+        cy.findByLabelText('Auto-assign VPC IPv4 address').should('be.checked');
 
         cy.wait('@getLinodeConfigs');
 
@@ -305,7 +304,7 @@ describe('VPC assign/unassign flows', () => {
           .click();
 
         // Uncheck auto-assign checkbox and type in VPC IPv4
-        cy.findByLabelText('Auto-assign a VPC IPv4 address for this Linode')
+        cy.findByLabelText('Auto-assign VPC IPv4 address')
           .should('be.checked')
           .click();
         cy.findByLabelText('VPC IPv4').should('be.visible').click();
@@ -335,6 +334,7 @@ describe('VPC assign/unassign flows', () => {
 
         ui.button
           .findByTitle('Done')
+          .scrollIntoView()
           .should('be.visible')
           .should('be.enabled')
           .click();

packages/manager/src/components/MaintenanceBanner/MaintenanceBannerV2.tsx

@@ -31,8 +31,12 @@ export const MaintenanceBannerV2 = () => {
   );
 
   return (
-    maintenanceLinodes.size > 0 && ( 
-      <Notice data-qa-maintenance-banner-v2="true" data-testid="maintenance-banner" variant="warning">
+    maintenanceLinodes.size > 0 && (
+      <Notice
+        data-qa-maintenance-banner-v2="true"
+        data-testid="maintenance-banner"
+        variant="warning"
+      >
         <Typography>
           <strong>
             {pluralize('Linode', 'Linodes', maintenanceLinodes.size)}

packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx

@@ -59,6 +59,12 @@ const useStyles = makeStyles()((theme: Theme) => ({
 }));
 
 export interface MultipeIPInputProps {
+  /**
+   * Tightens spacing when used in VPC Dual Stack contexts.
+   * @default false
+   */
+  adjustSpacingForVPCDualStack?: boolean;
+
   /**
    * Text displayed on the button.
    */
@@ -90,7 +96,7 @@ export interface MultipeIPInputProps {
    * Indicates if the input is for VPC IPv4 ranges.
    * @default false
    */
-  forVPCIPv4Ranges?: boolean;
+  forVPCIPRanges?: boolean;
 
   /**
    * Helper text for additional guidance.
@@ -147,12 +153,13 @@ export interface MultipeIPInputProps {
 
 export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
   const {
+    adjustSpacingForVPCDualStack,
     buttonText,
     className,
     disabled,
     error,
     forDatabaseAccessControls,
-    forVPCIPv4Ranges,
+    forVPCIPRanges,
     helperText,
     ips,
     isLinkStyled,
@@ -202,8 +209,17 @@ export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
   }
 
   const addIPButton =
-    forVPCIPv4Ranges || isLinkStyled ? (
-      <StyledLinkButtonBox sx={{ marginTop: isLinkStyled ? '8px' : '12px' }}>
+    forVPCIPRanges || isLinkStyled ? (
+      <StyledLinkButtonBox
+        sx={{
+          marginTop:
+            adjustSpacingForVPCDualStack && ips.length === 0
+              ? '0px'
+              : isLinkStyled
+                ? '8px'
+                : '12px',
+        }}
+      >
         <LinkButton isDisabled={disabled} onClick={addNewInput}>
           {buttonText}
         </LinkButton>
@@ -222,7 +238,7 @@ export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
 
   return (
     <div className={cx(classes.root, className)}>
-      {tooltip ? (
+      {tooltip && title ? (
         <div className={classes.ipNetmaskTooltipSection}>
           <InputLabel>{title}</InputLabel>
           <TooltipIcon
@@ -236,12 +252,16 @@ export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
           />
         </div>
       ) : (
-        <InputLabel>
-          {title}
-          {required ? (
-            <span className={classes.required}> (required)</span>
-          ) : null}
-        </InputLabel>
+        // There are a couple of instances in the codebase where an empty string is passed as the title so a title isn't displayed.
+        // Having this check ensures we don't render an empty label element (which can still impact spacing) in those cases.
+        title && (
+          <InputLabel>
+            {title}
+            {required ? (
+              <span className={classes.required}> (required)</span>
+            ) : null}
+          </InputLabel>
+        )
       )}
       {helperText && (
         <Typography className={classes.helperText}>{helperText}</Typography>
@@ -257,7 +277,7 @@ export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
             spacing={2}
             sx={{
               justifyContent: 'center',
-              maxWidth: forVPCIPv4Ranges ? '415px' : undefined,
+              maxWidth: forVPCIPRanges ? '415px' : undefined,
             }}
           >
             <Grid size={11}>
@@ -284,7 +304,7 @@ export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
              * used in DBaaS or for Linode VPC interfaces
              */}
             <Grid size={1}>
-              {(idx > 0 || forDatabaseAccessControls || forVPCIPv4Ranges) && (
+              {(idx > 0 || forDatabaseAccessControls || forVPCIPRanges) && (
                 <IconButton
                   aria-disabled={disabled}
                   className={classes.button}

packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsListTable.tsx

@@ -21,6 +21,10 @@ export type RemovableItem = {
 };
 
 export interface RemovableSelectionsListTableProps {
+  /**
+   * If false, do not include VPC IPv6 and VPC IPv6 Ranges cells
+   */
+  displayVPCIPv6Data?: boolean;
   /**
    * The descriptive text to display above the list
    */
@@ -58,6 +62,7 @@ export const RemovableSelectionsListTable = (
 ) => {
   const {
     headerText,
+    displayVPCIPv6Data = false,
     isRemovable = true,
     noDataText,
     onRemove,
@@ -85,8 +90,20 @@ export const RemovableSelectionsListTable = (
           </TableCell>
           <TableCell>{selection.vpcIPv4 ?? null}</TableCell>
           <TableCell>
-            {determineNoneSingleOrMultipleWithChip(selection.vpcRanges ?? [])}
+            {determineNoneSingleOrMultipleWithChip(
+              selection.vpcIPv4Ranges ?? []
+            )}
           </TableCell>
+          {displayVPCIPv6Data && (
+            <>
+              <TableCell>{selection.vpcIPv6 ?? null}</TableCell>
+              <TableCell>
+                {determineNoneSingleOrMultipleWithChip(
+                  selection.vpcIPv6Ranges ?? []
+                )}
+              </TableCell>
+            </>
+          )}
           <TableCell>
             {isRemovable && (
               <IconButton

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx

@@ -255,8 +255,8 @@ export const VPCPanel = (props: VPCPanelProps) => {
                 <AssignIPRanges
                   handleIPRangeChange={handleIPv4RangeChange}
                   includeDescriptionInTooltip
-                  ipRanges={additionalIPv4RangesForVPC}
                   ipRangesError={vpcIPRangesError}
+                  ipv4Ranges={additionalIPv4RangesForVPC}
                 />
               </>
             )}

packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.test.tsx

@@ -20,7 +20,8 @@ describe('AssignIPRanges', () => {
     const { getByText } = renderWithTheme(
       <AssignIPRanges
         handleIPRangeChange={handleIPRangeChangeMock}
-        ipRanges={ipRanges}
+        handleIPv6RangeChange={vi.fn()}
+        ipv4Ranges={ipRanges}
       />
     );
     expect(getByText(ASSIGN_IPV4_RANGES_TITLE)).toBeInTheDocument();
@@ -36,8 +37,9 @@ describe('AssignIPRanges', () => {
     const { getByText } = renderWithTheme(
       <AssignIPRanges
         handleIPRangeChange={handleIPRangeChangeMock}
-        ipRanges={ipRanges}
+        handleIPv6RangeChange={vi.fn()}
         ipRangesError={ipRangesError}
+        ipv4Ranges={ipRanges}
       />
     );
     expect(getByText('Error message')).toBeInTheDocument();
@@ -47,11 +49,52 @@ describe('AssignIPRanges', () => {
     const { getByText } = renderWithTheme(
       <AssignIPRanges
         handleIPRangeChange={handleIPRangeChangeMock}
-        ipRanges={ipRanges}
+        handleIPv6RangeChange={vi.fn()}
+        ipv4Ranges={ipRanges}
       />
     );
 
     const button = getByText('Add IPv4 Range');
     expect(button).toBeInTheDocument();
   });
+
+  it('has section titles reflective of dual stack when showIPv6Fields is true', () => {
+    const { getByText } = renderWithTheme(
+      <AssignIPRanges
+        handleIPRangeChange={vi.fn()}
+        handleIPv6RangeChange={vi.fn()}
+        ipv4Ranges={[]}
+        ipv6Ranges={[]}
+        showIPv6Fields={true}
+      />
+    );
+
+    const additionalIPRangesSectionTitle = getByText(
+      /Assign additional IP ranges/i
+    );
+    expect(additionalIPRangesSectionTitle).toBeInTheDocument();
+
+    const button = getByText('Add IPv6 Range');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('does not have section titles reflective of dual stack when showIPv6Fields is false', () => {
+    const { queryByText } = renderWithTheme(
+      <AssignIPRanges
+        handleIPRangeChange={vi.fn()}
+        handleIPv6RangeChange={vi.fn()}
+        ipv4Ranges={[]}
+        ipv6Ranges={[]}
+        showIPv6Fields={false}
+      />
+    );
+
+    const additionalIPRangesSectionTitle = queryByText(
+      /Assign additional IP ranges/i
+    );
+    expect(additionalIPRangesSectionTitle).not.toBeInTheDocument();
+
+    const button = queryByText('Add IPv6 Range');
+    expect(button).not.toBeInTheDocument();
+  });
 });