feat(studio): give action shortcut for persistent branches deletion (#39786)

* feat(studio): give action shortcut for persistent branches deletion

* chore: refactor dedup trigger

* chore: no-biome

apps/studio/components/interfaces/BranchManagement/Overview.tsx

@@ -180,9 +180,14 @@ const PreviewBranchActions = ({
 
   const { data } = useBranchQuery({ projectRef, branchRef })
   const isBranchActiveHealthy = data?.status === 'ACTIVE_HEALTHY'
+  const isPersistentBranch = branch.persistent
 
   const [showConfirmResetModal, setShowConfirmResetModal] = useState(false)
   const [showBranchModeSwitch, setShowBranchModeSwitch] = useState(false)
+  const [
+    showPersistentBranchDeleteConfirmationModal,
+    setShowPersistentBranchDeleteConfirmationModal,
+  ] = useState(false)
   const [showEditBranchModal, setShowEditBranchModal] = useState(false)
 
   const { mutate: resetBranch, isLoading: isResetting } = useBranchResetMutation({
@@ -210,6 +215,15 @@ const PreviewBranchActions = ({
     updateBranch({ branchRef, projectRef, persistent: !branch.persistent })
   }
 
+  const onDeleteBranch = (e: Event | React.MouseEvent<HTMLDivElement>) => {
+    if (isPersistentBranch) {
+      setShowPersistentBranchDeleteConfirmationModal(true)
+    } else {
+      e.stopPropagation()
+      onSelectDeleteBranch()
+    }
+  }
+
   return (
     <>
       <DropdownMenu>
@@ -307,14 +321,8 @@ const PreviewBranchActions = ({
           <DropdownMenuItemTooltip
             className="gap-x-2"
             disabled={!canDeleteBranches}
-            onSelect={(e) => {
-              e.stopPropagation()
-              onSelectDeleteBranch()
-            }}
-            onClick={(e) => {
-              e.stopPropagation()
-              onSelectDeleteBranch()
-            }}
+            onSelect={onDeleteBranch}
+            onClick={onDeleteBranch}
             tooltip={{
               content: {
                 side: 'left',
@@ -373,6 +381,20 @@ const PreviewBranchActions = ({
         </p>
       </ConfirmationModal>
 
+      <ConfirmationModal
+        variant="warning"
+        visible={showPersistentBranchDeleteConfirmationModal}
+        confirmLabel={'Switch to preview'}
+        title="Branch must be switched to preview before deletion"
+        loading={isUpdatingBranch}
+        onCancel={() => setShowPersistentBranchDeleteConfirmationModal(false)}
+        onConfirm={onTogglePersistent}
+      >
+        <p className="text-sm text-foreground-light">
+          You must switch the branch "{branch.name}" to preview before deleting it.
+        </p>
+      </ConfirmationModal>
+
       <EditBranchModal
         branch={branch}
         visible={showEditBranchModal}