[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;