Merge pull request #86 from openedx/tnl-9648

fix: report indicator showing different on post summary

src/discussions/posts/post/PostLink.jsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Badge, Icon } from '@edx/paragon';
-import { Flag, Pin } from '@edx/paragon/icons';
+import { Pin } from '@edx/paragon/icons';
 
 import { Routes, ThreadType } from '../../../data/constants';
 import AuthorLabel from '../../common/AuthorLabel';
@@ -42,12 +42,6 @@ function PostLink({
           <Icon src={Pin} className="position-absolute" />
         </div>
       )}
-      {post.abuseFlagged && (
-        <div className="align-items-center bg-danger-100 d-flex flex-fill p-1">
-          <Icon className="text-danger-700" src={Flag} />
-          <span className="text-gray-700 x-small">{intl.formatMessage(messages.contentReported)}</span>
-        </div>
-      )}
       <div
         className={classNames('d-flex flex-row flex-fill mw-100 p-3.5 border-primary-500', { 'bg-light-200': post.read })}
         style={post.id === postId ? {
@@ -69,6 +63,12 @@ function PostLink({
                       <Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>
                     </div>
                   )}
+                {post.abuseFlagged
+                  && (
+                    <div className="ml-auto">
+                      <Badge variant="danger" data-testid="reported-post">{intl.formatMessage(messages.contentReported)}</Badge>
+                    </div>
+                  )}
               </div>
               <AuthorLabel
                 author={post.author || intl.formatMessage(messages.anonymous)}

src/discussions/posts/post/PostLink.test.jsx

@@ -0,0 +1,67 @@
+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 PostLink from './PostLink';
+
+let store;
+
+function renderComponent(post) {
+  return render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <PostLink post={post} key={post.id} />
+      </AppProvider>
+    </IntlProvider>,
+  );
+}
+
+const mockPost = {
+  abuseFlagged: false,
+  author: 'test-user',
+  commentCount: 5,
+  courseId: 'course-v1:edX+DemoX+Demo_Course',
+  following: false,
+  id: 'test-id',
+  pinned: false,
+  rawBody: '<p>a test post</p>',
+  hasEndorsed: false,
+  voted: false,
+  voteCount: 10,
+  previewBody: '<p>a test post</p>',
+  read: false,
+  title: 'test post',
+  topicId: 'i4x-edx-eiorguegnru-course-foobarbaz',
+  unreadCommentCount: 2,
+  groupName: null,
+  groupId: null,
+  createdAt: '2022-02-25T09:17:17Z',
+  closed: false,
+};
+
+describe('PostFooter', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('has reported text only when abuseFlagged is true', () => {
+    renderComponent(mockPost);
+    expect(screen.queryByTestId('reported-post')).toBeFalsy();
+
+    renderComponent({ ...mockPost, abuseFlagged: true });
+    expect(screen.getByTestId('reported-post')).toBeTruthy();
+  });
+});

src/discussions/posts/post/messages.js

@@ -16,7 +16,8 @@ const messages = defineMessages({
   },
   contentReported: {
     id: 'discussions.post.contentReported',
-    defaultMessage: 'Content reported for staff review',
+    defaultMessage: 'Reported',
+    description: 'Content reported for staff review',
   },
   following: {
     id: 'discussions.post.following',