move search bar near version picker (#55404)

Author: Ebonsignori

src/fixtures/tests/playwright-rendering.spec.ts

@@ -79,7 +79,7 @@ test('open new search, and perform a general search', async ({ page }) => {
     window.overrideControlGroup('ai_search_experiment', 'treatment')
   })
 
-  await page.getByTestId('search').click()
+  await page.locator('[data-testid="search"]:visible').click()
 
   await page.getByTestId('overlay-search-input').fill('serve playwright')
   // Wait for the results to load
@@ -112,7 +112,7 @@ test('open new search, and select a general search article', async ({ page }) =>
     window.overrideControlGroup('ai_search_experiment', 'treatment')
   })
 
-  await page.getByTestId('search').click()
+  await page.locator('[data-testid="search"]:visible').click()
 
   await page.getByTestId('overlay-search-input').fill('serve playwright')
   // Let new suggestions load
@@ -138,7 +138,7 @@ test('open new search, and get auto-complete results', async ({ page }) => {
     window.overrideControlGroup('ai_search_experiment', 'treatment')
   })
 
-  await page.getByTestId('search').click()
+  await page.locator('[data-testid="search"]:visible').click()
 
   let listGroup = page.getByTestId('ai-autocomplete-suggestions')
 

src/frame/components/page-header/Header.module.scss

@@ -41,3 +41,13 @@
     display: none;
   }
 }
+
+.displayOverLarge {
+  display: none;
+  visibility: none;
+
+  @include breakpoint(lg) {
+    display: flex !important;
+    visibility: visible !important;
+  }
+}

src/frame/components/page-header/Header.tsx

@@ -14,14 +14,17 @@ import { Breadcrumbs } from 'src/frame/components/page-header/Breadcrumbs'
 import { VersionPicker } from 'src/versions/components/VersionPicker'
 import { SidebarNav } from 'src/frame/components/sidebar/SidebarNav'
 import { AllProductsLink } from 'src/frame/components/sidebar/AllProductsLink'
-
-import styles from './Header.module.scss'
+import { SearchBarButton } from '@/search/components/input/SearchBarButton'
 import { OldHeaderSearchAndWidgets } from './OldHeaderSearchAndWidgets'
 import { HeaderSearchAndWidgets } from './HeaderSearchAndWidgets'
 import { useInnerWindowWidth } from './hooks/useInnerWindowWidth'
 import { EXPERIMENTS } from '@/events/components/experiments/experiments'
 import { useShouldShowExperiment } from '@/events/components/experiments/useShouldShowExperiment'
 import { useQueryParam } from '@/frame/components/hooks/useQueryParam'
