feat: show check icons for endorsed comments (#85)

Show the CheckCircle icon for posts which are marked as answers and show
the Verified badge icon for discussion posts marked as endorsed.

https://openedx.atlassian.net/browse/TNL-9611

src/discussions/comments/comment/CommentHeader.jsx

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
 import { injectIntl } from '@edx/frontend-platform/i18n';
-import { Avatar } from '@edx/paragon';
+import { Avatar, Icon } from '@edx/paragon';
+import { CheckCircle, Verified } from '@edx/paragon/icons';
 
 import { ThreadType } from '../../../data/constants';
 import { AuthorLabel } from '../../common';
@@ -24,13 +25,18 @@ function CommentHeader({
         <Avatar className="m-2" alt={comment.author} src={authorAvatars?.imageUrlSmall} />
         <AuthorLabel author={comment.author} authorLabel={comment.authorLabel} />
       </div>
-      <ActionsDropdown
-        commentOrPost={{
-          ...comment,
-          postType,
-        }}
-        actionHandlers={actionHandlers}
-      />
+      <div className="d-flex align-items-center">
+        {comment.endorsed && (postType === 'question'
+          ? <Icon src={CheckCircle} className="text-success" data-testid="check-icon" />
+          : <Icon src={Verified} data-testid="verified-icon" />)}
+        <ActionsDropdown
+          commentOrPost={{
+            ...comment,
+            postType,
+          }}
+          actionHandlers={actionHandlers}
+        />
+      </div>
     </div>
   );
 }

src/discussions/comments/comment/CommentHeader.test.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../../store';
+import CommentHeader from './CommentHeader';
+
+let store;
+
+function renderComponent(comment, postType, actionHandlers) {
+  return render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <CommentHeader comment={comment} postType={postType} actionHandlers={actionHandlers} />
+      </AppProvider>
+    </IntlProvider>,
+  );
+}
+
+const mockComment = {
+  author: 'abc123',
+  authorLabel: 'ABC 123',
+  endorsed: true,
+  editableFields: [],
+};
+
+describe('Comment Header', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('should render verified icon for endorsed discussion posts', () => {
+    renderComponent(mockComment, 'discussion', {});
+    expect(screen.queryAllByTestId('verified-icon')).toHaveLength(1);
+  });
+  it('should render check icon for endorsed question posts', () => {
+    renderComponent(mockComment, 'question', {});
+    expect(screen.queryAllByTestId('check-icon')).toHaveLength(1);
+  });
+});