Adds provider icon for home active section

Author: d13

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

@@ -20,6 +20,7 @@ import '../../../shared/components/card/card';
 import '../../../shared/components/commit/commit-stats';
 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/pr-icon';
 
@@ -43,6 +44,12 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 				--button-padding: 0.1rem 0.2rem 0;
 				margin-block: -1rem;
 			}
+			.section-heading-provider {
+				color: inherit;
+			}
+			.tooltip {
+				text-transform: none;
+			}
 		`,
 	];
 
@@ -103,9 +110,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 
 		return html`
 			<gl-section>
-				<span slot="heading"
-					><code-icon icon="repo" class="heading-icon"></code-icon> ${overview!.repository.name}</span
-				>
+				<span slot="heading">${this.renderRepositoryIcon(repo.provider)} ${repo.name}</span>
 				<span slot="heading-actions"
 					><gl-button
 						aria-busy="${ifDefined(isFetching)}"
@@ -138,6 +143,29 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 		`;
 	}
 
+	private renderRepositoryIcon(provider?: { name: string; icon?: string; url?: string }) {
+		if (!provider) {
+			return html`<code-icon icon="repo" class="heading-icon"></code-icon>`;
+		}
+
+		let icon = 'repo';
+		if (provider.icon != null) {
+			icon = provider.icon === 'cloud' ? 'cloud' : `gl-provider-${provider.icon}`;
+		}
+
+		return html`<gl-tooltip>
+			${when(
+				provider.url != null,
+				() =>
+					html`<a href=${provider.url} class="section-heading-provider"
+						><code-icon icon=${icon} class="heading-icon"></code-icon
+					></a>`,
+				() => html`<code-icon icon=${icon} class="heading-icon"></code-icon>`,
+			)}
+			<span slot="content" class="tooltip">Open repository on ${provider.name}</span>
+		</gl-tooltip>`;
+	}
+
 	private renderRepoBranchCard(branch: GetOverviewBranch, repo: string, isFetching: boolean) {
 		const { name, pr, state, workingTreeState, upstream } = branch;
 		return html`

src/webviews/home/homeWebview.ts

@@ -16,6 +16,7 @@ import { sortBranches } from '../../git/models/branch';
 import type { PullRequest } from '../../git/models/pullRequest';
 import { getComparisonRefsForPullRequest } from '../../git/models/pullRequest';
 import { getReferenceFromBranch } from '../../git/models/reference';
+import { RemoteResourceType } from '../../git/models/remoteResource';
 import type { Repository } from '../../git/models/repository';
 import { RepositoryChange, RepositoryChangeComparisonMode } from '../../git/models/repository';
 import type { GitStatus } from '../../git/models/status';
@@ -506,17 +507,43 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		this._invalidateOverview = undefined;
 		if (overviewBranches == null) return undefined;
 
+		const formattedRepo = await this.formatRepository(repo);
+
 		const result: GetOverviewResponse = {
 			repository: {
-				name: repo.commonRepositoryName ?? repo.name,
-				path: repo.path,
+				...formattedRepo,
 				branches: overviewBranches,
 			},
 		};
 
 		return result;
 	}
 
+	private async formatRepository(repo: Repository): Promise<{
+		name: string;
+		path: string;
+		provider?: {
+			name: string;
+			icon?: string;
+			url?: string;
+		};
+	}> {
+		const remotes = await repo.git.getBestRemotesWithProviders();
+		const remote = remotes.find(r => r.hasIntegration()) ?? remotes[0];
+
+		return {
+			name: repo.commonRepositoryName ?? repo.name,
+			path: repo.path,
+			provider: remote?.provider
+				? {
+						name: remote.provider.name,
+						icon: remote.provider.icon === 'remote' ? 'cloud' : remote.provider.icon,
+						url: remote.provider.url({ type: RemoteResourceType.Repo }),
+				  }
+				: undefined,
+		};
+	}
+
 	private _repositorySubscription: RepositorySubscription | undefined;
 	private selectRepository(repoPath?: string) {
 		let repo: Repository | undefined;

src/webviews/home/protocol.ts

@@ -116,6 +116,11 @@ export type GetOverviewResponse =
 			repository: {
 				name: string;
 				path: string;
+				provider?: {
+					name: string;
+					icon?: string;
+					url?: string;
+				};
 				branches: GetOverviewBranches;
 			};
 	  }