feat: [UIE-8194] - DBaaS major and minor upgrades - 4 (#11199)

packages/manager/.changeset/pr-11199-upcoming-features-1730465428837.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DBaaS major minor updates integration ([#11199](https://github.com/linode/manager/pull/11199))

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

@@ -4,8 +4,7 @@ import React from 'react';
 import MongoDBIcon from 'src/assets/icons/mongodb.svg';
 import MySQLIcon from 'src/assets/icons/mysql.svg';
 import PostgreSQLIcon from 'src/assets/icons/postgresql.svg';
-
-import { databaseEngineMap } from '../DatabaseLanding/DatabaseRow';
+import { getDatabasesDescription } from 'src/features/Databases/utilities';
 
 import type { DatabaseEngine } from '@linode/api-v4';
 
@@ -101,9 +100,10 @@ export const getEngineOptions = (engines: DatabaseEngine[]) => {
             .map((engineObject) => ({
               ...engineObject,
               flag: engineIcons[engineObject.engine],
-              label: `${databaseEngineMap[engineObject.engine]} v${
-                engineObject.version
-              }`,
+              label: getDatabasesDescription({
+                engine: engineObject.engine,
+                version: engineObject.version,
+              }),
               value: `${engineObject.engine}/${engineObject.version}`,
             }))
             .sort((a, b) => (a.version > b.version ? -1 : 1)),

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

@@ -5,13 +5,13 @@ import * as React from 'react';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { TooltipIcon } from 'src/components/TooltipIcon';
+import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion';
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
 import { useInProgressEvents } from 'src/queries/events/events';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { convertMegabytesTo } from 'src/utilities/unitConversions';
 
-import { databaseEngineMap } from '../../DatabaseLanding/DatabaseRow';
 import { DatabaseStatusDisplay } from '../DatabaseStatusDisplay';
 import {
   StyledStatusBox,
@@ -24,18 +24,13 @@ import {
 import type { Region } from '@linode/api-v4';
 import type {
   Database,
-  DatabaseInstance,
   DatabaseType,
 } from '@linode/api-v4/lib/databases/types';
 
 interface Props {
   database: Database;
 }
 
-export const getDatabaseVersionNumber = (
-  version: DatabaseInstance['version']
-) => version.split('/')[1];
-
 export const DatabaseResizeCurrentConfiguration = ({ database }: Props) => {
   const {
     data: types,
@@ -94,7 +89,13 @@ export const DatabaseResizeCurrentConfiguration = ({ database }: Props) => {
           </StyledSummaryTextBox>
           <StyledSummaryTextTypography>
             <span style={{ fontFamily: theme.font.bold }}>Version</span>{' '}
-            {databaseEngineMap[database.engine]} v{database.version}
+            <DatabaseEngineVersion
+              databaseEngine={database.engine}
+              databaseID={database.id}
+              databasePendingUpdates={database.updates.pending}
+              databasePlatform={database.platform}
+              databaseVersion={database.version}
+            />
           </StyledSummaryTextTypography>
           <StyledSummaryTextTypography>
             <span style={{ fontFamily: theme.font.bold }}>Nodes</span>{' '}

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

@@ -3,28 +3,67 @@ import * as React from 'react';
 import { databaseFactory } from 'src/factories/databases';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
-import DatabaseSettings from './DatabaseSettings';
 import * as utils from '../../utilities';
+import DatabaseSettings from './DatabaseSettings';
 
 beforeAll(() => mockMatchMedia());
 
+const v1 = () => {
+  return {
+    isDatabasesEnabled: true,
+    isDatabasesV1Enabled: true,
+    isDatabasesV2Beta: false,
+    isDatabasesV2Enabled: false,
+    isDatabasesV2GA: false,
+    isUserExistingBeta: false,
+    isUserNewBeta: false,
+  };
+};
+
+const v2Beta = () => {
+  return {
+    isDatabasesEnabled: true,
+    isDatabasesV1Enabled: true,
+    isDatabasesV2Beta: true,
+    isDatabasesV2Enabled: true,
+    isDatabasesV2GA: false,
+    isUserExistingBeta: false,
+    isUserNewBeta: true,
+  };
+};
+
+const v2GA = () => ({
+  isDatabasesEnabled: true,
+  isDatabasesV1Enabled: true,
+  isDatabasesV2Beta: false,
+  isDatabasesV2Enabled: true,
+  isDatabasesV2GA: true,
+  isUserExistingBeta: false,
+  isUserNewBeta: false,
+});
+
+const spy = vi.spyOn(utils, 'useIsDatabasesEnabled');
+spy.mockReturnValue(v2GA());
+
 describe('DatabaseSettings Component', () => {
-  const database = databaseFactory.build();
+  const database = databaseFactory.build({ platform: 'rdbms-default' });
   it('Should exist and be renderable', () => {
     expect(DatabaseSettings).toBeDefined();
     renderWithTheme(<DatabaseSettings database={database} />);
   });
 
   it('Should render a Paper component with headers for Manage Access, Reseting the Root password, and Deleting the Cluster', () => {
+    spy.mockReturnValue(v2GA());
     const { container, getAllByRole } = renderWithTheme(
       <DatabaseSettings database={database} />
     );
     const paper = container.querySelector('.MuiPaper-root');
     expect(paper).not.toBeNull();
     const headings = getAllByRole('heading');
-    expect(headings[0].textContent).toBe('Manage Access');
-    expect(headings[1].textContent).toBe('Reset the Root Password');
-    expect(headings[2].textContent).toBe('Delete the Cluster');
+    expect(headings[0].textContent).toBe('Suspend Cluster');
+    expect(headings[1].textContent).toBe('Manage Access');
+    expect(headings[2].textContent).toBe('Reset the Root Password');
+    expect(headings[3].textContent).toBe('Delete the Cluster');
   });
 
   it.each([
@@ -48,6 +87,106 @@ describe('DatabaseSettings Component', () => {
     }
   });
 
+  it('should not render Maintenance for V1 view legacy db', async () => {
+    spy.mockReturnValue(v1());
+
+    const database = databaseFactory.build({
+      engine: 'postgresql',
+      platform: 'rdbms-legacy',
+      version: '14.6',
+    });
+
+    const { container } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+
+    const maintenance = container.querySelector(
+      '[data-qa-settings-section="Maintenance"]'
+    );
+
+    expect(maintenance).not.toBeInTheDocument();
+  });
+
+  it('should not render Maintenance for V2 beta view legacy db', async () => {
+    spy.mockReturnValue(v2Beta());
+
+    const database = databaseFactory.build({
+      engine: 'postgresql',
+      platform: 'rdbms-legacy',
+      version: '14.6',
+    });
+
+    const { container } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+
+    const maintenance = container.querySelector(
+      '[data-qa-settings-section="Maintenance"]'
+    );
+
+    expect(maintenance).not.toBeInTheDocument();
+  });
+
+  it('should not render Maintenance for V2 beta view default db', async () => {
+    spy.mockReturnValue(v2Beta());
+
+    const database = databaseFactory.build({
+      engine: 'postgresql',
+      platform: 'rdbms-default',
+      version: '14.6',
+    });
+
+    const { container } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+
+    const maintenance = container.querySelector(
+      '[data-qa-settings-section="Maintenance"]'
+    );
+
+    expect(maintenance).not.toBeInTheDocument();
+  });
+
+  it('should not render Maintenance for V2 GA view legacy db', async () => {
+    spy.mockReturnValue(v2GA());
+
+    const database = databaseFactory.build({
+      engine: 'postgresql',
+      platform: 'rdbms-legacy',
+      version: '14.6',
+    });
+
+    const { container } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+
+    const maintenance = container.querySelector(
+      '[data-qa-settings-section="Maintenance"]'
+    );
+
+    expect(maintenance).not.toBeInTheDocument();
+  });
+
+  it('should render Maintenance for V2 GA view default db', async () => {
+    spy.mockReturnValue(v2GA());
+
+    const database = databaseFactory.build({
+      engine: 'postgresql',
+      platform: 'rdbms-default',
+      version: '14.6',
+    });
+
+    const { container } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+
+    const maintenance = container.querySelector(
+      '[data-qa-settings-section="Maintenance"]'
+    );
+
+    expect(maintenance).toBeInTheDocument();
+  });
+
   it('Should render Maintenance Window with radio buttons', () => {
     const database = databaseFactory.build({
       platform: 'rdbms-legacy',