diff --git a/src/plus/webviews/graph/graphWebview.ts b/src/plus/webviews/graph/graphWebview.ts index 23ee81c..86ff4d4 100644 --- a/src/plus/webviews/graph/graphWebview.ts +++ b/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, diff --git a/src/plus/webviews/graph/protocol.ts b/src/plus/webviews/graph/protocol.ts index f19231c..6e2f1b8 100644 --- a/src/plus/webviews/graph/protocol.ts +++ b/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; diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx index 8141ba5..e2cbf54 100644 --- a/src/webviews/apps/plus/graph/GraphWrapper.tsx +++ b/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 ( + + + {label} + {fetchedText && (Last fetched {fetchedText})} + {(isAhead || isBehind) && ( + + + {isAhead && ( + + {state.branchState!.ahead} + + )} + {isBehind && ( + + {state.branchState!.behind} + + )} + + + )} + + ); + + return ( + + + Fetch + {fetchedText && (Last fetched {fetchedText})} + + ); + }; + return ( <> {renderAlertContent()} @@ -1129,15 +1187,7 @@ export function GraphWrapper({ - - - Fetch - {lastFetched && ( - - (Last fetched {fromNow(new Date(lastFetched))}) - - )} - + {renderFetchAction()} )} {!state.debugging && ( diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss index 4a97a40..fc0836d 100644 --- a/src/webviews/apps/plus/graph/graph.scss +++ b/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;