Adds push-pull to graph

src/plus/webviews/graph/graphWebview.ts

@@ -1741,6 +1741,13 @@ export class GraphWebviewProvider implements WebviewProvider {
 
 		const lastFetched = await this.repository.getLastFetched();
 		const branch = await this.repository.getBranch();
+		let branchState;
+		if (branch != null) {
+			branchState = {
+				...branch.state,
+			};
+			console.log(branchState);
+		}
 
 		return {
 			windowFocused: this.isWindowFocused,
@@ -1749,6 +1756,7 @@ export class GraphWebviewProvider implements WebviewProvider {
 			selectedRepository: this.repository.path,
 			selectedRepositoryVisibility: visibility,
 			branchName: branch?.name,
+			branchState: branchState,
 			lastFetched: new Date(lastFetched),
 			selectedRows: this._selectedRows,
 			subscription: access?.subscription.current,

src/plus/webviews/graph/protocol.ts

@@ -22,6 +22,7 @@ import type {
 } from '@gitkraken/gitkraken-components';
 import type { DateStyle } from '../../../config';
 import type { RepositoryVisibility } from '../../../git/gitProvider';
+import type { GitTrackingState } from '../../../git/models/branch';
 import type { GitGraphRowType } from '../../../git/models/graph';
 import type {
 	GitBranchReference,
@@ -88,6 +89,7 @@ export interface State {
 	selectedRepository?: string;
 	selectedRepositoryVisibility?: RepositoryVisibility;
 	branchName?: string;
+	branchState?: GitTrackingState;
 	lastFetched?: Date;
 	selectedRows?: GraphSelectedRows;
 	subscription?: Subscription;

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

@@ -1089,6 +1089,64 @@ export function GraphWrapper({
 		);
 	};
 
+	const renderFetchAction = () => {
+		const fetchedText = lastFetched && fromNow(new Date(lastFetched));
+
+		let icon = 'sync';
+		let label = 'Fetch';
+		let action = 'command:gitlens.graph.fetch';
+
+		const isBehind = state.branchState && state.branchState.behind > 0;
+		const isAhead = state.branchState && state.branchState.ahead > 0;
+		if (isBehind) {
+			action = 'command:gitlens.graph.pull';
+			icon = 'arrow-down';
+			label = 'Pull';
+		} else if (isAhead) {
+			action = 'command:gitlens.graph.push';
+			icon = 'arrow-up';
+			label = 'Push';
+		}
+
+		return (
+			<a href={action} className="action-button" title={`${label} Repository`}>
+				<span className={`codicon codicon-${icon} action-button__icon`}></span>
+				{label}
+				{fetchedText && <span className="action-button__small">(Last fetched {fetchedText})</span>}
+				{(isAhead || isBehind) && (
+					<span>
+						<span className="pill">
+							{isAhead && (
+								<span
+									title={`Commits ahead by ${state.branchState!.ahead}`}
+									aria-label={`Commits ahead by ${state.branchState!.ahead}`}
+								>
+									{state.branchState!.ahead} <span className="codicon codicon-arrow-up"></span>
+								</span>
+							)}
+							{isBehind && (
+								<span
+									title={`Commits behind by ${state.branchState!.behind}`}
+									aria-label={`Commits behind by ${state.branchState!.behind}`}
+								>
+									{state.branchState!.behind} <span className="codicon codicon-arrow-down"></span>
+								</span>
+							)}
+						</span>
+					</span>
+				)}
+			</a>
+		);
+
+		return (
+			<a href="command:gitlens.graph.fetch" className="action-button" title="Fetch Repository">
+				<span className="codicon codicon-sync action-button__icon"></span>
+				Fetch
+				{fetchedText && <span className="action-button__small">(Last fetched {fetchedText})</span>}
+			</a>
+		);
+	};
+
 	return (
 		<>
 			{renderAlertContent()}
@@ -1129,15 +1187,7 @@ export function GraphWrapper({
 							<span>
 								<span className="codicon codicon-chevron-right"></span>
 							</span>
-							<a href="command:gitlens.graph.fetch" className="action-button" title="Fetch Repository">
-								<span className="codicon codicon-sync action-button__icon"></span>
-								Fetch
-								{lastFetched && (
-									<span className="action-button__small">
-										(Last fetched {fromNow(new Date(lastFetched))})
-									</span>
-								)}
-							</a>
+							{renderFetchAction()}
 						</>
 					)}
 					{!state.debugging && (

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

@@ -139,6 +139,23 @@ button:not([disabled]),
 	}
 }
 
+.pill {
+	display: inline-block;
+	padding: 0.2rem 0.5rem;
+	border-radius: 0.5rem;
+	font-size: 1rem;
+	font-weight: 500;
+	line-height: 1;
+	text-transform: uppercase;
+	color: var(--vscode-foreground);
+	background-color: var(--vscode-editorWidget-background);
+
+	.codicon[class*='codicon-'] {
+		font-size: inherit !important;
+		line-height: inherit !important;
+	}
+}
+
 .badge {
 	font-size: 1rem;
 	font-weight: 700;