fix: fix post height and remove overstate from author label (#472)

* fix: fixed post length according to figma

* fix: remove hoverstate from author label and author icon

* style: adds tooltip in hovercard for endorsemment icon

* test: fix test cases

* test: adds test cases for descreaased coverage

* refactor: updated api call to a method for reusability

* refactor: changed test descriptions

src/discussions/common/AuthorLabel.jsx

@@ -44,34 +44,31 @@ function AuthorLabel({
 
   const isRetiredUser = author ? author.startsWith('retired__user') : false;
   const showTextPrimary = !authorLabelMessage && !isRetiredUser && !alert;
-
   const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
 
   const showUserNameAsLink = useShowLearnersTab()
     && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
 
+  const authorName = (
+    <span
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+        'text-gray-700': isRetiredUser,
+        'text-primary-500': !authorLabelMessage && !isRetiredUser,
+      })}
+      role="heading"
+      aria-level="2"
+    >
+      {isRetiredUser ? '[Deactivated]' : author}
+    </span>
+  );
   const labelContents = (
-    <div className={className}>
-      {!alert && (
-        <span
-          className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
-            'text-gray-700': isRetiredUser,
-            'text-primary-500': !authorLabelMessage && !isRetiredUser,
-          })}
-          role="heading"
-          aria-level="2"
-        >
-          {isRetiredUser ? '[Deactivated]' : author}
-        </span>
-      )}
-
+    <>
       <OverlayTrigger
         overlay={(
           <Tooltip id={`endorsed-by-${author}-tooltip`}>
             {author}
           </Tooltip>
         )}
-
         trigger={['hover', 'focus']}
       >
         <div className={classNames('d-flex flex-row align-items-center', {
@@ -86,20 +83,19 @@ function AuthorLabel({
             src={icon}
             data-testid="author-icon"
           />
-
+          {authorLabelMessage && (
+            <span
+              className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+                'text-primary-500': showTextPrimary,
+                'text-gray-700': isRetiredUser,
+              })}
+              style={{ marginLeft: '2px' }}
+            >
+              {authorLabelMessage}
+            </span>
+          )}
         </div>
       </OverlayTrigger>
-      {authorLabelMessage && (
-        <span
-          className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
-            'text-primary-500': showTextPrimary,
-            'text-gray-700': isRetiredUser,
-          })}
-          style={{ marginLeft: '2px' }}
-        >
-          {authorLabelMessage}
-        </span>
-      )}
       {postCreatedAt && (
         <span
           title={postCreatedAt}
@@ -112,23 +108,25 @@ function AuthorLabel({
           {timeago.format(postCreatedAt, 'time-locale')}
         </span>
       )}
-
-    </div>
+    </>
   );
 
   return showUserNameAsLink
     ? (
-      <Link
-        data-testid="learner-posts-link"
-        id="learner-posts-link"
-        to={discussionsPath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })(location)}
-        className="text-decoration-none"
-        style={{ width: 'fit-content' }}
-      >
+      <div className={className}>
+        <Link
+          data-testid="learner-posts-link"
+          id="learner-posts-link"
+          to={discussionsPath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })(location)}
+          className="text-decoration-none"
+          style={{ width: 'fit-content' }}
+        >
+          {!alert && authorName}
+        </Link>
         {labelContents}
-      </Link>
+      </div>
     )
-    : <>{labelContents}</>;
+    : <div className={className}>{authorName}{labelContents}</div>;
 }
 
 AuthorLabel.propTypes = {

src/discussions/common/AuthorLabel.test.jsx

@@ -93,12 +93,13 @@ describe('Author label', () => {
       async () => {
         renderComponent(author, authorLabel, linkToProfile, labelColor);
         const authorElement = container.querySelector('[role=heading]');
-        const labelElement = authorElement.parentNode.lastChild;
+        const labelParentNode = authorElement.parentNode.parentNode;
+        const labelElement = labelParentNode.lastChild.lastChild;
         const label = ['TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
 
         if (linkToProfile) {
-          expect(authorElement.parentNode).toHaveClass(labelColor);
-          expect(authorElement.parentNode.lastChild).toHaveTextContent(label);
+          expect(labelParentNode).toHaveClass(labelColor);
+          expect(labelElement).toHaveTextContent(label);
         } else {
           expect(authorElement.parentNode.lastChild).not.toHaveTextContent(label, { exact: true });
           expect(authorElement.parentNode).not.toHaveClass(labelColor, { exact: true });

src/discussions/common/HoverCard.jsx

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
-import { injectIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon, IconButton } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Button, Icon, IconButton, OverlayTrigger, Tooltip,
+} from '@edx/paragon';
 
 import {
   StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
@@ -16,6 +18,7 @@ import ActionsDropdown from './ActionsDropdown';
 import { DiscussionContext } from './context';
 
 function HoverCard({
+  intl,
   commentOrPost,
   actionHandlers,
   handleResponseCommentButton,
@@ -49,17 +52,26 @@ function HoverCard({
       )}
       {endorseIcons && (
         <div className="hover-button">
-          <IconButton
-            src={endorseIcons.icon}
-            iconAs={Icon}
-            onClick={() => {
-              const actionFunction = actionHandlers[endorseIcons.action];
-              actionFunction();
-            }}
-            className={['endorse', 'unendorse'].includes(endorseIcons.id) ? 'text-dark-500' : 'text-success-500'}
-            size="sm"
-            alt="Endorse"
-          />
+          <OverlayTrigger
+            overlay={(
+              <Tooltip id="endorsed-icon-tooltip">
+                {intl.formatMessage(endorseIcons.label)}
+              </Tooltip>
+            )}
+            trigger={['hover', 'focus']}
+          >
+            <IconButton
+              src={endorseIcons.icon}
+              iconAs={Icon}
+              onClick={() => {
+                const actionFunction = actionHandlers[endorseIcons.action];
+                actionFunction();
+              }}
+              className={['endorse', 'unendorse'].includes(endorseIcons.id) ? 'text-dark-500' : 'text-success-500'}
+              size="sm"
+              alt="Endorse"
+            />
+          </OverlayTrigger>
         </div>
       )}
       <div className="hover-button">
@@ -98,6 +110,7 @@ function HoverCard({
 }
 
 HoverCard.propTypes = {
+  intl: intlShape.isRequired,
   commentOrPost: PropTypes.oneOfType([commentShape, postShape]).isRequired,
   actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
   handleResponseCommentButton: PropTypes.func.isRequired,