[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

.eslintignore

@@ -0,0 +1,3 @@
+*.d.ts
+*.graphql.ts
+**/__generated__/**

.eslintrc.js

@@ -0,0 +1,206 @@
+const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/eslint-recommended').default.overrides[0];
+const typescriptRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/recommended.json');
+const typescriptRecommendedTypeChecking = require('@typescript-eslint/eslint-plugin/dist/configs/recommended-requiring-type-checking.json');
+const typescriptEslintPrettier = require('eslint-config-prettier/@typescript-eslint');
+const react = require('eslint-plugin-react').configs.recommended;
+const jsxA11y = require('eslint-plugin-jsx-a11y').configs.recommended;
+const reactPrettier = require('eslint-config-prettier/react');
+
+const typescriptOverrides = {
+  files: ["*.ts", "*.tsx"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: [
+    "@typescript-eslint",
+    "@typescript-eslint/tslint",
+    "react",
+    "jsx-a11y",
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    }
+  },
+  rules: Object.assign(
+    typescriptEslintRecommended.rules,
+    typescriptRecommended.rules,
+    typescriptEslintPrettier.rules,
+    react.rules,
+    jsxA11y.rules,
+    reactPrettier.rules,
+    {
+      "@typescript-eslint/adjacent-overload-signatures": "error",
+      // TODO: (cvle) change `readonly` param to `array-simple` when upgraded typescript.
+      "@typescript-eslint/array-type": ["error", { "default": "array-simple", "readonly": "generic"}],
+      "@typescript-eslint/ban-types": "error",
+      "@typescript-eslint/camelcase": "off",
+      "@typescript-eslint/consistent-type-assertions": "error",
+      "@typescript-eslint/consistent-type-definitions": "error",
+      "@typescript-eslint/class-name-casing": "error",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-member-accessibility": [
+        "error",
+        {
+          "overrides": {
+            "constructors": "off",
+          },
+        },
+      ],
+      "@typescript-eslint/indent": "off",
+      "@typescript-eslint/interface-name-prefix": "error",
+      "@typescript-eslint/member-delimiter-style": "off",
+      "@typescript-eslint/no-empty-function": "error",
+      "@typescript-eslint/no-empty-interface": "error",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-misused-new": "error",
+      "@typescript-eslint/no-namespace": "error",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-parameter-properties": "off",
+      "@typescript-eslint/no-unused-vars": ["error", {"args": "none", "ignoreRestSiblings": true}],
+      "@typescript-eslint/no-use-before-define": "off", // TODO: (cvle) Should be on?
+      "@typescript-eslint/no-use-before-declare": "off",
+      "@typescript-eslint/no-var-requires": "error",
+      "@typescript-eslint/prefer-for-of": "error",
+      "@typescript-eslint/prefer-function-type": "error",
+      "@typescript-eslint/prefer-namespace-keyword": "error",
+      "@typescript-eslint/triple-slash-reference": "error",
+      "@typescript-eslint/type-annotation-spacing": "off",
+      "@typescript-eslint/unified-signatures": "error",
+      // (cvle) disabled, because the way we use labels in our code cause to many
+      // false positives.
+      "jsx-a11y/label-has-associated-control": "off",
+      "react/display-name": "error",
+      "react/prop-types": "off",
+      "react/no-unescaped-entities": "off",
+    }
+  ),
+};
+
+let typescriptTypeCheckingOverrides = {
+  files: ["*.ts", "*.tsx"],
+  parserOptions: {
+    project: ["tsconfig.json", "./src/tsconfig.json", "./src/core/client/tsconfig.json"],
+  },
+  rules: Object.assign(
+    typescriptRecommendedTypeChecking.rules,
+    {
+      "@typescript-eslint/tslint/config": ["error", {
+        "rules": {
+          "ordered-imports": {
+            "options": {
+              "import-sources-order": "case-insensitive",
+              "module-source-path": "full",
+              "named-imports-order": "case-insensitive",
+            },
+          },
+        },
+      }],
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "@typescript-eslint/unbound-method": "off", // 10.10.19: (cvle) seems to give false positive.
+    }
+  ),
+};
+
+const jestOverrides = {
+  env: {
+    jest: true,
+  },
+  files: ["test/**/*.ts", "test/**/*.tsx"],
+  globals: {
+    "expectAndFail": "readonly",
+    "fail": "readonly",
+  },
+};
+
+// Setup the overrides.
+const overrides = [jestOverrides, typescriptOverrides];
+// Skip type information to make it faster!
+if (process.env.FAST_LINT !== "true") {
+  overrides.push(typescriptTypeCheckingOverrides);
+}
+
+module.exports = {
+  overrides,
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:jsdoc/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    "ecmaVersion": 2018,
+  },
+  rules: {
+    "arrow-body-style": "off",
+    "arrow-parens": [
+      "off",
+      "as-needed",
+    ],
+    "camelcase": "off",
+    "complexity": "off",
+    "constructor-super": "error",
+    "spaced-comment": ["error", "always"],
+    "curly": "error",
+    "dot-notation": "error",
+    "eol-last": "off",
+    "eqeqeq": "error",
+    "guard-for-in": "error",
+    "jsdoc/require-jsdoc": "off",
+    "jsdoc/require-returns": "off",
+    "jsdoc/require-param": "off",
+    "jsdoc/require-param-type": "off",
+    "jsdoc/require-returns-type": "off",
+    "linebreak-style": "off",
+    "max-classes-per-file": [
+      "error",
+      1,
+    ],
+    "member-ordering": "off",
+    "new-parens": "off",
+    "newline-per-chained-call": "off",
+    "no-bitwise": "error",
+    "no-caller": "error",
+    "no-cond-assign": "error",
+    "no-console": "error",
+    "no-debugger": "error",
+    "no-empty": "error",
+    "no-eval": "error",
+    "no-extra-semi": "off",
+    "no-fallthrough": "error",
+    "no-invalid-this": "off",
+    "no-irregular-whitespace": "off",
+    "no-multiple-empty-lines": "off",
+    "no-new-wrappers": "error",
+    "no-prototype-builtins": "off",
+    "no-shadow": "error",
+    "no-throw-literal": "error",
+    "no-undef": "off",
+    "no-undef-init": "error",
+    "no-unsafe-finally": "error",
+    "no-unused-expressions": "error",
+    "no-unused-labels": "error",
+    "no-unused-vars": ["error", {"args": "none", "ignoreRestSiblings": true}],
+    "no-var": "error",
+    "object-shorthand": "error",
+    "one-var": "off",
+    "prefer-arrow-callback": "off",
+    "prefer-const": "error",
+    "quote-props": "off",
+    "radix": "error",
+    "require-atomic-updates": "off",
+    "space-before-function-paren": "off",
+    "sort-imports": "off",
+    "use-isnan": "error",
+    "valid-typeof": "off",
+  },
+};

.vscode/extensions.json

@@ -1,8 +1,9 @@
 {
   "recommendations": [
-    "ms-vscode.vscode-typescript-tslint-plugin",
+    "dbaeumer.vscode-eslint",
     "kumar-harsh.graphql-for-vscode",
     "editorconfig.editorconfig",
-    "ms-azuretools.vscode-cosmosdb"
+    "ms-azuretools.vscode-cosmosdb",
+    "mike-co.import-sorter"
   ]
 }

.vscode/settings.json

@@ -10,12 +10,49 @@
     "**/.DS_Store": true,
     ".vs": true
   },
-  "tslint.exclude": "**/node_modules/**",
-  "tslint.jsEnable": true,
+  "tslint.enable": false,
+  "eslint.validate": [
+		{ "language": "javascript", "autoFix": true },
+		{ "language": "typescript", "autoFix": true },
+		{ "language": "typescriptreact", "autoFix": true }
+	],
   "typescript.tsdk": "node_modules/typescript/lib",
   "postcss.validate": false,
   "javascript.preferences.importModuleSpecifier": "non-relative",
-  "editor.codeActionsOnSave": {
-    "source.fixAll.tslint": true
-  }
+  "importSorter.importStringConfiguration.quoteMark": "double",
+  "importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.count": 80,
+  "importSorter.sortConfiguration.customOrderingRules.rules": [
+    {
+      "type": "importMember",
+      "regex": "^$",
+      "orderLevel": 70,
+      "disableSort": true
+    },
+    {
+      "regex": "__generated__",
+      "orderLevel": 40
+    },
+    {
+      "regex": "^coral-",
+      "orderLevel": 30
+    },
+    {
+      "regex": "\\.css$",
+      "orderLevel": 60,
+      "disableSort": true
+    },
+    {
+      "regex": "^[.]",
+      "orderLevel": 50
+    },
+  ],
+  "importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.type": "newLineEachExpressionAfterCountLimitExceptIfOnlyOne",
+  "importSorter.importStringConfiguration.trailingComma": "multiLine",
+  "importSorter.importStringConfiguration.tabSize": 2,
+  "eslint.enable": true,
+  "importSorter.generalConfiguration.exclude": [
+    "d\\.ts$",
+    "__generated__"
+  ],
+  "eslint.alwaysShowStatus": true
 }

package.json

@@ -42,9 +42,9 @@
     "start:development": "NODE_ENV=development CONCURRENCY=${CONCURRENCY:-1} TS_NODE_PROJECT=./src/tsconfig.json ts-node-dev --inspect --transpile-only --no-notify -r tsconfig-paths/register ./src/index.ts",
     "start:webpackDevServer": "ts-node --transpile-only ./scripts/start.ts",
     "lint": "npm-run-all --parallel lint:* tscheck:*",
