New Source viewer gets search modifier support (#8060)

* Add search modifier support for new Source viewer
* Update screenshots
* Fix prettier.config.js

Author: bvaughn

packages/bvaughn-architecture-demo/components/sources/SourceSearch.module.css

@@ -1,36 +1,48 @@
 .Container {
-  display: flex;
   width: 100%;
+  height: 2.5em;
+  border: 2px solid transparent;
+  border-top-color: var(--color-contrast);
+  display: flex;
+}
+.Container:focus-within {
+  border-color: var(--color-brand);
+}
+
+.InputAndResults {
+  flex: 1 1 auto;
+  padding: 0 0.5em;
+  display: flex;
   align-items: center;
-  padding: 0.5em;
   background-color: var(--background-color-contrast-2);
-  border-top: 1px solid var(--color-contrast);
 }
 
-.Icon {
+.SearchIcon {
   width: 2em;
   height: 2em;
   padding: 0.25em;
   flex: 0 0 2em;
   display: inline-block;
+  color: var(--color-dim);
 }
 
 .Input {
   width: 100%;
   height: 2em;
   padding: 0 0.5ch;
   background: none;
-  border: 2px solid transparent;
+  border: none;
   outline: none;
-  background-color: var(--background-color-default);
+  background-color: var(--background-color-contrast-2);
   color: var(--color-default);
 
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-regular);
 }
 .Input:focus {
-  background-color: var(--background-color-contrast-1);
-  border-color: var(--color-brand);
+  outline: none;
+  border: none;
+  box-shadow: none;
 }
 
 .Results {
@@ -42,20 +54,52 @@
   margin-left: 0.5ch;
   padding: 0 0.5ch;
   font-size: var(--font-size-small);
+  color: var(--color-dim);
 }
 
 .ResultsIconButton {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-regular);
   display: flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
-  color: var(--color-default);
+  color: var(--color-dim);
   padding: 0;
-  width: 1em;
-  height: 1em;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 0.25em;
+}
+.ResultsIconButton:hover:not(.ResultsIconButton:disabled):not(.ResultsIconButtonActive) {
+  color: var(--color-default);
+}
+.ResultsIconButton:disabled {
+  color: var(--color-dimmer);
+}
+.ResultsIconButtonActive {
+  color: var(--background-color-primary-button);
 }
 
 .ResultsIcon {
-  width: 1em;
-  height: 1em;
+  width: 1.5em;
+  height: 1.5em;
   display: inline-block;
+  color: currentColor;
+}
+
+.Modifiers {
+  flex: 0 0 auto;
+  padding: 0 1ch;
+  gap: 1ch;
+  display: flex;
+  align-items: center;
+  background-color: var(--background-color-contrast-2);
+  border-left: 1px solid var(--background-color-default);
+  color: var(--color-dim);
+  user-select: none;
+}
+
+.WholeWordText {
+  text-decoration: underline;
 }

packages/bvaughn-architecture-demo/components/sources/SourceSearch.tsx

@@ -13,6 +13,8 @@ export default function SourceSearch({
 }) {
   const [searchState, searchActions] = useContext(SourceSearchContext);
 
+  const { caseSensitive, regex, wholeWord } = searchState.modifiers;
+
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     searchActions.search(event.currentTarget.value);
   };
