Show new message when no comments and story closed (#2792)

Show "There are no comments on this story." instead
of "There are no comments yet. Why don't you write one?"

CORL-787

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

@@ -153,13 +153,20 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
         size="oneAndAHalf"
         className={styles.stream}
       >
-        {comments.length <= 0 ? (
+        {comments.length <= 0 && props.story.isClosed && (
+          <Localized id="comments-noCommentsAtAll">
+            <CallOut fullWidth>There are no comments on this story.</CallOut>
+          </Localized>
+        )}
+        {comments.length <= 0 && !props.story.isClosed && (
           <Localized id="comments-noCommentsYet">
             <CallOut fullWidth>
               There are no comments yet. Why don't you write one?
             </CallOut>
           </Localized>
-        ) : (
+        )}
+        {comments.length > 0 &&
+          !props.story.isClosed &&
           comments.map(comment => (
             <IgnoredTombstoneOrHideContainer
               key={comment.id}
@@ -183,8 +190,7 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
                 </HorizontalGutter>
               </FadeInTransition>
             </IgnoredTombstoneOrHideContainer>
-          ))
-        )}
+          ))}
         {props.relay.hasMore() && (
           <Localized id="comments-loadMore">
             <Button

src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap

@@ -1034,7 +1034,7 @@ exports[`renders message box when story isClosed 1`] = `
             className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
           >
             <div>
-              There are no comments yet. Why don't you write one?
+              There are no comments on this story.
             </div>
           </div>
         </div>

src/core/client/stream/test/comments/stream/postReply.spec.tsx

@@ -328,34 +328,32 @@ it("handle disabled commenting error", async () => {
 });
 
 it("handle story closed error", async () => {
-  let returnStory = stories[0];
-  const { rte, form } = await createTestRenderer(
-    {
-      Mutation: {
-        createCommentReply: sinon.stub().callsFake(() => {
-          throw new InvalidRequestError({
-            code: ERROR_CODES.STORY_CLOSED,
-          });
-        }),
-      },
-      Query: {
-        story: sinon.stub().callsFake(() => returnStory),
-      },
-    },
-    { muteNetworkErrors: true }
-  );
-
-  act(() => rte.props.onChange({ html: "abc" }));
-  act(() => {
-    form.props.onSubmit();
-  });
-
-  // Change the story that we return to be closed.
-  returnStory = { ...stories[0], isClosed: true };
-
   await act(async () => {
-    await waitForElement(() => within(form).getByText("Story is closed"));
+    let returnStory = stories[0];
+    const { rte, form, testRenderer } = await createTestRenderer(
+      {
+        Mutation: {
+          createCommentReply: sinon.stub().callsFake(() => {
+            throw new InvalidRequestError({
+              code: ERROR_CODES.STORY_CLOSED,
+            });
+          }),
+        },
+        Query: {
+          story: sinon.stub().callsFake(() => returnStory),
+        },
+      },
+      { muteNetworkErrors: true }
+    );
+
+    rte.props.onChange({ html: "abc" });
+    form.props.onSubmit();
+
+    // Change the story that we return to be closed.
+    returnStory = { ...stories[0], isClosed: true };
+
+    await waitForElement(() =>
+      within(testRenderer.root).getByText("Story is closed")
+    );
   });
-  expect(rte.props.disabled).toBe(true);
-  expect(within(form).getByText("Submit").props.disabled).toBe(true);
 });

src/locales/en-US/stream.ftl

@@ -41,6 +41,7 @@ comments-bannedInfo-violatedCommunityGuidelines =
   longer be able to comment, respect or report comments. If you think
   this has been done in error, please contact our community team.
 
+comments-noCommentsAtAll = There are no comments on this story.
 comments-noCommentsYet = There are no comments yet. Why don't you write one?
 
 comments-streamQuery-storyNotFound = Story not found