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

* feat: initial implementation

* fix: docs

src/core/client/stream/tabs/Comments/ReplyList/ReplyListContainer.spec.tsx

@@ -15,6 +15,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof ReplyListContainerN> = {
     story: {
       isClosed: false,
+      settings: { live: { enabled: true } },
     },
     comment: {
       id: "comment-id",
@@ -50,6 +51,11 @@ it("renders correctly when replies are empty", () => {
   const props: PropTypesOf<typeof ReplyListContainerN> = {
     story: {
       isClosed: false,
+      settings: {
+        live: {
+          enabled: true,
+        },
+      },
     },
     comment: {
       id: "comment-id",
@@ -80,6 +86,11 @@ describe("when has more replies", () => {
   const props: PropTypesOf<typeof ReplyListContainerN> = {
     story: {
       isClosed: false,
+      settings: {
+        live: {
+          enabled: true,
+        },
+      },
     },
     comment: {
       id: "comment-id",

src/core/client/stream/tabs/Comments/ReplyList/ReplyListContainer.tsx

@@ -61,9 +61,10 @@ export const ReplyListContainer: React.FunctionComponent<Props> = props => {
     CommentReplyCreatedSubscription
   );
   useEffect(() => {
-    // TODO: (cvle) check for story or settings state
-    // for whether or not we should turn on subscriptions:
-    // e.g. `if (!props.story.settings.live) { return; }`
+    if (!props.story.settings.live.enabled) {
+      return;
+    }
+
     if (props.story.isClosed || props.settings.disableCommenting.enabled) {
       return;
     }
@@ -83,6 +84,7 @@ export const ReplyListContainer: React.FunctionComponent<Props> = props => {
     props.indentLevel,
     props.relay.hasMore(),
     props.liveDirectRepliesInsertion,
+    props.story.settings.live.enabled,
   ]);
 
   const viewNew = useMutation(ReplyListViewNewMutation);
@@ -208,6 +210,11 @@ const ReplyListContainer5 = createReplyListContainer(
     story: graphql`
       fragment ReplyListContainer5_story on Story {
         isClosed
+        settings {
+          live {
+            enabled
+          }
+        }
         ...CommentContainer_story
         ...LocalReplyListContainer_story
       }
@@ -282,6 +289,11 @@ const ReplyListContainer4 = createReplyListContainer(
     story: graphql`
       fragment ReplyListContainer4_story on Story {
         isClosed
+        settings {
+          live {
+            enabled
+          }
+        }
         ...ReplyListContainer5_story
         ...CommentContainer_story
       }
@@ -354,6 +366,11 @@ const ReplyListContainer3 = createReplyListContainer(
     story: graphql`
       fragment ReplyListContainer3_story on Story {
         isClosed
+        settings {
+          live {
+            enabled
+          }
+        }
         ...ReplyListContainer4_story
         ...CommentContainer_story
       }
@@ -426,6 +443,11 @@ const ReplyListContainer2 = createReplyListContainer(
     story: graphql`
       fragment ReplyListContainer2_story on Story {
         isClosed
+        settings {
+          live {
+            enabled
+          }
+        }
         ...ReplyListContainer3_story
         ...CommentContainer_story
       }
@@ -498,6 +520,11 @@ const ReplyListContainer1 = createReplyListContainer(
     story: graphql`
       fragment ReplyListContainer1_story on Story {
         isClosed
+        settings {
+          live {
+            enabled
+          }
+        }
         ...ReplyListContainer2_story
         ...CommentContainer_story
       }

src/core/client/stream/tabs/Comments/ReplyList/__snapshots__/ReplyListContainer.spec.tsx.snap

@@ -48,6 +48,11 @@ exports[`renders correctly 1`] = `
           story={
             Object {
               "isClosed": false,
+              "settings": Object {
+                "live": Object {
+                  "enabled": true,
+                },
+              },
             }
           }
           viewer={null}
@@ -74,6 +79,11 @@ exports[`renders correctly 1`] = `
           story={
             Object {
               "isClosed": false,
+              "settings": Object {
+                "live": Object {
+                  "enabled": true,
+                },
+              },
             }
           }
           viewer={null}
@@ -97,6 +107,11 @@ exports[`renders correctly 1`] = `
   story={
     Object {
       "isClosed": false,
+      "settings": Object {
+        "live": Object {
+          "enabled": true,
+        },
+      },
     }
   }
   viewNewCount={0}
@@ -164,6 +179,11 @@ exports[`when has more replies renders hasMore 1`] = `
   story={
     Object {
       "isClosed": false,
+      "settings": Object {
+        "live": Object {
+          "enabled": true,
+        },
+      },
     }
   }
   viewNewCount={0}
@@ -229,6 +249,11 @@ exports[`when has more replies when showing all disables show all button 1`] = `
   story={
     Object {
       "isClosed": false,
+      "settings": Object {
+        "live": Object {
+          "enabled": true,
+        },
+      },
     }
   }
   viewNewCount={0}
@@ -294,6 +319,11 @@ exports[`when has more replies when showing all enable show all button after loa
   story={
     Object {
       "isClosed": false,
+      "settings": Object {
+        "live": Object {
+          "enabled": true,
+        },
+      },
     }
   }
   viewNewCount={0}

src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx

@@ -52,9 +52,10 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
   );
   const subscribeToCommentCreated = useSubscription(CommentCreatedSubscription);
   useEffect(() => {
-    // TODO: (cvle) check for story or settings state
-    // for whether or not we should turn on subscriptions:
-    // e.g. `if (!props.story.settings.live) { return; }`
+    if (!props.story.settings.live.enabled) {
+      return;
+    }
+
     if (props.story.isClosed || props.settings.disableCommenting.enabled) {
       return;
     }
@@ -86,6 +87,7 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
     subscribeToCommentCreated,
     props.story.id,
     props.relay.hasMore(),
+    props.story.settings.live.enabled,
   ]);
   const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
   const viewMore = useMutation(AllCommentsTabViewNewMutation);
@@ -183,6 +185,11 @@ const enhanced = withPaginationContainer<
         ) {
         id
         isClosed
+        settings {
+          live {
+            enabled
+          }
+        }
         comments(first: $count, after: $cursor, orderBy: $orderBy)
           @connection(key: "Stream_comments") {
           viewNewEdges {

src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStream.tsx

@@ -13,6 +13,7 @@ import {
   Typography,
 } from "coral-ui/components";
 
+import { LiveUpdatesConfigContainer } from "./LiveUpdatesConfig";
 import MessageBoxConfigContainer from "./MessageBoxConfig";
 import PremodConfigContainer from "./PremodConfig";
 import PremodLinksConfigContainer from "./PremodLinksConfig";
@@ -23,7 +24,9 @@ interface Props {
   onSubmit: (settings: any, form: FormApi) => void;
   storySettings: PropTypesOf<typeof PremodConfigContainer>["storySettings"] &
     PropTypesOf<typeof PremodLinksConfigContainer>["storySettings"] &
-    PropTypesOf<typeof MessageBoxConfigContainer>["storySettings"];
+    PropTypesOf<typeof MessageBoxConfigContainer>["storySettings"] &
+    PropTypesOf<typeof LiveUpdatesConfigContainer>["storySettings"] &
+    PropTypesOf<typeof LiveUpdatesConfigContainer>["storySettingsReadOnly"];
 }
 
 const ConfigureStream: FunctionComponent<Props> = ({
@@ -58,6 +61,12 @@ const ConfigureStream: FunctionComponent<Props> = ({
             </Flex>
             <HorizontalGutter size="double">
               {submitError && <CallOut color="error">{submitError}</CallOut>}
+              <LiveUpdatesConfigContainer
+                onInitValues={onInitValues}
+                storySettings={storySettings}
+                storySettingsReadOnly={storySettings}
+                disabled={submitting}
+              />
               <PremodConfigContainer
                 onInitValues={onInitValues}
                 storySettings={storySettings}

src/core/client/stream/tabs/Configure/ConfigureStream/ConfigureStreamContainer.tsx

@@ -51,8 +51,11 @@ const enhanced = withFragmentContainer<Props>({
         ...PremodConfigContainer_storySettings
         ...PremodLinksConfigContainer_storySettings
         ...MessageBoxConfigContainer_storySettings
+        ...LiveUpdatesConfigContainer_storySettings
+        ...LiveUpdatesConfigContainer_storySettingsReadOnly
       }
     }
   `,
 })(withUpdateStorySettingsMutation(ConfigureStreamContainer));
+
 export default enhanced;

src/core/client/stream/tabs/Configure/ConfigureStream/LiveUpdatesConfig/LiveUpdatesConfig.tsx

@@ -0,0 +1,41 @@
+import { parseBool } from "coral-framework/lib/form";
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
+import ToggleConfig from "../ToggleConfig";
+import WidthLimitedDescription from "../WidthLimitedDescription";
+
+interface Props {
+  disabled: boolean;
+}
+
+const LiveUpdatesConfig: FunctionComponent<Props> = ({ disabled }) => (
+  <Field name="live.enabled" type="checkbox" parse={parseBool}>
+    {({ input }) => (
+      <ToggleConfig
+        id={input.name}
+        name={input.name}
+        onChange={input.onChange}
+        onFocus={input.onFocus}
+        onBlur={input.onBlur}
+        checked={input.checked}
+        disabled={disabled}
+        title={
+          <Localized id="configure-liveUpdates-title">
+            <span>Enable Live Updates for this Story</span>
+          </Localized>
+        }
+      >
+        <Localized id="configure-liveUpdates-description">
+          <WidthLimitedDescription>
+            When enabled, there will be real-time loading and updating of
+            comments as new comments and replies are published.
+          </WidthLimitedDescription>
+        </Localized>
+      </ToggleConfig>
+    )}
+  </Field>
+);
+
+export default LiveUpdatesConfig;

src/core/client/stream/tabs/Configure/ConfigureStream/LiveUpdatesConfig/LiveUpdatesConfigContainer.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { LiveUpdatesConfigContainer_storySettings } from "coral-stream/__generated__/LiveUpdatesConfigContainer_storySettings.graphql";
+import { LiveUpdatesConfigContainer_storySettingsReadOnly } from "coral-stream/__generated__/LiveUpdatesConfigContainer_storySettingsReadOnly.graphql";
+
+import LiveUpdatesConfig from "./LiveUpdatesConfig";
+
+interface Props {
+  storySettings: LiveUpdatesConfigContainer_storySettings;
+  storySettingsReadOnly: LiveUpdatesConfigContainer_storySettingsReadOnly;
+  onInitValues: (values: LiveUpdatesConfigContainer_storySettings) => void;
+  disabled: boolean;
+}
+
+class LiveUpdatesConfigContainer extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    props.onInitValues(props.storySettings);
+  }
+
+  public render() {
+    const {
+      disabled,
+      storySettingsReadOnly: {
+        live: { configurable },
+      },
+    } = this.props;
+
+    if (!configurable) {
+      return null;
+    }
+
+    return <LiveUpdatesConfig disabled={disabled} />;
+  }
+}
+
+const enhanced = withFragmentContainer<Props>({
+  storySettings: graphql`
+    fragment LiveUpdatesConfigContainer_storySettings on StorySettings {
+      live {
+        enabled
+      }
+    }
+  `,
+  storySettingsReadOnly: graphql`
+    fragment LiveUpdatesConfigContainer_storySettingsReadOnly on StorySettings {
+      live {
+        configurable
+      }
+    }
+  `,
+})(LiveUpdatesConfigContainer);
+
+export default enhanced;

src/core/client/stream/tabs/Configure/ConfigureStream/LiveUpdatesConfig/index.ts

@@ -0,0 +1,4 @@
+export {
+  default,
+  default as LiveUpdatesConfigContainer,
+} from "./LiveUpdatesConfigContainer";

src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap

@@ -79,6 +79,48 @@ exports[`renders configure 1`] = `
         <div
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
+          <div>
+            <div
+              className="CheckBox-root"
+            >
+              <input
+                checked={true}
+                className="CheckBox-input"
+                disabled={false}
+                id="live.enabled"
+                name="live.enabled"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                type="checkbox"
+              />
+              <label
+                className="CheckBox-label"
+                htmlFor="live.enabled"
+              >
+                <span
+                  className="CheckBox-labelSpan"
+                >
+                  <span
+                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+                  >
+                    <span>
+                      Enable Live Updates for this Story
+                    </span>
+                  </span>
+                </span>
+              </label>
+            </div>
+            <div
+              className="ToggleConfig-details"
+            >
+              <p
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
+              >
+                When enabled, there will be real-time loading and updating of comments as new comments and replies are published.
+              </p>
+            </div>
+          </div>
           <div>
             <div
               className="CheckBox-root"

src/core/client/stream/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,
+  },
   communityGuidelines: {
     enabled: false,
     content: "",
@@ -358,6 +362,10 @@ export const baseStory = createFixture<GQLStory>({
     messageBox: {
       enabled: false,
     },
+    live: {
+      enabled: true,
+      configurable: true,
+    },
   },
 });