-    "lint:server": "tslint --project ./src/tsconfig.json",
-    "lint:client": "tslint --project ./src/core/client/tsconfig.json",
-    "lint:scripts": "tslint --project ./tsconfig.json",
+    "lint:server": "eslint 'src/**/*.{js,ts,tsx}' --ignore-pattern 'src/core/client/**'",
+    "lint:client": "eslint 'src/core/client/**/*.{js,ts,tsx}'",
+    "lint:scripts": "eslint 'scripts/**/*.{js,ts,tsx}'",
     "lint:graphql": "graphql-schema-linter src/core/server/graph/tenant/schema/schema.graphql",
     "lint-fix": "npm run lint:server -- --fix && npm run lint:client -- --fix && npm run lint:scripts -- --fix",
     "test": "node scripts/test.js --env=jsdom",
@@ -229,6 +229,9 @@
     "@types/webpack-bundle-analyzer": "^2.13.1",
     "@types/webpack-dev-server": "^3.1.5",
     "@types/ws": "^5.1.2",
+    "@typescript-eslint/eslint-plugin": "^2.3.2",
+    "@typescript-eslint/eslint-plugin-tslint": "^2.3.2",
+    "@typescript-eslint/parser": "^2.3.2",
     "acorn": "^6.1.1",
     "ansi-styles": "^3.2.0",
     "autoprefixer": "^9.5.1",
@@ -260,6 +263,12 @@
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",
+    "eslint": "^6.5.1",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-jsdoc": "^15.9.7",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.15.1",
     "eventemitter2": "^5.0.1",
     "farce": "^0.2.6",
     "final-form": "4.11.0",
@@ -267,7 +276,7 @@
     "fluent-intl-polyfill": "^0.1.0",
     "fluent-langneg": "^0.1.1",
     "fluent-react": "^0.8.4",
-    "fork-ts-checker-webpack-plugin": "^1.3.0",
+    "fork-ts-checker-webpack-plugin": "^1.5.0",
     "found": "^0.4.0-alpha.17",
     "found-relay": "^0.4.0-alpha.8",
     "graphql-schema-linter": "^0.2.0",
@@ -302,7 +311,7 @@
     "postcss-nested": "^4.1.1",
     "postcss-prepend-imports": "^1.0.1",
     "postcss-preset-env": "^6.5.0",
-    "prettier": "^1.17.0",
+    "prettier": "^1.18.2",
     "prop-types": "^15.6.2",
     "pstree.remy": "^1.1.6",
     "pym.js": "^1.3.2",
@@ -345,10 +354,7 @@
     "ts-node-dev": "^1.0.0-pre.37",
     "tsconfig-paths": "^3.8.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "tslint": "^5.16.0",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-plugin-prettier": "^2.0.1",
-    "tslint-react": "^4.0.0",
+    "tslint": "^5.20.0",
     "typed-css-modules": "^0.4.2",
     "typeface-manuale": "^0.0.71",
     "typeface-source-sans-pro": "^0.0.54",
