repo sync

.github/CODEOWNERS

@@ -19,8 +19,8 @@ package.json @github/docs-engineering
 /.github/workflows/create-translation-batch-pr.yml @github/docs-localization
 /.github/workflows/crowdin.yml @github/docs-localization
 /crowdin*.yml @github/docs-engineering @github/docs-localization
-/translations/ @github/docs-engineering @github/docs-localization @github-actions
-/translations/log/ @github/docs-localization @github-actions
+/translations/ @github/docs-engineering @github/docs-localization @github-actions[bot]
+/translations/log/ @github/docs-localization @github-actions[bot]
 
 # Site Policy
 /content/github/site-policy/ @github/site-policy-admins

components/Search.module.scss

@@ -43,3 +43,11 @@
 .headerSearchResults {
   max-height: 80vh;
 }
+
+.searchWording {
+  margin: 0.6rem 0 0.5rem 0.5rem;
+}
+
+.selectWording {
+  margin: 0.64rem 0.5rem 0 0;
+}

components/Search.tsx

@@ -2,12 +2,13 @@ import React, { useState, useEffect, useRef, ReactNode, RefObject } from 'react'
 import { useRouter } from 'next/router'
 import useSWR from 'swr'
 import cx from 'classnames'
-import { ActionList, Label, Overlay } from '@primer/components'
+import { ActionList, DropdownMenu, Label, Overlay } from '@primer/components'
+import { ItemInput } from '@primer/components/lib/ActionList/List'
 
 import { useTranslation } from 'components/hooks/useTranslation'
 import { sendEvent, EventType } from 'components/lib/events'
 import { useMainContext } from './context/MainContext'
-import { useVersion } from 'components/hooks/useVersion'
+import { DEFAULT_VERSION, useVersion } from 'components/hooks/useVersion'
 import { useQuery } from 'components/hooks/useQuery'
 import { Link } from 'components/Link'
 import { useLanguages } from './context/LanguagesContext'
