feat: modified TA icon according to role (#665)

* feat: modified TA icon according to role

* fix: fixed icon and tooltip position

* fix: fixed failing testcase

* refactor: removed duplication

* test: added testcases to check for updated user labels

* refactor: updated variables names for clarity

* refactor: moved authorLabel selection logic to utils

---------

Co-authored-by: sohailfatima <[email protected]>

Author: ayesha-waris

src/data/constants.js

@@ -80,6 +80,7 @@ export const RequestStatus = {
  */
 export const AvatarOutlineAndLabelColors = {
   Staff: 'staff-color',
+  Moderator: 'TA-color',
   'Community TA': 'TA-color',
 };
 

src/discussions/common/AuthorLabel.jsx

@@ -7,10 +7,10 @@ import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
-import { Institution, School } from '@edx/paragon/icons';
 
 import { Routes } from '../../data/constants';
 import messages from '../messages';
+import { getAuthorLabel } from '../utils';
 import DiscussionContext from './context';
 import timeLocale from './time-locale';
 
@@ -27,18 +27,7 @@ const AuthorLabel = ({
   timeago.register('time-locale', timeLocale);
   const intl = useIntl();
   const { courseId, enableInContextSidebar } = useContext(DiscussionContext);
-  let icon = null;
-  let authorLabelMessage = null;
-
-  if (authorLabel === 'Staff') {
-    icon = Institution;
-    authorLabelMessage = intl.formatMessage(messages.authorLabelStaff);
-  }
-
-  if (authorLabel === 'Community TA') {
-    icon = School;
-    authorLabelMessage = intl.formatMessage(messages.authorLabelTA);
-  }
+  const { icon, authorLabelMessage } = useMemo(() => getAuthorLabel(intl, authorLabel), [authorLabel]);
 
   const isRetiredUser = author ? author.startsWith('retired__user') : false;
   const showTextPrimary = !authorLabelMessage && !isRetiredUser && !alert;
@@ -63,17 +52,15 @@ const AuthorLabel = ({
   const labelContents = useMemo(() => (
     <>
       <OverlayTrigger
+        placement={authorToolTip ? 'top' : 'right'}
         overlay={(
-          <Tooltip id={`endorsed-by-${author}-tooltip`}>
-            {author}
+          <Tooltip id={authorToolTip ? `endorsed-by-${author}-tooltip` : `${authorLabel}-label-tooltip`}>
+            {authorToolTip ? author : authorLabel}
           </Tooltip>
         )}
         trigger={['hover', 'focus']}
       >
-        <div className={classNames('d-flex flex-row align-items-center', {
-          'disable-div': !authorToolTip,
-        })}
-        >
+        <div className={classNames('d-flex flex-row align-items-center')}>
           <Icon
             style={{
               width: '1rem',

src/discussions/common/AuthorLabel.test.jsx

@@ -62,6 +62,7 @@ describe('Author label', () => {
   describe.each([
     ['anonymous', null, false, ''],
     ['ta_user', 'Community TA', true, 'text-TA-color'],
+    ['moderator_user', 'Moderator', true, 'text-TA-color'],
     ['retired__user', null, false, ''],
     ['staff_user', 'Staff', true, 'text-staff-color'],
     ['learner_user', null, false, ''],
@@ -106,7 +107,7 @@ describe('Author label', () => {
         const authorElement = container.querySelector('[role=heading]');
         const labelParentNode = authorElement.parentNode.parentNode;
         const labelElement = labelParentNode.lastChild.lastChild;
-        const label = ['TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
+        const label = ['CTA', 'TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
 
         if (linkToProfile) {
           expect(labelParentNode).toHaveClass(labelColor);

src/discussions/messages.js

@@ -153,9 +153,14 @@ const messages = defineMessages({
     defaultMessage: 'Staff',
     description: 'A label for staff users displayed next to their username.',
   },
+  authorLabelModerator: {
+    id: 'discussions.authors.label.moderator',
+    defaultMessage: 'TA',
+    description: 'A label for moderators displayed next to their username.',
+  },
   authorLabelTA: {
     id: 'discussions.authors.label.ta',
-    defaultMessage: 'TA',
+    defaultMessage: 'CTA',
     description: 'A label for community TAs displayed next to their username.',
   },
   loadMorePosts: {

src/discussions/utils.js

@@ -10,7 +10,8 @@ import {
 import { getConfig } from '@edx/frontend-platform';
 import {
   CheckCircle, CheckCircleOutline, Delete, Edit, InsertLink,
-  Lock, LockOpen, Pin, Report, Verified, VerifiedOutline,
+  Institution, Lock, LockOpen, Pin, Report, School,
+  Verified, VerifiedOutline,
 } from '@edx/paragon/icons';
 
 import {
@@ -293,3 +294,22 @@ export function isLastElementOfList(list, element) {
 export function truncatePath(path) {
   return path.substring(0, path.lastIndexOf('/'));
 }
+
+export function getAuthorLabel(intl, authorLabel) {
+  const authorLabelMappings = {
+    Staff: {
+      icon: Institution,
+      authorLabelMessage: intl.formatMessage(messages.authorLabelStaff),
+    },
+    Moderator: {
+      icon: School,
+      authorLabelMessage: intl.formatMessage(messages.authorLabelModerator),
+    },
+    'Community TA': {
+      icon: School,
+      authorLabelMessage: intl.formatMessage(messages.authorLabelTA),
+    },
+  };
+
+  return authorLabelMappings[authorLabel] || {};
+}