Adds filter button to graph search box (#3686)

* Adds filter button to graph search box

* Remembers filter setting globally

Author: axosoft-ramint

src/constants.search.ts

@@ -42,6 +42,7 @@ export const searchOperationHelpRegex =
 
 export interface SearchQuery {
 	query: string;
+	filter?: boolean;
 	matchAll?: boolean;
 	matchCase?: boolean;
 	matchRegex?: boolean;

src/constants.storage.ts

@@ -71,6 +71,7 @@ export type GlobalStorage = {
 	'launchpad:groups:collapsed': StoredLaunchpadGroup[];
 	'launchpad:indicator:hasLoaded': boolean;
 	'launchpad:indicator:hasInteracted': string;
+	'graph:searchMode': StoredGraphSearchMode;
 } & { [key in `confirm:ai:tos:${AIProviders}`]: boolean } & {
 	[key in `provider:authentication:skip:${string}`]: boolean;
 } & { [key in `gk:${string}:checkin`]: Stored<StoredGKCheckInResponse> } & {
@@ -231,6 +232,8 @@ export interface StoredGraphFilters {
 
 export type StoredGraphRefType = 'head' | 'remote' | 'tag';
 
+export type StoredGraphSearchMode = 'normal' | 'filter';
+
 export interface StoredGraphExcludedRef {
 	id: string;
 	type: StoredGraphRefType;

src/plus/webviews/graph/graphWebview.ts

@@ -175,6 +175,7 @@ import type {
 	UpdateColumnsParams,
 	UpdateExcludeTypesParams,
 	UpdateGraphConfigurationParams,
+	UpdateGraphSearchModeParams,
 	UpdateIncludedRefsParams,
 	UpdateRefsVisibilityParams,
 	UpdateSelectionParams,
@@ -212,6 +213,7 @@ import {
 	UpdateColumnsCommand,
 	UpdateExcludeTypesCommand,
 	UpdateGraphConfigurationCommand,
+	UpdateGraphSearchModeCommand,
 	UpdateIncludedRefsCommand,
 	UpdateRefsVisibilityCommand,
 	UpdateSelectionCommand,
@@ -758,6 +760,9 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			case UpdateGraphConfigurationCommand.is(e):
 				this.updateGraphConfig(e.params);
 				break;
+			case UpdateGraphSearchModeCommand.is(e):
+				this.updateGraphSearchMode(e.params);
+				break;
 			case UpdateExcludeTypesCommand.is(e):
 				this.updateExcludedTypes(this._graph?.repoPath, e.params);
 				break;
@@ -837,6 +842,10 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 		}
 	}
 
+	updateGraphSearchMode(params: UpdateGraphSearchModeParams) {
+		void this.container.storage.store('graph:searchMode', params.searchMode);
+	}
+
 	private _showActiveSelectionDetailsDebounced:
 		| Deferrable<GraphWebviewProvider['showActiveSelectionDetails']>
 		| undefined = undefined;
@@ -2497,6 +2506,8 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			});
 		}
 
+		const defaultSearchMode = this.container.storage.get('graph:searchMode') ?? 'normal';
+
 		return {
 			...this.host.baseWebviewState,
 			windowFocused: this.isWindowFocused,
@@ -2543,6 +2554,7 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			includeOnlyRefs: refsVisibility.includeOnlyRefs,
 			nonce: this.host.cspNonce,
 			workingTreeStats: getSettledValue(workingStatsResult) ?? { added: 0, deleted: 0, modified: 0 },
+			defaultSearchMode: defaultSearchMode,
 		};
 	}
 

src/plus/webviews/graph/protocol.ts

@@ -64,6 +64,7 @@ export type GraphMissingRefsMetadata = Record</*id*/ string, /*missingType*/ Gra
 export type GraphPullRequestMetadata = PullRequestMetadata;
 
 export type GraphRefMetadataTypes = 'upstream' | 'pullRequest' | 'issue';
+export type GraphSearchMode = 'normal' | 'filter';
 
 export type GraphScrollMarkerTypes =
 	| 'selection'
@@ -115,6 +116,7 @@ export interface State extends WebviewState {
 	nonce?: string;
 	workingTreeStats?: GraphWorkingTreeStats;
 	searchResults?: DidSearchParams['results'];
+	defaultSearchMode?: GraphSearchMode;
 	excludeRefs?: GraphExcludeRefs;
 	excludeTypes?: GraphExcludeTypes;
 	includeOnlyRefs?: GraphIncludeOnlyRefs;
@@ -299,6 +301,11 @@ export const UpdateGraphConfigurationCommand = new IpcCommand<UpdateGraphConfigu
 	'configuration/update',
 );
 
+export interface UpdateGraphSearchModeParams {
+	searchMode: GraphSearchMode;
+}
+export const UpdateGraphSearchModeCommand = new IpcCommand<UpdateGraphSearchModeParams>(scope, 'search/update/mode');
+
 export interface UpdateIncludedRefsParams {
 	branchesVisibility?: GraphBranchesVisibility;
 	refs?: GraphIncludeOnlyRef[];

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

@@ -41,6 +41,7 @@ import type {
 	GraphMissingRefsMetadata,
 	GraphRefMetadataItem,
 	GraphRepository,
+	GraphSearchMode,
 	GraphSearchResults,
 	GraphSearchResultsError,
 	InternalNotificationType,
@@ -83,7 +84,10 @@ import { GlFeatureBadge } from '../../shared/components/react/feature-badge';
 import { GlFeatureGate } from '../../shared/components/react/feature-gate';
 import { GlIssuePullRequest } from '../../shared/components/react/issue-pull-request';
 import { GlSearchBox } from '../../shared/components/search/react';
-import type { SearchNavigationEventDetail } from '../../shared/components/search/search-box';
+import type {
+	SearchModeChangeEventDetail,
+	SearchNavigationEventDetail,
+} from '../../shared/components/search/search-box';
 import type { DateTimeFormat } from '../../shared/date';
 import { formatDate, fromNow } from '../../shared/date';
 import { emitTelemetrySentEvent } from '../../shared/telemetry';
@@ -100,6 +104,7 @@ export interface GraphWrapperProps {
 	onChangeColumns?: (colsSettings: GraphColumnsConfig) => void;
 	onChangeExcludeTypes?: (key: keyof GraphExcludeTypes, value: boolean) => void;
 	onChangeGraphConfiguration?: (changes: UpdateGraphConfigurationParams['changes']) => void;
+	onChangeGraphSearchMode?: (searchMode: GraphSearchMode) => void;
 	onChangeRefIncludes?: (branchesVisibility: GraphBranchesVisibility, refs?: GraphRefOptData[]) => void;
 	onChangeRefsVisibility?: (refs: GraphExcludedRef[], visible: boolean) => void;
 	onChangeSelection?: (rows: GraphRow[]) => void;
@@ -226,6 +231,7 @@ export function GraphWrapper({
 	onChangeColumns,
 	onChangeExcludeTypes,
 	onChangeGraphConfiguration,
+	onChangeGraphSearchMode,
 	onChangeRefIncludes,
 	onChangeRefsVisibility,
 	onChangeSelection,
@@ -629,6 +635,11 @@ export function GraphWrapper({
 		onSearchOpenInView?.(searchQuery);
 	};
 
+	const handleSearchModeChange = (e: CustomEvent<SearchModeChangeEventDetail>) => {
+		const { searchMode } = e.detail;
+		onChangeGraphSearchMode?.(searchMode);
+	};
+
 	const ensureSearchResultRow = async (id: string): Promise<string | undefined> => {
 		if (onEnsureRowPromise == null) return id;
 		if (ensuredIds.current.has(id)) return id;
@@ -1379,13 +1390,15 @@ export function GraphWrapper({
 								valid={Boolean(searchQuery?.query && searchQuery.query.length > 2)}
 								more={searchResults?.paging?.hasMore ?? false}
 								searching={searching}
+								filter={state.defaultSearchMode === 'filter'}
 								value={searchQuery?.query ?? ''}
 								errorMessage={searchResultsError?.error ?? ''}
 								resultsHidden={searchResultsHidden}
 								resultsLoaded={searchResults != null}
 								onChange={e => handleSearchInput(e)}
 								onNavigate={e => handleSearchNavigation(e)}
 								onOpenInView={() => handleSearchOpenInView()}
+								onSearchModeChange={e => handleSearchModeChange(e)}
 							/>
 							<span>
 								<span className="action-divider"></span>
@@ -1609,6 +1622,7 @@ export function GraphWrapper({
 							refMetadataById={refsMetadata}
 							rowsStats={rowsStats}
 							rowsStatsLoading={rowsStatsLoading}
+							searchMode={searchQuery?.filter ? 'filter' : 'normal'}
 							shaLength={graphConfig?.idLength}
 							shiftSelectMode="simple"
 							suppressNonRefRowTooltips

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

@@ -13,6 +13,7 @@ import type {
 	GraphExcludeTypes,
 	GraphMissingRefsMetadata,
 	GraphRefMetadataItem,
+	GraphSearchMode,
 	InternalNotificationType,
 	State,
 	UpdateGraphConfigurationParams,
@@ -49,6 +50,7 @@ import {
 	UpdateColumnsCommand,
 	UpdateExcludeTypesCommand,
 	UpdateGraphConfigurationCommand,
+	UpdateGraphSearchModeCommand,
 	UpdateIncludedRefsCommand,
 	UpdateRefsVisibilityCommand,
 	UpdateSelectionCommand,
@@ -104,6 +106,7 @@ export class GraphApp extends App<State> {
 					)}
 					onChangeExcludeTypes={this.onExcludeTypesChanged.bind(this)}
 					onChangeGraphConfiguration={this.onGraphConfigurationChanged.bind(this)}
+					onChangeGraphSearchMode={this.onGraphSearchModeChanged.bind(this)}
 					onChangeRefIncludes={this.onRefIncludesChanged.bind(this)}
 					onChangeRefsVisibility={(refs: GraphExcludedRef[], visible: boolean) =>
 						this.onRefsVisibilityChanged(refs, visible)
@@ -654,6 +657,10 @@ export class GraphApp extends App<State> {
 		this.sendCommand(UpdateGraphConfigurationCommand, { changes: changes });
 	}
 
+	private onGraphSearchModeChanged(searchMode: GraphSearchMode) {
+		this.sendCommand(UpdateGraphSearchModeCommand, { searchMode: searchMode });
+	}
+
 	private onSelectionChanged(rows: GraphRow[]) {
 		const selection = rows.filter(r => r != null).map(r => ({ id: r.sha, type: r.type as GitGraphRowType }));
 		this._telemetry.sendEvent({ name: 'graph/row/selected', data: { rows: selection.length } });

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

@@ -10,5 +10,6 @@ export const GlSearchBox = reactWrapper(GlSearchBoxWC, {
 		onChange: 'gl-search-inputchange' as EventName<CustomEventType<'gl-search-inputchange'>>,
 		onNavigate: 'gl-search-navigate' as EventName<CustomEventType<'gl-search-navigate'>>,
 		onOpenInView: 'gl-search-openinview' as EventName<CustomEventType<'gl-search-openinview'>>,
+		onSearchModeChange: 'gl-search-modechange' as EventName<CustomEventType<'gl-search-modechange'>>,
 	},
 });

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

@@ -7,13 +7,13 @@ import type { SearchQuery } from '../../../../../constants.search';
 import { pluralize } from '../../../../../system/string';
 import { DOM } from '../../dom';
 import { GlElement } from '../element';
-import type { GlSearchInput, SearchNavigationEventDetail } from './search-input';
+import type { GlSearchInput, SearchModeChangeEventDetail, SearchNavigationEventDetail } from './search-input';
 import '../code-icon';
 import '../overlays/tooltip';
 import '../progress';
 import './search-input';
 
-export { SearchNavigationEventDetail };
+export { SearchModeChangeEventDetail, SearchNavigationEventDetail };
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -131,6 +131,9 @@ export class GlSearchBox extends GlElement {
 	@property({ type: Boolean })
 	matchRegex = true;
 
+	@property({ type: Boolean })
+	filter = false;
+
 	@property({ type: Number })
 	total = 0;
 
@@ -266,6 +269,7 @@ export class GlSearchBox extends GlElement {
 				id="search-input"
 				exportparts="search: search"
 				.errorMessage="${this.errorMessage}"
+				.filter=${this.filter}
 				.label="${this.label}"
 				.placeholder="${this.placeholder}"
 				.matchAll="${this.matchAll}"

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

@@ -15,6 +15,10 @@ export interface SearchNavigationEventDetail {
 	direction: 'first' | 'previous' | 'next' | 'last';
 }
 
+export interface SearchModeChangeEventDetail {
+	searchMode: 'normal' | 'filter';
+}
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'gl-search-input': GlSearchInput;
@@ -23,6 +27,7 @@ declare global {
 	interface GlobalEventHandlersEventMap {
 		'gl-search-inputchange': CustomEvent<SearchQuery>;
 		'gl-search-navigate': CustomEvent<SearchNavigationEventDetail>;
+		'gl-search-modechange': CustomEvent<SearchModeChangeEventDetail>;
 	}
 }
 
@@ -302,6 +307,7 @@ export class GlSearchInput extends GlElement {
 	@property({ type: String }) label = 'Search';
 	@property({ type: String }) placeholder = 'Search...';
 	@property({ type: String }) value = '';
+	@property({ type: Boolean }) filter = false;
 	@property({ type: Boolean }) matchAll = false;
 	@property({ type: Boolean }) matchCase = false;
 	@property({ type: Boolean }) matchRegex = true;
@@ -380,6 +386,12 @@ export class GlSearchInput extends GlElement {
 		this.debouncedOnSearchChanged();
 	}
 
+	handleFilter(_e: Event) {
+		this.filter = !this.filter;
+		this.emit('gl-search-modechange', { searchMode: this.filter ? 'filter' : 'normal' });
+		this.debouncedOnSearchChanged();
+	}
+
 	handleKeyup(_e: KeyboardEvent) {
 		this.updateHelpText();
 	}
@@ -423,6 +435,7 @@ export class GlSearchInput extends GlElement {
 	private onSearchChanged() {
 		const search: SearchQuery = {
 			query: this.value,
+			filter: this.filter,
 			matchAll: this.matchAll,
 			matchCase: this.matchCase,
 			matchRegex: this.matchRegex,
@@ -508,6 +521,18 @@ export class GlSearchInput extends GlElement {
 					</menu-item>
 				</div>
 			</gl-popover>
+			<gl-tooltip hoist placement="top" content="Filter Commits">
+				<button
+					class="action-button"
+					type="button"
+					role="checkbox"
+					aria-label="Filter Commits"
+					aria-checked="${this.filter}"
+					@click="${this.handleFilter}"
+				>
+					<code-icon icon="list-filter"></code-icon>
+				</button>
+			</gl-tooltip>
 			<div class="field">
 				<input
 					id="search"