Adds autolinked issues to branches in home view

- Fixes getEnrichedAutolinks failing to get issue for branch type autolinks
- Adds getEnrichedAutolinks to branch model
- Adds autolinks to home webview state and renders in current and recent branch sections
- Adds issue-icon component
- Moves link on PR and issue lines from the id to the title, to avoid issues with hover actions on top

Author: axosoft-ramint

src/autolinks/autolinks.ts

@@ -329,7 +329,10 @@ export class Autolinks implements Disposable {
 				integration != null &&
 				link.provider?.id === integration.id &&
 				link.provider?.domain === integration.domain
-					? integration.getIssueOrPullRequest(link.descriptor ?? remote.provider.repoDesc, id)
+					? integration.getIssueOrPullRequest(
+							link.descriptor ?? remote.provider.repoDesc,
+							link.referenceType === 'branch' ? link.id : id,
+					  )
 					: link.descriptor != null
 					  ? linkIntegration?.getIssueOrPullRequest(link.descriptor, this.getAutolinkEnrichableId(link))
 					  : undefined;

src/git/models/branch.ts

@@ -1,4 +1,5 @@
 import type { CancellationToken } from 'vscode';
+import type { EnrichedAutolink } from '../../autolinks';
 import type { BranchSorting } from '../../config';
 import type { GitConfigKeys } from '../../constants';
 import type { Container } from '../../container';
@@ -140,6 +141,13 @@ export class GitBranch implements GitBranchReference {
 		);
 	}
 
+	@memoize()
+	async getEnrichedAutolinks(): Promise<Map<string, EnrichedAutolink> | undefined> {
+		const remote = await this.container.git.getBestRemoteWithProvider(this.repoPath);
+		const branchAutolinks = await this.container.autolinks.getBranchAutolinks(this.name, remote);
+		return this.container.autolinks.getEnrichedAutolinks(branchAutolinks, remote);
+	}
+
 	@memoize()
 	getBasename(): string {
 		const name = this.getNameWithoutRemote();

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

@@ -23,6 +23,7 @@ import '../../../shared/components/menu/menu-item';
 import '../../../shared/components/overlays/popover';
 import '../../../shared/components/overlays/tooltip';
 import '../../../shared/components/pills/tracking';
+import '../../../shared/components/rich/issue-icon';
 import '../../../shared/components/rich/pr-icon';
 
 export const activeWorkTagName = 'gl-active-work';
@@ -177,7 +178,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	}
 
 	private renderRepoBranchCard(branch: GetOverviewBranch, repo: string, isFetching: boolean) {
-		const { name, pr, state, workingTreeState, upstream } = branch;
+		const { name, pr, autolinks, state, workingTreeState, upstream } = branch;
 		return html`
 			<gl-card class="branch-item" active>
 				<div class="branch-item__container">
@@ -196,18 +197,38 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 								<span class="branch-item__icon">
 									<pr-icon state=${pr.state} pr-id=${pr.id}></pr-icon>
 								</span>
-								<span class="branch-item__name">${pr.title}</span>
-								<a href=${pr.url} class="branch-item__identifier">#${pr.id}</a>
+								<a href=${pr.url} class="branch-item__name">${pr.title}</a>
+								<spanclass="branch-item__identifier">#${pr.id}</span>
 							</p>
 						</div>`;
 					})}
+					${when(autolinks, () => this.renderAutolinks(autolinks))}
 					${when(workingTreeState, () => this.renderStatus(workingTreeState, state))}
 				</div>
 				${this.renderActions(branch, repo)}
 			</gl-card>
 		`;
 	}
 
+	private renderAutolinks(autolinks: { id: string; title: string; state: string; url: string }[] | undefined) {
+		if (!autolinks) return nothing;
+		return html`
+			<div class="branch-item__section">
+				${autolinks.map(autolink => {
+					return html`
+						<p class="branch-item__grouping">
+							<span class="branch-item__icon">
+								<issue-icon state=${autolink.state} issue-id=${autolink.id}></issue-icon>
+							</span>
+							<a href=${autolink.url} class="branch-item__name">${autolink.title}</a>
+							<span class="branch-item__identifier">#${autolink.id}</span>
+						</p>
+					`;
+				})}
+			</div>
+		`;
+	}
+
 	private renderActions(branch: GetOverviewBranch, repo: string) {
 		const branchRefs = {
 			repoPath: repo,

src/webviews/apps/plus/home/components/branch-section.ts

@@ -14,6 +14,7 @@ import '../../../shared/components/card/card';
 import '../../../shared/components/commit/commit-stats';
 import '../../../shared/components/formatted-date';
 import '../../../shared/components/pills/tracking';
+import '../../../shared/components/rich/issue-icon';
 import '../../../shared/components/rich/pr-icon';
 import '../../../shared/components/actions/action-item';
 import '../../../shared/components/actions/action-nav';
@@ -161,10 +162,6 @@ export const branchCardStyles = css`
 		text-decoration: none;
 	}
 
