fix: [M3-9025] - Region validation when switching to LKE-E (linode#11471

)

## Description 📝
Fix region validation when a user is switching from LKE to LKE-E tier in the Kubernetes create flow

## How to test 🧪

### Prerequisites

(How to setup test environment)

- Ensure you have the customer tags for LKE-E (check project tracker)

### Reproduction steps

(How to reproduce the issue, if applicable)

- [ ] Go to another branch or dev environment and navigate to the Kubernetes create page
- [ ] Enter a cluster label, select LKE as the tier, select a non LKE-E supported region (i.e. Atlanta, GA), select a HA control plane option, add a plan
- [ ] Change the selected tier to LKE-E. Notice the region select is cleared but the Create Cluster button is enabled. Clicking Create Cluster shows an error text in the Region field

### Verification steps

(How to verify changes)

- [ ] Checkout this branch or PR preview link and navigate to the Kubernetes create page
- [ ] Enter a cluster label, select LKE as the tier, select a non LKE-E supported region (i.e. Atlanta, GA), select a HA control plane option, add a plan
- [ ] Change the selected tier to LKE-E. The region select should be cleared and the Create Cluster button is disabled

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

@@ -61,13 +61,14 @@ import type {
   KubeNodePoolResponse,
   KubernetesTier,
 } from '@linode/api-v4/lib/kubernetes';
+import type { Region } from '@linode/api-v4/lib/regions';
 import type { APIError } from '@linode/api-v4/lib/types';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
 
 export const CreateCluster = () => {
   const { classes } = useStyles();
-  const [selectedRegionId, setSelectedRegionId] = React.useState<
-    string | undefined
+  const [selectedRegion, setSelectedRegion] = React.useState<
+    Region | undefined
   >();
   const [nodePools, setNodePools] = React.useState<KubeNodePoolResponse[]>([]);
   const [label, setLabel] = React.useState<string | undefined>();
@@ -110,6 +111,11 @@ export const CreateCluster = () => {
     // HA is enabled by default for enterprise clusters
     if (tier === 'enterprise') {
       setHighAvailability(true);
+
+      // When changing the tier to enterprise, we want to check if the pre-selected region has the capability
+      if (!selectedRegion?.capabilities.includes('Kubernetes Enterprise')) {
+        setSelectedRegion(undefined);
+      }
     } else {
       setHighAvailability(undefined);
     }
@@ -214,7 +220,7 @@ export const CreateCluster = () => {
       k8s_version: version,
       label,
       node_pools,
-      region: selectedRegionId,
+      region: selectedRegion?.id,
     };
 
     if (showAPL) {
@@ -271,7 +277,7 @@ export const CreateCluster = () => {
   };
 
   const highAvailabilityPrice = getDCSpecificPriceByType({
-    regionId: selectedRegionId,
+    regionId: selectedRegion?.id,
     type: lkeHAType,
   });
 
@@ -295,7 +301,7 @@ export const CreateCluster = () => {
     isSelectedRegionEligibleForPlan,
   } = plansNoticesUtils({
     regionsData,
-    selectedRegionID: selectedRegionId,
+    selectedRegionID: selectedRegion?.id,
   });
 
   if (typesError || regionsError || versionsError) {
@@ -362,9 +368,9 @@ export const CreateCluster = () => {
                 }
                 disableClearable
                 errorText={errorMap.region}
-                onChange={(e, region) => setSelectedRegionId(region.id)}
+                onChange={(e, region) => setSelectedRegion(region)}
                 regions={regionsData}
-                value={selectedRegionId}
+                value={selectedRegion?.id}
               />
             </Stack>
             <StyledDocsLinkContainer
@@ -414,7 +420,7 @@ export const CreateCluster = () => {
                 isAPLEnabled={apl_enabled}
                 isErrorKubernetesTypes={isErrorKubernetesTypes}
                 isLoadingKubernetesTypes={isLoadingKubernetesTypes}
-                selectedRegionId={selectedRegionId}
+                selectedRegionId={selectedRegion?.id}
                 setHighAvailability={setHighAvailability}
               />
             </Box>
@@ -454,7 +460,7 @@ export const CreateCluster = () => {
             isPlanPanelDisabled={isPlanPanelDisabled}
             isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan}
             regionsData={regionsData}
-            selectedRegionId={selectedRegionId}
+            selectedRegionId={selectedRegion?.id}
             types={typesData || []}
             typesLoading={typesLoading}
           />
@@ -473,7 +479,7 @@ export const CreateCluster = () => {
           updateFor={[
             hasAgreed,
             highAvailability,
-            selectedRegionId,
+            selectedRegion?.id,
             nodePools,
             submitting,
             typesData,
@@ -487,7 +493,7 @@ export const CreateCluster = () => {
           hasAgreed={hasAgreed}
           highAvailability={highAvailability}
           pools={nodePools}
-          region={selectedRegionId}
+          region={selectedRegion?.id}
           regionsData={regionsData}
           removePool={removePool}
           showHighAvailability={showHighAvailability}