Merge pull request #10374 from gitbutlerapp/move-branch

Move branches round and around and around and around

Author: estib-vega

apps/desktop/src/components/BranchCard.svelte

@@ -11,11 +11,12 @@
 	import PrNumberUpdater from '$components/PrNumberUpdater.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import CodegenBadge from '$components/codegen/CodegenBadge.svelte';
+	import { BranchDropData } from '$lib/branches/dropHandler';
 	import { CLAUDE_CODE_SERVICE } from '$lib/codegen/claude';
 	import { CodegenRuleDropData, CodegenRuleDropHandler } from '$lib/codegen/dropzone';
 	import { useGoToCodegenPage } from '$lib/codegen/redirect.svelte';
 	import { MoveCommitDzHandler } from '$lib/commits/dropHandler';
-	import { draggableChips } from '$lib/dragging/draggable';
+	import { draggableBranch, draggableChips } from '$lib/dragging/draggable';
 	import { DROPZONE_REGISTRY } from '$lib/dragging/registry';
 	import { ReorderCommitDzHandler } from '$lib/dragging/stackingReorderDropzoneManager';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
@@ -76,6 +77,7 @@
 		isConflicted: boolean;
 		contextMenu?: typeof BranchHeaderContextMenu;
 		dropzones: DropzoneHandler[];
+		numberOfCommits: number;
 		onclick: () => void;
 		menu?: Snippet<[{ rightClickTrigger: HTMLElement }]>;
 		buttons?: Snippet;
@@ -151,6 +153,19 @@
 	class:draft={args.type === 'draft-branch'}
 	data-series-name={branchName}
 	data-testid={TestId.BranchCard}
