fix: added hover to stats (#313)

Co-authored-by: adeel.tajamul <adeel.tajamul@arbisoft.com>

src/discussions/learners/learner/LearnerFooter.jsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
-import { Edit, Report } from '@edx/paragon/icons';
+import { Edit, Report, ReportGmailerrorred } from '@edx/paragon/icons';
 
 import { QuestionAnswerOutline } from '../../../components/icons';
 import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
@@ -23,22 +23,48 @@ function LearnerFooter({
 
   return (
     <div className="d-flex align-items-center pt-1 mt-2.5" style={{ marginBottom: '2px' }}>
-      <div className="d-flex align-items-center">
-        <Icon src={QuestionAnswerOutline} className="icon-size mr-2" />
-        {learner.threads}
-      </div>
-      <div className="d-flex align-items-center">
-        <Icon src={Edit} className="icon-size mr-2 ml-4" />
-        {learner.replies + learner.responses}
-      </div>
+      <OverlayTrigger
+        placement="right"
+        overlay={(
+          <Tooltip>
+            <div className="d-flex flex-column align-items-start">
+              {intl.formatMessage(messages.allActivity)}
+            </div>
+          </Tooltip>
+        )}
+      >
+        <div className="d-flex align-items-center">
+          <Icon src={QuestionAnswerOutline} className="icon-size mr-2" />
+          {learner.threads + learner.responses + learner.replies}
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger
+        placement="right"
+        overlay={(
+          <Tooltip>
+            <div className="d-flex flex-column align-items-start">
+              {intl.formatMessage(messages.posts)}
+            </div>
+          </Tooltip>
+        )}
+      >
+        <div className="d-flex align-items-center">
+          <Icon src={Edit} className="icon-size mr-2 ml-4" />
+          {learner.threads}
+        </div>
+      </OverlayTrigger>
       {Boolean(canSeeLearnerReportedStats) && (
         <OverlayTrigger
+          placement="right"
           overlay={(
             <Tooltip id={`learner-${learner.username}`}>
               <div className="d-flex flex-column align-items-start">
-                <span>
-                  {intl.formatMessage(messages.reported, { reported: activeFlags })}
-                </span>
+                {Boolean(activeFlags)
+                  && (
+                  <span>
+                    {intl.formatMessage(messages.reported, { reported: activeFlags })}
+                  </span>
+                  )}
                 {Boolean(inactiveFlags)
                       && (
                         <span>
@@ -50,7 +76,7 @@ function LearnerFooter({
           )}
         >
           <div className="d-flex align-items-center">
-            <Icon src={Report} className="icon-size mr-2 ml-4 text-danger" />
+            <Icon src={activeFlags ? Report : ReportGmailerrorred} className="icon-size mr-2 ml-4 text-danger" />
             {activeFlags} {Boolean(inactiveFlags) && `/ ${inactiveFlags}`}
           </div>
         </OverlayTrigger>

src/discussions/learners/learner/LearnerFooter.test.jsx

@@ -56,7 +56,7 @@ describe('LearnerFooter', () => {
   it('Always shows threads and replies icons', () => {
     renderComponent(mockLearner);
     expect(screen.getByText(mockLearner.threads)).toBeTruthy();
-    expect(screen.getByText(mockLearner.replies + mockLearner.responses)).toBeTruthy();
+    expect(screen.getByText(mockLearner.replies + mockLearner.responses + mockLearner.threads)).toBeTruthy();
   });
 
   it('shows flags when the learner have ones', () => {

src/discussions/learners/messages.js

@@ -47,6 +47,16 @@ const messages = defineMessages({
     }`,
     description: 'Text for current selected learners filter',
   },
+  allActivity: {
+    id: 'discussion.learner.allActivity',
+    defaultMessage: 'All activity',
+    description: 'Tooltip text for all activity icon',
+  },
+  posts: {
+    id: 'discussion.learner.posts',
+    defaultMessage: 'Posts',
+    description: 'Tooltip text for all posts icon',
+  },
 });
 
 export default messages;