@@ -50,20 +52,79 @@ export default function SourceSearch({
     results = (
       <div className={styles.Results} data-test-id="SearchResultsLabel">
         {searchState.index + 1} of {searchState.results.length} results
+      </div>
+    );
+  } else if (searchState.query !== "") {
+    results = <div className={styles.Results}>No results found</div>;
+  }
+
+  return (
+    <div className={styles.Container} data-test-id="SourceSearch">
+      <div className={styles.InputAndResults}>
+        <Icon className={styles.SearchIcon} type="search" />
+        <input
+          autoFocus
+          className={styles.Input}
+          data-test-id="SourceSearchInput"
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          placeholder="Find"
+          ref={inputRef}
+          type="text"
+          value={searchState.query}
+        />
+        {results}
         <button
           className={styles.ResultsIconButton}
           data-test-id="SourceSearchGoToPreviousButton"
+          disabled={searchState.results.length === 0}
           onClick={searchActions.goToPrevious}
         >
           <Icon className={styles.ResultsIcon} type="up" />
         </button>
         <button
           className={styles.ResultsIconButton}
           data-test-id="SourceSearchGoToNextButton"
+          disabled={searchState.results.length === 0}
           onClick={searchActions.goToNext}
         >
           <Icon className={styles.ResultsIcon} type="down" />
         </button>
+      </div>
+      <div className={styles.Modifiers}>
+        Modifiers:
+        <button
+          className={[styles.ResultsIconButton, regex && styles.ResultsIconButtonActive].join(" ")}
+          data-test-id="SearchRegExButton"
+          onClick={() => searchActions.setModifiers({ ...searchState.modifiers, regex: !regex })}
+        >
+          .*
+        </button>
+        <button
+          className={[
+            styles.ResultsIconButton,
+            caseSensitive && styles.ResultsIconButtonActive,
+          ].join(" ")}
+          data-test-id="SearchCaseSensitivityButton"
+          onClick={() =>
+            searchActions.setModifiers({ ...searchState.modifiers, caseSensitive: !caseSensitive })
+          }
+        >
+          Aa
+        </button>
+        <button
+          className={[styles.ResultsIconButton, wholeWord && styles.ResultsIconButtonActive].join(
+            " "
+          )}
+          data-test-id="SearchWholeWordButtonButton"
+          onClick={() =>
+            searchActions.setModifiers({ ...searchState.modifiers, wholeWord: !wholeWord })
+          }
+        >
+          <span className={styles.WholeWordText}>ab</span>
+        </button>
+      </div>
+      <div className={styles.Modifiers}>
         <button
           className={styles.ResultsIconButton}
           data-test-id="SourceSearchClearButton"
@@ -72,34 +133,6 @@ export default function SourceSearch({
           <Icon className={styles.ResultsIcon} type="cancel" />
         </button>
       </div>
-    );
-  } else if (searchState.query !== "") {
-    results = (
-      <div className={styles.Results}>
-        No results found
-        <button className={styles.ResultsIconButton} onClick={searchActions.disable}>
-          <Icon className={styles.ResultsIcon} type="cancel" />
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.Container} data-test-id="SourceSearch">
-      <Icon className={styles.Icon} type="search" />
-      <input
-        autoFocus
-        className={styles.Input}
-        data-test-id="SourceSearchInput"
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        placeholder="Find"
-        ref={inputRef}
-        type="text"
-        value={searchState.query}
-      />
-
-      {results}
     </div>
   );
 }

packages/bvaughn-architecture-demo/components/sources/SourceSearchContext.tsx

@@ -6,15 +6,23 @@ import { ReplayClientContext } from "shared/client/ReplayClientContext";
 
 import useSourceSearch, { Actions, SetScope, State } from "./hooks/useSourceSearch";
 
-export const SourceSearchContext = createContext<[State, Actions]>(null as any);
+export type SearchModifiers = {
+  caseSensitive: boolean;
+  regex: boolean;
+  wholeWord: boolean;
+};
+
+export type SearchContextType = [State, Actions];
+
+export const SourceSearchContext = createContext<SearchContextType>(null as any);
 
 export function SourceSearchContextRoot({ children }: { children: ReactNode }) {
   const client = useContext(ReplayClientContext);
   const { focusedSourceId } = useContext(SourcesContext);
 
-  const [state, actions] = useSourceSearch();
+  const [state, dispatch] = useSourceSearch();
 
-  const context = useMemo<[State, Actions]>(() => [state, actions], [state, actions]);
+  const context = useMemo<SearchContextType>(() => [state, dispatch], [dispatch, state]);
 
   // Keep source search state in sync with the focused source.
   useEffect(() => {
@@ -27,8 +35,8 @@ export function SourceSearchContextRoot({ children }: { children: ReactNode }) {
       }
     }
 
-    updateSourceContents(focusedSourceId, actions.setScope);
-  }, [client, actions, focusedSourceId]);
+    updateSourceContents(focusedSourceId, dispatch.setScope);
+  }, [client, dispatch.setScope, focusedSourceId]);
 
   return <SourceSearchContext.Provider value={context}>{children}</SourceSearchContext.Provider>;
 }

