Skip to content

Commit e834661

Browse files
eamodioeamodio
committed
Consolidates graph progress indicators
1 parent 0f8a23f commit e834661

File tree

5 files changed

+88
-347
lines changed

5 files changed

+88
-347
lines changed

‎src/webviews/apps/plus/graph/graph-header.ts‎

Lines changed: 86 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ import { emitTelemetrySentEvent } from '../../shared/telemetry';
5050
import { ruleStyles } from '../shared/components/vscode.css';
5151
import { graphStateContext } from './context';
5252
import { actionButton, linkBase } from './styles/graph.css';
53-
import { graphHeaderControlStyles, progressStyles, repoHeaderStyles, titlebarStyles } from './styles/header.css';
53+
import { graphHeaderControlStyles, repoHeaderStyles, titlebarStyles } from './styles/header.css';
5454
import '@shoelace-style/shoelace/dist/components/option/option.js';
5555
import '@shoelace-style/shoelace/dist/components/select/select.js';
5656
import '../../shared/components/button';
@@ -59,6 +59,7 @@ import '../../shared/components/code-icon';
5959
import '../../shared/components/menu/menu-divider';
6060
import '../../shared/components/menu/menu-item';
6161
import '../../shared/components/menu/menu-label';
62+
import '../../shared/components/progress';
6263
import '../../shared/components/overlays/popover';
6364
import '../../shared/components/overlays/tooltip';
6465
import '../../shared/components/radio/radio';
@@ -114,8 +115,11 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
114115
titlebarStyles,
115116
repoHeaderStyles,
116117
graphHeaderControlStyles,
117-
progressStyles,
118118
css`
119+
progress-indicator {
120+
top: 0;
121+
}
122+
119123
.mcp-tooltip::part(body) {
120124
--max-width: 320px;
121125
}
@@ -643,6 +647,7 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
643647

644648
return cache(
645649
html`<header class="titlebar graph-app__header">
650+
<progress-indicator ?active="${this.graphState.isBusy}"></progress-indicator>
646651
<div class="titlebar__row titlebar__row--wrap">
647652
<div class="titlebar__group">
648653
<gl-repo-button-group
@@ -659,84 +664,83 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
659664
>
660665
${when(
661666
this.graphState.allowed && repo,
662-
() => html`
663-
<span><code-icon icon="chevron-right"></code-icon></span>${when(
664-
this.graphState.branchState?.pr,
665-
pr => html`
666-
<gl-popover placement="bottom">
667-
<button slot="anchor" type="button" class="action-button">
668-
<issue-pull-request
669-
type="pr"
670-
identifier=${`#${pr.id}`}
671-
status=${pr.state}
672-
compact
673-
></issue-pull-request>
674-
</button>
675-
<div slot="content">
676-
<issue-pull-request
677-
type="pr"
678-
name=${pr.title}
679-
url=${pr.url}
680-
identifier=${`#${pr.id}`}
681-
status=${pr.state}
682-
.date=${pr.updatedDate}
683-
.dateFormat=${this.graphState.config?.dateFormat}
684-
.dateStyle=${this.graphState.config?.dateStyle}
685-
details
686-
@gl-issue-pull-request-details=${() => {
687-
this.onOpenPullRequest(pr);
688-
}}
689-
>
690-
</issue-pull-request>
691-
</div>
692-
</gl-popover>
693-
`,
694-
)}
695-
<gl-ref-button
696-
href=${createWebviewCommandLink(
697-
'gitlens.graph.switchToAnotherBranch',
698-
this.graphState.webviewId,
699-
this.graphState.webviewInstanceId,
667+
() =>
668+
html`<span><code-icon icon="chevron-right"></code-icon></span>${when(
669+
this.graphState.branchState?.pr,
670+
pr => html`
671+
<gl-popover placement="bottom">
672+
<button slot="anchor" type="button" class="action-button">
673+
<issue-pull-request
674+
type="pr"
675+
identifier=${`#${pr.id}`}
676+
status=${pr.state}
677+
compact
678+
></issue-pull-request>
679+
</button>
680+
<div slot="content">
681+
<issue-pull-request
682+
type="pr"
683+
name=${pr.title}
684+
url=${pr.url}
685+
identifier=${`#${pr.id}`}
686+
status=${pr.state}
687+
.date=${pr.updatedDate}
688+
.dateFormat=${this.graphState.config?.dateFormat}
689+
.dateStyle=${this.graphState.config?.dateStyle}
690+
details
691+
@gl-issue-pull-request-details=${() => {
692+
this.onOpenPullRequest(pr);
693+
}}
694+
>
695+
</issue-pull-request>
696+
</div>
697+
</gl-popover>
698+
`,
700699
)}
701-
icon
702-
.ref=${this.graphState.branch}
703-
?worktree=${this.graphState.branchState?.worktree}
704-
>
705-
<div slot="tooltip">
706-
Switch Branch...
707-
<hr />
708-
<code-icon icon="git-branch" aria-hidden="true"></code-icon>
709-
<span class="inline-code">${this.graphState.branch?.name}</span>${when(
710-
this.graphState.branchState?.worktree,
711-
() => html`<i> (in a worktree)</i> `,
700+
<gl-ref-button
701+
href=${createWebviewCommandLink(
702+
'gitlens.graph.switchToAnotherBranch',
703+
this.graphState.webviewId,
704+
this.graphState.webviewInstanceId,
712705
)}
713-
</div>
714-
</gl-ref-button>
715-
<gl-button class="jump-to-ref" appearance="toolbar" @click=${this.handleJumpToRef}>
716-
<code-icon icon="target"></code-icon>
717-
<span slot="tooltip">
718-
Jump to HEAD
719-
<br />
720-
[Alt] Jump to Reference...
706+
icon
707+
.ref=${this.graphState.branch}
708+
?worktree=${this.graphState.branchState?.worktree}
709+
>
710+
<div slot="tooltip">
711+
Switch Branch...
712+
<hr />
713+
<code-icon icon="git-branch" aria-hidden="true"></code-icon>
714+
<span class="inline-code">${this.graphState.branch?.name}</span>${when(
715+
this.graphState.branchState?.worktree,
716+
() => html`<i> (in a worktree)</i> `,
717+
)}
718+
</div>
719+
</gl-ref-button>
720+
<gl-button class="jump-to-ref" appearance="toolbar" @click=${this.handleJumpToRef}>
721+
<code-icon icon="target"></code-icon>
722+
<span slot="tooltip">
723+
Jump to HEAD
724+
<br />
725+
[Alt] Jump to Reference...
726+
</span>
727+
</gl-button>
728+
<span>
729+
<code-icon icon="chevron-right"></code-icon>
721730
</span>
722-
</gl-button>
723-
<span>
724-
<code-icon icon="chevron-right"></code-icon>
725-
</span>
726-
<gl-git-actions-buttons
727-
.branchName=${this.graphState.branch?.name}
728-
.branchState=${this.graphState.branchState}
729-
.lastFetched=${this.graphState.lastFetched}
730-
.state=${this.graphState}
731-
></gl-git-actions-buttons>
732-
`,
731+
<gl-git-actions-buttons
732+
.branchName=${this.graphState.branch?.name}
733+
.branchState=${this.graphState.branchState}
734+
.lastFetched=${this.graphState.lastFetched}
735+
.state=${this.graphState}
736+
></gl-git-actions-buttons>`,
733737
)}
734738
</div>
735739
<div class="titlebar__group">
736740
${when(
737741
!(this.graphState.state.mcpBannerCollapsed ?? true),
738-
() => html`
739-
<gl-popover class="mcp-tooltip" placement="bottom" trigger="click focus hover">
742+
() =>
743+
html`<gl-popover class="mcp-tooltip" placement="bottom" trigger="click focus hover">
740744
<a
741745
class="action-button action-button--mcp"
742746
href=${createCommandLink('gitlens.ai.mcp.install', { source: 'graph' })}
@@ -749,8 +753,7 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
749753
Leverage Git and Integration information from GitLens in AI chat.
750754
<a href="https://help.gitkraken.com/mcp/mcp-getting-started">Learn more</a>
751755
</div>
752-
</gl-popover>
753-
`,
756+
</gl-popover>`,
754757
)}
755758
<gl-tooltip placement="bottom">
756759
<a
@@ -832,12 +835,11 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
832835
</gl-tooltip>
833836
${when(
834837
this.graphState.subscription == null || !isSubscriptionPaid(this.graphState.subscription),
835-
() => html`
836-
<gl-feature-badge
838+
() =>
839+
html`<gl-feature-badge
837840
.source=${{ source: 'graph', detail: 'badge' } as const}
838841
.subscription=${this.graphState.subscription}
839-
></gl-feature-badge>
840-
`,
842+
></gl-feature-badge>`,
841843
)}
842844
</div>
843845
</div>
@@ -847,8 +849,8 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
847849
this.graphState.workingTreeStats != null &&
848850
(this.graphState.workingTreeStats.hasConflicts ||
849851
this.graphState.workingTreeStats.pausedOpStatus),
850-
() => html`
851-
<div class="merge-conflict-warning">
852+
() =>
853+
html`<div class="merge-conflict-warning">
852854
<gl-merge-rebase-status
853855
class="merge-conflict-warning__content"
854856
?conflicts=${this.graphState.workingTreeStats?.hasConflicts}
@@ -862,13 +864,12 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
862864
webviewInstance: this.graphState.webviewInstanceId,
863865
}}
864866
></gl-merge-rebase-status>
865-
</div>
866-
`,
867+
</div>`,
867868
)}
868869
${when(
869870
this.graphState.allowed,
870-
() => html`
871-
<div class="titlebar__row">
871+
() =>
872+
html`<div class="titlebar__row">
872873
<div class="titlebar__group">
873874
<gl-tooltip placement="top" content="Branches Visibility">
874875
<sl-select
@@ -1202,15 +1203,8 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
12021203
</gl-popover>
12031204
</span>
12041205
</div>
1205-
</div>
1206-
`,
1206+
</div>`,
12071207
)}
1208-
<div
1209-
class=${`progress-container infinite${this.graphState.isBusy ? ' active' : ''}`}
1210-
role="progressbar"
1211-
>
1212-
<div class="progress-bar"></div>
1213-
</div>
12141208
</header>`,
12151209
);
12161210
}

0 commit comments

Comments
 (0)