fix: [UIE-8194] dbaas maintenance pending updates state should displa…

…y when any pending updates are available and disable version upgrade (#11387)

packages/manager/.changeset/pr-11387-fixed-1733763957768.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+dbaas settings maintenance does not display review state and allows version upgrade when updates are available ([#11387](https://github.com/linode/manager/pull/11387))

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

@@ -73,10 +73,19 @@ describe('Database Settings Maintenance', () => {
     expect(button).toBeDisabled();
   });
 
-  it('should enable upgrade version modal button when there are upgrades available', async () => {
+  it('should disable upgrade version modal button when there are upgrades available, but there are still updates available', async () => {
     const database = databaseFactory.build({
       engine: 'postgresql',
       version: '13',
+      updates: {
+        pending: [
+          {
+            deadline: null,
+            description: 'Log configuration options changes required',
+            planned_for: null,
+          },
+        ],
+      },
     });
 
     const onReviewUpdates = vi.fn();
@@ -94,11 +103,17 @@ describe('Database Settings Maintenance', () => {
 
     const button = await findByRole('button', { name: UPGRADE_VERSION });
 
-    expect(button).toBeEnabled();
+    expect(button).toBeDisabled();
   });
 
-  it('should show review text and modal button when there are updates', async () => {
-    const database = databaseFactory.build();
+  it('should enable upgrade version modal button when there are upgrades available, and there are no pending updates', async () => {
+    const database = databaseFactory.build({
+      engine: 'postgresql',
+      version: '13',
+      updates: {
+        pending: [],
+      },
+    });
 
     const onReviewUpdates = vi.fn();
     const onUpgradeVersion = vi.fn();
@@ -118,6 +133,37 @@ describe('Database Settings Maintenance', () => {
     expect(button).toBeEnabled();
   });
 
+  it('should show review text and modal button when there are updates ', async () => {
+    const database = databaseFactory.build({
+      updates: {
+        pending: [
+          {
+            deadline: null,
+            description: 'Log configuration options changes required',
+            planned_for: null,
+          },
+        ],
+      },
+    });
+
+    const onReviewUpdates = vi.fn();
+    const onUpgradeVersion = vi.fn();
+
+    const { queryByRole } = renderWithTheme(
+      <DatabaseSettingsMaintenance
+        databaseEngine={database.engine}
+        databasePendingUpdates={database.updates.pending}
+        databaseVersion={database.version}
+        onReviewUpdates={onReviewUpdates}
+        onUpgradeVersion={onUpgradeVersion}
+      />
+    );
+
+    const button = queryByRole('button', { name: 'Click to review' });
+
+    expect(button).toBeInTheDocument();
+  });
+
   it('should not show review text and modal button when there are no updates', async () => {
     const database = databaseFactory.build({
       updates: {

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

@@ -1,4 +1,4 @@
-import { StyledLinkButton, Typography } from '@linode/ui';
+import { StyledLinkButton, TooltipIcon, Typography } from '@linode/ui';
 import { Grid, styled } from '@mui/material';
 import * as React from 'react';
 
@@ -40,11 +40,24 @@ export const DatabaseSettingsMaintenance = (props: Props) => {
         <StyledTypography>{engineVersion}</StyledTypography>
         <StyledLinkButton
           data-testid="upgrade"
-          disabled={!versions?.length}
+          disabled={!versions?.length || hasUpdates}
           onClick={onUpgradeVersion}
         >
           Upgrade Version
         </StyledLinkButton>
+        {hasUpdates && (
+          <TooltipIcon
+            sxTooltipIcon={{
+              padding: '0px 8px',
+            }}
+            text={
+              <Typography>
+                Upgrades are disabled while maintenance updates are in progress.
+              </Typography>
+            }
+            status="help"
+          />
+        )}
       </Grid>
       {/*
         TODO Uncomment and provide value when the EOL is returned by the API.

packages/manager/src/features/Databases/utilities.test.ts

@@ -8,6 +8,7 @@ import {
 } from 'src/factories';
 import {
   getDatabasesDescription,
+  hasPendingUpdates,
   isDateOutsideBackup,
   isDefaultDatabase,
   isLegacyDatabase,
@@ -19,7 +20,12 @@ import {
 import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { wrapWithTheme } from 'src/utilities/testHelpers';
 
-import type { AccountCapability, Database, Engine } from '@linode/api-v4';
+import type {
+  AccountCapability,
+  Database,
+  Engine,
+  PendingUpdates,
+} from '@linode/api-v4';
 import type { TimeOption } from 'src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups';
 
 const setup = (capabilities: AccountCapability[], flags: any) => {
@@ -419,6 +425,32 @@ describe('getDatabasesDescription', () => {
   });
 });
 
+describe('hasPendingUpdates', () => {
+  it('should return false when there are no pending updates provided', () => {
+    expect(hasPendingUpdates()).toBe(false);
+  });
+
+  it('should return false when pendingUpdates param is undefined', () => {
+    expect(hasPendingUpdates(undefined)).toBe(false);
+  });
+
+  it('should return false when pending updates is an empty array', () => {
+    const updates: PendingUpdates[] = [];
+    expect(hasPendingUpdates(updates)).toBe(false);
+  });
+
+  it('should return true when there are pending updates', () => {
+    const updates: PendingUpdates[] = [
+      {
+        deadline: null,
+        description: 'Log configuration options changes required',
+        planned_for: null,
+      },
+    ];
+    expect(hasPendingUpdates(updates)).toBe(true);
+  });
+});
+
 describe('isDefaultDatabase', () => {
   it('should return true for default platform database', () => {
     const db: Database = databaseFactory.build({

packages/manager/src/features/Databases/utilities.ts

@@ -230,9 +230,7 @@ export const getDatabasesDescription = (
 };
 
 export const hasPendingUpdates = (pendingUpdates?: PendingUpdates[]) =>
-  Boolean(
-    pendingUpdates?.some((update) => update.deadline || update.planned_for)
-  );
+  Boolean(pendingUpdates && pendingUpdates?.length > 0);
 
 export const isDefaultDatabase = (
   database: Pick<DatabaseInstance, 'platform'>