-	.branch-item__identifier:hover {
-		text-decoration: underline;
-	}
-
 	.branch-item__grouping {
 		display: inline-flex;
 		align-items: center;
@@ -223,7 +220,7 @@ export class GlBranchCard extends LitElement {
 	}
 
 	override render() {
-		const { name, pr, opened: active, timestamp: date } = this.branch;
+		const { name, pr, autolinks, opened: active, timestamp: date } = this.branch;
 		return html`
 			<gl-card class="branch-item" .active=${active}>
 				<div class="branch-item__container">
@@ -233,12 +230,12 @@ export class GlBranchCard extends LitElement {
 							${when(
 								pr,
 								pr =>
-									html`<span class="branch-item__name">${pr.title} </span
-										><a href=${pr.url} class="branch-item__identifier">#${pr.id}</a>`,
+									html`<a href=${pr.url} class="branch-item__name">${pr.title} </a
+										><span class="branch-item__identifier">#${pr.id}</span>`,
 								() => html`<span class="branch-item__name">${name}</span>`,
 							)}
 						</p>
-						${this.renderPrBranch(this.branch)}
+						${this.renderPrBranch(this.branch)} ${when(autolinks, () => this.renderAutolinks(autolinks))}
 					</div>
 					<div class="branch-item__section branch-item__section--details">
 						${this.renderChanges(this.branch)}
