Add Ctrl/Cmd+click support to open PR changes and session logs in second editor group (#7139)

* Initial plan

* Implement Ctrl/Cmd+click functionality for second editor group

Co-authored-by: rebornix <876920+rebornix@users.noreply.github.com>

* Add tests and documentation for Ctrl/Cmd+click functionality

Co-authored-by: rebornix <876920+rebornix@users.noreply.github.com>

* Add Ctrl/Cmd+click support to open PR changes and session logs in second editor group

Co-authored-by: rebornix <876920+rebornix@users.noreply.github.com>

* rename args

* remove tests.

* improve view group handling

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rebornix <876920+rebornix@users.noreply.github.com>
Co-authored-by: Peng Lyu <penn.lv@gmail.com>

Author: Copilot

src/github/copilotApi.ts

@@ -7,12 +7,12 @@ import fetch from 'cross-fetch';
 import JSZip from 'jszip';
 import * as vscode from 'vscode';
 import { AuthProvider } from '../common/authentication';
+import Logger from '../common/logger';
 import { Remote } from '../common/remote';
 import { OctokitCommon } from './common';
 import { CredentialStore } from './credentials';
 import { LoggingOctokit } from './loggingOctokit';
 import { hasEnterpriseUri } from './utils';
-import Logger from '../common/logger';
 
 const LEARN_MORE_URL = 'https://docs.github.com/en/copilot/how-tos/agents/copilot-coding-agent';
 const PREMIUM_REQUESTS_URL = 'https://docs.github.com/en/copilot/concepts/copilot-billing/understanding-and-managing-requests-in-copilot#what-are-premium-requests';

src/github/pullRequestModel.ts

@@ -1274,7 +1274,7 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 		return this.githubRepository.getStatusChecks(this.number);
 	}
 
-	static async openChanges(folderManager: FolderRepositoryManager, pullRequestModel: PullRequestModel): Promise<void> {
+	static async openChanges(folderManager: FolderRepositoryManager, pullRequestModel: PullRequestModel, openToTheSide?: boolean): Promise<void> {
 		const changeModels = await PullRequestModel.getChangeModels(folderManager, pullRequestModel);
 		const args: [vscode.Uri, vscode.Uri | undefined, vscode.Uri | undefined][] = [];
 		for (const changeModel of changeModels) {
@@ -1285,6 +1285,15 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 			"pr.openChanges" : {}
 		*/
 		folderManager.telemetry.sendTelemetryEvent('pr.openChanges');
+
+		if (openToTheSide) {
+			if (vscode.window.tabGroups.all.length < 2) {
+				await vscode.commands.executeCommand('workbench.action.splitEditor');
+			}
+
+			await vscode.commands.executeCommand('workbench.action.focusSecondEditorGroup');
+		}
+
 		return vscode.commands.executeCommand('vscode.changes', vscode.l10n.t('Changes in Pull Request #{0}', pullRequestModel.number), args);
 	}
 

src/github/pullRequestOverview.ts

@@ -361,7 +361,7 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 			case 'pr.open-diff':
 				return this.openDiff(message);
 			case 'pr.open-changes':
-				return this.openChanges();
+				return this.openChanges(message);
 			case 'pr.resolve-comment-thread':
 				return this.resolveCommentThread(message);
 			case 'pr.checkMergeability':
@@ -481,9 +481,10 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 		}
 	}
 
-	private async openSessionLog(message: IRequestMessage<{ link: SessionLinkInfo }>): Promise<void> {
+	private async openSessionLog(message: IRequestMessage<{ link: SessionLinkInfo; openToTheSide?: boolean }>): Promise<void> {
 		try {
-			await SessionLogViewManager.instance?.openForPull(this._item, message.args.link);
+			const openToTheSide = message.args.openToTheSide || false;
+			await SessionLogViewManager.instance?.openForPull(this._item, message.args.link, openToTheSide);
 		} catch (e) {
 			Logger.error(`Open session log view failed: ${formatError(e)}`, PullRequestOverviewPanel.ID);
 		}
@@ -524,8 +525,9 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 		}
 	}
 
-	private async openChanges(): Promise<void> {
-		return PullRequestModel.openChanges(this._folderRepositoryManager, this._item);
+	private async openChanges(message?: IRequestMessage<{ openToTheSide?: boolean }>): Promise<void> {
+		const openToTheSide = message?.args?.openToTheSide || false;
+		return PullRequestModel.openChanges(this._folderRepositoryManager, this._item, openToTheSide);
 	}
 
 	private async resolveCommentThread(message: IRequestMessage<{ threadId: string, toResolve: boolean, thread: IComment[] }>) {

src/view/sessionLogView.ts

@@ -69,7 +69,7 @@ export class SessionLogViewManager extends Disposable implements vscode.WebviewP
 
 			const sessionLogs = await copilotAgentManager.getSessionLogsFromSessionId(picked.sessionId);
 
-			return this.open(sessionLogs, undefined);
+			return this.open(sessionLogs, undefined, false);
 		}));
 	}
 
@@ -83,7 +83,7 @@ export class SessionLogViewManager extends Disposable implements vscode.WebviewP
 		super.dispose();
 	}
 