packages/bvaughn-architecture-demo/components/sources/hooks/useSearch.test.tsx

@@ -5,19 +5,26 @@ import useSearch, { Actions, ScopeId, SearchFunction, State } from "./useSearch"
 
 type Item = string;
 type Result = string;
+type QueryData = boolean;
 
 const DEFAULT_ITEMS: Item[] = ["foo", "bar", "baz"];
 const DEFAULT_SCOPE = "default";
 
-function stableSearch(query: string, items: Item[]) {
-  return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
+function stableSearch(query: string, items: Item[], caseSensitive: QueryData | null = false) {
+  const needle = caseSensitive ? query : query.toLowerCase();
+  return items.filter(item => {
+    if (!caseSensitive) {
+      item.toLowerCase();
+    }
+    return item.includes(needle);
+  });
 }
 
 describe("useSearch", () => {
-  let currentActions: Actions | null = null;
-  let currentState: State<Item, Result> | null = null;
+  let currentActions: Actions<QueryData> | null = null;
+  let currentState: State<Item, Result, QueryData> | null = null;
   let renderResult: RenderResult | null = null;
-  let stableSearchMock: jest.MockedFunction<SearchFunction<Item, Result>> = null as any;
+  let stableSearchMock: jest.MockedFunction<SearchFunction<Item, Result, QueryData>> = null as any;
 
   beforeEach(() => {
     stableSearchMock = jest.fn().mockImplementation(stableSearch);
@@ -28,7 +35,7 @@ describe("useSearch", () => {
   });
 
   function Component({ items, scopeId }: { items: Item[]; scopeId: ScopeId }) {
-    const [state, actions] = useSearch<Item, Result>(items, stableSearchMock, scopeId);
+    const [state, actions] = useSearch<Item, Result, QueryData>(items, stableSearchMock, scopeId);
 
     useEffect(() => {
       currentActions = actions;
@@ -66,21 +73,27 @@ describe("useSearch", () => {
     });
   }
 
-  function search(query: string) {
+  function search(query: string, queryData: QueryData = false) {
     act(() => {
-      currentActions?.search(query);
+      currentActions?.search(query, queryData);
     });
   }
 
-  it("should refine search results when query text or items change", async () => {
+  it("should refine search results when query text, items, or query data change", async () => {
     render(DEFAULT_ITEMS);
     search("b");
     expect(currentState?.results).toEqual(["bar", "baz"]);
 
-    search("ba");
+    search("bA");
     expect(currentState?.results).toEqual(["bar", "baz"]);
 
-    search("bar");
+    search("bAr");
+    expect(currentState?.results).toEqual(["bar"]);
+
+    search("bAr", true);
+    expect(currentState?.results).toEqual([]);
+
+    search("bAr", false);
     expect(currentState?.results).toEqual(["bar"]);
 
     search("q");
@@ -214,7 +227,7 @@ describe("useSearch", () => {
       expect(currentState?.results).toEqual(["bar", "baz"]);
     });
 
-    it("should (only) re-run search when query text changes", async () => {
+    it("should (only) re-run search when query or queryData changes", async () => {
       render(DEFAULT_ITEMS);
       expect(stableSearchMock).toHaveBeenCalledTimes(0);
 
@@ -226,6 +239,12 @@ describe("useSearch", () => {
 
       search("ba");
       expect(stableSearchMock).toHaveBeenCalledTimes(2);
+
+      search("ba", true);
+      expect(stableSearchMock).toHaveBeenCalledTimes(3);
+
+      render(DEFAULT_ITEMS);
+      expect(stableSearchMock).toHaveBeenCalledTimes(3);
     });
   });
 });