Merge pull request #1099 from newrelic/sunny/search-fixes

search fixes
newrelic · Oct 16, 2024 · a77fe8f · a77fe8f
2 parents 083cd83 + fb08e76
commit a77fe8f
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 36 deletions.
diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js b/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
 import { navigate } from '@reach/router';
 import { css } from '@emotion/react';
 import { useThrottle } from 'react-use';
@@ -23,6 +24,7 @@ const GlobalSearch = ({ onClose }) => {
   let recentQueries = [];
   try {
     recentQueries = JSON.parse(localStorage.getItem(SAVED_SEARCH_KEY) ?? '[]');
+    // eslint-disable-next-line no-empty
   } catch (err) {}
   // `null` when we're just in the searchbar and nothing is selected
   // otherwise, `selected` is an integer.
@@ -199,12 +201,23 @@ const GlobalSearch = ({ onClose }) => {
   );
 };
 
+GlobalSearch.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
 const SAVED_SEARCH_KEY = 'gatsby-theme-newrelic:saved-searches';
 
 const saveSearch = (value) => {
+  value = value.trim();
   const savedSearches = JSON.parse(
     localStorage.getItem(SAVED_SEARCH_KEY) ?? '[]'
   );
+  const set = new Set(savedSearches);
+
+  if (set.has(value)) {
+    return;
+  }
+
   savedSearches.push(value);
   // only save the four most recent searches
   const updated = savedSearches.slice(-4);

diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalStyles/themes.js b/packages/gatsby-theme-newrelic/src/components/GlobalStyles/themes.js
@@ -37,6 +37,7 @@ export default css`
     --search-dropdown-background: #fff;
     --search-dropdown-border: #e7e9ea;
     --search-dropdown-hover: rgba(0, 0, 0, 0.06);
+    --search-input-border: none;
 
     input::placeholder {
       color: var(--primary-text-color);
@@ -82,6 +83,7 @@ export default css`
     --search-dropdown-background: #1a2125;
     --search-dropdown-border: #eaecec;
     --search-dropdown-hover: rgba(255, 255, 255, 0.1);
+    --search-input-border: 1px solid #eaecec;
 
     input::placeholder {
       color: var(--primary-text-color);

diff --git a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js
@@ -75,9 +75,9 @@ const Results = ({ onResultClick, onViewMore, results, selected }) => {
 const List = styled.ul`
   list-style: none;
   margin: 0 calc(-1 * var(--outer-padding));
-  max-height: 31.5rem;
+  max-height: 32rem;
   overflow-y: scroll;
-  padding: 0;
+  padding: 0.25rem 0 0;
 
   & em {
     color: var(--search-dropdown-emphasis);
@@ -123,13 +123,17 @@ const ViewMore = styled.button`
 `;
 
 export const ResultType = PropTypes.shape({
-  breadcrumb: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  blurb: PropTypes.string.isRequired,
+  highlight: PropTypes.shape({
+    body: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  }).isRequired,
   url: PropTypes.string.isRequired,
 });
 
 Results.propTypes = {
+  onViewMore: PropTypes.func.isRequired,
+  onResultClick: PropTypes.func.isRequired,
+  selected: PropTypes.number,
   results: PropTypes.arrayOf(ResultType),
 };
 
@@ -146,7 +150,7 @@ const breadcrumbify = (str) => {
   const DESIRED_LENGTH = 80;
   str = str.replace(/\/$/, '');
 
-  let parts = str.split('/');
+  const parts = str.split('/');
   let result = parts.join(' / ');
 
   if (result.length <= DESIRED_LENGTH) return result;

diff --git a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/SearchDropdown.js b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/SearchDropdown.js
@@ -13,7 +13,6 @@ const SearchDropdown = ({
   onClose,
   onRecentClick,
   onResultClick,
-  query,
   recentQueries,
   results,
   selected,
@@ -25,26 +24,34 @@ const SearchDropdown = ({
   return (
     <>
       <Container {...rest}>
-        <SectionHeading>Recent search terms</SectionHeading>
         {recentQueries.length > 0 && (
-          <RecentQueries>
-            {recentQueries.map((query, i) => (
-              <li
-                className={cx({ selected: selected === i })}
-                onClick={() => onRecentClick(query, i)}
-              >
-                <a href={`/search-results?query=${query}&page=1`}>{query}</a>
-              </li>
-            ))}
-          </RecentQueries>
+          <>
+            <SectionHeading>Recent search terms</SectionHeading>
+            <RecentQueries>
+              {recentQueries.map((query, i) => (
+                <li key={query} className={cx({ selected: selected === i })}>
+                  <a
+                    href={`/search-results?query=${query}&page=1`}
+                    onClick={() => onRecentClick(query, i)}
+                  >
+                    {query}
+                  </a>
+                </li>
+              ))}
+            </RecentQueries>
+          </>
         )}
 
         <SectionHeading>All searches</SectionHeading>
         {error && <Error />}
         {loading && !error && <Skeleton />}
         {!loading && !error && (
           <Results
-            selected={selected - recentQueries.length}
+            selected={
+              selected == null
+                ? selected
+                : selected - (recentQueries.length ?? 0)
+            }
             results={results}
             onResultClick={onResultClick}
             onViewMore={fetchNextPage}
@@ -62,7 +69,6 @@ SearchDropdown.propTypes = {
   onClose: PropTypes.func.isRequired,
   onRecentClick: PropTypes.func.isRequired,
   onResultClick: PropTypes.func.isRequired,
-  query: PropTypes.string,
   recentQueries: PropTypes.arrayOf(PropTypes.string).isRequired,
   results: PropTypes.arrayOf(ResultType),
   selected: PropTypes.number,

diff --git a/packages/gatsby-theme-newrelic/src/components/SearchInput.js b/packages/gatsby-theme-newrelic/src/components/SearchInput.js
@@ -81,7 +81,7 @@ const SearchInput = forwardRef(
         css={css`
           --horizontal-spacing: ${HORIZONTAL_SPACING[size]};
 
-          border: 1px solid #eaecec;
+          border: var(--search-input-border);
           border-radius: 4px;
           position: relative;
           width: ${width || '100%'};
@@ -153,6 +153,9 @@ const SearchInput = forwardRef(
                 onMove('next');
                 break;
               case 'Escape':
+                // without this, if the user is in fullscreen on Mac Firefox,
+                // Esc will exit fullscreen as well.
+                e.preventDefault();
                 onClear && onClear();
                 e.target.blur();
                 break;
@@ -280,18 +283,20 @@ const SearchInput = forwardRef(
 );
 
 SearchInput.propTypes = {
+  alignIcon: PropTypes.oneOf(Object.values(ICON_ALIGNMENTS)),
   className: PropTypes.string,
   focusWithHotKey: PropTypes.string,
-  onClear: PropTypes.func,
-  onSubmit: PropTypes.func,
-  value: PropTypes.string,
-  width: PropTypes.string,
-  size: PropTypes.oneOf(Object.values(SIZES)),
   iconName: PropTypes.oneOf(Object.values(ICONS)),
-  alignIcon: PropTypes.oneOf(Object.values(ICON_ALIGNMENTS)),
   isIconClickable: PropTypes.bool,
   onBlur: PropTypes.func,
+  onClear: PropTypes.func,
   onFocus: PropTypes.func,
+  onMove: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func,
+  setValue: PropTypes.func.isRequired,
+  size: PropTypes.oneOf(Object.values(SIZES)),
+  value: PropTypes.string,
+  width: PropTypes.string,
 };
 
 SearchInput.SIZE = SIZES;

diff --git a/packages/gatsby-theme-newrelic/src/components/__tests__/__snapshots__/Icon.test.js.snap b/packages/gatsby-theme-newrelic/src/components/__tests__/__snapshots__/Icon.test.js.snap
@@ -1059,6 +1059,75 @@ exports[`nr-ai icon matches its snapshot 1`] = `
 </svg>
 `;
 
+exports[`nr-arrow-down icon matches its snapshot 1`] = `
+.emotion-0 {
+  width: 1em;
+  height: 1em;
+}
+
+<svg
+  className="emotion-0"
+  fill="none"
+  height="15"
+  viewBox="0 0 14 15"
+  width="14"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clipRule="evenodd"
+    d="M11.0273 8.025L7.00234 12.1375V2.25H6.12734V12.1375L2.10234 8.025L1.40234 8.725L6.56484 13.8L11.7273 8.725L11.0273 8.025Z"
+    fill="currentColor"
+    fillRule="evenodd"
+  />
+</svg>
+`;
+
+exports[`nr-arrow-go-to icon matches its snapshot 1`] = `
+.emotion-0 {
+  width: 1em;
+  height: 1em;
+}
+
+<svg
+  className="emotion-0"
+  fill="none"
+  height="15"
+  viewBox="0 0 14 15"
+  width="14"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clipRule="evenodd"
+    d="M5.775 13.1016L6.475 12.4016L3.2375 9.25156L13.125 9.25156L13.125 2.25156L12.25 2.25156L12.25 8.37656L3.2375 8.37656L6.475 5.22656L5.775 4.52656L1.575 8.81406L5.775 13.1016Z"
+    fill="currentColor"
+    fillRule="evenodd"
+  />
+</svg>
+`;
+
+exports[`nr-arrow-up icon matches its snapshot 1`] = `
+.emotion-0 {
+  width: 1em;
+  height: 1em;
+}
+
+<svg
+  className="emotion-0"
+  fill="none"
+  height="15"
+  viewBox="0 0 14 15"
+  width="14"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clipRule="evenodd"
+    d="M11.7273 6.27031L6.56484 1.19531L1.40234 6.27031L2.10234 6.97031L6.12734 2.85781V12.7453H7.00234V2.85781L11.0273 6.97031L11.7273 6.27031Z"
+    fill="currentColor"
+    fillRule="evenodd"
+  />
+</svg>
+`;
+
 exports[`nr-dark-mode-toggle icon matches its snapshot 1`] = `
 .emotion-0 {
   width: 1em;

diff --git a/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-down.js b/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-down.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import SVG from '../../components/SVG';
 
-const ArrowUp = ({ props }) => (
+const ArrowUp = (props) => (
   <SVG
     {...props}
     width="14"
@@ -11,8 +11,8 @@ const ArrowUp = ({ props }) => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M11.0273 8.025L7.00234 12.1375V2.25H6.12734V12.1375L2.10234 8.025L1.40234 8.725L6.56484 13.8L11.7273 8.725L11.0273 8.025Z"
       fill="currentColor"
     />

diff --git a/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-go-to.js b/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-go-to.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import SVG from '../../components/SVG';
 
-const ArrowGoTo = ({ props }) => (
+const ArrowGoTo = (props) => (
   <SVG
     {...props}
     width="14"
@@ -11,8 +11,8 @@ const ArrowGoTo = ({ props }) => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M5.775 13.1016L6.475 12.4016L3.2375 9.25156L13.125 9.25156L13.125 2.25156L12.25 2.25156L12.25 8.37656L3.2375 8.37656L6.475 5.22656L5.775 4.52656L1.575 8.81406L5.775 13.1016Z"
       fill="currentColor"
     />

diff --git a/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-up.js b/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-up.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import SVG from '../../components/SVG';
 
-const ArrowUp = ({ props }) => (
+const ArrowUp = (props) => (
   <SVG
+    {...props}
     width="14"
     height="15"
     viewBox="0 0 14 15"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M11.7273 6.27031L6.56484 1.19531L1.40234 6.27031L2.10234 6.97031L6.12734 2.85781V12.7453H7.00234V2.85781L11.0273 6.97031L11.7273 6.27031Z"
       fill="currentColor"
     />