@@ -256,6 +253,23 @@ export class GlBranchCard extends LitElement {
 		`;
 	}
 
+	private renderAutolinks(autolinks: { id: string; title: string; state: string; url: string }[] | undefined) {
+		if (!autolinks) return nothing;
+		return html`
+			${autolinks.map(autolink => {
+				return html`
+					<p class="branch-item__grouping branch-item__grouping--secondary">
+						<span class="branch-item__icon">
+							<issue-icon state=${autolink.state} issue-id=${autolink.id}></issue-icon>
+						</span>
+						<a href=${autolink.url} class="branch-item__name">${autolink.title}</a>
+						<span class="branch-item__identifier">#${autolink.id}</span>
+					</p>
+				`;
+			})}
+		`;
+	}
+
 	private renderPrBranch(branch: OverviewBranch) {
 		if (!branch.pr) {
 			return nothing;

src/webviews/apps/shared/components/rich/issue-icon.ts

@@ -0,0 +1,59 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { issueIconStyles } from './issue.css';
+import '../code-icon';
+import '../overlays/tooltip';
+
+@customElement('issue-icon')
+export class IssueIcon extends LitElement {
+	static override styles = [issueIconStyles];
+
+	@property()
+	state?: 'opened' | 'closed' | string;
+
+	@property({ attribute: 'issue-id' })
+	issueId?: string;
+
+	get icon() {
+		let issueIcon = 'issues';
+		if (this.state) {
+			switch (this.state) {
+				case 'opened':
+					issueIcon = 'issues';
+					break;
+				case 'closed':
+					issueIcon = 'pass';
+					break;
+			}
+		}
+		return issueIcon;
+	}
+
+	get classes() {
+		if (!this.state) return 'issue-icon';
+
+		return `issue-icon issue-icon--${this.state}`;
+	}
+
+	get label() {
+		if (!this.state) return 'Issue';
+
+		return `Issue ${this.issueId ? `#${this.issueId}` : ''} is ${this.state}`;
+	}
+
+	override render() {
+		if (!this.state) {
+			return html`<code-icon
+				class=${this.classes}
+				icon=${this.icon}
+				aria-label=${ifDefined(this.state)}
+			></code-icon>`;
+		}
+
+		return html`<gl-tooltip>
+			<code-icon class=${this.classes} icon=${this.icon} aria-label=${ifDefined(this.state)}></code-icon>
+			<span slot="content">${this.label}</span>
+		</gl-tooltip>`;
+	}
+}

src/webviews/apps/shared/components/rich/issue.css.ts

@@ -0,0 +1,10 @@
+import { css } from 'lit';
+
+export const issueIconStyles = css`
+	.issue-icon--opened {
+		color: var(--vscode-gitlens-openAutolinkedIssueIconColor);
+	}
+	.issue-icon--closed {
+		color: var(--vscode-gitlens-closedAutolinkedIssueIconColor);
+	}
+`;

src/webviews/home/homeWebview.ts

@@ -1,6 +1,7 @@
 import type { ConfigurationChangeEvent } from 'vscode';
 import { Disposable, workspace } from 'vscode';
 import type { CreatePullRequestActionContext } from '../../api/gitlens';
+import type { EnrichedAutolink } from '../../autolinks';
 import { getAvatarUriFromGravatarEmail } from '../../avatars';
 import type { OpenPullRequestOnRemoteCommandArgs } from '../../commands/openPullRequestOnRemote';
 import { GlyphChars, urls } from '../../constants';
@@ -915,6 +916,7 @@ async function getOverviewBranches(
 
 	let repoStatusPromise: Promise<GitStatus | undefined> | undefined;
 	const prPromises = new Map<string, Promise<PullRequest | undefined>>();
+	const autolinkPromises = new Map<string, Promise<Map<string, EnrichedAutolink> | undefined>>();
 	const statusPromises = new Map<string, Promise<GitStatus | undefined>>();
 	const contributorPromises = new Map<string, Promise<BranchContributorOverview | undefined>>();
 
@@ -929,6 +931,7 @@ async function getOverviewBranches(
 		if (branch.current || wt?.opened) {
 			const forceOptions = options?.forceActive ? { force: true } : undefined;
 			prPromises.set(branch.id, branch.getAssociatedPullRequest({ avatarSize: 16 }));
+			autolinkPromises.set(branch.id, branch.getEnrichedAutolinks());
 			if (wt != null) {
 				statusPromises.set(branch.id, wt.getStatus(forceOptions));
 			} else {
@@ -955,6 +958,7 @@ async function getOverviewBranches(
 
 		if (timestamp != null && timestamp > recentThreshold) {
 			prPromises.set(branch.id, branch.getAssociatedPullRequest());
+			autolinkPromises.set(branch.id, branch.getEnrichedAutolinks());
 			if (wt != null) {
 				statusPromises.set(branch.id, wt.getStatus());
 			}
@@ -982,6 +986,7 @@ async function getOverviewBranches(
 			orderBy: 'date:asc',
 		});
 		for (const branch of branches) {
+			autolinkPromises.set(branch.id, branch.getEnrichedAutolinks());
 			if (overviewBranches.stale.length > 9) break;
 
 			if (
@@ -1025,7 +1030,7 @@ async function getOverviewBranches(
 		}
 	}
 
-	await enrichOverviewBranches(overviewBranches, prPromises, statusPromises, contributorPromises);
+	await enrichOverviewBranches(overviewBranches, prPromises, autolinkPromises, statusPromises, contributorPromises);
 
 	return overviewBranches;
 }
@@ -1034,11 +1039,17 @@ async function getOverviewBranches(
 async function enrichOverviewBranches(
 	overviewBranches: GetOverviewBranches,
 	prPromises: Map<string, Promise<PullRequest | undefined>>,
+	autolinkPromises: Map<string, Promise<Map<string, EnrichedAutolink> | undefined>>,
 	statusPromises: Map<string, Promise<GitStatus | undefined>>,
 	contributorPromises: Map<string, Promise<BranchContributorOverview | undefined>>,
 ) {
-	const [prResults, statusResults, contributorResults] = await Promise.allSettled([
+	const [prResults, autolinkResults, statusResults, contributorResults] = await Promise.allSettled([
 		Promise.allSettled(map(prPromises, ([id, pr]) => pr.then<[string, PullRequest | undefined]>(pr => [id, pr]))),
+		Promise.allSettled(
+			map(autolinkPromises, ([id, autolinks]) =>
+				autolinks.then<[string, Map<string, EnrichedAutolink> | undefined]>(a => [id, a]),
+			),
+		),
 		Promise.allSettled(
 			map(statusPromises, ([id, status]) => status.then<[string, GitStatus | undefined]>(status => [id, status])),
 		),
@@ -1065,6 +1076,40 @@ async function enrichOverviewBranches(
 			]),
 	);
 
+	const enrichedAutolinkPromises = new Map(
+		getSettledValue(autolinkResults)
+			?.filter(r => r.status === 'fulfilled')
+			.map(({ value: [autolinkId, autolinks] }) => [
+				autolinkId,
+				autolinks
+					? [...autolinks.values()]
+							.filter(autolink => autolink?.[0] != null)
+							.map(async autolink => {
+								const issue = await autolink[0]!;
+								return {
+									id: autolink[1].id,
+									title: issue?.title ?? autolink[1].title ?? `Issue #${autolink[1].id}`,
+									state: issue?.state === 'closed' ? 'closed' : 'opened',
+									url: autolink[1].url,
+									hasIssue: issue != null,
+								};
+							})
+					: undefined,
+			]),
+	);
+
+	const autolinks = new Map<string, GetOverviewBranch['autolinks']>();
+
+	for (const [id, enrichedAutolinkPromise] of enrichedAutolinkPromises.entries()) {
+		if (enrichedAutolinkPromise == null) continue;
+		const enrichedAutolinks = await Promise.all(enrichedAutolinkPromise);
+		if (!enrichedAutolinks.length) continue;
+		autolinks.set(
+			id,
+			enrichedAutolinks.filter(a => a.hasIssue),
+		);
+	}
+
 	const statuses = new Map(
 		getSettledValue(statusResults)
 			?.filter(r => r.status === 'fulfilled')
@@ -1081,6 +1126,9 @@ async function enrichOverviewBranches(
 		const pr = prs.get(branch.id);
 		branch.pr = pr;
 
+		const autolinksForBranch = autolinks.get(branch.id);
+		branch.autolinks = autolinksForBranch;
+
 		const status = statuses.get(branch.id);
 		if (status != null) {
 			branch.workingTreeState = status.getDiffStatus();

src/webviews/home/protocol.ts

@@ -100,6 +100,13 @@ export interface GetOverviewBranch {
 		state: string;
 		url: string;
 	};
+	autolinks?: {
+		id: string;
+		title: string;
+		url: string;
+		state: string;
+		hasIssue: boolean;
+	}[];
 	worktree?: {
 		name: string;
 		uri: string;