From f19223503a1ebfd3a9fc0c94bde2bfca04fa9d68 Mon Sep 17 00:00:00 2001 From: Grace Park Date: Thu, 9 Dec 2021 09:56:24 -0800 Subject: [PATCH 1/4] Update Search Version Button to Dropdown (#23465) * adding to view * updating the portal location * add new line * updating font styling to class * Update components/Search.tsx Co-authored-by: Kevin Heis * Update components/Search.module.scss Co-authored-by: Kevin Heis * update ItemInput * using router.replace and import updates * Update components/Search.tsx Co-authored-by: Peter Bengtsson * run prettier * Update components/Search.tsx Co-authored-by: Peter Bengtsson Co-authored-by: Kevin Heis Co-authored-by: Peter Bengtsson --- components/Search.module.scss | 8 ++ components/Search.tsx | 97 ++++++++++++++++------- components/hooks/useVersion.ts | 2 +- components/page-header/Header.module.scss | 5 ++ components/page-header/Header.tsx | 2 + 5 files changed, 84 insertions(+), 30 deletions(-) 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 */}