From 4e4986fc03a67c0bd1cb2e00acb770b1f9a203a3 Mon Sep 17 00:00:00 2001
From: Vinh <vinh@vinh.tech>
Date: Tue, 24 Sep 2019 04:36:24 +0700
Subject: [PATCH] fix: some form fields are not nullable (#2577)

---
 package-lock.json                               |  4 ++--
 .../routes/Configure/UpdateSettingsMutation.ts  |  3 +++
 .../sections/Advanced/StoryCreationConfig.tsx   |  8 ++++++--
 .../Configure/sections/Auth/ClientIDField.tsx   |  5 ++---
 .../sections/Auth/ClientSecretField.tsx         |  5 ++---
 .../Configure/sections/Auth/OIDCConfig.tsx      | 17 ++++++++++-------
 .../routes/Configure/sections/Email/From.tsx    | 14 +++++++++++---
 .../routes/Configure/sections/Email/SMTP.tsx    |  8 +++++++-
 .../General/ClosedStreamMessageConfig.tsx       |  3 ++-
 .../sections/General/GuidelinesConfig.tsx       |  3 ++-
 .../General/SitewideCommentingConfig.tsx        |  3 ++-
 .../sections/Moderation/APIKeyField.tsx         |  5 ++---
 .../sections/Moderation/AkismetConfig.tsx       |  3 ++-
 .../sections/Moderation/PerspectiveConfig.tsx   |  9 +++++++--
 .../Moderation/RecentCommentHistoryConfig.tsx   |  2 +-
 src/core/client/admin/test/fixtures.ts          |  1 +
 .../MessageBoxConfig/MessageBoxConfig.tsx       |  2 +-
 17 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a3e11ec01..67aaa3846 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21061,7 +21061,7 @@
       "dependencies": {
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -24246,7 +24246,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
           "dev": true
         }
diff --git a/src/core/client/admin/routes/Configure/UpdateSettingsMutation.ts b/src/core/client/admin/routes/Configure/UpdateSettingsMutation.ts
index 026f6e774..96b880069 100644
--- a/src/core/client/admin/routes/Configure/UpdateSettingsMutation.ts
+++ b/src/core/client/admin/routes/Configure/UpdateSettingsMutation.ts
@@ -21,6 +21,9 @@ const UpdateSettingsMutation = createMutation(
               auth {
                 ...AuthConfigContainer_auth
               }
+              email {
+                ...EmailConfigContainer_email
+              }
               ...ModerationConfigContainer_settings
               ...GeneralConfigContainer_settings
               ...OrganizationConfigContainer_settings
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/StoryCreationConfig.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/StoryCreationConfig.tsx
index ad72ad9ec..948958df5 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/StoryCreationConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/StoryCreationConfig.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { ValidationMessage } from "coral-framework/lib/form";
+import { parseEmptyAsNull, ValidationMessage } from "coral-framework/lib/form";
 import { ExternalLink } from "coral-framework/lib/i18n/components";
 import { validateURL } from "coral-framework/lib/validation";
 import {
@@ -72,7 +72,11 @@ const StoryCreationConfig: FunctionComponent<Props> = ({ disabled }) => (
               proxy as parsed by the npm proxy-agent package.
             </Typography>
           </Localized>
-          <Field name="stories.scraping.proxyURL" validate={validateURL}>
+          <Field
+            name="stories.scraping.proxyURL"
+            parse={parseEmptyAsNull}
+            validate={validateURL}
+          >
             {({ input, meta }) => (
               <>
                 <TextField
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx
index ba2531fd8..7fbc5b8c2 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx
@@ -1,9 +1,8 @@
 import { Localized } from "fluent-react/compat";
-import { identity } from "lodash";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { colorFromMeta } from "coral-framework/lib/form";
+import { colorFromMeta, parseEmptyAsNull } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
 import { FormField, InputLabel, TextField } from "coral-ui/components";
 
@@ -24,7 +23,7 @@ const ClientSecretField: FunctionComponent<Props> = ({
     <Localized id="configure-auth-clientID">
       <InputLabel>Client ID</InputLabel>
     </Localized>
-    <Field name={name} parse={identity} validate={validate}>
+    <Field name={name} parse={parseEmptyAsNull} validate={validate}>
       {({ input, meta }) => (
         <>
           <TextField
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
index f4bb68c99..4171554ef 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
@@ -1,9 +1,8 @@
 import { Localized } from "fluent-react/compat";
-import { identity } from "lodash";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { ValidationMessage } from "coral-framework/lib/form";
+import { parseEmptyAsNull, ValidationMessage } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
 import { FormField, InputLabel, PasswordField } from "coral-ui/components";
 
@@ -25,7 +24,7 @@ const ClientSecretField: FunctionComponent<Props> = ({
     <Field
       name={name}
       key={(disabled && "on") || "off"}
-      parse={identity}
+      parse={parseEmptyAsNull}
       validate={validate}
     >
       {({ input, meta }) => (
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
index a25463e8f..ef3601de3 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
@@ -1,9 +1,12 @@
 import { Localized } from "fluent-react/compat";
-import { identity } from "lodash";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
+import {
+  colorFromMeta,
+  parseEmptyAsNull,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import {
   composeValidatorsWhen,
   Condition,
@@ -86,7 +89,7 @@ const OIDCConfig: FunctionComponent<Props> = ({
             <Field
               name="auth.integrations.oidc.name"
               validate={composeValidatorsWhen(isEnabled, required)}
-              parse={identity}
+              parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
                 <>
@@ -129,7 +132,7 @@ const OIDCConfig: FunctionComponent<Props> = ({
             <Field
               name="auth.integrations.oidc.issuer"
               validate={composeValidatorsWhen(isEnabled, required, validateURL)}
-              parse={identity}
+              parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
                 <>
@@ -167,7 +170,7 @@ const OIDCConfig: FunctionComponent<Props> = ({
             <Field
               name="auth.integrations.oidc.authorizationURL"
               validate={composeValidatorsWhen(isEnabled, required, validateURL)}
-              parse={identity}
+              parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
                 <>
@@ -193,7 +196,7 @@ const OIDCConfig: FunctionComponent<Props> = ({
             <Field
               name="auth.integrations.oidc.tokenURL"
               validate={composeValidatorsWhen(isEnabled, required, validateURL)}
-              parse={identity}
+              parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
                 <>
@@ -219,7 +222,7 @@ const OIDCConfig: FunctionComponent<Props> = ({
             <Field
               name="auth.integrations.oidc.jwksURI"
               validate={composeValidatorsWhen(isEnabled, required, validateURL)}
-              parse={identity}
+              parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
                 <>
diff --git a/src/core/client/admin/routes/Configure/sections/Email/From.tsx b/src/core/client/admin/routes/Configure/sections/Email/From.tsx
index 0f58e99b0..29306270e 100644
--- a/src/core/client/admin/routes/Configure/sections/Email/From.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Email/From.tsx
@@ -2,7 +2,11 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
+import {
+  colorFromMeta,
+  parseEmptyAsNull,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import { validateEmail } from "coral-framework/lib/validation";
 import {
   FieldSet,
@@ -28,7 +32,7 @@ const From: FunctionComponent<Props> = ({ disabled }) => (
           Name as it will appear on all outgoing emails
         </InputDescription>
       </Localized>
-      <Field name="email.fromName">
+      <Field name="email.fromName" parse={parseEmptyAsNull}>
         {({ input, meta }) => (
           <>
             <TextField
@@ -51,7 +55,11 @@ const From: FunctionComponent<Props> = ({ disabled }) => (
           Email address that will be used to send messages
         </InputDescription>
       </Localized>
-      <Field name="email.fromEmail" validate={validateEmail}>
+      <Field
+        name="email.fromEmail"
+        parse={parseEmptyAsNull}
+        validate={validateEmail}
+      >
         {({ input, meta }) => (
           <>
             <TextField
diff --git a/src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx b/src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx
index 03a8aff72..73943ae40 100644
--- a/src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx
@@ -2,7 +2,11 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
+import {
+  colorFromMeta,
+  parseEmptyAsNull,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import {
   composeValidatorsWhen,
   Condition,
@@ -117,6 +121,7 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
             </Localized>
             <Field
               name="email.smtp.username"
+              parse={parseEmptyAsNull}
               validate={composeValidatorsWhen(isAuthenticating, required)}
             >
               {({ input, meta }) => (
@@ -139,6 +144,7 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
             </Localized>
             <Field
               name="email.smtp.password"
+              parse={parseEmptyAsNull}
               validate={composeValidatorsWhen(isAuthenticating, required)}
             >
               {({ input, meta }) => (
diff --git a/src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx
index 31766f209..2c5673ba7 100644
--- a/src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx
@@ -3,6 +3,7 @@ import React, { FunctionComponent, Suspense } from "react";
 import { Field } from "react-final-form";
 
 import { MarkdownEditor } from "coral-framework/components/loadables";
+import { parseEmptyAsNull } from "coral-framework/lib/form";
 import { HorizontalGutter, Spinner, Typography } from "coral-ui/components";
 
 import Header from "../../Header";
@@ -34,7 +35,7 @@ const ClosedStreamMessageConfig: FunctionComponent<Props> = ({ disabled }) => (
           Write a message to appear after a story is closed for commenting.
         </Typography>
       </Localized>
-      <Field name="closeCommenting.message">
+      <Field name="closeCommenting.message" parse={parseEmptyAsNull}>
         {({ input, meta }) => (
           <>
             <Suspense fallback={<Spinner />}>
diff --git a/src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx
index aa86ef465..9bcb512a5 100644
--- a/src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx
@@ -3,6 +3,7 @@ import React, { FunctionComponent, Suspense } from "react";
 import { Field } from "react-final-form";
 
 import { MarkdownEditor } from "coral-framework/components/loadables";
+import { parseEmptyAsNull } from "coral-framework/lib/form";
 import { ExternalLink } from "coral-framework/lib/i18n/components";
 import {
   FieldSet,
@@ -57,7 +58,7 @@ const GuidelinesConfig: FunctionComponent<Props> = ({ disabled }) => (
         </Localized>
       </FormField>
 
-      <Field name="communityGuidelines.content">
+      <Field name="communityGuidelines.content" parse={parseEmptyAsNull}>
         {({ input, meta }) => (
           <>
             <Suspense fallback={<Spinner />}>
diff --git a/src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx
index 459f93640..99399a7fb 100644
--- a/src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx
@@ -3,6 +3,7 @@ import React, { FunctionComponent, Suspense } from "react";
 import { Field } from "react-final-form";
 
 import { MarkdownEditor } from "coral-framework/components/loadables";
+import { parseEmptyAsNull } from "coral-framework/lib/form";
 import {
   FormField,
   HorizontalGutter,
@@ -73,7 +74,7 @@ const SitewideCommentingConfig: FunctionComponent<Props> = ({ disabled }) => (
         </Localized>
       </FormField>
 
-      <Field name="disableCommenting.message">
+      <Field name="disableCommenting.message" parse={parseEmptyAsNull}>
         {({ input, meta }) => (
           <>
             <Suspense fallback={<Spinner />}>
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
index 50dbe40c5..f2be8b3be 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
@@ -1,9 +1,8 @@
 import { Localized } from "fluent-react/compat";
-import { identity } from "lodash";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { colorFromMeta } from "coral-framework/lib/form";
+import { colorFromMeta, parseEmptyAsNull } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
 import { FormField, InputLabel, PasswordField } from "coral-ui/components";
 
@@ -21,7 +20,7 @@ const APIKeyField: FunctionComponent<Props> = ({
   validate,
 }) => (
   <FormField>
-    <Field name={name} parse={identity} validate={validate}>
+    <Field name={name} parse={parseEmptyAsNull} validate={validate}>
       {({ input, meta }) => (
         <>
           <Localized id="configure-moderation-apiKey">
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx
index 9767d162f..b274d1ee3 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { colorFromMeta } from "coral-framework/lib/form";
+import { colorFromMeta, parseEmptyAsNull } from "coral-framework/lib/form";
 import { ExternalLink } from "coral-framework/lib/i18n/components";
 import {
   Condition,
@@ -90,6 +90,7 @@ const AkismetConfig: FunctionComponent<Props> = ({ disabled }) => {
           </Localized>
           <Field
             name="integrations.akismet.site"
+            parse={parseEmptyAsNull}
             validate={validateWhen(isEnabled, required)}
           >
             {({ input, meta }) => (
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
index 7ae15ddf4..b5fece1fa 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
@@ -7,7 +7,11 @@ import {
   TOXICITY_MODEL_DEFAULT,
   TOXICITY_THRESHOLD_DEFAULT,
 } from "coral-common/constants";
-import { formatPercentage, parsePercentage } from "coral-framework/lib/form";
+import {
+  formatPercentage,
+  parseEmptyAsNull,
+  parsePercentage,
+} from "coral-framework/lib/form";
 import { ExternalLink } from "coral-framework/lib/i18n/components";
 import {
   Condition,
@@ -144,7 +148,7 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
               find out more about model choices here.
             </InputDescription>
           </Localized>
-          <Field name="integrations.perspective.model">
+          <Field name="integrations.perspective.model" parse={parseEmptyAsNull}>
             {({ input, meta }) => (
               <>
                 <TextField
@@ -219,6 +223,7 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
           </Localized>
           <Field
             name="integrations.perspective.endpoint"
+            parse={parseEmptyAsNull}
             validate={validateURL}
           >
             {({ input, meta }) => (
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
index b616b9ef9..4767baf89 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
@@ -106,7 +106,7 @@ const RecentCommentHistoryConfig: FunctionComponent<Props> = ({ disabled }) => {
             name="recentCommentHistory.triggerRejectionRate"
             parse={parsePercentage}
             format={formatPercentage}
-            validate={validatePercentage(0, 1)}
+            validate={composeValidators(required, validatePercentage(0, 1))}
           >
             {({ input, meta }) => (
               <>
diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts
index 04b8e401b..8d70943d3 100644
--- a/src/core/client/admin/test/fixtures.ts
+++ b/src/core/client/admin/test/fixtures.ts
@@ -58,6 +58,7 @@ export const settings = createFixture<GQLSettings>({
   },
   email: {
     enabled: true,
+    smtp: {},
   },
   customCSSURL: "",
   allowedDomains: ["http://localhost:8080"],
diff --git a/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx b/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx
index 9c5e50cd5..c616b2cec 100644
--- a/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx
+++ b/src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx
@@ -62,7 +62,7 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
               format={formatEmpty}
             >
               {({ input: iconInput }) => (
-                <Field name="messageBox.content">
+                <Field name="messageBox.content" parse={parseEmptyAsNull}>
                   {({ input: contentInput, meta }) => (
                     <>
                       <HorizontalGutter size="half" container="section">