-	async openForPull(pullRequest: PullRequestModel, link: SessionLinkInfo): Promise<void> {
+	async openForPull(pullRequest: PullRequestModel, link: SessionLinkInfo, openToTheSide?: boolean): Promise<void> {
 		try {
 			// TODO: We should not block opening the webview here. When does this actually fail?
 
@@ -101,7 +101,7 @@ export class SessionLogViewManager extends Disposable implements vscode.WebviewP
 				existingPanel.revealAndRefresh(sessionLogs);
 				return;
 			} else {
-				return this.open(sessionLogs, pullRequest);
+				return this.open(sessionLogs, pullRequest, openToTheSide);
 			}
 		} catch (error) {
 			Logger.error(`Failed to retrieve session logs: ${error}`, 'SessionLogViewManager');
@@ -118,16 +118,17 @@ export class SessionLogViewManager extends Disposable implements vscode.WebviewP
 		return Array.from(this._panels).find(panel => panel.view.isForPullRequest(pullRequest))?.view;
 	}
 
-	async open(logs: IAPISessionLogs, pullRequest: PullRequestModel | undefined): Promise<void> {
+	async open(logs: IAPISessionLogs, pullRequest: PullRequestModel | undefined, openToTheSide?: boolean): Promise<void> {
 		const copilotApi = await getCopilotApi(this.credentialStore);
 		if (!copilotApi) {
 			return;
 		}
 
+		const viewColumn = openToTheSide ? vscode.ViewColumn.Beside : vscode.ViewColumn.Active;
 		const webviewPanel = vscode.window.createWebviewPanel(
 			SessionLogViewManager.viewType,
 			pullRequest ? vscode.l10n.t(`Session Log (Pull #{0})`, pullRequest.number) : vscode.l10n.t('Session Log'),
-			vscode.ViewColumn.Active,
+			viewColumn,
 			{
 				retainContextWhenHidden: true,
 				enableFindWidget: true

webviews/common/context.tsx

@@ -33,7 +33,7 @@ export class PRContext {
 
 	public checkout = () => this.postMessage({ command: 'pr.checkout' });
 
-	public openChanges = () => this.postMessage({ command: 'pr.open-changes' });
+	public openChanges = (openToTheSide?: boolean) => this.postMessage({ command: 'pr.open-changes', args: { openToTheSide } });
 
 	public copyPrLink = () => this.postMessage({ command: 'pr.copy-prlink' });
 
@@ -258,7 +258,7 @@ export class PRContext {
 		});
 	};
 
-	public openSessionLog = (link: SessionLinkInfo) => this.postMessage({ command: 'pr.open-session-log', args: { link } });
+	public openSessionLog = (link: SessionLinkInfo, openToTheSide?: boolean) => this.postMessage({ command: 'pr.open-session-log', args: { link, openToTheSide } });
 
 	setPR = (pr: PullRequest) => {
 		this.pr = pr;

webviews/components/header.tsx

@@ -105,11 +105,16 @@ function Title({ title, titleHTML, number, url, inEditMode, setEditMode, setCurr
 function ButtonGroup({ isCurrentlyCheckedOut, canEdit, isIssue, repositoryDefaultBranch, setEditMode }) {
 	const { refresh, copyPrLink, copyVscodeDevLink, openChanges } = useContext(PullRequestContext);
 
+	const handleOpenChangesClick = (e: React.MouseEvent) => {
+		const openToTheSide = e.ctrlKey || e.metaKey;
+		openChanges(openToTheSide);
+	};
+
 	return (
 		<div className="button-group">
 			<CheckoutButtons {...{ isCurrentlyCheckedOut, isIssue, repositoryDefaultBranch }} />
 			{!isIssue && (
-				<button title="Open Changes" onClick={openChanges} className="small-button">
+				<button title="Open Changes (Ctrl/Cmd+Click to open in second editor group)" onClick={handleOpenChangesClick} className="small-button">
 					Open Changes
 				</button>
 			)}

webviews/components/timeline.tsx

@@ -440,6 +440,13 @@ const CopilotStartedEventView = (event: CopilotStartedEvent) => {
 	const { createdAt, onBehalfOf, sessionLink } = event;
 	const { openSessionLog } = useContext(PullRequestContext);
 
+	const handleSessionLogClick = (e: React.MouseEvent) => {
+		if (sessionLink) {
+			const openToTheSide = e.ctrlKey || e.metaKey;
+			openSessionLog(sessionLink, openToTheSide);
+		}
+	};
+
 	return (
 		<div className="comment-container commit">
 			<div className="commit-message">
@@ -449,7 +456,7 @@ const CopilotStartedEventView = (event: CopilotStartedEvent) => {
 			</div>
 			{sessionLink ? (
 				<div className="timeline-detail">
-					<a onClick={() => openSessionLog(sessionLink)}><button className='secondary'>View session</button></a>
+					<a onClick={handleSessionLogClick}><button className='secondary' title="View session log (Ctrl/Cmd+Click to open in second editor group)">View session</button></a>
 				</div>)
 				: null}
 			<Timestamp date={createdAt} />
@@ -475,6 +482,11 @@ const CopilotFinishedErrorEventView = (event: CopilotFinishedErrorEvent) => {
 	const { createdAt, onBehalfOf } = event;
 	const { openSessionLog } = useContext(PullRequestContext);
 
+	const handleSessionLogClick = (e: React.MouseEvent) => {
+		const openToTheSide = e.ctrlKey || e.metaKey;
+		openSessionLog(event.sessionLink, openToTheSide);
+	};
+
 	return (
 		<div className="comment-container commit">
 			<div className='timeline-with-detail'>
@@ -484,7 +496,7 @@ const CopilotFinishedErrorEventView = (event: CopilotFinishedErrorEvent) => {
 					<div className="message">Copilot stopped work on behalf of <AuthorLink for={onBehalfOf} /> due to an error</div>
 				</div>
 				<div className="commit-message-detail">
-					<a onClick={() => openSessionLog(event.sessionLink)}>Copilot has encountered an error. See logs for additional details.</a>
+					<a onClick={handleSessionLogClick} title="View session log (Ctrl/Cmd+Click to open in second editor group)">Copilot has encountered an error. See logs for additional details.</a>
 				</div>
 			</div>
 			<Timestamp date={createdAt} />