Adds open search in view option to graph

src/plus/webviews/graph/graphWebview.ts

@@ -69,6 +69,7 @@ import type {
 	GraphComponentConfig,
 	GraphRepository,
 	SearchCommitsParams,
+	SearchOpenInViewParams,
 	State,
 	UpdateColumnParams,
 	UpdateSelectedRepositoryParams,
@@ -89,6 +90,7 @@ import {
 	GetMissingAvatarsCommandType,
 	GetMoreCommitsCommandType,
 	SearchCommitsCommandType,
+	SearchOpenInViewCommandType,
 	UpdateColumnCommandType,
 	UpdateSelectedRepositoryCommandType,
 	UpdateSelectionCommandType,
@@ -325,6 +327,9 @@ export class GraphWebview extends WebviewBase<State> {
 			case SearchCommitsCommandType.method:
 				onIpc(SearchCommitsCommandType, e, params => this.onSearchCommits(params, e.completionId));
 				break;
+			case SearchOpenInViewCommandType.method:
+				onIpc(SearchOpenInViewCommandType, e, params => this.onSearchOpenInView(params));
+				break;
 			case UpdateColumnCommandType.method:
 				onIpc(UpdateColumnCommandType, e, params => this.onColumnUpdated(params));
 				break;
@@ -619,6 +624,19 @@ export class GraphWebview extends WebviewBase<State> {
 		);
 	}
 
+	private onSearchOpenInView(e: SearchOpenInViewParams) {
+		if (this.repository == null) return;
+
+		void this.container.searchAndCompareView.search(this.repository.path, e.search, {
+			label: { label: `for ${e.search.query}` },
+			reveal: {
+				select: true,
+				focus: false,
+				expand: true,
+			},
+		});
+	}
+
 	private onRepositorySelectionChanged(e: UpdateSelectedRepositoryParams) {
 		this.repository = this.container.git.getRepository(e.path);
 	}

src/plus/webviews/graph/protocol.ts

@@ -117,7 +117,12 @@ export interface SearchCommitsParams {
 	limit?: number;
 	more?: boolean;
 }
-export const SearchCommitsCommandType = new IpcCommandType<SearchCommitsParams>('graph/searchCommits');
+export const SearchCommitsCommandType = new IpcCommandType<SearchCommitsParams>('graph/search');
+
+export interface SearchOpenInViewParams {
+	search: SearchQuery;
+}
+export const SearchOpenInViewCommandType = new IpcCommandType<SearchOpenInViewParams>('graph/search/openInView');
 
 export interface UpdateColumnParams {
 	name: GraphColumnName;
@@ -207,6 +212,6 @@ export interface DidSearchCommitsParams {
 	selectedRows?: { [id: string]: true };
 }
 export const DidSearchCommitsNotificationType = new IpcNotificationType<DidSearchCommitsParams>(
-	'graph/commits/didSearch',
+	'graph/didSearch',
 	true,
 );

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -43,6 +43,7 @@ export interface GraphWrapperProps extends State {
 		search: SearchQuery,
 		options?: { limit?: number; more?: boolean },
 	) => Promise<DidSearchCommitsParams | undefined>;
+	onSearchOpenInView?: (search: SearchQuery) => void;
 	onDismissBanner?: (key: DismissBannerParams['key']) => void;
 	onSelectionChange?: (selection: { id: string; type: GitGraphRowType }[]) => void;
 	onEnsureCommitPromise?: (id: string, select: boolean) => Promise<DidEnsureCommitParams | undefined>;
@@ -164,6 +165,7 @@ export function GraphWrapper({
 	onMoreCommits,
 	onSearchCommits,
 	onSearchCommitsPromise,
+	onSearchOpenInView,
 	onSelectionChange,
 	nonce,
 	mixedColumnColors,
@@ -358,6 +360,12 @@ export function GraphWrapper({
 		onSearchCommits?.(isValid ? detail : undefined);
 	}, 250);
 
+	const handleSearchOpenInView = () => {
+		if (searchQuery == null) return;
+
+		onSearchOpenInView?.(searchQuery);
+	};
+
 	useLayoutEffect(() => {
 		if (mainRef.current === null) return;
 
@@ -630,6 +638,7 @@ export function GraphWrapper({
 							onChange={e => handleSearchInput(e as CustomEvent<SearchQuery>)}
 							onPrevious={() => handleSearchNavigation(false)}
 							onNext={() => handleSearchNavigation(true)}
+							onOpenInView={() => handleSearchOpenInView()}
 						/>
 					</div>
 				</header>

src/webviews/apps/plus/graph/graph.tsx

@@ -27,6 +27,7 @@ import {
 	GetMissingAvatarsCommandType,
 	GetMoreCommitsCommandType,
 	SearchCommitsCommandType,
+	SearchOpenInViewCommandType,
 	UpdateColumnCommandType,
 	UpdateSelectedRepositoryCommandType as UpdateRepositorySelectionCommandType,
 	UpdateSelectionCommandType,
@@ -81,6 +82,7 @@ export class GraphApp extends App<State> {
 					onMoreCommits={(...params) => this.onGetMoreCommits(...params)}
 					onSearchCommits={(...params) => this.onSearchCommits(...params)}
 					onSearchCommitsPromise={(...params) => this.onSearchCommitsPromise(...params)}
+					onSearchOpenInView={(...params) => this.onSearchOpenInView(...params)}
 					onSelectionChange={debounce(
 						(selection: { id: string; type: GitGraphRowType }[]) => this.onSelectionChanged(selection),
 						250,
@@ -338,6 +340,10 @@ export class GraphApp extends App<State> {
 		}
 	}
 
+	private onSearchOpenInView(search: SearchQuery) {
+		this.sendCommand(SearchOpenInViewCommandType, { search: search });
+	}
+
 	private async onEnsureCommitPromise(id: string, select: boolean) {
 		try {
 			return await this.sendCommandWithCompletion(

src/webviews/apps/shared/components/search/react.tsx

@@ -9,5 +9,6 @@ export const SearchBox = wrap(searchBoxComponent, {
 		onChange: 'change',
 		onPrevious: 'previous',
 		onNext: 'next',
+		onOpenInView: 'openinview',
 	},
 });

src/webviews/apps/shared/components/search/search-box.ts

@@ -44,6 +44,18 @@ const template = html<SearchBox>`<template>
 		<button type="button" class="button" ?disabled="${x => !x.hasNext}" @click="${(x, c) => x.handleNext(c.event)}">
 			<code-icon icon="arrow-down" aria-label="Next Match (Enter)" title="Next Match (Enter)"></code-icon>
 		</button>
+		<button
+			type="button"
+			class="button"
+			?disabled="${x => !x.value}"
+			@click="${(x, c) => x.handleOpenInView(c.event)}"
+		>
+			<code-icon
+				icon="link-external"
+				aria-label="Show Results in Side Bar"
+				title="Show Results in Side Bar"
+			></code-icon>
+		</button>
 	</div>
 </template>`;
 
@@ -228,4 +240,9 @@ export class SearchBox extends FASTElement {
 		e.stopImmediatePropagation();
 		this.next();
 	}
+
+	handleOpenInView(e: Event) {
+		e.stopImmediatePropagation();
+		this.$emit('openinview');
+	}
 }