@@ -364,12 +370,12 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "FAST_LINT=true lint-staged"
     }
   },
   "lint-staged": {
     "*.{j,t}s{,x}": [
-      "tslint"
+      "eslint"
     ],
     "src/core/server/graph/tenant/schema/schema.graphql": [
       "graphql-schema-linter"

scripts/WebpackDevServerUtils.js

@@ -12,7 +12,7 @@
  */
 "use strict";
 
-// tslint:disable:no-console
+/* eslint-disable no-console */
 
 const address = require("address");
 const url = require("url");
@@ -21,7 +21,6 @@ const clearConsole = require("react-dev-utils/clearConsole");
 const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
 const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
 const forkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin");
-const Stats = require("webpack/lib/Stats");
 
 // (cvle): Changed to false as we are sharing the tty with other processes.
 // const isInteractive = process.stdout.isTTY && false;
@@ -142,7 +141,7 @@ function createCompiler({
   });
 
   let isFirstCompile = true;
-  let tsMessagesPromises = [];
+  const tsMessagesPromises = [];
 
   if (useTypeScript) {
     compiler.compilers.forEach(singleCompiler => {

scripts/build.ts

@@ -17,7 +17,7 @@ import paths from "../config/paths";
 import config from "../src/core/build/config";
 import createWebpackConfig from "../src/core/build/createWebpackConfig";
 
-// tslint:disable: no-console
+/* eslint-disable no-console */
 
 process.env.WEBPACK = "true";
 process.env.NODE_ENV = process.env.NODE_ENV || "production";

scripts/compileRelay.ts

@@ -19,29 +19,29 @@ program
   .parse(process.argv);
 
 if (!program.schema) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error("Schema identifier not provided");
   process.exit(1);
 }
 
 if (!program.src) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error("Src not provided");
   process.exit(1);
 }
 
 if (!config.projects) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error("Missing projects key in .graphqconfig");
   process.exit(1);
 }
 if (!config.projects[program.schema]) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error(`Project ${program.schema} not found in .graphqconfig`);
   process.exit(1);
 }
 if (!config.projects[program.schema].schemaPath) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error(
     `SchemaPath for project ${program.schema} not found in .graphqconfig`
   );

scripts/generateSchemaTypes.js

@@ -1,4 +1,3 @@
-const { Linter, Configuration } = require("tslint");
 const { generateTSTypesAsString } = require("graphql-schema-typescript");
 const { getGraphQLConfig } = require("graphql-config");
 const path = require("path");
@@ -69,12 +68,12 @@ if (require.main === module) {
   main()
     .then(files => {
       for (const { fileName } of files) {
-        // tslint:disable-next-line:no-console
+        // eslint-disable-next-line no-console
         console.log(`Generated ${fileName}`);
       }
     })
     .catch(err => {
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
       console.error(err);
     });
 }

scripts/migration/create.ts

@@ -8,7 +8,7 @@
  * To create new database migrations.
  */
 
-// tslint:disable: no-console
+/* eslint-disable no-console */
 
 import fs from "fs-extra";
 import lodash from "lodash";

scripts/start.ts

@@ -14,7 +14,7 @@ import createDevServerConfig from "../config/webpackDevServer.config";
 import config from "../src/core/build/config";
 import createWebpackConfig from "../src/core/build/createWebpackConfig";
 
-// tslint:disable: no-console
+/* eslint-disable no-console */
 
 // Enforce environment to be development.
 config.validate().set("env", "development");

scripts/test.js

@@ -24,7 +24,7 @@ process.on("unhandledRejection", err => {
 const paths = require("../config/paths.ts").default;
 
 const jest = require("jest");
-let argv = process.argv.slice(2);
+const argv = process.argv.slice(2);
 argv.push("--config", paths.appJestConfig);
 
 // Watch unless on CI or in coverage mode

scripts/watcher/CommandExecutor.ts

@@ -21,8 +21,8 @@ export default class CommandExecutor implements Executor {
   private args?: ReadonlyArray<string>;
   private spawnMultiple: boolean;
   private runOnInit: boolean;
-  private isRunning: boolean = false;
-  private shouldRespawn: boolean = false;
+  private isRunning = false;
+  private shouldRespawn = false;
   private spawnProcessDebounced?: (() => void) & Cancelable;
 
   constructor(cmd: string, opts: CommandExecutorOptions = {}) {
@@ -67,7 +67,7 @@ export default class CommandExecutor implements Executor {
     child.on("close", (code: number) => {
       this.isRunning = false;
       if (code !== 0 && code !== null) {
-        // tslint:disable-next-line: no-console
+        // eslint-disable-next-line no-console
         console.log(chalk.red(`Command exited with ${code}`));
       }
       if (this.shouldRespawn) {

scripts/watcher/LongRunningExecutor.ts

@@ -17,8 +17,8 @@ export default class LongRunningExecutor implements Executor {
   private cmd: string;
   private args?: ReadonlyArray<string>;
   private process: ChildProcess | null = null;
-  private isRunning: boolean = false;
-  private shouldRestart: boolean = false;
+  private isRunning = false;
+  private shouldRestart = false;
   private restartDebounced: (() => void) & Cancelable;
 
   constructor(cmd: string, opts: LongRunningExecutorOptions = {}) {
@@ -37,11 +37,11 @@ export default class LongRunningExecutor implements Executor {
       shell: !this.args,
     });
 
-    this.process!.on("exit", (code: number) => {
+    this.process.on("exit", (code: number) => {
       this.isRunning = false;
 
       if (code !== 0 && code !== null) {
-        // tslint:disable-next-line: no-console
+        // eslint-disable-next-line no-console
         console.log(chalk.red(`Command exited with ${code}`));
         return;
       }

scripts/watcher/SaneWatcher.ts

@@ -18,7 +18,7 @@ function canUseWatchman(): boolean {
   try {
     execSync("watchman --version", { stdio: ["ignore"] });
     return true;
-    // tslint:disable-next-line:no-empty
+    // eslint-disable-next-line no-empty
   } catch (e) {}
   return false;
 }
@@ -34,7 +34,7 @@ export default class SaneWatcher implements Watcher {
     // Autodetect watchman.
     if (this.watchman === undefined && canUseWatchman()) {
       this.watchman = true;
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
       console.log(chalk.grey(`Watchman detected`));
     }
   }

scripts/watcher/bin/watcher.ts

@@ -14,7 +14,7 @@ async function run(
     throw new Error("Config file not specified");
   }
 
-  // tslint:disable-next-line:no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   let config: any = require(path.resolve(configFile));
   if (config.__esModule) {
     config = config.default;
@@ -31,7 +31,7 @@ const cmd = program
   .parse(process.argv);
 
 run(cmd.args, cmd.opts()).catch(err => {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error(err);
   process.exit(1);
 });

scripts/watcher/watch.ts

@@ -21,7 +21,7 @@ async function beginWatch(
     await executor.onInit();
   }
   for await (const filePath of watcher.watch(rootDir, paths, { ignore })) {
-    // tslint:disable-next-line:no-console
+    // eslint-disable-next-line no-console
     console.log(chalk.cyanBright(`Execute "${key}"`));
     executor.execute(filePath);
   }
@@ -72,7 +72,7 @@ function filterOnly(
   }
   return pickBy(watchers, (value, key) => {
     if (resolved.indexOf(key) === -1) {
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
       console.log(chalk.grey(`Disabled watcher "${key}"`));
       return false;
     }
@@ -98,11 +98,11 @@ export default async function watch(config: Config, options: Options = {}) {
   }
 
   for (const key of Object.keys(watchersConfigs)) {
-    // tslint:disable-next-line:no-console
+    // eslint-disable-next-line no-console
     console.log(chalk.cyanBright(`Start watcher "${key}"`));
     const watcherConfig = watchersConfigs[key];
     beginWatch(watcher, key, watcherConfig, rootDir).catch(err => {
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
       console.error(err);
       process.exit(1);
     });

scripts/webpackHotDevClient.js

@@ -7,7 +7,7 @@
 
 "use strict";
 
-// tslint:disable:no-console
+/* eslint-disable */
 
 // This alternative WebpackDevServer combines the functionality of:
 // https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js

src/core/build/createWebpackConfig.ts

@@ -530,9 +530,9 @@ export default function createWebpackConfig(
       // TODO: (cvle) this should work in build too but for some reasons it terminates the build afterwards.
       // Preventing from running post build steps.
       ...ifWatch(
-        // We run tslint in a separate process to have a quicker build.
+        // We run eslint in a separate process to have a quicker build.
         new ForkTsCheckerWebpackPlugin({
-          tslint: true,
+          eslint: true,
           typescript: require.resolve("typescript"),
           async: true,
           // TODO: (cvle) For some reason if incremental build is turned on it does not find lint errors during initial build.

src/core/build/loaders/locales-loader.js

@@ -59,7 +59,6 @@ function generateTarget(target, context) {
     defaultLocale,
     fallbackLocale,
     pathToLocales,
-    resourcePath,
     locales,
     bundled,
   } = context;

src/core/build/postcss.config.js

@@ -23,12 +23,6 @@ const flatKebabVariables = mapKeys(
   (_, k) => kebabCase(k)
 );
 
-// These are the default css standard variables.
-const cssVariables = pickBy(
-  flatKebabVariables,
-  (v, k) => !k.startsWith("breakpoints-")
-);
-
 // These are sass style variables used in media queries.
 const mediaQueryVariables = mapValues(
   pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),

src/core/client/account/App/App.tsx

@@ -1,10 +1,10 @@
-import TransitionControl from "coral-framework/testHelpers/TransitionControl";
 import { BrowserProtocol, queryMiddleware } from "farce";
 import { createFarceRouter, ElementsRenderer } from "found";
 import { Resolver } from "found-relay";
 import React, { FunctionComponent } from "react";
 
 import { CoralContextConsumer } from "coral-framework/lib/bootstrap/CoralContext";
+import TransitionControl from "coral-framework/testHelpers/TransitionControl";
 
 import routeConfig from "../routeConfig";
 import NotFound from "../routes/NotFound";
@@ -16,16 +16,17 @@ const Router = createFarceRouter({
   historyProtocol: new BrowserProtocol(),
   historyMiddlewares: [queryMiddleware],
   routeConfig,
-  renderReady: ({ elements }) => (
-    <>
-      <ElementsRenderer elements={elements} />
-      {// this enables router transition control when writing tests.
-      process.env.NODE_ENV === "test" && <TransitionControl />}
-    </>
-  ),
-  renderError: ({ error }) => (
-    <div>{error.status === 404 ? <NotFound /> : "Error"}</div>
-  ),
+  renderReady: function FarceRouterReady({ elements }) {
+    return (
+      <>
+        <ElementsRenderer elements={elements} />
+        {process.env.NODE_ENV === "test" && <TransitionControl />}
+      </>
+    );
+  },
+  renderError: function FarceRouterError({ error }) {
+    return <div>{error.status === 404 ? <NotFound /> : "Error"}</div>;
+  },
 });
 
 const EntryContainer: FunctionComponent = () => (

src/core/client/account/index.tsx

@@ -1,7 +1,8 @@
-import { createManaged } from "coral-framework/lib/bootstrap";
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
+import { createManaged } from "coral-framework/lib/bootstrap";
+
 import App from "./App";
 import { initLocalState } from "./local";
 import localesData from "./locales";

src/core/client/account/locales.ts

@@ -6,4 +6,5 @@
  */
 
 import { LocalesData } from "coral-framework/lib/i18n";
+
 export default {} as LocalesData;

src/core/client/account/routes/NotFound.tsx

@@ -1,6 +1,7 @@
-import { HorizontalGutter, Typography } from "coral-ui/components";
 import React, { FunctionComponent } from "react";
 
+import { HorizontalGutter, Typography } from "coral-ui/components";
+
 const NotFound: FunctionComponent = () => (
   <HorizontalGutter>
     <Typography variant="heading3">Not Found</Typography>

src/core/client/account/routes/download/Download/DownloadRoute.tsx

@@ -65,9 +65,11 @@ const DownloadRoute: FunctionComponent<Props> = ({ token }) => {
 };
 
 const enhanced = withRouteConfig<Props>({
-  render: ({ match, Component }) => (
-    <Component token={parseHashQuery(match.location.hash).downloadToken} />
-  ),
+  render: function DownloadRouteRender({ match, Component }) {
+    return (
+      <Component token={parseHashQuery(match.location.hash).downloadToken} />
+    );
+  },
 })(DownloadRoute);
 
 export default enhanced;

src/core/client/account/routes/download/Download/Sorry.tsx

@@ -1,7 +1,7 @@
+import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { CallOut, Flex, Icon } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
 
 import styles from "./Sorry.css";
 

src/core/client/account/routes/email/Confirm/ConfirmRoute.tsx

@@ -69,9 +69,11 @@ const ConfirmRoute: React.FunctionComponent<Props> = ({ token }) => {
 };
 
 const enhanced = withRouteConfig<Props>({
-  render: ({ match, Component }) => (
-    <Component token={parseHashQuery(match.location.hash).confirmToken} />
-  ),
+  render: function ConfirmRouteRender({ match, Component }) {
+    return (
+      <Component token={parseHashQuery(match.location.hash).confirmToken} />
+    );
+  },
 })(ConfirmRoute);
 
 export default enhanced;

src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeRoute.tsx

@@ -69,9 +69,11 @@ const UnsubscribeRoute: React.FunctionComponent<Props> = ({ token }) => {
 };
 
 const enhanced = withRouteConfig<Props>({
-  render: ({ match, Component }) => (
-    <Component token={parseHashQuery(match.location.hash).unsubscribeToken} />
-  ),
+  render: function UnsubscribeRouteRender({ match, Component }) {
+    return (
+      <Component token={parseHashQuery(match.location.hash).unsubscribeToken} />
+    );
+  },
 })(UnsubscribeRoute);
 
 export default enhanced;

src/core/client/account/routes/password/Reset/ResetRoute.tsx

@@ -69,9 +69,9 @@ const ResetRoute: React.FunctionComponent<Props> = ({ token }) => {
 };
 
 const enhanced = withRouteConfig<Props>({
-  render: ({ match, Component }) => (
-    <Component token={parseHashQuery(match.location.hash).resetToken} />
-  ),
+  render: function ResetRouteRender({ match, Component }) {
+    return <Component token={parseHashQuery(match.location.hash).resetToken} />;
+  },
 })(ResetRoute);
 
 export default enhanced;

src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap

@@ -81,6 +81,7 @@ Make sure it is unique and be sure to keep it secure.
                       <div
                         className="PasswordField-icon"
                         onClick={[Function]}
+                        onKeyUp={[Function]}
                         role="button"
                         tabIndex={0}
                         title="Hide password"

src/core/client/account/test/confirmEmail.spec.tsx

@@ -1,5 +1,7 @@
 import sinon from "sinon";
 
+import { ERROR_CODES } from "coral-common/errors";
+import { InvalidRequestError } from "coral-framework/lib/errors";
 import { GQLResolver } from "coral-framework/schema";
 import {
   act,
@@ -10,8 +12,6 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import { ERROR_CODES } from "coral-common/errors";
-import { InvalidRequestError } from "coral-framework/lib/errors";
 import create from "./create";
 
 const token = createAccessToken();

src/core/client/account/test/resetPassword.spec.tsx

@@ -1,5 +1,7 @@
 import sinon from "sinon";
 
+import { ERROR_CODES } from "coral-common/errors";
+import { InvalidRequestError } from "coral-framework/lib/errors";
 import { GQLResolver } from "coral-framework/schema";
 import {
   act,
@@ -10,8 +12,6 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import { ERROR_CODES } from "coral-common/errors";
-import { InvalidRequestError } from "coral-framework/lib/errors";
 import create from "./create";
 
 const token = createAccessToken();

src/core/client/admin/App/App.tsx

@@ -1,10 +1,10 @@
-import TransitionControl from "coral-framework/testHelpers/TransitionControl";
 import { BrowserProtocol, queryMiddleware } from "farce";
 import { createFarceRouter, ElementsRenderer } from "found";
 import { Resolver } from "found-relay";
 import React, { FunctionComponent } from "react";
 
 import { CoralContextConsumer } from "coral-framework/lib/bootstrap/CoralContext";
+import TransitionControl from "coral-framework/testHelpers/TransitionControl";
 
 import routeConfig from "../routeConfig";
 import NotFound from "../routes/NotFound";
@@ -13,16 +13,17 @@ const Router = createFarceRouter({
   historyProtocol: new BrowserProtocol(),
   historyMiddlewares: [queryMiddleware],
   routeConfig,
-  renderReady: ({ elements }) => (
-    <>
-      <ElementsRenderer elements={elements} />
-      {// this enables router transition control when writing tests.
-      process.env.NODE_ENV === "test" && <TransitionControl />}
-    </>
-  ),
-  renderError: ({ error }) => (
-    <div>{error.status === 404 ? <NotFound /> : "Error"}</div>
-  ),
+  renderReady: function FarceRouterReady({ elements }) {
+    return (
+      <>
+        <ElementsRenderer elements={elements} />
+        {process.env.NODE_ENV === "test" && <TransitionControl />}
+      </>
+    );
+  },
+  renderError: function FarceRouterError({ error }) {
+    return <div>{error.status === 404 ? <NotFound /> : "Error"}</div>;
+  },
 });
 
 const App: FunctionComponent = () => (

src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx

@@ -1,6 +1,8 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import { Typography } from "coral-ui/components";
+
 import ApprovedIcon from "./ApprovedIcon";
 import DecisionItem from "./DecisionItem";
 import DotDivider from "./DotDivider";
@@ -9,8 +11,6 @@ import GoToCommentLink from "./GoToCommentLink";
 import Info from "./Info";
 import Timestamp from "./Timestamp";
 
-import { Typography } from "coral-ui/components";
-
 interface Props {
   href: string;
   username: string;

src/core/client/admin/App/DecisionHistory/DecisionHistoryContainer.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
 
+import { withPaginationContainer } from "coral-framework/lib/relay";
+
 import { DecisionHistoryContainer_viewer as ViewerData } from "coral-admin/__generated__/DecisionHistoryContainer_viewer.graphql";
 import { DecisionHistoryContainerPaginationQueryVariables } from "coral-admin/__generated__/DecisionHistoryContainerPaginationQuery.graphql";
-import { withPaginationContainer } from "coral-framework/lib/relay";
 
 import DecisionHistory from "./DecisionHistory";
 
@@ -45,7 +46,7 @@ export class DecisionHistoryContainer extends React.Component<
       error => {
         this.setState({ disableLoadMore: false });
         if (error) {
-          // tslint:disable-next-line:no-console
+          // eslint-disable-next-line no-console
           console.error(error);
         }
       }

src/core/client/admin/App/DecisionHistory/DecisionHistoryItemContainer.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";
 
-import { DecisionHistoryItemContainer_action as ActionData } from "coral-admin/__generated__/DecisionHistoryItemContainer_action.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
+import { DecisionHistoryItemContainer_action as ActionData } from "coral-admin/__generated__/DecisionHistoryItemContainer_action.graphql";
+
 import ApprovedComment from "./ApprovedComment";
 import RejectedComment from "./RejectedComment";
 
@@ -16,9 +17,7 @@ class DecisionHistoryItemContainer extends React.Component<
   DecisionHistoryItemContainerProps
 > {
   public render() {
-    const href = `/admin/moderate/comment/${
-      this.props.action.revision.comment.id
-    }`;
+    const href = `/admin/moderate/comment/${this.props.action.revision.comment.id}`;
     const username =
       (this.props.action.revision.comment.author &&
         this.props.action.revision.comment.author.username) ||

src/core/client/admin/App/DecisionHistory/DecisionHistoryQuery.tsx

@@ -1,6 +1,7 @@
-import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import React, { Component } from "react";
 
+import { graphql, QueryRenderer } from "coral-framework/lib/relay";
+
 import { DecisionHistoryQuery as QueryTypes } from "coral-admin/__generated__/DecisionHistoryQuery.graphql";
 
 import DecisionHistoryContainer from "./DecisionHistoryContainer";

src/core/client/admin/App/DecisionHistory/RejectedComment.tsx

@@ -1,6 +1,8 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import { Typography } from "coral-ui/components";
+
 import DecisionItem from "./DecisionItem";
 import DotDivider from "./DotDivider";
 import Footer from "./Footer";
@@ -9,8 +11,6 @@ import Info from "./Info";
 import RejectedIcon from "./RejectedIcon";
 import Timestamp from "./Timestamp";
 
-import { Typography } from "coral-ui/components";
-
 interface Props {
   href: string;
   username: string;

src/core/client/admin/App/Main.spec.tsx

@@ -1,7 +1,7 @@
-import { removeFragmentRefs } from "coral-framework/testHelpers";
 import React from "react";
 import { createRenderer } from "react-test-renderer/shallow";
 
+import { removeFragmentRefs } from "coral-framework/testHelpers";
 import { PropTypesOf } from "coral-framework/types";
 
 import Main from "./Main";

src/core/client/admin/App/MainRoute.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { MainRouteQueryResponse } from "coral-admin/__generated__/MainRouteQuery.graphql";
-
 import { graphql } from "coral-framework/lib/relay";
 import { withRouteConfig } from "coral-framework/lib/router";
 
+import { MainRouteQueryResponse } from "coral-admin/__generated__/MainRouteQuery.graphql";
+
 import Main from "./Main";
 
 interface Props {

src/core/client/admin/App/Navigation/NavigationContainer.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { NavigationContainer_viewer as ViewerData } from "coral-admin/__generated__/NavigationContainer_viewer.graphql";
 import { Ability, can } from "coral-admin/permissions";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import {
@@ -8,6 +7,8 @@ import {
   withSignOutMutation,
 } from "coral-framework/mutations";
 
+import { NavigationContainer_viewer as ViewerData } from "coral-admin/__generated__/NavigationContainer_viewer.graphql";
+
 import Navigation from "./Navigation";
 
 interface Props {

src/core/client/admin/App/UserMenu/UserMenuContainer.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 
-import { UserMenuContainer_viewer as ViewerData } from "coral-admin/__generated__/UserMenuContainer_viewer.graphql";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import {
   SignOutMutation,
   withSignOutMutation,
 } from "coral-framework/mutations";
 
+import { UserMenuContainer_viewer as ViewerData } from "coral-admin/__generated__/UserMenuContainer_viewer.graphql";
+
 import UserMenu from "./UserMenu";
 
 interface Props {

src/core/client/admin/components/AutoLoadMore.tsx

@@ -11,7 +11,7 @@ interface Props {
 }
 
 class AutoLoadMoresContainer extends React.Component<Props> {
-  public componentWillReceiveProps(nextProps: Props) {
+  public UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (nextProps.inView && !nextProps.disableLoadMore) {
       nextProps.onLoadMore();
     }

src/core/client/admin/components/ModerateCard/ApproveButton.spec.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { createRenderer } from "react-test-renderer/shallow";
 
-import ApproveButton from "./ApproveButton";
-
 import { PropTypesOf } from "coral-framework/types";
 
+import ApproveButton from "./ApproveButton";
+
 it("renders correctly", () => {
   const props: PropTypesOf<typeof ApproveButton> = {
     invert: false,

src/core/client/admin/components/ModerateCard/CommentContent.spec.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { createRenderer } from "react-test-renderer/shallow";
 
-import CommentContent from "./CommentContent";
-
 import { PropTypesOf } from "coral-framework/types";
 
+import CommentContent from "./CommentContent";
+
 it("renders correctly", () => {
   const props: PropTypesOf<typeof CommentContent> = {
     suspectWords: ["worse"],

src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx

@@ -1,9 +1,10 @@
 import React, { FunctionComponent } from "react";
 
+import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
+import { HorizontalGutter, Timestamp } from "coral-ui/components";
+
 import { CommentRevisionContainer_comment as CommentData } from "coral-admin/__generated__/CommentRevisionContainer_comment.graphql";
 import { CommentRevisionContainer_settings as SettingsData } from "coral-admin/__generated__/CommentRevisionContainer_settings.graphql";
-import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
-import { HorizontalGutter, Timestamp } from "coral-ui/components";
 
 import CommentContent from "./CommentContent";
 

src/core/client/admin/components/ModerateCard/FeatureCommentMutation.ts

@@ -1,7 +1,6 @@
 import { graphql } from "react-relay";
 import { ConnectionHandler, Environment } from "relay-runtime";
 
-import { FeatureCommentMutation } from "coral-admin/__generated__/FeatureCommentMutation.graphql";
 import { getQueueConnection } from "coral-admin/helpers";
 import { CoralContext } from "coral-framework/lib/bootstrap";
 import {
@@ -11,6 +10,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLCOMMENT_STATUS, GQLTAG } from "coral-framework/schema";
 
+import { FeatureCommentMutation } from "coral-admin/__generated__/FeatureCommentMutation.graphql";
+
 let clientMutationId = 0;
 
 const FeatureCommentMutation = createMutation(

src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx

@@ -2,14 +2,15 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
-import { FlagDetailsContainer_comment } from "coral-admin/__generated__/FlagDetailsContainer_comment.graphql";
-import { FlagDetailsContainer_settings } from "coral-admin/__generated__/FlagDetailsContainer_settings.graphql";
 import NotAvailable from "coral-admin/components/NotAvailable";
 import { TOXICITY_THRESHOLD_DEFAULT } from "coral-common/constants";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLCOMMENT_FLAG_REASON } from "coral-framework/schema";
 import { HorizontalGutter } from "coral-ui/components";
 
+import { FlagDetailsContainer_comment } from "coral-admin/__generated__/FlagDetailsContainer_comment.graphql";
+import { FlagDetailsContainer_settings } from "coral-admin/__generated__/FlagDetailsContainer_settings.graphql";
+
 import FlagDetailsCategory from "./FlagDetailsCategory";
 import FlagDetailsEntry from "./FlagDetailsEntry";
 import ToxicityLabel from "./ToxicityLabel";

src/core/client/admin/components/ModerateCard/FlagDetailsEntry.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { BaseButton } from "coral-ui/components";
+
 import styles from "./FlagDetailsEntry.css";
 
 interface Props {

src/core/client/admin/components/ModerateCard/MarkersContainer.tsx

@@ -2,10 +2,12 @@ import { Localized } from "fluent-react/compat";
 import React from "react";
 import { graphql } from "react-relay";
 
-import { MarkersContainer_comment } from "coral-admin/__generated__/MarkersContainer_comment.graphql";
-import { MarkersContainer_settings } from "coral-admin/__generated__/MarkersContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { Marker, MarkerCount } from "coral-ui/components";
+
+import { MarkersContainer_comment } from "coral-admin/__generated__/MarkersContainer_comment.graphql";
+import { MarkersContainer_settings } from "coral-admin/__generated__/MarkersContainer_settings.graphql";
+
 import Markers from "./Markers";
 import ModerateCardDetailsContainer from "./ModerateCardDetailsContainer";
 

src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx

@@ -2,16 +2,13 @@ import { Match, Router, withRouter } from "found";
 import React, { FunctionComponent, useCallback, useState } from "react";
 import { graphql } from "react-relay";
 
-import {
-  COMMENT_STATUS,
-  ModerateCardContainer_comment,
-} from "coral-admin/__generated__/ModerateCardContainer_comment.graphql";
-import { ModerateCardContainer_settings } from "coral-admin/__generated__/ModerateCardContainer_settings.graphql";
-import { ModerateCardContainer_viewer } from "coral-admin/__generated__/ModerateCardContainer_viewer.graphql";
 import NotAvailable from "coral-admin/components/NotAvailable";
+import BanModal from "coral-admin/components/UserStatus/BanModal";
 import { getModerationLink } from "coral-admin/helpers";
-import { ApproveCommentMutation } from "coral-admin/mutations";
-import { RejectCommentMutation } from "coral-admin/mutations";
+import {
+  ApproveCommentMutation,
+  RejectCommentMutation,
+} from "coral-admin/mutations";
 import FadeInTransition from "coral-framework/components/FadeInTransition";
 import {
   MutationProp,
@@ -21,7 +18,13 @@ import {
 import { GQLUSER_STATUS } from "coral-framework/schema";
 import { GQLTAG } from "coral-framework/schema";
 
-import BanModal from "coral-admin/components/UserStatus/BanModal";
+import {
+  COMMENT_STATUS,
+  ModerateCardContainer_comment,
+} from "coral-admin/__generated__/ModerateCardContainer_comment.graphql";
+import { ModerateCardContainer_settings } from "coral-admin/__generated__/ModerateCardContainer_settings.graphql";
+import { ModerateCardContainer_viewer } from "coral-admin/__generated__/ModerateCardContainer_viewer.graphql";
+
 import BanCommentUserMutation from "./BanCommentUserMutation";
 import FeatureCommentMutation from "./FeatureCommentMutation";
 import ModerateCard from "./ModerateCard";

src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx

@@ -2,13 +2,15 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useState } from "react";
 import { graphql } from "react-relay";
 
-import { ModerateCardDetailsContainer_comment as CommentData } from "coral-admin/__generated__/ModerateCardDetailsContainer_comment.graphql";
-import { ModerateCardDetailsContainer_settings as SettingsData } from "coral-admin/__generated__/ModerateCardDetailsContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { Flex, HorizontalGutter, Icon, Tab, TabBar } from "coral-ui/components";
 
+import { ModerateCardDetailsContainer_comment as CommentData } from "coral-admin/__generated__/ModerateCardDetailsContainer_comment.graphql";
+import { ModerateCardDetailsContainer_settings as SettingsData } from "coral-admin/__generated__/ModerateCardDetailsContainer_settings.graphql";
+
 import CommentRevisionContainer from "./CommentRevisionContainer";
 import FlagDetailsContainer from "./FlagDetailsContainer";
+
 import styles from "./ModerateCardDetailsContainer.css";
 
 interface Props {

src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx

@@ -2,11 +2,12 @@ import { Localized } from "fluent-react/compat";
 import React, { useCallback } from "react";
 import { graphql } from "react-relay";
 
-import { ModeratedByContainer_comment } from "coral-admin/__generated__/ModeratedByContainer_comment.graphql";
-import { ModeratedByContainer_viewer } from "coral-admin/__generated__/ModeratedByContainer_viewer.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { BaseButton } from "coral-ui/components";
 
+import { ModeratedByContainer_comment } from "coral-admin/__generated__/ModeratedByContainer_comment.graphql";
+import { ModeratedByContainer_viewer } from "coral-admin/__generated__/ModeratedByContainer_viewer.graphql";
+
 import styles from "./ModeratedByContainer.css";
 
 interface Props {

src/core/client/admin/components/ModerateCard/RejectButton.spec.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { createRenderer } from "react-test-renderer/shallow";
 
-import RejectButton from "./RejectButton";
-
 import { PropTypesOf } from "coral-framework/types";
 
+import RejectButton from "./RejectButton";
+
 it("renders correctly", () => {
   const props: PropTypesOf<typeof RejectButton> = {
     invert: false,

src/core/client/admin/components/ModerateCard/UnfeatureCommentMutation.ts

@@ -7,6 +7,7 @@ import {
   MutationInput,
 } from "coral-framework/lib/relay";
 import { GQLTAG } from "coral-framework/schema";
+
 import { UnfeatureCommentMutation } from "coral-stream/__generated__/UnfeatureCommentMutation.graphql";
 
 let clientMutationId = 0;

src/core/client/admin/components/UserHistoryDrawer/AccountHistoryAction.tsx

@@ -22,13 +22,15 @@ const AccountHistoryAction: FunctionComponent<HistoryActionProps> = ({
 }) => {
   switch (kind) {
     case "username":
-      return <UsernameChangeAction {...action as UsernameChangeActionProps} />;
+      return (
+        <UsernameChangeAction {...(action as UsernameChangeActionProps)} />
+      );
     case "suspension":
-      return <SuspensionAction {...action as SuspensionActionProps} />;
+      return <SuspensionAction {...(action as SuspensionActionProps)} />;
     case "ban":
-      return <BanAction {...action as BanActionProps} />;
+      return <BanAction {...(action as BanActionProps)} />;
     case "premod":
-      return <PremodAction {...action as PremodActionProps} />;
+      return <PremodAction {...(action as PremodActionProps)} />;
     default:
       return null;
   }

src/core/client/admin/components/UserHistoryDrawer/RecentHistoryContainer.tsx

@@ -1,9 +1,11 @@
 import React, { FunctionComponent, useMemo } from "react";
 
+import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
+import { GQLCOMMENT_STATUS } from "coral-framework/schema";
+
 import { RecentHistoryContainer_settings } from "coral-admin/__generated__/RecentHistoryContainer_settings.graphql";
 import { RecentHistoryContainer_user } from "coral-admin/__generated__/RecentHistoryContainer_user.graphql";
-import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
-import { GQLCOMMENT_STATUS } from "coral-framework/schema";
+
 import RecentHistory from "./RecentHistory";
 
 const PUBLISHED_STATUSES = [GQLCOMMENT_STATUS.NONE, GQLCOMMENT_STATUS.APPROVED];

src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx

@@ -1,12 +1,12 @@
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
-import { UserBadgesContainer_user as UserData } from "coral-admin/__generated__/UserBadgesContainer_user.graphql";
 import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
-
 import CLASSES from "coral-stream/classes";
 import { Tag } from "coral-ui/components";
 
+import { UserBadgesContainer_user as UserData } from "coral-admin/__generated__/UserBadgesContainer_user.graphql";
+
 interface Props {
   user: UserData;
 }

src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx

@@ -1,8 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useMemo } from "react";
 
-import { UserDrawerAccountHistory_user } from "coral-admin/__generated__/UserDrawerAccountHistory_user.graphql";
-
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import {
@@ -16,6 +14,8 @@ import {
   TableRow,
 } from "coral-ui/components";
 
+import { UserDrawerAccountHistory_user } from "coral-admin/__generated__/UserDrawerAccountHistory_user.graphql";
+
 import AccountHistoryAction, {
   HistoryActionProps,
 } from "./AccountHistoryAction";

src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.tsx

@@ -1,12 +1,12 @@
-import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
-import { UserDrawerAccountHistoryQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerAccountHistoryQuery.graphql";
-
+import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components";
 
+import { UserDrawerAccountHistoryQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerAccountHistoryQuery.graphql";
+
 import UserDrawerAccountHistory from "./UserDrawerAccountHistory";
 
 import styles from "./UserDrawerAccountHistoryQuery.css";

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx

@@ -1,19 +1,19 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent, useCallback } from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import { ModerateCardContainer } from "coral-admin/components/ModerateCard";
 import {
   useLoadMore,
   withPaginationContainer,
 } from "coral-framework/lib/relay";
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent, useCallback } from "react";
-import { graphql, RelayPaginationProp } from "react-relay";
+import { Button, CallOut, Typography } from "coral-ui/components";
 
 import { UserHistoryDrawerAllComments_settings } from "coral-admin/__generated__/UserHistoryDrawerAllComments_settings.graphql";
 import { UserHistoryDrawerAllComments_user } from "coral-admin/__generated__/UserHistoryDrawerAllComments_user.graphql";
 import { UserHistoryDrawerAllComments_viewer } from "coral-admin/__generated__/UserHistoryDrawerAllComments_viewer.graphql";
 import { UserHistoryDrawerAllCommentsPaginationQueryVariables } from "coral-admin/__generated__/UserHistoryDrawerAllCommentsPaginationQuery.graphql";
 
-import { ModerateCardContainer } from "coral-admin/components/ModerateCard";
-import { Button, CallOut, Typography } from "coral-ui/components";
-
 import styles from "./UserHistoryDrawerAllComments.css";
 
 interface Props {

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx

@@ -2,10 +2,10 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
+import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components";
 
 import { UserHistoryDrawerAllCommentsQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerAllCommentsQuery.graphql";
-import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 
 import UserHistoryDrawerAllComments from "./UserHistoryDrawerAllComments";
 
@@ -60,7 +60,7 @@ const UserHistoryDrawerAllCommentsQuery: FunctionComponent<Props> = ({
           <UserHistoryDrawerAllComments
             // We can never get to this part of the UI without being logged in.
             viewer={props.viewer!}
-            settings={props.settings!}
+            settings={props.settings}
             user={props.user}
           />
         );

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx

@@ -1,14 +1,15 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { UserHistoryDrawerContainer_settings } from "coral-admin/__generated__/UserHistoryDrawerContainer_settings.graphql";
-import { UserHistoryDrawerContainer_user } from "coral-admin/__generated__/UserHistoryDrawerContainer_user.graphql";
 import { UserStatusChangeContainer } from "coral-admin/components/UserStatus";
 import { CopyButton } from "coral-framework/components";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import { Button, Flex, Icon, Typography } from "coral-ui/components";
 
+import { UserHistoryDrawerContainer_settings } from "coral-admin/__generated__/UserHistoryDrawerContainer_settings.graphql";
+import { UserHistoryDrawerContainer_user } from "coral-admin/__generated__/UserHistoryDrawerContainer_user.graphql";
+
 import RecentHistoryContainer from "./RecentHistoryContainer";
 import Tabs from "./Tabs";
 import UserBadgesContainer from "./UserBadgesContainer";

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx

@@ -2,10 +2,11 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
-import { UserHistoryDrawerQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerQuery.graphql";
 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components";
 
+import { UserHistoryDrawerQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerQuery.graphql";
+
 import UserHistoryDrawerContainer from "./UserHistoryDrawerContainer";
 
 import styles from "./UserHistoryDrawerQuery.css";

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx

@@ -1,19 +1,19 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent, useCallback } from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import { ModerateCardContainer } from "coral-admin/components/ModerateCard";
 import {
   useLoadMore,
   withPaginationContainer,
 } from "coral-framework/lib/relay";
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent, useCallback } from "react";
-import { graphql, RelayPaginationProp } from "react-relay";
+import { Button, CallOut, Typography } from "coral-ui/components";
 
 import { UserHistoryDrawerRejectedComments_settings } from "coral-admin/__generated__/UserHistoryDrawerRejectedComments_settings.graphql";
 import { UserHistoryDrawerRejectedComments_user } from "coral-admin/__generated__/UserHistoryDrawerRejectedComments_user.graphql";
 import { UserHistoryDrawerRejectedComments_viewer } from "coral-admin/__generated__/UserHistoryDrawerRejectedComments_viewer.graphql";
 import { UserHistoryDrawerRejectedCommentsPaginationQueryVariables } from "coral-admin/__generated__/UserHistoryDrawerRejectedCommentsPaginationQuery.graphql";
 
-import { ModerateCardContainer } from "coral-admin/components/ModerateCard";
-import { Button, CallOut, Typography } from "coral-ui/components";
-
 import styles from "./UserHistoryDrawerRejectedComments.css";
 
 interface Props {

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx

@@ -2,11 +2,11 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
-import { UserHistoryDrawerRejectedCommentsQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerRejectedCommentsQuery.graphql";
-
 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { CallOut, Spinner } from "coral-ui/components";
 
+import { UserHistoryDrawerRejectedCommentsQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerRejectedCommentsQuery.graphql";
+
 import UserHistoryDrawerRejectedComments from "./UserHistoryDrawerRejectedComments";
 
 import styles from "./UserHistoryDrawerRejectedCommentsQuery.css";
@@ -60,7 +60,7 @@ const UserHistoryDrawerRejectedCommentsQuery: FunctionComponent<Props> = ({
           <UserHistoryDrawerRejectedComments
             // We can never get to this part of the UI without being logged in.
             viewer={props.viewer!}
-            settings={props.settings!}
+            settings={props.settings}
             user={props.user}
           />
         );

src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx

@@ -1,9 +1,8 @@
-import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useMemo } from "react";
 
-import { UserStatusDetailsContainer_user as UserData } from "coral-admin/__generated__/UserStatusDetailsContainer_user.graphql";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import {
   BaseButton,
   Box,
@@ -13,6 +12,8 @@ import {
   Typography,
 } from "coral-ui/components";
 
+import { UserStatusDetailsContainer_user as UserData } from "coral-admin/__generated__/UserStatusDetailsContainer_user.graphql";
+
 interface Props {
   user: UserData;
 }

src/core/client/admin/components/UserRole/UpdateUserRoleMutation.ts

@@ -1,13 +1,14 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { UpdateUserRoleMutation as MutationTypes } from "coral-admin/__generated__/UpdateUserRoleMutation.graphql";
 import {
   commitMutationPromiseNormalized,
   createMutation,
   MutationInput,
 } from "coral-framework/lib/relay";
 
+import { UpdateUserRoleMutation as MutationTypes } from "coral-admin/__generated__/UpdateUserRoleMutation.graphql";
+
 let clientMutationId = 0;
 
 const UpdateUserRoleMutation = createMutation(

src/core/client/admin/components/UserRole/UserRoleChange.tsx

@@ -12,9 +12,10 @@ import {
   Popover,
 } from "coral-ui/components";
 
-import styles from "./UserRoleChange.css";
 import UserRoleText from "./UserRoleText";
 
+import styles from "./UserRoleChange.css";
+
 interface Props {
   onChangeRole: (role: GQLUSER_ROLE_RL) => void;
   role: GQLUSER_ROLE_RL;

src/core/client/admin/components/UserRole/UserRoleChangeContainer.tsx

@@ -1,7 +1,5 @@
 import React, { FunctionComponent, useCallback } from "react";
 
-import { UserRoleChangeContainer_user } from "coral-admin/__generated__/UserRoleChangeContainer_user.graphql";
-import { UserRoleChangeContainer_viewer } from "coral-admin/__generated__/UserRoleChangeContainer_viewer.graphql";
 import { Ability, can } from "coral-admin/permissions";
 import {
   graphql,
@@ -10,6 +8,9 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUSER_ROLE_RL } from "coral-framework/schema";
 
+import { UserRoleChangeContainer_user } from "coral-admin/__generated__/UserRoleChangeContainer_user.graphql";
+import { UserRoleChangeContainer_viewer } from "coral-admin/__generated__/UserRoleChangeContainer_viewer.graphql";
+
 import ButtonPadding from "../ButtonPadding";
 import UpdateUserRoleMutation from "./UpdateUserRoleMutation";
 import UserRoleChange from "./UserRoleChange";

src/core/client/admin/components/UserStatus/BanModal.tsx

@@ -1,3 +1,9 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent, useCallback, useMemo } from "react";
+import { Field, Form } from "react-final-form";
+
+import NotAvailable from "coral-admin/components/NotAvailable";
+import { GetMessage, withGetMessage } from "coral-framework/lib/i18n";
 import {
   Button,
   Card,
@@ -8,12 +14,6 @@ import {
   Modal,
   Typography,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent, useCallback, useMemo } from "react";
-import { Field, Form } from "react-final-form";
-
-import NotAvailable from "coral-admin/components/NotAvailable";
-import { GetMessage, withGetMessage } from "coral-framework/lib/i18n";
 
 import styles from "./BanModal.css";
 

src/core/client/admin/components/UserStatus/BanUserMutation.ts

@@ -1,7 +1,6 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { BanUserMutation as MutationTypes } from "coral-admin/__generated__/BanUserMutation.graphql";
 import { getViewer } from "coral-framework/helpers";
 import {
   commitMutationPromiseNormalized,
@@ -11,6 +10,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUser, GQLUSER_STATUS } from "coral-framework/schema";
 
+import { BanUserMutation as MutationTypes } from "coral-admin/__generated__/BanUserMutation.graphql";
+
 let clientMutationId = 0;
 
 const BanUserMutation = createMutation(

src/core/client/admin/components/UserStatus/PremodModal.tsx

@@ -1,3 +1,7 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+
+import NotAvailable from "coral-admin/components/NotAvailable";
 import {
   Button,
   Card,
@@ -7,10 +11,6 @@ import {
   Modal,
   Typography,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
-
-import NotAvailable from "coral-admin/components/NotAvailable";
 
 import styles from "./PremodModal.css";
 

src/core/client/admin/components/UserStatus/PremodUserMutation.ts

@@ -1,7 +1,6 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { PremodUserMutation as MutationTypes } from "coral-admin/__generated__/PremodUserMutation.graphql";
 import { getViewer } from "coral-framework/helpers";
 import {
   commitMutationPromiseNormalized,
@@ -11,6 +10,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUser, GQLUSER_STATUS } from "coral-framework/schema";
 
+import { PremodUserMutation as MutationTypes } from "coral-admin/__generated__/PremodUserMutation.graphql";
+
 let clientMutationId = 0;
 
 const PremodUserMutation = createMutation(

src/core/client/admin/components/UserStatus/RemoveUserBanMutation.ts

@@ -1,7 +1,6 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { RemoveUserBanMutation as MutationTypes } from "coral-admin/__generated__/RemoveUserBanMutation.graphql";
 import {
   commitMutationPromiseNormalized,
   createMutation,
@@ -10,6 +9,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUser, GQLUSER_STATUS } from "coral-framework/schema";
 
+import { RemoveUserBanMutation as MutationTypes } from "coral-admin/__generated__/RemoveUserBanMutation.graphql";
+
 let clientMutationId = 0;
 
 const RemoveUserBanMutation = createMutation(

src/core/client/admin/components/UserStatus/RemoveUserPremodMutation.ts

@@ -1,7 +1,6 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { RemoveUserPremodMutation as MutationTypes } from "coral-admin/__generated__/RemoveUserPremodMutation.graphql";
 import { getViewer } from "coral-framework/helpers";
 import {
   commitMutationPromiseNormalized,
@@ -11,6 +10,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUser, GQLUSER_STATUS } from "coral-framework/schema";
 
+import { RemoveUserPremodMutation as MutationTypes } from "coral-admin/__generated__/RemoveUserPremodMutation.graphql";
+
 let clientMutationId = 0;
 
 const RemoveUserPremodMutation = createMutation(

src/core/client/admin/components/UserStatus/RemoveUserSuspensionMutation.ts

@@ -2,7 +2,6 @@ import { pick } from "lodash";
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { RemoveUserSuspensionMutation as MutationTypes } from "coral-admin/__generated__/RemoveUserSuspensionMutation.graphql";
 import { DeepWritable } from "coral-common/types";
 import {
   commitMutationPromiseNormalized,
@@ -12,6 +11,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUser, GQLUSER_STATUS } from "coral-framework/schema";
 
+import { RemoveUserSuspensionMutation as MutationTypes } from "coral-admin/__generated__/RemoveUserSuspensionMutation.graphql";
+
 let clientMutationId = 0;
 
 const RemoveUserSuspensionMutation = createMutation(

src/core/client/admin/components/UserStatus/SuspendUserMutation.ts

@@ -2,7 +2,6 @@ import { DateTime } from "luxon";
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { SuspendUserMutation as MutationTypes } from "coral-admin/__generated__/SuspendUserMutation.graphql";
 import { getViewer } from "coral-framework/helpers";
 import {
   commitMutationPromiseNormalized,
@@ -12,6 +11,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUser, GQLUSER_STATUS } from "coral-framework/schema";
 
+import { SuspendUserMutation as MutationTypes } from "coral-admin/__generated__/SuspendUserMutation.graphql";
+
 let clientMutationId = 0;
 
 const SuspendUserMutation = createMutation(

src/core/client/admin/components/UserStatus/UserStatus.tsx

@@ -25,7 +25,7 @@ const UserStatus: FunctionComponent<Props> = props => {
   if (props.banned) {
     return render(
       "error",
-      // tslint:disable-next-line:jsx-wrap-multiline
+      // eslint-disable-next-line:jsx-wrap-multiline
       <Localized id="userStatus-banned">
         <div>Banned</div>
       </Localized>
@@ -34,7 +34,7 @@ const UserStatus: FunctionComponent<Props> = props => {
   if (props.suspended) {
     return render(
       "warning",
-      // tslint:disable-next-line:jsx-wrap-multiline
+      // eslint-disable-next-line:jsx-wrap-multiline
       <Localized id="userStatus-suspended">
         <div>Suspended</div>
       </Localized>
@@ -43,7 +43,7 @@ const UserStatus: FunctionComponent<Props> = props => {
   if (props.premod) {
     return render(
       "warning",
-      // tslint:disable-next-line:jsx-wrap-multiline
+      // eslint-disable-next-line:jsx-wrap-multiline
       <Localized id="userStatus-premod">
         <div>Always Premoderated</div>
       </Localized>
@@ -51,7 +51,7 @@ const UserStatus: FunctionComponent<Props> = props => {
   }
   return render(
     "success",
-    // tslint:disable-next-line:jsx-wrap-multiline
+    // eslint-disable-next-line:jsx-wrap-multiline
     <Localized id="userStatus-active">
       <div>Active</div>
     </Localized>

src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx

@@ -1,7 +1,5 @@
 import React, { FunctionComponent, useCallback, useState } from "react";
 
-import { UserStatusChangeContainer_settings as SettingsData } from "coral-admin/__generated__/UserStatusChangeContainer_settings.graphql";
-import { UserStatusChangeContainer_user as UserData } from "coral-admin/__generated__/UserStatusChangeContainer_user.graphql";
 import {
   graphql,
   useMutation,
@@ -9,6 +7,9 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUSER_ROLE } from "coral-framework/schema";
 
+import { UserStatusChangeContainer_settings as SettingsData } from "coral-admin/__generated__/UserStatusChangeContainer_settings.graphql";
+import { UserStatusChangeContainer_user as UserData } from "coral-admin/__generated__/UserStatusChangeContainer_user.graphql";
+
 import ButtonPadding from "../ButtonPadding";
 import BanModal from "./BanModal";
 import BanUserMutation from "./BanUserMutation";

src/core/client/admin/components/UserStatus/UserStatusContainer.tsx

@@ -1,10 +1,11 @@
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
-import { UserStatusContainer_user as UserData } from "coral-admin/__generated__/UserStatusContainer_user.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLUSER_STATUS } from "coral-framework/schema";
 
+import { UserStatusContainer_user as UserData } from "coral-admin/__generated__/UserStatusContainer_user.graphql";
+
 import UserStatus from "./UserStatus";
 
 interface Props {

src/core/client/admin/index.tsx

@@ -1,7 +1,8 @@
-import { createManaged } from "coral-framework/lib/bootstrap";
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
+import { createManaged } from "coral-framework/lib/bootstrap";
+
 import App from "./App";
 import Head from "./Head";
 import { initLocalState } from "./local";

src/core/client/admin/locales.ts

@@ -6,4 +6,5 @@
  */
 
 import { LocalesData } from "coral-framework/lib/i18n";
+
 export default {} as LocalesData;

src/core/client/admin/mutations/ApproveCommentMutation.ts

@@ -1,7 +1,6 @@
 import { graphql } from "react-relay";
 import { ConnectionHandler, Environment } from "relay-runtime";
 
-import { ApproveCommentMutation as MutationTypes } from "coral-admin/__generated__/ApproveCommentMutation.graphql";
 import { getQueueConnection } from "coral-admin/helpers";
 import {
   commitMutationPromiseNormalized,
@@ -9,6 +8,8 @@ import {
   MutationInput,
 } from "coral-framework/lib/relay";
 
+import { ApproveCommentMutation as MutationTypes } from "coral-admin/__generated__/ApproveCommentMutation.graphql";
+
 let clientMutationId = 0;
 
 const ApproveCommentMutation = createMutation(

src/core/client/admin/mutations/RejectCommentMutation.ts

@@ -1,7 +1,6 @@
 import { graphql } from "react-relay";
 import { ConnectionHandler, Environment } from "relay-runtime";
 
-import { RejectCommentMutation as MutationTypes } from "coral-admin/__generated__/RejectCommentMutation.graphql";
 import { getQueueConnection } from "coral-admin/helpers";
 import {
   commitMutationPromiseNormalized,
@@ -9,6 +8,8 @@ import {
   MutationInput,
 } from "coral-framework/lib/relay";
 
+import { RejectCommentMutation as MutationTypes } from "coral-admin/__generated__/RejectCommentMutation.graphql";
+
 let clientMutationId = 0;
 
 const RejectCommentMutation = createMutation(

src/core/client/admin/mutations/SetRedirectPathMutation.spec.ts

@@ -2,12 +2,12 @@ import { Environment, RecordSource } from "relay-runtime";
 
 import { REDIRECT_PATH_KEY } from "coral-admin/constants";
 import { LOCAL_ID } from "coral-framework/lib/relay";
-import { createRelayEnvironment } from "coral-framework/testHelpers";
-
 import {
   createInMemoryStorage,
   createPromisifiedStorage,
 } from "coral-framework/lib/storage";
+import { createRelayEnvironment } from "coral-framework/testHelpers";
+
 import SetRedirectPathMutation from "./SetRedirectPathMutation";
 
 let environment: Environment;

src/core/client/admin/permissions.tsx

@@ -1,6 +1,7 @@
-import { GQLUSER_ROLE, GQLUSER_ROLE_RL } from "coral-framework/schema";
 import { mapValues } from "lodash";
 
+import { GQLUSER_ROLE, GQLUSER_ROLE_RL } from "coral-framework/schema";
+
 /**
  * permissionMap describes what abilities certain roles have.
  *
@@ -26,7 +27,7 @@ const permissionMap = {
 
 export type AbilityType = keyof typeof permissionMap;
 export const Ability = mapValues(permissionMap, (_, key) => key) as {
-  [P in AbilityType]: P
+  [P in AbilityType]: P;
 };
 
 /**

src/core/client/admin/routeConfig.tsx

@@ -2,6 +2,7 @@ import { makeRouteConfig, Redirect, Route } from "found";
 import React from "react";
 
 import { GQLUSER_ROLE } from "coral-framework/schema";
+
 import MainRoute from "./App/MainRoute";
 import { Ability } from "./permissions";
 import { createAuthCheckRoute } from "./routes/AuthCheck";

src/core/client/admin/routes/AuthCheck/AuthCheckRoute.tsx

@@ -1,7 +1,6 @@
 import { Match, Router, withRouter } from "found";
 import React from "react";
 
-import { AuthCheckRouteQueryResponse } from "coral-admin/__generated__/AuthCheckRouteQuery.graphql";
 import { SetRedirectPathMutation } from "coral-admin/mutations";
 import { AbilityType, can } from "coral-admin/permissions";
 import { roleIsAtLeast } from "coral-framework/helpers";
@@ -9,6 +8,8 @@ import { graphql, MutationProp, withMutation } from "coral-framework/lib/relay";
 import { withRouteConfig } from "coral-framework/lib/router";
 import { GQLUSER_ROLE } from "coral-framework/schema";
 
+import { AuthCheckRouteQueryResponse } from "coral-admin/__generated__/AuthCheckRouteQuery.graphql";
+
 import RestrictedContainer from "./RestrictedContainer";
 
 interface Props {
@@ -36,7 +37,7 @@ function createAuthCheckRoute(check: CheckParams) {
       this.redirectIfNotLoggedIn();
     }
 
-    public componentWillReceiveProps(nextProps: Props) {
+    public UNSAFE_componentWillReceiveProps(nextProps: Props) {
       if (nextProps.data && nextProps.data.viewer) {
         this.wasLoggedIn = true;
       }
@@ -54,7 +55,7 @@ function createAuthCheckRoute(check: CheckParams) {
     }
 
     private hasAccess(props: Props = this.props) {
-      const { viewer } = props.data!;
+      const { viewer } = props.data;
       if (viewer) {
         if (
           (check.role && !roleIsAtLeast(viewer.role, check.role)) ||

src/core/client/admin/routes/AuthCheck/RestrictedContainer.tsx

@@ -1,7 +1,6 @@
 import { RouteProps } from "found";
 import React, { Component } from "react";
 
-import { RestrictedContainer_viewer as ViewerData } from "coral-admin/__generated__/RestrictedContainer_viewer.graphql";
 import { SetRedirectPathMutation } from "coral-admin/mutations";
 import { timeout } from "coral-common/utils";
 import {
@@ -15,6 +14,8 @@ import {
   withSignOutMutation,
 } from "coral-framework/mutations";
 
+import { RestrictedContainer_viewer as ViewerData } from "coral-admin/__generated__/RestrictedContainer_viewer.graphql";
+
 import Restricted from "./Restricted";
 
 interface Props {

src/core/client/admin/routes/Community/CommunityRoute.tsx

@@ -2,9 +2,10 @@ import { FormApi } from "final-form";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
-import { CommunityRouteQueryResponse } from "coral-admin/__generated__/CommunityRouteQuery.graphql";
 import { withRouteConfig } from "coral-framework/lib/router";
 
+import { CommunityRouteQueryResponse } from "coral-admin/__generated__/CommunityRouteQuery.graphql";
+
 import Community from "./Community";
 
 interface Props {

src/core/client/admin/routes/Community/InviteUsers/InviteUsersContainer.tsx

@@ -1,9 +1,10 @@
 import React, { FunctionComponent } from "react";
 
+import { Ability, can } from "coral-admin/permissions";
+import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
+
 import { InviteUsersContainer_settings } from "coral-admin/__generated__/InviteUsersContainer_settings.graphql";
 import { InviteUsersContainer_viewer } from "coral-admin/__generated__/InviteUsersContainer_viewer.graphql";
-import { Ability, can } from "coral-admin/permissions";
-import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 
 import InviteUsers from "./InviteUsers";
 

src/core/client/admin/routes/Community/InviteUsers/InviteUsersMutation.ts

@@ -1,13 +1,14 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { InviteUsersMutation } from "coral-admin/__generated__/InviteUsersMutation.graphql";
 import {
   commitMutationPromiseNormalized,
   createMutation,
   MutationInput,
 } from "coral-framework/lib/relay";
 
+import { InviteUsersMutation } from "coral-admin/__generated__/InviteUsersMutation.graphql";
+
 let clientMutationId = 0;
 
 const InviteUsersMutation = createMutation(

src/core/client/admin/routes/Community/UserRowContainer.tsx

@@ -1,11 +1,12 @@
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+
 import { UserRowContainer_settings as SettingsData } from "coral-admin/__generated__/UserRowContainer_settings.graphql";
 import { UserRowContainer_user as UserData } from "coral-admin/__generated__/UserRowContainer_user.graphql";
 import { UserRowContainer_viewer as ViewerData } from "coral-admin/__generated__/UserRowContainer_viewer.graphql";
-import { useCoralContext } from "coral-framework/lib/bootstrap";
-import { withFragmentContainer } from "coral-framework/lib/relay";
 
 import UserRow from "./UserRow";
 
@@ -24,7 +25,7 @@ const UserRowContainer: FunctionComponent<Props> = props => {
       settings={props.settings}
       viewer={props.viewer}
       userID={props.user.id}
-      username={props.user.username!}
+      username={props.user.username}
       email={props.user.email}
       memberSince={new Intl.DateTimeFormat(locales, {
         day: "2-digit",

src/core/client/admin/routes/Community/UserTable.tsx

@@ -1,10 +1,10 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
-import { PropTypesOf } from "coral-framework/types";
-
 import AutoLoadMore from "coral-admin/components/AutoLoadMore";
 import UserHistoryDrawer from "coral-admin/components/UserHistoryDrawer";
+import { PropTypesOf } from "coral-framework/types";
+import { Flex, HorizontalGutter, Spinner } from "coral-ui/components";
 import {
   Table,
   TableBody,
@@ -13,10 +13,8 @@ import {
   TableRow,
 } from "coral-ui/components/Table";
 
-import UserRowContainer from "./UserRowContainer";
-
-import { Flex, HorizontalGutter, Spinner } from "coral-ui/components";
 import EmptyMessage from "./EmptyMessage";
+import UserRowContainer from "./UserRowContainer";
 
 import styles from "./UserTable.css";
 

src/core/client/admin/routes/Community/UserTableContainer.tsx

@@ -1,8 +1,6 @@
 import React, { FunctionComponent, useState } from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
 
-import { UserTableContainer_query as QueryData } from "coral-admin/__generated__/UserTableContainer_query.graphql";
-import { UserTableContainerPaginationQueryVariables } from "coral-admin/__generated__/UserTableContainerPaginationQuery.graphql";
 import { IntersectionProvider } from "coral-framework/lib/intersection";
 import {
   useLoadMore,
@@ -10,8 +8,11 @@ import {
   withPaginationContainer,
 } from "coral-framework/lib/relay";
 import { GQLUSER_ROLE_RL, GQLUSER_STATUS_RL } from "coral-framework/schema";
-
 import { HorizontalGutter } from "coral-ui/components";
+
+import { UserTableContainer_query as QueryData } from "coral-admin/__generated__/UserTableContainer_query.graphql";
+import { UserTableContainerPaginationQueryVariables } from "coral-admin/__generated__/UserTableContainerPaginationQuery.graphql";
+
 import UserTable from "./UserTable";
 import UserTableFilter from "./UserTableFilter";
 

src/core/client/admin/routes/Configure/Layout.tsx

@@ -1,6 +1,7 @@
-import { Flex } from "coral-ui/components";
 import React, { FunctionComponent } from "react";
 
+import { Flex } from "coral-ui/components";
+
 import styles from "./Layout.css";
 
 const Layout: FunctionComponent = ({ children }) => (

src/core/client/admin/routes/Configure/Subheader.tsx

@@ -1,6 +1,7 @@
-import { Typography } from "coral-ui/components";
 import React, { FunctionComponent } from "react";
 
+import { Typography } from "coral-ui/components";
+
 import styles from "./Subheader.css";
 
 const Subheader: FunctionComponent = ({ children }) => (