Enhances remote provider connection flow

Updates the connect remote provider flow to directly use the remote name and repository path.

This change simplifies the connection process and ensures accurate remote provider association. Adds remotePath and remoteName to the repository shape.
(#4387, #4411)

Author: sergeibbb

src/git/models/repositoryShape.ts

@@ -14,5 +14,6 @@ export interface RepositoryShape {
 		integration?: { id: SupportedCloudIntegrationIds; connected: boolean };
 		supportedFeatures: RemoteProviderSupportedFeatures;
 		url?: string;
+		bestRemoteName?: string;
 	};
 }

src/git/utils/-webview/repository.utils.ts

@@ -84,6 +84,7 @@ export async function toRepositoryShapeWithProvider(
 				: undefined,
 			supportedFeatures: remote.provider.supportedFeatures,
 			url: await remote.provider.url({ type: RemoteResourceType.Repo }),
+			bestRemoteName: remote.name,
 		};
 	}
 

src/webviews/apps/shared/components/repo-button-group.ts

@@ -2,7 +2,7 @@ import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
-import type { ConnectCloudIntegrationsCommandArgs } from '../../../../commands/cloudIntegrations';
+import type { ConnectRemoteProviderCommandArgs } from '../../../../commands/remoteProviders';
 import type { Source } from '../../../../constants.telemetry';
 import type { RepositoryShape } from '../../../../git/models/repositoryShape';
 import { createCommandLink } from '../../../../system/commands';
@@ -198,9 +198,9 @@ export class GlRepoButtonGroup extends GlElement {
 							return html`
 								<code-icon style="margin-top: -3px" icon="plug" aria-hidden="true"></code-icon>
 								<a
-									href=${createCommandLink<ConnectCloudIntegrationsCommandArgs>(
-										'gitlens.plus.cloudIntegrations.connect',
-										{ integrationIds: [provider.integration!.id], source: this.source },
+									href=${createCommandLink<ConnectRemoteProviderCommandArgs>(
+										'gitlens.connectRemoteProvider',
+										{ remote: provider.bestRemoteName!, repoPath: repo.path },
 									)}
 								>
 									Connect to ${repo.provider!.name}
@@ -227,10 +227,10 @@ export class GlRepoButtonGroup extends GlElement {
 			<gl-button
 				part="connect-icon"
 				appearance="toolbar"
-				href=${createCommandLink<ConnectCloudIntegrationsCommandArgs>(
-					'gitlens.plus.cloudIntegrations.connect',
-					{ integrationIds: [provider.integration.id], source: this.source },
-				)}
+				href=${createCommandLink<ConnectRemoteProviderCommandArgs>('gitlens.connectRemoteProvider', {
+					remote: provider.bestRemoteName!,
+					repoPath: repo.path,
+				})}
 			>
 				<code-icon icon="plug" style="color: var(--titlebar-fg)"></code-icon>
 				<span slot="tooltip">

src/webviews/home/homeWebview.ts

@@ -54,6 +54,7 @@ import type { SubscriptionChangeEvent } from '../../plus/gk/subscriptionService'
 import { isAiAllAccessPromotionActive } from '../../plus/gk/utils/-webview/promo.utils';
 import { isSubscriptionTrialOrPaidFromState } from '../../plus/gk/utils/subscription.utils';
 import type { ConfiguredIntegrationsChangeEvent } from '../../plus/integrations/authentication/configuredIntegrationService';
+import type { ConnectionStateChangeEvent } from '../../plus/integrations/integrationService';
 import { providersMetadata } from '../../plus/integrations/providers/models';
 import type { LaunchpadCategorizedResult } from '../../plus/launchpad/launchpadProvider';
 import { getLaunchpadItemGroups } from '../../plus/launchpad/launchpadProvider';
@@ -175,6 +176,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			this.container.subscription.onDidChange(this.onSubscriptionChanged, this),
 			onDidChangeContext(this.onContextChanged, this),
 			this.container.integrations.onDidChange(this.onIntegrationsChanged, this),
+			this.container.integrations.onDidChangeConnectionState(this.onIntegrationConnectionStateChanged, this),
 			this.container.walkthrough?.onDidChangeProgress(this.onWalkthroughProgressChanged, this) ?? emptyDisposable,
 			configuration.onDidChange(this.onDidChangeConfig, this),
 			this.container.launchpad.onDidChange(this.onLaunchpadChanged, this),
@@ -243,6 +245,10 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		void this.notifyDidChangeIntegrations();
 	}
 
+	private onIntegrationConnectionStateChanged(_e: ConnectionStateChangeEvent) {
+		void this.notifyDidChangeIntegrations();
+	}
+
 	private async onChooseRepository() {
 		const currentRepo = this.getSelectedRepository();
 		// Ensure that the current repository is always last