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/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}`}