[CORL-156] Manage user suspension status (#2419)

* wire up suspension modal

* show user suspended callout on stream

* prevent comment actions for suspended users

* set default to 3 hour suspension

* add message field to suspension

* allow custom message for suspension

* show suspend success modal

* fix type errors

* remove unused code

* update styles

* fix fixture for streams

* add suspension ui tests

* fix types

* remove warnings?

* remove snapshot

* fix merge conflicts

* allow custom email message when banning users

* fix typo

* correct message type

* use final-form in suspend modal

* refactor suspend modal to use final-form

* refactor ban modal to use final-form

* refactor userStatusChangeContainer to use useCallback

* feat: improve translated form

* fix: addressed issue caused by i18n refactor

* update getMessage to accept arguments, remove format method

* translate suspend info

* change hour format

* make message a mandatory input for suspend and ban user

* fix types in user table

* Revert "fix types in user table"

This reverts commit d396e90b88bb1bd354c5cdbdd72b6d8f1ab72929.

* fix types for user table

* fix: small review tweaks

src/core/client/stream/test/comments/stream/suspended.spec.tsx

@@ -0,0 +1,105 @@
+import timekeeper from "timekeeper";
+
+import { pureMerge } from "coral-common/utils";
+import { GQLResolver, GQLUSER_STATUS } from "coral-framework/schema";
+import {
+  createResolversStub,
+  CreateTestRendererParams,
+  waitForElement,
+  within,
+} from "coral-framework/testHelpers";
+
+import { comments, settings, stories } from "../../fixtures";
+import create from "./create";
+
+const story = stories[0];
+const firstComment = story.comments.edges[0].node;
+const viewer = firstComment.author!;
+
+async function createTestRenderer(
+  params: CreateTestRendererParams<GQLResolver> = {}
+) {
+  const { testRenderer, context } = create({
+    ...params,
+    resolvers: pureMerge(
+      createResolversStub<GQLResolver>({
+        Query: {
+          settings: () => settings,
+          viewer: () =>
+            pureMerge<typeof viewer>(viewer, {
+              status: {
+                current: [GQLUSER_STATUS.SUSPENDED],
+                suspension: {
+                  until: new Date(Date.now() + 600000).toISOString(),
+                },
+              },
+            }),
+          story: () =>
+            pureMerge<typeof story>(story, {
+              comments: {
+                edges: [
+                  ...story.comments.edges,
+                  {
+                    node: pureMerge<typeof comments[2]>(comments[2], {
+                      actionCounts: { reaction: { total: 1 } },
+                    }),
+                    cursor: comments[2].createdAt,
+                  },
+                ],
+              },
+            }),
+        },
+      }),
+      params.resolvers
+    ),
+    initLocalState: (localRecord, source, environment) => {
+      localRecord.setValue(story.id, "storyID");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+
+  const tabPane = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("current-tab-pane")
+  );
+
+  return {
+    testRenderer,
+    context,
+    tabPane,
+  };
+}
+
+afterAll(() => {
+  timekeeper.reset();
+});
+
+it("disables comment stream", async () => {
+  timekeeper.freeze(firstComment.createdAt);
+  const { testRenderer, tabPane } = await createTestRenderer();
+  await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-allComments-log")
+  );
+  within(tabPane).getAllByText(
+    "Your account has been temporarily suspended from commenting.",
+    {
+      exact: false,
+    }
+  );
+  within(tabPane).getAllByText("In accordance with Acme Co", {
+    exact: false,
+  });
+  expect(
+    within(tabPane).queryByText("Reply", { selector: "button" })
+  ).toBeNull();
+  expect(
+    within(tabPane).queryByText("Report", { selector: "button" })
+  ).toBeNull();
+  expect(
+    within(tabPane).queryByText("Edit", { selector: "button" })
+  ).toBeNull();
+  expect(
+    within(tabPane).getByText("Respect", { selector: "button" }).props.disabled
+  ).toBe(true);
+});

src/core/client/stream/test/fixtures.ts

@@ -40,6 +40,11 @@ export const settings = createFixture<GQLSettings>({
     message: "Story is closed",
     timeout: undefined,
   },
+  organization: {
+    name: "Acme Co",
+    contactEmail: "acme@acme.co",
+    url: "https://acme.co",
+  },
   auth: {
     integrations: {
       facebook: {
@@ -110,6 +115,9 @@ export const baseUser = createFixture<GQLUser>({
   createdAt: "2018-02-06T18:24:00.000Z",
   status: {
     current: [GQLUSER_STATUS.ACTIVE],
+    suspension: {
+      active: false,
+    },
   },
   ignoredUsers: [],
   comments: {