diff --git a/CHANGELOG.md b/CHANGELOG.md index 777fe3542a9d7..b96695db850c4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/plus/webviews/account/accountWebview.ts b/src/plus/webviews/account/accountWebview.ts index 4807fe512a8d9..7fba052ae3dc0 100644 --- a/src/plus/webviews/account/accountWebview.ts +++ b/src/plus/webviews/account/accountWebview.ts @@ -77,10 +77,11 @@ export class AccountWebviewProvider implements WebviewProvider { 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 { webroot: this.host.getWebRoot(), subscription: subscriptionResult.subscription, avatar: subscriptionResult.avatar, - organizationsCount: subscriptionResult.organizationsCount, + organizations: subscriptionResult.organizations, }; } diff --git a/src/plus/webviews/account/protocol.ts b/src/plus/webviews/account/protocol.ts index 3ba7ea04a1983..8b67ae7ca646b 100644 --- a/src/plus/webviews/account/protocol.ts +++ b/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,7 +9,7 @@ export interface State extends WebviewState { webroot?: string; subscription: Subscription; avatar?: string; - organizationsCount?: number; + organizations?: Organization[]; } // NOTIFICATIONS @@ -16,7 +17,7 @@ export interface State extends WebviewState { export interface DidChangeSubscriptionParams { subscription: Subscription; avatar?: string; - organizationsCount?: number; + organizations?: Organization[]; } export const DidChangeSubscriptionNotification = new IpcNotification( scope, diff --git a/src/webviews/apps/plus/account/account.ts b/src/webviews/apps/plus/account/account.ts index c8ef99ee3facf..4ab33c1f0937d 100644 --- a/src/webviews/apps/plus/account/account.ts +++ b/src/webviews/apps/plus/account/account.ts @@ -35,7 +35,7 @@ export class AccountApp extends App { 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 { } 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 ?? []; } } diff --git a/src/webviews/apps/plus/account/components/account-content.ts b/src/webviews/apps/plus/account/components/account-content.ts index e44826535be20..5a82f0ce2ab30 100644 --- a/src/webviews/apps/plus/account/components/account-content.ts +++ b/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 { ${when( - this.organizationsCount > 1, + this.organizations.length > 1, () => html`