refactor: bring down eslint warnings to zero (#1714)

- install `@eslint-react/eslint-plugin` dependency
- configure `@eslint-react/eslint-plugin` in eslint config
- modernize `lint` command in `package.json`
- disable or fix various reported lint issues
- fix `div` being nested in `p` for settings
- replace deprecated `event.keyCode` with `event.key`
- update isEscKeyPress method and unit tests which used deprecated `event.keyCode`
- allow `eslint` v8 as peer dependency for `@eslint-react/eslint-plugin`

15 files changed, 50 insertions, 27 deletions

diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index 049080505..9b7715a23 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -46,6 +46,7 @@ function generateAccentStyle(accentColorStr) {
   try {
     accentColor = color(accentColorStr);
   } catch {
+    // eslint-disable-next-line no-param-reassign
     accentColorStr = DEFAULT_APP_SETTINGS.accentColor;
     accentColor = color(accentColorStr);
   }
diff --git a/src/features/basicAuth/Component.tsx b/src/features/basicAuth/Component.tsx
index 7c901344d..bae38443a 100644
--- a/src/features/basicAuth/Component.tsx
+++ b/src/features/basicAuth/Component.tsx
@@ -61,6 +61,7 @@ class BasicAuthModal extends Component<IProps> {
       <Modal
         isOpen={isModalVisible}
         className={classes.modal}
+        // eslint-disable-next-line react/jsx-no-bind
         close={this.cancel.bind(this)}
         showClose={false}
       >
@@ -86,6 +87,7 @@ class BasicAuthModal extends Component<IProps> {
               type="button"
               label={intl.formatMessage(globalMessages.cancel)}
               buttonType="secondary"
+              // eslint-disable-next-line react/jsx-no-bind
               onClick={this.cancel.bind(this)}
             />
             <Button
diff --git a/src/features/communityRecipes/store.ts b/src/features/communityRecipes/store.ts
index 1c21908e2..548867528 100644
--- a/src/features/communityRecipes/store.ts
+++ b/src/features/communityRecipes/store.ts
@@ -27,6 +27,7 @@ export class CommunityRecipesStore extends FeatureStore {
     return this.stores.recipePreviews.dev.map(
       (recipePreview: { isDevRecipe: boolean; author: any[] }) => {
         // TODO: Need to figure out if this is even necessary/used
+        // eslint-disable-next-line no-param-reassign
         recipePreview.isDevRecipe = !!recipePreview.author.some(
           (author: { email: string }) =>
             author.email === this.stores.user.data.email,
diff --git a/src/features/quickSwitch/Component.tsx b/src/features/quickSwitch/Component.tsx
index 4a48b1e6c..3a7477f62 100644
--- a/src/features/quickSwitch/Component.tsx
+++ b/src/features/quickSwitch/Component.tsx
@@ -302,6 +302,7 @@ class QuickSwitchModal extends Component<IProps, IState> {
         isOpen={isModalVisible}
         className={`${classes.modal} quick-switch`}
         shouldCloseOnOverlayClick
+        // eslint-disable-next-line react/jsx-no-bind
         close={this.close.bind(this)}
       >
         <H1 className={classes.headline}>
@@ -318,6 +319,7 @@ class QuickSwitchModal extends Component<IProps, IState> {
 
         <div className={classes.services}>
           {services.map((service, index) => (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div
               className={`${classes.service} ${
                 this.state.selected === index
diff --git a/src/features/todos/actions.ts b/src/features/todos/actions.ts
index c2000752f..27c7e489b 100644
--- a/src/features/todos/actions.ts
+++ b/src/features/todos/actions.ts
@@ -36,6 +36,7 @@ export const todoActions = createActionsFromDefinitions<TodoActionsType>(
       channel: PropTypes.string.isRequired,
       message: PropTypes.shape({
         action: PropTypes.string.isRequired,
+        // eslint-disable-next-line react/forbid-prop-types
         data: PropTypes.object,
       }),
     },
diff --git a/src/features/todos/components/TodosWebview.tsx b/src/features/todos/components/TodosWebview.tsx
index f9493d519..544768bbf 100644
--- a/src/features/todos/components/TodosWebview.tsx
+++ b/src/features/todos/components/TodosWebview.tsx
@@ -92,6 +92,7 @@ class TodosWebview extends Component<IProps, IState> {
   }
 
   componentDidMount() {
+    // eslint-disable-next-line @eslint-react/no-set-state-in-component-did-mount
     this.setState({
       width: this.props.width,
     });
@@ -173,6 +174,7 @@ class TodosWebview extends Component<IProps, IState> {
     }
 
     return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         className={classnames({
           [classes.root]: true,
@@ -185,6 +187,7 @@ class TodosWebview extends Component<IProps, IState> {
         ref={this.node}
         id="todos-panel"
       >
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
           className={classes.resizeHandler}
           style={{
diff --git a/src/features/todos/index.ts b/src/features/todos/index.ts
index 2fa8c3130..5465ed48a 100644
--- a/src/features/todos/index.ts
+++ b/src/features/todos/index.ts
@@ -3,6 +3,7 @@ import TodoStore from './store';
 export const todosStore = new TodoStore();
 
 export default function initTodos(stores: { todos?: any }, actions: any) {
+  // eslint-disable-next-line no-param-reassign
   stores.todos = todosStore;
   todosStore.start(stores, actions);
 }
diff --git a/src/features/webControls/containers/WebControlsScreen.tsx b/src/features/webControls/containers/WebControlsScreen.tsx
index b492264bf..8709fcba5 100644
--- a/src/features/webControls/containers/WebControlsScreen.tsx
+++ b/src/features/webControls/containers/WebControlsScreen.tsx
@@ -118,8 +118,10 @@ class WebControlsScreen extends Component<IProps> {
     }
 
     try {
+      // eslint-disable-next-line no-param-reassign
       url = new URL(url).toString();
     } catch {
+      // eslint-disable-next-line no-param-reassign
       url =
         /^((?!-))(xn--)?[\da-z][\d_a-z-]{0,61}[\da-z]{0,1}\.(xn--)?([\da-z-]{1,61}|[\da-z-]{1,30}\.[a-z]{2,})$/.test(
           url,
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.tsx b/src/features/workspaces/components/CreateWorkspaceForm.tsx
index 0c365564a..b35ffe4d8 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.tsx
+++ b/src/features/workspaces/components/CreateWorkspaceForm.tsx
@@ -81,6 +81,7 @@ class CreateWorkspaceForm extends Component<IProps> {
           className={classes.input}
           showLabel={false}
           // @ts-expect-error Expected 1 arguments, but got 2.
+          // eslint-disable-next-line react/jsx-no-bind
           onEnterKey={this.submitForm.bind(this, form)}
           focus={workspaceStore.isUserAllowedToUseFeature}
         />
@@ -89,6 +90,7 @@ class CreateWorkspaceForm extends Component<IProps> {
           type="submit"
           label={intl.formatMessage(messages.submitButton)}
           // @ts-expect-error Expected 1 arguments, but got 2.
+          // eslint-disable-next-line react/jsx-no-bind
           onClick={this.submitForm.bind(this, form)}
           busy={isSubmitting}
           buttonType={isSubmitting ? 'secondary' : 'primary'}
diff --git a/src/features/workspaces/components/EditWorkspaceForm.tsx b/src/features/workspaces/components/EditWorkspaceForm.tsx
index 18e7c251e..cc7a2b19b 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.tsx
+++ b/src/features/workspaces/components/EditWorkspaceForm.tsx
@@ -92,6 +92,7 @@ class EditWorkspaceForm extends Component<IProps> {
     this.form = this.prepareWorkspaceForm(this.props.workspace);
   }
 
+  // eslint-disable-next-line @eslint-react/no-unsafe-component-will-receive-props
   UNSAFE_componentWillReceiveProps(nextProps): void {
     const { workspace } = this.props;
     if (workspace.id !== nextProps.workspace.id) {
@@ -178,11 +179,11 @@ class EditWorkspaceForm extends Component<IProps> {
           <span className="settings__header-item">{workspace.name}</span>
         </div>
         <div className="settings__body">
-          {updateWorkspaceRequest.error && (
+          {updateWorkspaceRequest.error ? (
             <Infobox icon="alert" type="danger">
               Error while saving workspace
             </Infobox>
-          )}
+          ) : null}
           <div className={classes.nameInput}>
             <Input {...form.$('name').bind()} />
             <Toggle {...form.$('keepLoaded').bind()} />
@@ -228,6 +229,7 @@ class EditWorkspaceForm extends Component<IProps> {
             buttonType={isDeleting ? 'secondary' : 'danger'}
             className="settings__delete-button"
             disabled={isDeleting}
+            // eslint-disable-next-line react/jsx-no-bind
             onClick={this.delete.bind(this)}
           />
           {/* ===== Save Button ===== */}
@@ -237,6 +239,7 @@ class EditWorkspaceForm extends Component<IProps> {
             busy={isSaving}
             className="franz-form__button"
             buttonType={isSaving ? 'secondary' : 'primary'}
+            // eslint-disable-next-line react/jsx-no-bind
             onClick={this.save.bind(this, form)}
             // TODO: Need to disable if no services have been added to this workspace
             disabled={isSaving}
diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx
index cce333b31..e92bc4b60 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawer.tsx
@@ -129,6 +129,7 @@ class WorkspaceDrawer extends Component<IProps> {
       <div className={`${classes.drawer} workspaces-drawer`}>
         <H1 className={classes.headline}>
           {intl.formatMessage(messages.headline)}
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
           <span
             className={classes.workspacesSettingsButton}
             onKeyDown={noop}
@@ -179,6 +180,7 @@ class WorkspaceDrawer extends Component<IProps> {
               shortcutIndex={index + 1}
             />
           ))}
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
           <div
             className={classes.addNewWorkspaceLabel}
             onClick={() => {
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.tsx b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
index 1e4b57dba..01a18ffb0 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
@@ -111,6 +111,7 @@ class WorkspaceDrawerItem extends Component<IProps> {
     const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);
 
     return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         className={classnames([
           classes.item,
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.tsx b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index 6f61f8a51..a56e5802f 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.tsx
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -42,6 +42,7 @@ class WorkspaceServiceListItem extends Component<IProps> {
     const { classes, isInWorkspace, onToggle, service } = this.props;
     return (
       // onclick in below div used to fix bug raised under toggle duplicate component removal
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div className={classes.listItem} onClick={onToggle} onKeyDown={noop}>
         <ServiceIcon className={classes.serviceIcon} service={service} />
         <span
diff --git a/src/features/workspaces/components/WorkspacesDashboard.tsx b/src/features/workspaces/components/WorkspacesDashboard.tsx
index 8fb2cf923..ad54c6682 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.tsx
+++ b/src/features/workspaces/components/WorkspacesDashboard.tsx
@@ -105,33 +105,33 @@ class WorkspacesDashboard extends Component<IProps> {
         <div className="settings__body">
           {/* ===== Workspace updated info ===== */}
           {updateWorkspaceRequest.wasExecuted &&
-            updateWorkspaceRequest.result && (
-              <Appear className={classes.appear}>
-                <Infobox
-                  type="success"
-                  icon="checkbox-marked-circle-outline"
-                  dismissible
-                  onUnmount={updateWorkspaceRequest.reset}
-                >
-                  {intl.formatMessage(messages.updatedInfo)}
-                </Infobox>
-              </Appear>
-            )}
+          updateWorkspaceRequest.result ? (
+            <Appear className={classes.appear}>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissible
+                onUnmount={updateWorkspaceRequest.reset}
+              >
+                {intl.formatMessage(messages.updatedInfo)}
+              </Infobox>
+            </Appear>
+          ) : null}
 
           {/* ===== Workspace deleted info ===== */}
           {deleteWorkspaceRequest.wasExecuted &&
-            deleteWorkspaceRequest.result && (
-              <Appear className={classes.appear}>
-                <Infobox
-                  type="success"
-                  icon="checkbox-marked-circle-outline"
-                  dismissible
-                  onUnmount={deleteWorkspaceRequest.reset}
-                >
-                  {intl.formatMessage(messages.deletedInfo)}
-                </Infobox>
-              </Appear>
-            )}
+          deleteWorkspaceRequest.result ? (
+            <Appear className={classes.appear}>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissible
+                onUnmount={deleteWorkspaceRequest.reset}
+              >
+                {intl.formatMessage(messages.deletedInfo)}
+              </Infobox>
+            </Appear>
+          ) : null}
 
           {/* ===== Create workspace form ===== */}
           <div className={classes.createForm}>
@@ -169,7 +169,7 @@ class WorkspacesDashboard extends Component<IProps> {
                       </p>
                     </div>
                   ) : (
-                    <table className={classes.table} role="grid">
+                    <table className={classes.table}>
                       {/* ===== Workspaces list ===== */}
                       <tbody>
                         {workspaces.map(workspace => (
diff --git a/src/features/workspaces/index.ts b/src/features/workspaces/index.ts
index 25975936a..cbe5bb5fd 100644
--- a/src/features/workspaces/index.ts
+++ b/src/features/workspaces/index.ts
@@ -3,6 +3,7 @@ import WorkspacesStore from './store';
 export const workspaceStore = new WorkspacesStore();
 
 export default function initWorkspaces(stores, actions) {
+  // eslint-disable-next-line no-param-reassign
   stores.workspaces = workspaceStore;
   workspaceStore.start(stores, actions);
 }