diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 5bf39beeee..1c55259eb0 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/components/Search.module.scss b/components/Search.module.scss index 47d7d749af..4ccc25ca94 100644 --- a/components/Search.module.scss +++ b/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; +} diff --git a/components/Search.tsx b/components/Search.tsx index 01384ddecd..bc740cf54e 100644 --- a/components/Search.tsx +++ b/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() + 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' )} > -
-

- You're searching the {searchVersion}{' '} - version. Didn't find what you're looking for? Click a different version to try again. +

+

+ You're searching the {searchVersion} version.

- {versions.map(({ title, version }) => { - return ( - - ) - })} +
+

Select version:

+ +
{/* We might have results AND isLoading. For example, the user typed a first word, and is now typing more. */} -

+

{isLoading ? {t('loading')}... :  }

@@ -368,7 +398,10 @@ function ShowSearchResults({ renderItem: () => ( -
  • +
  • {/* Breadcrumbs in search records don't include the page title. These fields may contain elements that we need to render */}