Allow access to db backups page while project is restoring, but disable restore button if project is restoring (#19126)

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 && (

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)}
                   />
                 )

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)