Make DSA method of redress configurable

client/src/core/client/admin/routes/Configure/sections/General/DSAConfigContainer.tsx

@@ -2,8 +2,11 @@ import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
+import { withFragmentContainer } from "coral-framework/lib/relay";
 import { FieldSet, FormField, HelperText, Label } from "coral-ui/components/v2";
 
+import { DSAConfigContainer_settings } from "coral-admin/__generated__/DSAConfigContainer_settings.graphql";
+
 import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
@@ -14,16 +17,24 @@ graphql`
   fragment DSAConfigContainer_formValues on Settings {
     dsa {
       enabled
-      methodOfRedress
+      methodOfRedress {
+        method
+        url
+        email
+      }
     }
   }
 `;
 
 interface Props {
   disabled: boolean;
+  settings: DSAConfigContainer_settings;
 }
 
-export const DSAConfigContainer: FunctionComponent<Props> = ({ disabled }) => {
+export const DSAConfigContainer: FunctionComponent<Props> = ({
+  disabled,
+  settings,
+}) => {
   return (
     <ConfigBox
       data-testid="configure-general-dsaConfig"
@@ -52,10 +63,27 @@ export const DSAConfigContainer: FunctionComponent<Props> = ({ disabled }) => {
           </HelperText>
         </Localized>
         <DSAMethodOfRedressOptions
-          name="dsa.methodOfRedress"
           disabled={disabled}
+          defaultMethod={settings?.dsa?.methodOfRedress?.method ?? null}
         />
       </FormField>
     </ConfigBox>
   );
 };
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment DSAConfigContainer_settings on Settings {
+      dsa {
+        enabled
+        methodOfRedress {
+          method
+          url
+          email
+        }
+      }
+    }
+  `,
+})(DSAConfigContainer);
+
+export default enhanced;

client/src/core/client/admin/routes/Configure/sections/General/DSAMethodOfRedressOptions.css

@@ -0,0 +1,6 @@
+.textInput {
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
+  margin-left: var(--spacing-5);
+  margin-right: var(--spacing-6);
+}

client/src/core/client/admin/routes/Configure/sections/General/DSAMethodOfRedressOptions.tsx

@@ -1,13 +1,29 @@
 import { Localized } from "@fluent/react/compat";
-import React, { FunctionComponent } from "react";
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  useCallback,
+  useState,
+} from "react";
 import { Field } from "react-final-form";
 
-import { Validator } from "coral-framework/lib/validation";
+import { formatEmpty, parseEmptyAsNull } from "coral-framework/lib/form";
+import {
+  validateEmail,
+  validateURL,
+  Validator,
+} from "coral-framework/lib/validation";
 import { RadioButton } from "coral-ui/components/v2";
 
+import { DSA_METHOD_OF_REDRESS } from "coral-admin/__generated__/DSAConfigContainer_formValues.graphql";
+
+import TextFieldWithValidation from "../../TextFieldWithValidation";
+
+import styles from "./DSAMethodOfRedressOptions.css";
+
 interface Props {
+  defaultMethod: DSA_METHOD_OF_REDRESS | null;
   validate?: Validator;
-  name: string;
   disabled: boolean;
   format?: (value: any, name: string) => any;
   testIDs?: {
@@ -18,83 +34,169 @@ interface Props {
 }
 
 export enum DSAMethodOfRedress {
-  None = "NONE",
-  Email = "EMAIL",
+  NONE = "NONE",
+  EMAIL = "EMAIL",
   URL = "URL",
 }
 
 export const parseVal = (v: any, name: string) => {
-  if (v === DSAMethodOfRedress.None) {
-    return DSAMethodOfRedress.None;
+  if (v === DSAMethodOfRedress.NONE) {
+    return DSAMethodOfRedress.NONE;
   }
-  if (v === DSAMethodOfRedress.Email) {
-    return DSAMethodOfRedress.Email;
+  if (v === DSAMethodOfRedress.EMAIL) {
+    return DSAMethodOfRedress.EMAIL;
   }
   if (v === DSAMethodOfRedress.URL) {
     return DSAMethodOfRedress.URL;
   }
 
-  return DSAMethodOfRedress.None;
+  return DSAMethodOfRedress.NONE;
 };
 
 export const format = (v: string, name: string) => {
   return v;
 };
 
 const DSAMethodOfRedressOptions: FunctionComponent<Props> = ({
-  name,
+  defaultMethod,
   disabled,
   className,
-}) => (
-  <div className={className}>
-    <Field
-      name={name}
-      type="radio"
-      value={DSAMethodOfRedress.None}
-      parse={parseVal}
-      format={format}
-    >
-      {({ input }) => (
-        <RadioButton {...input} id={`${input.name}-none`} disabled={disabled}>
-          <Localized id="configure-general-dsaConfig-methodOfRedress-none">
-            <span>None</span>
-          </Localized>
-        </RadioButton>
-      )}
-    </Field>
-    <Field
-      name={name}
-      type="radio"
-      value={DSAMethodOfRedress.Email}
-      parse={parseVal}
-      format={format}
-    >
-      {({ input }) => (
-        <RadioButton {...input} id={`${input.name}-email`} disabled={disabled}>
-          <Localized id="configure-general-dsaConfig-methodOfRedress-email">
-            <span>Email</span>
-          </Localized>
-        </RadioButton>
-      )}
-    </Field>
-    <Field
-      name={name}
-      type="radio"
-      parse={parseVal}
-      value={DSAMethodOfRedress.URL}
-      format={format}
-    >
-      {({ input }) => {
-        return (
-          <RadioButton {...input} id={`${input.name}-url`} disabled={disabled}>
-            <Localized id="configure-general-dsaConfig-methodOfRedress-url">
-              <span>URL</span>
+}) => {
+  const [mode, setMode] = useState<DSA_METHOD_OF_REDRESS | null>(defaultMethod);
+
+  const onChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
+    if (ev.target?.value === DSAMethodOfRedress.EMAIL) {
+      setMode(DSAMethodOfRedress.EMAIL);
+    } else if (ev.target?.value === DSAMethodOfRedress.URL) {
+      setMode(DSAMethodOfRedress.URL);
+    } else {
+      setMode(null);
+    }
+  }, []);
+
+  return (
+    <div className={className}>
+      <Field
+        name={"dsa.methodOfRedress.method"}
+        type="radio"
+        value={DSAMethodOfRedress.NONE}
+        parse={parseVal}
+        format={format}
+      >
+        {({ input }) => (
+          <RadioButton
+            {...input}
+            id={`${input.name}-none`}
+            disabled={disabled}
+            onChange={(ev) => {
+              input.onChange(ev);
+              onChange(ev);
+            }}
+          >
+            <Localized id="configure-general-dsaConfig-methodOfRedress-none">
+              <span>None</span>
+            </Localized>
+          </RadioButton>
+        )}
+      </Field>
+      <Field
+        name={"dsa.methodOfRedress.method"}
+        type="radio"
+        value={DSAMethodOfRedress.EMAIL}
+        parse={parseVal}
+        format={format}
+      >
+        {({ input }) => (
+          <RadioButton
+            {...input}
+            id={`${input.name}-email`}
+            disabled={disabled}
+            onChange={(ev) => {
+              input.onChange(ev);
+              onChange(ev);
+            }}
+          >
+            <Localized id="configure-general-dsaConfig-methodOfRedress-email">
+              <span>Email</span>
             </Localized>
           </RadioButton>
-        );
-      }}
-    </Field>
-  </div>
-);
+        )}
+      </Field>
+      {mode === DSAMethodOfRedress.EMAIL && (
+        <Field
+          name="dsa.methodOfRedress.email"
+          parse={parseEmptyAsNull}
+          format={formatEmpty}
+          validate={validateEmail}
+        >
+          {({ input, meta }) => (
+            <div className={styles.textInput}>
+              <TextFieldWithValidation
+                {...input}
+                id={`configure-advanced-${input.name}`}
+                disabled={disabled}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck={false}
+                fullWidth
+                meta={meta}
+              />
+            </div>
+          )}
+        </Field>
+      )}
+      <Field
+        name={"dsa.methodOfRedress.method"}
+        type="radio"
+        parse={parseVal}
+        value={DSAMethodOfRedress.URL}
+        format={format}
+      >
+        {({ input }) => {
+          return (
+            <RadioButton
+              {...input}
+              id={`${input.name}-url`}
+              disabled={disabled}
+              onChange={(ev) => {
+                input.onChange(ev);
+                onChange(ev);
+              }}
+            >
+              <Localized id="configure-general-dsaConfig-methodOfRedress-url">
+                <span>URL</span>
+              </Localized>
+            </RadioButton>
+          );
+        }}
+      </Field>
+      {mode === DSAMethodOfRedress.URL && (
+        <Field
+          name="dsa.methodOfRedress.url"
+          parse={parseEmptyAsNull}
+          format={formatEmpty}
+          validate={validateURL}
+        >
+          {({ input, meta }) => (
+            <div className={styles.textInput}>
+              <TextFieldWithValidation
+                {...input}
+                id={`configure-advanced-${input.name}`}
+                disabled={disabled}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck={false}
+                fullWidth
+                meta={meta}
+              />
+            </div>
+          )}
+        </Field>
+      )}
+    </div>
+  );
+};
 
 export default DSAMethodOfRedressOptions;

client/src/core/client/admin/routes/Configure/sections/General/GeneralConfigContainer.tsx

@@ -10,7 +10,7 @@ import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { GeneralConfigContainer_settings as SettingsData } from "coral-admin/__generated__/GeneralConfigContainer_settings.graphql";
 
-import { DSAConfigContainer } from "../General/DSAConfigContainer";
+import DSAConfigContainer from "../General/DSAConfigContainer";
 import AnnouncementConfigContainer from "./AnnouncementConfigContainer";
 import BadgeConfig from "./BadgeConfig";
 import ClosedStreamMessageConfig from "./ClosedStreamMessageConfig";
@@ -48,7 +48,7 @@ const GeneralConfigContainer: React.FunctionComponent<Props> = ({
       className={styles.root}
     >
       <LocaleConfig disabled={submitting} />
-      <DSAConfigContainer disabled={submitting} />
+      <DSAConfigContainer disabled={submitting} settings={settings} />
       <FlattenRepliesConfig disabled={submitting} />
       <SitewideCommentingConfig disabled={submitting} />
       <AnnouncementConfigContainer disabled={submitting} settings={settings} />
@@ -75,6 +75,7 @@ const enhanced = withFragmentContainer<Props>({
       ...FlattenRepliesConfig_formValues @relay(mask: false)
       ...LocaleConfig_formValues @relay(mask: false)
       ...DSAConfigContainer_formValues @relay(mask: false)
+      ...DSAConfigContainer_settings
       ...GuidelinesConfig_formValues @relay(mask: false)
       ...CommentLengthConfig_formValues @relay(mask: false)
       ...CommentEditingConfig_formValues @relay(mask: false)

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

@@ -236,7 +236,9 @@ export const settings = createFixture<GQLSettings>({
   },
   dsa: {
     enabled: false,
-    methodOfRedress: GQLDSA_METHOD_OF_REDRESS.NONE,
+    methodOfRedress: {
+      method: GQLDSA_METHOD_OF_REDRESS.NONE,
+    },
   },
 });
 

client/src/core/client/stream/tabs/Notifications/NotificationsContainer.css

@@ -5,7 +5,25 @@
 .title {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-primary-semi-bold);
-  font-size: var(--font-size-3);
+  font-size: var(--font-size-4);
 
   word-break: break-word;
+
+  margin-bottom: var(--spacing-2);
+}
+
+.methodOfRedress {
+  padding-left: var(--spacing-4);
+  padding-right: var(--spacing-4);
+  padding-top: var(--spacing-2);
+  padding-bottom: var(--spacing-2);
+
+  background-color: var(--palette-primary-100);
+
+  font-family: var(--font-family-primary);
+  color: var(--palette-text-200);
+  font-weight: var(--font-weight-primary-regular);
+  font-size: var(--font-size-3);
+
+  margin-bottom: var(--spacing-2);
 }