Merge pull request #1100 from newrelic/develop

release
newrelic · Oct 17, 2024 · 700d904 · 700d904
2 parents ac77e87 + c5b3deb
commit 700d904
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 39 deletions.
diff --git a/demo/gatsby-config.js b/demo/gatsby-config.js
@@ -38,7 +38,7 @@ module.exports = {
         },
         i18n: {
           translationsPath: `${__dirname}/src/i18n/translations`,
-          additionalLocales: ['jp', 'kr', 'pt', 'es'],
+          additionalLocales: ['jp', 'kr', 'pt', 'es', 'fr'],
         },
         layout: {
           component: require.resolve('./src/layouts'),

diff --git a/packages/gatsby-theme-newrelic/gatsby/on-pre-render-html.js b/packages/gatsby-theme-newrelic/gatsby/on-pre-render-html.js
@@ -5,7 +5,7 @@ const onPreRenderHTML = ({
   replaceHeadComponents,
   pathname,
 }) => {
-  const languages = { kr: 'ko', jp: 'ja', es: 'es', pt: 'pt-br' };
+  const languages = { kr: 'ko', jp: 'ja', es: 'es', pt: 'pt-br', fr: 'fr-fr' };
 
   const getCurrentLanguage = () => {
     let matchingLanguage = 'en';

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/Link.js b/packages/gatsby-theme-newrelic/src/components/Link.js
@@ -23,6 +23,7 @@ const i18nNetlifySites = [
   'docs-website-jp.netlify.app/jp/',
   'docs-website-es.netlify.app/es/',
   'docs-website-pt.netlify.app/pt/',
+  'docs-website-fr.netlify.app/fr/',
 ];
 const isI18nNetlifySite = (to) =>
   i18nNetlifySites.some((site) => to.includes(site));

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/i18n/translations/fr.json b/packages/gatsby-theme-newrelic/src/i18n/translations/fr.json
@@ -0,0 +1,89 @@
+{
+  "404": {
+    "headingText": "Hmm... We can't find this",
+    "searchInputLabel": "Try refining your search.",
+    "searchResultMessage": "Were you looking for any of these?",
+    "docsHomeMessage": "Go back to <1>{{nrSubDomain}} home</1>.",
+    "fileIssueMessage": "Still can't find what you're looking for?"
+  },
+  "button": {
+    "close": "Close",
+    "copied": "Copied",
+    "copy": "Copy",
+    "login": "Log in",
+    "startNow": "Start now"
+  },
+  "callout": {
+    "tip": "Tip",
+    "caution": "Caution",
+    "important": "Important",
+    "course": "Course"
+  },
+  "github": {
+    "createIssue": "Create issue",
+    "editPage": "Edit this doc"
+  },
+  "contributing": {
+    "guide": "Suggest a change and learn how to <1>contribute</1>"
+  },
+  "cookieConsent": {
+    "title": "This site uses cookies",
+    "statement": "We use cookies and other similar technologies (\"Cookies\") on our websites and services to enhance your experience and to provide you with relevant content. By using our websites and services you are agreeing to the use of cookies. You can read more <2>here</2>. If you consent to our cookies, please click <4>Yes</4>.",
+    "agree": "Yes",
+    "disagree": "No"
+  },
+  "feedback": {
+    "question": "Was this doc helpful?",
+    "yes": "Yes",
+    "no": "No",
+    "comments": "Tell us more (optional)",
+    "email": "Your email (optional)",
+    "emailDisclaimer": "We'll only use this email for follow-up questions about your feedback.",
+    "validEmail": "Please provide a valid email",
+    "submitButton": "Submit feedback",
+    "submitMessage": "Thanks for your detailed feedback",
+    "reset": "Reset"
+  },
+  "footer": {
+    "copyright": "Copyright {{copyrightSymbol}} {{year}} New Relic Inc.",
+    "careers": "Careers",
+    "terms": "Terms of Service",
+    "dmcaPolicy": "DMCA Policy",
+    "privacyNotice": "Privacy Notice",
+    "privacyChoices": "Your Privacy Choices",
+    "cookiePolicy": "Cookie Policy",
+    "ukSlaveryAct": "UK Slavery Act"
+  },
+  "inlineSignup": {
+    "ctaButton": "Start now",
+    "ctaText": "Sign up and install",
+    "emailLabel": "Company Email",
+    "emailValidationHint": "Please format your email like \"[email protected]\"",
+    "nameLabel": "Name",
+    "nameValidationHint": "Please enter your name",
+    "submitError": "An error occurred trying to create your account. Please try again later.",
+    "terms": "100 GB + 1 user free. Forever. No credit card required.<1 />By signing up you're agreeing to <4>Terms of Service</4> and <8>Services Privacy Notice.</8>"
+  },
+  "licenseKey": {
+    "buttonText": "license key",
+    "popover": {
+      "header": "License key",
+      "explainer": "Your license key is used to associate your incoming data with your account.",
+      "learnMore": "Learn more",
+      "getYourKey": "Get your key",
+      "createAccount": "Create account"
+    }
+  },
+  "mobileNav": {
+    "header": "Pages"
+  },
+  "relatedResources": {
+    "title": "Related resources"
+  },
+  "searchInput": {
+    "placeholder": "Search docs"
+  },
+  "tableOfContents": {
+    "title": "On this page"
+  }
+}