From fa1c429846a34f27ac0eb23d1910bc02cea05637 Mon Sep 17 00:00:00 2001 From: Kathryn Beaty Date: Thu, 24 Aug 2023 15:36:37 -0400 Subject: [PATCH] update config layout and copy --- .../Advanced/AdvancedConfigContainer.tsx | 9 +-- .../Advanced/EmbeddedCommentRepliesConfig.tsx | 52 -------------- .../Advanced/EmbeddedCommentsConfig.tsx | 72 +++++++++++++++++++ .../OEmbedAllowedOriginsConfigContainer.tsx | 49 ------------- .../admin/test/configure/advanced.spec.tsx | 12 ++-- src/core/client/admin/test/fixtures.ts | 2 +- .../app/middleware/commentEmbedWhitelisted.ts | 4 +- src/core/server/graph/resolvers/Settings.ts | 10 ++- src/core/server/graph/schema/schema.graphql | 18 +++-- src/core/server/models/settings/settings.ts | 1 - src/core/server/models/tenant/tenant.ts | 2 +- src/core/server/test/fixtures.ts | 5 +- src/locales/en-US/admin.ftl | 4 +- 13 files changed, 108 insertions(+), 132 deletions(-) delete mode 100644 src/core/client/admin/routes/Configure/sections/Advanced/EmbeddedCommentRepliesConfig.tsx create mode 100644 src/core/client/admin/routes/Configure/sections/Advanced/EmbeddedCommentsConfig.tsx delete mode 100644 src/core/client/admin/routes/Configure/sections/Advanced/OEmbedAllowedOriginsConfigContainer.tsx diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigContainer.tsx index 8d4eceefb9..4c89753386 100644 --- a/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigContainer.tsx +++ b/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 = ({ return ( - - + ({ 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 diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/EmbeddedCommentRepliesConfig.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/EmbeddedCommentRepliesConfig.tsx deleted file mode 100644 index f78b905743..0000000000 --- a/src/core/client/admin/routes/Configure/sections/Advanced/EmbeddedCommentRepliesConfig.tsx +++ /dev/null @@ -1,52 +0,0 @@ -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"; - -// eslint-disable-next-line no-unused-expressions -graphql` - fragment EmbeddedCommentRepliesConfig_formValues on Settings { - embeddedComments { - allowReplies - } - } -`; - -interface Props { - disabled: boolean; -} - -const EmbeddedCommentRepliesConfig: FunctionComponent = ({ - disabled, -}) => ( - -
- Embedded comment replies -
- - } - > - - - - When enabled, a reply button will appear with each embedded comment to - encourage additional discussion on that specific comment or story. - - - - - - - - -); - -export default EmbeddedCommentRepliesConfig; diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/EmbeddedCommentsConfig.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/EmbeddedCommentsConfig.tsx new file mode 100644 index 0000000000..b86ef7065c --- /dev/null +++ b/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 = ({ disabled }) => ( + +
+ Embedded comments +
+ + } + > + + + + + + + When enabled, a reply button will appear with each embedded comment to + encourage additional discussion on that specific comment or story. + + + + + + For sites using oEmbed + + + + + + + + Domains that are permitted to make calls to the oEmbed API (ex. + http://localhost:3000, https://staging.domain.com, + https://domain.com). + + + + + +); + +export default EmbeddedCommentsConfig; diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/OEmbedAllowedOriginsConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/OEmbedAllowedOriginsConfigContainer.tsx deleted file mode 100644 index 803b7d856d..0000000000 --- a/src/core/client/admin/routes/Configure/sections/Advanced/OEmbedAllowedOriginsConfigContainer.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 AllowedOriginsTextarea from "../Sites/AllowedOriginsTextarea"; - -// eslint-disable-next-line no-unused-expressions -graphql` - fragment OEmbedAllowedOriginsConfigContainer_formValues on Settings { - oEmbedAllowedOrigins - } -`; - -interface Props { - disabled: boolean; -} - -const OEmbedAllowedOriginsConfigContainer: FunctionComponent = ({ - disabled, -}) => ( - -
- oEmbed permitted domains -
- - } - > - - - - Domains that are permitted to make calls to the oEmbed API. - - - - - - - - -); - -export default OEmbedAllowedOriginsConfigContainer; diff --git a/src/core/client/admin/test/configure/advanced.spec.tsx b/src/core/client/admin/test/configure/advanced.spec.tsx index 043e4d0ca2..582ededa84 100644 --- a/src/core/client/admin/test/configure/advanced.spec.tsx +++ b/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({ 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( diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts index 8213c5d950..c32159eafc 100644 --- a/src/core/client/admin/test/fixtures.ts +++ b/src/core/client/admin/test/fixtures.ts @@ -224,12 +224,12 @@ export const settings = createFixture({ emailDomainModeration: [], embeddedComments: { allowReplies: true, + oEmbedAllowedOrigins: [], }, flairBadges: { flairBadgesEnabled: false, badges: [], }, - oEmbedAllowedOrigins: [], }); export const settingsWithMultisite = createFixture( diff --git a/src/core/server/app/middleware/commentEmbedWhitelisted.ts b/src/core/server/app/middleware/commentEmbedWhitelisted.ts index ce479676e3..13ca25e99a 100644 --- a/src/core/server/app/middleware/commentEmbedWhitelisted.ts +++ b/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(); } } diff --git a/src/core/server/graph/resolvers/Settings.ts b/src/core/server/graph/resolvers/Settings.ts index b6f4425da5..7988ef3b09 100644 --- a/src/core/server/graph/resolvers/Settings.ts +++ b/src/core/server/graph/resolvers/Settings.ts @@ -54,10 +54,15 @@ export const Settings: GQLSettingsTypeResolver = { 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 = { } return flairBadges; }, - oEmbedAllowedOrigins: ({ oEmbedAllowedOrigins = [] }) => oEmbedAllowedOrigins, }; diff --git a/src/core/server/graph/schema/schema.graphql b/src/core/server/graph/schema/schema.graphql index 5f15866dfb..cf20728d62 100644 --- a/src/core/server/graph/schema/schema.graphql +++ b/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!] } """ diff --git a/src/core/server/models/settings/settings.ts b/src/core/server/models/settings/settings.ts index 89f0a3f082..99ba0821a9 100644 --- a/src/core/server/models/settings/settings.ts +++ b/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. diff --git a/src/core/server/models/tenant/tenant.ts b/src/core/server/models/tenant/tenant.ts index 8c08ce494e..3103cc6d00 100644 --- a/src/core/server/models/tenant/tenant.ts +++ b/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. diff --git a/src/core/server/test/fixtures.ts b/src/core/server/test/fixtures.ts index 25701d5de8..81187cec43 100644 --- a/src/core/server/test/fixtures.ts +++ b/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); diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl index a8d3ce2e46..48ded2a1df 100644 --- a/src/locales/en-US/admin.ftl +++ b/src/locales/en-US/admin.ftl @@ -905,6 +905,8 @@ 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 @@ -912,7 +914,7 @@ configure-advanced-embeddedCommentReplies-explanation = When enabled, a reply bu 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