[next] Bugfixes (#2272)

* feat: suspending, banning, now propogation

* feat: new mutation api with hooks support

* [CORL-343] Center Spinner in Stream

* [CORL-344] Fix moderation card styling

* [CORL-338] Fix permalink reply bug

* [CORL-337] Fix community guidelines box width

* [CORL-341] Toggle reply form view when clicking on reply

* test: add tests

* [CORL-333] Fix bug: removing message box icon; [CORL-336] Fix bug: allow resetting custom css

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

@@ -46,7 +46,7 @@ const BanUserMutation = createMutation(
               current: lookup<GQLUser>(
                 environment,
                 input.userID
-              )!.status!.current!.concat([GQLUSER_STATUS.BANNED]),
+              )!.status.current.concat([GQLUSER_STATUS.BANNED]),
               ban: {
                 active: true,
               },

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

@@ -46,7 +46,7 @@ const RemoveUserBanMutation = createMutation(
               current: lookup<GQLUser>(
                 environment,
                 input.userID
-              )!.status!.current!.filter(s => s !== GQLUSER_STATUS.BANNED),
+              )!.status.current.filter(s => s !== GQLUSER_STATUS.BANNED),
               ban: {
                 active: false,
               },

src/core/client/admin/routes/configure/sections/advanced/components/CustomCSSConfig.tsx

@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 import { Field } from "react-final-form";
 
+import { formatEmpty, parseEmptyAsNull } from "talk-framework/lib/form";
 import {
   FormField,
   HorizontalGutter,
@@ -33,7 +34,7 @@ const CustomCSSConfig: StatelessComponent<Props> = ({ disabled }) => (
           styles. Can be internal or external.
         </Typography>
       </Localized>
-      <Field name="customCSSURL">
+      <Field name="customCSSURL" parse={parseEmptyAsNull} format={formatEmpty}>
         {({ input, meta }) => (
           <>
             <TextField

src/core/client/admin/routes/moderate/components/CommentContent.css

@@ -1,4 +1,6 @@
 .root {
+  composes: root from "talk-stream/shared/htmlContent.css";
+
   mark {
     background-color: var(--palette-highlight);
     padding: 0 2px;

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

@@ -26,6 +26,8 @@ import {
   users,
 } from "../fixtures";
 
+const viewer = users.admins[0];
+
 beforeEach(async () => {
   replaceHistoryLocation("http://localhost/admin/community");
 });
@@ -43,7 +45,7 @@ const createTestRenderer = async (
             expectAndFail(variables.role).toBeFalsy();
             return communityUsers;
           },
-          viewer: () => users.admins[0],
+          viewer: () => viewer,
         },
       }),
       params.resolvers
@@ -113,7 +115,6 @@ it("filter by role", async () => {
 });
 
 it("can't change viewer role", async () => {
-  const viewer = users.admins[0];
   const { container } = await createTestRenderer();
 
   const viewerRow = within(container).getByText(viewer.username!, {
@@ -169,11 +170,11 @@ it("change user role", async () => {
 });
 
 it("can't change role as a moderator", async () => {
-  const viewer = users.moderators[0];
+  const moderator = users.moderators[0];
   const { container } = await createTestRenderer({
     resolvers: createResolversStub<GQLResolver>({
       Query: {
-        viewer: () => viewer,
+        viewer: () => moderator,
       },
     }),
   });
@@ -190,8 +191,8 @@ it("load more", async () => {
               return {
                 edges: [
                   {
-                    node: users.admins[0],
-                    cursor: users.admins[0].createdAt,
+                    node: viewer,
+                    cursor: viewer.createdAt,
                   },
                   {
                     node: users.commenters[0],

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

@@ -105,6 +105,43 @@ it("change custom css", async () => {
   expect(resolvers.Mutation!.updateSettings!.called).toBe(true);
 });
 
+it("remove custom css", async () => {
+  const resolvers = createResolversStub<GQLResolver>({
+    Query: {
+      settings: () =>
+        pureMerge<typeof settings>(settings, {
+          customCSSURL: "./custom.css",
+        }),
+    },
+    Mutation: {
+      updateSettings: ({ variables }) => {
+        expectAndFail(variables.settings.customCSSURL).toBeNull();
+        return {
+          settings: pureMerge(settings, variables.settings),
+        };
+      },
+    },
+  });
+  const { configureContainer, advancedContainer } = await createTestRenderer({
+    resolvers,
+  });
+
+  const customCSSField = within(advancedContainer).getByLabelText("Custom CSS");
+
+  // Let's change the customCSS field.
+  customCSSField.props.onChange("");
+
+  // Send form
+  within(configureContainer)
+    .getByType("form")
+    .props.onSubmit();
+
+  // Wait for submission to be finished
+  await wait(() => {
+    expect(resolvers.Mutation!.updateSettings!.called).toBe(true);
+  });
+});
+
 it("change permitted domains to be empty", async () => {
   const resolvers = createResolversStub<GQLResolver>({
     Mutation: {