remove all linting errors on client/src (#1463)

* run eslint --fix

* camelcase

* camelCase config part 1

* part 2

* part 3 - removing subscripts

* fix "class-methods-use-this"

* fix "class-methods-use-this"

* fix eslint ignores

* add eslint ignore for set state in update

* reformat comments to appease eslint

* add a11y features

* sort-comp fix

* a11y fix

* add ignore for set state in update

* add a11y htmlFor

* remove unused toast

* remove unnecessary bind

* add ignore for set state in update

* add rel="noopener noreferrer"

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener

* use arrow function to bind

* remove unused definitions/declarations

* prettier

* remove unused state

* add comments to empty catch blocks remove curly brackets

* escape '

* use eqeqeq

* switch from default export

* remove ignore log

* remove static

* fix import

* revert subscripting config

* clean-up

* remove unnecessary subscript

* fix new errors from master

* change category click handler to a class property

* fix camelcase changes that slipped by

* unused import

* Fix newly introduced ESLint errors from addGenes

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

@@ -64,7 +64,7 @@ class Category extends React.Component {
       } else if (categoryCount.selectedCatCount < categoryCount.totalCatCount) {
         /* to be explicit... */
         this.checkbox.indeterminate = true;
-        this.setState({ isChecked: false });
+        this.setState({ isChecked: false }); // eslint-disable-line react/no-did-update-set-state
       }
     }
   }
@@ -77,14 +77,15 @@ class Category extends React.Component {
     });
   };
 
-  toggleAll() {
-    const { dispatch, metadataField } = this.props;
-    dispatch({
-      type: "categorical metadata filter all of these",
-      metadataField,
-    });
-    this.setState({ isChecked: true });
-  }
+  handleCategoryClick = () => {
+    const { annotations, metadataField, onExpansionChange } = this.props;
+    const editingCategory =
+      annotations.isEditingCategoryName &&
+      annotations.categoryBeingEdited === metadataField;
+    if (!editingCategory) {
+      onExpansionChange(metadataField);
+    }
+  };
 
   toggleNone() {
     const { dispatch, metadataField } = this.props;
@@ -95,6 +96,15 @@ class Category extends React.Component {
     this.setState({ isChecked: false });
   }
 
+  toggleAll() {
+    const { dispatch, metadataField } = this.props;
+    dispatch({
+      type: "categorical metadata filter all of these",
+      metadataField,
+    });
+    this.setState({ isChecked: true });
+  }
+
   handleToggleAllClick() {
     const { isChecked } = this.state;
     // || this.checkbox.indeterminate === false
@@ -115,6 +125,8 @@ class Category extends React.Component {
       globals.categoryDisplayStringMaxLength
     );
 
+    const checkboxID = `category-select-${metadataField}`;
+
     return (
       <div
         style={{
@@ -135,8 +147,8 @@ class Category extends React.Component {
               alignItems: "flex-start",
             }}
           >
-            <label className="bp3-control bp3-checkbox">
-              <input disabled checked type="checkbox" />
+            <label htmlFor={checkboxID} className="bp3-control bp3-checkbox">
+              <input disabled id={checkboxID} checked type="checkbox" />
               <span className="bp3-control-indicator" />
             </label>
             <Tooltip
@@ -174,9 +186,7 @@ class Category extends React.Component {
       metadataField,
       categoricalSelection,
       isColorAccessor,
-      annotations,
       isExpanded,
-      onExpansionChange,
       schema,
     } = this.props;
 
@@ -185,6 +195,8 @@ class Category extends React.Component {
       return this.renderIsStillLoading();
     }
 
+    const checkboxID = `category-select-${metadataField}`;
+
     const isUserAnno =
       schema?.annotations?.obsByName[metadataField]?.writable ?? false;
     const isTruncated = _.get(
@@ -225,8 +237,9 @@ class Category extends React.Component {
             alignItems: "flex-start",
           }}
         >
-          <label className="bp3-control bp3-checkbox">
+          <label className="bp3-control bp3-checkbox" htmlFor={checkboxID}>
             <input
+              id={checkboxID}
               data-testclass="category-select"
               data-testid={`${metadataField}:category-select`}
               onChange={this.handleToggleAllClick.bind(this)}
@@ -251,19 +264,19 @@ class Category extends React.Component {
             }}
           >
             <span
+              role="menuitem"
+              tabIndex="0"
               data-testid={`${metadataField}:category-expand`}
+              onKeyPress={(e) => {
+                if (e.key === "Enter") {
+                  this.handleCategoryClick();
+                }
+              }}
               style={{
                 cursor: "pointer",
                 display: "inline-block",
               }}
-              onClick={() => {
-                const editingCategory =
-                  annotations.isEditingCategoryName &&
-                  annotations.categoryBeingEdited === metadataField;
-                if (!editingCategory) {
-                  onExpansionChange(metadataField);
-                }
-              }}
+              onClick={this.handleCategoryClick}
             >
               {isUserAnno ? (
                 <Icon style={{ marginRight: 5 }} icon="tag" iconSize={16} />

client/src/components/categorical/index.js

@@ -11,7 +11,7 @@ import LabelInput from "./labelInput";
 import { labelPrompt } from "./labelUtil";
 
 @connect((state) => ({
-  writableCategoriesEnabled: state.config?.parameters?.["annotations"] ?? false,
+  writableCategoriesEnabled: state.config?.parameters?.annotations ?? false,
   schema: state.world?.schema,
   config: state.config,
   ontology: state.ontology,

client/src/components/categorical/labelInput.js

@@ -23,6 +23,9 @@ export default class LabelInput extends React.PureComponent {
   * popoverProps -- will be passed to <Suggest>
   */
 
+  /* maxinum number of suggestions */
+  static QueryResultLimit = 100;
+
   constructor(props) {
     super(props);
 
@@ -103,9 +106,6 @@ export default class LabelInput extends React.PureComponent {
     );
   };
 
-  /* maxinum number of suggestions */
-  static QueryResultLimit = 100;
-
   filterLabels(query) {
     const { labelSuggestions } = this.props;
     if (!labelSuggestions) return [];

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

@@ -62,6 +62,8 @@ 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
       this.setState({
         editedLabelText: this.currentLabel(),
       });
@@ -327,6 +329,8 @@ class CategoryValue extends React.Component {
       annotations.isEditingLabelName &&
       annotations.labelEditable.label === categoryIndex;
 
+    const valueToggleLabel = `value-toggle-checkbox-${displayString}`;
+
     return (
       <div
         key={i}
@@ -360,8 +364,13 @@ class CategoryValue extends React.Component {
           }}
         >
           <div style={{ display: "flex", alignItems: "baseline" }}>
-            <label className="bp3-control bp3-checkbox" style={{ margin: 0 }}>
+            <label
+              htmlFor={valueToggleLabel}
+              className="bp3-control bp3-checkbox"
+              style={{ margin: 0 }}
+            >
               <input
+                id={valueToggleLabel}
                 onChange={selected ? this.toggleOff : this.toggleOn}
                 data-testclass="categorical-value-select"
                 data-testid={`categorical-value-select-${metadataField}-${displayString}`}