[CORL-416] Disable Live Updates (#2391)

* feat: initial implementation

* fix: docs

src/core/client/admin/routes/Configure/ConfigureRoute.tsx

@@ -53,4 +53,5 @@ class ConfigureRoute extends React.Component<Props, State> {
 }
 
 const enhanced = withMutation(UpdateSettingsMutation)(ConfigureRoute);
+
 export default enhanced;

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

@@ -3,13 +3,16 @@ import React, { FunctionComponent } from "react";
 import { PropTypesOf } from "coral-framework/types";
 import { HorizontalGutter } from "coral-ui/components";
 
+import CommentStreamLiveUpdatesContainer from "./CommentStreamLiveUpdatesContainer";
 import CustomCSSConfigContainer from "./CustomCSSConfigContainer";
 import PermittedDomainsConfigContainer from "./PermittedDomainsConfigContainer";
 
 interface Props {
   disabled: boolean;
   settings: PropTypesOf<typeof CustomCSSConfigContainer>["settings"] &
-    PropTypesOf<typeof PermittedDomainsConfigContainer>["settings"];
+    PropTypesOf<typeof PermittedDomainsConfigContainer>["settings"] &
+    PropTypesOf<typeof CommentStreamLiveUpdatesContainer>["settings"] &
+    PropTypesOf<typeof CommentStreamLiveUpdatesContainer>["settingsReadOnly"];
   onInitValues: (values: any) => void;
 }
 
@@ -24,6 +27,12 @@ const AdvancedConfig: FunctionComponent<Props> = ({
       settings={settings}
       onInitValues={onInitValues}
     />
+    <CommentStreamLiveUpdatesContainer
+      disabled={disabled}
+      settings={settings}
+      settingsReadOnly={settings}
+      onInitValues={onInitValues}
+    />
     <PermittedDomainsConfigContainer
       disabled={disabled}
       settings={settings}

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

@@ -3,7 +3,7 @@ import { RouteProps } from "found";
 import React from "react";
 import { graphql } from "react-relay";
 
-import { AdvancedConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AdvancedConfigContainer_settings.graphql";
+import { AdvancedConfigContainer_settings } from "coral-admin/__generated__/AdvancedConfigContainer_settings.graphql";
 import { pureMerge } from "coral-common/utils";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
@@ -12,7 +12,7 @@ import AdvancedConfig from "./AdvancedConfig";
 interface Props {
   form: FormApi;
   submitting: boolean;
-  settings: SettingsData;
+  settings: AdvancedConfigContainer_settings;
 }
 
 class AdvancedConfigContainer extends React.Component<Props> {
@@ -47,6 +47,8 @@ const enhanced = withFragmentContainer<Props>({
     fragment AdvancedConfigContainer_settings on Settings {
       ...CustomCSSConfigContainer_settings
       ...PermittedDomainsConfigContainer_settings
+      ...CommentStreamLiveUpdatesContainer_settings
+      ...CommentStreamLiveUpdatesContainer_settingsReadOnly
     }
   `,
 })(AdvancedConfigContainer);

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

@@ -0,0 +1,35 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+
+import { FormField, HorizontalGutter, Typography } from "coral-ui/components";
+
+import Header from "../../Header";
+import OnOffField from "../../OnOffField";
+
+interface Props {
+  disabled: boolean;
+}
+
+const CommentStreamLiveUpdates: FunctionComponent<Props> = ({ disabled }) => (
+  <FormField>
+    <HorizontalGutter size="full">
+      <Localized id="configure-advanced-liveUpdates">
+        <Header container={<label htmlFor="configure-advanced-liveUpdates" />}>
+          Comment Stream Live Updates
+        </Header>
+      </Localized>
+      <Localized
+        id="configure-advanced-liveUpdates-explanation"
+        strong={<strong />}
+      >
+        <Typography variant="detail">
+          When enabled, there will be real-time loading and updating of comments
+          as new comments and replies are published
+        </Typography>
+      </Localized>
+      <OnOffField name="live.enabled" disabled={disabled} />
+    </HorizontalGutter>
+  </FormField>
+);
+
+export default CommentStreamLiveUpdates;

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { CommentStreamLiveUpdatesContainer_settings } from "coral-admin/__generated__/CommentStreamLiveUpdatesContainer_settings.graphql";
+import { CommentStreamLiveUpdatesContainer_settingsReadOnly } from "coral-admin/__generated__/CommentStreamLiveUpdatesContainer_settingsReadOnly.graphql";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+
+import CommentStreamLiveUpdates from "./CommentStreamLiveUpdates";
+
+interface Props {
+  settingsReadOnly: CommentStreamLiveUpdatesContainer_settingsReadOnly;
+  settings: CommentStreamLiveUpdatesContainer_settings;
+  onInitValues: (values: CommentStreamLiveUpdatesContainer_settings) => void;
+  disabled: boolean;
+}
+
+class CommentStreamLiveUpdatesContainer extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    props.onInitValues(props.settings);
+  }
+
+  public render() {
+    const {
+      disabled,
+      settingsReadOnly: {
+        live: { configurable },
+      },
+    } = this.props;
+
+    if (!configurable) {
+      return null;
+    }
+
+    return <CommentStreamLiveUpdates disabled={disabled} />;
+  }
+}
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment CommentStreamLiveUpdatesContainer_settings on Settings {
+      live {
+        enabled
+      }
+    }
+  `,
+  settingsReadOnly: graphql`
+    fragment CommentStreamLiveUpdatesContainer_settingsReadOnly on Settings {
+      live {
+        configurable
+      }
+    }
+  `,
+})(CommentStreamLiveUpdatesContainer);
+
+export default enhanced;

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

@@ -144,6 +144,75 @@ exports[`renders configure advanced 1`] = `
               </div>
             </div>
           </div>
+          <div
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+          >
+            <div
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            >
+              <label
+                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                htmlFor="configure-advanced-liveUpdates"
+              >
+                Comment Stream Live Updates
+              </label>
+              <p
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+              >
+                When enabled, there will be real-time loading and updating of comments as new comments and replies are published
+              </p>
+              <div>
+                <div
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={true}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="live.enabled-true"
+                    name="live.enabled"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value={true}
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="live.enabled-true"
+                  >
+                    <span>
+                      On
+                    </span>
+                  </label>
+                </div>
+                <div
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={false}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="live.enabled-false"
+                    name="live.enabled"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value={false}
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="live.enabled-false"
+                  >
+                    <span>
+                      Off
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >

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

@@ -141,6 +141,32 @@ it("remove custom css", async () => {
   });
 });
 
+it("renders with live configuration when configurable", async () => {
+  const { advancedContainer } = await createTestRenderer();
+
+  expect(
+    within(advancedContainer).queryByLabelText("Comment Stream Live Updates")
+  ).toBeDefined();
+});
+
+it("renders without live configuration when not configurable", async () => {
+  const resolvers = createResolversStub<GQLResolver>({
+    Query: {
+      settings: () =>
+        pureMerge<typeof settings>(settings, {
+          live: { configurable: false },
+        }),
+    },
+  });
+  const { advancedContainer } = await createTestRenderer({
+    resolvers,
+  });
+
+  expect(
+    within(advancedContainer).queryByLabelText("Comment Stream Live Updates")
+  ).toEqual(null);
+});
+
 it("change permitted domains to be empty", async () => {
   const resolvers = createResolversStub<GQLResolver>({
     Mutation: {

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

@@ -23,6 +23,10 @@ export const settings = createFixture<GQLSettings>({
   id: "settings",
   moderation: GQLMODERATION_MODE.POST,
   premodLinksEnable: false,
+  live: {
+    enabled: true,
+    configurable: true,
+  },
   wordList: {
     suspect: ["idiot", "stupid"],
     banned: ["fuck"],