Adds actions in Commit Graph for paused git operations

- moves GlMergeConflictWarning to shared
- fixes header layout and adds ellipsis for repo name

Author: d13

src/constants.commands.ts

@@ -815,7 +815,11 @@ type GraphWebviewCommands = `graph.${
 	| 'openWorktreeInNewWindow'
 	| 'copyWorkingChangesToWorktree'
 	| 'generateCommitMessage'
-	| 'compareSelectedCommits.multi'}`;
+	| 'compareSelectedCommits.multi'
+	| 'skipPausedOperation'
+	| 'continuePausedOperation'
+	| 'abortPausedOperation'
+	| 'openRebaseEditor'}`;
 
 type TimelineWebviewCommands = `timeline.${'refresh' | 'split'}`;
 

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -93,6 +93,7 @@ import type {
 import type { DateTimeFormat } from '../../shared/date';
 import { formatDate, fromNow } from '../../shared/date';
 import { emitTelemetrySentEvent } from '../../shared/telemetry';
+import { GlMergeConflictWarning } from '../shared/components/merge-rebase-status.react';
 import { GitActionsButtons } from './actions/gitActionsButtons';
 import { GlGraphHover } from './hover/graphHover.react';
 import type { GraphMinimapDaySelectedEventDetail } from './minimap/minimap';
@@ -1138,7 +1139,9 @@ export function GraphWrapper({
 								disabled={repos.length < 2}
 								onClick={() => handleChooseRepository()}
 							>
-								{repo?.formattedName ?? 'none selected'}
+								<span className="action-button__truncated">
+									{repo?.formattedName ?? 'none selected'}
+								</span>
 								{repos.length > 1 && (
 									<CodeIcon className="action-button__more" icon="chevron-down" aria-hidden="true" />
 								)}
@@ -1298,6 +1301,21 @@ export function GraphWrapper({
 						)}
 					</div>
 				</div>
+				{allowed &&
+					workingTreeStats != null &&
+					(workingTreeStats.hasConflicts || workingTreeStats.pausedOpStatus) && (
+						<div className="merge-conflict-warning">
+							<GlMergeConflictWarning
+								className="merge-conflict-warning__content"
+								conflicts={workingTreeStats.hasConflicts}
+								pausedOpStatus={workingTreeStats.pausedOpStatus}
+								skipCommand="gitlens.graph.skipPausedOperation"
+								continueCommand="gitlens.graph.continuePausedOperation"
+								abortCommand="gitlens.graph.abortPausedOperation"
+								openEditorCommand="gitlens.graph.openRebaseEditor"
+							></GlMergeConflictWarning>
+						</div>
+					)}
 				{allowed && (
 					<div className="titlebar__row">
 						<div className="titlebar__group">

src/webviews/apps/plus/graph/graph.scss

@@ -883,7 +883,7 @@ button:not([disabled]),
 			display: grid;
 			grid-auto-flow: column;
 			justify-content: start;
-			grid-template-columns: minmax(min-content, 1fr) min-content;
+			grid-template-columns: 1fr min-content;
 		}
 	}
 
@@ -893,6 +893,10 @@ button:not([disabled]),
 
 	&__row--wrap &__group {
 		white-space: nowrap;
+
+		&:nth-child(odd) {
+			min-width: 0;
+		}
 	}
 
 	&__debugging {
@@ -1310,3 +1314,19 @@ sl-select:hover::part(combobox),
 sl-select:focus::part(combobox) {
 	background-color: var(--color-graph-actionbar-selectedBackground);
 }
+
+.merge-conflict-warning {
+	flex: 0 0 100%;
+	min-width: 0;
+
+	// &__content {
+	// 	display: block;
+	// 	width: 100%;
+	// 	min-width: 0;
+	// 	max-width: fit-content;
+	// }
+
+	&__content::part(base) {
+		max-width: fit-content;
+	}
+}

src/webviews/apps/plus/home/components/active-work.ts

@@ -26,7 +26,7 @@ import '../../../shared/components/overlays/tooltip';
 import '../../../shared/components/pills/tracking';
 import '../../../shared/components/rich/issue-icon';
 import '../../../shared/components/rich/pr-icon';
-import './merge-rebase-status';
+import '../../shared/components/merge-rebase-status';
 
 export const activeWorkTagName = 'gl-active-work';
 

src/webviews/apps/plus/shared/components/merge-rebase-status.react.ts

@@ -0,0 +1,5 @@
+import { reactWrapper } from '../../../shared/components/helpers/react-wrapper';
+import { GlMergeConflictWarning as GlMergeConflictWarningWC } from './merge-rebase-status';
+
+export interface GlMergeConflictWarning extends GlMergeConflictWarningWC {}
+export const GlMergeConflictWarning = reactWrapper(GlMergeConflictWarningWC, { tagName: 'gl-merge-rebase-status' });

src/webviews/apps/plus/home/components/merge-rebase-status.ts renamed to src/webviews/apps/plus/shared/components/merge-rebase-status.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import type { Commands } from '../../../../../constants.commands';
 import type { GitPausedOperationStatus } from '../../../../../git/models/pausedOperationStatus';
 import { pausedOperationStatusStringsByType } from '../../../../../git/utils/pausedOperationStatus.utils';
 import { createCommandLink } from '../../../../../system/commands';
@@ -14,9 +15,11 @@ export class GlMergeConflictWarning extends LitElement {
 	static override styles = [
 		css`
 			.status {
+				box-sizing: border-box;
 				display: flex;
 				align-items: center;
 				gap: 0.6rem;
+				width: 100%;
 				max-width: 100%;
 				margin-block: 0;
 				background-color: var(--vscode-gitlens-decorations\\.statusMergingOrRebasingForegroundColor);
@@ -31,14 +34,16 @@ export class GlMergeConflictWarning extends LitElement {
 			}
 
 			.label {
-				flex-grow: 1;
+				flex: 1;
+				min-width: 0;
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
 			}
 
 			.icon,
-			.steps {
+			.steps,
+			.actions {
 				flex: none;
 			}
 
@@ -57,37 +62,41 @@ export class GlMergeConflictWarning extends LitElement {
 	@property({ type: Object })
 	pausedOpStatus?: GitPausedOperationStatus;
 
+	@property()
+	skipCommand = 'gitlens.home.skipPausedOperation';
+
+	@property()
+	continueCommand = 'gitlens.home.continuePausedOperation';
+
+	@property()
+	abortCommand = 'gitlens.home.abortPausedOperation';
+
+	@property()
+	openEditorCommand = 'gitlens.home.openRebaseEditor';
+
 	private get onSkipUrl() {
-		return createCommandLink('gitlens.home.skipPausedOperation', {
-			operation: this.pausedOpStatus,
-		});
+		return createCommandLink(this.skipCommand as Commands, this.pausedOpStatus);
 	}
 
 	private get onContinueUrl() {
-		return createCommandLink('gitlens.home.continuePausedOperation', {
-			operation: this.pausedOpStatus,
-		});
+		return createCommandLink(this.continueCommand as Commands, this.pausedOpStatus);
 	}
 
 	private get onAbortUrl() {
-		return createCommandLink('gitlens.home.abortPausedOperation', {
-			operation: this.pausedOpStatus,
-		});
+		return createCommandLink(this.abortCommand as Commands, this.pausedOpStatus);
 	}
 
 	private get onOpenEditorUrl() {
-		return createCommandLink('gitlens.home.openRebaseEditor', {
-			operation: this.pausedOpStatus,
-		});
+		return createCommandLink(this.openEditorCommand as Commands, this.pausedOpStatus);
 	}
 
 	override render() {
 		if (this.pausedOpStatus == null) return nothing;
 
 		return html`
-			<span class="status">
+			<span class="status" part="base">
 				<code-icon icon="warning" class="icon"></code-icon>
-				${this.renderStatus(this.pausedOpStatus)}
+				${this.renderStatus(this.pausedOpStatus)}${this.renderActions()}
 			</span>
 		`;
 	}
@@ -96,15 +105,14 @@ export class GlMergeConflictWarning extends LitElement {
 		if (pausedOpStatus.type !== 'rebase') {
 			const strings = pausedOperationStatusStringsByType[pausedOpStatus.type];
 			return html`<span class="label"
-					>${this.conflicts ? strings.conflicts : strings.label}
-					<code-icon
-						icon="${pausedOpStatus.incoming.refType === 'branch' ? 'git-branch' : 'git-commit'}"
-						class="icon"
-					></code-icon>
-					${getReferenceLabel(pausedOpStatus.incoming, { expand: false, icon: false })}
-					${strings.directionality}
-					${getReferenceLabel(pausedOpStatus.current, { expand: false, icon: false })}</span
-				>${this.renderActions()}`;
+				>${this.conflicts ? strings.conflicts : strings.label}
+				<code-icon
+					icon="${pausedOpStatus.incoming.refType === 'branch' ? 'git-branch' : 'git-commit'}"
+					class="icon"
+				></code-icon>
+				${getReferenceLabel(pausedOpStatus.incoming, { expand: false, icon: false })} ${strings.directionality}
+				${getReferenceLabel(pausedOpStatus.current, { expand: false, icon: false })}</span
+			>`;
 		}
 
 		const started = pausedOpStatus.steps.total > 0;
@@ -124,15 +132,15 @@ export class GlMergeConflictWarning extends LitElement {
 				? html`<span class="steps"
 						>(${pausedOpStatus.steps.current.number}/${pausedOpStatus.steps.total})</span
 				  >`
-				: nothing}${this.renderActions()}`;
+				: nothing}`;
 	}
 
 	private renderActions() {
 		if (this.pausedOpStatus == null) return nothing;
 
 		const status = this.pausedOpStatus.type;
 
-		return html`<action-nav>
+		return html`<action-nav class="actions">
 			${when(
 				status !== 'revert' && !(status === 'rebase' && this.conflicts),
 				() => html`

src/webviews/home/homeWebview.ts

@@ -115,9 +115,6 @@ interface BranchRef {
 	repoPath: string;
 	branchId: string;
 }
-interface GitPausedOperationCommandArgs {
-	operation: GitPausedOperationStatus;
-}
 
 // type AutolinksInfo = Awaited<GetOverviewBranch['autolinks']>;
 type BranchMergeTargetStatusInfo = Awaited<GetOverviewBranch['mergeTarget']>;
@@ -462,8 +459,8 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		});
 	}
 
-	private async abortPausedOperation(pausedOpArgs: GitPausedOperationCommandArgs) {
-		const abortPausedOperation = this.container.git.status(pausedOpArgs.operation.repoPath).abortPausedOperation;
+	private async abortPausedOperation(pausedOpArgs: GitPausedOperationStatus) {
+		const abortPausedOperation = this.container.git.status(pausedOpArgs.repoPath).abortPausedOperation;
 		if (abortPausedOperation == null) return;
 
 		try {
@@ -473,12 +470,10 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		}
 	}
 
-	private async continuePausedOperation(pausedOpArgs: GitPausedOperationCommandArgs) {
-		if (pausedOpArgs.operation.type === 'revert') return;
+	private async continuePausedOperation(pausedOpArgs: GitPausedOperationStatus) {
+		if (pausedOpArgs.type === 'revert') return;
 
-		const continuePausedOperation = this.container.git.status(
-			pausedOpArgs.operation.repoPath,
-		).continuePausedOperation;
+		const continuePausedOperation = this.container.git.status(pausedOpArgs.repoPath).continuePausedOperation;
 		if (continuePausedOperation == null) return;
 
 		try {
@@ -488,10 +483,8 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		}
 	}
 
-	private async skipPausedOperation(pausedOpArgs: GitPausedOperationCommandArgs) {
-		const continuePausedOperation = this.container.git.status(
-			pausedOpArgs.operation.repoPath,
-		).continuePausedOperation;
+	private async skipPausedOperation(pausedOpArgs: GitPausedOperationStatus) {
+		const continuePausedOperation = this.container.git.status(pausedOpArgs.repoPath).continuePausedOperation;
 		if (continuePausedOperation == null) return;
 
 		try {
@@ -501,10 +494,10 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		}
 	}
 
-	private async openRebaseEditor(pausedOpArgs: GitPausedOperationCommandArgs) {
-		if (pausedOpArgs.operation.type !== 'rebase') return;
+	private async openRebaseEditor(pausedOpArgs: GitPausedOperationStatus) {
+		if (pausedOpArgs.type !== 'rebase') return;
 
-		const gitDir = await this.container.git.getGitDir(pausedOpArgs.operation.repoPath);
+		const gitDir = await this.container.git.getGitDir(pausedOpArgs.repoPath);
 		if (gitDir == null) return;
 
 		const rebaseTodoUri = Uri.joinPath(gitDir.uri, 'rebase-merge', 'git-rebase-todo');