[CORL-450] Embed Code copy (#2411)

* fix: adjusted copy in embed code

* fix: adjusted translation message API

* fix: fixed tests

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

@@ -4,6 +4,7 @@ import React, { FunctionComponent, useMemo } from "react";
 
 import { getLocationOrigin } from "coral-common/utils";
 import { CopyButton } from "coral-framework/components";
+import { GetMessage, withGetMessage } from "coral-framework/lib/i18n";
 import { HorizontalGutter, Typography } from "coral-ui/components";
 
 import Header from "../../Header";
@@ -12,9 +13,10 @@ import styles from "./EmbedCode.css";
 
 interface Props {
   staticURI: string | null;
+  getMessage: GetMessage;
 }
 
-const EmbedCode: FunctionComponent<Props> = ({ staticURI }) => {
+const EmbedCode: FunctionComponent<Props> = ({ staticURI, getMessage }) => {
   const embed = useMemo(() => {
     // Get the origin of the current page.
     const origin = getLocationOrigin();
@@ -22,6 +24,30 @@ const EmbedCode: FunctionComponent<Props> = ({ staticURI }) => {
     // Optionally use the staticURI for configuration.
     const script = staticURI || origin;
 
+    let comment: string | string[] = getMessage(
+      "configure-advanced-embedCode-comment",
+      stripIndent`
+      Uncomment these lines 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.
+    `
+    );
+
+    // Sometimes when the translation gets to us, it has newlines split onto
+    // it's own lines, so we filter those lines out first to ensure we don't
+    // end up printing it twice. We then wrap each line in the correct amount
+    // of indentation to match the indentation below in the stripIndent block
+    // below, and rejoin the line (trimming it to remove the leading space) so
+    // it will fit in the text block that is rendered.
+    comment = comment
+      .split("\n")
+      .filter(line => line !== "\n")
+      .map(line => `                  // ${line.trim()}`)
+      .join("\n")
+      .trim();
+
     // Return the HTML template.
     const text = stripIndent`
     <div id="coral_thread"></div>
@@ -34,11 +60,7 @@ const EmbedCode: FunctionComponent<Props> = ({ staticURI }) => {
                   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.
+                  ${comment}
                   // storyID: '\${storyID}',
                   // storyURL: '\${storyURL}',
               });
@@ -77,4 +99,6 @@ const EmbedCode: FunctionComponent<Props> = ({ staticURI }) => {
   );
 };
 
-export default EmbedCode;
+const enhanced = withGetMessage(EmbedCode);
+
+export default enhanced;

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

@@ -135,7 +135,7 @@ each of your site’s stories.
               id: \\"coral_thread\\",
               autoRender: true,
               rootURL: 'http://localhost',
-              // Comment these out and replace with the ID of the
+              // Uncomment these lines 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

src/core/client/framework/lib/i18n/getMessage.ts

@@ -13,5 +13,9 @@ export default function getMessage(
     }
     return val || got;
   }, "");
+  if (res && Array.isArray(res)) {
+    return res.join("");
+  }
+
   return res || defaultTo;
 }

src/locales/en-US/admin.ftl

@@ -67,8 +67,7 @@ login-signInWithOIDC = Sign in with { $name }
 ## Configure
 
 configure-unsavedInputWarning =
-  You have unsaved input.
-  Are you sure you want to leave this page?
+  You have unsaved input. Are you sure you want to leave this page?
 
 configure-sideBarNavigation-general = General
 configure-sideBarNavigation-authentication = Authentication
@@ -312,6 +311,13 @@ configure-advanced-embedCode-explanation =
   Copy and paste the code below into your CMS to embed Coral comment streams in
   each of your site’s stories.
 
+configure-advanced-embedCode-comment =
+  Uncomment these lines 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.
+
 ## Decision History
 decisionHistory-popover =
   .description = A dialog showing the decision history