[CORL-943] Send test emails (#2882)

* add smtp test email

* disable button if email not enabled

* add error handling

* internationalize strings

* sort imports

src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx

@@ -1,25 +1,31 @@
 import { Localized } from "@fluent/react/compat";
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { useForm } from "react-final-form";
 import { graphql } from "react-relay";
 
+import { useNotification } from "coral-admin/App/GlobalNotification";
 import { DeepNullable } from "coral-common/types";
 import {
   purgeMetadata,
+  useMutation,
   withFragmentContainer,
 } from "coral-framework/lib/relay";
 import { GQLSettings } from "coral-framework/schema";
+import { AppNotification, Button, CallOut, Flex } from "coral-ui/components/v2";
 
 import { EmailConfigContainer_email } from "coral-admin/__generated__/EmailConfigContainer_email.graphql";
+import { EmailConfigContainer_viewer } from "coral-admin/__generated__/EmailConfigContainer_viewer.graphql";
 
 import Header from "../../Header";
 import ConfigBoxWithToggleField from "../Auth/ConfigBoxWithToggleField";
 import From from "./From";
 import SMTP from "./SMTP";
+import TestSMTPMutation from "./TestSMTPMutation";
 
 interface Props {
   submitting: boolean;
   email: EmailConfigContainer_email;
+  viewer: EmailConfigContainer_viewer | null;
 }
 
 export type FormProps = DeepNullable<Pick<GQLSettings, "email">>;
@@ -27,8 +33,34 @@ export type FormProps = DeepNullable<Pick<GQLSettings, "email">>;
 const EmailConfigContainer: React.FunctionComponent<Props> = ({
   email,
   submitting,
+  viewer,
 }) => {
   const form = useForm();
+  const [loading, setLoading] = useState(false);
+  const [submitError, setSubmitError] = useState<null | string>(null);
+  const { setMessage, clearMessage } = useNotification();
+  const sendTest = useMutation(TestSMTPMutation);
+  const sendTestEmail = useCallback(async () => {
+    if (!viewer) {
+      return;
+    }
+    setLoading(true);
+    setSubmitError(null);
+    try {
+      await sendTest();
+      setLoading(false);
+      setMessage(
+        <Localized id="configure-smtp-test-success" $email={viewer.email}>
+          <AppNotification icon="check_circle_outline" onClose={clearMessage}>
+            Test email has been sent to {viewer.email}
+          </AppNotification>
+        </Localized>,
+        3000
+      );
+    } catch (error) {
+      setSubmitError(error.message);
+    }
+  }, []);
   useMemo(() => {
     let values: any = { email };
     if (email && email.smtp && email.smtp.authentication === null) {
@@ -61,6 +93,21 @@ const EmailConfigContainer: React.FunctionComponent<Props> = ({
     >
       {disabledInside => (
         <>
+          <Flex justifyContent="flex-end">
+            <Localized id="configure-email-send-test">
+              <Button
+                disabled={disabledInside || loading || !email.enabled}
+                onClick={sendTestEmail}
+              >
+                Send test email
+              </Button>
+            </Localized>
+          </Flex>
+          {submitError && (
+            <CallOut fullWidth color="error">
+              {submitError}
+            </CallOut>
+          )}
           <From disabled={disabledInside} />
           <SMTP disabled={disabledInside} />
         </>
@@ -70,6 +117,11 @@ const EmailConfigContainer: React.FunctionComponent<Props> = ({
 };
 
 const enhanced = withFragmentContainer<Props>({
+  viewer: graphql`
+    fragment EmailConfigContainer_viewer on User {
+      email
+    }
+  `,
   email: graphql`
     fragment EmailConfigContainer_email on EmailConfiguration {
       enabled

src/core/client/admin/routes/Configure/sections/Email/EmailConfigRoute.tsx

@@ -26,6 +26,7 @@ class EmailConfigRoute extends React.Component<Props> {
       <EmailConfigContainer
         email={this.props.data.settings.email}
         submitting={this.props.submitting}
+        viewer={this.props.data.viewer}
       />
     );
   }
@@ -34,6 +35,9 @@ class EmailConfigRoute extends React.Component<Props> {
 const enhanced = withRouteConfig<Props>({
   query: graphql`
     query EmailConfigRouteQuery {
+      viewer {
+        ...EmailConfigContainer_viewer
+      }
       settings {
         email {
           ...EmailConfigContainer_email

src/core/client/admin/routes/Configure/sections/Email/TestSMTPMutation.ts

@@ -0,0 +1,34 @@
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+
+import { TestSMTPMutation as MutationTypes } from "coral-admin/__generated__/TestSMTPMutation.graphql";
+
+const clientMutationId = 0;
+
+const TestSMTPMutation = createMutation(
+  "testSMTP",
+  (environment: Environment, input: MutationInput<MutationTypes>) => {
+    return commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation TestSMTPMutation($input: TestSMTPInput!) {
+          testSMTP(input: $input) {
+            clientMutationId
+          }
+        }
+      `,
+      variables: {
+        input: {
+          clientMutationId: clientMutationId.toString(),
+        },
+      },
+    });
+  }
+);
+
+export default TestSMTPMutation;