+import { useMultiQueryParams } from '@/search/components/hooks/useMultiQueryParams'
+import { SearchOverlayContainer } from '@/search/components/input/SearchOverlayContainer'
+
+import styles from './Header.module.scss'
 
 export const Header = () => {
   const router = useRouter()
@@ -34,6 +37,7 @@ export const Header = () => {
     'search-overlay-open',
     true,
   )
+  const { params, updateParams } = useMultiQueryParams()
   const [scroll, setScroll] = useState(false)
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
   const openSidebar = useCallback(() => setIsSidebarOpen(true), [isSidebarOpen])
@@ -45,8 +49,20 @@ export const Header = () => {
   const isEarlyAccessPage = currentProduct && currentProduct.id === 'early-access'
   const { width } = useInnerWindowWidth()
   const returnFocusRef = useRef(null)
+  const searchButtonRef = useRef<HTMLButtonElement>(null)
 
   const showNewSearch = useShouldShowExperiment(EXPERIMENTS.ai_search_experiment)
+  let SearchButton: JSX.Element | null = (
+    <SearchBarButton
+      isSearchOpen={isSearchOpen}
+      setIsSearchOpen={setIsSearchOpen}
+      params={params}
+      searchButtonRef={searchButtonRef}
+    />
+  )
+  if (!showNewSearch) {
+    SearchButton = null
+  }
 
   useEffect(() => {
     function onScroll() {
@@ -166,14 +182,16 @@ export const Header = () => {
               <MarkGithubIcon size={32} />
               <span className="h4 text-semibold ml-2 mr-3">{t('github_docs')}</span>
             </Link>
-            <div className="hide-sm border-left pl-3">
+            <div className="hide-sm border-left pl-3 d-flex flex-items-center">
               <VersionPicker />
+              {/* In larger viewports, we want to show the search bar next to the version picker */}
+              <div className={styles.displayOverLarge}>{SearchButton}</div>
             </div>
           </div>
           {showNewSearch ? (
             <HeaderSearchAndWidgets
               isSearchOpen={isSearchOpen}
-              setIsSearchOpen={setIsSearchOpen}
+              SearchButton={SearchButton}
               width={width}
             />
           ) : (
@@ -246,6 +264,15 @@ export const Header = () => {
             </div>
           </div>
         )}
+        {showNewSearch && (
+          <SearchOverlayContainer
+            isSearchOpen={isSearchOpen}
+            setIsSearchOpen={setIsSearchOpen}
+            params={params}
+            updateParams={updateParams}
+            searchButtonRef={searchButtonRef}
+          />
+        )}
       </header>
     </div>
   )

src/frame/components/page-header/HeaderSearchAndWidgets.module.scss

@@ -0,0 +1,12 @@
+@import "@primer/css/support/variables/layout.scss";
+@import "@primer/css/support/mixins/layout.scss";
+
+.displayUnderLarge {
+  display: flex;
+  visibility: visible;
+
+  @include breakpoint(lg) {
+    display: none !important;
+    visibility: hidden !important;
+  }
+}

src/frame/components/page-header/HeaderSearchAndWidgets.tsx

@@ -10,34 +10,26 @@ import { VersionPicker } from '@/versions/components/VersionPicker'
 import { DEFAULT_VERSION, useVersion } from '@/versions/components/useVersion'
 import { useHasAccount } from '../hooks/useHasAccount'
 
-import { SearchBarButton } from '@/search/components/input/SearchBarButton'
-import { useBreakpoint } from '@/search/components/hooks/useBreakpoint'
+import styles from './HeaderSearchAndWidgets.module.scss'
 
 type Props = {
   isSearchOpen: boolean
-  setIsSearchOpen: (value: boolean) => void
   width: number | null
+  SearchButton: JSX.Element | null
 }
 
-export function HeaderSearchAndWidgets({ isSearchOpen, setIsSearchOpen, width }: Props) {
+export function HeaderSearchAndWidgets({ width, isSearchOpen, SearchButton }: Props) {
   const { currentVersion } = useVersion()
   const { t } = useTranslation(['header'])
-  const isLarge = useBreakpoint('large')
   const { hasAccount } = useHasAccount()
   const signupCTAVisible =
     hasAccount === false && // don't show if `null`
     (currentVersion === DEFAULT_VERSION || currentVersion === 'enterprise-cloud@latest')
 
   const showDomainNameEdit = currentVersion.startsWith('enterprise-server@')
 
-  const SearchButton = (
-    <SearchBarButton isSearchOpen={isSearchOpen} setIsSearchOpen={setIsSearchOpen} />
-  )
-
   return (
     <>
-      {/* At larger & up widths we show the search as an input. This doesn't need to be grouped with the widgets */}
-      {isLarge ? SearchButton : null}
       <div className={cx('d-flex flex-items-center', isSearchOpen && 'd-none')}>
         <div className={cx('d-none d-lg-flex flex-items-center', signupCTAVisible && 'mr-3')}>
           <LanguagePicker />
@@ -57,7 +49,7 @@ export function HeaderSearchAndWidgets({ isSearchOpen, setIsSearchOpen, width }:
         )}
 
         {/* Below large widths we show the search as a button which needs to be grouped with the widgets */}
-        {!isLarge ? SearchButton : null}
+        <div className={styles.displayUnderLarge}>{SearchButton}</div>
 
         {/* The ... navigation menu at medium and smaller widths */}
         <div>

src/search/components/input/SearchBarButton.tsx

@@ -1,27 +1,23 @@
-import { useRef } from 'react'
 import cx from 'classnames'
 import { IconButton } from '@primer/react'
 import { CopilotIcon, SearchIcon } from '@primer/octicons-react'
 
 import { useTranslation } from 'src/languages/components/useTranslation'
-import { SearchOverlay } from './SearchOverlay'
 
 import styles from './SearchBarButton.module.scss'
-import { useMultiQueryParams } from '../hooks/useMultiQueryParams'
+import { QueryParams } from '../hooks/useMultiQueryParams'
 
 type Props = {
   isSearchOpen: boolean
   setIsSearchOpen: (value: boolean) => void
+  params: QueryParams
+  searchButtonRef: React.RefObject<HTMLButtonElement>
 }
 
-export function SearchBarButton({ isSearchOpen, setIsSearchOpen }: Props) {
+export function SearchBarButton({ isSearchOpen, setIsSearchOpen, params, searchButtonRef }: Props) {
   const { t } = useTranslation('search')
 
-  const { params, updateParams } = useMultiQueryParams()
   const urlSearchInputQuery = params['search-overlay-input']
-  const debug = params.debug === 'true'
-
-  const buttonRef = useRef(null)
 
   // Handle click events
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -60,7 +56,7 @@ export function SearchBarButton({ isSearchOpen, setIsSearchOpen }: Props) {
           {/* On mobile only the IconButton is shown */}
           <IconButton
             data-testid="mobile-search-button"
-            ref={buttonRef}
+            ref={searchButtonRef}
             className={styles.searchIconButton}
             onClick={handleClick}
             tabIndex={0}
@@ -75,7 +71,7 @@ export function SearchBarButton({ isSearchOpen, setIsSearchOpen }: Props) {
             className={styles.searchInputButton}
             onKeyDown={handleKeyDown}
             onClick={handleClick}
-            ref={buttonRef}
+            ref={searchButtonRef}
           >
             {/* Styled to look like an input */}
             <div
@@ -101,18 +97,7 @@ export function SearchBarButton({ isSearchOpen, setIsSearchOpen }: Props) {
             </span>
           </button>
         </>
-      ) : (
-        <SearchOverlay
-          searchOverlayOpen={isSearchOpen}
-          parentRef={buttonRef}
-          debug={debug}
-          params={params}
-          updateParams={updateParams}
-          onClose={() => {
-            setIsSearchOpen(false)
-          }}
-        />
-      )}
+      ) : null}
     </>
   )
 }

src/search/components/input/SearchOverlayContainer.tsx

@@ -0,0 +1,37 @@
+import { SearchOverlay } from './SearchOverlay'
+import { QueryParams } from '../hooks/useMultiQueryParams'
+
+type Props = {
+  isSearchOpen: boolean
+  setIsSearchOpen: (value: boolean) => void
+  params: QueryParams
+  updateParams: (updates: Partial<QueryParams>) => void
+  searchButtonRef: React.RefObject<HTMLButtonElement>
+}
+
+export function SearchOverlayContainer({
+  isSearchOpen,
+  setIsSearchOpen,
+  params,
+  updateParams,
+  searchButtonRef,
+}: Props) {
+  const debug = params.debug === 'true'
+
+  if (isSearchOpen) {
+    return (
+      <SearchOverlay
+        searchOverlayOpen={isSearchOpen}
+        parentRef={searchButtonRef}
+        debug={debug}
+        params={params}
+        updateParams={updateParams}
+        onClose={() => {
+          setIsSearchOpen(false)
+        }}
+      />
+    )
+  }
+
+  return null
+}