From 95511684643532b29f7d11a170213cd40d25a56d Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Mon, 4 Mar 2024 14:35:14 -0500 Subject: [PATCH 01/12] only show dedicated plans for edge regions --- .../RegionSelect/RegionSelect.utils.ts | 14 ++++++++++ .../components/PlansPanel/PlansPanel.tsx | 26 +++++++++++++++++-- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.utils.ts b/packages/manager/src/components/RegionSelect/RegionSelect.utils.ts index 76bb1ea5db7..afa9751a494 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.utils.ts +++ b/packages/manager/src/components/RegionSelect/RegionSelect.utils.ts @@ -204,3 +204,17 @@ export const getIsLinodeCreateTypeEdgeSupported = ( typeof createType === 'undefined' // /linodes/create route ); }; + +/** + * Util to determine whether a selected region is an edge region. + * + * @returns a boolean indicating whether or not the selected region is an edge region. + */ +export const isEdgeRegion = (selectedRegion: string, regionsData: Region[]) => { + return ( + regionsData.find( + (region) => + region.id === selectedRegion || region.label === selectedRegion + )?.site_type === 'edge' + ); +}; diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index c0d43e6989e..1c74d357431 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -1,8 +1,13 @@ import { useTheme } from '@mui/material/styles'; import * as React from 'react'; +import { useLocation } from 'react-router-dom'; +import { isEdgeRegion } from 'src/components/RegionSelect/RegionSelect.utils'; +import { getIsLinodeCreateTypeEdgeSupported } from 'src/components/RegionSelect/RegionSelect.utils'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; +import { useFlags } from 'src/hooks/useFlags'; import { plansNoticesUtils } from 'src/utilities/planNotices'; +import { getQueryParamsFromQueryString } from 'src/utilities/queryParams'; import { PlanContainer } from './PlanContainer'; import { PlanInformation } from './PlanInformation'; @@ -14,6 +19,8 @@ import { import type { PlanSelectionType } from './types'; import type { LinodeTypeClass, Region } from '@linode/api-v4'; +import type { LinodeCreateType } from 'src/features/Linodes/LinodesCreate/types'; + interface Props { className?: string; copy?: string; @@ -56,9 +63,24 @@ export const PlansPanel = (props: Props) => { types, } = props; + const flags = useFlags(); const theme = useTheme(); + const location = useLocation(); + const params = getQueryParamsFromQueryString(location.search); + + const hideEdgeRegions = + !flags.gecko || + !getIsLinodeCreateTypeEdgeSupported(params.type as LinodeCreateType); + + const showEdgePlanTable = + !hideEdgeRegions && isEdgeRegion(selectedRegionID ?? '', regionsData ?? []); + + const planTypes = getPlanSelectionsByPlanType(types); + + const plans = showEdgePlanTable + ? { dedicated: planTypes.dedicated } + : planTypes; - const plans = getPlanSelectionsByPlanType(types); const { hasSelectedRegion, isPlanPanelDisabled, @@ -116,7 +138,7 @@ export const PlansPanel = (props: Props) => { docsLink={docsLink} error={error} header={header || 'Linode Plan'} - initTab={initialTab >= 0 ? initialTab : 0} + initTab={showEdgePlanTable ? 0 : initialTab >= 0 ? initialTab : 0} innerClass={props.tabbedPanelInnerClass} rootClass={`${className} tabbedPanel`} sx={{ marginTop: theme.spacing(3), width: '100%' }} From 57b4961e4c395d7e94d861b928754cfce11e7b88 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Mon, 4 Mar 2024 16:30:54 -0500 Subject: [PATCH 02/12] hide 256gb and 516gb plans --- .../src/features/components/PlansPanel/PlansPanel.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 1c74d357431..3feb3660d35 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -77,8 +77,11 @@ export const PlansPanel = (props: Props) => { const planTypes = getPlanSelectionsByPlanType(types); + // @TODO Gecko GA: Get plan data from API instead of hardcoding const plans = showEdgePlanTable - ? { dedicated: planTypes.dedicated } + ? { + dedicated: planTypes.dedicated.slice(0, planTypes.dedicated.length - 2), // 256gb and 516gb plans will not be supported for Edge + } : planTypes; const { From c40a1d8ee0c43e883e14ba6aa969ef8b0fc793e8 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Tue, 5 Mar 2024 13:40:26 -0500 Subject: [PATCH 03/12] zero dollar pricing --- .../components/PlansPanel/PlansPanel.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 3feb3660d35..5846001ce12 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -77,10 +77,30 @@ export const PlansPanel = (props: Props) => { const planTypes = getPlanSelectionsByPlanType(types); + const getDedicatedEdgePlanType = () => { + // 256gb and 516gb plans will not be supported for Edge + const plansUpTo128GB = planTypes.dedicated.slice( + 0, + planTypes.dedicated.length - 2 + ); + + return plansUpTo128GB.map((plan) => { + delete plan.transfer; + return { + ...plan, + disk: 0, + price: { + hourly: 0, + monthly: 0, + }, + }; + }); + }; + // @TODO Gecko GA: Get plan data from API instead of hardcoding const plans = showEdgePlanTable ? { - dedicated: planTypes.dedicated.slice(0, planTypes.dedicated.length - 2), // 256gb and 516gb plans will not be supported for Edge + dedicated: getDedicatedEdgePlanType(), } : planTypes; From 225a6bff3bfab216d7c56246da30bce060a6dc72 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Tue, 5 Mar 2024 15:39:15 -0500 Subject: [PATCH 04/12] update linode checkout summary pricing --- .../Linodes/LinodesCreate/LinodeCreate.tsx | 18 +++++++++++++++++- .../components/PlansPanel/PlansPanel.tsx | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx index 5b4026bfa4b..5f24c0de4d0 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx +++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx @@ -23,6 +23,7 @@ import { DocsLink } from 'src/components/DocsLink/DocsLink'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; +import { isEdgeRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { SelectRegionPanel } from 'src/components/SelectRegionPanel/SelectRegionPanel'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; @@ -391,7 +392,22 @@ export class LinodeCreate extends React.PureComponent< )}/month $${hourlyPrice ?? UNKNOWN_PRICE}/hr`; } - displaySections.push(typeDisplayInfoCopy); + const linodeIsInEdgeRegion = isEdgeRegion( + selectedRegionID ?? '', + regionsData + ); + + // @TODO Gecko: Remove $0 hardcoding once plan data is returned from API + if (linodeIsInEdgeRegion) { + displaySections.push({ + ...typeDisplayInfoCopy, + details: '$0/month', + hourly: 0, + monthly: 0, + }); + } else { + displaySections.push(typeDisplayInfoCopy); + } } const type = typesData.find( diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 5846001ce12..74709319ac9 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -97,7 +97,7 @@ export const PlansPanel = (props: Props) => { }); }; - // @TODO Gecko GA: Get plan data from API instead of hardcoding + // @TODO Gecko: Get plan data from API when it's available instead of hardcoding const plans = showEdgePlanTable ? { dedicated: getDedicatedEdgePlanType(), From 18a290cfbe2d2e9271cabd11dc419c6d1cc785e2 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Wed, 6 Mar 2024 10:26:29 -0500 Subject: [PATCH 05/12] hide tab control and show price warning for edge regions --- .../components/TabbedPanel/TabbedPanel.tsx | 56 ++++++++++--------- .../components/PlansPanel/PlansPanel.tsx | 8 +++ 2 files changed, 38 insertions(+), 26 deletions(-) diff --git a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx index 23bc8782e0a..dbe9b85d3be 100644 --- a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx +++ b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx @@ -49,6 +49,7 @@ const TabbedPanel = React.memo((props: TabbedPanelProps) => { initTab, innerClass, rootClass, + showEdgePlanTable, sx, tabs, ...rest @@ -97,32 +98,35 @@ const TabbedPanel = React.memo((props: TabbedPanelProps) => { )} {copy && {copy}} - - - {tabs.map((tab, idx) => ( - - {tab.title} - {tab.disabled && props.tabDisabledMessage && ( - - - - - - )} - - ))} - - - {tabs.map((tab, idx) => ( - - {tab.render(rest.children)} - - ))} - - + {showEdgePlanTable && tabs[0].render(rest.children)} + {!showEdgePlanTable && ( + + + {tabs.map((tab, idx) => ( + + {tab.title} + {tab.disabled && props.tabDisabledMessage && ( + + + + + + )} + + ))} + + + {tabs.map((tab, idx) => ( + + {tab.render(rest.children)} + + ))} + + + )} ); diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 74709319ac9..683d83c8179 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -2,6 +2,7 @@ import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; +import { Notice } from 'src/components/Notice/Notice'; import { isEdgeRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { getIsLinodeCreateTypeEdgeSupported } from 'src/components/RegionSelect/RegionSelect.utils'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; @@ -128,6 +129,12 @@ export const PlansPanel = (props: Props) => { planType={plan} regionsData={regionsData || []} /> + {showEdgePlanTable && ( + + )} { initTab={showEdgePlanTable ? 0 : initialTab >= 0 ? initialTab : 0} innerClass={props.tabbedPanelInnerClass} rootClass={`${className} tabbedPanel`} + showEdgePlanTable={showEdgePlanTable} sx={{ marginTop: theme.spacing(3), width: '100%' }} tabDisabledMessage={props.tabDisabledMessage} tabs={tabs} From 6989e5f829097acc4220c0fce990a0975db65541 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Wed, 6 Mar 2024 10:28:53 -0500 Subject: [PATCH 06/12] Added changeset: Linode plan table updates for Edge regions --- .../.changeset/pr-10255-upcoming-features-1709738933221.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10255-upcoming-features-1709738933221.md diff --git a/packages/manager/.changeset/pr-10255-upcoming-features-1709738933221.md b/packages/manager/.changeset/pr-10255-upcoming-features-1709738933221.md new file mode 100644 index 00000000000..1450d3a0d51 --- /dev/null +++ b/packages/manager/.changeset/pr-10255-upcoming-features-1709738933221.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Linode plan table updates for Edge regions ([#10255](https://github.com/linode/manager/pull/10255)) From 67d5a40cae9a729df932246996e26e7153f52bb5 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Fri, 8 Mar 2024 11:04:51 -0500 Subject: [PATCH 07/12] missed merged conflict --- .../src/features/components/PlansPanel/PlansPanel.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 683d83c8179..45cdbc3df9d 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { useLocation } from 'react-router-dom'; import { Notice } from 'src/components/Notice/Notice'; -import { isEdgeRegion } from 'src/components/RegionSelect/RegionSelect.utils'; +import { getIsEdgeRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { getIsLinodeCreateTypeEdgeSupported } from 'src/components/RegionSelect/RegionSelect.utils'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; import { useFlags } from 'src/hooks/useFlags'; @@ -74,7 +74,8 @@ export const PlansPanel = (props: Props) => { !getIsLinodeCreateTypeEdgeSupported(params.type as LinodeCreateType); const showEdgePlanTable = - !hideEdgeRegions && isEdgeRegion(selectedRegionID ?? '', regionsData ?? []); + !hideEdgeRegions && + getIsEdgeRegion(regionsData ?? [], selectedRegionID ?? ''); const planTypes = getPlanSelectionsByPlanType(types); From 01875c3f530da3b076c16e3cb215ec5734fe2b11 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Fri, 8 Mar 2024 13:23:02 -0500 Subject: [PATCH 08/12] show n/a for storage --- .../src/features/components/PlansPanel/PlanSelection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx index 1b44a7f47ae..24644b2434c 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx @@ -206,7 +206,7 @@ export const PlanSelection = (props: PlanSelectionProps) => { {type.vcpus} - {convertMegabytesTo(type.disk, true)} + {type.disk === 0 ? 'N/A' : convertMegabytesTo(type.disk, true)} {shouldShowTransfer && type.transfer ? ( From 0322b8928c9830b342a294f805edb1dfa437d04a Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Mon, 11 Mar 2024 11:05:22 -0400 Subject: [PATCH 09/12] address feedback --- .../Linodes/LinodesCreate/LinodeCreate.tsx | 17 +++++++++++------ .../components/PlansPanel/PlansPanel.tsx | 4 ++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx index 04ee5931d2f..b4896c4f509 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx +++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx @@ -370,6 +370,11 @@ export class LinodeCreate extends React.PureComponent< }); } + const linodeIsInEdgeRegion = getIsEdgeRegion( + regionsData, + selectedRegionID ?? '' + ); + if (typeDisplayInfo) { const typeDisplayInfoCopy = cloneDeep(typeDisplayInfo); @@ -392,11 +397,6 @@ export class LinodeCreate extends React.PureComponent< )}/month $${hourlyPrice ?? UNKNOWN_PRICE}/hr`; } - const linodeIsInEdgeRegion = getIsEdgeRegion( - regionsData, - selectedRegionID ?? '' - ); - // @TODO Gecko: Remove $0 hardcoding once plan data is returned from API if (linodeIsInEdgeRegion) { displaySections.push({ @@ -421,7 +421,12 @@ export class LinodeCreate extends React.PureComponent< type, }); - if (hasBackups && typeDisplayInfo && backupsMonthlyPrice) { + if ( + hasBackups && + typeDisplayInfo && + backupsMonthlyPrice && + !linodeIsInEdgeRegion + ) { displaySections.push( renderBackupsDisplaySection(accountBackupsEnabled, backupsMonthlyPrice) ); diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 45cdbc3df9d..2408d12b590 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -80,7 +80,7 @@ export const PlansPanel = (props: Props) => { const planTypes = getPlanSelectionsByPlanType(types); const getDedicatedEdgePlanType = () => { - // 256gb and 516gb plans will not be supported for Edge + // 256gb and 512gb plans will not be supported for Edge const plansUpTo128GB = planTypes.dedicated.slice( 0, planTypes.dedicated.length - 2 @@ -169,7 +169,7 @@ export const PlansPanel = (props: Props) => { docsLink={docsLink} error={error} header={header || 'Linode Plan'} - initTab={showEdgePlanTable ? 0 : initialTab >= 0 ? initialTab : 0} + initTab={showEdgePlanTable ? undefined : initialTab >= 0 ? initialTab : 0} innerClass={props.tabbedPanelInnerClass} rootClass={`${className} tabbedPanel`} showEdgePlanTable={showEdgePlanTable} From 3c34d88c12664478085b797c476a8b5dbf041f48 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Mon, 11 Mar 2024 11:39:12 -0400 Subject: [PATCH 10/12] clean up --- .../components/TabbedPanel/TabbedPanel.tsx | 56 +++++++--------- .../components/PlansPanel/EdgePlanTable.tsx | 67 +++++++++++++++++++ .../components/PlansPanel/PlansPanel.tsx | 22 +++++- 3 files changed, 112 insertions(+), 33 deletions(-) create mode 100644 packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx diff --git a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx index dbe9b85d3be..23bc8782e0a 100644 --- a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx +++ b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx @@ -49,7 +49,6 @@ const TabbedPanel = React.memo((props: TabbedPanelProps) => { initTab, innerClass, rootClass, - showEdgePlanTable, sx, tabs, ...rest @@ -98,35 +97,32 @@ const TabbedPanel = React.memo((props: TabbedPanelProps) => { )} {copy && {copy}} - {showEdgePlanTable && tabs[0].render(rest.children)} - {!showEdgePlanTable && ( - - - {tabs.map((tab, idx) => ( - - {tab.title} - {tab.disabled && props.tabDisabledMessage && ( - - - - - - )} - - ))} - - - {tabs.map((tab, idx) => ( - - {tab.render(rest.children)} - - ))} - - - )} + + + {tabs.map((tab, idx) => ( + + {tab.title} + {tab.disabled && props.tabDisabledMessage && ( + + + + + + )} + + ))} + + + {tabs.map((tab, idx) => ( + + {tab.render(rest.children)} + + ))} + + ); diff --git a/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx b/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx new file mode 100644 index 00000000000..b574a21b227 --- /dev/null +++ b/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx @@ -0,0 +1,67 @@ +import { styled } from '@mui/material/styles'; +import { SxProps } from '@mui/system'; +import React from 'react'; + +import { Box } from 'src/components/Box'; +import { Notice } from 'src/components/Notice/Notice'; +import { Paper } from 'src/components/Paper'; +import { Typography } from 'src/components/Typography'; + +interface EdgePlanTableProps { + [index: string]: any; + copy?: string; + docsLink?: JSX.Element; + error?: JSX.Element | string; + header: string; + innerClass?: string; + renderTable: (props: any) => React.JSX.Element; + rootClass?: string; + sx?: SxProps; +} + +const EdgePlanTable = React.memo((props: EdgePlanTableProps) => { + const { + copy, + docsLink, + error, + header, + innerClass, + renderTable, + rootClass, + sx, + ...rest + } = props; + + return ( + +
+ + {header && ( + + {header} + + )} + {docsLink} + + {error && ( + + {error} + + )} + {copy && {copy}} + {renderTable(rest.children)} +
+ + ); +}); + +export { EdgePlanTable }; + +const StyledTypography = styled(Typography)(({ theme }) => ({ + fontSize: '0.875rem', + marginTop: theme.spacing(1), +})); diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 2408d12b590..1557e27cf3c 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -3,13 +3,14 @@ import * as React from 'react'; import { useLocation } from 'react-router-dom'; import { Notice } from 'src/components/Notice/Notice'; -import { getIsEdgeRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { getIsLinodeCreateTypeEdgeSupported } from 'src/components/RegionSelect/RegionSelect.utils'; +import { getIsEdgeRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; import { useFlags } from 'src/hooks/useFlags'; import { plansNoticesUtils } from 'src/utilities/planNotices'; import { getQueryParamsFromQueryString } from 'src/utilities/queryParams'; +import { EdgePlanTable } from './EdgePlanTable'; import { PlanContainer } from './PlanContainer'; import { PlanInformation } from './PlanInformation'; import { @@ -162,6 +163,22 @@ export const PlansPanel = (props: Props) => { currentPlanHeading ); + if (showEdgePlanTable) { + return ( + + ); + } + return ( { docsLink={docsLink} error={error} header={header || 'Linode Plan'} - initTab={showEdgePlanTable ? undefined : initialTab >= 0 ? initialTab : 0} + initTab={initialTab >= 0 ? initialTab : 0} innerClass={props.tabbedPanelInnerClass} rootClass={`${className} tabbedPanel`} - showEdgePlanTable={showEdgePlanTable} sx={{ marginTop: theme.spacing(3), width: '100%' }} tabDisabledMessage={props.tabDisabledMessage} tabs={tabs} From 3632538ace5285cfeff61d2ac2218dcec4dc85d9 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Tue, 12 Mar 2024 10:45:43 -0400 Subject: [PATCH 11/12] address feedback --- .../features/components/PlansPanel/EdgePlanTable.tsx | 4 +--- .../features/components/PlansPanel/PlanSelection.tsx | 1 + .../src/features/components/PlansPanel/PlansPanel.tsx | 10 ++++++---- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx b/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx index b574a21b227..bb182e4738e 100644 --- a/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx @@ -19,7 +19,7 @@ interface EdgePlanTableProps { sx?: SxProps; } -const EdgePlanTable = React.memo((props: EdgePlanTableProps) => { +export const EdgePlanTable = React.memo((props: EdgePlanTableProps) => { const { copy, docsLink, @@ -59,8 +59,6 @@ const EdgePlanTable = React.memo((props: EdgePlanTableProps) => { ); }); -export { EdgePlanTable }; - const StyledTypography = styled(Typography)(({ theme }) => ({ fontSize: '0.875rem', marginTop: theme.spacing(1), diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx index 24644b2434c..35532975089 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx @@ -25,6 +25,7 @@ import { StyledDisabledTableRow } from './PlansPanel.styles'; import type { PlanSelectionType } from './types'; import type { LinodeTypeClass, PriceObject, Region } from '@linode/api-v4'; + export interface PlanSelectionProps { currentPlanHeading?: string; disabled?: boolean; diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 1557e27cf3c..72ac7f06cd7 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -82,9 +82,11 @@ export const PlansPanel = (props: Props) => { const getDedicatedEdgePlanType = () => { // 256gb and 512gb plans will not be supported for Edge - const plansUpTo128GB = planTypes.dedicated.slice( - 0, - planTypes.dedicated.length - 2 + const plansUpTo128GB = planTypes.dedicated.filter( + (planType) => + !['Dedicated 256 GB', 'Dedicated 512 GB'].includes( + planType.formattedLabel + ) ); return plansUpTo128GB.map((plan) => { @@ -135,7 +137,7 @@ export const PlansPanel = (props: Props) => { + /> )} Date: Tue, 12 Mar 2024 12:11:47 -0400 Subject: [PATCH 12/12] improve type safety --- .../src/features/components/PlansPanel/EdgePlanTable.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx b/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx index bb182e4738e..932ac4d2f41 100644 --- a/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/EdgePlanTable.tsx @@ -8,13 +8,12 @@ import { Paper } from 'src/components/Paper'; import { Typography } from 'src/components/Typography'; interface EdgePlanTableProps { - [index: string]: any; copy?: string; docsLink?: JSX.Element; error?: JSX.Element | string; header: string; innerClass?: string; - renderTable: (props: any) => React.JSX.Element; + renderTable: () => React.JSX.Element; rootClass?: string; sx?: SxProps; } @@ -29,7 +28,6 @@ export const EdgePlanTable = React.memo((props: EdgePlanTableProps) => { renderTable, rootClass, sx, - ...rest } = props; return ( @@ -53,7 +51,7 @@ export const EdgePlanTable = React.memo((props: EdgePlanTableProps) => { )} {copy && {copy}} - {renderTable(rest.children)} + {renderTable()} );