change: [M3-8379] - Disable Region in OS tab for unsupported distributed images

packages/manager/.changeset/pr-10848-changed-1724869290917.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Disable Region in OS tab for unsupported distributed images and fix helper text positioning ([#10848](https://github.com/linode/manager/pull/10848))

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

@@ -45,24 +45,26 @@ export const sxDistributedRegionIcon = {
 
 export const StyledDistributedRegionBox = styled(Box, {
   label: 'StyledDistributedRegionBox',
-})(({ theme }) => ({
+  shouldForwardProp: (prop) => prop != 'centerChildren',
+})<{ centerChildren: boolean }>(({ centerChildren, theme }) => ({
   '& svg': {
     height: 21,
     marginLeft: 8,
     marginRight: 8,
     width: 24,
   },
-  alignSelf: 'end',
+  alignSelf: centerChildren ? 'center' : 'end',
   color: 'inherit',
   display: 'flex',
-  marginLeft: 8,
-  padding: '8px 0',
+  marginTop: centerChildren ? 21 : 0,
+  padding: 8,
   [theme.breakpoints.down('md')]: {
     '& svg': {
       marginLeft: 0,
     },
     alignSelf: 'start',
-    marginLeft: 0,
+    marginTop: 0,
+    paddingLeft: 0,
   },
 }));
 

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

@@ -167,7 +167,7 @@ export const RegionSelect = <
         value={selectedRegion as Region}
       />
       {showDistributedRegionIconHelperText && ( // @TODO Gecko Beta: Add docs link
-        <StyledDistributedRegionBox>
+        <StyledDistributedRegionBox centerChildren={Boolean(errorText)}>
           <DistributedRegion />
           <Typography
             data-testid="region-select-distributed-region-text"

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

@@ -115,7 +115,6 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
   );
 
   const disabledRegions = getDisabledRegions({
-    linodeCreateTab: params.type,
     regions: regions ?? [],
     selectedImage: image,
   });

packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx

@@ -187,7 +187,6 @@ export const Region = () => {
     );
 
   const disabledRegions = getDisabledRegions({
-    linodeCreateTab: params.type,
     regions: regions ?? [],
     selectedImage: image,
   });

packages/manager/src/features/Linodes/LinodeCreatev2/Region.utils.test.ts

@@ -10,7 +10,6 @@ describe('getDisabledRegions', () => {
     const image = imageFactory.build({ capabilities: [] });
 
     const result = getDisabledRegions({
-      linodeCreateTab: 'Images',
       regions: [distributedRegion, coreRegion],
       selectedImage: image,
     });
@@ -30,7 +29,6 @@ describe('getDisabledRegions', () => {
     const image = imageFactory.build({ capabilities: ['distributed-sites'] });
 
     const result = getDisabledRegions({
-      linodeCreateTab: 'Images',
       regions: [distributedRegion, coreRegion],
       selectedImage: image,
     });

packages/manager/src/features/Linodes/LinodeCreatev2/Region.utils.ts

@@ -1,9 +1,7 @@
-import type { LinodeCreateType } from '../LinodesCreate/types';
 import type { Image, Region } from '@linode/api-v4';
 import type { DisableRegionOption } from 'src/components/RegionSelect/RegionSelect.types';
 
 interface DisabledRegionOptions {
-  linodeCreateTab: LinodeCreateType | undefined;
   regions: Region[];
   selectedImage: Image | undefined;
 }
@@ -14,13 +12,12 @@ interface DisabledRegionOptions {
  * @returns key/value pairs for disabled regions. the key is the region id and the value is why the region is disabled
  */
 export const getDisabledRegions = (options: DisabledRegionOptions) => {
-  const { linodeCreateTab, regions, selectedImage } = options;
+  const { regions, selectedImage } = options;
 
-  // On the images tab, we disabled distributed regions if:
+  // Disable distributed regions if:
   // - The user has selected an Image
   // - The selected image does not have the `distributed-sites` capability
   if (
-    linodeCreateTab === 'Images' &&
     selectedImage &&
     !selectedImage.capabilities.includes('distributed-sites')
   ) {