Closes #3538 improves graph integration connection

Author: eamodio

CHANGELOG.md

@@ -20,12 +20,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Changes the new _Commit Graph_ sidebar to be enabled by default; use the `gitlens.graph.sidebar.enabled` settings to disable it
 - Changes how GitLens handles creating and renaming branches to avoid using the terminal — refs [#3528](https://github.com/gitkraken/vscode-gitlens/issues/3528)
 - Improves repository locating when using Launchpad — closes [#3633](https://github.com/gitkraken/vscode-gitlens/issues/3633)
-- Improves unnecessary prompting for certain deeplink and Launchpad workflows
-- Changes to automatically record repository path location when opening repositories — closes [#3635](https://github.com/gitkraken/vscode-gitlens/issues/3635)
-- Improves _Switch_, _Open in Worktree_, and deep link flows:
+- Improves _Switch_, _Open in Worktree_, and deeplink and Launchpad workflows
   - Reduces prompts for locating repositories which the user has previously opened — closes [#3555](https://github.com/gitkraken/vscode-gitlens/issues/3555)
   - Improves automatic detection of matching repositories for pull requests — closes [#3627](https://github.com/gitkraken/vscode-gitlens/issues/3627)
-  - Automatically fetches from the repository when needed rather than prompting the user
+  - Automatically fetches the repository when needed rather than prompting the user
+- Improves the integration connection indicator and connection button on the _Commit Graph_ — closes [#3538](https://github.com/gitkraken/vscode-gitlens/issues/3538)
+- Changes to automatically record repository path location when opening repositories — closes [#3635](https://github.com/gitkraken/vscode-gitlens/issues/3635)
 
 ### Fixed
 

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

@@ -72,7 +72,7 @@ import { DidChangeHostWindowFocusNotification } from '../../../protocol';
 import { GlButton } from '../../shared/components/button.react';
 import { GlCheckbox } from '../../shared/components/checkbox';
 import { CodeIcon } from '../../shared/components/code-icon.react';
-import { GlConnect } from '../../shared/components/integrations/connect.react';
+import { GlIndicator } from '../../shared/components/indicators/indicator.react';
 import { GlMarkdown } from '../../shared/components/markdown/markdown.react';
 import { MenuDivider, MenuItem, MenuLabel } from '../../shared/components/menu/react';
 import { GlPopover } from '../../shared/components/overlays/popover.react';
@@ -1000,12 +1000,13 @@ export function GraphWrapper({
 					<div className="titlebar__group">
 						{repo?.provider?.url && (
 							<>
-								<GlTooltip placement="bottom">
+								<GlPopover placement="bottom">
 									<a
 										href={repo.provider.url}
 										className="action-button"
 										style={{ marginRight: '-0.5rem' }}
 										aria-label={`Open Repository on ${repo.provider.name}`}
+										slot="anchor"
 									>
 										<span
 											className={
@@ -1014,23 +1015,75 @@ export function GraphWrapper({
 													: `glicon glicon-provider-${repo.provider.icon} action-button__icon`
 											}
 											aria-hidden="true"
-										></span>
+										>
+											{repo.provider.integration?.connected && (
+												<GlIndicator
+													style={{
+														marginLeft: '-0.2rem',
+														// @ts-expect-error React doesn't like that we are setting a custom css prop
+														'--gl-indicator-color': 'green',
+														'--gl-indicator-size': '0.4rem',
+													}}
+												></GlIndicator>
+											)}
+										</span>
 									</a>
-									<span slot="content">Open Repository on {repo.provider.name}</span>
-								</GlTooltip>
+									<span slot="content">
+										Open Repository on {repo.provider.name}
+										<hr />
+										{repo.provider.integration?.connected ? (
+											<span>
+												<span
+													style={{ marginTop: '-3px' }}
+													className="codicon codicon-check"
+													aria-hidden="true"
+												></span>{' '}
+												Connected to {repo.provider.name}
+											</span>
+										) : (
+											repo.provider.integration?.connected === false && (
+												<>
+													<span
+														style={{ marginTop: '-3px' }}
+														className="codicon codicon-plug"
+														aria-hidden="true"
+													></span>{' '}
+													<a
+														href={createCommandLink<ConnectCloudIntegrationsCommandArgs>(
+															'gitlens.plus.cloudIntegrations.connect' as Commands,
+															{
+																integrationIds: [repo.provider.integration.id],
+																source: 'graph',
+															},
+														)}
+													>
+														Connect to {repo.provider.name}
+													</a>
+													<span> &mdash; not connected</span>
+												</>
+											)
+										)}
+									</span>
+								</GlPopover>
 								{repo?.provider?.integration?.connected === false && (
-									<GlConnect
-										type="action"
-										connected={false}
-										integration={repo.provider.name}
-										connectUrl={createCommandLink<ConnectCloudIntegrationsCommandArgs>(
+									<GlButton
+										appearance="toolbar"
+										href={createCommandLink<ConnectCloudIntegrationsCommandArgs>(
 											'gitlens.plus.cloudIntegrations.connect' as Commands,
 											{
 												integrationIds: [repo.provider.integration.id],
 												source: 'graph',
 											},
 										)}
-									></GlConnect>
+									>
+										<CodeIcon icon="plug" style={{ color: 'var(--titlebar-fg)' }}></CodeIcon>
+										<span slot="tooltip">
+											Connect to {repo.provider.name}
+											<hr />
+											View pull requests and issues in the Commit Graph, Launchpad, autolinks, and
+											more
+										</span>
+									</GlButton>
 								)}
 							</>
 						)}

src/webviews/apps/shared/components/indicators/indicator.react.ts

@@ -0,0 +1,4 @@
+import { reactWrapper } from '../helpers/react-wrapper';
+import { GlIndicator as GlIndicatorWC, tagName } from './indicator';
+
+export const GlIndicator = reactWrapper(GlIndicatorWC, { tagName: tagName });

src/webviews/apps/shared/components/indicators/indicator.ts

@@ -2,7 +2,9 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { baseStyles, pulseStyles } from './indicator.css';
 
-@customElement('gl-indicator')
+export const tagName = 'gl-indicator';
+
+@customElement(tagName)
 export class GlIndicator extends LitElement {
 	static override styles = [baseStyles, pulseStyles];