feat: [UIE-8166] - DBaaS backup GA toggle and beta fixes

packages/api-v4/.changeset/pr-11048-changed-1728076842800.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Specify the fork restore payload and return types ([#11048](https://github.com/linode/manager/pull/11048))

packages/api-v4/src/databases/databases.ts

@@ -22,6 +22,7 @@ import {
   Engine,
   SSLFields,
   UpdateDatabasePayload,
+  DatabaseFork,
 } from './types';
 
 /**
@@ -248,14 +249,8 @@ export const legacyRestoreWithBackup = (
  *
  * Fully restore a backup to the cluster
  */
-export const restoreWithBackup = (
-  engine: Engine,
-  fork: {
-    source: number;
-    restore_time?: string;
-  }
-) =>
-  Request<{}>(
+export const restoreWithBackup = (engine: Engine, fork: DatabaseFork) =>
+  Request<Database>(
     setURL(`${API_ROOT}/databases/${encodeURIComponent(engine)}/instances`),
     setMethod('POST'),
     setData({ fork })

packages/api-v4/src/databases/types.ts

@@ -47,6 +47,11 @@ export interface DatabaseBackup {
   created: string;
 }
 
+export interface DatabaseFork {
+  source: number;
+  restore_time?: string;
+}
+
 export interface DatabaseCredentials {
   username: string;
   password: string;

packages/manager/.changeset/pr-11048-upcoming-features-1728076876251.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DBaaS GA enhancements to backups tab and beta fixes ([#11048](https://github.com/linode/manager/pull/11048))

packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.style.ts

@@ -1,21 +1,15 @@
 import { styled } from '@mui/material/styles';
-import { DateCalendar, TimePicker } from '@mui/x-date-pickers';
-
-import { Box } from 'src/components/Box';
+import { DateCalendar } from '@mui/x-date-pickers';
 import { Typography } from 'src/components/Typography';
+import { makeStyles } from 'tss-react/mui';
 
-export const StyledTimePicker = styled(TimePicker)(() => ({
-  '.MuiInputAdornment-root': { marginRight: '0' },
-  '.MuiInputBase-input': { padding: '8px 0 8px 12px' },
-  '.MuiInputBase-root': { borderRadius: '0', padding: '0px' },
-
-  'button.MuiButtonBase-root': {
-    marginRight: '0',
-    padding: '8px',
+export const useStyles = makeStyles()(() => ({
+  timeAutocomplete: {
+    width: '140px',
+    '.MuiBox-root': {
+      marginTop: '0',
+    },
   },
-  height: '34px',
-  marginTop: '8px',
-  width: '120px',
 }));
 
 export const StyledDateCalendar = styled(DateCalendar, {
@@ -56,25 +50,6 @@ export const StyledDateCalendar = styled(DateCalendar, {
   width: '260px',
 }));
 
-export const StyledBox = styled(Box)(({ theme }) => ({
-  '& h6': {
-    fontSize: '0.875rem',
-  },
-  '& span': {
-    marginBottom: '5px',
-    marginTop: '7px',
-  },
-  alignItems: 'flex-start',
-
-  border: '1px solid #F4F4F4',
-  color: theme.name === 'light' ? '#555555' : theme.color.headline,
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100%',
-  padding: '8px 15px',
-  background: theme.name === 'light' ? '#FBFBFB' : theme.color.grey2,
-}));
-
 export const StyledTypography = styled(Typography)(() => ({
   lineHeight: '20px',
   marginTop: '4px',

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

@@ -95,10 +95,9 @@ describe('Database Backups', () => {
     });
   });
 
-  it('should disable the restore button if no oldest_restore_time is returned', async () => {
+  it('should enable the restore button if disabled = false', async () => {
     const mockDatabase = databaseFactory.build({
-      oldest_restore_time: undefined,
-      platform: 'rdbms-default',
+      platform: 'rdbms-legacy',
     });
     const backups = databaseBackupFactory.buildList(7);
 
@@ -115,19 +114,20 @@ describe('Database Backups', () => {
     );
 
     const { findAllByText } = renderWithTheme(
-      <DatabaseBackups disabled={true} />
+      <DatabaseBackups disabled={false} />
     );
     const buttonSpans = await findAllByText('Restore');
-    expect(buttonSpans.length).toEqual(1);
+    expect(buttonSpans.length).toEqual(7);
     buttonSpans.forEach((span: HTMLSpanElement) => {
       const button = span.closest('button');
-      expect(button).toBeDisabled();
+      expect(button).toBeEnabled();
     });
   });
 
-  it('should enable the restore button if disabled = false', async () => {
+  it('should disable the restore button if no oldest_restore_time is returned', async () => {
     const mockDatabase = databaseFactory.build({
-      platform: 'rdbms-legacy',
+      oldest_restore_time: undefined,
+      platform: 'rdbms-default',
     });
     const backups = databaseBackupFactory.buildList(7);
 
@@ -144,17 +144,34 @@ describe('Database Backups', () => {
     );
 
     const { findAllByText } = renderWithTheme(
-      <DatabaseBackups disabled={false} />
+      <DatabaseBackups disabled={true} />
     );
     const buttonSpans = await findAllByText('Restore');
-    expect(buttonSpans.length).toEqual(7);
+    expect(buttonSpans.length).toEqual(1);
     buttonSpans.forEach((span: HTMLSpanElement) => {
       const button = span.closest('button');
-      expect(button).toBeEnabled();
+      expect(button).toBeDisabled();
     });
   });
 
-  it('should render a time picker when it is a new database', async () => {
+  it('should render a date picker when it is a default database', async () => {
+    const mockDatabase = databaseFactory.build({
+      platform: 'rdbms-default',
+    });
+
+    server.use(
+      http.get('*/databases/:engine/instances/:id', () => {
+        return HttpResponse.json(mockDatabase);
+      })
+    );
+
+    const rendered = renderWithTheme(<DatabaseBackups disabled={false} />);
+    expect(
+      rendered.container.getElementsByClassName('MuiDateCalendar-root')
+    ).toBeDefined();
+  });
+
+  it('should render a time picker when it is a default database', async () => {
     const mockDatabase = databaseFactory.build({
       platform: 'rdbms-default',
     });