diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js index cc3a24467..80ade81c3 100644 --- a/ui/.eslintrc.js +++ b/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({ diff --git a/ui/src/components/BeamlineCamera/BeamlineCamera.jsx b/ui/src/components/BeamlineCamera/BeamlineCamera.jsx index a391c369c..c7e4c526e 100644 --- a/ui/src/components/BeamlineCamera/BeamlineCamera.jsx +++ b/ui/src/components/BeamlineCamera/BeamlineCamera.jsx @@ -65,7 +65,7 @@ const BeamlineCamera = ({ const video = (
{format != 'mp4' ? ( - {labelText} @@ -492,7 +492,7 @@ class PlateManipulator extends React.Component { if (this.props.contents.children !== null) { if (plate.type === 'square') { cell = ( -
diff --git a/ui/src/components/Equipment/SampleChanger.js b/ui/src/components/Equipment/SampleChanger.js index 41d572681..77c1aca33 100644 --- a/ui/src/components/Equipment/SampleChanger.js +++ b/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 { + {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}
  • Container {this.props.label}
  • diff --git a/ui/src/components/Login/Login.jsx b/ui/src/components/Login/Login.jsx index 687c48f8c..f2de182a8 100644 --- a/ui/src/components/Login/Login.jsx +++ b/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} diff --git a/ui/src/components/MotorInput/MotorInput.jsx b/ui/src/components/MotorInput/MotorInput.jsx index 28cb94503..683b4b190 100644 --- a/ui/src/components/MotorInput/MotorInput.jsx +++ b/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( diff --git a/ui/src/components/MotorInput/OneAxisTranslationControl.jsx b/ui/src/components/MotorInput/OneAxisTranslationControl.jsx index 274a9b15e..1237e3c38 100644 --- a/ui/src/components/MotorInput/OneAxisTranslationControl.jsx +++ b/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( diff --git a/ui/src/components/Notify/UserMessage.jsx b/ui/src/components/Notify/UserMessage.jsx index fe9fbc3bd..997e473dd 100644 --- a/ui/src/components/Notify/UserMessage.jsx +++ b/ui/src/components/Notify/UserMessage.jsx @@ -1,3 +1,4 @@ +/* eslint-disable react/no-string-refs */ import React from 'react'; import './style.css'; diff --git a/ui/src/components/PeriodicTable/PeriodicTable.jsx b/ui/src/components/PeriodicTable/PeriodicTable.jsx index 29fcc2763..4df392329 100644 --- a/ui/src/components/PeriodicTable/PeriodicTable.jsx +++ b/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'; diff --git a/ui/src/components/Plot1D.jsx b/ui/src/components/Plot1D.jsx index a621e9bd8..6e4d49788 100644 --- a/ui/src/components/Plot1D.jsx +++ b/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]; diff --git a/ui/src/components/SSXChip/SSXChip.jsx b/ui/src/components/SSXChip/SSXChip.jsx index 2697f7d82..47a143c99 100644 --- a/ui/src/components/SSXChip/SSXChip.jsx +++ b/ui/src/components/SSXChip/SSXChip.jsx @@ -34,6 +34,7 @@ function _GridData(fabricObject) { function ChipContextMenu(props) { return ( + {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}
  • Chip
  • @@ -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], diff --git a/ui/src/components/SSXChip/SSXChipControl.jsx b/ui/src/components/SSXChip/SSXChipControl.jsx index 0523f14a4..6b8d14a63 100644 --- a/ui/src/components/SSXChip/SSXChipControl.jsx +++ b/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} diff --git a/ui/src/components/SampleGrid/TaskItem.jsx b/ui/src/components/SampleGrid/TaskItem.jsx index aac1654a4..9814b47f8 100644 --- a/ui/src/components/SampleGrid/TaskItem.jsx +++ b/ui/src/components/SampleGrid/TaskItem.jsx @@ -174,15 +174,15 @@ export class TaskItem extends React.Component {
    Quality Indictor: - First + First First image: - First + First Last image: - Last + Last
    @@ -190,7 +190,7 @@ export class TaskItem extends React.Component { } else if (!isUnCollected(task)) { content = ( - Fetching data, please wait + Fetching data, please wait ); } diff --git a/ui/src/components/SampleQueue/QueueControl.js b/ui/src/components/SampleQueue/QueueControl.js index 450bde274..b8a052c05 100644 --- a/ui/src/components/SampleQueue/QueueControl.js +++ b/ui/src/components/SampleQueue/QueueControl.js @@ -119,21 +119,7 @@ export default class QueueControl extends React.Component { } } - renderSampleOptions(option) { - return ( - - ); - } - - renderOptions(option) { + renderOption(option) { return (