experimental search input: Remove clear and focus buttons (#47690)

This commit removes the clear and focus buttons from the input to make
it less noisy. It also refactors the search page input to reuse the lazy
loading functions introduced in #47536.

client/branded/src/search-ui/input/experimental/CodeMirrorQueryInputWrapper.tsx

@@ -3,8 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { defaultKeymap, historyKeymap, history as codemirrorHistory } from '@codemirror/commands'
 import { Compartment, EditorState, Extension, Prec } from '@codemirror/state'
 import { EditorView, keymap, drawSelection } from '@codemirror/view'
-import { mdiClose } from '@mdi/js'
-import classNames from 'classnames'
 import inRange from 'lodash/inRange'
 import { useNavigate } from 'react-router-dom-v5-compat'
 import useResizeObserver from 'use-resize-observer'
@@ -15,7 +13,6 @@ import { SearchPatternType } from '@sourcegraph/shared/src/graphql-operations'
 import { Shortcut } from '@sourcegraph/shared/src/react-shortcuts'
 import { QueryChangeSource, QueryState } from '@sourcegraph/shared/src/search'
 import { getTokenLength } from '@sourcegraph/shared/src/search/query/utils'
-import { Icon } from '@sourcegraph/wildcard'
 
 import { singleLine, placeholder as placeholderExtension } from '../codemirror'
 import { parseInputAsQuery, tokens } from '../codemirror/parsedQuery'
@@ -327,16 +324,10 @@ export const CodeMirrorQueryInputWrapper: React.FunctionComponent<
         editorRef.current?.contentDOM.focus()
     }, [editorRef])
 
-    const clear = useCallback(() => {
-        onChange({ query: '' })
-    }, [onChange])
-
     const { ref: spacerRef, height: spacerHeight } = useResizeObserver({
         ref: focusContainerRef,
     })
 
-    const hasValue = queryState.query.length > 0
-
     return (
         <div className={styles.container}>
             {/* eslint-disable-next-line react/forbid-dom-props */}
@@ -344,26 +335,6 @@ export const CodeMirrorQueryInputWrapper: React.FunctionComponent<
             <div className={styles.root}>
                 <div ref={spacerRef} className={styles.focusContainer}>
                     <div ref={setContainer} className="d-contents" />
-                    <button
-                        type="button"
-                        className={classNames(styles.inputButton, hasValue && styles.showWhenFocused)}
-                        onClick={clear}
-                    >
-                        <Icon svgPath={mdiClose} aria-label="Clear" />
-                    </button>
-                    <button
-                        type="button"
-                        className={classNames(
-                            styles.inputButton,
-                            styles.globalShortcut,
-                            styles.hideWhenFocused,
-                            'mr-2'
-                        )}
-                        onClick={focus}
-                    >
-                        /
-                    </button>
-                    {children && <span className={classNames(styles.separator, !hasValue && styles.hideWhenFocused)} />}
                     {children}
                 </div>
                 <div ref={setSuggestionsContainer} className={styles.suggestions} />

client/web/src/search/home/SearchPageInput.tsx

@@ -7,7 +7,7 @@ import shallow from 'zustand/shallow'
 import { SearchBox, Toggles } from '@sourcegraph/branded'
 // The experimental search input should be shown on the search home page
 // eslint-disable-next-line no-restricted-imports
-import { LazyCodeMirrorQueryInput, searchHistoryExtension } from '@sourcegraph/branded/src/search-ui/experimental'
+import { LazyCodeMirrorQueryInput } from '@sourcegraph/branded/src/search-ui/experimental'
 import { TraceSpanProvider } from '@sourcegraph/observability-client'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
@@ -37,7 +37,7 @@ import {
 } from '../../stores'
 import { ThemePreferenceProps } from '../../theme'
 import { submitSearch } from '../helpers'
-import { createSuggestionsSource } from '../input/suggestions'
+import { useLazyCreateSuggestions, useLazyHistoryExtension } from '../input/lazy'
 import { useRecentSearches } from '../input/useRecentSearches'
 
 import styles from './SearchPageInput.module.scss'
@@ -130,39 +130,30 @@ export const SearchPageInput: React.FunctionComponent<React.PropsWithChildren<Pr
     const isTouchOnlyDevice =
         !window.matchMedia('(any-pointer:fine)').matches && window.matchMedia('(any-hover:none)').matches
 
-    const suggestionSource = useMemo(
-        () =>
-            createSuggestionsSource({
+    const suggestionSource = useLazyCreateSuggestions(
+        experimentalQueryInput,
+        useMemo(
+            () => ({
                 platformContext: props.platformContext,
                 authenticatedUser: props.authenticatedUser,
                 fetchSearchContexts: props.fetchSearchContexts,
                 getUserSearchContextNamespaces: props.getUserSearchContextNamespaces,
                 isSourcegraphDotCom: props.isSourcegraphDotCom,
             }),
-        [
-            props.platformContext,
-            props.authenticatedUser,
-            props.fetchSearchContexts,
-            props.getUserSearchContextNamespaces,
-            props.isSourcegraphDotCom,
-        ]
+            [
+                props.platformContext,
+                props.authenticatedUser,
+                props.fetchSearchContexts,
+                props.getUserSearchContextNamespaces,
+                props.isSourcegraphDotCom,
+            ]
+        )
     )
 
-    const experimentalExtensions = useMemo(
-        () =>
-            experimentalQueryInput
-                ? [
-                      searchHistoryExtension({
-                          mode: {
-                              name: 'History',
-                              placeholder: 'Filter history',
-                          },
-                          source: () => recentSearchesRef.current ?? [],
-                          submitQuery: query => submitSearchOnChangeRef.current({ query }),
-                      }),
-                  ]
-                : [],
-        [experimentalQueryInput, recentSearchesRef, submitSearchOnChangeRef]
+    const experimentalExtensions = useLazyHistoryExtension(
+        experimentalQueryInput,
+        recentSearchesRef,
+        submitSearchOnChangeRef
     )
 
     const input = experimentalQueryInput ? (