upcoming: [M3-7214 - M3-7216, M3-7219, M3-7221, M3-7222] - Add DC Get Well logic to various user flows pt1

packages/manager/.changeset/pr-9943-upcoming-features-1701209599920.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add logic to prevent new customers in regions to various user flows for DC Get Well initiative pt1 ([#9943](https://github.com/linode/manager/pull/9943))

packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts

@@ -33,20 +33,24 @@ import { makeFeatureFlagData } from 'support/util/feature-flags';
 
 const mockRegions: Region[] = [
   regionFactory.build({
+    capabilities: ['Linodes'],
     country: 'uk',
     id: 'eu-west',
     label: 'London, UK',
   }),
   regionFactory.build({
+    capabilities: ['Linodes'],
     country: 'sg',
     id: 'ap-south',
     label: 'Singapore, SG',
   }),
   regionFactory.build({
+    capabilities: ['Linodes'],
     id: 'us-east',
     label: 'Newark, NJ',
   }),
   regionFactory.build({
+    capabilities: ['Linodes'],
     id: 'us-central',
     label: 'Dallas, TX',
   }),

packages/manager/cypress/e2e/core/objectStorage/enable-object-storage.spec.ts

@@ -72,9 +72,21 @@ describe('Object Storage enrollment', () => {
     };
 
     const mockRegions: Region[] = [
-      regionFactory.build({ label: 'Newark, NJ', id: 'us-east' }),
-      regionFactory.build({ label: 'Sao Paulo, BR', id: 'br-gru' }),
-      regionFactory.build({ label: 'Jakarta, ID', id: 'id-cgk' }),
+      regionFactory.build({
+        capabilities: ['Object Storage'],
+        label: 'Newark, NJ',
+        id: 'us-east',
+      }),
+      regionFactory.build({
+        capabilities: ['Object Storage'],
+        label: 'Sao Paulo, BR',
+        id: 'br-gru',
+      }),
+      regionFactory.build({
+        capabilities: ['Object Storage'],
+        label: 'Jakarta, ID',
+        id: 'id-cgk',
+      }),
     ];
 
     // Clusters with special pricing are currently hardcoded rather than

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

@@ -100,12 +100,17 @@ export const RegionSelect = React.memo((props: RegionSelectProps) => {
             Boolean(flags.dcGetWell) && Boolean(option.unavailable);
           return (
             <Tooltip
+              PopperProps={{
+                sx: { '& .MuiTooltip-tooltip': { minWidth: 215 } },
+              }}
               title={
-                // TODO DC_GET_WELL: add proper link to status page when available
                 isDisabledMenuItem ? (
                   <>
-                    For more information about regional availability, please see
-                    our new <Link to="https://linode.com">status page</Link>.
+                    There may be limited capacity in this region.{' '}
+                    <Link to="https://www.linode.com/global-infrastructure/availability">
+                      Learn more
+                    </Link>
+                    .
                   </>
                 ) : (
                   ''
@@ -133,7 +138,7 @@ export const RegionSelect = React.memo((props: RegionSelectProps) => {
                     <StyledFlagContainer>
                       <Flag country={option.data.country} />
                     </StyledFlagContainer>
-                    {option.label} {isDisabledMenuItem && ' (Not available)'}
+                    {option.label}
                   </Box>
                   {selected && <SelectedIcon visible={selected} />}
                 </>

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

@@ -18,22 +18,49 @@ const accountAvailabilityData = [
 
 const regions: Region[] = [
   regionFactory.build({
+    capabilities: ['Linodes'],
     country: 'us',
     id: 'us-1',
     label: 'US Location',
   }),
   regionFactory.build({
+    capabilities: ['Linodes'],
     country: 'ca',
     id: 'ca-1',
     label: 'CA Location',
   }),
   regionFactory.build({
+    capabilities: ['Linodes'],
     country: 'jp',
     id: 'jp-1',
     label: 'JP Location',
   }),
 ];
 
+const expectedRegions: RegionSelectOption[] = [
+  {
+    data: { country: 'ca', region: 'North America' },
+    label: 'CA Location (ca-1)',
+    unavailable: false,
+    value: 'ca-1',
+  },
+  {
+    data: {
+      country: 'us',
+      region: 'North America',
+    },
+    label: 'US Location (us-1)',
+    unavailable: false,
+    value: 'us-1',
+  },
+  {
+    data: { country: 'jp', region: 'Asia' },
+    label: 'JP Location (jp-1)',
+    unavailable: false,
+    value: 'jp-1',
+  },
+];
+
 describe('getRegionOptions', () => {
   it('should return an empty array if no regions are provided', () => {
     const regions: Region[] = [];
@@ -53,33 +80,27 @@ describe('getRegionOptions', () => {
       regions,
     });
 
-    // Expected result
-    const expected: RegionSelectOption[] = [
-      {
-        data: { country: 'ca', region: 'North America' },
-        label: 'CA Location (ca-1)',
-        unavailable: false,
-        value: 'ca-1',
-      },
-      {
-        data: {
-          country: 'us',
-          region: 'North America',
-        },
-        label: 'US Location (us-1)',
-        unavailable: false,
-        value: 'us-1',
-      },
+    expect(result).toEqual(expectedRegions);
+  });
 
-      {
-        data: { country: 'jp', region: 'Asia' },
-        label: 'JP Location (jp-1)',
-        unavailable: false,
-        value: 'jp-1',
-      },
+  it('should filter out regions that do not have the currentCapability if currentCapability is provided', () => {
+    const regionsToFilter: Region[] = [
+      ...regions,
+      regionFactory.build({
+        capabilities: ['Object Storage'],
+        country: 'pe',
+        id: 'peru-1',
+        label: 'Peru Location',
+      }),
     ];
 
-    expect(result).toEqual(expected);
+    const result: RegionSelectOption[] = getRegionOptions({
+      accountAvailabilityData,
+      currentCapability: 'Linodes',
+      regions: regionsToFilter,
+    });
+
+    expect(result).toEqual(expectedRegions);
   });
 });
 

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

@@ -26,7 +26,13 @@ export const getRegionOptions = ({
   currentCapability,
   regions,
 }: GetRegionOptions): RegionSelectOption[] => {
-  return regions
+  const filteredRegions = currentCapability
+    ? regions.filter((region) =>
+        region.capabilities.includes(currentCapability)
+      )
+    : regions;
+
+  return filteredRegions
     .map((region: Region) => {
       const group = getRegionCountryGroup(region);
 

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

@@ -1,4 +1,4 @@
-import { Region } from '@linode/api-v4/lib/regions';
+import { Capabilities, Region } from '@linode/api-v4/lib/regions';
 import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
@@ -25,6 +25,7 @@ import { DynamicPriceNotice } from '../DynamicPriceNotice';
 import { Link } from '../Link';
 
 interface SelectRegionPanelProps {
+  currentCapability?: Capabilities | undefined;
   disabled?: boolean;
   error?: string;
   handleSelection: (id: string) => void;
@@ -39,6 +40,7 @@ interface SelectRegionPanelProps {
 
 export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
   const {
+    currentCapability,
     disabled,
     error,
     handleSelection,
@@ -134,6 +136,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
         </Notice>
       ) : null}
       <RegionSelect
+        currentCapability={currentCapability}
         disabled={disabled}
         errorText={error}
         handleSelection={handleSelection}

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx

@@ -52,7 +52,6 @@ import {
   useDatabaseTypesQuery,
 } from 'src/queries/databases';
 import { useRegionsQuery } from 'src/queries/regions';
-import { regionsWithFeature } from 'src/utilities/doesRegionSupportFeature';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { handleAPIErrors } from 'src/utilities/formikErrorUtils';
 import { getSelectedOptionFromGroupedOptions } from 'src/utilities/getSelectedOptionFromGroupedOptions';
@@ -202,11 +201,6 @@ const DatabaseCreate = () => {
     isLoading: regionsLoading,
   } = useRegionsQuery();
 
-  const regionsThatSupportDbaas = regionsWithFeature(
-    regionsData ?? [],
-    'Managed Databases'
-  );
-
   const {
     data: engines,
     error: enginesError,
@@ -507,8 +501,9 @@ const DatabaseCreate = () => {
             handleSelection={(selected: string) =>
               setFieldValue('region', selected)
             }
+            currentCapability="Managed Databases"
             errorText={errors.region}
-            regions={regionsThatSupportDbaas}
+            regions={regionsData}
             selectedId={values.region}
           />
           <RegionHelperText mt={1} />

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

@@ -545,6 +545,7 @@ export class LinodeCreate extends React.PureComponent<
 
           {this.props.createType !== 'fromBackup' && (
             <SelectRegionPanel
+              currentCapability="Linodes"
               data-qa-select-region-panel
               disabled={userCannotCreateLinode}
               error={hasErrorFor.region}

packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx

@@ -127,6 +127,7 @@ export const ConfigureForm = React.memo((props: Props) => {
             textFieldProps={{
               helperText,
             }}
+            currentCapability="Linodes"
             errorText={errorText}
             handleSelection={handleSelectRegion}
             label="New Region"

packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx

@@ -479,6 +479,7 @@ const NodeBalancerCreate = () => {
         />
       </Paper>
       <SelectRegionPanel
+        currentCapability="NodeBalancers"
         disabled={disabled}
         error={hasErrorFor('region')}
         handleSelection={regionChange}

packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx

@@ -44,6 +44,7 @@ export const ClusterSelect: React.FC<Props> = (props) => {
 
   return (
     <RegionSelect
+      currentCapability="Object Storage"
       data-qa-select-cluster
       disabled={disabled}
       errorText={errorText}

packages/manager/src/features/Volumes/VolumeCreate.tsx

@@ -297,18 +297,13 @@ export const VolumeCreate = () => {
                   setFieldValue('region', value);
                   setFieldValue('linode_id', null);
                 }}
-                regions={
-                  regions?.filter((eachRegion) =>
-                    eachRegion.capabilities.some((eachCape) =>
-                      eachCape.match(/block/i)
-                    )
-                  ) ?? []
-                }
+                currentCapability="Block Storage"
                 disabled={doesNotHavePermission}
                 errorText={touched.region ? errors.region : undefined}
                 isClearable
                 label="Region"
                 onBlur={handleBlur}
+                regions={regions ?? []}
                 selectedId={values.region}
                 width={400}
               />

packages/manager/src/mocks/serverHandlers.ts

@@ -1020,11 +1020,11 @@ export const handlers = [
   rest.get('*/account/availability', (req, res, ctx) => {
     const newarkStorage = accountAvailabilityFactory.build({
       id: 'us-east-0',
-      unavailable: ['Block Storage'],
+      unavailable: ['Object Storage'],
     });
     const atlanta = accountAvailabilityFactory.build({
       id: 'us-southeast',
-      unavailable: ['Block Storage'],
+      unavailable: ['Block Storage', 'Managed Databases'],
     });
     const singapore = accountAvailabilityFactory.build({
       id: 'ap-south',