From ee75aae0f873269c27388b39fe5015189acdfe04 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 22 Nov 2023 14:29:49 +0800
Subject: [PATCH] Allow access to db backups page while project is restoring,
 but disable restore button if project is restoring (#19126)

---
 .../interfaces/Database/Backups/BackupItem.tsx       |  9 +++++++--
 .../interfaces/Database/Backups/BackupsList.tsx      |  3 +++
 .../layouts/ProjectLayout/ProjectLayout.tsx          | 12 ++++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx b/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
index caf9f87166b..603add9ec2e 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
@@ -8,12 +8,13 @@ import { useCheckPermissions } from 'hooks'
 
 interface BackupItemProps {
   index: number
+  isHealthy: boolean
   projectRef: string
   backup: DatabaseBackup
   onSelectBackup: () => void
 }
 
-const BackupItem = ({ index, backup, projectRef, onSelectBackup }: BackupItemProps) => {
+const BackupItem = ({ index, isHealthy, backup, projectRef, onSelectBackup }: BackupItemProps) => {
   const canTriggerScheduledBackups = useCheckPermissions(
     PermissionAction.INFRA_EXECUTE,
     'queue_job.restore.prepare'
@@ -36,7 +37,11 @@ const BackupItem = ({ index, backup, projectRef, onSelectBackup }: BackupItemPro
     if (backup.status === 'COMPLETED')
       return (
         <div className="flex space-x-4">
-          <Button type="default" disabled={!canTriggerScheduledBackups} onClick={onSelectBackup}>
+          <Button
+            type="default"
+            disabled={!isHealthy || !canTriggerScheduledBackups}
+            onClick={onSelectBackup}
+          >
             Restore
           </Button>
           {!backup.isPhysicalBackup && (
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
index 8f2991d3a54..77e20aca631 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
@@ -24,8 +24,10 @@ const BackupsList = () => {
   const router = useRouter()
   const queryClient = useQueryClient()
   const organization = useSelectedOrganization()
+
   const { project: selectedProject } = useProjectContext()
   const projectRef = selectedProject?.ref || 'default'
+  const isHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY
 
   const [selectedBackup, setSelectedBackup] = useState<DatabaseBackup>()
 
@@ -96,6 +98,7 @@ const BackupsList = () => {
                     backup={x}
                     projectRef={projectRef}
                     index={i}
+                    isHealthy={isHealthy}
                     onSelectBackup={() => setSelectedBackup(x)}
                   />
                 )
diff --git a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index 5fbb858ae10..0d0feb67151 100644
--- a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -30,7 +30,10 @@ const routesToIgnoreProjectDetailsRequest = [
   '/project/[ref]/settings/infrastructure',
 ]
 
-const routesToIgnoreDBConnection = ['/project/[ref]/branches']
+const routesToIgnoreDBConnection = [
+  '/project/[ref]/branches',
+  '/project/[ref]/database/backups/scheduled',
+]
 
 const routesToIgnorePostgrestConnection = [
   '/project/[ref]/reports',
@@ -165,10 +168,11 @@ const ContentWrapper = ({ isLoading, children }: ContentWrapperProps) => {
   const router = useRouter()
   const selectedProject = useSelectedProject()
 
+  const isSettingsPages = router.pathname.includes('/project/[ref]/settings')
+  const isVaultPage = router.pathname === '/project/[ref]/settings/vault'
+
   const requiresDbConnection: boolean =
-    (!router.pathname.includes('/project/[ref]/settings') &&
-      !routesToIgnoreDBConnection.includes(router.pathname)) ||
-    router.pathname === '/project/[ref]/settings/vault'
+    (!isSettingsPages && !routesToIgnoreDBConnection.includes(router.pathname)) || isVaultPage
   const requiresPostgrestConnection = !routesToIgnorePostgrestConnection.includes(router.pathname)
   const requiresProjectDetails = !routesToIgnoreProjectDetailsRequest.includes(router.pathname)