Fixes missing repo icon on Graph

Fixes incorrect integration connect button on Graph
Fixes incorrect flow from integration connect button on Graph

Author: eamodio

src/git/gitProviderService.ts

@@ -2204,7 +2204,7 @@ export class GitProviderService implements Disposable {
 		const includeDisconnected = options?.includeDisconnected ?? false;
 		for (const r of remotes) {
 			if (r.hasIntegration()) {
-				const integration = await this.container.integrations.getByRemote(r);
+				const integration = await r.getIntegration();
 				if (integration != null) {
 					if (options?.filter?.(r, integration) === false) continue;
 

src/git/models/repository.ts

@@ -39,6 +39,8 @@ export type RepoGitProviderService = Pick<
 		[K in keyof GitProviderService]: RemoveFirstArg<GitProviderService[K]>;
 	},
 	| keyof GitProviderRepository
+	| 'getBestRemoteWithProvider'
+	| 'getBestRemotesWithProviders'
 	| 'getBestRemoteWithIntegration'
 	| 'getBranch'
 	| 'getRemote'

src/plus/integrations/integrationService.ts

@@ -744,17 +744,8 @@ export class IntegrationService implements Disposable {
 		await this.container.storage.deleteWithPrefix('provider:authentication:skip');
 	}
 
-	supports(remoteId: RemoteProviderId): boolean {
-		switch (remoteId) {
-			case 'azure-devops':
-			case 'bitbucket':
-			case 'github':
-			case 'gitlab':
-				return true;
-			case 'bitbucket-server':
-			default:
-				return false;
-		}
+	supports(remoteProviderId: RemoteProviderId): boolean {
+		return remoteProviderIdToIntegrationId(remoteProviderId) != null;
 	}
 
 	private _ignoreSSLErrors = new Map<string, boolean | 'force'>();
@@ -796,3 +787,22 @@ export class IntegrationService implements Disposable {
 		return isSelfHostedIntegrationId(id) ? (`${id}:${domain}` as const) : id;
 	}
 }
+
+export function remoteProviderIdToIntegrationId(
+	remoteProviderId: RemoteProviderId,
+): SupportedCloudIntegrationIds | undefined {
+	switch (remoteProviderId) {
+		// TODO: Uncomment when we support these integrations
+		// case 'azure-devops':
+		// 	return HostingIntegrationId.AzureDevOps;
+		// case 'bitbucket':
+		// 	return HostingIntegrationId.Bitbucket;
+		case 'github':
+			return HostingIntegrationId.GitHub;
+		case 'gitlab':
+			return HostingIntegrationId.GitLab;
+		case 'bitbucket-server':
+		default:
+			return undefined;
+	}
+}

src/plus/webviews/graph/graphWebview.ts

@@ -120,6 +120,7 @@ import type { WebviewPanelShowCommandArgs, WebviewShowOptions } from '../../../w
 import { isSerializedState } from '../../../webviews/webviewsController';
 import type { SubscriptionChangeEvent } from '../../gk/account/subscriptionService';
 import type { ConnectionStateChangeEvent } from '../../integrations/integrationService';
+import { remoteProviderIdToIntegrationId } from '../../integrations/integrationService';
 import type {
 	BranchState,
 	DidChangeRefsVisibilityParams,
@@ -3741,34 +3742,34 @@ type GraphItemRefs<T> = {
 async function formatRepositories(repositories: Repository[]): Promise<GraphRepository[]> {
 	if (repositories.length === 0) return Promise.resolve([]);
 
-	return Promise.all(
-		repositories.map(async r => {
-			const remote = await r.git.getBestRemoteWithIntegration();
-
-			// const integration = await remote?.getIntegration();
-			// const connected = integration ? integration?.maybeConnected ?? (await integration?.isConnected()) : false;
-			let connected = false;
-			if (remote?.maybeIntegrationConnected) {
-				connected = true;
-			}
+	const result = await Promise.allSettled(
+		repositories.map<Promise<GraphRepository>>(async repo => {
+			const remotes = await repo.git.getBestRemotesWithProviders();
+			const remote = remotes.find(r => r.hasIntegration()) ?? remotes[0];
 
 			return {
-				formattedName: r.formattedName,
-				id: r.id,
-				name: r.name,
-				path: r.path,
+				formattedName: repo.formattedName,
+				id: repo.id,
+				name: repo.name,
+				path: repo.path,
 				provider: remote?.provider
 					? {
 							name: remote.provider.name,
-							connected: connected,
+							integration: remote.hasIntegration()
+								? {
+										id: remoteProviderIdToIntegrationId(remote.provider.id)!,
+										connected: remote.maybeIntegrationConnected ?? false,
+								  }
+								: undefined,
 							icon: remote.provider.icon === 'remote' ? 'cloud' : remote.provider.icon,
 							url: remote.provider.url({ type: RemoteResourceType.Repo }),
 					  }
 					: undefined,
-				isVirtual: r.provider.virtual,
+				isVirtual: repo.provider.virtual,
 			};
 		}),
 	);
+	return result.map(r => getSettledValue(r)).filter(r => r != null);
 }
 
 function isGraphItemContext(item: unknown): item is GraphItemContext {

src/plus/webviews/graph/protocol.ts

@@ -23,6 +23,7 @@ import type {
 	WorkDirStats,
 } from '@gitkraken/gitkraken-components';
 import type { Config, DateStyle, GraphBranchesVisibility } from '../../../config';
+import type { SupportedCloudIntegrationIds } from '../../../constants.integrations';
 import type { SearchQuery } from '../../../constants.search';
 import type { RepositoryVisibility } from '../../../git/gitProvider';
 import type { GitTrackingState } from '../../../git/models/branch';
@@ -153,7 +154,10 @@ export interface GraphRepository {
 	isVirtual: boolean;
 	provider?: {
 		name: string;
-		connected: boolean;
+		integration?: {
+			id: SupportedCloudIntegrationIds;
+			connected: boolean;
+		};
 		icon?: string;
 		url?: string;
 	};

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

@@ -18,6 +18,7 @@ import type { SlChangeEvent } from '@shoelace-style/shoelace';
 import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
 import type { FormEvent, MouseEvent, ReactElement } from 'react';
 import React, { createElement, useEffect, useMemo, useRef, useState } from 'react';
+import type { ConnectCloudIntegrationsCommandArgs } from '../../../../commands/cloudIntegrations';
 import type { DateStyle, GraphBranchesVisibility } from '../../../../config';
 import type { Commands } from '../../../../constants.commands';
 import type { SearchQuery } from '../../../../constants.search';
@@ -1155,17 +1156,16 @@ export function GraphWrapper({
 									</a>
 									<span slot="content">Open Repository on {repo.provider.name}</span>
 								</GlTooltip>
-								{repo?.provider?.connected !== true && (
+								{repo?.provider?.integration?.connected === false && (
 									<GlConnect
 										type="action"
 										connected={false}
 										integration={repo.provider.name}
-										connectUrl={createCommandLink(
+										connectUrl={createCommandLink<ConnectCloudIntegrationsCommandArgs>(
 											'gitlens.plus.cloudIntegrations.connect' as Commands,
 											{
-												args: {
-													source: 'graph',
-												},
+												integrationIds: [repo.provider.integration.id],
+												source: 'graph',
 											},
 										)}
 									></GlConnect>