update config layout and copy

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

@@ -13,9 +13,8 @@ import { AdvancedConfigContainer_settings } from "coral-admin/__generated__/Adva
 import AMPConfig from "./AMPConfig";
 import CommentStreamLiveUpdatesContainer from "./CommentStreamLiveUpdatesContainer";
 import CustomCSSConfig from "./CustomCSSConfig";
-import EmbeddedCommentRepliesConfig from "./EmbeddedCommentRepliesConfig";
+import EmbeddedCommentsConfig from "./EmbeddedCommentsConfig";
 import ForReviewQueueConfig from "./ForReviewQueueConfig";
-import OEmbedAllowedOriginsConfigContainer from "./OEmbedAllowedOriginsConfigContainer";
 import StoryCreationConfig from "./StoryCreationConfig";
 
 interface Props {
@@ -32,8 +31,7 @@ const AdvancedConfigContainer: React.FunctionComponent<Props> = ({
   return (
     <HorizontalGutter size="double" data-testid="configure-advancedContainer">
       <CustomCSSConfig disabled={submitting} />
-      <EmbeddedCommentRepliesConfig disabled={submitting} />
-      <OEmbedAllowedOriginsConfigContainer disabled={submitting} />
+      <EmbeddedCommentsConfig disabled={submitting} />
       <CommentStreamLiveUpdatesContainer
         disabled={submitting}
         settings={settings}
@@ -49,8 +47,7 @@ const enhanced = withFragmentContainer<Props>({
   settings: graphql`
     fragment AdvancedConfigContainer_settings on Settings {
       ...CustomCSSConfig_formValues @relay(mask: false)
-      ...EmbeddedCommentRepliesConfig_formValues @relay(mask: false)
-      ...OEmbedAllowedOriginsConfigContainer_formValues @relay(mask: false)
+      ...EmbeddedCommentsConfig_formValues @relay(mask: false)
       ...CommentStreamLiveUpdates_formValues @relay(mask: false)
       ...StoryCreationConfig_formValues @relay(mask: false)
       ...CommentStreamLiveUpdatesContainer_settings

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

@@ -0,0 +1,72 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { FormField, FormFieldDescription, Label } from "coral-ui/components/v2";
+
+import ConfigBox from "../../ConfigBox";
+import Header from "../../Header";
+import OnOffField from "../../OnOffField";
+import AllowedOriginsTextarea from "../Sites/AllowedOriginsTextarea";
+import Subheader from "../../Subheader";
+
+// eslint-disable-next-line no-unused-expressions
+graphql`
+  fragment EmbeddedCommentsConfig_formValues on Settings {
+    embeddedComments {
+      allowReplies
+      oEmbedAllowedOrigins
+    }
+  }
+`;
+
+interface Props {
+  disabled: boolean;
+}
+
+const EmbeddedCommentsConfig: FunctionComponent<Props> = ({ disabled }) => (
+  <ConfigBox
+    data-testid="embedded-comments-config"
+    title={
+      <Localized id="configure-advanced-embeddedComments">
+        <Header htmlFor="configure-advanced-embeddedComments">
+          Embedded comments
+        </Header>
+      </Localized>
+    }
+  >
+    <FormField>
+      <Localized id="configure-advanced-embeddedCommentReplies-label">
+        <Label>Allow replies to embedded comments</Label>
+      </Localized>
+      <Localized id="configure-advanced-embeddedCommentReplies-explanation">
+        <FormFieldDescription>
+          When enabled, a reply button will appear with each embedded comment to
+          encourage additional discussion on that specific comment or story.
+        </FormFieldDescription>
+      </Localized>
+      <OnOffField name="embeddedComments.allowReplies" disabled={disabled} />
+    </FormField>
+    <Localized id="configure-advanced-embeddedComments-subheader">
+      <Subheader>For sites using oEmbed</Subheader>
+    </Localized>
+    <FormField>
+      <Localized id="configure-advanced-oembedAllowedOrigins-label">
+        <Label>oEmbed permitted domains</Label>
+      </Localized>
+      <Localized id="configure-advanced-oembedAllowedOrigins-description">
+        <FormFieldDescription>
+          Domains that are permitted to make calls to the oEmbed API (ex.
+          http://localhost:3000, https://staging.domain.com,
+          https://domain.com).
+        </FormFieldDescription>
+      </Localized>
+      <AllowedOriginsTextarea
+        name="embeddedComments.oEmbedAllowedOrigins"
+        disabled={disabled}
+      />
+    </FormField>
+  </ConfigBox>
+);
+
+export default EmbeddedCommentsConfig;

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

@@ -59,7 +59,7 @@ it("renders configure advanced", async () => {
   const { configureContainer } = await createTestRenderer();
   expect(within(configureContainer).getByLabelText("Custom CSS")).toBeDefined();
   expect(
-    within(configureContainer).getByText("Embedded comment replies")
+    within(configureContainer).getByText("Embedded comments")
   ).toBeDefined();
   expect(
     within(configureContainer).getByText("Comment stream live updates")
@@ -223,7 +223,7 @@ it("change embedded comments allow replies", async () => {
   });
 
   const embeddedCommentReplies = within(advancedContainer).getByTestId(
-    "embedded-comment-replies-config"
+    "embedded-comments-config"
   );
 
   const offField = within(embeddedCommentReplies).getByText("Off");
@@ -246,9 +246,9 @@ it("change oembed permitted domains", async () => {
   const resolvers = createResolversStub<GQLResolver>({
     Mutation: {
       updateSettings: ({ variables }) => {
-        expectAndFail(variables.settings.oEmbedAllowedOrigins).toEqual([
-          "http://localhost:8080",
-        ]);
+        expectAndFail(
+          variables.settings.embeddedComments?.oEmbedAllowedOrigins
+        ).toEqual(["http://localhost:8080"]);
         return {
           settings: pureMerge(settings, variables.settings),
         };
@@ -260,7 +260,7 @@ it("change oembed permitted domains", async () => {
   });
 
   const oembedAllowedOriginsConfig = within(advancedContainer).getByTestId(
-    "oembed-allowed-origins-config"
+    "embedded-comments-config"
   );
 
   const allowedOriginsTextArea = within(oembedAllowedOriginsConfig).getByRole(

src/core/client/admin/test/fixtures.ts

@@ -224,12 +224,12 @@ export const settings = createFixture<GQLSettings>({
   emailDomainModeration: [],
   embeddedComments: {
     allowReplies: true,
+    oEmbedAllowedOrigins: [],
   },
   flairBadges: {
     flairBadgesEnabled: false,
     badges: [],
   },
-  oEmbedAllowedOrigins: [],
 });
 
 export const settingsWithMultisite = createFixture<GQLSettings>(

src/core/server/app/middleware/commentEmbedWhitelisted.ts

@@ -39,7 +39,9 @@ export const commentEmbedWhitelisted =
           if (origin) {
             // if oEmbed API call, we also check oEmbed allowed origins on tenant
             if (oembedAPI) {
-              if (tenant.oEmbedAllowedOrigins.includes(origin)) {
+              if (
+                tenant.embeddedComments?.oEmbedAllowedOrigins.includes(origin)
+              ) {
                 return next();
               }
             }

src/core/server/graph/resolvers/Settings.ts

@@ -54,10 +54,15 @@ export const Settings: GQLSettingsTypeResolver<Tenant> = {
     return deprecated;
   },
   embeddedComments: (
-    { embeddedComments = { allowReplies: true } },
+    { embeddedComments = { allowReplies: true, oEmbedAllowedOrigins: [] } },
     args,
     ctx
-  ) => embeddedComments,
+  ) => {
+    return {
+      allowReplies: embeddedComments.allowReplies ?? true,
+      oEmbedAllowedOrigins: embeddedComments.oEmbedAllowedOrigins ?? [],
+    };
+  },
   flairBadges: ({
     flairBadges = { flairBadgesEnabled: false, badges: [] },
   }) => {
@@ -69,5 +74,4 @@ export const Settings: GQLSettingsTypeResolver<Tenant> = {
     }
     return flairBadges;
   },
-  oEmbedAllowedOrigins: ({ oEmbedAllowedOrigins = [] }) => oEmbedAllowedOrigins,
 };

src/core/server/graph/schema/schema.graphql

@@ -1673,6 +1673,10 @@ EmbeddedCommentsConfiguration specifies the configuration for embedded comments.
 """
 type EmbeddedCommentsConfiguration {
   allowReplies: Boolean
+  """
+  oEmbedAllowedOrigins are the allowed origins for oEmbed API calls.
+  """
+  oEmbedAllowedOrigins: [String!]! @auth(roles: [ADMIN, MODERATOR])
 }
 
 """
@@ -2221,11 +2225,6 @@ type Settings @cacheControl(maxAge: 30) {
   they are enabled and any configured image urls
   """
   flairBadges: FlairBadgeConfiguration
-
-  """
-  oEmbedAllowedOrigins are the allowed origins for oEmbed API calls.
-  """
-  oEmbedAllowedOrigins: [String!]! @auth(roles: [ADMIN, MODERATOR])
 }
 
 ################################################################################
@@ -5572,6 +5571,10 @@ EmbeddedCommentsConfigurationInput specifies the configuration for comment embed
 """
 input EmbeddedCommentsConfigurationInput {
   allowReplies: Boolean
+  """
+  oEmbedAllowedOrigins are the allowed origins for oEmbed API calls.
+  """
+  oEmbedAllowedOrigins: [String!]
 }
 
 """
@@ -5806,11 +5809,6 @@ input SettingsInput {
   they are enabled and any configured image urls
   """
   flairBadges: FlairBadgeConfigurationInput
-
-  """
-  oEmbedAllowedOrigins are the allowed origins for oEmbed API calls.
-  """
-  oEmbedAllowedOrigins: [String!]
 }
 
 """

src/core/server/models/settings/settings.ts

@@ -321,7 +321,6 @@ export type Settings = GlobalModerationSettings &
     | "announcement"
     | "memberBios"
     | "embeddedComments"
-    | "oEmbedAllowedOrigins"
   > & {
     /**
      * auth is the set of configured authentication integrations.

src/core/server/models/tenant/tenant.ts

@@ -293,12 +293,12 @@ export async function createTenant(
     emailDomainModeration: [],
     embeddedComments: {
       allowReplies: true,
+      oEmbedAllowedOrigins: [],
     },
     flairBadges: {
       flairBadgesEnabled: false,
       badges: [],
     },
-    oEmbedAllowedOrigins: [],
   };
 
   // Create the new Tenant by merging it together with the defaults.

src/core/server/test/fixtures.ts

@@ -184,7 +184,10 @@ export const createTenantFixture = (
     flattenReplies: false,
     disableDefaultFonts: false,
     emailDomainModeration: [],
-    oEmbedAllowedOrigins: [],
+    embeddedComments: {
+      allowReplies: true,
+      oEmbedAllowedOrigins: [],
+    },
   };
 
   return merge(fixture, defaults);

src/locales/en-US/admin.ftl

@@ -905,14 +905,16 @@ configure-advanced-customCSS-containsFontFace =
   URL to a custom CSS stylesheet that contains all @font-face
   definitions needed by above stylesheet.
 
+configure-advanced-embeddedComments = Embedded comments
+configure-advanced-embeddedComments-subheader = For sites using oEmbed
 configure-advanced-embeddedCommentReplies = Embedded comment replies
 configure-advanced-embeddedCommentReplies-explanation = When enabled, a reply button
   will appear with each embedded comment to encourage additional discussion on that
   specific comment or story.
 configure-advanced-embeddedCommentReplies-label = Allow replies to embedded comments
 
 configure-advanced-oembedAllowedOrigins-header = oEmbed permitted domains
-configure-advanced-oembedAllowedOrigins-description = Domains that are permitted to make calls to the oEmbed API.
+configure-advanced-oembedAllowedOrigins-description = Domains that are permitted to make calls to the oEmbed API (ex. http://localhost:3000, https://staging.domain.com, https://domain.com).
 configure-advanced-oembedAllowedOrigins-label = oEmbed permitted domains
 
 configure-advanced-permittedDomains = Permitted domains