[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
2026-08-06 13:41:02 +08:00 · 2019-10-15 22:56:38 +00:00
parent b0e0ba6633
commit 3bfcc509d2
569 changed files with 2592 additions and 1925 deletions
@@ -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 = () => (
@@ -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;
@@ -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);
        }
      }
@@ -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) ||
@@ -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";
@@ -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;
@@ -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";
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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();
    }
@@ -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,
@@ -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"],
@@ -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";

@@ -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(
@@ -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";
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from "react";

 import { BaseButton } from "coral-ui/components";
+
 import styles from "./FlagDetailsEntry.css";

 interface Props {
@@ -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";

@@ -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";
@@ -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 {
@@ -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 {
@@ -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,
@@ -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;
@@ -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;
  }
@@ -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];
@@ -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;
 }
@@ -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";
@@ -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";
@@ -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 {
@@ -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}
          />
        );
@@ -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";
@@ -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";
@@ -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 {
@@ -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}
          />
        );
@@ -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;
 }
@@ -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(
@@ -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;
@@ -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";
@@ -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";

@@ -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(
@@ -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";

@@ -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(
@@ -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(
@@ -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(
@@ -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(
@@ -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(
@@ -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>
@@ -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";
@@ -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 {
@@ -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";
@@ -6,4 +6,5 @@
 */

 import { LocalesData } from "coral-framework/lib/i18n";
+
 export default {} as LocalesData;
@@ -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(
@@ -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(
@@ -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;
@@ -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;
 };

 /**
@@ -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";
@@ -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)) ||
@@ -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 {
@@ -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 {
@@ -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";

@@ -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(
@@ -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",
@@ -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";

@@ -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";

@@ -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 }) => (
@@ -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 }) => (
@@ -1,13 +1,14 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";

-import { UpdateSettingsMutation as MutationTypes } from "coral-admin/__generated__/UpdateSettingsMutation.graphql";
 import {
  commitMutationPromiseNormalized,
  createMutation,
  MutationInput,
 } from "coral-framework/lib/relay";

+import { UpdateSettingsMutation as MutationTypes } from "coral-admin/__generated__/UpdateSettingsMutation.graphql";
+
 let clientMutationId = 0;

 const UpdateSettingsMutation = createMutation(
@@ -3,10 +3,11 @@ import { RouteProps } from "found";
 import React from "react";
 import { graphql } from "react-relay";

-import { AdvancedConfigContainer_settings } from "coral-admin/__generated__/AdvancedConfigContainer_settings.graphql";
 import { pureMerge } from "coral-common/utils";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { AdvancedConfigContainer_settings } from "coral-admin/__generated__/AdvancedConfigContainer_settings.graphql";
+
 import AdvancedConfig from "./AdvancedConfig";

 interface Props {
@@ -2,10 +2,11 @@ import { FormApi } from "final-form";
 import React from "react";
 import { graphql } from "react-relay";

-import { AdvancedConfigRouteQueryResponse } from "coral-admin/__generated__/AdvancedConfigRouteQuery.graphql";
 import { withRouteConfig } from "coral-framework/lib/router";
 import { Delay, Spinner } from "coral-ui/components";

+import { AdvancedConfigRouteQueryResponse } from "coral-admin/__generated__/AdvancedConfigRouteQuery.graphql";
+
 import AdvancedConfigContainer from "./AdvancedConfigContainer";

 interface Props {
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

+import { withFragmentContainer } from "coral-framework/lib/relay";
+
 import { CommentStreamLiveUpdatesContainer_settings } from "coral-admin/__generated__/CommentStreamLiveUpdatesContainer_settings.graphql";
 import { CommentStreamLiveUpdatesContainer_settingsReadOnly } from "coral-admin/__generated__/CommentStreamLiveUpdatesContainer_settingsReadOnly.graphql";
-import { withFragmentContainer } from "coral-framework/lib/relay";

 import CommentStreamLiveUpdates from "./CommentStreamLiveUpdates";

@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { CustomCSSConfigContainer_settings as SettingsData } from "coral-admin/__generated__/CustomCSSConfigContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { CustomCSSConfigContainer_settings as SettingsData } from "coral-admin/__generated__/CustomCSSConfigContainer_settings.graphql";
+
 import CustomCSSConfig from "./CustomCSSConfig";

 interface Props {
@@ -1,9 +1,10 @@
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

-import { EmbedCodeContainer_settings } from "coral-admin/__generated__/EmbedCodeContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { EmbedCodeContainer_settings } from "coral-admin/__generated__/EmbedCodeContainer_settings.graphql";
+
 import EmbedCode from "./EmbedCode";

 interface Props {
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { PermittedDomainsConfigContainer_settings as SettingsData } from "coral-admin/__generated__/PermittedDomainsConfigContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { PermittedDomainsConfigContainer_settings as SettingsData } from "coral-admin/__generated__/PermittedDomainsConfigContainer_settings.graphql";
+
 import PermittedDomainsConfig from "./PermittedDomainsConfig";

 interface Props {
@@ -12,9 +12,9 @@ import {
  TextField,
  Typography,
 } from "coral-ui/components";
-import OnOffField from "../../OnOffField";

 import Header from "../../Header";
+import OnOffField from "../../OnOffField";

 interface Props {
  disabled: boolean;
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { StoryCreationConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StoryCreationConfigContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { StoryCreationConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StoryCreationConfigContainer_settings.graphql";
+
 import StoryCreationConfig from "./StoryCreationConfig";

 interface Props {
@@ -9,9 +9,9 @@ import {
  InputLabel,
  Typography,
 } from "coral-ui/components";
-import OnOffField from "../../OnOffField";

 import Header from "../../Header";
+import OnOffField from "../../OnOffField";
 import SectionContent from "../../SectionContent";

 import styles from "./AccountFeaturesConfig.css";
@@ -1,11 +1,12 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { AccountFeaturesConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AccountFeaturesConfigContainer_settings.graphql";
 import { DeepNullable, DeepPartial } from "coral-common/types";
 import { withFragmentContainer } from "coral-framework/lib/relay";
-
 import { GQLSettings } from "coral-framework/schema";
+
+import { AccountFeaturesConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AccountFeaturesConfigContainer_settings.graphql";
+
 import AccountFeaturesConfig from "./AccountFeaturesConfig";

 export type FormProps = DeepNullable<Pick<GQLSettings, "accountFeatures">>;
@@ -4,8 +4,6 @@ import { RouteProps } from "found";
 import React from "react";
 import { graphql } from "react-relay";

-import { AuthConfigContainer_auth as AuthData } from "coral-admin/__generated__/AuthConfigContainer_auth.graphql";
-import { AuthConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AuthConfigContainer_settings.graphql";
 import { DeepNullable, DeepPartial } from "coral-common/types";
 import { pureMerge } from "coral-common/utils";
 import { CoralContext, withContext } from "coral-framework/lib/bootstrap";
@@ -20,6 +18,9 @@ import { withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLSettings } from "coral-framework/schema";
 import { HorizontalGutter } from "coral-ui/components";

+import { AuthConfigContainer_auth as AuthData } from "coral-admin/__generated__/AuthConfigContainer_auth.graphql";
+import { AuthConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AuthConfigContainer_settings.graphql";
+
 import AccountFeaturesConfigContainer from "./AccountFeaturesConfigContainer";
 import AuthConfig from "./AuthConfig";

@@ -2,10 +2,11 @@ import { FormApi } from "final-form";
 import React from "react";
 import { graphql } from "react-relay";

-import { AuthConfigRouteContainerQueryResponse } from "coral-admin/__generated__/AuthConfigRouteContainerQuery.graphql";
 import { withRouteConfig } from "coral-framework/lib/router";
 import { Delay, Spinner } from "coral-ui/components";

+import { AuthConfigRouteContainerQueryResponse } from "coral-admin/__generated__/AuthConfigRouteContainerQuery.graphql";
+
 import AuthConfigContainer from "./AuthConfigContainer";

 interface Props {
@@ -1,8 +1,8 @@
-import { parseBool } from "coral-framework/lib/form";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

+import { parseBool } from "coral-framework/lib/form";
 import { CheckBox, FormField } from "coral-ui/components";

 import ConfigBox from "../../ConfigBox";
@@ -1,13 +1,14 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";

-import { DiscoverOIDCConfigurationFetchQuery as QueryTypes } from "coral-admin/__generated__/DiscoverOIDCConfigurationFetchQuery.graphql";
 import {
  createFetch,
  fetchQuery,
  FetchVariables,
 } from "coral-framework/lib/relay";

+import { DiscoverOIDCConfigurationFetchQuery as QueryTypes } from "coral-admin/__generated__/DiscoverOIDCConfigurationFetchQuery.graphql";
+
 const DiscoverOIDCConfigurationFetch = createFetch(
  "discoverOIDCConfiguration",
  (environment: Environment, variables: FetchVariables<QueryTypes>) => {
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

+import { withFragmentContainer } from "coral-framework/lib/relay";
+
 import { FacebookConfigContainer_auth as AuthData } from "coral-admin/__generated__/FacebookConfigContainer_auth.graphql";
 import { FacebookConfigContainer_authReadOnly as AuthReadOnlyData } from "coral-admin/__generated__/FacebookConfigContainer_authReadOnly.graphql";
-import { withFragmentContainer } from "coral-framework/lib/relay";

 import { OnInitValuesFct } from "./AuthConfigContainer";
 import FacebookConfig from "./FacebookConfig";
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

+import { withFragmentContainer } from "coral-framework/lib/relay";
+
 import { GoogleConfigContainer_auth as AuthData } from "coral-admin/__generated__/GoogleConfigContainer_auth.graphql";
 import { GoogleConfigContainer_authReadOnly as AuthReadOnlyData } from "coral-admin/__generated__/GoogleConfigContainer_authReadOnly.graphql";
-import { withFragmentContainer } from "coral-framework/lib/relay";

 import { OnInitValuesFct } from "./AuthConfigContainer";
 import GoogleConfig from "./GoogleConfig";
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { LocalAuthConfigContainer_auth as AuthData } from "coral-admin/__generated__/LocalAuthConfigContainer_auth.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { LocalAuthConfigContainer_auth as AuthData } from "coral-admin/__generated__/LocalAuthConfigContainer_auth.graphql";
+
 import { OnInitValuesFct } from "./AuthConfigContainer";
 import LocalAuthConfig from "./LocalAuthConfig";

@@ -4,14 +4,15 @@ import { ReactContext, withReactFinalForm } from "react-final-form";
 import { graphql } from "react-relay";
 import { InferableComponentEnhancer } from "recompose";

-import { OIDCConfigContainer_auth as AuthData } from "coral-admin/__generated__/OIDCConfigContainer_auth.graphql";
-import { OIDCConfigContainer_authReadOnly as AuthReadOnlyData } from "coral-admin/__generated__/OIDCConfigContainer_authReadOnly.graphql";
 import {
  FetchProp,
  withFetch,
  withFragmentContainer,
 } from "coral-framework/lib/relay";

+import { OIDCConfigContainer_auth as AuthData } from "coral-admin/__generated__/OIDCConfigContainer_auth.graphql";
+import { OIDCConfigContainer_authReadOnly as AuthReadOnlyData } from "coral-admin/__generated__/OIDCConfigContainer_authReadOnly.graphql";
+
 import { OnInitValuesFct } from "./AuthConfigContainer";
 import DiscoverOIDCConfigurationFetch from "./DiscoverOIDCConfigurationFetch";
 import OIDCConfig from "./OIDCConfig";
@@ -54,7 +55,7 @@ class OIDCConfigContainer extends React.Component<Props, State> {
      }
    } catch (error) {
      // FIXME: (wyattjoh) handle error
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
      console.warn(error);
    }
    this.setState({ awaitingResponse: false });
@@ -1,12 +1,13 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";

-import { RegenerateSSOKeyMutation as MutationTypes } from "coral-admin/__generated__/RegenerateSSOKeyMutation.graphql";
 import {
  commitMutationPromiseNormalized,
  createMutation,
 } from "coral-framework/lib/relay";

+import { RegenerateSSOKeyMutation as MutationTypes } from "coral-admin/__generated__/RegenerateSSOKeyMutation.graphql";
+
 let clientMutationId = 0;

 const RegenerateSSOKeyMutation = createMutation(
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

+import { withFragmentContainer } from "coral-framework/lib/relay";
+
 import { SSOConfigContainer_auth as AuthData } from "coral-admin/__generated__/SSOConfigContainer_auth.graphql";
 import { SSOConfigContainer_authReadOnly as AuthReadOnlyData } from "coral-admin/__generated__/SSOConfigContainer_authReadOnly.graphql";
-import { withFragmentContainer } from "coral-framework/lib/relay";

 import { OnInitValuesFct } from "./AuthConfigContainer";
 import SSOConfig from "./SSOConfig";
@@ -1,13 +1,14 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { SSOKeyFieldContainer_sso as SSOData } from "coral-admin/__generated__/SSOKeyFieldContainer_sso.graphql";
 import {
  MutationProp,
  withFragmentContainer,
  withMutation,
 } from "coral-framework/lib/relay";

+import { SSOKeyFieldContainer_sso as SSOData } from "coral-admin/__generated__/SSOKeyFieldContainer_sso.graphql";
+
 import RegenerateSSOKeyMutation from "./RegenerateSSOKeyMutation";
 import SSOKeyField from "./SSOKeyField";

@@ -1,8 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { SessionConfigContainer_auth as AuthData } from "coral-admin/__generated__/SessionConfigContainer_auth.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
+
+import { SessionConfigContainer_auth as AuthData } from "coral-admin/__generated__/SessionConfigContainer_auth.graphql";
+
 import { OnInitValuesFct } from "./AuthConfigContainer";
 import SessionConfig from "./SessionConfig";

@@ -1,8 +1,8 @@
-import { parseBool } from "coral-framework/lib/form";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

+import { parseBool } from "coral-framework/lib/form";
 import { CheckBox, Flex, FormField, InputLabel } from "coral-ui/components";

 interface Props {
@@ -5,7 +5,6 @@ import React from "react";
 import { Field } from "react-final-form";
 import { graphql } from "react-relay";

-import { EmailConfigContainer_email } from "coral-admin/__generated__/EmailConfigContainer_email.graphql";
 import { DeepNullable, DeepPartial } from "coral-common/types";
 import { pureMerge } from "coral-common/utils";
 import { parseBool } from "coral-framework/lib/form";
@@ -18,6 +17,8 @@ import {
  HorizontalGutter,
 } from "coral-ui/components";

+import { EmailConfigContainer_email } from "coral-admin/__generated__/EmailConfigContainer_email.graphql";
+
 import Header from "../../Header";
 import SectionContent from "../../SectionContent";
 import FromContainer from "./FromContainer";
@@ -2,10 +2,11 @@ import { FormApi } from "final-form";
 import React from "react";
 import { graphql } from "react-relay";

-import { EmailConfigRouteQueryResponse } from "coral-admin/__generated__/EmailConfigRouteQuery.graphql";
 import { withRouteConfig } from "coral-framework/lib/router";
 import { Delay, Spinner } from "coral-ui/components";

+import { EmailConfigRouteQueryResponse } from "coral-admin/__generated__/EmailConfigRouteQuery.graphql";
+
 import EmailConfigContainer from "./EmailConfigContainer";

 interface Props {
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { FromContainer_email } from "coral-admin/__generated__/FromContainer_email.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { FromContainer_email } from "coral-admin/__generated__/FromContainer_email.graphql";
+
 import { OnInitValuesFct } from "./EmailConfigContainer";
 import From from "./From";

@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { SMTPContainer_email } from "coral-admin/__generated__/SMTPContainer_email.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { SMTPContainer_email } from "coral-admin/__generated__/SMTPContainer_email.graphql";
+
 import { OnInitValuesFct } from "./EmailConfigContainer";
 import SMTP from "./SMTP";

@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { ClosedStreamMessageConfigContainer_settings as SettingsData } from "coral-admin/__generated__/ClosedStreamMessageConfigContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { ClosedStreamMessageConfigContainer_settings as SettingsData } from "coral-admin/__generated__/ClosedStreamMessageConfigContainer_settings.graphql";
+
 import ClosedStreamMessageConfig from "./ClosedStreamMessageConfig";

 interface Props {
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { ClosingCommentStreamsConfigContainer_settings as SettingsData } from "coral-admin/__generated__/ClosingCommentStreamsConfigContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { ClosingCommentStreamsConfigContainer_settings as SettingsData } from "coral-admin/__generated__/ClosingCommentStreamsConfigContainer_settings.graphql";
+
 import ClosingCommentStreamsConfig from "./ClosingCommentStreamsConfig";

 interface Props {
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { CommentEditingConfigContainer_settings as SettingsData } from "coral-admin/__generated__/CommentEditingConfigContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { CommentEditingConfigContainer_settings as SettingsData } from "coral-admin/__generated__/CommentEditingConfigContainer_settings.graphql";
+
 import CommentEditingConfig from "./CommentEditingConfig";

 interface Props {
@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

+import { formatEmpty, parseEmptyAsNull } from "coral-framework/lib/form";
 import {
  composeValidators,
  createValidator,
@@ -18,8 +19,6 @@ import {

 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
-
-import { formatEmpty, parseEmptyAsNull } from "coral-framework/lib/form";
 import SectionContent from "../../SectionContent";
 import ValidationMessage from "../../ValidationMessage";

@@ -30,7 +29,7 @@ const validateMaxLongerThanMin = createValidator(
    v === null ||
    values.charCount.min === null ||
    parseInt(v, 10) > parseInt(values.charCount.min, 10),
-  // tslint:disable-next-line:jsx-wrap-multiline
+  // eslint-disable-next-line:jsx-wrap-multiline
  <Localized id="configure-general-commentLength-validateLongerThanMin">
    <span>Please enter a number longer than the minimum length</span>
  </Localized>
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";

-import { CommentLengthConfigContainer_settings as SettingsData } from "coral-admin/__generated__/CommentLengthConfigContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { CommentLengthConfigContainer_settings as SettingsData } from "coral-admin/__generated__/CommentLengthConfigContainer_settings.graphql";
+
 import CommentLengthConfig from "./CommentLengthConfig";

 interface Props {
@@ -3,10 +3,11 @@ import { RouteProps } from "found";
 import React from "react";
 import { graphql } from "react-relay";

-import { GeneralConfigContainer_settings as SettingsData } from "coral-admin/__generated__/GeneralConfigContainer_settings.graphql";
 import { pureMerge } from "coral-common/utils";
 import { withFragmentContainer } from "coral-framework/lib/relay";

+import { GeneralConfigContainer_settings as SettingsData } from "coral-admin/__generated__/GeneralConfigContainer_settings.graphql";
+
 import GeneralConfig from "./GeneralConfig";

 interface Props {
--- a/Show More
+++ b/Show More