@@ -294,6 +295,8 @@ function ShowSearchResults({
   const { currentVersion } = useVersion()
   const { allVersions } = useMainContext()
   const searchVersion = allVersions[currentVersion].versionTitle
+  const [selectedVersion, setSelectedVersion] = useState<ItemInput | undefined>()
+
   const latestVersions = new Set(
     Object.keys(allVersions)
       .map((version) => allVersions[version].latestVersion)
@@ -307,13 +310,39 @@ function ShowSearchResults({
     }
   })
 
+  const searchVersions: ItemInput[] = versions.map(({ title, version }) => {
+    return {
+      text: title,
+      key: version,
+    }
+  })
+
   const redirectParams: {
     query: string
     debug?: string
   } = { query }
+
   if (debug) redirectParams.debug = JSON.stringify(debug)
+
   const redirectQuery = `?${new URLSearchParams(redirectParams).toString()}`
 
+  useEffect(() => {
+    if (selectedVersion) {
+      const params = new URLSearchParams(redirectParams)
+      let asPath = `/${router.locale}`
+
+      if (params.toString()) {
+        asPath += `?${params.toString()}`
+      }
+
+      if (selectedVersion.key === DEFAULT_VERSION) {
+        router.push(`/?${params.toString()}`, asPath)
+      } else {
+        router.push(`/${router.locale}/${selectedVersion.key}${redirectQuery}`)
+      }
+    }
+  }, [selectedVersion])
+
   if (results) {
     if (results.length === 0) {
       // When there results, but exactly 0, it matters if this is the overlay or not.
@@ -341,22 +370,23 @@ function ShowSearchResults({
           isHeaderSearch && 'overflow-auto'
         )}
       >
-        <div className="my-4">
-          <p className="mx-4">
-            You're searching the <span className="color-fg-attention">{searchVersion}</span>{' '}
-            version. Didn't find what you're looking for? Click a different version to try again.
+        <div className="mt-4 pb-6 width-full border-bottom">
+          <p className={cx(styles.searchWording, 'f6 ml-4 d-inline-block')}>
+            You're searching the <strong>{searchVersion}</strong> version.
           </p>
-          {versions.map(({ title, version }) => {
-            return (
-              <button key={version} className="btn mr-2 mt-4 ml-4" type="button">
-                <a href={`/${router.locale}/${version}${redirectQuery}`}>{title}</a>
-              </button>
-            )
-          })}
+          <div className="float-right mr-4">
+            <p className={cx(styles.selectWording, 'f6 d-inline-block')}>Select version:</p>
+            <DropdownMenu
+              placeholder={searchVersion}
+              items={searchVersions}
+              selectedItem={selectedVersion}
+              onChange={setSelectedVersion}
+            />
+          </div>
         </div>
         {/* We might have results AND isLoading. For example, the user typed
         a first word, and is now typing more. */}
-        <p className="d-block mt-4">
+        <p className="d-block ml-4 mt-4">
           {isLoading ? <span>{t('loading')}...</span> : <span>&nbsp;</span>}
         </p>
 
@@ -368,7 +398,10 @@ function ShowSearchResults({
               renderItem: () => (
                 <ActionList.Item as="div">
                   <Link href={url} className="no-underline color-fg-default">
-                    <li data-testid="search-result" className={cx('list-style-none')}>
+                    <li
+                      data-testid="search-result"
+                      className={cx('list-style-none', styles.resultsContainer)}
+                    >
                       <div className={cx('py-2 px-3')}>
                         {/* Breadcrumbs in search records don't include the page title. These fields may contain <mark> elements that we need to render */}
                         <Label variant="small" sx={{ bg: 'accent.emphasis' }}>
@@ -425,9 +458,6 @@ function ShowSearchResults({
       <div>
         {!isHeaderSearch && !isMobileSearch ? (
           <>
-            {/* Only if you're going to use an <Overlay> do you need
-          to specify a portal div tag. */}
-            <div id="__primerPortalRoot__" />
             <Overlay
               initialFocusRef={anchorRef}
               returnFocusRef={anchorRef}
@@ -436,17 +466,26 @@ function ShowSearchResults({
               onClickOutside={() => closeSearch()}
               aria-labelledby="title"
               sx={
-                (isHeaderSearch && {
-                  background: 'none',
-                  boxShadow: 'none',
-                  position: 'static',
-                  overflowY: 'auto',
-                  maxHeight: '80vh',
-                  maxWidth: '96%',
-                  margin: '1.5em 2em 0 0.5em',
-                  scrollbarWidth: 'none',
-                }) ||
-                {}
+                isHeaderSearch
+                  ? {
+                      background: 'none',
+                      boxShadow: 'none',
+                      position: 'static',
+                      overflowY: 'auto',
+                      maxHeight: '80vh',
+                      maxWidth: '96%',
+                      margin: '1.5em 2em 0 0.5em',
+                      scrollbarWidth: 'none',
+                    }
+                  : window.innerWidth < 1012
+                  ? {
+                      marginTop: '28rem',
+                      marginLeft: '5rem',
+                    }
+                  : {
+                      marginTop: '15rem',
+                      marginLeft: '5rem',
+                    }
               }
             >
               {ActionListResults}

components/hooks/useVersion.ts

@@ -5,7 +5,7 @@ type VersionInfo = {
   isEnterprise: boolean
   isEnterpriseServer: boolean
 }
-const DEFAULT_VERSION = 'free-pro-team@latest'
+export const DEFAULT_VERSION = 'free-pro-team@latest'
 export const useVersion = (): VersionInfo => {
   const router = useRouter()
   const currentVersion = (router.query.versionId as string) || DEFAULT_VERSION

components/page-header/Header.module.scss

@@ -1,3 +1,8 @@
 .header {
   display: unset;
 }
+
+// Need children of portal root to be higher z-index to show dropdown
+.portalRoot * {
+  z-index: 3 !important;
+}

components/page-header/Header.tsx

@@ -128,6 +128,8 @@ export const Header = () => {
           </div>
         </div>
       </header>
+      {/* Adding Portal Root here for DropdownMenu and ActionList Search Results */}
+      <div id="__primerPortalRoot__" className={cx(styles.portalRoot)} />
     </div>
   )
 }

components/ui/BumpLink/BumpLink.tsx

@@ -14,16 +14,11 @@ export type BumpLinkPropsT = {
 export const BumpLink = ({ as, children, href, title, className }: BumpLinkPropsT) => {
   const Component = as || 'a'
 
-  const symbol = <span className={styles.symbol}>→</span>
   let extendedTitle: ReactNode
   if (typeof title === 'string') {
-    extendedTitle = (
-      <span className="h4">
-        {title} {symbol}
-      </span>
-    )
+    extendedTitle = <span className="h4">{title}</span>
   } else {
-    extendedTitle = cloneElement(title, title.props, title.props.children, symbol)
+    extendedTitle = cloneElement(title, title.props, title.props.children)
   }
 
   return (