upcoming: [M3-8848] - Update Kubernetes version Autocomplete to filter on LKE-E versions

packages/manager/.changeset/pr-11359-upcoming-features-1733244908637.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update Kubernetes Versions in Create Cluster flow to support tiers for LKE-E ([#11359](https://github.com/linode/manager/pull/11359))

packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts

@@ -14,6 +14,7 @@ import {
   mockGetCluster,
   mockCreateClusterError,
   mockGetControlPlaneACL,
+  mockGetTieredKubernetesVersions,
 } from 'support/intercepts/lke';
 import { mockGetAccount } from 'support/intercepts/account';
 import {
@@ -22,7 +23,10 @@ import {
 } from 'support/intercepts/regions';
 import { KubernetesCluster } from '@linode/api-v4';
 import { LkePlanDescription } from 'support/api/lke';
-import { lkeClusterPlans } from 'support/constants/lke';
+import {
+  latestEnterpriseTierKubernetesVersion,
+  lkeClusterPlans,
+} from 'support/constants/lke';
 import { chooseRegion, getRegionById } from 'support/util/regions';
 import { interceptCreateCluster } from 'support/intercepts/lke';
 import { ui } from 'support/ui';
@@ -870,8 +874,12 @@ describe('LKE Cluster Creation with LKE-E', () => {
           capabilities: ['Kubernetes Enterprise'],
         })
       ).as('getAccount');
+      mockGetTieredKubernetesVersions('enterprise', [
+        latestEnterpriseTierKubernetesVersion,
+      ]).as('getTieredKubernetesVersions');
 
       cy.visitWithLogin('/kubernetes/clusters');
+      cy.wait(['@getAccount']);
 
       ui.button
         .findByTitle('Create Cluster')
@@ -880,6 +888,7 @@ describe('LKE Cluster Creation with LKE-E', () => {
         .click();
 
       cy.url().should('endWith', '/kubernetes/create');
+      cy.wait(['@getTieredKubernetesVersions']);
 
       cy.findByText('Cluster Type').should('be.visible');
 
@@ -904,6 +913,18 @@ describe('LKE Cluster Creation with LKE-E', () => {
       // Confirm HA section is hidden since LKE-E includes HA by default
       cy.findByText('HA Control Plane').should('not.exist');
 
+      // Selects an enterprise version
+      ui.autocomplete
+        .findByLabel('Kubernetes Version')
+        .should('be.visible')
+        .click();
+
+      ui.autocompletePopper
+        .findByTitle(latestEnterpriseTierKubernetesVersion.id)
+        .should('be.visible')
+        .should('be.enabled')
+        .click();
+
       // TODO: finish the rest of this test in subsequent PRs
     });
 

packages/manager/cypress/support/constants/lke.ts

@@ -1,4 +1,5 @@
-import { LkePlanDescription } from 'support/api/lke';
+import type { KubernetesTieredVersion } from '@linode/api-v4';
+import type { LkePlanDescription } from 'support/api/lke';
 
 /**
  * Subset of LKE cluster plans as shown on Cloud Manager.
@@ -14,7 +15,28 @@ export const lkeClusterPlans: LkePlanDescription[] = [
  */
 export const kubernetesVersions = ['1.25', '1.24'];
 
+/**
+ * Enterprise kubernetes versions available for cluster creation via Cloud Manager.
+ */
+export const enterpriseKubernetesVersions = ['v1.31.1+lke1'];
+
 /**
  * The latest Kubernetes version available for cluster creation via Cloud Manager.
  */
 export const latestKubernetesVersion = kubernetesVersions[0];
+
+/**
+ * The latest standard tier Kubernetes version available for cluster creation via Cloud Manager.
+ */
+export const latestStandardTierKubernetesVersion: KubernetesTieredVersion = {
+  id: latestKubernetesVersion,
+  tier: 'standard',
+};
+
+/**
+ * The latest enterprise tier Kubernetes version available for cluster creation via Cloud Manager.
+ */
+export const latestEnterpriseTierKubernetesVersion: KubernetesTieredVersion = {
+  id: enterpriseKubernetesVersions[0],
+  tier: 'enterprise',
+};

packages/manager/cypress/support/intercepts/lke.ts

@@ -6,7 +6,11 @@ import {
   kubeEndpointFactory,
   kubernetesDashboardUrlFactory,
 } from '@src/factories';
-import { kubernetesVersions } from 'support/constants/lke';
+import {
+  kubernetesVersions,
+  latestEnterpriseTierKubernetesVersion,
+  latestStandardTierKubernetesVersion,
+} from 'support/constants/lke';
 import { makeErrorResponse } from 'support/util/errors';
 import { apiMatcher } from 'support/util/intercepts';
 import { paginateResponse } from 'support/util/paginate';
@@ -18,6 +22,8 @@ import type {
   KubeNodePoolResponse,
   KubernetesCluster,
   KubernetesControlPlaneACLPayload,
+  KubernetesTier,
+  KubernetesTieredVersion,
   KubernetesVersion,
 } from '@linode/api-v4';
 
@@ -42,6 +48,39 @@ export const mockGetKubernetesVersions = (versions?: string[] | undefined) => {
   );
 };
 
+/**
+ * Intercepts GET request to retrieve tiered Kubernetes versions and mocks response.
+ *
+ * @param tier - Standard or enterprise Kubernetes tier.
+ * @param versions - Optional array of strings containing mocked tiered versions.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetTieredKubernetesVersions = (
+  tier: KubernetesTier,
+  versions?: KubernetesTieredVersion[]
+) => {
+  const defaultTieredVersions =
+    tier === 'enterprise'
+      ? [latestEnterpriseTierKubernetesVersion]
+      : [latestStandardTierKubernetesVersion];
+
+  const versionObjects = (versions ? versions : defaultTieredVersions).map(
+    (kubernetesTieredVersion): KubernetesTieredVersion => {
+      return {
+        id: kubernetesTieredVersion.id,
+        tier: kubernetesTieredVersion.tier,
+      };
+    }
+  );
+
+  return cy.intercept(
+    'GET',
+    apiMatcher(`lke/versions/${tier}*`),
+    paginateResponse(versionObjects)
+  );
+};
+
 /**
  * Intercepts GET request to retrieve LKE clusters and mocks response.
  *

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

@@ -28,6 +28,7 @@ import {
 import {
   useCreateKubernetesClusterBetaMutation,
   useCreateKubernetesClusterMutation,
+  useKubernetesTieredVersionsQuery,
   useKubernetesTypesQuery,
   useKubernetesVersionQuery,
 } from 'src/queries/kubernetes';
@@ -60,6 +61,7 @@ import type {
   CreateNodePoolData,
   KubeNodePoolResponse,
   KubernetesTier,
+  KubernetesTieredVersion,
 } from '@linode/api-v4/lib/kubernetes';
 import type { APIError } from '@linode/api-v4/lib/types';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
@@ -72,6 +74,9 @@ export const CreateCluster = () => {
   const [nodePools, setNodePools] = React.useState<KubeNodePoolResponse[]>([]);
   const [label, setLabel] = React.useState<string | undefined>();
   const [version, setVersion] = React.useState<string | undefined>();
+  const [tieredVersions, setTieredVersions] = React.useState<
+    KubernetesTieredVersion[]
+  >();
   const [errors, setErrors] = React.useState<APIError[] | undefined>();
   const [submitting, setSubmitting] = React.useState<boolean>(false);
   const [hasAgreed, setAgreed] = React.useState<boolean>(false);
@@ -109,6 +114,11 @@ export const CreateCluster = () => {
       setHighAvailability(false);
     }
     setSelectedTier(tier);
+    setTieredVersions(
+      tier === 'enterprise'
+        ? enterpriseTierVersionData
+        : standardTierVersionData
+    );
   };
 
   const lkeHAType = kubernetesHighAvailabilityTypesData?.find(
@@ -137,21 +147,45 @@ export const CreateCluster = () => {
     isError: versionLoadError,
   } = useKubernetesVersionQuery();
 
+  const {
+    data: standardTierVersionData,
+    isLoading: standardTierVersionDataIsLoading,
+  } = useKubernetesTieredVersionsQuery('standard');
+  const {
+    data: enterpriseTierVersionData,
+    isLoading: enterpriseTierVersionDataIsLoading,
+  } = useKubernetesTieredVersionsQuery('enterprise');
+
   const {
     isLkeEnterpriseLAFeatureEnabled,
     isLkeEnterpriseLAFlagEnabled,
   } = useIsLkeEnterpriseEnabled();
 
-  const versions = (versionData ?? []).map((thisVersion) => ({
+  /**
+   * If LKE-E is enabled, use the new /versions/<tier> endpoint data, which supports enterprise tiers.
+   * If LKE-E is disabled, use the data from the existing /versions endpoint.
+   * @todo LKE-E: Clean up use of versionData once LKE-E is in GA.
+   */
+  const _versionData = isLkeEnterpriseLAFeatureEnabled
+    ? tieredVersions
+    : versionData;
+
+  const versions = (_versionData ?? []).map((thisVersion) => ({
     label: thisVersion.id,
     value: thisVersion.id,
   }));
 
+  React.useEffect(() => {
+    if (isLkeEnterpriseLAFeatureEnabled && selectedTier === 'standard') {
+      setTieredVersions(standardTierVersionData);
+    }
+  }, [versions]);
+
   React.useEffect(() => {
     if (versions.length > 0) {
       setVersion(getLatestVersion(versions).value);
     }
-  }, [versionData]);
+  }, [versionData, _versionData]);
 
   const createCluster = () => {
     if (ipV4Addr.some((ip) => ip.error) || ipV6Addr.some((ip) => ip.error)) {
@@ -212,6 +246,10 @@ export const CreateCluster = () => {
       payload = { ...payload, apl_enabled };
     }
 
+    if (isLkeEnterpriseLAFeatureEnabled) {
+      payload = { ...payload, tier: selectedTier };
+    }
+
     const createClusterFn =
       showAPL || isLkeEnterpriseLAFeatureEnabled
         ? createKubernetesClusterBeta
@@ -354,6 +392,11 @@ export const CreateCluster = () => {
           </StyledFieldWithDocsStack>
           <Divider sx={{ marginTop: 4 }} />
           <Autocomplete
+            loading={
+              isLkeEnterpriseLAFeatureEnabled &&
+              (enterpriseTierVersionDataIsLoading ||
+                standardTierVersionDataIsLoading)
+            }
             onChange={(_, selected) => {
               setVersion(selected?.value);
             }}

packages/manager/src/queries/kubernetes.ts

@@ -381,8 +381,8 @@ export const useKubernetesVersionQuery = () =>
     ...queryPresets.oneTimeFetch,
   });
 
-export const useKubernetesTieredVersionQuery = (tier: string) => {
-  useQuery<KubernetesTieredVersion[], APIError[]>({
+export const useKubernetesTieredVersionsQuery = (tier: string) => {
+  return useQuery<KubernetesTieredVersion[], APIError[]>({
     ...kubernetesQueries.tieredVersions(tier),
     ...queryPresets.oneTimeFetch,
   });