diff --git a/packages/manager/.changeset/pr-10381-fixed-1713278851268.md b/packages/manager/.changeset/pr-10381-fixed-1713278851268.md new file mode 100644 index 00000000000..643c19058e7 --- /dev/null +++ b/packages/manager/.changeset/pr-10381-fixed-1713278851268.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Prevent clickable disabled smaller plans in Resizing Tab ([#10381](https://github.com/linode/manager/pull/10381)) diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx index 8d50cbb217e..820807f5139 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx @@ -121,4 +121,49 @@ describe('database resize', () => { getByText(`Resize Database Cluster ${database.label}?`); }); }); + + describe('should be disabled smaller plans', () => { + const database = databaseFactory.build({ + type: 'g6-dedicated-8', + }); + it('disabled smaller plans', async () => { + // Mock database types + const dedicatedTypes = [ + databaseTypeFactory.build({ + class: 'dedicated', + disk: 81920, + id: 'g6-dedicated-2', + label: 'Dedicated 4 GB', + memory: 4096, + }), + databaseTypeFactory.build({ + class: 'dedicated', + disk: 163840, + id: 'g6-dedicated-4', + label: 'Dedicated 8 GB', + memory: 8192, + }), + databaseTypeFactory.build({ + class: 'dedicated', + disk: 327680, + id: 'g6-dedicated-8', + label: `Linode 16 GB`, + memory: 16384, + }), + ]; + server.use( + http.get('*/databases/types', () => { + return HttpResponse.json(makeResourcePage([...dedicatedTypes])); + }) + ); + const { getByTestId } = renderWithTheme( + + ); + expect(getByTestId(loadingTestId)).toBeInTheDocument(); + await waitForElementToBeRemoved(getByTestId(loadingTestId)); + expect( + document.getElementById('g6-dedicated-4')?.hasAttribute('disabled') + ); + }); + }); }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx index 094db3a7339..a7d9e2b3550 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx @@ -203,9 +203,13 @@ export const DatabaseResize = ({ database }: Props) => { const currentPlan = displayTypes?.find((type) => type.id === database.type); - const disabledPlans = displayTypes?.filter( - (type) => type.disk < (currentPlan ? currentPlan.disk : 0) + const currentPlanDisk = currentPlan ? currentPlan.disk : 0; + const disabledPlans = displayTypes?.filter((type) => + type.class === 'dedicated' + ? type.disk < currentPlanDisk + : type.disk <= currentPlanDisk ); + if (typesLoading) { return ; } diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx index 25b6a7b1e20..e0039797966 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx @@ -58,14 +58,16 @@ const getDisabledClass = ( const getToolTip = ({ disabledToolTip, + isSamePlan, planIsDisabled, sizeTooSmall, }: { disabledToolTip?: string; + isSamePlan: boolean; planIsDisabled?: boolean; sizeTooSmall: boolean; }) => { - if (planIsDisabled) { + if (planIsDisabled && !isSamePlan) { return disabledToolTip; } if (sizeTooSmall) { @@ -109,6 +111,7 @@ export const PlanSelection = (props: PlanSelectionProps) => { const isSamePlan = type.heading === currentPlanHeading; const tooltip = getToolTip({ disabledToolTip, + isSamePlan, planIsDisabled, sizeTooSmall: planTooSmall, }); @@ -147,16 +150,12 @@ export const PlanSelection = (props: PlanSelectionProps) => { {/* Displays Table Row for larger screens */} - !isSamePlan && !isDisabled && !isDisabledClass && !planTooSmall - ? onSelect(type.id) - : undefined - } aria-disabled={rowAriaDisabled} aria-label={rowAriaLabel} data-qa-plan-row={type.formattedLabel} disabled={rowAriaDisabled} key={type.id} + onClick={() => (!rowAriaDisabled ? onSelect(type.id) : undefined)} > {!isSamePlan && (