From 5ffbac324e75c038b9af70175ab8079a0fc32a8d Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Wed, 28 Aug 2024 13:05:35 -0400 Subject: [PATCH 1/5] disable region if selected os does not have distributed capability --- .../src/components/SelectRegionPanel/SelectRegionPanel.tsx | 1 - .../manager/src/features/Linodes/LinodeCreatev2/Region.tsx | 1 - .../features/Linodes/LinodeCreatev2/Region.utils.test.ts | 2 -- .../src/features/Linodes/LinodeCreatev2/Region.utils.ts | 7 ++----- 4 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx index 2efe60d4213..96e0d48310a 100644 --- a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx +++ b/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, }); diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx index 44974328513..a52a7caf06b 100644 --- a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx +++ b/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, }); diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.utils.test.ts b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.utils.test.ts index 18059e73742..cfc1ef5db54 100644 --- a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.utils.test.ts +++ b/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, }); diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.utils.ts b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.utils.ts index 54dc6d84412..cf81a46a69f 100644 --- a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.utils.ts +++ b/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') ) { From 74f50aca4c6da387b43bc482cb29748fb4826d13 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Wed, 28 Aug 2024 13:48:40 -0400 Subject: [PATCH 2/5] fix beta distributed helper text error positioning --- .../components/RegionSelect/RegionSelect.styles.ts | 12 +++++++----- .../src/components/RegionSelect/RegionSelect.tsx | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts b/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts index 1d53b231832..6ab50ac9114 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts +++ b/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 != 'errorText', +})<{ errorText: string }>(({ errorText, theme }) => ({ '& svg': { height: 21, marginLeft: 8, marginRight: 8, width: 24, }, - alignSelf: 'end', + alignSelf: errorText.length > 0 ? 'center' : 'end', color: 'inherit', display: 'flex', - marginLeft: 8, - padding: '8px 0', + marginTop: errorText.length > 0 ? 21 : 0, + padding: 8, [theme.breakpoints.down('md')]: { '& svg': { marginLeft: 0, }, alignSelf: 'start', - marginLeft: 0, + marginTop: 0, + paddingLeft: 0, }, })); diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index bb0c09af438..70abe034ea4 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/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 - + Date: Wed, 28 Aug 2024 14:21:31 -0400 Subject: [PATCH 3/5] Added changeset: Disable Region in OS tab for unsupported distributed images --- .../manager/.changeset/pr-10848-changed-1724869290917.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10848-changed-1724869290917.md diff --git a/packages/manager/.changeset/pr-10848-changed-1724869290917.md b/packages/manager/.changeset/pr-10848-changed-1724869290917.md new file mode 100644 index 00000000000..0661d41dbbe --- /dev/null +++ b/packages/manager/.changeset/pr-10848-changed-1724869290917.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Disable Region in OS tab for unsupported distributed images ([#10848](https://github.com/linode/manager/pull/10848)) From 2c1c4935b96ecff6289837997fc94f9d6d0fe872 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Wed, 28 Aug 2024 14:32:11 -0400 Subject: [PATCH 4/5] update changelog to include ui fix --- packages/manager/.changeset/pr-10848-changed-1724869290917.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/.changeset/pr-10848-changed-1724869290917.md b/packages/manager/.changeset/pr-10848-changed-1724869290917.md index 0661d41dbbe..4ddd737ac9b 100644 --- a/packages/manager/.changeset/pr-10848-changed-1724869290917.md +++ b/packages/manager/.changeset/pr-10848-changed-1724869290917.md @@ -2,4 +2,4 @@ "@linode/manager": Changed --- -Disable Region in OS tab for unsupported distributed images ([#10848](https://github.com/linode/manager/pull/10848)) +Disable Region in OS tab for unsupported distributed images and fix helper text positioning ([#10848](https://github.com/linode/manager/pull/10848)) From b1d664c3a2b8287fd248f726a49dd887358b1520 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Thu, 29 Aug 2024 11:54:18 -0400 Subject: [PATCH 5/5] address feedback --- .../src/components/RegionSelect/RegionSelect.styles.ts | 8 ++++---- .../manager/src/components/RegionSelect/RegionSelect.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts b/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts index 6ab50ac9114..088908408c6 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts +++ b/packages/manager/src/components/RegionSelect/RegionSelect.styles.ts @@ -45,18 +45,18 @@ export const sxDistributedRegionIcon = { export const StyledDistributedRegionBox = styled(Box, { label: 'StyledDistributedRegionBox', - shouldForwardProp: (prop) => prop != 'errorText', -})<{ errorText: string }>(({ errorText, theme }) => ({ + shouldForwardProp: (prop) => prop != 'centerChildren', +})<{ centerChildren: boolean }>(({ centerChildren, theme }) => ({ '& svg': { height: 21, marginLeft: 8, marginRight: 8, width: 24, }, - alignSelf: errorText.length > 0 ? 'center' : 'end', + alignSelf: centerChildren ? 'center' : 'end', color: 'inherit', display: 'flex', - marginTop: errorText.length > 0 ? 21 : 0, + marginTop: centerChildren ? 21 : 0, padding: 8, [theme.breakpoints.down('md')]: { '& svg': { diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index 70abe034ea4..0eef45c778e 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/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 - +