upcoming: [M3-7220, M3-7355] - Add DC Get Well logic to various user flows pt2 and cleanup

packages/manager/.changeset/pr-9945-upcoming-features-1701375629844.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add DC Get Well logic to various user flows pt2 and cleanup logic ([#9945](https://github.com/linode/manager/pull/9945))

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

@@ -30,6 +30,7 @@ export const Default: StoryObj<RegionSelectProps> = {
 
 const meta: Meta<RegionSelectProps> = {
   args: {
+    currentCapability: undefined,
     disabled: false,
     errorText: '',
     helperText: '',

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

@@ -22,6 +22,13 @@ import type {
 } from './RegionSelect.types';
 import type { ListItemComponentsPropsOverrides } from '@mui/material/ListItem';
 
+/**
+ * A specific select for regions.
+ *
+ * The RegionSelect automatically filters regions based on capability using its `currentCapability` prop. For example, if
+ * `currentCapability="VPCs"`, only regions that support VPCs will appear in the RegionSelect dropdown. There is no need to
+ * prefilter regions when passing them to the RegionSelect. See the description of `currentCapability` prop for more information.
+ */
 export const RegionSelect = React.memo((props: RegionSelectProps) => {
   const {
     currentCapability,

packages/manager/src/components/RegionSelect/RegionSelect.types.ts

@@ -21,9 +21,14 @@ export interface RegionSelectProps
     EnhancedAutocompleteProps<RegionSelectOption, false>,
     'label' | 'onChange' | 'options'
   > {
-  // TODO DC_GET_WELL
-  // Make this prop required & remove the undefined union type once all consumers are updated
-  currentCapability?: Capabilities | undefined;
+  /**
+   * The specified capability to filter the regions on. Any region that does not have the `currentCapability` will not appear in the RegionSelect dropdown.
+   * Only use `undefined` for situations where there is no relevant capability for the RegionSelect - this will not filter any of the regions passed in.
+   * Otherwise, a capability should always be passed in.
+   *
+   * See `ImageUpload.tsx` for an example of a RegionSelect with an undefined `currentCapability` - there is no capability associated with Images yet.
+   */
+  currentCapability: Capabilities | undefined;
   handleSelection: (id: string) => void;
   helperText?: string;
   isClearable?: boolean;
@@ -36,8 +41,6 @@ export interface RegionSelectProps
 
 export interface RegionOptionAvailability {
   accountAvailabilityData: AccountAvailability[] | undefined;
-  // TODO DC_GET_WELL
-  // remove the undefined union type once all consumers are updated
   currentCapability: Capabilities | undefined;
 }
 

packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.test.tsx

@@ -1,6 +1,9 @@
+import { Capabilities } from '@linode/api-v4';
 import React from 'react';
+
 import { regionFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
+
 import { SelectRegionPanel } from './SelectRegionPanel';
 
 const pricingMocks = vi.hoisted(() => ({
@@ -37,6 +40,7 @@ describe('SelectRegionPanel in Create Flow', () => {
 
     const { findByText } = renderWithTheme(
       <SelectRegionPanel
+        currentCapability={'Linodes'}
         handleSelection={vi.fn()}
         regions={regions}
         selectedId="id-cgk"
@@ -65,6 +69,7 @@ describe('SelectRegionPanel on the Clone Flow', () => {
 
   const regions = [...regionFactory.buildList(3)];
   const mockedProps = {
+    currentCapability: 'Linodes' as Capabilities,
     handleSelection: () => vi.fn(),
     regions,
     selectedLinodeTypeId: 'g6-standard-2',

packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx

@@ -25,7 +25,7 @@ import { DynamicPriceNotice } from '../DynamicPriceNotice';
 import { Link } from '../Link';
 
 interface SelectRegionPanelProps {
-  currentCapability?: Capabilities | undefined;
+  currentCapability: Capabilities;
   disabled?: boolean;
   error?: string;
   handleSelection: (id: string) => void;

packages/manager/src/features/Images/ImageUpload.tsx

@@ -270,6 +270,7 @@ export const ImageUpload: React.FC<Props> = (props) => {
             helperText="For fastest initial upload, select the region that is geographically
             closest to you. Once uploaded you will be able to deploy the image
             to other regions."
+            currentCapability={undefined}
             disabled={!canCreateImage}
             errorText={errorMap.region}
             handleSelection={setRegion}

packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts

@@ -1,26 +1,7 @@
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles((theme: Theme) => ({
-  inputWidth: {
-    '& .react-select__menu': {
-      maxWidth: 440,
-    },
-    maxWidth: 440,
-  },
-  regionSubtitle: {
-    '& .MuiInput-root': {
-      maxWidth: 440,
-    },
-    '& .react-select__menu': {
-      maxWidth: 440,
-    },
-    '& p': {
-      lineHeight: '1.43rem',
-      margin: 0,
-      maxWidth: '100%',
-    },
-  },
+export const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     '& .mlMain': {
       flexBasis: '100%',

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

@@ -52,7 +52,7 @@ import { HAControlPlane } from './HAControlPlane';
 import { NodePoolPanel } from './NodePoolPanel';
 
 export const CreateCluster = () => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [selectedRegionID, setSelectedRegionID] = React.useState<string>('');
   const [nodePools, setNodePools] = React.useState<KubeNodePoolResponse[]>([]);
   const [label, setLabel] = React.useState<string | undefined>();
@@ -82,15 +82,6 @@ export const CreateCluster = () => {
     mutateAsync: createKubernetesCluster,
   } = useCreateKubernetesClusterMutation();
 
-  // Only include regions that have LKE capability
-  const filteredRegions = React.useMemo(() => {
-    return regionsData
-      ? regionsData.filter((thisRegion) =>
-          thisRegion.capabilities.includes('Kubernetes')
-        )
-      : [];
-  }, [regionsData]);
-
   const {
     data: versionData,
     isError: versionLoadError,
@@ -101,12 +92,6 @@ export const CreateCluster = () => {
     value: thisVersion.id,
   }));
 
-  React.useEffect(() => {
-    if (filteredRegions.length === 1 && !selectedRegionID) {
-      setSelectedRegionID(filteredRegions[0].id);
-    }
-  }, [filteredRegions, selectedRegionID]);
-
   React.useEffect(() => {
     if (versions.length > 0) {
       setVersion(getLatestVersion(versions));
@@ -224,7 +209,6 @@ export const CreateCluster = () => {
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               updateLabel(e.target.value)
             }
-            className={classes.inputWidth}
             data-qa-label-input
             errorText={errorMap.label}
             label="Cluster Label"
@@ -239,9 +223,9 @@ export const CreateCluster = () => {
               helperText: <RegionHelperText mb={2} />,
               helperTextPosition: 'top',
             }}
-            className={classes.regionSubtitle}
+            currentCapability="Kubernetes"
             errorText={errorMap.region}
-            regions={filteredRegions}
+            regions={regionsData}
             selectedId={selectedId}
           />
           {showPricingNotice && (
@@ -252,7 +236,6 @@ export const CreateCluster = () => {
             onChange={(selected: Item<string>) => {
               setVersion(selected);
             }}
-            className={classes.inputWidth}
             errorText={errorMap.k8s_version}
             isClearable={false}
             label="Kubernetes Version"

packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.tsx

@@ -29,7 +29,7 @@ export const VPCCreateDrawer = (props: Props) => {
     isLoadingCreateVPC,
     onChangeField,
     onCreateVPC,
-    regionsWithVPCCapability,
+    regionsData,
     setGeneralAPIError,
     setGeneralSubnetErrorsFromAPI,
     userCannotAddVPC,
@@ -59,7 +59,7 @@ export const VPCCreateDrawer = (props: Props) => {
               errors={errors}
               isDrawer
               onChangeField={onChangeField}
-              regions={regionsWithVPCCapability}
+              regions={regionsData}
               values={values}
             />
           </Box>

packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx

@@ -29,6 +29,7 @@ export const VPCTopSectionContent = (props: Props) => {
       </StyledBodyTypography>
       <RegionSelect
         aria-label="Choose a region"
+        currentCapability="VPCs"
         disabled={isDrawer ? true : disabled}
         errorText={errors.region}
         handleSelection={(region: string) => onChangeField('region', region)}

packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx

@@ -22,7 +22,7 @@ const VPCCreate = () => {
     isLoadingCreateVPC,
     onChangeField,
     onCreateVPC,
-    regionsWithVPCCapability,
+    regionsData,
     userCannotAddVPC,
   } = useCreateVPC({ pushToVPCPage: true });
 
@@ -57,7 +57,7 @@ const VPCCreate = () => {
               disabled={userCannotAddVPC}
               errors={errors}
               onChangeField={onChangeField}
-              regions={regionsWithVPCCapability}
+              regions={regionsData}
               values={values}
             />
           </Paper>

packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx

@@ -5,8 +5,8 @@ import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
-import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { Notice } from 'src/components/Notice/Notice';
+import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { TextField } from 'src/components/TextField';
 import { useGrants, useProfile } from 'src/queries/profile';
 import { useRegionsQuery } from 'src/queries/regions';
@@ -113,6 +113,7 @@ export const VPCEditDrawer = (props: Props) => {
         />
         {regionsData && (
           <RegionSelect
+            currentCapability="VPCs"
             disabled // the Region field will not be editable during beta
             errorText={(regionsError && regionsError[0].reason) || undefined}
             handleSelection={() => null}

packages/manager/src/hooks/useCreateVPC.ts

@@ -51,8 +51,7 @@ export const useCreateVPC = (inputs: UseCreateVPCInputs) => {
   const userCannotAddVPC = profile?.restricted && !grants?.global.add_vpcs;
 
   const { data: regions } = useRegionsQuery();
-  const regionsWithVPCCapability =
-    regions?.filter((region) => region.capabilities.includes('VPCs')) ?? [];
+  const regionsData = regions ?? [];
 
   const [
     generalSubnetErrorsFromAPI,
@@ -218,7 +217,7 @@ export const useCreateVPC = (inputs: UseCreateVPCInputs) => {
     isLoadingCreateVPC,
     onChangeField,
     onCreateVPC,
-    regionsWithVPCCapability,
+    regionsData,
     setGeneralAPIError,
     setGeneralSubnetErrorsFromAPI,
     userCannotAddVPC,