feat: [UIE-9381] - Add region select to Database Backups tab

packages/api-v4/.changeset/pr-13097-changed-1763149227691.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Update database restoreWithBackup data to include region ([#13097](https://github.com/linode/manager/pull/13097))

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

@@ -17,10 +17,10 @@ import type {
   CreateDatabasePayload,
   Database,
   DatabaseBackup,
+  DatabaseBackupsPayload,
   DatabaseCredentials,
   DatabaseEngine,
   DatabaseEngineConfig,
-  DatabaseFork,
   DatabaseInstance,
   DatabaseType,
   Engine,
@@ -267,11 +267,14 @@ export const legacyRestoreWithBackup = (
  *
  * Fully restore a backup to the cluster
  */
-export const restoreWithBackup = (engine: Engine, fork: DatabaseFork) =>
+export const restoreWithBackup = (
+  engine: Engine,
+  data: DatabaseBackupsPayload,
+) =>
   Request<Database>(
     setURL(`${API_ROOT}/databases/${encodeURIComponent(engine)}/instances`),
     setMethod('POST'),
-    setData({ fork }),
+    setData(data),
   );
 
 /**

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

@@ -79,6 +79,11 @@ export interface DatabaseFork {
   source: number;
 }
 
+export interface DatabaseBackupsPayload {
+  fork: DatabaseFork;
+  region?: string;
+}
+
 export interface DatabaseCredentials {
   password: string;
   username: string;

packages/manager/.changeset/pr-13097-added-1763149132736.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Region select to Database Backups tab ([#13097](https://github.com/linode/manager/pull/13097))

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

@@ -1,4 +1,4 @@
-import { Typography } from '@linode/ui';
+import { Stack, Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { DateCalendar } from '@mui/x-date-pickers';
 
@@ -36,11 +36,33 @@ export const StyledDateCalendar = styled(DateCalendar, {
   '.MuiYearCalendar-root': {
     width: '260px',
   },
-  marginLeft: '0px',
+  height: 'auto',
+  margin: 0,
+  marginRight: theme.spacingFunction(40),
   width: '260px',
 }));
 
 export const StyledTypography = styled(Typography)(() => ({
   lineHeight: '20px',
   marginTop: '4px',
 }));
+
+export const StyledDateTimeStack = styled(Stack, {
+  label: 'StyledDateTimeStack',
+})(({ theme }) => ({
+  flexDirection: 'row',
+  [theme.breakpoints.down('md')]: {
+    flexDirection: 'column',
+    marginTop: theme.spacingFunction(24),
+    marginBottom: theme.spacingFunction(16),
+  },
+}));
+
+export const StyledRegionStack = styled(Stack, { label: 'StyledRegionStack' })(
+  ({ theme }) => ({
+    [theme.breakpoints.down('md')]: {
+      marginTop: theme.spacingFunction(24),
+      marginBottom: theme.spacingFunction(16),
+    },
+  })
+);