[CORL-276] Sitewide Pre-Moderation (#2392)

* feat: initial implementation

* chore: docs update

* fix: lint

* fix: naming

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

@@ -13,6 +13,8 @@ interface Props {
   invert?: boolean;
   onLabel?: React.ReactNode;
   offLabel?: React.ReactNode;
+  format?: ((value: any, name: string) => any) | null;
+  parse?: ((value: any, name: string) => any) | null;
 }
 
 const OnOffField: FunctionComponent<Props> = ({
@@ -21,9 +23,17 @@ const OnOffField: FunctionComponent<Props> = ({
   onLabel,
   offLabel,
   invert = false,
+  parse = parseStringBool,
+  format,
 }) => (
   <div>
-    <Field name={name} type="radio" parse={parseStringBool} value={!invert}>
+    <Field
+      name={name}
+      type="radio"
+      value={!invert}
+      parse={parse}
+      format={format}
+    >
       {({ input }) => (
         <RadioButton
           id={`${input.name}-true`}
@@ -43,7 +53,13 @@ const OnOffField: FunctionComponent<Props> = ({
         </RadioButton>
       )}
     </Field>
-    <Field name={name} type="radio" parse={parseStringBool} value={invert}>
+    <Field
+      name={name}
+      type="radio"
+      parse={parse}
+      format={format}
+      value={invert}
+    >
       {({ input }) => (
         <RadioButton
           id={`${input.name}-false`}

src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfig.tsx

@@ -5,11 +5,13 @@ import { HorizontalGutter } from "coral-ui/components";
 
 import AkismetConfigContainer from "./AkismetConfigContainer";
 import PerspectiveConfigContainer from "./PerspectiveConfigContainer";
+import PreModerationConfigContainer from "./PreModerationConfigContainer";
 
 interface Props {
   disabled: boolean;
   settings: PropTypesOf<typeof AkismetConfigContainer>["settings"] &
-    PropTypesOf<typeof PerspectiveConfigContainer>["settings"];
+    PropTypesOf<typeof PerspectiveConfigContainer>["settings"] &
+    PropTypesOf<typeof PreModerationConfigContainer>["settings"];
   onInitValues: (values: any) => void;
 }
 
@@ -19,6 +21,11 @@ const ModerationConfig: FunctionComponent<Props> = ({
   onInitValues,
 }) => (
   <HorizontalGutter size="double" data-testid="configure-moderationContainer">
+    <PreModerationConfigContainer
+      disabled={disabled}
+      settings={settings}
+      onInitValues={onInitValues}
+    />
     <PerspectiveConfigContainer
       disabled={disabled}
       settings={settings}

src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfigContainer.tsx

@@ -47,6 +47,7 @@ const enhanced = withFragmentContainer<Props>({
     fragment ModerationConfigContainer_settings on Settings {
       ...AkismetConfigContainer_settings
       ...PerspectiveConfigContainer_settings
+      ...PreModerationConfigContainer_settings
     }
   `,
 })(ModerationConfigContainer);

src/core/client/admin/routes/Configure/sections/Moderation/PreModerationConfig.tsx

@@ -0,0 +1,65 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+
+import { parseStringBool } from "coral-framework/lib/form";
+import {
+  FieldSet,
+  FormField,
+  HorizontalGutter,
+  InputLabel,
+  Typography,
+} from "coral-ui/components";
+
+import Header from "../../Header";
+import OnOffField from "../../OnOffField";
+
+interface Props {
+  disabled: boolean;
+}
+
+const parse = (v: string) => {
+  return parseStringBool(v) ? "PRE" : "POST";
+};
+
+const format = (v: "PRE" | "POST") => {
+  return v === "PRE";
+};
+
+const PreModerationConfig: FunctionComponent<Props> = ({ disabled }) => {
+  return (
+    <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
+      <Localized id="configure-moderation-preModeration-title">
+        <Header container="legend">Pre-moderation</Header>
+      </Localized>
+      <Localized id="configure-moderation-preModeration-explanation">
+        <Typography variant="detail">
+          When pre-moderation is turned on, comments will not be published
+          unless approved by a moderator.
+        </Typography>
+      </Localized>
+      <FormField container={<FieldSet />}>
+        <Localized id="configure-moderation-preModeration-moderation">
+          <InputLabel container="legend">
+            Pre-moderate all comments sitewide
+          </InputLabel>
+        </Localized>
+        <OnOffField
+          name="moderation"
+          disabled={disabled}
+          parse={parse}
+          format={format}
+        />
+      </FormField>
+      <FormField container={<FieldSet />}>
+        <Localized id="configure-moderation-preModeration-premodLinksEnable">
+          <InputLabel container="legend">
+            Pre-moderate comments containing links sitewide
+          </InputLabel>
+        </Localized>
+        <OnOffField name="premodLinksEnable" disabled={disabled} />
+      </FormField>
+    </HorizontalGutter>
+  );
+};
+
+export default PreModerationConfig;

src/core/client/admin/routes/Configure/sections/Moderation/PreModerationConfigContainer.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { PreModerationConfigContainer_settings as SettingsData } from "coral-admin/__generated__/PreModerationConfigContainer_settings.graphql";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+
+import PreModerationConfig from "./PreModerationConfig";
+
+interface Props {
+  settings: SettingsData;
+  onInitValues: (values: SettingsData) => void;
+  disabled: boolean;
+}
+
+class PreModerationConfigContainer extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    props.onInitValues(props.settings);
+  }
+
+  public render() {
+    const { disabled } = this.props;
+    return <PreModerationConfig disabled={disabled} />;
+  }
+}
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment PreModerationConfigContainer_settings on Settings {
+      moderation
+      premodLinksEnable
+    }
+  `,
+})(PreModerationConfigContainer);
+
+export default enhanced;

src/core/client/admin/routes/Configure/sections/Moderation/__snapshots__/ModerationConfig.spec.tsx.snap

@@ -5,6 +5,11 @@ exports[`renders correctly 1`] = `
   data-testid="configure-moderationContainer"
   size="double"
 >
+  <Relay(PreModerationConfigContainer)
+    disabled={false}
+    onInitValues={[Function]}
+    settings={Object {}}
+  />
   <Relay(PerspectiveConfigContainer)
     disabled={false}
     onInitValues={[Function]}