Skip to content

Commit afe5854

Browse files
d13d13
committed
Updates breadcrumbs for repo and branch
1 parent 1e2a29d commit afe5854

File tree

13 files changed

+479
-327
lines changed

13 files changed

+479
-327
lines changed

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

Lines changed: 50 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@ import type { GraphRefOptData } from '@gitkraken/gitkraken-components';
22
import { refTypes } from '@gitkraken/gitkraken-components';
33
import { consume } from '@lit/context';
44
import { computed, SignalWatcher } from '@lit-labs/signals';
5-
import { html, LitElement, nothing } from 'lit';
5+
import { html, LitElement } from 'lit';
66
import { customElement, query } from 'lit/decorators.js';
77
import { cache } from 'lit/directives/cache.js';
88
import { ifDefined } from 'lit/directives/if-defined.js';
99
import { repeat } from 'lit/directives/repeat.js';
1010
import { when } from 'lit/directives/when.js';
11-
import type { ConnectCloudIntegrationsCommandArgs } from '../../../../commands/cloudIntegrations';
1211
import type { BranchGitCommandArgs } from '../../../../commands/git/branch';
1312
import type { GraphBranchesVisibility } from '../../../../config';
1413
import type { SearchQuery } from '../../../../constants.search';
@@ -21,7 +20,6 @@ import type {
2120
GraphExcludedRef,
2221
GraphExcludeTypes,
2322
GraphMinimapMarkerTypes,
24-
GraphRepository,
2523
GraphSearchResults,
2624
State,
2725
UpdateGraphConfigurationParams,
@@ -40,6 +38,7 @@ import {
4038
UpdateRefsVisibilityCommand,
4139
} from '../../../plus/graph/protocol';
4240
import type { RadioGroup } from '../../shared/components/radio/radio-group';
41+
import type { RepoButtonGroupClickEvent } from '../../shared/components/repo-button-group';
4342
import type { GlSearchBox } from '../../shared/components/search/search-box';
4443
import type { SearchNavigationEventDetail } from '../../shared/components/search/search-input';
4544
import { inlineCode } from '../../shared/components/styles/lit/base.css';
@@ -57,14 +56,15 @@ import '@shoelace-style/shoelace/dist/components/select/select.js';
5756
import '../../shared/components/button';
5857
import '../../shared/components/checkbox/checkbox';
5958
import '../../shared/components/code-icon';
60-
import '../../shared/components/indicators/indicator';
6159
import '../../shared/components/menu/menu-divider';
6260
import '../../shared/components/menu/menu-item';
6361
import '../../shared/components/menu/menu-label';
6462
import '../../shared/components/overlays/popover';
6563
import '../../shared/components/overlays/tooltip';
6664
import '../../shared/components/radio/radio';
6765
import '../../shared/components/radio/radio-group';
66+
import '../../shared/components/ref-button';
67+
import '../../shared/components/repo-button-group';
6868
import '../../shared/components/rich/issue-pull-request';
6969
import '../../shared/components/search/search-box';
7070
import '../shared/components/merge-rebase-status';
@@ -583,144 +583,50 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
583583
}
584584

