upcoming: [M3-10203] - Add IPv6 (dual stack) support to LKE-E create flow

packages/api-v4/.changeset/pr-12594-upcoming-features-1753822524437.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add type and update cluster payload and interface to support optional stack_type field for LKE-E ([#12594](https://github.com/linode/manager/pull/12594))

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

@@ -13,6 +13,8 @@ export type Label = {
 
 export type NodePoolUpdateStrategy = 'on_recycle' | 'rolling_update';
 
+export type KubernetesStackType = 'ipv4' | 'ipv4-ipv6';
+
 export interface Taint {
   effect: KubernetesTaintEffect;
   key: string;
@@ -27,6 +29,11 @@ export interface KubernetesCluster {
   k8s_version: string;
   label: string;
   region: string;
+  /**
+   * Upcoming Feature Notice - LKE-E:** this property may not be available to all customers
+   * and may change in subsequent releases.
+   */
+  stack_type?: KubernetesStackType;
   status: string; // @todo enum this
   /**
    * Upcoming Feature Notice - LKE-E:** this property may not be available to all customers
@@ -147,5 +154,6 @@ export interface CreateKubeClusterPayload {
   label?: string; // Label will be assigned by the API if not provided
   node_pools: CreateNodePoolDataBeta[];
   region?: string; // Will be caught by Yup if undefined
+  stack_type?: KubernetesStackType; // For LKE-E; will default to 'ipv4'
   tier?: KubernetesTier; // For LKE-E: Will be assigned 'standard' by the API if not provided
 }

packages/manager/.changeset/pr-12594-upcoming-features-1753822274393.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add IP Version (IPv4/IPv6) support to LKE-E cluster create flow ([#12594](https://github.com/linode/manager/pull/12594))

packages/manager/src/features/Kubernetes/CreateCluster/ClusterNetworkingPanel.tsx

@@ -1,8 +1,61 @@
-import { Stack, Typography } from '@linode/ui';
+import {
+  Divider,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { FormLabel } from 'src/components/FormLabel';
+
+import { useIsLkeEnterpriseEnabled } from '../kubeUtils';
 
 export const ClusterNetworkingPanel = () => {
-  return (
+  const { isLkeEnterprisePhase2FeatureEnabled } = useIsLkeEnterpriseEnabled();
+
+  const { control } = useFormContext();
+
+  return isLkeEnterprisePhase2FeatureEnabled ? (
+    <>
+      <Stack divider={<Divider />} spacing={4}>
+        <Controller
+          control={control}
+          name="stack_type"
+          render={({ field }) => (
+            <RadioGroup
+              {...field}
+              onChange={(e) => field.onChange(e.target.value)}
+              value={field.value ?? null}
+            >
+              <FormLabel>IP Version</FormLabel>
+              <FormControlLabel control={<Radio />} label="IPv4" value="ipv4" />
+              <FormControlLabel
+                control={<Radio />}
+                label="IPv4 + IPv6"
+                value="ipv4-ipv6"
+              />
+            </RadioGroup>
+          )}
+        />
+      </Stack>
+      <Stack marginTop={3}>
+        <Typography
+          sx={(theme) => ({
+            font: theme.tokens.alias.Typography.Label.Bold.S,
+          })}
+        >
+          VPC
+        </Typography>
+        <Typography marginTop={1}>
+          Allow for private communications within and across clusters in the
+          same data center.
+        </Typography>
+      </Stack>
+    </>
+  ) : (
     <Stack>
       <Typography variant="h3">VPC & Firewall</Typography>
       <Typography marginTop={1}>

packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx

@@ -82,6 +82,7 @@ import type {
   CreateKubeClusterPayload,
   CreateNodePoolDataBeta,
   KubeNodePoolResponseBeta,
+  KubernetesStackType,
   KubernetesTier,
 } from '@linode/api-v4/lib/kubernetes';
 import type { Region } from '@linode/api-v4/lib/regions';
@@ -90,6 +91,7 @@ import type { ExtendedIP } from 'src/utilities/ipUtils';
 
 type FormValues = {
   nodePools: KubeNodePoolResponseBeta[];
+  stack_type: KubernetesStackType | null;
 };
 
 export interface NodePoolConfigDrawerHandlerParams {
@@ -141,12 +143,20 @@ export const CreateCluster = () => {
   const [selectedType, setSelectedType] = React.useState<string>();
   const [selectedPoolIndex, setSelectedPoolIndex] = React.useState<number>();
 
+  const {
+    isLkeEnterpriseLAFeatureEnabled,
+    isLkeEnterpriseLAFlagEnabled,
+    isLkeEnterprisePhase2FeatureEnabled,
+  } = useIsLkeEnterpriseEnabled();
+
   // Use React Hook Form for node pools to make updating pools and their configs easier.
   // TODO - Future: use RHF for the rest of the form and replace FormValues with CreateKubeClusterPayload.
   const { control, ...form } = useForm<FormValues>({
     defaultValues: {
       nodePools: [],
+      stack_type: isLkeEnterprisePhase2FeatureEnabled ? 'ipv4' : null,
     },
+    shouldUnregister: true,
   });
   const nodePools = useWatch({ control, name: 'nodePools' });
   const { update } = useFieldArray({
@@ -227,9 +237,6 @@ export const CreateCluster = () => {
   const { mutateAsync: createKubernetesClusterBeta } =
     useCreateKubernetesClusterBetaMutation();
 
-  const { isLkeEnterpriseLAFeatureEnabled, isLkeEnterpriseLAFlagEnabled } =
-    useIsLkeEnterpriseEnabled();
-
   const {
     isLoadingVersions,
     versions: versionData,
@@ -272,6 +279,8 @@ export const CreateCluster = () => {
       pick(['type', 'count', 'update_strategy'])
     ) as CreateNodePoolDataBeta[];
 
+    const stackType = form.getValues('stack_type');
+
     const _ipv4 = ipV4Addr
       .map((ip) => {
         return ip.address;
@@ -320,6 +329,10 @@ export const CreateCluster = () => {
       payload = { ...payload, tier: selectedTier };
     }
 
+    if (isLkeEnterprisePhase2FeatureEnabled && stackType) {
+      payload = { ...payload, stack_type: stackType };
+    }
+
     const createClusterFn = isUsingBetaEndpoint
       ? createKubernetesClusterBeta
       : createKubernetesCluster;

packages/manager/src/mocks/presets/crud/handlers/kubernetes.ts

@@ -223,6 +223,7 @@ export const createKubernetesCluster = (mockState: MockState) => [
         created: DateTime.now().toISO(),
         updated: DateTime.now().toISO(),
         tier: payload.tier,
+        stack_type: payload.stack_type,
       });
 
       const createNodePoolPromises = (payload.node_pools || []).map(