Adds tooltip to pr-icon

Author: d13

src/webviews/apps/plus/home/components/active-work.ts

@@ -193,7 +193,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 						return html`<div class="branch-item__section">
 							<p class="branch-item__grouping">
 								<span class="branch-item__icon">
-									<pr-icon state=${pr.state}></pr-icon>
+									<pr-icon state=${pr.state} pr-id=${pr.id}></pr-icon>
 								</span>
 								<span class="branch-item__name">${pr.title}</span>
 								<a href=${pr.url} class="branch-item__identifier">#${pr.id}</a>

src/webviews/apps/plus/home/components/branch-section.ts

@@ -257,7 +257,7 @@ export class GlBranchCard extends LitElement {
 
 	private renderIcon(branch: OverviewBranch, noPr?: boolean) {
 		if (branch.pr && !noPr) {
-			return html`<pr-icon state=${branch.pr.state}></pr-icon>`;
+			return html`<pr-icon state=${branch.pr.state} pr-id=${branch.pr.id}></pr-icon>`;
 		}
 		if (branch.worktree) {
 			return html`<code-icon icon="gl-worktrees-view"></code-icon>`;

src/webviews/apps/shared/components/rich/pr-icon.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prIconStyles } from './pr.css';
 import '../code-icon';
+import '../overlays/tooltip';
 
 @customElement('pr-icon')
 export class PrIcon extends LitElement {
@@ -11,6 +12,9 @@ export class PrIcon extends LitElement {
 	@property()
 	state?: 'merged' | 'opened' | 'closed' | string;
 
+	@property({ attribute: 'pr-id' })
+	prId?: string;
+
 	get icon() {
 		let prIcon = 'git-pull-request';
 		if (this.state) {
@@ -32,11 +36,24 @@ export class PrIcon extends LitElement {
 		return `pr-icon pr-icon--${this.state}`;
 	}
 
+	get label() {
+		if (!this.state) return 'Pull request';
+
+		return `Pull request ${this.prId ? `#${this.prId}` : ''} is ${this.state}`;
+	}
+
 	override render() {
-		return html`<code-icon
-			class=${this.classes}
-			icon=${this.icon}
-			aria-label=${ifDefined(this.state)}
-		></code-icon>`;
+		if (!this.state) {
+			return html`<code-icon
+				class=${this.classes}
+				icon=${this.icon}
+				aria-label=${ifDefined(this.state)}
+			></code-icon>`;
+		}
+
+		return html`<gl-tooltip>
+			<code-icon class=${this.classes} icon=${this.icon} aria-label=${ifDefined(this.state)}></code-icon>
+			<span slot="content">${this.label}</span>
+		</gl-tooltip>`;
 	}
 }