[CORL-436] Embed Code (#2398)

* feat: initial implementation

* fix: moved embed configuration to advanced

* feat: added copy button to embed code

* fix: removing unused line

src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfig.tsx

@@ -5,6 +5,7 @@ import { HorizontalGutter } from "coral-ui/components";
 
 import CommentStreamLiveUpdatesContainer from "./CommentStreamLiveUpdatesContainer";
 import CustomCSSConfigContainer from "./CustomCSSConfigContainer";
+import EmbedCodeContainer from "./EmbedCodeContainer";
 import PermittedDomainsConfigContainer from "./PermittedDomainsConfigContainer";
 
 interface Props {
@@ -12,7 +13,8 @@ interface Props {
   settings: PropTypesOf<typeof CustomCSSConfigContainer>["settings"] &
     PropTypesOf<typeof PermittedDomainsConfigContainer>["settings"] &
     PropTypesOf<typeof CommentStreamLiveUpdatesContainer>["settings"] &
-    PropTypesOf<typeof CommentStreamLiveUpdatesContainer>["settingsReadOnly"];
+    PropTypesOf<typeof CommentStreamLiveUpdatesContainer>["settingsReadOnly"] &
+    PropTypesOf<typeof EmbedCodeContainer>["settings"];
   onInitValues: (values: any) => void;
 }
 
@@ -22,6 +24,7 @@ const AdvancedConfig: FunctionComponent<Props> = ({
   onInitValues,
 }) => (
   <HorizontalGutter size="double" data-testid="configure-advancedContainer">
+    <EmbedCodeContainer settings={settings} />
     <CustomCSSConfigContainer
       disabled={disabled}
       settings={settings}

src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigContainer.tsx

@@ -45,6 +45,7 @@ class AdvancedConfigContainer extends React.Component<Props> {
 const enhanced = withFragmentContainer<Props>({
   settings: graphql`
     fragment AdvancedConfigContainer_settings on Settings {
+      ...EmbedCodeContainer_settings
       ...CustomCSSConfigContainer_settings
       ...PermittedDomainsConfigContainer_settings
       ...CommentStreamLiveUpdatesContainer_settings

src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.css

@@ -0,0 +1,10 @@
+.textArea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: calc(0.5 * var(--mini-unit));
+  resize: none;
+}
+
+.copyArea {
+  text-align: right;
+}

src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx

@@ -0,0 +1,80 @@
+import { stripIndent } from "common-tags";
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent, useMemo } from "react";
+
+import { getLocationOrigin } from "coral-common/utils";
+import { CopyButton } from "coral-framework/components";
+import { HorizontalGutter, Typography } from "coral-ui/components";
+
+import Header from "../../Header";
+
+import styles from "./EmbedCode.css";
+
+interface Props {
+  staticURI: string | null;
+}
+
+const EmbedCode: FunctionComponent<Props> = ({ staticURI }) => {
+  const embed = useMemo(() => {
+    // Get the origin of the current page.
+    const origin = getLocationOrigin();
+
+    // Optionally use the staticURI for configuration.
+    const script = staticURI || origin;
+
+    // Return the HTML template.
+    const text = stripIndent`
+    <div id="coral_thread"></div>
+    <script type="text/javascript">
+      (function() {
+          var d = document, s = d.createElement('script');
+          s.src = '${script}/assets/js/embed.js';
+          s.onload = function() {
+              Coral.createStreamEmbed({
+                  id: "coral_thread",
+                  autoRender: true,
+                  rootURL: '${origin}',
+                  // Comment these out and replace with the ID of the
+                  // story's ID and URL from your CMS to provide the
+                  // tightest integration. Refer to our documentation at
+                  // https://docs.coralproject.net for all the configuration
+                  // options.
+                  // storyID: '\${storyID}',
+                  // storyURL: '\${storyURL}',
+              });
+          };
+          (d.head || d.body).appendChild(s);
+      })();
+    </script>`;
+
+    // Count the number of rows in the embed code.
+    const rows = text.split(/\r\n|\r|\n/).length;
+
+    return { text, rows };
+  }, [staticURI]);
+
+  return (
+    <HorizontalGutter size="oneAndAHalf" container="fieldset">
+      <Localized id="configure-advanced-embedCode-title">
+        <Header container="legend">Embed Code</Header>
+      </Localized>
+      <Localized id="configure-advanced-embedCode-explanation">
+        <Typography variant="detail">
+          Copy and paste the code below into your CMS to embed Coral comment
+          streams in each of your site’s stories.
+        </Typography>
+      </Localized>
+      <textarea
+        rows={embed.rows}
+        className={styles.textArea}
+        readOnly
+        value={embed.text}
+      />
+      <HorizontalGutter className={styles.copyArea}>
+        <CopyButton size="regular" text={embed.text} />
+      </HorizontalGutter>
+    </HorizontalGutter>
+  );
+};
+
+export default EmbedCode;

src/core/client/admin/routes/Configure/sections/Advanced/EmbedCodeContainer.tsx

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { EmbedCodeContainer_settings } from "coral-admin/__generated__/EmbedCodeContainer_settings.graphql";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+
+import EmbedCode from "./EmbedCode";
+
+interface Props {
+  settings: EmbedCodeContainer_settings;
+}
+
+const EmbedCodeContainer: FunctionComponent<Props> = ({ settings }) => {
+  return <EmbedCode staticURI={settings.staticURI} />;
+};
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment EmbedCodeContainer_settings on Settings {
+      staticURI
+    }
+  `,
+})(EmbedCodeContainer);
+
+export default enhanced;

src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap

@@ -107,6 +107,66 @@ exports[`renders configure advanced 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
           data-testid="configure-advancedContainer"
         >
+          <fieldset
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+          >
+            <legend
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+            >
+              Embed Code
+            </legend>
+            <p
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+            >
+              Copy and paste the code below into your CMS to embed Coral comment streams in
+each of your site’s stories.
+            </p>
+            <textarea
+              className="EmbedCode-textArea"
+              readOnly={true}
+              rows={22}
+              value="<div id=\\"coral_thread\\"></div>
+<script type=\\"text/javascript\\">
+  (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'http://localhost/assets/js/embed.js';
+      s.onload = function() {
+          Coral.createStreamEmbed({
+              id: \\"coral_thread\\",
+              autoRender: true,
+              rootURL: 'http://localhost',
+              // Comment these out and replace with the ID of the
+              // story's ID and URL from your CMS to provide the
+              // tightest integration. Refer to our documentation at
+              // https://docs.coralproject.net for all the configuration
+              // options.
+              // storyID: '\${storyID}',
+              // storyURL: '\${storyURL}',
+          });
+      };
+      (d.head || d.body).appendChild(s);
+  })();
+</script>"
+            />
+            <div
+              className="Box-root HorizontalGutter-root EmbedCode-copyArea HorizontalGutter-full"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Copy
+                </span>
+              </button>
+            </div>
+          </fieldset>
           <div
             className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >