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`

7 files changed, 37 insertions, 27 deletions

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);
 }