From 699e00c329d0445358c406dfc347b479fb03109c Mon Sep 17 00:00:00 2001 From: Sunny Zanchi Date: Wed, 16 Oct 2024 15:37:17 -0400 Subject: [PATCH 1/6] fix: double border on search input in light mode --- .../gatsby-theme-newrelic/src/components/GlobalStyles/themes.js | 2 ++ packages/gatsby-theme-newrelic/src/components/SearchInput.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalStyles/themes.js b/packages/gatsby-theme-newrelic/src/components/GlobalStyles/themes.js index e93ef27f..0cb72240 100644 --- 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/SearchInput.js b/packages/gatsby-theme-newrelic/src/components/SearchInput.js index 8497d6ad..501c6f34 100644 --- 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%'}; From 9770f81a1ee80b31836fcf03a4d91b33512da6f9 Mon Sep 17 00:00:00 2001 From: Sunny Zanchi Date: Wed, 16 Oct 2024 15:40:31 -0400 Subject: [PATCH 2/6] fix: make top result padding match rest --- .../src/components/SearchDropdown/Results.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js index 44508e2d..dae089c3 100644 --- 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); From 3503c1ccc525b230e854abb95063666550e1afc6 Mon Sep 17 00:00:00 2001 From: Sunny Zanchi Date: Wed, 16 Oct 2024 15:54:20 -0400 Subject: [PATCH 3/6] fix: handle recentQueries.length === 0 better --- .../src/components/SearchDropdown/Results.js | 7 +++-- .../SearchDropdown/SearchDropdown.js | 30 +++++++++++-------- .../src/components/SearchInput.js | 3 ++ 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js index dae089c3..d0974787 100644 --- a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js +++ b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js @@ -123,9 +123,10 @@ 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, }); diff --git a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/SearchDropdown.js b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/SearchDropdown.js index 05046581..dde0b1ed 100644 --- a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/SearchDropdown.js +++ b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/SearchDropdown.js @@ -25,18 +25,20 @@ const SearchDropdown = ({ return ( <> - Recent search terms {recentQueries.length > 0 && ( - - {recentQueries.map((query, i) => ( -
  • onRecentClick(query, i)} - > - {query} -
    • - ))} -     + <> + Recent search terms + + {recentQueries.map((query, i) => ( +
  • onRecentClick(query, i)} + > + {query} +
    • + ))} +     + )} All searches @@ -44,7 +46,11 @@ const SearchDropdown = ({ {loading && !error && } {!loading && !error && ( Date: Wed, 16 Oct 2024 15:55:48 -0400 Subject: [PATCH 4/6] fix: fix snapshot tests --- .../__tests__/__snapshots__/Icon.test.js.snap | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) 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 index 66099d0a..796acdb8 100644 --- 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`] = ` `; +exports[`nr-arrow-down icon matches its snapshot 1`] = ` +.emotion-0 { + width: 1em; + height: 1em; +} + + + + +`; + +exports[`nr-arrow-go-to icon matches its snapshot 1`] = ` +.emotion-0 { + width: 1em; + height: 1em; +} + + + + +`; + +exports[`nr-arrow-up icon matches its snapshot 1`] = ` +.emotion-0 { + width: 1em; + height: 1em; +} + + + + +`; + exports[`nr-dark-mode-toggle icon matches its snapshot 1`] = ` .emotion-0 { width: 1em; From fdd9817d78c5fdf1c86993ef4b22579405790024 Mon Sep 17 00:00:00 2001 From: Sunny Zanchi Date: Wed, 16 Oct 2024 16:08:51 -0400 Subject: [PATCH 5/6] fix: lint errors --- .../src/components/GlobalSearch.js | 6 ++++++ .../src/components/SearchDropdown/Results.js | 5 ++++- .../components/SearchDropdown/SearchDropdown.js | 14 +++++++------- .../src/components/SearchInput.js | 14 ++++++++------ .../src/icons/newrelic/arrow-down.js | 6 +++--- .../src/icons/newrelic/arrow-go-to.js | 6 +++--- .../src/icons/newrelic/arrow-up.js | 7 ++++--- 7 files changed, 35 insertions(+), 23 deletions(-) diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js b/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js index 6302c56e..ff7a3026 100644 --- 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,6 +201,10 @@ const GlobalSearch = ({ onClose }) => { ); }; +GlobalSearch.propTypes = { + onClose: PropTypes.func.isRequired, +}; + const SAVED_SEARCH_KEY = 'gatsby-theme-newrelic:saved-searches'; const saveSearch = (value) => { diff --git a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js index d0974787..2e54eeb6 100644 --- a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js +++ b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/Results.js @@ -131,6 +131,9 @@ export const ResultType = PropTypes.shape({ }); Results.propTypes = { + onViewMore: PropTypes.func.isRequired, + onResultClick: PropTypes.func.isRequired, + selected: PropTypes.number, results: PropTypes.arrayOf(ResultType), }; @@ -147,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 index dde0b1ed..381ce327 100644 --- 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, @@ -30,11 +29,13 @@ const SearchDropdown = ({ Recent search terms {recentQueries.map((query, i) => ( -
  • onRecentClick(query, i)} - > - {query} +
  • + onRecentClick(query, i)} + > + {query} +
    • ))}     @@ -68,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 index b1f64803..fb1dac81 100644 --- a/packages/gatsby-theme-newrelic/src/components/SearchInput.js +++ b/packages/gatsby-theme-newrelic/src/components/SearchInput.js @@ -283,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/icons/newrelic/arrow-down.js b/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-down.js index b99ec260..09079025 100644 --- 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) => ( ( xmlns="http://www.w3.org/2000/svg" > 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 index f7d2fcca..0d42e5d4 100644 --- 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) => ( ( xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-up.js b/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-up.js index d31ee836..add75f4b 100644 --- a/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-up.js +++ b/packages/gatsby-theme-newrelic/src/icons/newrelic/arrow-up.js @@ -1,8 +1,9 @@ import React from 'react'; import SVG from '../../components/SVG'; -const ArrowUp = ({ props }) => ( +const ArrowUp = (props) => ( ( xmlns="http://www.w3.org/2000/svg" > From fb08e7647edc8f9f144e16ce7ea7035950747928 Mon Sep 17 00:00:00 2001 From: Sunny Zanchi Date: Wed, 16 Oct 2024 16:11:09 -0400 Subject: [PATCH 6/6] fix: don't save duplicate searches to recents --- .../gatsby-theme-newrelic/src/components/GlobalSearch.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js b/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js index ff7a3026..a8dd70a9 100644 --- a/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js +++ b/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js @@ -208,9 +208,16 @@ GlobalSearch.propTypes = { 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);