upcoming: [M3-8847] - Update Region Select for LKE-Enterprise

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

@@ -11,6 +11,7 @@ export type Capabilities =
   | 'Distributed Plans'
   | 'GPU Linodes'
   | 'Kubernetes'
+  | 'Kubernetes Enterprise'
   | 'Linodes'
   | 'Managed Databases'
   | 'Metadata'

packages/manager/.changeset/pr-11348-upcoming-features-1733174894693.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update Region Select for LKE-Enterprise ([#11348](https://github.com/linode/manager/pull/11348))

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

@@ -870,6 +870,18 @@ describe('LKE Cluster Creation with LKE-E', () => {
           capabilities: ['Kubernetes Enterprise'],
         })
       ).as('getAccount');
+      mockGetRegions([
+        regionFactory.build({
+          capabilities: ['Linodes', 'Kubernetes'],
+          id: 'us-east',
+          label: 'Newark, US',
+        }),
+        regionFactory.build({
+          capabilities: ['Linodes', 'Kubernetes', 'Kubernetes Enterprise'],
+          id: 'us-iad',
+          label: 'Washington, DC',
+        }),
+      ]).as('getRegions');
 
       cy.visitWithLogin('/kubernetes/clusters');
 
@@ -904,6 +916,24 @@ 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');
 
+      cy.wait(['@getRegions']);
+
+      // Confirm unsupported regions are not displayed
+      ui.regionSelect.find().click().type('Newark, NJ');
+      ui.autocompletePopper.find().within(() => {
+        cy.findByText('Newark, NJ (us-east)').should('not.exist');
+      });
+
+      // Select a supported region
+      ui.regionSelect.find().clear().type('Washington, DC{enter}');
+
+      // Confirm that there is a tooltip explanation for the region dropdown options
+      ui.tooltip
+        .findByText(
+          'Only regions that support Kubernetes Enterprise are listed.'
+        )
+        .should('be.visible');
+
       // TODO: finish the rest of this test in subsequent PRs
     });
 

packages/manager/src/components/RegionSelect/RegionSelect.tsx

@@ -121,7 +121,7 @@ export const RegionSelect = <
         }}
         sx={(theme) => ({
           [theme.breakpoints.up('md')]: {
-            width: '416px',
+            maxWidth: tooltipText ? '458px' : '416px',
           },
         })}
         textFieldProps={{

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

@@ -332,11 +332,22 @@ export const CreateCluster = () => {
           <StyledFieldWithDocsStack>
             <Stack>
               <RegionSelect
+                currentCapability={
+                  isLkeEnterpriseLAFeatureEnabled &&
+                  selectedTier === 'enterprise'
+                    ? 'Kubernetes Enterprise'
+                    : 'Kubernetes'
+                }
                 textFieldProps={{
                   helperText: <RegionHelperText mb={2} />,
                   helperTextPosition: 'top',
                 }}
-                currentCapability="Kubernetes"
+                tooltipText={
+                  isLkeEnterpriseLAFeatureEnabled &&
+                  selectedTier === 'enterprise'
+                    ? 'Only regions that support Kubernetes Enterprise are listed.'
+                    : undefined
+                }
                 disableClearable
                 errorText={errorMap.region}
                 onChange={(e, region) => setSelectedRegionId(region.id)}

packages/manager/src/features/Linodes/LinodeCreate/resolvers.ts

@@ -43,7 +43,6 @@ export const getLinodeCreateResolver = (
     }
 
     const regions = await queryClient.ensureQueryData(regionQueries.regions);
-
     const selectedRegion = regions.find((r) => r.id === values.region);
 
     const hasSelectedAnEURegion = isEURegion(

packages/ui/src/components/TextField/TextField.tsx

@@ -313,8 +313,7 @@ export const TextField = (props: TextFieldProps) => {
       {helperText && helperTextPosition === 'top' && (
         <FormHelperText
           sx={{
-            marginBottom: theme.spacing(),
-            marginTop: theme.spacing(),
+            marginTop: 0,
           }}
           data-qa-textfield-helper-text
         >
@@ -371,7 +370,7 @@ export const TextField = (props: TextFieldProps) => {
           sx={{
             marginTop: 0,
             ...(Boolean(tooltipText) && {
-              width: '415px',
+              width: '416px',
             }),
             ...props.sx,
           }}

packages/ui/src/foundations/themes/light.ts

@@ -755,7 +755,7 @@ export const lightTheme: ThemeOptions = {
           },
           fontSize: '0.875rem',
           lineHeight: 1.25,
-          maxWidth: 415,
+          maxWidth: 416,
         },
       },
     },