Add confirm dialog before merge (vibe-kanban) (#65)

* The confirmation dialog has been added before the merge operation. Now when users click the "Merge" button, they'll first see a confirmation dialog asking if they're sure they want to merge the changes. The dialog includes:

1. A clear title "Confirm Merge"
2. A description explaining what will happen
3. An informational box highlighting that the action cannot be undone
4. Cancel and Confirm buttons

The merge flow now works as follows:
1. User clicks "Merge" button
2. Check for uncommitted changes (if any, show warning dialog)
3. If no uncommitted changes, show confirmation dialog
4. User confirms → merge proceeds
5. User cancels → dialog closes, no merge

* lint
This commit is contained in:
Louis Knight-Webb
2025-07-03 22:39:52 +01:00
committed by GitHub
parent e688fe0a6b
commit 29c5e51875

View File

@@ -130,6 +130,7 @@ export function TaskDetailsToolbar({
const [rebasing, setRebasing] = useState(false);
const [rebaseSuccess, setRebaseSuccess] = useState(false);
const [showUncommittedWarning, setShowUncommittedWarning] = useState(false);
const [showMergeConfirmDialog, setShowMergeConfirmDialog] = useState(false);
const [creatingPR, setCreatingPR] = useState(false);
const [showCreatePRDialog, setShowCreatePRDialog] = useState(false);
const [prTitle, setPrTitle] = useState('');
@@ -186,7 +187,8 @@ export function TaskDetailsToolbar({
return;
}
await performMerge();
// Show confirmation dialog for regular merge
setShowMergeConfirmDialog(true);
};
const performMerge = async () => {
@@ -228,6 +230,15 @@ export function TaskDetailsToolbar({
setShowUncommittedWarning(false);
};
const handleConfirmMerge = async () => {
setShowMergeConfirmDialog(false);
await performMerge();
};
const handleCancelMerge = () => {
setShowMergeConfirmDialog(false);
};
const handleRebaseClick = async () => {
if (!projectId || !task.id || !selectedAttempt?.id) return;
@@ -923,6 +934,43 @@ export function TaskDetailsToolbar({
)}
</div>
{/* Merge Confirmation Dialog */}
<Dialog
open={showMergeConfirmDialog}
onOpenChange={() => handleCancelMerge()}
>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm Merge</DialogTitle>
<DialogDescription>
Are you sure you want to merge the changes from this task branch
into {branchStatus?.base_branch_name || 'the base branch'}?
</DialogDescription>
</DialogHeader>
<div className="py-4">
<div className="bg-blue-50 border border-blue-200 rounded-md p-3">
<p className="text-sm text-blue-800">
This will merge all committed changes from the task branch into{' '}
{branchStatus?.base_branch_name || 'the base branch'}. This
action cannot be undone.
</p>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={handleCancelMerge}>
Cancel
</Button>
<Button
onClick={handleConfirmMerge}
disabled={merging}
className="bg-green-600 hover:bg-green-700"
>
{merging ? 'Merging...' : 'Confirm Merge'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{/* Uncommitted Changes Warning Dialog */}
<Dialog
open={showUncommittedWarning}