Adds ability to search commits by date in commit graph

Author: nzaytsev

src/constants.search.ts

@@ -1,5 +1,14 @@
-type SearchOperatorsShortForm = '' | '=:' | '@:' | '#:' | '?:' | '~:' | 'is:';
-export type SearchOperatorsLongForm = 'message:' | 'author:' | 'commit:' | 'file:' | 'change:' | 'type:';
+type SearchOperatorsShortForm = '' | '=:' | '@:' | '#:' | '?:' | '~:' | 'is:' | 'after:' | 'before:';
+export type SearchOperatorsLongForm =
+	| 'message:'
+	| 'author:'
+	| 'commit:'
+	| 'file:'
+	| 'change:'
+	| 'type:'
+	| 'date:'
+	| 'after:'
+	| 'before:';
 export type SearchOperators = SearchOperatorsShortForm | SearchOperatorsLongForm;
 
 export const searchOperators = new Set<string>([
@@ -16,6 +25,9 @@ export const searchOperators = new Set<string>([
 	'change:',
 	'is:',
 	'type:',
+	'date:',
+	'after:',
+	'before:',
 ]);
 
 export const searchOperatorsToLongFormMap = new Map<SearchOperators, SearchOperatorsLongForm>([
@@ -32,13 +44,16 @@ export const searchOperatorsToLongFormMap = new Map<SearchOperators, SearchOpera
 	['change:', 'change:'],
 	['is:', 'type:'],
 	['type:', 'type:'],
+	['after:', 'after:'],
+	['before:', 'before:'],
+	['date:', 'date:'],
 ]);
 
 export const searchOperationRegex =
-	/(?:(?<op>=:|message:|@:|author:|#:|commit:|\?:|file:|~:|change:|is:|type:)\s?(?<value>".+?"|\S+}?))|(?<text>\S+)(?!(?:=|message|@|author|#|commit|\?|file|~|change|is|type):)/g;
+	/(?:(?<op>=:|message:|@:|author:|#:|commit:|\?:|file:|~:|change:|is:|type:|date:|after:|before:)\s?(?<value>".+?"|\S+}?))|(?<text>\S+)(?!(?:=|message|@|author|#|commit|\?|file|~|change|is|type):)/g;
 
 export const searchOperationHelpRegex =
-	/(?:^|(\b|\s)*)((=:|message:|@:|author:|#:|commit:|\?:|file:|~:|change:|is:|type:)(?:"[^"]*"?|\w*))(?:$|(\b|\s))/g;
+	/(?:^|(\b|\s)*)((=:|message:|@:|author:|#:|commit:|\?:|file:|~:|change:|is:|type:|date:|after:|before:)(?:"[^"]*"?|\w*))(?:$|(\b|\s))/g;
 
 export interface SearchQuery {
 	query: string;

src/git/search.ts

@@ -213,6 +213,25 @@ export function getGitArgsFromSearchQuery(
 						}
 					}
 
+					break;
+				case 'date:':
+					for (const value of values) {
+						const date = new Date(value);
+						searchArgs.add('--after').add(date.toISOString());
+						searchArgs.add('--before').add(new Date(date.getTime() + 1000 * 60 * 60 * 24).toISOString());
+					}
+					break;
+				case 'after:':
+					for (const value of values) {
+						const date = new Date(value);
+						searchArgs.add('--after').add(date.toISOString());
+					}
+					break;
+				case 'before:':
+					for (const value of values) {
+						const date = new Date(value);
+						searchArgs.add('--before').add(date.toISOString());
+					}
 					break;
 			}
 		}

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

@@ -1,3 +1,4 @@
+import type { TemplateResult } from 'lit';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import type { SearchOperators, SearchOperatorsLongForm, SearchQuery } from '../../../../../constants.search';
@@ -389,7 +390,23 @@ export class GlSearchInput extends GlElement {
 		this.searchHistoryPos = this.searchHistory.length - 1;
 	}
 
-	override render(): unknown {
+	private padDate(date: number) {
+		let stringDate = date.toString();
+		if (stringDate.length < 2) {
+			stringDate = `0${stringDate}`;
+		}
+		return stringDate;
+	}
+
+	private handleInsertDateToken(tokenPrefix: string) {
+		const currentDate = new Date();
+		const year = currentDate.getFullYear();
+		const month = this.padDate(currentDate.getMonth() + 1);
+		const date = this.padDate(currentDate.getDate());
+		this.handleInsertToken(`${tokenPrefix}${year}-${month}-${date}`);
+	}
+
+	override render(): TemplateResult {
 		return html`<div class="field">
 				<div class="controls controls__start">
 					<gl-button
@@ -486,6 +503,33 @@ export class GlSearchInput extends GlElement {
 									Type <small>type:stash or is:stash</small>
 								</button>
 							</menu-item>
+							<menu-item role="none">
+								<button
+									class="menu-button"
+									type="button"
+									@click="${() => this.handleInsertDateToken('date:')}"
+								>
+									Date <small>date:YYYY-MM-dd</small>
+								</button>
+							</menu-item>
+							<menu-item role="none">
+								<button
+									class="menu-button"
+									type="button"
+									@click="${() => this.handleInsertDateToken('after:')}"
+								>
+									Date from <small>after:YYYY-MM-dd</small>
+								</button>
+							</menu-item>
+							<menu-item role="none">
+								<button
+									class="menu-button"
+									type="button"
+									@click="${() => this.handleInsertDateToken(`before:`)}"
+								>
+									Date to <small>before:YYYY-MM-dd</small>
+								</button>
+							</menu-item>
 						</div>
 					</gl-popover>
 				</div>