From c91166d2d2d995c8ac2eee00d072beadbb0ba07d Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Mon, 13 Apr 2026 14:17:42 +0200
Subject: [PATCH] fix(studio): add backup CLI to PauseFailedState and improve
 encoding guidance

- Add LogicalBackupCliInstructions to PauseFailedState (mirrors RestoreFailedState)
- Add single quote and percent sign to percent-encoding guidance (both break single-quoted shell commands or URI parsing)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../layouts/ProjectLayout/LogicalBackupCliInstructions.tsx  | 6 ++++--
 .../components/layouts/ProjectLayout/PauseFailedState.tsx   | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/layouts/ProjectLayout/LogicalBackupCliInstructions.tsx b/apps/studio/components/layouts/ProjectLayout/LogicalBackupCliInstructions.tsx
index 25295f6e2b3..41dac880bba 100644
--- a/apps/studio/components/layouts/ProjectLayout/LogicalBackupCliInstructions.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LogicalBackupCliInstructions.tsx
@@ -81,8 +81,10 @@ export const LogicalBackupCliInstructions = ({
         <p className="text-sm text-foreground-light mt-1">
           Use your direct connection string (replace {DB_PASSWORD_PLACEHOLDER} with your database
           password). If your password contains special characters such as <code>@</code>,{' '}
-          <code>#</code>, or <code>:</code>, percent-encode them first (e.g. <code>@</code> →{' '}
-          <code>%40</code>).{' '}
+          <code>#</code>, <code>:</code>, or <code>'</code>, percent-encode them first (e.g.{' '}
+          <code>@</code> → <code>%40</code>, <code>'</code> → <code>%27</code>). If your password
+          contains <code>%</code>, encode it as <code>%25</code> before encoding any other
+          characters.{' '}
           <InlineLink href={`${DOCS_URL}/guides/platform/backups`}>Backup documentation</InlineLink>
           .
         </p>
diff --git a/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx b/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx
index d5317135612..f459fd15e93 100644
--- a/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react'
 import { Button, CriticalIcon, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
 
 import { DeleteProjectModal } from '@/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectModal'
+import { LogicalBackupCliInstructions } from '@/components/layouts/ProjectLayout/LogicalBackupCliInstructions'
 import { SupportLink } from '@/components/interfaces/Support/SupportLink'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
@@ -67,6 +68,10 @@ export const PauseFailedState = () => {
               </div>
             </div>
 
+            <div className="border-t border-overlay px-8 py-4">
+              <LogicalBackupCliInstructions />
+            </div>
+
             <div className="border-t border-overlay flex items-center justify-end gap-x-2 py-4 px-8">
               <Button asChild type="default">
                 <SupportLink