From ac54d25be8beb9f74e9563ec78933d2e992e72b4 Mon Sep 17 00:00:00 2001
From: Arunmozhi <tecoholic@users.noreply.github.com>
Date: Wed, 2 Mar 2022 19:32:46 +0530
Subject: [PATCH] feat: replace cohort text with icon & overlay in posts (#69)

This implements the new UI design of showing an icon for posts that are
specific to a cohort. The icon upon mouse-over shows the name of the
cohort as an overlay.

https://openedx.atlassian.net/browse/TNL-9483
---
 src/discussions/posts/post/PostFooter.jsx     | 39 ++++++++++++-------
 .../posts/post/PostFooter.test.jsx            |  8 ++++
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/discussions/posts/post/PostFooter.jsx b/src/discussions/posts/post/PostFooter.jsx
index eb83a4a9..45628f47 100644
--- a/src/discussions/posts/post/PostFooter.jsx
+++ b/src/discussions/posts/post/PostFooter.jsx
@@ -66,20 +66,31 @@ function PostFooter({
         <Badge variant="light">{intl.formatMessage(messages.newLabel, { count: post.unreadCommentCount })}</Badge>
       ) : null}
       <div className="d-flex flex-fill justify-content-end align-items-center">
-        {!preview
-          && (
-            <span className="text-gray-500 mr-4 d-flex align-items-center">
-              <Icon
-                src={Person}
-                className="mr-1"
-                style={{
-                  width: '1em',
-                  height: '1em',
-                }}
-              />
-              {post.groupName || intl.formatMessage(messages.visibleToAll)}
-            </span>
-          )}
+        {
+          post.groupId
+            ? (
+              <>
+                <OverlayTrigger
+                  overlay={(
+                    <Tooltip>
+                      {post.groupName || intl.formatMessage(messages.visibleToAll)}
+                    </Tooltip>
+                  )}
+                >
+                  <Icon
+                    data-testid="cohort-icon"
+                    src={Person}
+                    className="text-gray-500"
+                    style={{
+                      width: '1em',
+                      height: '1em',
+                    }}
+                  />
+                </OverlayTrigger>
+                <span className="text-gray-500 mx-1">·</span>
+              </>
+            ) : null
+        }
         <span title={post.createdAt} className="text-gray-500">
           {timeago.format(post.createdAt, intl.locale)}
         </span>
diff --git a/src/discussions/posts/post/PostFooter.test.jsx b/src/discussions/posts/post/PostFooter.test.jsx
index 43129653..7ff4ac8c 100644
--- a/src/discussions/posts/post/PostFooter.test.jsx
+++ b/src/discussions/posts/post/PostFooter.test.jsx
@@ -73,4 +73,12 @@ describe('PostFooter', () => {
     renderComponent({ ...mockPost, unreadCommentCount: 1, commentCount: 1 });
     expect(screen.queryByText('1 new')).toBeFalsy();
   });
+
+  it('has the cohort icon only when group information is present', () => {
+    renderComponent(mockPost);
+    expect(screen.queryByTestId('cohort-icon')).toBeFalsy();
+
+    renderComponent({ ...mockPost, groupId: 5, groupName: 'Test Cohort' });
+    expect(screen.getByTestId('cohort-icon')).toBeTruthy();
+  });
 });