Provides limited remote model to Graph webview

Provides provider avatarUri w/ icon fallback to Graph webview

src/plus/webviews/graph/graphWebview.ts

@@ -1,7 +1,7 @@
 import type { CommitType } from '@gitkraken/gitkraken-components';
 import { commitNodeType, mergeNodeType, stashNodeType } from '@gitkraken/gitkraken-components';
 import type { Disposable, Event } from 'vscode';
-import { EventEmitter, ViewColumn, window } from 'vscode';
+import { EventEmitter, Uri, ViewColumn, window } from 'vscode';
 import type { GraphColumnConfig } from '../../../configuration';
 import { configuration } from '../../../configuration';
 import { Commands } from '../../../constants';
@@ -19,7 +19,7 @@ import type { IpcMessage } from '../../../webviews/protocol';
 import { onIpc } from '../../../webviews/protocol';
 import { WebviewWithConfigBase } from '../../../webviews/webviewWithConfigBase';
 import { ensurePlusFeaturesEnabled } from '../../subscription/utils';
-import type { GraphCommit, GraphCompositeConfig, GraphRepository, State } from './protocol';
+import type { GraphCommit, GraphCompositeConfig, GraphRemote, GraphRepository, State } from './protocol';
 import {
 	ColumnChangeCommandType,
 	DidChangeCommitsNotificationType,
@@ -330,7 +330,11 @@ export class GraphWebview extends WebviewWithConfigBase {
 			repositories: formatRepositories(repositories),
 			selectedRepository: this.selectedRepository?.path,
 			commits: formatCommits(combinedCommitsWithFilteredStashes),
-			remotes: remotes, // TODO: add a format function
+			remotes: formatRemotes(remotes, icon =>
+				this._panel?.webview
+					.asWebviewUri(Uri.joinPath(this.container.context.extensionUri, `images/dark/icon-${icon}.svg`))
+					.toString(),
+			),
 			branches: branches, // TODO: add a format function
 			tags: tags, // TODO: add a format function
 			config: this.getConfig(),
@@ -406,6 +410,17 @@ function combineAndFilterStashCommits(
 	return [...filteredCommits, ...filteredStashCommits];
 }
 
+function formatRemotes(
+	remotes: GitRemote[] | undefined,
+	getIconUrl: (icon?: string) => string | undefined,
+): GraphRemote[] | undefined {
+	return remotes?.map(r => ({
+		name: r.name,
+		url: r.url,
+		avatarUrl: r.provider?.avatarUri?.toString(true) ?? getIconUrl(r.provider?.icon),
+	}));
+}
+
 function formatRepositories(repositories: Repository[]): GraphRepository[] {
 	if (repositories.length === 0) {
 		return repositories;

src/plus/webviews/graph/protocol.ts

@@ -1,3 +1,4 @@
+import type { Remote } from '@gitkraken/gitkraken-components';
 import type { GraphColumnConfig, GraphConfig } from '../../../config';
 import { IpcCommandType, IpcNotificationType } from '../../../webviews/protocol';
 
@@ -24,7 +25,7 @@ export interface GraphLog {
 
 export type GraphRepository = Record<string, any>;
 export type GraphCommit = Record<string, any>;
-export type GraphRemote = Record<string, any>;
+export type GraphRemote = Remote;
 export type GraphTag = Record<string, any>;
 export type GraphBranch = Record<string, any>;
 

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -86,16 +86,12 @@ const getGraphModel = (
 					branch.name.startsWith(remote.name),
 				);
 
-				const matchingRemoteUrl: string | undefined =
-					matchingRemote !== undefined && matchingRemote.urls.length > 0 ? matchingRemote.urls[0] : undefined;
-
 				return {
 					// If a matching remote is found, remove the remote name and slash from the branch name
 					name:
 						matchingRemote !== undefined ? branch.name.replace(`${matchingRemote.name}/`, '') : branch.name,
-					url: matchingRemoteUrl,
-					// TODO: Add avatarUrl support for remotes
-					avatarUrl: matchingRemote?.avatarUrl ?? undefined
+					url: matchingRemote?.url,
+					avatarUrl: matchingRemote?.avatarUrl ?? undefined,
 				};
 			});
 

src/webviews/webviewBase.ts

@@ -25,7 +25,7 @@ export abstract class WebviewBase implements Disposable {
 	protected readonly disposables: Disposable[] = [];
 	protected isReady: boolean = false;
 	private _disposablePanel: Disposable | undefined;
-	private _panel: WebviewPanel | undefined;
+	protected _panel: WebviewPanel | undefined;
 
 	constructor(
 		protected readonly container: Container,