diff --git a/apps/studio/components/interfaces/BranchManagement/Overview.tsx b/apps/studio/components/interfaces/BranchManagement/Overview.tsx index 666cf7445c6..4f9f6f047b9 100644 --- a/apps/studio/components/interfaces/BranchManagement/Overview.tsx +++ b/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) => { + if (isPersistentBranch) { + setShowPersistentBranchDeleteConfirmationModal(true) + } else { + e.stopPropagation() + onSelectDeleteBranch() + } + } + return ( <> @@ -307,14 +321,8 @@ const PreviewBranchActions = ({ { - e.stopPropagation() - onSelectDeleteBranch() - }} - onClick={(e) => { - e.stopPropagation() - onSelectDeleteBranch() - }} + onSelect={onDeleteBranch} + onClick={onDeleteBranch} tooltip={{ content: { side: 'left', @@ -373,6 +381,20 @@ const PreviewBranchActions = ({

+ setShowPersistentBranchDeleteConfirmationModal(false)} + onConfirm={onTogglePersistent} + > +

+ You must switch the branch "{branch.name}" to preview before deleting it. +

+
+