fix: [UIE-9003] - DBaaS - node selector options for premium and provide plan disabling behavior in resize (linode#12634)

* fix: [UIE-9003] - DBaaS - expand node selector options for premium plans and provide disabling behavior for plans by region in resize

* Adding changesets

* Updating added changeset

* Updating logic so that region queries that allow disabling behavior from PlansPanel are only made for new database clusters

* Applying additional feedback

Author: smans-akamai

packages/manager/.changeset/pr-12634-added-1754346674408.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+PlansPanel additionalBanners property for rendering additional banners and disabled property for DatabaseNodeSelector ([#12634](https://github.com/linode/manager/pull/12634))

packages/manager/.changeset/pr-12634-fixed-1754346423085.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+DBaaS Create and Resize node selector options for premium plans and region disabling behavior and handling not being applied in Resize ([#12634](https://github.com/linode/manager/pull/12634))

packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.test.tsx

@@ -2,12 +2,56 @@ import { waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
+import { databaseTypeFactory, planSelectionTypeFactory } from 'src/factories';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
 import { DatabaseCreate } from './DatabaseCreate';
+import { DatabaseNodeSelector } from './DatabaseNodeSelector';
+
+import type { ClusterSize, Engine } from '@linode/api-v4';
+import type { PlanSelectionWithDatabaseType } from 'src/features/components/PlansPanel/types';
 
 const loadingTestId = 'circle-progress';
 
+const mockDisplayTypes = [
+  planSelectionTypeFactory.build({
+    class: 'standard',
+  }),
+  planSelectionTypeFactory.build({
+    class: 'nanode',
+  }),
+  planSelectionTypeFactory.build({
+    class: 'dedicated',
+  }),
+  planSelectionTypeFactory.build({
+    class: 'premium',
+    id: 'premium-32',
+    label: 'Premium 32 GB',
+  }),
+];
+
+const mockCurrentPlan = databaseTypeFactory.build({
+  class: 'premium',
+  id: 'premium-32',
+  label: 'Premium 32 GB',
+}) as PlanSelectionWithDatabaseType;
+
+const mockClusterSize: ClusterSize = 1;
+const mockEngine: Engine = 'mysql';
+
+const mockProps = {
+  currentClusterSize: mockClusterSize,
+  currentPlan: mockCurrentPlan,
+  disabled: false,
+  displayTypes: mockDisplayTypes,
+  error: '',
+  handleNodeChange: vi.fn(),
+  selectedClusterSize: mockClusterSize,
+  selectedEngine: mockEngine,
+  selectedPlan: mockCurrentPlan,
+  selectedTab: 0,
+};
+
 beforeAll(() => mockMatchMedia());
 
 describe('database node selector', () => {
@@ -17,7 +61,7 @@ describe('database node selector', () => {
       enabled: true,
     },
   };
-  it('should render 3 nodes for dedicated tab', async () => {
+  it('should render 3 node options for dedicated tab', async () => {
     const { getByTestId } = renderWithTheme(<DatabaseCreate />, {
       flags,
     });
@@ -30,7 +74,7 @@ describe('database node selector', () => {
     expect(getByTestId('database-node-3')).toBeInTheDocument();
   });
 
-  it('should render 2 nodes for shared tab', async () => {
+  it('should render 2 node options for shared tab', async () => {
     const { getAllByRole, getByTestId } = renderWithTheme(<DatabaseCreate />, {
       flags,
     });
@@ -44,4 +88,34 @@ describe('database node selector', () => {
     expect(getByTestId('database-node-1')).toBeInTheDocument();
     expect(getByTestId('database-node-3')).toBeInTheDocument();
   });
+
+  it('should render 3 node options for premium tab', async () => {
+    const { getByTestId, getAllByRole } = renderWithTheme(<DatabaseCreate />, {
+      flags,
+    });
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const premiumTab = getAllByRole('tab')[2];
+    await userEvent.click(premiumTab);
+
+    expect(getByTestId('database-nodes').childNodes.length).equal(3);
+    expect(getByTestId('database-node-1')).toBeInTheDocument();
+    expect(getByTestId('database-node-2')).toBeInTheDocument();
+    expect(getByTestId('database-node-3')).toBeInTheDocument();
+  });
+
+  it('should disable 3 node options when disabled is true', async () => {
+    const { getByTestId } = renderWithTheme(
+      <DatabaseNodeSelector {...mockProps} disabled />,
+      {
+        flags,
+      }
+    );
+
+    expect(getByTestId('database-nodes')).toHaveAttribute(
+      'aria-disabled',
+      'true'
+    );
+  });
 });

packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx

@@ -31,6 +31,7 @@ export interface NodePricing {
 interface Props {
   currentClusterSize?: ClusterSize | undefined;
   currentPlan?: PlanSelectionWithDatabaseType | undefined;
+  disabled?: boolean;
   displayTypes: PlanSelectionType[];
   error?: string;
   handleNodeChange: (value: ClusterSize) => void;
@@ -44,6 +45,7 @@ export const DatabaseNodeSelector = (props: Props) => {
   const {
     currentClusterSize,
     currentPlan,
+    disabled,
     displayTypes,
     error,
     handleNodeChange,
@@ -79,6 +81,8 @@ export const DatabaseNodeSelector = (props: Props) => {
       (type) => type.class === 'dedicated'
     );
 
+    const hasPremium = displayTypes.some((type) => type.class === 'premium');
+
     const currentChip = currentClusterSize && initialTab === selectedTab && (
       <StyledChip
         aria-label="This is your current number of nodes"
@@ -104,7 +108,12 @@ export const DatabaseNodeSelector = (props: Props) => {
       },
     ];
 
-    if (hasDedicated && selectedTab === 0) {
+    const isDedicated = hasDedicated && selectedTab === 0;
+    const isPremium = hasPremium && selectedTab === 2;
+
+    const displayTwoNodesOption = isDedicated || isPremium;
+
+    if (displayTwoNodesOption) {
       options.push({
         label: (
           <Typography component="div">
@@ -157,14 +166,14 @@ export const DatabaseNodeSelector = (props: Props) => {
         upgrades and maintenance.
       </Typography>
       <FormControl
-        disabled={isRestricted}
+        disabled={isRestricted || disabled}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
           handleNodeChange(+e.target.value as ClusterSize);
         }}
       >
         {error ? <Notice text={error} variant="error" /> : null}
         <RadioGroup
-          aria-disabled={isRestricted}
+          aria-disabled={isRestricted || disabled}
           data-testid="database-nodes"
           style={{ marginBottom: 0, marginTop: 0 }}
           value={selectedClusterSize ?? ''}

packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx

@@ -1,3 +1,4 @@
+import { regionAvailabilityFactory, regionFactory } from '@linode/utilities';
 import { waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
@@ -25,6 +26,50 @@ const engine = 'mysql';
 const isResizeEnabled = true;
 const loadingTestId = 'circle-progress';
 
+const mockDedicatedTypes = [
+  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,
+  }),
+];
+
+const availabilities = [
+  regionAvailabilityFactory.build({
+    plan: 'premium-32',
+    region: 'us-east',
+    available: false,
+  }),
+];
+
+const queryMocks = vi.hoisted(() => ({
+  useRegionAvailabilityQuery: vi.fn().mockReturnValue({ data: [] }),
+  useRegionQuery: vi.fn().mockReturnValue({ data: {} }),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useRegionQuery: queryMocks.useRegionQuery,
+    useRegionAvailabilityQuery: queryMocks.useRegionAvailabilityQuery,
+  };
+});
+
+// Mock response from region availability query to simulate limited availability for premium-32 plan in us-ord region (Chicago)
+queryMocks.useRegionAvailabilityQuery.mockReturnValue({
+  data: availabilities,
+});
+
 beforeAll(() => mockMatchMedia());
 
 describe('database resize', () => {
@@ -187,15 +232,6 @@ describe('database resize', () => {
         }),
         ...databaseTypeFactory.buildList(7, { class: 'standard' }),
       ];
-      const mockDedicatedTypes = [
-        databaseTypeFactory.build({
-          class: 'dedicated',
-          disk: 81920,
-          id: 'g6-dedicated-2',
-          label: 'Dedicated 4 GB',
-          memory: 4096,
-        }),
-      ];
 
       server.use(
         http.get('*/databases/types', () => {
@@ -344,24 +380,6 @@ describe('database resize', () => {
 
   describe('on rendering of page and isDatabasesV2GA is true and the Dedicated CPU tab is preselected', () => {
     beforeEach(() => {
-      // Mock database types
-      const mockDedicatedTypes = [
-        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,
-        }),
-      ];
-
       // Mock database types
       const standardTypes = [
         databaseTypeFactory.build({
@@ -500,4 +518,93 @@ describe('database resize', () => {
       expect(getByText('Shared CPU')).toHaveAttribute('aria-disabled', 'true');
     });
   });
+
+  describe('on rendering of page and databasePremium flag is true and the current plan for the cluster is unavailable', () => {
+    beforeEach(() => {
+      // Mock database types
+      const standardTypes = [
+        databaseTypeFactory.build({
+          class: 'nanode',
+          id: 'g6-nanode-1',
+          label: `New DBaaS - Nanode 1 GB`,
+          memory: 1024,
+        }),
+      ];
+      const premiumTypes = [
+        databaseTypeFactory.build({
+          class: 'premium',
+          id: 'premium-32',
+          label: `DBaaS - Premium 32 GB`,
+          memory: 1024,
+        }),
+      ];
+
+      const mockRegion = regionFactory.build({
+        capabilities: ['VPCs'],
+        id: 'us-east',
+        label: 'Newark, NJ',
+      });
+      queryMocks.useRegionQuery.mockReturnValue({
+        data: mockRegion,
+      });
+
+      server.use(
+        http.get('*/databases/types', () => {
+          return HttpResponse.json(
+            makeResourcePage([
+              ...mockDedicatedTypes,
+              ...standardTypes,
+              ...premiumTypes,
+            ])
+          );
+        }),
+        http.get('*/account', () => {
+          const account = accountFactory.build({
+            capabilities: ['Managed Databases', 'Managed Databases Beta'],
+          });
+          return HttpResponse.json(account);
+        })
+      );
+    });
+
+    it('should disable node selection and display unavailable current plan notice', async () => {
+      const databaseWithPremiumSelection = {
+        ...mockDatabase,
+        type: 'premium-32',
+        region: 'us-east',
+      };
+
+      const flags = {
+        dbaasV2: {
+          beta: false,
+          enabled: true,
+        },
+        databasePremium: true,
+      };
+
+      const { getByTestId, getAllByText } = renderWithTheme(
+        <DatabaseDetailContext.Provider
+          value={{
+            database: databaseWithPremiumSelection,
+            engine,
+            isResizeEnabled,
+          }}
+        >
+          <DatabaseResize />
+        </DatabaseDetailContext.Provider>,
+        { flags }
+      );
+      expect(getByTestId(loadingTestId)).toBeInTheDocument();
+      await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+      expect(getByTestId('database-nodes')).toHaveAttribute(
+        'aria-disabled',
+        'true'
+      );
+      const expectedMessage =
+        'Warning: Your current plan is currently unavailable and it can\u{2019}t be used to resize the cluster. You can only resize the cluster using other available plans.';
+      const unavailableNotice = getAllByText(expectedMessage);
+      expect(unavailableNotice[0]).toBeInTheDocument();
+    });
+  });
 });