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 && (