Adds tooltip to the badge indicating additional GK Orgs

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+- Adds tooltip to the badge indicating additional GK Orgs — closes [#3521](https://github.com/gitkraken/vscode-gitlens/issues/3521)
+
 ### Fixed
 
 - Fixes [#3582](https://github.com/gitkraken/vscode-gitlens/issues/3582) - "Delete Branch" option is sometimes unexpectedly missing

src/plus/webviews/account/accountWebview.ts

@@ -77,10 +77,11 @@ export class AccountWebviewProvider implements WebviewProvider<State> {
 			avatar = `${this.host.getWebRoot() ?? ''}/media/gitlens-logo.webp`;
 		}
 
+		const organizations = await this.container.organizations.getOrganizations();
 		return {
 			subscription: sub,
 			avatar: avatar,
-			organizationsCount: ((await this.container.organizations.getOrganizations()) ?? []).length,
+			organizations: organizations ?? [],
 		};
 	}
 
@@ -92,7 +93,7 @@ export class AccountWebviewProvider implements WebviewProvider<State> {
 			webroot: this.host.getWebRoot(),
 			subscription: subscriptionResult.subscription,
 			avatar: subscriptionResult.avatar,
-			organizationsCount: subscriptionResult.organizationsCount,
+			organizations: subscriptionResult.organizations,
 		};
 	}
 

src/plus/webviews/account/protocol.ts

@@ -1,5 +1,6 @@
 import type { IpcScope, WebviewState } from '../../../webviews/protocol';
 import { IpcNotification } from '../../../webviews/protocol';
+import type { Organization } from '../../gk/account/organization';
 import type { Subscription } from '../../gk/account/subscription';
 
 export const scope: IpcScope = 'account';
@@ -8,15 +9,15 @@ export interface State extends WebviewState {
 	webroot?: string;
 	subscription: Subscription;
 	avatar?: string;
-	organizationsCount?: number;
+	organizations?: Organization[];
 }
 
 // NOTIFICATIONS
 
 export interface DidChangeSubscriptionParams {
 	subscription: Subscription;
 	avatar?: string;
-	organizationsCount?: number;
+	organizations?: Organization[];
 }
 export const DidChangeSubscriptionNotification = new IpcNotification<DidChangeSubscriptionParams>(
 	scope,

src/webviews/apps/plus/account/account.ts

@@ -35,7 +35,7 @@ export class AccountApp extends App<State> {
 			case DidChangeSubscriptionNotification.is(msg):
 				this.state.subscription = msg.params.subscription;
 				this.state.avatar = msg.params.avatar;
-				this.state.organizationsCount = msg.params.organizationsCount;
+				this.state.organizations = msg.params.organizations;
 				this.state.timestamp = Date.now();
 				this.setState(this.state);
 				this.updateState();
@@ -59,13 +59,13 @@ export class AccountApp extends App<State> {
 	}
 
 	private updateState() {
-		const { subscription, avatar, organizationsCount } = this.state;
+		const { subscription, avatar, organizations } = this.state;
 
 		const $content = document.getElementById('account-content')! as AccountContent;
 
 		$content.image = avatar ?? '';
 		$content.subscription = subscription;
-		$content.organizationsCount = organizationsCount ?? 0;
+		$content.organizations = organizations ?? [];
 	}
 }
 

src/webviews/apps/plus/account/components/account-content.ts

@@ -1,7 +1,9 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { when } from 'lit/directives/when.js';
 import { urls } from '../../../../../constants';
+import type { Organization } from '../../../../../plus/gk/account/organization';
 import type { Promo } from '../../../../../plus/gk/account/promos';
 import { getApplicablePromo } from '../../../../../plus/gk/account/promos';
 import type { Subscription } from '../../../../../plus/gk/account/subscription';
@@ -16,6 +18,7 @@ import { pluralize } from '../../../../../system/string';
 import { elementBase, linkBase } from '../../../shared/components/styles/lit/base.css';
 import '../../../shared/components/button';
 import '../../../shared/components/button-container';
+import '../../../shared/components/overlays/tooltip';
 import '../../../shared/components/code-icon';
 import '../../../shared/components/promo';
 
@@ -112,6 +115,20 @@ export class AccountContent extends LitElement {
 				color: var(--color-foreground--65);
 				background-color: var(--vscode-toolbar-hoverBackground);
 				border-radius: 50%;
+				cursor: pointer;
+			}
+
+			.account__badge:hover {
+				background-color: var(--vscode-toolbar-activeBackground);
+			}
+
+			.account__badge-tooltip ul {
+				padding-left: 18px;
+			}
+
+			.account__badge-tooltip ul,
+			.account__badge-tooltip ul li {
+				margin: 0;
 			}
 
 			.repo-access {
@@ -137,8 +154,8 @@ export class AccountContent extends LitElement {
 	@property()
 	image = '';
 
-	@property({ type: Number })
-	organizationsCount = 0;
+	@property({ attribute: false })
+	organizations: Organization[] = [];
 
 	@property({ attribute: false })
 	subscription?: Subscription;
@@ -201,7 +218,10 @@ export class AccountContent extends LitElement {
 				</div>
 				<div class="account__details">
 					<p class="account__title">${this.subscription?.account?.name ?? ''}</p>
-					${when(this.organizationsCount === 0, () => html`<p class="account__access">${this.planName}</p>`)}
+					${when(
+						this.organizations.length === 0,
+						() => html`<p class="account__access">${this.planName}</p>`,
+					)}
 				</div>
 				<div class="account__signout">
 					<gl-button
@@ -230,10 +250,25 @@ export class AccountContent extends LitElement {
 					<p class="account__access">${this.planName}</p>
 				</div>
 				${when(
-					this.organizationsCount > 1,
+					this.organizations.length > 1,
 					() =>
 						html`<div class="account__signout">
-							<span class="account__badge">+${this.organizationsCount - 1}</span>
+							<gl-tooltip>
+								<span class="account__badge">+${this.organizations.length - 1}</span>
+								<div slot="content" class="account__badge-tooltip">
+									<span
+										>You are a part of
+										${pluralize('organization', this.organizations.length)}:</span
+									>
+									<ul>
+										${repeat(
+											this.organizations,
+											x => x.id,
+											x => html`<li>${x.name}</li>`,
+										)}
+									</ul>
+								</div>
+							</gl-tooltip>
 							<gl-button
 								appearance="toolbar"
 								href="command:gitlens.gk.switchOrganization"