Add linting rules around ESLint directive comments (#1551)

* add eslint-plugin-eslint-comments and require descriptive configuration

https://eslint.org/docs/user-guide/configuring#using-configuration-comments

* update ESLint

* audit ESLint disables

* update ESLint and related dependencies

client/src/components/categorical/annoDialog.js

@@ -72,7 +72,7 @@ class AnnoDialog extends React.PureComponent {
                 </Button>
               ) : null}
               <Button
-                {...primaryButtonProps} // eslint-disable-line react/jsx-props-no-spreading
+                {...primaryButtonProps} // eslint-disable-line react/jsx-props-no-spreading -- Spreading props allows for modularity
                 onClick={handleSubmit}
                 disabled={!text || validationError}
                 intent="primary"

client/src/components/categorical/category/index.js

@@ -51,19 +51,21 @@ class Category extends React.Component {
           0
         ),
       };
+      /* eslint-disable react/no-did-update-set-state -- Contained in if statement to prevent infinite looping */
       if (categoryCount.selectedCatCount === categoryCount.totalCatCount) {
         /* everything is on, so not indeterminate */
         this.checkbox.indeterminate = false;
-        this.setState({ isChecked: true }); // eslint-disable-line react/no-did-update-set-state
+        this.setState({ isChecked: true });
       } else if (categoryCount.selectedCatCount === 0) {
         /* nothing is on, so no */
         this.checkbox.indeterminate = false;
-        this.setState({ isChecked: false }); // eslint-disable-line react/no-did-update-set-state
+        this.setState({ isChecked: false });
       } else if (categoryCount.selectedCatCount < categoryCount.totalCatCount) {
         /* to be explicit... */
         this.checkbox.indeterminate = true;
-        this.setState({ isChecked: false }); // eslint-disable-line react/no-did-update-set-state
+        this.setState({ isChecked: false });
       }
+      /* eslint-enable react/no-did-update-set-state -- re-enabling*/
     }
   }
 

client/src/components/categorical/labelInput.js

@@ -142,7 +142,7 @@ export default class LabelInput extends React.PureComponent {
       return (
         <InputGroup
           autoFocus={autoFocus}
-          {...props.inputProps} // eslint-disable-line react/jsx-props-no-spreading
+          {...props.inputProps} // eslint-disable-line react/jsx-props-no-spreading --- Allows for modularity
           value={label}
           onChange={this.handleChange}
         />

client/src/components/categorical/value/index.js

@@ -62,8 +62,7 @@ class CategoryValue extends React.Component {
       prevProps.metadataField !== metadataField ||
       prevProps.categoryIndex !== categoryIndex
     ) {
-      // adequately checked to prevent looping
-      // eslint-disable-next-line react/no-did-update-set-state
+      // eslint-disable-next-line react/no-did-update-set-state --- adequately checked to prevent looping
       this.setState({
         editedLabelText: this.currentLabel(),
       });

client/src/components/geneExpression/addGenes.js

@@ -84,7 +84,7 @@ class AddGenes extends React.Component {
     return upperGenes;
   };
 
-  // eslint-disable-next-line react/sort-comp
+  // eslint-disable-next-line react/sort-comp -- memo requires a defined _genesToUpper
   _memoGenesToUpper = memoize(this._genesToUpper, (arr) => arr);
 
   handleBulkAddClick = () => {

client/src/components/graph/graph.js

@@ -358,8 +358,7 @@ class Graph extends React.Component {
       );
     }
     if (Object.keys(stateChanges).length > 0) {
-      // Preventing update loop via stateChanges and diff checks
-      // eslint-disable-next-line react/no-did-update-set-state
+      // eslint-disable-next-line react/no-did-update-set-state --- Preventing update loop via stateChanges and diff checks
       this.setState(stateChanges);
     }
   }

client/src/components/graph/overlays/centroidLabels.js

@@ -70,16 +70,14 @@ class CentroidLabels extends PureComponent {
 
       labelSVGS.push(
         <g
-          // label is unique so disabling eslint rule
-          // eslint-disable-next-line react/no-array-index-key
+          // eslint-disable-next-line react/no-array-index-key --- label is unique and consistent
           key={label}
           className="centroid-label"
           transform={`translate(${coords[0]}, ${coords[1]})`}
           data-testclass="centroid-label"
           data-testid={`${label}-centroid-label`}
         >
-          {/* The mouse actions for centroid labels do not have a screen reader alternative */}
-          {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
+          {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events --- the mouse actions for centroid labels do not have a screen reader alternative*/}
           <text
             transform={inverseTransform}
             textAnchor="middle"

client/src/components/menubar/diffexpButtons.js

@@ -42,7 +42,13 @@ class DiffexpButtons extends React.Component {
 
   render() {
     /* diffexp-related buttons may be disabled */
-    const { differential, diffexpMayBeSlow, diffexpCellcountMax } = this.props;
+    const {
+      differential,
+      diffexpMayBeSlow,
+      diffexpCellcountMax,
+      crossfilter,
+      dispatch,
+    } = this.props;
 
     const haveBothCellSets =
       !!differential.celllist1 && !!differential.celllist2;
@@ -66,14 +72,17 @@ class DiffexpButtons extends React.Component {
 
     return (
       <ButtonGroup className={styles.menubarButton}>
+        {/* eslint-disable react/jsx-props-no-spreading --- disable until eslint-config-airbnb v18.1.1*/}
         <CellSetButton
-          {...this.props} // eslint-disable-line react/jsx-props-no-spreading
+          {...{ differential, crossfilter, dispatch }}
           eitherCellSetOneOrTwo={1}
         />
         <CellSetButton
-          {...this.props} // eslint-disable-line react/jsx-props-no-spreading
+          {...{ differential, crossfilter, dispatch }}
           eitherCellSetOneOrTwo={2}
         />
+        {/* eslint-enable react/jsx-props-no-spreading --- end disable*/}
+
         {!differential.diffExp ? (
           <Tooltip
             content={warnMaxSizeExceeded ? tipMessageWarn : tipMessage}