feat: added tooltip for author role (#795)

Author: sundasnoreen12

src/discussions/common/AuthorLabel.jsx

@@ -55,7 +55,11 @@ const AuthorLabel = ({
         placement={authorToolTip ? 'top' : 'right'}
         overlay={(
           <Tooltip id={authorToolTip ? `endorsed-by-${author}-tooltip` : `${authorLabel}-label-tooltip`}>
-            {authorToolTip ? author : authorLabel}
+            <>
+              {authorToolTip ? author : authorLabel}
+              <br />
+              {intl.formatMessage(messages.authorAdminDescription)}
+            </>
           </Tooltip>
         )}
         trigger={['hover', 'focus']}
@@ -97,18 +101,38 @@ const AuthorLabel = ({
     </>
   ), [author, authorLabelMessage, authorToolTip, icon, isRetiredUser, postCreatedAt, showTextPrimary, alert]);
 
+  const learnerPostsLink = (
+    <Link
+      data-testid="learner-posts-link"
+      id="learner-posts-link"
+      to={generatePath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })}
+      className="text-decoration-none text-reset"
+      style={{ width: 'fit-content' }}
+    >
+      {!alert && authorName}
+    </Link>
+  );
+
   return showUserNameAsLink
     ? (
       <div className={`${className} flex-wrap`}>
-        <Link
-          data-testid="learner-posts-link"
-          id="learner-posts-link"
-          to={generatePath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })}
-          className="text-decoration-none text-reset"
-          style={{ width: 'fit-content' }}
-        >
-          {!alert && authorName}
-        </Link>
+        {!authorLabel ? (
+          <OverlayTrigger
+            placement={authorToolTip ? 'top' : 'right'}
+            overlay={(
+              <Tooltip id={authorToolTip ? `endorsed-by-${author}-tooltip` : `${authorLabel}-label-tooltip`}>
+                <>
+                  {intl.formatMessage(messages.authorLearnerTitle)}
+                  <br />
+                  {intl.formatMessage(messages.authorLearnerDescription)}
+                </>
+              </Tooltip>
+        )}
+            trigger={['hover', 'focus']}
+          >
+            {learnerPostsLink}
+          </OverlayTrigger>
+        ) : learnerPostsLink }
         {labelContents}
       </div>
     )

src/discussions/messages.js

@@ -208,6 +208,21 @@ const messages = defineMessages({
     defaultMessage: 'Enroll',
     description: 'Action button on content page when the user has not logged into the MFE or not enrolled in the course.',
   },
+  authorAdminDescription: {
+    id: 'discussions.author.admin.description',
+    defaultMessage: 'Part of the team that runs this course',
+    description: 'tooltip for course admins',
+  },
+  authorLearnerTitle: {
+    id: 'discussions.author.learner.title',
+    defaultMessage: 'Learner',
+    description: 'tooltip for course learners title',
+  },
+  authorLearnerDescription: {
+    id: 'discussions.author.learner.description',
+    defaultMessage: 'Taking the course just like you',
+    description: 'tooltip for course learners',
+  },
 });
 
 export default messages;