From 8d368b03ecb933ce69e372a3a7295809a7dd4075 Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Tue, 10 Sep 2019 04:18:36 -0600
Subject: [PATCH] Add call out placeholder for comment stream empty state
 (#2545)

CORL-567
---
 .../AllCommentsTabContainer.tsx               | 58 +++++++++++--------
 .../renderMessageBox.spec.tsx.snap            | 40 +++++++++++--
 src/locales/en-US/stream.ftl                  |  3 +-
 3 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
index 920de4394..6453c48e3 100644
--- a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
@@ -18,7 +18,7 @@ import { AllCommentsTabContainer_viewer } from "coral-stream/__generated__/AllCo
 import { AllCommentsTabContainerLocal } from "coral-stream/__generated__/AllCommentsTabContainerLocal.graphql";
 import { AllCommentsTabContainerPaginationQueryVariables } from "coral-stream/__generated__/AllCommentsTabContainerPaginationQuery.graphql";
 import CLASSES from "coral-stream/classes";
-import { Box, Button, HorizontalGutter } from "coral-ui/components";
+import { Box, Button, CallOut, HorizontalGutter } from "coral-ui/components";
 
 import { CommentContainer } from "../../Comment";
 import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer";
@@ -128,30 +128,38 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
         size="oneAndAHalf"
         className={styles.stream}
       >
-        {comments.map(comment => (
-          <IgnoredTombstoneOrHideContainer
-            key={comment.id}
-            viewer={props.viewer}
-            comment={comment}
-          >
-            <FadeInTransition active={Boolean(comment.enteredLive)}>
-              <HorizontalGutter>
-                <CommentContainer
-                  viewer={props.viewer}
-                  settings={props.settings}
-                  comment={comment}
-                  story={props.story}
-                />
-                <ReplyListContainer
-                  settings={props.settings}
-                  viewer={props.viewer}
-                  comment={comment}
-                  story={props.story}
-                />
-              </HorizontalGutter>
-            </FadeInTransition>
-          </IgnoredTombstoneOrHideContainer>
-        ))}
+        {comments.length <= 0 ? (
+          <Localized id="comments-noCommentsYet">
+            <CallOut fullWidth>
+              There are no comments yet. Why don't you write one?
+            </CallOut>
+          </Localized>
+        ) : (
+          comments.map(comment => (
+            <IgnoredTombstoneOrHideContainer
+              key={comment.id}
+              viewer={props.viewer}
+              comment={comment}
+            >
+              <FadeInTransition active={Boolean(comment.enteredLive)}>
+                <HorizontalGutter>
+                  <CommentContainer
+                    viewer={props.viewer}
+                    settings={props.settings}
+                    comment={comment}
+                    story={props.story}
+                  />
+                  <ReplyListContainer
+                    settings={props.settings}
+                    viewer={props.viewer}
+                    comment={comment}
+                    story={props.story}
+                  />
+                </HorizontalGutter>
+              </FadeInTransition>
+            </IgnoredTombstoneOrHideContainer>
+          ))
+        )}
         {props.relay.hasMore() && (
           <Localized id="comments-loadMore">
             <Button
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
index 0f1950dc0..adb258fa0 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
@@ -195,7 +195,15 @@ exports[`renders message box when commenting disabled 1`] = `
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"
-        />
+        >
+          <div
+            className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
+          >
+            <div>
+              There are no comments yet. Why don't you write one?
+            </div>
+          </div>
+        </div>
       </section>
     </div>
   </div>
@@ -506,7 +514,15 @@ exports[`renders message box when logged in 1`] = `
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"
-        />
+        >
+          <div
+            className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
+          >
+            <div>
+              There are no comments yet. Why don't you write one?
+            </div>
+          </div>
+        </div>
       </section>
     </div>
   </div>
@@ -791,7 +807,15 @@ exports[`renders message box when not logged in 1`] = `
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"
-        />
+        >
+          <div
+            className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
+          >
+            <div>
+              There are no comments yet. Why don't you write one?
+            </div>
+          </div>
+        </div>
       </section>
     </div>
   </div>
@@ -983,7 +1007,15 @@ exports[`renders message box when story isClosed 1`] = `
           data-testid="comments-allComments-log"
           id="comments-allComments-log"
           role="log"
-        />
+        >
+          <div
+            className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
+          >
+            <div>
+              There are no comments yet. Why don't you write one?
+            </div>
+          </div>
+        </div>
       </section>
     </div>
   </div>
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 87eb41db4..84516f6b5 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -26,6 +26,7 @@ comments-featuredCommentTooltip-handSelectedComments =
 comments-featuredCommentTooltip-toggleButton =
   .aria-label = Toggle featured comments tooltip
 
+comments-noCommentsYet = There are no comments yet. Why don't you write one?
 
 comments-streamQuery-storyNotFound = Story not found
 
@@ -367,7 +368,7 @@ profile-changeUsername-newUsername-label = New username
 profile-changeUsername-confirmNewUsername-label = Confirm new username
 profile-changeUsername-cancel = Cancel
 profile-changeUsername-submit = <ButtonIcon>save</ButtonIcon> <span>Save</span>
-profile-changeUsername-submit-button = Save 
+profile-changeUsername-submit-button = Save
 profile-changeUsername-recentChange = Your username has been changed in the last { framework-timeago-time }. You may change your username again on { $nextUpdate }
 profile-changeUsername-close = Close