Update eslint to 8.31.0, handle lint (#1941)

* update eslint, handle lint * remove effect in useAdvancedSearch hook * remove only * don't use require.context in the jsdom browser * resolve sticky columns story conflict
folio-org · Jan 18, 2023 · 945f665 · 945f665
1 parent 98b90bb
commit 945f665
Show file tree

Hide file tree

Showing 17 changed files with 165 additions and 77 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -17,7 +17,14 @@
         "max-classes-per-file": "off",
         "max-len": "off",
         "no-unused-expressions": "off",
-        "react/prop-types": "off"
+        "react/prop-types": "off",
+        "semi": "off"
+      }
+    },
+    {
+      "files": ["lib/**/**"],
+      "rules": {
+        "semi": "off"
       }
     }
   ],

diff --git a/hooks/tests/useClickOutside-test.js b/hooks/tests/useClickOutside-test.js
@@ -16,7 +16,7 @@ import { mountWithContext } from '../../tests/helpers';
 import useClickOutside from '../useClickOutside';
 
 const UseClickOutsideInteractor = interactor(class UseClickOutsideInteractor {
-  static defaultScope ='#test-component';
+  static defaultScope = '#test-component';
   clickOutsideElement = clickable('#click-outside-element');
   clickInsideElement = clickable('#click-inside-element');
 });

diff --git a/lib/Accordion/ExpandAllButton.js b/lib/Accordion/ExpandAllButton.js
@@ -25,6 +25,12 @@ const propTypes = {
   setStatus: PropTypes.func,
 };
 
