feat: [UIE-8194] - DBaaS major and minor upgrades - 4

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/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,25 +3,63 @@ import * as React from 'react';
 import { databaseFactory } from 'src/factories/databases';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
+import * as utils from '../../utilities';
 import DatabaseSettings from './DatabaseSettings';
 
+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();
   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', () => {
+  it('Should render a Paper component with headers for Access Controls, Reseting the Root password, and Deleting the Cluster', () => {
     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('Access Controls');
+    expect(headings[1].textContent).toBe('Reset Root Password');
+    expect(headings[2].textContent).toBe('Delete Cluster');
   });
 
   it.each([
@@ -33,7 +71,7 @@ describe('DatabaseSettings Component', () => {
     );
     const button1 = getByTitle('Reset Root Password');
     const button2 = getByTitle('Save Changes');
-    const button3 = getByRole('button', { name: 'Manage Access' });
+    const button3 = getByRole('button', { name: 'Manage Access Controls' });
 
     if (isDisabled) {
       expect(button1).toBeDisabled();
@@ -45,6 +83,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',

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

@@ -3,10 +3,17 @@ import * as React from 'react';
 import { Divider } from 'src/components/Divider';
 import { Paper } from '@linode/ui';
 import { Typography } from 'src/components/Typography';
+import DatabaseSettingsReviewUpdatesDialog from 'src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog';
+import DatabaseSettingsUpgradeVersionDialog from 'src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog';
+import {
+  isDefaultDatabase,
+  useIsDatabasesEnabled,
+} from 'src/features/Databases/utilities';
 import { useProfile } from 'src/queries/profile/profile';
 
 import AccessControls from '../AccessControls';
 import DatabaseSettingsDeleteClusterDialog from './DatabaseSettingsDeleteClusterDialog';
+import DatabaseSettingsMaintenance from './DatabaseSettingsMaintenance';
 import DatabaseSettingsMenuItem from './DatabaseSettingsMenuItem';
 import DatabaseSettingsResetPasswordDialog from './DatabaseSettingsResetPasswordDialog';
 import MaintenanceWindow from './MaintenanceWindow';
@@ -21,6 +28,8 @@ interface Props {
 export const DatabaseSettings: React.FC<Props> = (props) => {
   const { database, disabled } = props;
   const { data: profile } = useProfile();
+  const { isDatabasesV2GA } = useIsDatabasesEnabled();
+  const isDefaultDB = isDefaultDatabase(database);
 
   const accessControlCopy = (
     <Typography>
@@ -29,13 +38,11 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
     </Typography>
   );
 
-  const isLegacy = database.platform === 'rdbms-legacy';
-
-  const resetRootPasswordCopy = isLegacy
+  const resetRootPasswordCopy = !isDefaultDB
     ? 'Resetting your root password will automatically generate a new password. You can view the updated password on your database cluster summary page. '
     : 'Reset your root password if someone should no longer have access to the root user or if you believe your password may have been compromised. This will automatically generate a new password that you’ll be able to see on your database cluster summary page.';
 
-  const deleteClusterCopy = isLegacy
+  const deleteClusterCopy = !isDefaultDB
     ? 'Deleting a database cluster is permanent and cannot be undone.'
     : 'Permanently remove an unused database cluster.';
 
@@ -45,6 +52,16 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
     setIsResetRootPasswordDialogOpen,
   ] = React.useState(false);
 
+  const [
+    isUpgradeVersionDialogOpen,
+    setIsUpgradeVersionDialogOpen,
+  ] = React.useState(false);
+
+  const [
+    isReviewUpdatesDialogOpen,
+    setIsReviewUpdatesDialogOpen,
+  ] = React.useState(false);
+
   const onResetRootPassword = () => {
     setIsResetRootPasswordDialogOpen(true);
   };
@@ -61,6 +78,22 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
     setIsResetRootPasswordDialogOpen(false);
   };
 
+  const onUpgradeVersion = () => {
+    setIsUpgradeVersionDialogOpen(true);
+  };
+
+  const onUpgradeVersionClose = () => {
+    setIsUpgradeVersionDialogOpen(false);
+  };
+
+  const onReviewUpdates = () => {
+    setIsReviewUpdatesDialogOpen(true);
+  };
+
+  const onReviewUpdatesClose = () => {
+    setIsReviewUpdatesDialogOpen(false);
+  };
+
   return (
     <>
       <Paper>
@@ -75,16 +108,28 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
           descriptiveText={resetRootPasswordCopy}
           disabled={disabled}
           onClick={onResetRootPassword}
-          sectionTitle="Reset the Root Password"
+          sectionTitle="Reset Root Password"
         />
         <Divider spacingBottom={22} spacingTop={28} />
         <DatabaseSettingsMenuItem
           buttonText="Delete Cluster"
           descriptiveText={deleteClusterCopy}
           disabled={Boolean(profile?.restricted)}
           onClick={onDeleteCluster}
-          sectionTitle="Delete the Cluster"
+          sectionTitle="Delete Cluster"
         />
+        {isDatabasesV2GA && isDefaultDB && (
+          <>
+            <Divider spacingBottom={22} spacingTop={28} />
+            <DatabaseSettingsMaintenance
+              databaseEngine={database.engine}
+              databasePendingUpdates={database.updates.pending}
+              databaseVersion={database.version}
+              onReviewUpdates={onReviewUpdates}
+              onUpgradeVersion={onUpgradeVersion}
+            />
+          </>
+        )}
         <Divider spacingBottom={22} spacingTop={28} />
         <MaintenanceWindow
           database={database}
@@ -105,6 +150,21 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
         onClose={onResetRootPasswordClose}
         open={isResetRootPasswordDialogOpen}
       />
+      <DatabaseSettingsUpgradeVersionDialog
+        databaseEngine={database.engine}
+        databaseID={database.id}
+        databaseLabel={database.label}
+        databaseVersion={database.version}
+        onClose={onUpgradeVersionClose}
+        open={isUpgradeVersionDialogOpen}
+      />
+      <DatabaseSettingsReviewUpdatesDialog
+        databaseEngine={database.engine}
+        databaseID={database.id}
+        databasePendingUpdates={database.updates.pending}
+        onClose={onReviewUpdatesClose}
+        open={isReviewUpdatesDialogOpen}
+      />
     </>
   );
 };

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx

@@ -10,7 +10,7 @@ import {
   StyledLabelTypography,
   StyledValueGrid,
 } from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.style';
-import { databaseEngineMap } from 'src/features/Databases/DatabaseLanding/DatabaseRow';
+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';
@@ -101,7 +101,13 @@ export const DatabaseSummaryClusterConfiguration = (props: Props) => {
           <StyledLabelTypography>Engine</StyledLabelTypography>
         </Grid>
         <StyledValueGrid lg={1.5} md={4} xs={8}>
-          {databaseEngineMap[database.engine]} v{database.version}
+          <DatabaseEngineVersion
+            databaseEngine={database.engine}
+            databaseID={database.id}
+            databasePendingUpdates={database.updates.pending}
+            databasePlatform={database.platform}
+            databaseVersion={database.version}
+          />
         </StyledValueGrid>
         <Grid lg={1} md={2} xs={4}>
           <StyledLabelTypography>Region</StyledLabelTypography>