diff --git a/packages/api-v4/src/regions/types.ts b/packages/api-v4/src/regions/types.ts index 0fb7421e875..c477d95f96a 100644 --- a/packages/api-v4/src/regions/types.ts +++ b/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' diff --git a/packages/manager/.changeset/pr-11348-upcoming-features-1733174894693.md b/packages/manager/.changeset/pr-11348-upcoming-features-1733174894693.md new file mode 100644 index 00000000000..e384f2b9301 --- /dev/null +++ b/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)) diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts index 9916ec007bd..6c93301d30b 100644 --- a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts +++ b/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 }); diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index b719eb824fd..75ef87335b9 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/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={{ diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx index 2e4523ec472..dde5d0dd045 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx @@ -332,11 +332,22 @@ export const CreateCluster = () => { , 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)} diff --git a/packages/manager/src/features/Linodes/LinodeCreate/resolvers.ts b/packages/manager/src/features/Linodes/LinodeCreate/resolvers.ts index c782b611884..e42e476cdc3 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/resolvers.ts +++ b/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( diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx index a529a124d6e..8d52fdec749 100644 --- a/packages/ui/src/components/TextField/TextField.tsx +++ b/packages/ui/src/components/TextField/TextField.tsx @@ -313,8 +313,7 @@ export const TextField = (props: TextFieldProps) => { {helperText && helperTextPosition === 'top' && ( @@ -371,7 +370,7 @@ export const TextField = (props: TextFieldProps) => { sx={{ marginTop: 0, ...(Boolean(tooltipText) && { - width: '415px', + width: '416px', }), ...props.sx, }} diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index a42aec2b366..b401d6bc70b 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/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, }, }, },