Adds open details button for pull requests

src/webviews/apps/commitDetails/components/commit-details-app.ts

@@ -24,6 +24,7 @@ import {
 	OpenFileOnRemoteCommand,
 	OpenPullRequestChangesCommand,
 	OpenPullRequestComparisonCommand,
+	OpenPullRequestDetailsCommand,
 	OpenPullRequestOnRemoteCommand,
 	PickCommitCommand,
 	PinCommand,
@@ -58,6 +59,7 @@ import './gl-commit-details';
 import './gl-wip-details';
 import './gl-inspect-nav';
 import './gl-status-nav';
+import type { IssuePullRequest } from '../../shared/components/rich/issue-pull-request';
 
 export const uncommittedSha = '0000000000000000000000000000000000000000';
 
@@ -260,6 +262,11 @@ export class GlCommitDetailsApp extends LitElement {
 			DOM.on<GlWipDetails, undefined>('gl-wip-details', 'gl-patch-create-cancelled', () =>
 				this.onDraftStateChanged(false),
 			),
+			DOM.on<IssuePullRequest, undefined>(
+				'gl-status-nav,issue-pull-request',
+				'gl-issue-pull-request-details',
+				() => this.onBranchAction('open-pr-details'),
+			),
 		];
 	}
 
@@ -523,6 +530,9 @@ export class GlCommitDetailsApp extends LitElement {
 			case 'open-pr-remote':
 				this._hostIpc.sendCommand(OpenPullRequestOnRemoteCommand, undefined);
 				break;
+			case 'open-pr-details':
+				this._hostIpc.sendCommand(OpenPullRequestDetailsCommand, undefined);
+				break;
 		}
 	}
 

src/webviews/apps/commitDetails/components/gl-status-nav.ts

@@ -110,6 +110,7 @@ export class GlStatusNav extends LitElement {
 									.date=${this.wip!.pullRequest!.updatedDate}
 									.dateFormat="${this.preferences?.dateFormat}"
 									.dateStyle="${this.preferences?.dateStyle}"
+									details
 								></issue-pull-request>
 							</div>
 						</gl-popover>`,

src/webviews/apps/commitDetails/components/gl-wip-details.ts

@@ -276,6 +276,7 @@ export class GlWipDetails extends GlDetailsBase {
 						.date=${this.wip.pullRequest.updatedDate}
 						.dateFormat="${this.preferences?.dateFormat}"
 						.dateStyle="${this.preferences?.dateStyle}"
+						details
 					></issue-pull-request>
 				</div>
 				${this.renderSuggestedChanges()}

src/webviews/apps/shared/components/rich/issue-pull-request.ts

@@ -1,7 +1,9 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import '../formatted-date';
+import { when } from 'lit/directives/when.js';
+import '../button';
 import '../code-icon';
+import '../formatted-date';
 
 @customElement('issue-pull-request')
 export class IssuePullRequest extends LitElement {
@@ -11,6 +13,7 @@ export class IssuePullRequest extends LitElement {
 			gap: 0.25rem 0.6rem;
 			justify-content: start;
 			font-size: 1.3rem;
+			grid-template-columns: min-content 1fr min-content;
 		}
 
 		a {
@@ -46,6 +49,12 @@ export class IssuePullRequest extends LitElement {
 			grid-row: 2;
 			margin: 0;
 		}
+
+		.details {
+			grid-column: 3;
+			grid-row: 1 / 3;
+			margin: 0;
+		}
 	`;
 
 	@property()
@@ -72,6 +81,9 @@ export class IssuePullRequest extends LitElement {
 	@property()
 	key = '';
 
+	@property({ type: Boolean })
+	details = false;
+
 	renderDate() {
 		if (this.date === '') {
 			return nothing;
@@ -119,6 +131,26 @@ export class IssuePullRequest extends LitElement {
 				<a href="${this.url}">${this.name}</a>
 			</p>
 			<p class="date">${this.key} ${this.status ? this.status : nothing} ${this.renderDate()}</p>
+			${when(
+				this.details === true,
+				() => html`
+					<p class="details">
+						<gl-button appearance="toolbar" tooltip="View Details" @click=${() => this.onDetailsClicked()}
+							><code-icon icon="info"></code-icon
+						></gl-button>
+					</p>
+				`,
+			)}
 		`;
 	}
+
+	private onDetailsClicked() {
+		this.dispatchEvent(
+			new CustomEvent('gl-issue-pull-request-details', {
+				bubbles: true,
+				cancelable: false,
+				composed: true,
+			}),
+		);
+	}
 }

src/webviews/commitDetails/commitDetailsWebview.ts

@@ -99,6 +99,7 @@ import {
 	OpenFileOnRemoteCommand,
 	OpenPullRequestChangesCommand,
 	OpenPullRequestComparisonCommand,
+	OpenPullRequestDetailsCommand,
 	OpenPullRequestOnRemoteCommand,
 	PickCommitCommand,
 	PinCommand,
@@ -496,6 +497,9 @@ export class CommitDetailsWebviewProvider
 			case OpenPullRequestOnRemoteCommand.is(e):
 				void this.openPullRequestOnRemote();
 				break;
+			case OpenPullRequestDetailsCommand.is(e):
+				void this.showPullRequestDetails();
+				break;
 		}
 	}
 
@@ -662,12 +666,15 @@ export class CommitDetailsWebviewProvider
 		void RepoActions.switchTo(path);
 	}
 
-	private get pullRequestContext(): { pr: PullRequest; repoPath: string } | undefined {
+	private get pullRequestContext():
+		| { pr: PullRequest; repoPath: string; branch?: GitBranch; commit?: GitCommit }
+		| undefined {
 		if (this.mode === 'wip') {
 			if (this._context.wip?.pullRequest == null) return;
 
 			return {
 				repoPath: this._context.wip.repo.path,
+				branch: this._context.wip.branch,
 				pr: this._context.wip.pullRequest,
 			};
 		}
@@ -676,6 +683,7 @@ export class CommitDetailsWebviewProvider
 
 		return {
 			repoPath: this._context.commit!.repoPath,
+			commit: this._context.commit!,
 			pr: this._context.pullRequest,
 		};
 	}
@@ -718,8 +726,15 @@ export class CommitDetailsWebviewProvider
 			pr: { url: url },
 			clipboard: clipboard,
 		});
+	}
+
+	private async showPullRequestDetails() {
+		if (this.pullRequestContext == null) return;
+
+		const { pr, repoPath, branch, commit } = this.pullRequestContext;
+		if (pr == null) return;
 
-		await Promise.resolve();
+		return this.container.pullRequestView.showPullRequest(pr, commit ?? branch ?? repoPath);
 	}
 
 	onRefresh(_force?: boolean | undefined): void {

src/webviews/commitDetails/protocol.ts

@@ -193,6 +193,7 @@ export const SwitchCommand = new IpcCommand(scope, 'switch');
 export const OpenPullRequestChangesCommand = new IpcCommand(scope, 'openPullRequestChanges');
 export const OpenPullRequestComparisonCommand = new IpcCommand(scope, 'openPullRequestComparison');
 export const OpenPullRequestOnRemoteCommand = new IpcCommand(scope, 'openPullRequestOnRemote');
+export const OpenPullRequestDetailsCommand = new IpcCommand(scope, 'openPullRequestDetails');
 
 // REQUESTS