From 2b2ff7b9c4d8ba24d7a623d8c0e84ed07fe9bdf9 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 12 Mar 2020 17:03:27 +0000
Subject: [PATCH] [CORL-965] Experimental Notice on Webhooks (#2880)

* fix: added experimental callout message to webhooks

* fix: copy/design review
---
 .../admin/components/ExperimentalCallOut.css  |  10 ++
 .../admin/components/ExperimentalCallOut.tsx  |  22 +++
 .../AddWebhookEndpointContainer.tsx           |   2 +
 .../ConfigureWebhookEndpointContainer.tsx     |   2 +
 .../ExperimentalWebhooksCallOut.tsx           |  23 +++
 .../WebhookEndpointsConfigContainer.tsx       |   6 +-
 .../__snapshots__/webhooks.spec.tsx.snap      | 152 +++++++++++++++++-
 src/locales/en-US/admin.ftl                   |   5 +
 8 files changed, 216 insertions(+), 6 deletions(-)
 create mode 100644 src/core/client/admin/components/ExperimentalCallOut.css
 create mode 100644 src/core/client/admin/components/ExperimentalCallOut.tsx
 create mode 100644 src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ExperimentalWebhooksCallOut.tsx

diff --git a/src/core/client/admin/components/ExperimentalCallOut.css b/src/core/client/admin/components/ExperimentalCallOut.css
new file mode 100644
index 000000000..35b82d4dd
--- /dev/null
+++ b/src/core/client/admin/components/ExperimentalCallOut.css
@@ -0,0 +1,10 @@
+.icon {
+  margin-right: var(--spacing-1);
+}
+
+.title {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 5px;
+}
+
diff --git a/src/core/client/admin/components/ExperimentalCallOut.tsx b/src/core/client/admin/components/ExperimentalCallOut.tsx
new file mode 100644
index 000000000..6eb0c41b7
--- /dev/null
+++ b/src/core/client/admin/components/ExperimentalCallOut.tsx
@@ -0,0 +1,22 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import { CallOut, Flex, Icon } from "coral-ui/components/v2";
+
+import styles from "./ExperimentalCallOut.css";
+
+const ExperimentalCallOut: FunctionComponent = ({ children }) => (
+  <CallOut color="primary" fullWidth>
+    <Flex>
+      <Icon size="md" className={styles.icon}>
+        new_releases
+      </Icon>
+      <Localized id="configure-experimentalFeature">
+        <span className={styles.title}>Experimental Feature</span>
+      </Localized>
+    </Flex>
+    <span>{children}</span>
+  </CallOut>
+);
+
+export default ExperimentalCallOut;
diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/AddWebhookEndpoint/AddWebhookEndpointContainer.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/AddWebhookEndpoint/AddWebhookEndpointContainer.tsx
index 199910dc2..db77234d0 100644
--- a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/AddWebhookEndpoint/AddWebhookEndpointContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/AddWebhookEndpoint/AddWebhookEndpointContainer.tsx
@@ -11,6 +11,7 @@ import { HorizontalGutter } from "coral-ui/components/v2";
 import { AddWebhookEndpointContainer_settings } from "coral-admin/__generated__/AddWebhookEndpointContainer_settings.graphql";
 
 import { ConfigureWebhookEndpointForm } from "../ConfigureWebhookEndpointForm";
+import ExperimentalWebhooksCallOut from "../ExperimentalWebhooksCallOut";
 
 interface Props {
   router: Router;
@@ -28,6 +29,7 @@ const AddWebhookEndpointContainer: FunctionComponent<Props> = ({
 
   return (
     <HorizontalGutter size="double">
+      <ExperimentalWebhooksCallOut />
       <ConfigBox
         title={
           <Localized id="configure-webhooks-addEndpoint">
diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/ConfigureWebhookEndpointContainer.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/ConfigureWebhookEndpointContainer.tsx
index b37fac7aa..2ab52ef1d 100644
--- a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/ConfigureWebhookEndpointContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/ConfigureWebhookEndpointContainer.tsx
@@ -9,6 +9,7 @@ import { HorizontalGutter } from "coral-ui/components/v2";
 import { ConfigureWebhookEndpointContainer_settings } from "coral-admin/__generated__/ConfigureWebhookEndpointContainer_settings.graphql";
 import { ConfigureWebhookEndpointContainer_webhookEndpoint } from "coral-admin/__generated__/ConfigureWebhookEndpointContainer_webhookEndpoint.graphql";
 
+import ExperimentalWebhooksCallOut from "../ExperimentalWebhooksCallOut";
 import EndpointDangerZone from "./EndpointDangerZone";
 import EndpointDetails from "./EndpointDetails";
 import EndpointStatus from "./EndpointStatus";
@@ -24,6 +25,7 @@ const ConfigureWebhookEndpointContainer: FunctionComponent<Props> = ({
 }) => {
   return (
     <HorizontalGutter size="double" data-testid="webhook-endpoint-container">
+      <ExperimentalWebhooksCallOut />
       <ConfigBox
         title={
           <Localized id="configure-webhooks-configureWebhookEndpoint">
diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ExperimentalWebhooksCallOut.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ExperimentalWebhooksCallOut.tsx
new file mode 100644
index 000000000..def0b5ce2
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ExperimentalWebhooksCallOut.tsx
@@ -0,0 +1,23 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import ExperimentalCallOut from "coral-admin/components/ExperimentalCallOut";
+import { ExternalLink } from "coral-framework/lib/i18n/components";
+
+const ExperimentalWebhooksCallOut: FunctionComponent = () => (
+  <Localized
+    id="configure-webhooks-experimentalFeature"
+    ContactUsLink={<ExternalLink href="https://coralproject.net/contact/" />}
+  >
+    <ExperimentalCallOut>
+      The webhook feature is currently in active development. Events may be
+      added or removed. Please{" "}
+      <ExternalLink href="https://coralproject.net/contact/">
+        contact us with any feedback or requests
+      </ExternalLink>
+      .
+    </ExperimentalCallOut>
+  </Localized>
+);
+
+export default ExperimentalWebhooksCallOut;
diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx
index 8b718dbc1..edcb111f8 100644
--- a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx
@@ -22,6 +22,7 @@ import { WebhookEndpointsConfigContainer_settings } from "coral-admin/__generate
 import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import Subheader from "../../Subheader";
+import ExperimentalWebhooksCallOut from "./ExperimentalWebhooksCallOut";
 import WebhookEndpointRow from "./WebhookEndpointRow";
 
 interface Props {
@@ -33,6 +34,7 @@ const WebhookEndpointsConfigContainer: FunctionComponent<Props> = ({
 }) => {
   return (
     <HorizontalGutter size="double" data-testid="webhooks-container">
+      <ExperimentalWebhooksCallOut />
       <ConfigBox
         title={
           <Localized id="configure-webhooks-header-title">
@@ -43,14 +45,14 @@ const WebhookEndpointsConfigContainer: FunctionComponent<Props> = ({
         <Localized
           id="configure-webhooks-description"
           externalLink={
-            <ExternalLink href="https://docs.coralproject.net/coral/v5/integrating/webhooks/" />
+            <ExternalLink href="https://github.com/coralproject/talk/blob/master/WEBHOOKS.md" />
           }
         >
           <FormFieldDescription>
             Configure an endpoint to send events to when events occur within
             Coral. These events will be JSON encoded and signed. To learn more
             about webhook signing, visit our{" "}
-            <ExternalLink href="https://docs.coralproject.net/coral/v5/integrating/webhooks/">
+            <ExternalLink href="https://github.com/coralproject/talk/blob/master/WEBHOOKS.md">
               our docs
             </ExternalLink>
             .
diff --git a/src/core/client/admin/test/configure/__snapshots__/webhooks.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/webhooks.spec.tsx.snap
index b1706d9b4..1363cf904 100644
--- a/src/core/client/admin/test/configure/__snapshots__/webhooks.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/webhooks.spec.tsx.snap
@@ -5,6 +5,42 @@ exports[`displays a list of webhook endpoints that have been configured 1`] = `
   className="Box-root HorizontalGutter-root HorizontalGutter-double"
   data-testid="webhooks-container"
 >
+  <div
+    className="CallOut-root CallOut-colorPrimary CallOut-fullWidth"
+  >
+    <div
+      className="CallOut-inner"
+    >
+      <div
+        className="Box-root Flex-root Flex-flex"
+      >
+        <i
+          aria-hidden="true"
+          className="Icon-root Icon-md ExperimentalCallOut-icon"
+        >
+          new_releases
+        </i>
+        <span
+          className="ExperimentalCallOut-title"
+        >
+          Experimental Feature
+        </span>
+      </div>
+      <span>
+        The webhook feature is currently in active development. Events may be
+added or removed. Please 
+        <a
+          className="ExternalLink-root"
+          href="https://coralproject.net/contact/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          contact us with any feedback or requests
+        </a>
+        .
+      </span>
+    </div>
+  </div>
   <div
     className="Box-root ConfigBox-root"
   >
@@ -35,7 +71,7 @@ Coral. These events will be JSON encoded and signed. To learn more
 about webhook signing, visit our 
           <a
             className="ExternalLink-root"
-            href="https://docs.coralproject.net/coral/v5/integrating/webhooks/"
+            href="https://github.com/coralproject/talk/blob/master/WEBHOOKS.md"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -206,6 +242,42 @@ exports[`goes to add new webhook endpoint when clicking add 1`] = `
   className="Box-root HorizontalGutter-root HorizontalGutter-double"
   data-testid="webhooks-container"
 >
+  <div
+    className="CallOut-root CallOut-colorPrimary CallOut-fullWidth"
+  >
+    <div
+      className="CallOut-inner"
+    >
+      <div
+        className="Box-root Flex-root Flex-flex"
+      >
+        <i
+          aria-hidden="true"
+          className="Icon-root Icon-md ExperimentalCallOut-icon"
+        >
+          new_releases
+        </i>
+        <span
+          className="ExperimentalCallOut-title"
+        >
+          Experimental Feature
+        </span>
+      </div>
+      <span>
+        The webhook feature is currently in active development. Events may be
+added or removed. Please 
+        <a
+          className="ExternalLink-root"
+          href="https://coralproject.net/contact/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          contact us with any feedback or requests
+        </a>
+        .
+      </span>
+    </div>
+  </div>
   <div
     className="Box-root ConfigBox-root"
   >
@@ -236,7 +308,7 @@ Coral. These events will be JSON encoded and signed. To learn more
 about webhook signing, visit our 
           <a
             className="ExternalLink-root"
-            href="https://docs.coralproject.net/coral/v5/integrating/webhooks/"
+            href="https://github.com/coralproject/talk/blob/master/WEBHOOKS.md"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -291,6 +363,42 @@ exports[`goes to the webhook endpoint configuration page when selected 1`] = `
   className="Box-root HorizontalGutter-root HorizontalGutter-double"
   data-testid="webhooks-container"
 >
+  <div
+    className="CallOut-root CallOut-colorPrimary CallOut-fullWidth"
+  >
+    <div
+      className="CallOut-inner"
+    >
+      <div
+        className="Box-root Flex-root Flex-flex"
+      >
+        <i
+          aria-hidden="true"
+          className="Icon-root Icon-md ExperimentalCallOut-icon"
+        >
+          new_releases
+        </i>
+        <span
+          className="ExperimentalCallOut-title"
+        >
+          Experimental Feature
+        </span>
+      </div>
+      <span>
+        The webhook feature is currently in active development. Events may be
+added or removed. Please 
+        <a
+          className="ExternalLink-root"
+          href="https://coralproject.net/contact/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          contact us with any feedback or requests
+        </a>
+        .
+      </span>
+    </div>
+  </div>
   <div
     className="Box-root ConfigBox-root"
   >
@@ -321,7 +429,7 @@ Coral. These events will be JSON encoded and signed. To learn more
 about webhook signing, visit our 
           <a
             className="ExternalLink-root"
-            href="https://docs.coralproject.net/coral/v5/integrating/webhooks/"
+            href="https://github.com/coralproject/talk/blob/master/WEBHOOKS.md"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -444,6 +552,42 @@ exports[`renders webhooks 1`] = `
   className="Box-root HorizontalGutter-root HorizontalGutter-double"
   data-testid="webhooks-container"
 >
+  <div
+    className="CallOut-root CallOut-colorPrimary CallOut-fullWidth"
+  >
+    <div
+      className="CallOut-inner"
+    >
+      <div
+        className="Box-root Flex-root Flex-flex"
+      >
+        <i
+          aria-hidden="true"
+          className="Icon-root Icon-md ExperimentalCallOut-icon"
+        >
+          new_releases
+        </i>
+        <span
+          className="ExperimentalCallOut-title"
+        >
+          Experimental Feature
+        </span>
+      </div>
+      <span>
+        The webhook feature is currently in active development. Events may be
+added or removed. Please 
+        <a
+          className="ExternalLink-root"
+          href="https://coralproject.net/contact/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          contact us with any feedback or requests
+        </a>
+        .
+      </span>
+    </div>
+  </div>
   <div
     className="Box-root ConfigBox-root"
   >
@@ -474,7 +618,7 @@ Coral. These events will be JSON encoded and signed. To learn more
 about webhook signing, visit our 
           <a
             className="ExternalLink-root"
-            href="https://docs.coralproject.net/coral/v5/integrating/webhooks/"
+            href="https://github.com/coralproject/talk/blob/master/WEBHOOKS.md"
             rel="noopener noreferrer"
             target="_blank"
           >
diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl
index 91a18581d..dd4c99679 100644
--- a/src/locales/en-US/admin.ftl
+++ b/src/locales/en-US/admin.ftl
@@ -136,6 +136,8 @@ linkAccount-useDifferentEmail = Use a different email address
 
 ## Configure
 
+configure-experimentalFeature = Experimental Feature
+
 configure-unsavedInputWarning =
   You have unsaved changes. Are you sure you want to continue?
 
@@ -157,6 +159,9 @@ configure-radioButton-allow = Allow
 configure-radioButton-dontAllow = Don't allow
 
 ### Webhooks
+configure-webhooks-experimentalFeature =
+  The webhook feature is currently in active development. Events may be
+  added or removed. Please <ContactUsLink>contact us with any feedback or requests</ContactUsLink>.
 configure-webhooks-webhookEndpointNotFound = Webhook endpoint not found
 configure-webhooks-header-title = Configure webhook endpoint
 configure-webhooks-description =