585585
@debounce(250)
586-
private handleChooseRepository() {
587-
this._ipc.sendCommand(ChooseRepositoryCommand);
588-
}
589-
590-
@query('gl-search-box')
591-
private readonly searchEl!: GlSearchBox;
586+
private onRepositorySelectorClicked(e: CustomEvent<RepoButtonGroupClickEvent>) {
587+
switch (e.detail.part) {
588+
case 'label':
589+
this._ipc.sendCommand(ChooseRepositoryCommand);
590+
break;
592591

593-
private renderBranchStateIcon(): unknown {
594-
const { branchState } = this.hostState;
595-
if (branchState?.pr) {
596-
return nothing;
597-
}
598-
if (branchState?.worktree) {
599-
return html`<code-icon icon="gl-worktrees-view" aria-hidden="true"></code-icon>`;
592+
case 'icon':
593+
emitTelemetrySentEvent<'graph/action/openRepoOnRemote'>(e.target!, {
594+
name: 'graph/action/openRepoOnRemote',
595+
data: {},
596+
});
597+
break;
600598
}
601-
return html`<code-icon icon="git-branch" aria-hidden="true"></code-icon>`;
602599
}
603600

604-
private renderRepoControl(repo?: GraphRepository) {
605-
return html`
606-
<gl-popover placement="bottom">
607-
<a
608-
href=${ifDefined(repo!.provider!.url)}
609-
class="action-button"
610-
style="margin-right: -0.5rem"
611-
aria-label=${`Open Repository on ${repo!.provider!.name}`}
612-
slot="anchor"
613-
@click=${(e: Event) =>
614-
emitTelemetrySentEvent<'graph/action/openRepoOnRemote'>(e.target!, {
615-
name: 'graph/action/openRepoOnRemote',
616-
data: {},
617-
})}
618-
>
619-
<span>
620-
<code-icon
621-
class="action-button__icon"
622-
icon=${repo!.provider!.icon === 'cloud' ? 'cloud' : `gl-provider-${repo!.provider!.icon}`}
623-
aria-hidden="true"
624-
></code-icon
625-
>${when(
626-
repo!.provider!.integration?.connected,
627-
() => html`<gl-indicator class="action-button__indicator"></gl-indicator>`,
628-
)}
629-
</span>
630-
</a>
631-
<span slot="content">
632-
Open Repository on ${repo!.provider!.name}
633-
<hr />
634-
${when(
635-
repo!.provider!.integration?.connected,
636-
() => html`
637-
<span>
638-
<code-icon style="margin-top: -3px" icon="check" aria-hidden="true"></code-icon>
639-
Connected to ${repo!.provider!.name}
640-
</span>
641-
`,
642-
() => {
643-
if (repo!.provider!.integration?.connected !== false) {
644-
return nothing;
645-
}
646-
return html`
647-
<code-icon style="margin-top: -3px" icon="plug" aria-hidden="true"></code-icon>
648-
<a
649-
href=${createCommandLink<ConnectCloudIntegrationsCommandArgs>(
650-
'gitlens.plus.cloudIntegrations.connect',
651-
{
652-
integrationIds: [repo!.provider!.integration.id],
653-
source: { source: 'graph' },
654-
},
655-
)}
656-
>
657-
Connect to ${repo!.provider!.name}
658-
</a>
659-
<span>&mdash; not connected</span>
660-
`;
661-
},
662-
)}
663-
</span>
664-
</gl-popover>
665-
${when(
666-
repo?.provider?.integration?.connected === false,
667-
() => html`
668-
<gl-button
669-
appearance="toolbar"
670-
href=${createCommandLink<ConnectCloudIntegrationsCommandArgs>(
671-
'gitlens.plus.cloudIntegrations.connect',
672-
{
673-
integrationIds: [repo!.provider!.integration!.id],
674-
source: { source: 'graph' },
675-
},
676-
)}
677-
>
678-
<code-icon icon="plug" style="color: var(--titlebar-fg)"></code-icon>
679-
<span slot="tooltip">
680-
Connect to ${repo!.provider!.name}
681-
<hr />
682-
View pull requests and issues in the Commit Graph, Launchpad, autolinks, and more
683-
</span>
684-
</gl-button>
685-
`,
686-
)}
687-
`;
688-
}
601+
@query('gl-search-box')
602+
private readonly searchEl!: GlSearchBox;
689603

690604
override render() {
691605
const repo = this.hostState.repositories?.find(repo => repo.id === this.hostState.selectedRepository);
692606
const { searchResults } = this.appState;
693607

608+
const hasMultipleRepositories = (this.hostState.repositories?.length ?? 0) > 1;
609+
694610
return cache(
695611
html`<header class="titlebar graph-app__header">
696612
<div class="titlebar__row titlebar__row--wrap">
697613
<div class="titlebar__group">
698-
${when(repo?.provider?.url, this.renderRepoControl.bind(this, repo))}
699-
<gl-tooltip placement="bottom">
700-
<button
701-
type="button"
702-
class="action-button"
703-
aria-label="Switch to Another Repository..."
704-
?disabled=${!this.hostState.repositories || this.hostState.repositories.length < 2}
705-
@click=${() => this.handleChooseRepository()}
706-
>
707-
<span class="action-button__truncated">${repo?.name ?? 'none selected'}</span>${when(
708-
this.hostState.repositories && this.hostState.repositories.length > 1,
709-
() => html`
710-
<code-icon
711-
class="action-button__more"
712-
icon="chevron-down"
713-
aria-hidden="true"
714-
></code-icon>
715-
`,
716-
)}
717-
</button>
718-
<span slot="content">Switch to Another Repository...</span>
719-
</gl-tooltip>
614+
<gl-repo-button-group
615+
?disabled=${this.hostState.loading || !hasMultipleRepositories}
616+
?hasMultipleRepositories=${hasMultipleRepositories}
617+
.repository=${repo}
618+
.source=${{ source: 'graph' } as const}
619+
@gl-click=${this.onRepositorySelectorClicked}
620+
><span slot="tooltip">
621+
Switch to Another Repository...
622+
<hr />
623+
${repo?.name}
624+
</span></gl-repo-button-group
625+
>
720626
${when(
721627
this.hostState.allowed && repo,
722628
() => html`
723-
<span> <code-icon icon="chevron-right"></code-icon> </span>${when(
629+
<span><code-icon icon="chevron-right"></code-icon></span>${when(
724630
this.hostState.branchState?.pr,
725631
pr => html`
726632
<gl-popover placement="bottom">
@@ -752,38 +658,26 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
752658
</gl-popover>
753659
`,
754660
)}
755-
<gl-popover placement="bottom">
756-
<a
757-
slot="anchor"
758-
href=${createWebviewCommandLink(
759-
'gitlens.graph.switchToAnotherBranch',
760-
this.hostState.webviewId,
761-
this.hostState.webviewInstanceId,
661+
<gl-ref-button
662+
href=${createWebviewCommandLink(
663+
'gitlens.graph.switchToAnotherBranch',
664+
this.hostState.webviewId,
665+
this.hostState.webviewInstanceId,
666+
)}
667+
icon
668+
.ref=${this.hostState.branch}
669+
?worktree=${this.hostState.branchState?.worktree}
670+
>
671+
<div slot="tooltip">
672+
Switch Branch...
673+
<hr />
674+
<code-icon icon="git-branch" aria-hidden="true"></code-icon>
675+
<span class="inline-code">${this.hostState.branch?.name}</span>${when(
676+
this.hostState.branchState?.worktree,
677+
() => html`<i> (in a worktree)</i> `,
762678
)}
763-
class="action-button"
764-
style=${this.hostState.branchState?.pr ? { marginLeft: '-0.6rem' } : {}}
765-
aria-label="Switch to Another Branch..."
766-
>
767-
${this.renderBranchStateIcon()}
768-
<span class="action-button__truncated">${this.hostState.branch?.name}</span>
769-
<code-icon
770-
class="action-button__more"
771-
icon="chevron-down"
772-
aria-hidden="true"
773-
></code-icon>
774-
</a>
775-
<div slot="content">
776-
<span>
777-
Switch to Another Branch...
778-
<hr />
779-
<code-icon icon="git-branch" aria-hidden="true"></code-icon>
780-
<span class="inline-code">${this.hostState.branch?.name}</span>${when(
781-
this.hostState.branchState?.worktree,
782-
() => html`<i> (in a worktree)</i> `,
783-
)}
784-
</span>
785679
</div>
786-
</gl-popover>
680+
</gl-ref-button>
787681
<gl-button class="jump-to-ref" appearance="toolbar" @click=${this.handleJumpToRef}>
788682
<code-icon icon="target"></code-icon>
789683
<span slot="tooltip">

‎src/webviews/apps/plus/graph/styles/graph.css.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,6 @@ export const actionButton = css`
102102
overflow: hidden;
103103
}
104104
105-
.action-button__truncated {
106-
width: 100%;
107-
overflow: hidden;
108-
text-overflow: ellipsis;
109-
}
110-
111105
.action-button.is-ahead {
112106
background-color: var(--branch-status-ahead-background);
113107
}

‎src/webviews/apps/plus/graph/styles/header.css.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,11 @@ export const graphHeaderControlStyles = css`
131131
background-color: var(--vscode-menu-background);
132132
}
133133
134+
.titlebar__group gl-repo-button-group,
135+
.titlebar__group gl-ref-button {
136+
font-size: 1.2rem;
137+
}
138+
134139
.shrink {
135140
max-width: fit-content;
136141
transition: all 0.2s;

0 commit comments

Comments
 (0)