diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx index d69ffb4ac77..9c4cb917b0a 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx @@ -9,13 +9,12 @@ import { TableBody } from 'src/components/TableBody'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty'; -import { useFlags } from 'src/hooks/useFlags'; import { PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE } from 'src/utilities/pricing/constants'; import { StyledTable, StyledTableCell } from './PlanContainer.styles'; import { PlanSelection } from './PlanSelection'; -import type { PlanSelectionType, TypeWithAvailability } from './types'; +import type { TypeWithAvailability } from './types'; import type { Region } from '@linode/api-v4'; const tableCells = [ @@ -36,12 +35,12 @@ const tableCells = [ ]; export interface Props { + allDisabledPlans: string[]; currentPlanHeading?: string; disabled?: boolean; disabledClasses?: LinodeTypeClass[]; - disabledPlanTypes?: PlanSelectionType[]; disabledPlanTypesToolTipText?: string; - hideDisabledHelpIcons?: boolean; + hasMajorityOfPlansDisabled: boolean; isCreate?: boolean; linodeID?: number | undefined; onSelect: (key: string) => void; @@ -54,12 +53,12 @@ export interface Props { export const PlanContainer = (props: Props) => { const { + allDisabledPlans, currentPlanHeading, disabled: isWholePanelDisabled, disabledClasses, - disabledPlanTypes, disabledPlanTypesToolTipText, - hideDisabledHelpIcons, + hasMajorityOfPlansDisabled, isCreate, linodeID, onSelect, @@ -69,7 +68,6 @@ export const PlanContainer = (props: Props) => { selectedRegionId, showTransfer, } = props; - const flags = useFlags(); const location = useLocation(); // Show the Transfer column if, for any plan, the api returned data and we're not in the Database Create flow @@ -90,40 +88,24 @@ export const PlanContainer = (props: Props) => { !selectedRegionId && !isDatabaseCreateFlow && !isDatabaseResizeFlow; const renderPlanSelection = React.useCallback(() => { - const allDisabledPlans: string[] = []; - - if (disabledPlanTypes) { - disabledPlanTypes.forEach((plan) => { - allDisabledPlans.push(plan.id); - }); - } - return plans.map((plan, id) => { - // Determine if the plan should be disabled solely due to being a 512GB plan - const isDisabled512GbPlan = - plan.label.includes('512GB') && - Boolean(flags.disableLargestGbPlans) && - !isWholePanelDisabled; - - if (plan.isLimitedAvailabilityPlan || isDisabled512GbPlan) { - allDisabledPlans.push(plan.id); - } - const isPlanDisabled = allDisabledPlans.includes(plan.id); return ( { ); }); }, [ - disabledPlanTypes, + allDisabledPlans, disabledPlanTypesToolTipText, + hasMajorityOfPlansDisabled, plans, selectedRegionId, isWholePanelDisabled, currentPlanHeading, disabledClasses, - hideDisabledHelpIcons, isCreate, linodeID, onSelect, selectedDiskSize, selectedId, showTransfer, - flags.disableLargestGbPlans, ]); return ( diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx index c65358987f2..fc2af980162 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx @@ -30,16 +30,16 @@ import type { LinodeTypeClass, PriceObject, Region } from '@linode/api-v4'; export interface PlanSelectionProps { currentPlanHeading?: string; - disabled?: boolean; disabledClasses?: LinodeTypeClass[]; disabledToolTip?: string; header?: string; hideDisabledHelpIcons?: boolean; idx: number; isCreate?: boolean; + isPlanDisabled?: boolean; + isWholePanelDisabled?: boolean; linodeID?: number | undefined; onSelect: (key: string) => void; - planIsDisabled?: boolean; selectedDiskSize?: number; selectedId?: string; selectedRegionId?: Region['id']; @@ -56,14 +56,14 @@ const getDisabledClass = ( const getToolTip = ({ disabledToolTip, - planIsDisabled, + isPlanDisabled, sizeTooSmall, }: { disabledToolTip?: string; - planIsDisabled?: boolean; + isPlanDisabled?: boolean; sizeTooSmall: boolean; }) => { - if (planIsDisabled) { + if (isPlanDisabled) { return disabledToolTip; } if (sizeTooSmall) { @@ -75,15 +75,15 @@ const getToolTip = ({ export const PlanSelection = (props: PlanSelectionProps) => { const { currentPlanHeading, - disabled, disabledClasses, disabledToolTip, hideDisabledHelpIcons, idx, isCreate, + isPlanDisabled, + isWholePanelDisabled, linodeID, onSelect, - planIsDisabled, selectedDiskSize, selectedId, selectedRegionId, @@ -96,7 +96,7 @@ export const PlanSelection = (props: PlanSelectionProps) => { const isSamePlan = type.heading === currentPlanHeading; const tooltip = getToolTip({ disabledToolTip, - planIsDisabled, + isPlanDisabled, sizeTooSmall: planTooSmall, }); const isGPU = type.class === 'gpu'; @@ -127,7 +127,11 @@ export const PlanSelection = (props: PlanSelectionProps) => { )}/mo ($${price?.hourly ?? UNKNOWN_PRICE}/hr)`; const rowIsDisabled = - isSamePlan || planTooSmall || isDisabledClass || planIsDisabled || disabled; + isSamePlan || + planTooSmall || + isDisabledClass || + isPlanDisabled || + isWholePanelDisabled; return ( @@ -151,14 +155,14 @@ export const PlanSelection = (props: PlanSelectionProps) => { control={ { disabled={ planTooSmall || isSamePlan || - disabled || + isWholePanelDisabled || rowIsDisabled || isDisabledClass } diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 89bf5848b75..b817f5c2998 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -56,6 +56,7 @@ export const PlansPanel = (props: Props) => { copy, currentPlanHeading, disabled, + disabledClasses, disabledPlanTypes, disabledPlanTypesToolTipText, docsLink, @@ -65,6 +66,7 @@ export const PlansPanel = (props: Props) => { linodeID, onSelect, regionsData, + selectedDiskSize, selectedId, selectedRegionID, showTransfer, @@ -117,8 +119,8 @@ export const PlansPanel = (props: Props) => { // @TODO Gecko: Get plan data from API when it's available instead of hardcoding const plans = showEdgePlanTable ? { - dedicated: getDedicatedEdgePlanType(), - } + dedicated: getDedicatedEdgePlanType(), + } : _plans; const { @@ -145,6 +147,26 @@ export const PlansPanel = (props: Props) => { } ); + const allDisabledPlans = plansForThisLinodeTypeClass.reduce((acc, plan) => { + // Determine if the plan should be disabled solely due to being a 512GB plan + const isDisabled512GbPlan = + plan.label.includes('512GB') && Boolean(flags.disableLargestGbPlans); + // && !isWholePanelDisabled; + + if ( + plan.isLimitedAvailabilityPlan || + isDisabled512GbPlan || + disabledPlanTypes?.some((disabledPlan) => disabledPlan.id === plan.id) + ) { + return [...acc, plan.id]; + } + + return acc; + }, []); + const hasDisabledPlans = allDisabledPlans.length > 0; + const hasMajorityOfPlansDisabled = + allDisabledPlans.length >= plansForThisLinodeTypeClass.length / 2; + return { disabled: props.disabledTabs ? props.disabledTabs?.includes(plan) : false, render: () => { @@ -157,8 +179,8 @@ export const PlansPanel = (props: Props) => { isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan( plan )} - disabledClasses={props.disabledClasses} - hasDisabledPlans={false} // TODO GETWELL based on other TODO + disabledClasses={disabledClasses} + hasDisabledPlans={hasDisabledPlans} hasSelectedRegion={hasSelectedRegion} planType={plan} regionsData={regionsData || []} @@ -170,17 +192,17 @@ export const PlansPanel = (props: Props) => { /> )}