Fix linting errors (3)

ui/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = createConfig({
   incrementalAdoption: true, // turn everything into a warning
   rules: {
     'unicorn/consistent-destructuring': 'off', // too many failures in React class components
+    'promise/catch-or-return': 'off', // requires deeper refactoring of fetching layer
 
     // Ternaries are sometimes more readable when `true` branch is most significant branch
     'no-negated-condition': 'off',
@@ -37,8 +38,12 @@ module.exports = createConfig({
     createReactOverride({
       ...dependencies,
       rules: {
+        'react/no-unsafe': 'off', // requires non-trivial refactoring
         'react/destructuring-assignment': 'off', // too many failures in React class components
         'react/jsx-no-constructed-context-values': 'off', // too strict
+        'react/static-property-placement': 'off', // will not be relevant after converting to functional components
+        'jsx-a11y/anchor-is-valid': 'off', // requires non-trivial refactoring
+        'jsx-a11y/no-static-element-interactions': 'off', // requires non-trivial refactoring
       },
     }),
     createJestOverride({

ui/src/components/BeamlineCamera/BeamlineCamera.jsx

@@ -65,7 +65,7 @@ const BeamlineCamera = ({
   const video = (
     <div>
       {format != 'mp4' ? (
-        <img
+        <img // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
           onClick={onImageClick}
           src={url}
           alt={labelText}

ui/src/components/Equipment/PlateManipulator.jsx

@@ -382,7 +382,7 @@ class PlateManipulator extends React.Component {
                   if (this.props.contents.children !== null) {
                     if (plate.type === 'square') {
                       cell = (
-                        <div
+                        <div // eslint-disable-line jsx-a11y/prefer-tag-over-role
                           tabIndex={0}
                           role="button"
                           onContextMenu={(e) =>
@@ -492,7 +492,7 @@ class PlateManipulator extends React.Component {
                   if (this.props.contents.children !== null) {
                     if (plate.type === 'square') {
                       cell = (
-                        <div
+                        <div // eslint-disable-line jsx-a11y/prefer-tag-over-role
                           role="button"
                           tabIndex={0}
                           onContextMenu={(e) =>

ui/src/components/Equipment/SampleChanger.js

@@ -72,7 +72,7 @@ export class SampleChangerTreeNode extends React.Component {
   }
 
   treeNodeCbxClick(e) {
-    const treeNodeIcon = document.getElementById(`${e.target.id}icon`);
+    const treeNodeIcon = document.querySelector(`#${e.target.id}icon`);
     if (treeNodeIcon) {
       if (e.target.checked) {
         treeNodeIcon.className = 'fa fa-minus';
@@ -116,6 +116,7 @@ export class SampleChangerTreeNode extends React.Component {
         </li>
 
         <Menu id={`${this.props.label}`}>
+          {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}
           <li role="heading" aria-level="2" className="dropdown-header">
             <b>Container {this.props.label}</b>
           </li>

ui/src/components/Login/Login.jsx

@@ -75,7 +75,7 @@ function LoginComponent(props) {
                   type="text"
                   aria-label="Login ID"
                   placeholder="Login ID"
-                  autoFocus
+                  autoFocus // eslint-disable-line jsx-a11y/no-autofocus
                   required
                   isInvalid={!!errors.username}
                   {...field}

ui/src/components/MotorInput/MotorInput.jsx

@@ -19,7 +19,7 @@ export default class MotorInput extends React.Component {
   }
 
   /* eslint-enable react/no-set-state */
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
       this.motorValue.value = nextProps.value.toFixed(this.props.decimalPoints);
       this.motorValue.defaultValue = nextProps.value.toFixed(

ui/src/components/MotorInput/OneAxisTranslationControl.jsx

@@ -14,7 +14,7 @@ export default class OneAxisTranslationControl extends React.Component {
   }
 
   /* eslint-enable react/no-set-state */
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value && nextProps.value !== this.props.value) {
       this.motorValue.value = nextProps.value.toFixed(this.props.decimalPoints);
       this.motorValue.defaultValue = nextProps.value.toFixed(

ui/src/components/Notify/UserMessage.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-string-refs */
 import React from 'react';
 import './style.css';
 

ui/src/components/PeriodicTable/PeriodicTable.jsx

@@ -11,7 +11,7 @@ export default class PeriodicTable extends React.Component {
 
   onClickHandler(e) {
     if (e.target.id) {
-      const el = document.getElementById(this.state.selectedElement);
+      const el = document.querySelector(`#${this.state.selectedElement}`);
       const cell = e.target.children[0];
 
       if (el) {
@@ -27,7 +27,7 @@ export default class PeriodicTable extends React.Component {
   }
 
   enableElement(el) {
-    const domel = document.getElementById(el);
+    const domel = document.querySelector(`#${el}`);
 
     if (domel) {
       domel.className += ' available';

ui/src/components/Plot1D.jsx

@@ -20,7 +20,7 @@ class Plot1D extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.autoNext) {
       if (this.state.plotId !== null) {
         if (nextProps.lastPlotId !== this.state.plotId) {
@@ -43,7 +43,7 @@ class Plot1D extends React.Component {
     }
   }
 
-  componentWillUpdate(nextProps, nextState) {
+  UNSAFE_componentWillUpdate(nextProps, nextState) {
     const { plotId } = nextState;
     if (plotId) {
       const plotInfo = nextProps.plotsInfo[plotId];

ui/src/components/SSXChip/SSXChip.jsx

@@ -34,6 +34,7 @@ function _GridData(fabricObject) {
 function ChipContextMenu(props) {
   return (
     <Menu id="chip-context-menu">
+      {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}
       <li role="heading" aria-level="2" className="dropdown-header">
         <b>Chip</b>
       </li>
@@ -496,7 +497,7 @@ export default class SSXChip extends React.Component {
       }
     });
 
-    this.props.gridList.map((gridData) => {
+    this.props.gridList.forEach((gridData) => {
       this.freeFormCanvas.add(
         new fabric.Rect({
           left: gridData.screenCoord[1],

ui/src/components/SSXChip/SSXChipControl.jsx

@@ -9,8 +9,6 @@ export default class SSXChipControl extends React.Component {
     super(props);
     this.handleAddTask = this.handleAddTask.bind(this);
     this.handleAddGrid = this.handleAddGrid.bind(this);
-    this.handleRemoveGrid = this.handleRemoveGrid.bind(this);
-    this.handleUpdateGrid = this.handleUpdateGrid.bind(this);
   }
 
   handleAddTask(triggerEvent, event, props, data) {
@@ -41,10 +39,6 @@ export default class SSXChipControl extends React.Component {
     this.props.sampleActions.sendAddShape({ t: 'G', ...data });
   }
 
-  handleRemoveGrid(id) {}
-
-  handleUpdateGrid(data) {}
-
   renderChip() {
     const headConfiguration =
       this.props.hardwareObjects.diffractometer.attributes.head_configuration ??
@@ -73,8 +67,6 @@ export default class SSXChipControl extends React.Component {
             availableChipLayoutList={Object.keys(headConfiguration.available)}
             onAddTask={this.handleAddTask}
             onAddGrid={this.handleAddGrid}
-            onRemoveGrid={this.handleRemoveGrid}
-            onUpdateGrid={this.handleUpdateGrid}
             gridList={Object.values(this.props.grids)}
             sampleMotorVerticalName={sampleVerticalUiProp.attribute}
             sampleMotorHorizontalName={sampleHorizontalUiProp.attribute}

ui/src/components/SampleGrid/TaskItem.jsx

@@ -174,23 +174,23 @@ export class TaskItem extends React.Component {
           <div className="row" style={{ paddingTop: '0.5em' }}>
             <span className="col-sm-4">
               <b>Quality Indictor: </b>
-              <img ref="fimage" alt="First" src={qIndUrl} width="90%" />
+              <img alt="First" src={qIndUrl} width="90%" />
             </span>
             <span className="col-sm-4">
               <b>First image: </b>
-              <img ref="fimage" alt="First" src={fImageUrl} width="90%" />
+              <img alt="First" src={fImageUrl} width="90%" />
             </span>
             <span className="col-sm-4">
               <b>Last image: </b>
-              <img ref="limage" alt="Last" src={lImageUrl} width="90%" />
+              <img alt="Last" src={lImageUrl} width="90%" />
             </span>
           </div>
         </div>
       );
     } else if (!isUnCollected(task)) {
       content = (
         <span>
-          <img src={loader} role="presentation" /> Fetching data, please wait
+          <img src={loader} alt="" /> Fetching data, please wait
         </span>
       );
     }

ui/src/components/SampleQueue/QueueControl.js

@@ -119,21 +119,7 @@ export default class QueueControl extends React.Component {
     }
   }
 
-  renderSampleOptions(option) {
-    return (
-      <Button
-        className={option.class}
-        variant=""
-        size="sm"
-        onClick={option.action}
-        key={option.key}
-      >
-        {option.text}
-      </Button>
-    );
-  }
-
-  renderOptions(option) {
+  renderOption(option) {
     return (
       <Button
         className={option.class}
@@ -199,19 +185,17 @@ export default class QueueControl extends React.Component {
         >
           <Nav.Item>
             <span style={{ marginRight: '0.6em' }}>
-              {queueOptions.map((option) => this.renderOptions(option))}
+              {queueOptions.map((option) => this.renderOption(option))}
             </span>
             <span>
-              {sampleQueueOptions.map((option) =>
-                this.renderSampleOptions(option),
-              )}
+              {sampleQueueOptions.map((option) => this.renderOption(option))}
             </span>
           </Nav.Item>
           <Nav.Item>
             <img
               src={loader}
               style={{ display: showBusyIndicator, marginLeft: '25%' }}
-              role="presentation"
+              alt=""
             />
           </Nav.Item>
         </Nav>

ui/src/components/SampleView/ContextMenu.js

@@ -9,7 +9,7 @@ export default class ContextMenu extends React.Component {
     this.menuOptions = this.menuOptions.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.show) {
       this.showContextMenu(nextProps.x, nextProps.y);
     } else {

ui/src/components/SampleView/DrawGridPlugin.js

@@ -300,7 +300,9 @@ export default class DrawGridPlugin {
   initializeCellFilling(gd, col, row) {
     const level = this.overlayLevel ? this.overlayLevel : 0.2;
     const fill = `rgba(0, 0, 200, ${level}`;
-    return new Array(col).fill().map(() => new Array(row).fill(fill));
+    return Array.from({ length: col }).map(() =>
+      Array.from({ length: row }).fill(fill),
+    );
   }
 
   cellFillingFromData(gd, col, row) {
@@ -311,13 +313,9 @@ export default class DrawGridPlugin {
      */
     const fillingMatrix = this.initializeCellFilling(gd, col, row);
 
-    const data = new Array(col).fill().map(() => new Array(row).fill());
-
-    for (let nw = 0; nw < col; nw++) {
-      for (let nh = 0; nh < row; nh++) {
-        data[nw][nh] = Math.random();
-      }
-    }
+    const data = Array.from({ length: col }).map(() =>
+      Array.from({ length: row }).fill(Math.random()),
+    );
 
     // Asume flat result object to remain compatible with old format only
     // suporting one type of results

ui/src/components/SampleView/GridForm.jsx

@@ -175,7 +175,6 @@ export default class GridForm extends React.Component {
                     step="0.05"
                     defaultValue={this.props.getGridOverlayOpacity()}
                     onChange={this.props.setGridOverlayOpacity}
-                    ref="overlaySlider"
                     name="overlaySlider"
                   />
                 </Col>

ui/src/components/SampleView/SampleControls.js

@@ -286,9 +286,9 @@ export default class SampleControls extends React.Component {
 
               <datalist id="volsettings">
                 {[
-                  ...new Array(
-                    zoom_motor.limits[1] - zoom_motor.limits[0],
-                  ).keys(),
+                  ...Array.from({
+                    length: zoom_motor.limits[1] - zoom_motor.limits[0],
+                  }).keys(),
                 ].map((i) => (
                   <option key={`volsettings-${i}`}>
                     {zoom_motor.limits[0] + i}

ui/src/components/SampleView/SampleImage.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import './SampleView.css';
 import React from 'react';
 import { MOTOR_STATE } from '../../constants';
@@ -103,7 +104,7 @@ export default class SampleImage extends React.Component {
     this.initJSMpeg();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { width, cinema } = this.props;
     if (
       nextProps.width !== width ||
@@ -428,7 +429,7 @@ export default class SampleImage extends React.Component {
           .filter((shape) => this.props.twoDPoints[shape.id] !== undefined)
           .map((shape) => shape.id);
 
-        const pointList = threeDpointList.concat(twoDPointList);
+        const pointList = [...threeDpointList, ...twoDPointList];
 
         const gridList = shapes
           .filter((shape) => this.props.grids[shape.id] !== undefined)
@@ -592,7 +593,7 @@ export default class SampleImage extends React.Component {
       );
 
       const resultDataPath = shapeData.resultDataPath;
-      if (resultDataPath.length !== 0) {
+      if (resultDataPath.length > 0) {
         this.props.generalActions.sendDisplayImage(
           `${resultDataPath}&img_num=${imgNum}`,
         );

ui/src/components/Tasks/GenericTaskForm.js

@@ -233,7 +233,7 @@ class GenericTaskForm extends React.Component {
       const data = JSON.parse(_d);
 
       for (const fieldName in data) {
-        const el = document.getElementById(`root_${fieldName}`);
+        const el = document.querySelector(`#root_${fieldName}`);
         if (el !== null) {
           el.value = data[fieldName];
         }

ui/src/components/Tasks/Interleaved.jsx

@@ -24,9 +24,10 @@ const wedgeColorTable = {
 };
 
 function getSubWedges(swNumImg, wedgeList) {
-  const subWedges = {};
-  subWedges.swSizes = [];
-  subWedges.numWedges = wedgeList.length;
+  const subWedges = {
+    swSizes: [],
+    numWedges: wedgeList.length,
+  };
 
   wedgeList.forEach((wedge, wedgeIdx) => {
     const swSize = wedge.parameters.num_images / swNumImg;

ui/src/containers/ConnectionLostDialog.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-string-refs */
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';