+	data-remove-from-panning
+	use:draggableBranch={{
+		disabled: args.type !== 'stack-branch' || args.isConflicted,
+		label: branchName,
+		pushStatus: args.type === 'stack-branch' ? args.pushStatus : undefined,
+		viewportId: 'board-viewport',
+		data:
+			args.type === 'stack-branch' && args.stackId
+				? new BranchDropData(args.stackId, branchName, args.isConflicted, args.numberOfCommits)
+				: undefined,
+		dropzoneRegistry,
+		dragStateService
+	}}
 >
 	{#if args.type === 'stack-branch'}
 		{@const moveHandler = args.stackId
@@ -174,13 +189,11 @@
 		>
 			{#snippet overlay({ hovered, activated, handler })}
 				{@const label =
-					handler instanceof MoveCommitDzHandler
+					handler instanceof MoveCommitDzHandler || handler instanceof CodegenRuleDropHandler
 						? 'Move here'
 						: handler instanceof ReorderCommitDzHandler
 							? 'Reorder here'
-							: handler instanceof CodegenRuleDropHandler
-								? 'Move here'
-								: 'Start commit'}
+							: 'Start commit'}
 				<CardOverlay {hovered} {activated} {label} />
 			{/snippet}
 

apps/desktop/src/components/BranchList.svelte

@@ -6,9 +6,12 @@
 	import BranchCommitList from '$components/BranchCommitList.svelte';
 	import BranchHeaderContextMenu from '$components/BranchHeaderContextMenu.svelte';
 	import ConflictResolutionConfirmModal from '$components/ConflictResolutionConfirmModal.svelte';
+	import Dropzone from '$components/Dropzone.svelte';
+	import LineOverlay from '$components/LineOverlay.svelte';
 	import PushButton from '$components/PushButton.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import { getColorFromCommitState, getIconFromCommitState } from '$components/lib';
+	import { MoveBranchDzHandler } from '$lib/branches/dropHandler';
 	import { REORDER_DROPZONE_FACTORY } from '$lib/dragging/stackingReorderDropzoneManager';
 	import { editPatch } from '$lib/editMode/editPatchUtils';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
@@ -124,6 +127,24 @@
 	const canPublishPR = $derived(forge.current.authenticated);
 </script>
 
+{#snippet branchInsertionDz(branchName: string)}
+	{#if !isCommitting && stackId}
+		{@const moveBranchHandler = new MoveBranchDzHandler(
+			stackService,
+			projectId,
+			stackId,
+			branchName
+		)}
+		<Dropzone handlers={[moveBranchHandler]}>
+			{#snippet overlay({ hovered, activated })}
+				<div data-testid={TestId.BranchListInsertionDropzone}>
+					<LineOverlay advertize {hovered} {activated} />
+				</div>
+			{/snippet}
+		</Dropzone>
+	{/if}
+{/snippet}
+
 <div class="branches-wrapper">
 	{#each branches as branch, i}
 		{@const branchName = branch.name}
@@ -165,6 +186,7 @@
 				{@const lastUpdatedAt = branchDetails.lastUpdatedAt}
 				{@const reviewId = branch.reviewId || undefined}
 				{@const prNumber = branch.prNumber || undefined}
+				{@render branchInsertionDz(branchName)}
 				<BranchCard
 					type="stack-branch"
 					{projectId}
@@ -182,6 +204,7 @@
 					{lastUpdatedAt}
 					{reviewId}
 					{prNumber}
+					numberOfCommits={localAndRemoteCommits.length}
 					dropzones={[stackingReorderDropzoneManager.top(branchName)]}
 					trackingBranch={branch.remoteTrackingBranch ?? undefined}
 					readonly={!!branch.remoteTrackingBranch}

apps/desktop/src/components/LineOverlay.svelte

@@ -4,15 +4,17 @@
 	interface Props {
 		hovered: boolean;
 		activated: boolean;
+		advertize?: boolean;
 		yOffsetPx?: number;
 	}
 
-	const { hovered, activated, yOffsetPx = 0 }: Props = $props();
+	const { hovered, activated, advertize, yOffsetPx = 0 }: Props = $props();
 </script>
 
 <div
 	class="dropzone-target container"
 	class:activated
+	class:advertize
 	class:hovered
 	style:--y-offset="{pxToRem(yOffsetPx)}rem"
 >
@@ -35,6 +37,7 @@
 
 		height: var(--dropzone-height);
 		margin-top: calc(var(--dropzone-overlap) * -1);
+		transition: background-color 0.3s ease-in-out;
 
 		/* It is very important that all children are pointer-events: none */
 		/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */
@@ -51,6 +54,12 @@
 				background-color: var(--clr-theme-pop-element);
 			}
 		}
+
+		&:not(.hovered).advertize {
+			& .indicator {
+				background-color: var(--clr-theme-pop-soft-hover);
+			}
+		}
 	}
 
 	.indicator {

apps/desktop/src/components/SnapshotCard.svelte

@@ -113,6 +113,8 @@
 				return { text: 'Update commit message', icon: 'edit' };
 			case 'MoveCommit':
 				return { text: 'Move commit', icon: 'move-commit' };
+			case 'MoveBranch':
+				return { text: 'Move branch', icon: 'move-commit' };
 			case 'ReorderCommit':
 				return { text: 'Reorder commit', icon: 'move-commit' };
 			case 'InsertBlankCommit':

apps/desktop/src/lib/branches/dropHandler.ts

@@ -0,0 +1,46 @@
+import type { DropzoneHandler } from '$lib/dragging/handler';
+import type { StackService } from '$lib/stacks/stackService.svelte';
+
+export class BranchDropData {
+	constructor(
+		readonly stackId: string,
+		readonly branchName: string,
+		readonly hasConflicts: boolean,
+		readonly numberOfCommits: number
+	) {}
+
+	print(): string {
+		return `BranchDropData(${this.stackId}, ${this.branchName}, ${this.hasConflicts})`;
+	}
+}
+
+export class MoveBranchDzHandler implements DropzoneHandler {
+	constructor(
+		private readonly stackService: StackService,
+		private readonly projectId: string,
+		private readonly stackId: string,
+		private readonly branchName: string
+	) {}
+
+	print(): string {
+		return `MoveBranchDzHandler(${this.projectId}, ${this.stackId}, ${this.branchName})`;
+	}
+
+	accepts(data: unknown): boolean {
+		return (
+			data instanceof BranchDropData &&
+			data.stackId !== this.stackId &&
+			!data.hasConflicts &&
+			data.numberOfCommits > 0 // TODO: If trying to move an empty branch, we should just delete the reference and recreate it.
+		);
+	}
+	ondrop(data: BranchDropData): void {
+		this.stackService.moveBranch({
+			projectId: this.projectId,
+			sourceStackId: data.stackId,
+			subjectBranchName: data.branchName,
+			targetBranchName: this.branchName,
+			targetStackId: this.stackId
+		});
+	}
+}

apps/desktop/src/lib/dragging/draggable.ts

@@ -5,12 +5,13 @@ import { getFileIcon } from '@gitbutler/ui/components/file/getFileIcon';
 import iconsJson from '@gitbutler/ui/data/icons.json';
 import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 import type { DropzoneRegistry } from '$lib/dragging/registry';
+import type { PushStatus } from '$lib/stacks/stack';
 import type { DragStateService } from '@gitbutler/ui/drag/dragStateService.svelte';
 
 // Added to element being dragged (not the clone that follows the cursor).
 const DRAGGING_CLASS = 'dragging';
 
-type chipType = 'file' | 'hunk' | 'ai-session';
+type chipType = 'file' | 'hunk' | 'ai-session' | 'branch';
 
 export type DraggableConfig = {
 	readonly selector?: string;
@@ -26,6 +27,7 @@ export type DraggableConfig = {
 	readonly chipType?: chipType;
 	readonly dropzoneRegistry: DropzoneRegistry;
 	readonly dragStateService?: DragStateService;
+	readonly pushStatus?: PushStatus;
 };
 
 function createElement<K extends keyof HTMLElementTagNameMap>(
@@ -241,6 +243,26 @@ function setupDragHandlers(
 	};
 }
 
+/////////////////////////////
+//// BRANCH DRAGGABLE ///////
+/////////////////////////////
+
+function createBranchElement(label: string | undefined): HTMLDivElement {
+	const cardEl = createElement('div', ['draggable-branch-card', 'text-15', 'text-bold'], label);
+
+	return cardEl;
+}
+
+export function draggableBranch(node: HTMLElement, initialOpts: DraggableConfig) {
+	function createClone(opts: DraggableConfig) {
+		if (opts.disabled) return;
+		return createBranchElement(opts.label);
+	}
+	return setupDragHandlers(node, initialOpts, createClone, {
+		handlerWidth: false
+	});
+}
+
 /////////////////////////////
 //// COMMIT DRAGGABLE V3 ////
 /////////////////////////////

apps/desktop/src/lib/dragging/draggables.ts

@@ -1,4 +1,5 @@
 import { key, type SelectionId } from '$lib/selection/key';
+import type { BranchDropData } from '$lib/branches/dropHandler';
 import type { CodegenRuleDropData } from '$lib/codegen/dropzone';
 import type { CommitDropData } from '$lib/commits/dropHandler';
 import type { TreeChange } from '$lib/hunks/change';
@@ -65,4 +66,9 @@ export class ChangeDropData {
 	}
 }
 
-export type DropData = CommitDropData | ChangeDropData | HunkDropDataV3 | CodegenRuleDropData;
+export type DropData =
+	| CommitDropData
+	| ChangeDropData
+	| HunkDropDataV3
+	| CodegenRuleDropData
+	| BranchDropData;

apps/desktop/src/lib/history/types.ts

@@ -25,6 +25,7 @@ export type Operation =
 	| 'SquashCommit'
 	| 'UpdateCommitMessage'
 	| 'MoveCommit'
+	| 'MoveBranch'
 	| 'RestoreFromSnapshot'
 	| 'ReorderCommit'
 	| 'InsertBlankCommit'

apps/desktop/src/lib/stacks/stack.ts

@@ -334,3 +334,7 @@ export type InteractiveIntegrationStep =
 				message: string | null;
 			};
 	  };
+
+export type MoveBranchResult = {
+	deletedStacks: string[];
+};

apps/desktop/src/lib/stacks/stackService.svelte.ts

@@ -41,7 +41,8 @@ import type {
 	StackDetails,
 	CreateRefRequest,
 	InteractiveIntegrationStep,
-	CreateBranchFromBranchOutcome
+	CreateBranchFromBranchOutcome,
+	MoveBranchResult
 } from '$lib/stacks/stack';
 import type { ReduxError } from '$lib/state/reduxError';
 
@@ -748,6 +749,10 @@ export class StackService {
 		return this.api.endpoints.moveCommit.mutate;
 	}
 
+	get moveBranch() {
+		return this.api.endpoints.moveBranch.mutate;
+	}
+
 	get integrateUpstreamCommits() {
 		return this.api.endpoints.integrateUpstreamCommits.useMutation();
 	}
@@ -1462,6 +1467,40 @@ function injectEndpoints(api: ClientState['backendApi'], uiState: UiState) {
 					invalidatesItem(ReduxTag.StackDetails, args.targetStackId)
 				]
 			}),
+			moveBranch: build.mutation<
+				MoveBranchResult,
+				{
+					projectId: string;
+					sourceStackId: string;
+					subjectBranchName: string;
+					targetStackId: string;
+					targetBranchName: string;
+				}
+			>({
+				extraOptions: {
+					command: 'move_branch',
+					actionName: 'Move Branch'
+				},
+				query: (args) => args,
+				invalidatesTags: (result, _error, args) => {
+					if (result === undefined) return [];
+
+					if (result.deletedStacks.includes(args.sourceStackId)) {
+						// The source stack was deleted, so we need to invalidate the list of stacks.
+						return [
+							invalidatesList(ReduxTag.Stacks),
+							invalidatesList(ReduxTag.WorktreeChanges), // Moving commits can cause conflicts
+							invalidatesItem(ReduxTag.StackDetails, args.targetStackId)
+						];
+					}
+
+					return [
+						invalidatesList(ReduxTag.WorktreeChanges), // Moving commits can cause conflicts
+						invalidatesItem(ReduxTag.StackDetails, args.sourceStackId),
+						invalidatesItem(ReduxTag.StackDetails, args.targetStackId)
+					];
+				}
+			}),
 			integrateUpstreamCommits: build.mutation<
 				void,
 				{