+function handleClick({ accordionStatus, func, setStatus, onToggle }) {
+  const newState = expandAll(accordionStatus, func);
+  if (setStatus) setStatus(newState);
+  if (onToggle) onToggle(newState);
+}
+
 const ExpandAllButton = ({
   accordionStatus,
   collapseLabel: collapseLabelProp,
@@ -40,17 +46,11 @@ const ExpandAllButton = ({
 
   const func = majorityCollapsed(accordionStatus);
 
-  function handleClick() {
-    const newState = expandAll(accordionStatus, func);
-    if (setStatus) setStatus(newState);
-    if (onToggle) onToggle(newState);
-  }
-
   return (
     <Button
       buttonStyle="link bottomMargin0"
       id={id}
-      onClick={handleClick}
+      onClick={() => { handleClick({ accordionStatus, func, setStatus, onToggle }); }}
       data-tast-expand-button
     >
       <strong>{func ? expandLabel : collapseLabel}</strong>

diff --git a/lib/AdvancedSearch/hooks/useAdvancedSearch/useAdvancedSearch.js b/lib/AdvancedSearch/hooks/useAdvancedSearch/useAdvancedSearch.js
@@ -2,8 +2,8 @@ import {
   useCallback,
   useState,
   useMemo,
-  useEffect,
 } from 'react';
+import { isEqual } from 'lodash';
 import { useIntl } from 'react-intl';
 
 import splitQueryRows from '../../utilities/splitQueryRows';
@@ -37,12 +37,14 @@ const useAdvancedSearch = ({
   searchOptions,
 }) => {
   const initialRowState = useMemo(() => {
-    return createInitialRowState(firstRowInitialSearch, defaultSearchOptionValue);
+    const initialRows = createInitialRowState(firstRowInitialSearch, defaultSearchOptionValue);
+    return splitQueryRows(initialRows);
   }, [firstRowInitialSearch, defaultSearchOptionValue]);
 
   const intl = useIntl();
   const [rowState, setRowState] = useState(initialRowState);
   const [showEmptyFirstRowMessage, setShowEmptyFirstRowMessage] = useState(false);
+  const [prevFirstRowInitialSearch, setPrevFirstRowInitialSearch] = useState(firstRowInitialSearch);
 
   const searchOptionsWithQuery = useMemo(() => (
     [{
@@ -83,15 +85,13 @@ const useAdvancedSearch = ({
 
   const handleCancel = useCallback(onCancel, [onCancel]);
 
-  const handleInitialSearchChange = () => {
+  // if the firstRowInitialSearch is updated, go ahead and update state
+  // before the state is committed to the DOM...
+  if (!isEqual(firstRowInitialSearch, prevFirstRowInitialSearch)) {
     const splitRows = splitQueryRows(initialRowState);
-
+    setPrevFirstRowInitialSearch(firstRowInitialSearch);
     setRowState(splitRows);
-  };
-
-  useEffect(() => {
-    handleInitialSearchChange();
-  }, [firstRowInitialSearch]);
+  }
 
   return {
     handleCancel,

diff --git a/lib/AdvancedSearch/tests/AdvancedSearch-test.js b/lib/AdvancedSearch/tests/AdvancedSearch-test.js
@@ -2,7 +2,7 @@
  * AdvancedSearch test
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { expect } from 'chai';
 import {
@@ -22,6 +22,31 @@ import {
 import { mountWithContext } from '../../../tests/helpers';
 
 import AdvancedSearch from '../AdvancedSearch';
+import Button from '../../Button';
+
+const Harness = (props) => {
+  const [initState, setInitState] = useState({ query: 'try', option: 'keyword' });
+  return (
+    <>
+      <Button onClick={() => { setInitState({ query: 'test', option: 'keyword' }) }}>Reset</Button>
+      <AdvancedSearch
+        firstRowInitialSearch={initState}
+        {...props}
+      >
+        {({ resetRows }) => (
+          <>
+            <button
+              type="button"
+              onClick={resetRows}
+            >
+              Change
+            </button>
+          </>
+        )}
+      </AdvancedSearch>
+    </>
+  )
+}
 
 describe('AdvancedSearch', () => {
   const advancedSearch = new Interactor();
@@ -235,4 +260,36 @@ describe('AdvancedSearch', () => {
       expect(onCancelSpy.calledOnce).to.be.true;
     });
   });
+
+  describe('updating initialRowSearch', () => {
+    beforeEach(async () => {
+      await mountWithContext(
+        <Harness
+          open
+          onSearch={onSearchSpy}
+          onCancel={onCancelSpy}
+          defaultSearchOptionValue={defaultSearchOptionValue}
+          searchOptions={searchOptions}
+        />
+      );
+    });
+
+    it('renders applicable values', async () => {
+      await advancedSearch.find(RowInteractor({ index: 0 })).perform(el => {
+        expect(el.querySelector('[data-test-advanced-search-query]').value).to.equal('try');
+      });
+    });
+
+    describe('resetting from the outside', () => {
+      beforeEach(async () => {
+        await ButtonInteractor('Reset').click();
+      });
+
+      it('renders updated query values', async () => {
+        await advancedSearch.find(RowInteractor({ index: 0 })).perform(el => {
+          expect(el.querySelector('[data-test-advanced-search-query]').value).to.equal('test');
+        });
+      });
+    })
+  })
 });
diff --git a/lib/FocusLink/FocusLink.js b/lib/FocusLink/FocusLink.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import css from './FocusLink.css';
@@ -18,58 +18,58 @@ const propTypes = {
   targetNextAfter: PropTypes.element,
 };
 
-const FocusLink = (props) => {
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  const [{ target, component, tabIndex, targetNextAfter }, rest] = separateComponentProps(props, FocusLink.propTypes);
-
-  let link = null;
-
-  function focusTarget() {
-    if (typeof target === 'string') {
-      let id = target;
+function focusTarget(target) {
+  if (typeof target === 'string') {
+    let id = target;
 
-      if (target.charAt(0) === '#') {
-        id = target.replace('#', '');
-      }
+    if (target.charAt(0) === '#') {
+      id = target.replace('#', '');
+    }
 
-      const tgt = document.getElementById(id);
-      if (tgt) {
-        tgt.focus();
-      }
-    } else if (typeof target === 'object') {
-      props.target.focus();
+    const tgt = document.getElementById(id);
+    if (tgt) {
+      tgt.focus();
     }
+  } else if (typeof target === 'object') {
+    target.focus();
   }
+}
 
-  function focusNext() {
-    let nextFocusable;
-    if (props.targetNextAfter) {
-      nextFocusable = getNextFocusable(targetNextAfter, false);
-    } else {
-      nextFocusable = getNextFocusable(link, false);
-    }
-    nextFocusable.focus();
+function focusNext(targetNextAfter = false, link) {
+  let nextFocusable;
+  if (targetNextAfter) {
+    nextFocusable = getNextFocusable(targetNextAfter, false);
+  } else {
+    nextFocusable = getNextFocusable(link.current, false);
   }
+  nextFocusable.focus();
+}
+
+const FocusLink = (props) => {
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  const [{ target, component, tabIndex, targetNextAfter }, rest] = separateComponentProps(props, FocusLink.propTypes);
+
+  let link = useRef(null);
 
-  function handleClick(e) {
+  const handleClick = useCallback((e) => {
     e.preventDefault();
     if (props.target) {
-      focusTarget();
+      focusTarget(target);
     } else {
-      focusNext();
+      focusNext(targetNextAfter, link);
     }
-  }
+  }, [props.target, targetNextAfter, link, target])
 
-  function handleKeyPress(e) {
+  const handleKeyDown = useCallback((e) => {
     e.preventDefault();
     if (e.key === 'Enter') {
       if (props.target) {
-        focusTarget();
+        focusTarget(target);
       } else {
-        focusNext();
+        focusNext(targetNextAfter, link);
       }
     }
-  }
+  }, [props.target, targetNextAfter, link, target])
 
   function getClass() {
     return classNames(
@@ -84,11 +84,11 @@ const FocusLink = (props) => {
     return (
       <Component
         data-test-focus-link
-        ref={(ref) => { link = ref; }}
+        ref={link}
         role="button"
         tabIndex={tabIndex || 0}
         onClick={handleClick}
-        onKeyPress={handleKeyPress}
+        onKeyDown={handleKeyDown}
         className={getClass()}
         {...rest}
       >
@@ -103,7 +103,7 @@ const FocusLink = (props) => {
       role="button"
       tabIndex={tabIndex || 0}
       onClick={handleClick}
-      onKeyPress={handleKeyPress}
+      onKeyDown={handleKeyDown}
       className={getClass()}
       {...rest}
     >

diff --git a/lib/Icon/icons.js b/lib/Icon/icons.js
@@ -9,10 +9,16 @@ import omitProps from '../../util/omitProps';
 /**
  * Import SVG icons
  */
-const req = require.context('!!react-svg-loader!./icons/', true, /\.svg$/);
-const icons = req.keys().reduce((images, path) => Object.assign(images, {
-  [path.slice(2, path.length - 4)]: req(path).default,
-}), {});
+let icons = { default: import('./icons/default.svg') };
+// check to see if we're in the node test browser - this environment doesn't
+// use webpack to build, so it will failwhen require.context is executed for whatever reason.
+if (!navigator.userAgent.includes('jsdom')) {
+  const req = require.context('!!react-svg-loader!./icons/', true, /\.svg$/);
+  icons = req.keys().reduce((images, path) => Object.assign(images, {
+    [path.slice(2, path.length - 4)]: req(path).default,
+  }), {});
+}
+
 
 const SpinnerEllipsis = ({ className, ...rest }) => (
   <div className={`${dotSpinner.spinner} ${className}`} {...omitProps(rest, ['viewBox'])}>

diff --git a/lib/List/tests/interactor.js b/lib/List/tests/interactor.js
@@ -13,11 +13,11 @@ export default interactor(class ListInteractor {
     return count(selector);
   }
 
-  hasUL= isPresent('ul');
+  hasUL = isPresent('ul');
   hasEmptyMessage = isPresent('[class*=isEmptyMessage---]');
   emptyMessageText = text('[class*=isEmptyMessage---]');
-  hasMarginBottom0Class= hasClass('ul', `${css.marginBottom0}`);
-  hasBulletedClass= hasClass('ul', `${css.listStyleBullets}`);
-  hasDefaultClass= hasClass('ul', `${css.listStyleDefault}`);
+  hasMarginBottom0Class = hasClass('ul', `${css.marginBottom0}`);
+  hasBulletedClass = hasClass('ul', `${css.listStyleBullets}`);
+  hasDefaultClass = hasClass('ul', `${css.listStyleDefault}`);
   itemCount = this.countItems();
 });
diff --git a/lib/MultiColumnList/stories/CheckboxSelect.js b/lib/MultiColumnList/stories/CheckboxSelect.js
@@ -70,7 +70,7 @@ export default class CheckboxSelect extends React.Component {
     }
   }
 
-  isSelected =({ item }) => (
+  isSelected = ({ item }) => (
     this.state.allSelected ||
     (this.state.selected.findIndex(s => s.index === item.index) !== -1)
   );

diff --git a/lib/MultiColumnList/tests/interactor.js b/lib/MultiColumnList/tests/interactor.js
@@ -72,8 +72,6 @@ export default interactor(class MultiColumnListInteractor {
 
   listScrollTop = property('[class*=mclScrollable---]', 'scrollTop');
 
-  listScrollTop = property('[class*=mclScrollable---]', 'scrollTop');
-
   columnsMeasured() {
     return this.when(() => (this.cell.style && this.cell.style.width !== ''));
   }

diff --git a/lib/MultiSelection/MultiSelection.js b/lib/MultiSelection/MultiSelection.js
@@ -44,7 +44,12 @@ class MultiSelection extends React.Component {
     asyncFiltering: PropTypes.bool,
     autoFocus: PropTypes.bool,
     backspaceDeletes: PropTypes.bool,
-    dataOptions: PropTypes.arrayOf(PropTypes.any),
+    dataOptions: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+      ])
+    ),
     dirty: PropTypes.bool,
     disabled: PropTypes.bool,
     emptyMessage: PropTypes.string,

diff --git a/lib/Paneset/PaneResizeContainer.js b/lib/Paneset/PaneResizeContainer.js
@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import insertByClientRect from './insertByClientRect';
@@ -248,4 +249,18 @@ const PaneResizeContainer = ({ isRoot, children, onElementResize, parentElement,
   return children;
 };
 
+PaneResizeContainer.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  isRoot: PropTypes.bool,
+  onElementResize: PropTypes.func,
+  parentElement: PropTypes.element,
+  resizeContainerRef: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.func
+  ])
+}
+
 export default PaneResizeContainer;