fix: lint errors

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) => {

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;

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 = ({
             <SectionHeading>Recent search terms</SectionHeading>
             <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 key={query} className={cx({ selected: selected === i })}>
+                  <a
+                    href={`/search-results?query=${query}&page=1`}
+                    onClick={() => onRecentClick(query, i)}
+                  >
+                    {query}
+                  </a>
                 </li>
               ))}
             </RecentQueries>
@@ -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,

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;

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"
     />

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"
     />

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"
     />