[CORL-678] Transition to eslint (#2634)

* chore: setup eslint

* chore: tslint checks with types & check for import order

* chore: complete eslint transition

* fix: tests

* fix: linting after rebase, faster lint for lint-staged

* chore: remove line

* fix: lint rules

* feat: add a11y linter and fix errors

* fix: tests

src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap

@@ -53,6 +53,7 @@ we require users to create a password.
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"
@@ -180,6 +181,7 @@ we require users to create a password.
                     <div
                       className="PasswordField-icon"
                       onClick={[Function]}
+                      onKeyUp={[Function]}
                       role="button"
                       tabIndex={0}
                       title="Show password"
@@ -270,6 +272,7 @@ we require users to create a password.
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"
@@ -382,6 +385,7 @@ GraphQL request (4:3)
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"
@@ -467,6 +471,7 @@ we require users to create a password.
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"

src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap

@@ -81,6 +81,7 @@ exports[`accepts correct password 1`] = `
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"
@@ -204,6 +205,7 @@ exports[`accepts valid email 1`] = `
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"
@@ -353,6 +355,7 @@ exports[`checks for invalid email 1`] = `
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"
@@ -536,6 +539,7 @@ exports[`renders sign in form 1`] = `
                     <div
                       className="PasswordField-icon"
                       onClick={[Function]}
+                      onKeyUp={[Function]}
                       role="button"
                       tabIndex={0}
                       title="Show password"
@@ -686,6 +690,7 @@ exports[`shows error when submitting empty form 1`] = `
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"
@@ -829,6 +834,7 @@ exports[`shows server error 1`] = `
           <div
             className="PasswordField-icon"
             onClick={[Function]}
+            onKeyUp={[Function]}
             role="button"
             tabIndex={0}
             title="Show password"

src/core/client/admin/test/auth/redirectLoggedIn.spec.tsx

@@ -1,3 +1,4 @@
+import { pureMerge } from "coral-common/utils";
 import {
   GQLResolver,
   QueryToModerationQueuesResolver,
@@ -11,7 +12,6 @@ import {
   wait,
 } from "coral-framework/testHelpers";
 
-import { pureMerge } from "coral-common/utils";
 import create from "../create";
 import {
   emptyModerationQueues,

src/core/client/admin/test/auth/signInWithEmail.spec.tsx

@@ -1,3 +1,4 @@
+import { ReactTestInstance } from "react-test-renderer";
 import sinon from "sinon";
 
 import { pureMerge } from "coral-common/utils";
@@ -13,7 +14,6 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import { ReactTestInstance } from "react-test-renderer";
 import create from "../create";
 import {
   emptyModerationQueues,

src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap

@@ -389,7 +389,7 @@ exports[`renders community 1`] = `
                   aria-hidden={true}
                   aria-labelledby="community-roleChange-ariainfo"
                   id="community-roleChange"
-                  role="popup"
+                  role="dialog"
                 >
                   <div
                     className="AriaInfo-root"
@@ -491,7 +491,7 @@ exports[`renders community 1`] = `
                   aria-hidden={true}
                   aria-labelledby="community-roleChange-ariainfo"
                   id="community-roleChange"
-                  role="popup"
+                  role="dialog"
                 >
                   <div
                     className="AriaInfo-root"
@@ -593,7 +593,7 @@ exports[`renders community 1`] = `
                   aria-hidden={true}
                   aria-labelledby="community-roleChange-ariainfo"
                   id="community-roleChange"
-                  role="popup"
+                  role="dialog"
                 >
                   <div
                     className="AriaInfo-root"
@@ -645,7 +645,7 @@ exports[`renders community 1`] = `
                   aria-hidden={true}
                   aria-labelledby="community-statusChange-ariainfo"
                   id="community-statusChange"
-                  role="popup"
+                  role="dialog"
                 >
                   <div
                     className="AriaInfo-root"

src/core/client/admin/test/components/UserHistoryDrawer/harness.tsx

@@ -1,12 +1,15 @@
 import { BrowserProtocol, queryMiddleware } from "farce";
-import { createFarceRouter } from "found";
+import {
+  ConnectedRouter,
+  createFarceRouter,
+  makeRouteConfig,
+  Route,
+} from "found";
 import { Resolver } from "found-relay";
 import React, { FunctionComponent } from "react";
 
 import UserHistoryDrawer from "coral-admin/components/UserHistoryDrawer";
 import { CoralContextConsumer } from "coral-framework/lib/bootstrap/CoralContext";
-import { makeRouteConfig, Route } from "found";
-import { ConnectedRouter } from "found";
 
 interface Props {
   userID: string;
@@ -19,18 +22,22 @@ const harnessRouter = (userID: string): ConnectedRouter => {
     historyProtocol: new BrowserProtocol(),
     historyMiddlewares: [queryMiddleware],
     routeConfig,
-    renderReady: ({ elements }) => (
-      <div data-testid="test-container">
-        <UserHistoryDrawer
-          userID={userID}
-          open
-          onClose={() => {
-            return;
-          }}
-        />
-      </div>
-    ),
-    renderError: ({ error }) => <div>Not Found</div>,
+    renderReady: function FarceRouterReady({ elements }) {
+      return (
+        <div data-testid="test-container">
+          <UserHistoryDrawer
+            userID={userID}
+            open
+            onClose={() => {
+              return;
+            }}
+          />
+        </div>
+      );
+    },
+    renderError: function FarceError({ error }) {
+      return <div>Not Found</div>;
+    },
   });
 };
 

src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap

@@ -211,6 +211,7 @@ needs to be displayed, e.g. “Log in with <Facebook>”.
             <div
               className="PasswordField-icon"
               onClick={[Function]}
+              onKeyUp={[Function]}
               role="button"
               tabIndex={0}
               title="Hide Client Secret"
@@ -660,6 +661,7 @@ For more information visit:
             <div
               className="PasswordField-icon"
               onClick={[Function]}
+              onKeyUp={[Function]}
               role="button"
               tabIndex={0}
               title="Hide Client Secret"
@@ -1002,6 +1004,7 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
             <div
               className="PasswordField-icon"
               onClick={[Function]}
+              onKeyUp={[Function]}
               role="button"
               tabIndex={0}
               title="Hide Client Secret"
@@ -1508,6 +1511,7 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
             <div
               className="PasswordField-icon"
               onClick={[Function]}
+              onKeyUp={[Function]}
               role="button"
               tabIndex={0}
               title="Hide Client Secret"
@@ -1886,6 +1890,7 @@ exports[`regenerate sso key 1`] = `
       <div
         className="PasswordField-icon"
         onClick={[Function]}
+        onKeyUp={[Function]}
         role="button"
         tabIndex={0}
         title="Hide SSO Key"
@@ -2790,6 +2795,7 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                           <div
                             className="PasswordField-icon"
                             onClick={[Function]}
+                            onKeyUp={[Function]}
                             role="button"
                             tabIndex={0}
                             title="Hide Client Secret"
@@ -3136,6 +3142,7 @@ integration to register for a new account.
                           <div
                             className="PasswordField-icon"
                             onClick={[Function]}
+                            onKeyUp={[Function]}
                             role="button"
                             tabIndex={0}
                             title="Hide SSO Key"
@@ -3485,6 +3492,7 @@ to create and set up a web application. For more information visit:
                           <div
                             className="PasswordField-icon"
                             onClick={[Function]}
+                            onKeyUp={[Function]}
                             role="button"
                             tabIndex={0}
                             title="Hide Client Secret"
@@ -3793,6 +3801,7 @@ For more information visit:
                           <div
                             className="PasswordField-icon"
                             onClick={[Function]}
+                            onKeyUp={[Function]}
                             role="button"
                             tabIndex={0}
                             title="Hide Client Secret"

src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap

@@ -717,6 +717,7 @@ improve the API over time.
                     <div
                       className="PasswordField-icon"
                       onClick={[Function]}
+                      onKeyUp={[Function]}
                       role="button"
                       tabIndex={0}
                       title="Hide API Key"
@@ -902,6 +903,7 @@ in your Akismet account:
                     <div
                       className="PasswordField-icon"
                       onClick={[Function]}
+                      onKeyUp={[Function]}
                       role="button"
                       tabIndex={0}
                       title="Hide API Key"

src/core/client/admin/test/configure/auth.spec.tsx

@@ -2,8 +2,7 @@ import { cloneDeep } from "lodash";
 import { ReactTestInstance } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "coral-common/utils";
-import { pureMerge } from "coral-common/utils";
+import { pureMerge, timeout } from "coral-common/utils";
 import { GQLResolver } from "coral-framework/schema";
 import {
   createResolversStub,
@@ -19,14 +18,15 @@ import { settingsWithEmptyAuth, users } from "../fixtures";
 
 /**
  * This is depreacted, do not use it anymore.
+ *
  * @deprecated
  */
 const deprecatedInputPredicate = (nameOrID: string) => (
   n: ReactTestInstance
 ) => {
   return (
-    [n.props.name, n.props.id].indexOf(nameOrID) > -1 &&
-    ["input", "button"].indexOf(n.type as string) > -1
+    [n.props.name, n.props.id].includes(nameOrID) &&
+    ["input", "button"].includes(n.type as string)
   );
 };
 

src/core/client/admin/test/configure/wordList.spec.tsx

@@ -1,4 +1,5 @@
 import { pureMerge } from "coral-common/utils";
+import { GQLResolver } from "coral-framework/schema";
 import {
   createResolversStub,
   CreateTestRendererParams,
@@ -8,7 +9,6 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import { GQLResolver } from "coral-framework/schema";
 import create from "../create";
 import { settings, users } from "../fixtures";
 

src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap

@@ -459,7 +459,7 @@ exports[`renders decision history popover button 1`] = `
     aria-hidden={true}
     aria-labelledby="decision-history-popover-ariainfo"
     id="decision-history-popover"
-    role="popup"
+    role="dialog"
   >
     <div
       className="AriaInfo-root"

src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap

@@ -204,6 +204,7 @@ exports[`renders form 1`] = `
                 <div
                   className="PasswordField-icon"
                   onClick={[Function]}
+                  onKeyUp={[Function]}
                   role="button"
                   tabIndex={0}
                   title="Hide password"

src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap

@@ -82,7 +82,7 @@ exports[`all stories active search with no results 1`] = `
           aria-hidden={false}
           aria-labelledby="moderate-searchBar-popover-ariainfo"
           id="moderate-searchBar-popover"
-          role="popup"
+          role="dialog"
         >
           <div
             className="Popover-popover Bar-popover Popover-bottom"
@@ -246,7 +246,7 @@ exports[`all stories renders search bar 1`] = `
           aria-hidden={true}
           aria-labelledby="moderate-searchBar-popover-ariainfo"
           id="moderate-searchBar-popover"
-          role="popup"
+          role="dialog"
         />
       </div>
     </form>

src/core/client/admin/test/moderate/singleComment.spec.tsx

@@ -1,11 +1,11 @@
 import { pureMerge } from "coral-common/utils";
 import {
   GQLCOMMENT_STATUS,
+  GQLResolver,
   MutationToApproveCommentResolver,
   MutationToRejectCommentResolver,
   QueryToCommentResolver,
 } from "coral-framework/schema";
-import { GQLResolver } from "coral-framework/schema";
 import {
   createMutationResolverStub,
   createQueryResolverStub,

src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap

@@ -221,7 +221,7 @@ exports[`renders empty stories 1`] = `
                   aria-hidden={true}
                   aria-labelledby="stories-statusChange-ariainfo"
                   id="stories-statusChange"
-                  role="popup"
+                  role="dialog"
                 >
                   <div
                     className="AriaInfo-root"
@@ -292,7 +292,7 @@ exports[`renders empty stories 1`] = `
                   aria-hidden={true}
                   aria-labelledby="stories-statusChange-ariainfo"
                   id="stories-statusChange"
-                  role="popup"
+                  role="dialog"
                 >
                   <div
                     className="AriaInfo-root"
@@ -532,7 +532,7 @@ exports[`renders stories 1`] = `
                   aria-hidden={true}
                   aria-labelledby="stories-statusChange-ariainfo"
                   id="stories-statusChange"
-                  role="popup"
+                  role="dialog"
                 >
                   <div
                     className="AriaInfo-root"
@@ -603,7 +603,7 @@ exports[`renders stories 1`] = `
                   aria-hidden={true}
                   aria-labelledby="stories-statusChange-ariainfo"
                   id="stories-statusChange"
-                  role="popup"
+                  role="dialog"
                 >
                   <div
                     className="AriaInfo-root"

src/core/client/admin/test/stories/stories.spec.tsx

@@ -1,6 +1,12 @@
 import { noop } from "lodash";
 
 import { pureMerge } from "coral-common/utils";
+import {
+  GQLResolver,
+  GQLSTORY_STATUS,
+  MutationToCloseStoryResolver,
+  MutationToOpenStoryResolver,
+} from "coral-framework/schema";
 import {
   act,
   createMutationResolverStub,
@@ -13,12 +19,6 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import {
-  GQLResolver,
-  GQLSTORY_STATUS,
-  MutationToCloseStoryResolver,
-  MutationToOpenStoryResolver,
-} from "coral-framework/schema";
 import create from "../create";
 import {
   emptyStories,