feat: Add package-lock file version check

fix: post summary size fix

.github/workflows/ci.yml

@@ -33,7 +33,5 @@ jobs:
       run: npm run build
     - name: i18n_extract
       run: npm run i18n_extract
-    - name: is-es5
-      run: npm run is-es5
     - name: Coverage
       uses: codecov/codecov-action@v2

.github/workflows/lockfileversion-check.yml

@@ -0,0 +1,13 @@
+#check package-lock file version
+
+name: Lockfile Version check
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+
+jobs:
+  version-check:
+    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master

.nvmrc

@@ -1,2 +1 @@
-12.22.5
-
+12

package.json

@@ -59,7 +59,7 @@
     "yup": "0.31.1"
   },
   "devDependencies": {
-    "@edx/frontend-build": "9.1.2",
+    "@edx/frontend-build": "9.1.4",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "13.5.0",

src/components/TinyMCEEditor.jsx

@@ -92,6 +92,8 @@ export default function TinyMCEEditor(props) {
         content_css: false,
         content_style: contentStyle,
         body_class: 'm-2',
+        default_link_target: '_blank',
+        target_list: false,
         images_upload_handler: uploadHandler,
         setup,
       }}

src/components/icons/QuestionAnswer.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { _extends } from './common';
+
+export default function QuestionAnswer(props) {
+  return /* #__PURE__ */React.createElement('svg', _extends({
+    width: 20,
+    height: 20,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+  }, props), /* #__PURE__ */React.createElement('path', {
+    d: 'M16.7371 4.00002H14.2371V11.5H3.4038V14H13.4038L16.7371 17.3334V4.00002ZM12.5705 9.83335V0.666687H0.0704651V13.1667L3.4038 9.83335H12.5705Z',
+    fill: 'currentColor',
+  }));
+}

src/components/icons/QuestionAnswerOutline.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { _extends } from './common';
+
+export default function QuestionAnswerOutline(props) {
+  return /* #__PURE__ */React.createElement('svg', _extends({
+    width: 20,
+    height: 20,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+  }, props), /* #__PURE__ */React.createElement('path', {
+    d: 'M 16.7371 4 H 14.2371 V 11.5 H 3.4038 V 14 H 13.4038 L 16.7371 17.3334 V 4 Z M 12.5705 9.8333 V 0.6667 H 0.0705 V 13.1667 L 3.4038 9.8333 H 12.5705 Z M 11.465 8.618 H 1.038 V 1.683 H 11.465Z',
+    fill: 'currentColor',
+  }));
+}

src/components/icons/StarFilled.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { _extends } from './common';
+
+export default function StarFilled(props) {
+  return /* #__PURE__ */React.createElement('svg', _extends({
+    width: 20,
+    height: 20,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+  }, props), /* #__PURE__ */React.createElement('path', {
+    d: 'M8.4038 13.3917L13.5538 16.5L12.1871 10.6417L16.7371 6.70002L10.7455 6.19169L8.4038 0.666687L6.06213 6.19169L0.0704651 6.70002L4.62047 10.6417L3.2538 16.5L8.4038 13.3917Z',
+    fill: 'currentColor',
+  }));
+}

src/components/icons/StarOutline.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { _extends } from './common';
+
+export default function StarOutline(props) {
+  return /* #__PURE__ */React.createElement('svg', _extends({
+    width: 20,
+    height: 20,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+  }, props), /* #__PURE__ */React.createElement('path', {
+    d: 'M16.7371 6.69999L10.7455 6.18332L8.4038 0.666656L6.06213 6.19166L0.0704651 6.69999L4.62047 10.6417L3.2538 16.5L8.4038 13.3917L13.5538 16.5L12.1955 10.6417L16.7371 6.69999ZM8.4038 11.8333L5.27047 13.725L6.1038 10.1583L3.33713 7.75832L6.98713 7.44166L8.4038 4.08332L9.8288 7.44999L13.4788 7.76666L10.7121 10.1667L11.5455 13.7333L8.4038 11.8333Z',
+    fill: 'currentColor',
+  }));
+}

src/components/icons/ThumbUpFilled.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { _extends } from './common';
+
+export default function ThumbUpFilled(props) {
+  return /* #__PURE__ */React.createElement('svg', _extends({
+    width: 20,
+    height: 20,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+  }, props), /* #__PURE__ */React.createElement('path', {
+    d: 'M11.2122 0.833344L5.23715 6.81668V17.5H15.4955L18.5705 10.3333V6.66668H11.6455L12.5788 2.18334L11.2122 0.833344ZM0.237152 7.50001H3.57049V17.5H0.237152V7.50001Z',
+    fill: 'currentColor',
+  }));
+}

src/components/icons/ThumbUpOutline.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { _extends } from './common';
+
+export default function ThumbUpOutline(props) {
+  return /* #__PURE__ */React.createElement('svg', _extends({
+    width: 20,
+    height: 20,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+  }, props), /* #__PURE__ */React.createElement('path', {
+    d: 'M18.5705 6.66668V10.3333L15.4955 17.5L5.23715 17.5L5.23715 6.81668L11.2122 0.833344L12.5788 2.18334L11.6455 6.66668L18.5705 6.66668ZM6.90382 7.50834L6.90382 15.8333L14.3955 15.8333L16.9038 9.99168V8.33334L9.59548 8.33334L10.5205 3.88334L6.90382 7.50834Z M3.57049 17.5H0.237152L0.237152 7.50001H3.57049L3.57049 17.5Z',
+    fill: 'currentColor',
+  }));
+}

src/components/icons/common.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-func-assign */
+/* eslint-disable prefer-object-spread */
+/* eslint-disable prefer-rest-params */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-restricted-syntax */
+// eslint-disable-next-line import/prefer-default-export
+export function _extends() {
+  _extends = Object.assign || function (target) {
+    for (let i = 1; i < arguments.length; i++) {
+      const source = arguments[i];
+      for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}

src/components/icons/index.js

@@ -0,0 +1,6 @@
+export { default as QuestionAnswer } from './QuestionAnswer';
+export { default as QuestionAnswerOutline } from './QuestionAnswerOutline';
+export { default as StarFilled } from './StarFilled';
+export { default as StarOutline } from './StarOutline';
+export { default as ThumbUpFilled } from './ThumbUpFilled';
+export { default as ThumbUpOutline } from './ThumbUpOutline';

src/data/constants.js

@@ -134,6 +134,17 @@ export const LearnersOrdering = {
   BY_LAST_ACTIVITY: 'activity',
 };
 
+/**
+ * Enum for Learner content tabs
+ * @readonly
+ * @enum {string}
+ */
+export const LearnerTabs = {
+  POSTS: 'posts',
+  COMMENTS: 'comments',
+  RESPONSES: 'responses',
+};
+
 /**
  * Enum for discussion provider types supported by the MFE.
  * @type {{OPEN_EDX: string, LEGACY: string}}
@@ -152,6 +163,11 @@ export const Routes = {
   LEARNERS: {
     PATH: `${BASE_PATH}/learners`,
     LEARNER: `${BASE_PATH}/learners/:learnerUsername`,
+    TABS: {
+      posts: `${BASE_PATH}/learners/:learnerUsername/${LearnerTabs.POSTS}`,
+      responses: `${BASE_PATH}/learners/:learnerUsername/${LearnerTabs.RESPONSES}`,
+      comments: `${BASE_PATH}/learners/:learnerUsername/${LearnerTabs.COMMENTS}`,
+    },
   },
   POSTS: {
     PATH: `${BASE_PATH}/topics/:topicId`,
@@ -163,6 +179,7 @@ export const Routes = {
       `${BASE_PATH}`,
     ],
     EDIT_POST: [
+      `${BASE_PATH}/category/:category/posts/:postId/edit`,
       `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
       `${BASE_PATH}/posts/:postId/edit`,
       `${BASE_PATH}/my-posts/:postId/edit`,
@@ -170,12 +187,14 @@ export const Routes = {
   },
   COMMENTS: {
     PATH: [
+      `${BASE_PATH}/category/:category/posts/:postId`,
       `${BASE_PATH}/topics/:topicId/posts/:postId`,
       `${BASE_PATH}/posts/:postId`,
       `${BASE_PATH}/my-posts/:postId`,
     ],
     PAGE: `${BASE_PATH}/:page`,
     PAGES: {
+      category: `${BASE_PATH}/category/:category/posts/:postId`,
       topics: `${BASE_PATH}/topics/:topicId/posts/:postId`,
       posts: `${BASE_PATH}/posts/:postId`,
       'my-posts': `${BASE_PATH}/my-posts/:postId`,
@@ -184,15 +203,18 @@ export const Routes = {
   TOPICS: {
     PATH: [
       `${BASE_PATH}/topics/:topicId?`,
+      `${BASE_PATH}/category/:category`,
+      `${BASE_PATH}/topics`,
     ],
     ALL: `${BASE_PATH}/topics`,
     CATEGORY: `${BASE_PATH}/category/:category`,
+    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId`,
     TOPIC: `${BASE_PATH}/topics/:topicId`,
   },
 };
 
 export const ALL_ROUTES = []
-  .concat([Routes.TOPICS.CATEGORY])
+  .concat([Routes.TOPICS.CATEGORY_POST, Routes.TOPICS.CATEGORY])
   .concat(Routes.COMMENTS.PATH)
   .concat(Routes.TOPICS.PATH)
   .concat([Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS])

src/data/thunks.js

@@ -58,19 +58,21 @@ function normaliseCourseBlocks({
         } else {
           blocks[verticalId].children?.forEach(discussionId => {
             const discussion = camelCaseObject(blocks[discussionId]);
-            const { topicId } = discussion.studentViewData;
-            blockData[discussionId] = discussion;
-            // Add this topic id to the list of topics for the current chapter, sequential, and vertical
-            chapterData.topics.push(topicId);
-            blockData[sequentialId].topics.push(topicId);
-            blockData[verticalId].topics.push(topicId);
-            // Store the topic's context in the course in a map
-            topics[topicId] = {
-              chapterName: blockData[chapterId].displayName,
-              verticalName: blockData[sequentialId].displayName,
-              unitName: blockData[verticalId].displayName,
-              unitLink: blockData[verticalId].lmsWebUrl,
-            };
+            const { topicId } = discussion.studentViewData || {};
+            if (topicId) {
+              blockData[discussionId] = discussion;
+              // Add this topic id to the list of topics for the current chapter, sequential, and vertical
+              chapterData.topics.push(topicId);
+              blockData[sequentialId].topics.push(topicId);
+              blockData[verticalId].topics.push(topicId);
+              // Store the topic's context in the course in a map
+              topics[topicId] = {
+                chapterName: blockData[chapterId].displayName,
+                verticalName: blockData[sequentialId].displayName,
+                unitName: blockData[verticalId].displayName,
+                unitLink: blockData[verticalId].lmsWebUrl,
+              };
+            }
           });
         }
       });

src/discussions/comments/comment/Comment.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -21,6 +22,7 @@ import Reply from './Reply';
 function Comment({
   postType,
   comment,
+  showFullThread = true,
   intl,
 }) {
   const dispatch = useDispatch();
@@ -34,7 +36,7 @@ function Comment({
   const currentPage = useSelector(selectCommentCurrentPage(comment.id));
   useEffect(() => {
     // If the comment has a parent comment, it won't have any children, so don't fetch them.
-    if (hasChildren && !currentPage) {
+    if (hasChildren && !currentPage && showFullThread) {
       dispatch(fetchCommentResponses(comment.id, { page: 1 }));
     }
   }, [comment.id]);
@@ -50,9 +52,10 @@ function Comment({
   const handleLoadMoreComments = () => (
     dispatch(fetchCommentResponses(comment.id, { page: currentPage + 1 }))
   );
+  const commentClasses = classNames('d-flex flex-column card', { 'my-3': showFullThread });
 
   return (
-    <div className="discussion-comment d-flex flex-column card my-3" data-testid={`comment-${comment.id}`}>
+    <div className={commentClasses} data-testid={`comment-${comment.id}`}>
       <DeleteConfirmation
         isOpen={isDeleting}
         title={intl.formatMessage(messages.deleteResponseTitle)}
@@ -71,7 +74,7 @@ function Comment({
             <CommentEditor comment={comment} onCloseEditor={() => setEditing(false)} />
           )
           // eslint-disable-next-line react/no-danger
-          : <div className="comment-body px-2" dangerouslySetInnerHTML={{ __html: comment.renderedBody }} />}
+          : <div className="comment-body px-2" id="comment" dangerouslySetInnerHTML={{ __html: comment.renderedBody }} />}
         <CommentIcons
           comment={comment}
           following={comment.following}
@@ -100,7 +103,7 @@ function Comment({
             {intl.formatMessage(messages.loadMoreResponses)}
           </Button>
         )}
-        {!isNested
+        {!isNested && showFullThread
           && (
             isReplying
               ? (
@@ -109,6 +112,7 @@ function Comment({
                     threadId: comment.threadId,
                     parentId: comment.id,
                   }}
+                  edit={false}
                   onCloseEditor={() => setReplying(false)}
                 />
               )
@@ -126,7 +130,12 @@ function Comment({
 Comment.propTypes = {
   postType: PropTypes.oneOf(['discussion', 'question']).isRequired,
   comment: commentShape.isRequired,
+  showFullThread: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 
+Comment.defaultProps = {
+  showFullThread: true,
+};
+
 export default injectIntl(Comment);

src/discussions/comments/comment/CommentEditor.jsx

@@ -10,6 +10,7 @@ import { AppContext } from '@edx/frontend-platform/react';
 import { Button, Form, StatefulButton } from '@edx/paragon';
 
 import { TinyMCEEditor } from '../../../components';
+import FormikErrorFeedback from '../../../components/FormikErrorFeedback';
 import { useDispatchWithState } from '../../../data/hooks';
 import { selectModerationSettings, selectUserIsPrivileged } from '../../data/selectors';
 import { formikCompatibleHandler, isFormikFieldInvalid } from '../../utils';
@@ -20,15 +21,40 @@ function CommentEditor({
   intl,
   comment,
   onCloseEditor,
+  edit,
 }) {
+  const editorRef = useRef(null);
   const { authenticatedUser } = useContext(AppContext);
   const userIsPrivileged = useSelector(selectUserIsPrivileged);
   const { reasonCodesEnabled, editReasons } = useSelector(selectModerationSettings);
   const [submitting, dispatch] = useDispatchWithState();
-  const editorRef = useRef(null);
+
+  const canDisplayEditReason = (reasonCodesEnabled && userIsPrivileged
+    && edit && comment.author !== authenticatedUser.username
+  );
+
+  const editReasonCodeValidation = canDisplayEditReason && {
+    editReasonCode: Yup.string().required(intl.formatMessage(messages.editReasonCodeError)),
+  };
+
+  const validationSchema = Yup.object().shape({
+    comment: Yup.string()
+      .required(),
+    ...editReasonCodeValidation,
+  });
+
+  const initialValues = {
+    comment: comment.rawBody,
+    editReasonCode: comment?.lastEdit?.reasonCode || '',
+  };
+
   const saveUpdatedComment = async (values) => {
     if (comment.id) {
-      await dispatch(editComment(comment.id, values));
+      const payload = {
+        ...values,
+        editReasonCode: values.editReasonCode || undefined,
+      };
+      await dispatch(editComment(comment.id, payload));
     } else {
       await dispatch(addComment(values.comment, comment.threadId, comment.parentId));
     }
@@ -41,17 +67,11 @@ function CommentEditor({
   // The editorId is used to autosave contents to localstorage. This format means that the autosave is scoped to
   // the current comment id, or the current comment parent or the curren thread.
   const editorId = `comment-editor-${comment.id || comment.parentId || comment.threadId}`;
+
   return (
     <Formik
-      initialValues={{ comment: comment.rawBody }}
-      validationSchema={Yup.object()
-        .shape({
-          comment: Yup.string()
-            .required(),
-          editReasonCode: Yup.string()
-            .nullable()
-            .default(undefined),
-        })}
+      initialValues={initialValues}
+      validationSchema={validationSchema}
       onSubmit={saveUpdatedComment}
     >
       {({
@@ -63,10 +83,13 @@ function CommentEditor({
         handleChange,
       }) => (
         <Form onSubmit={handleSubmit}>
-          {(reasonCodesEnabled
-            && userIsPrivileged
-            && comment.author !== authenticatedUser.username) && (
-            <Form.Group>
+          {canDisplayEditReason && (
+            <Form.Group
+              isInvalid={isFormikFieldInvalid('editReasonCode', {
+                errors,
+                touched,
+              })}
+            >
               <Form.Control
                 name="editReasonCode"
                 className="mt-2"
@@ -85,6 +108,7 @@ function CommentEditor({
                   <option key={code} value={code}>{label}</option>
                 ))}
               </Form.Control>
+              <FormikErrorFeedback name="editReasonCode" />
             </Form.Group>
           )}
           <TinyMCEEditor
@@ -139,9 +163,15 @@ CommentEditor.propTypes = {
     parentId: PropTypes.string,
     rawBody: PropTypes.string,
     author: PropTypes.string,
+    lastEdit: PropTypes.object,
   }).isRequired,
   onCloseEditor: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
+  edit: PropTypes.bool,
+};
+
+CommentEditor.defaultProps = {
+  edit: true,
 };
 
 export default injectIntl(CommentEditor);

src/discussions/comments/comment/Reply.jsx

@@ -45,11 +45,17 @@ function Reply({
           hideDeleteConfirmation();
         }}
       />
-      <div className="d-flex flex-fill ml-6">
-        <AlertBanner postType={null} content={reply} intl={intl} />
-      </div>
-      <div className="d-flex">
 
+      <div className="d-flex">
+        <div className="d-flex mx-3 invisible">
+          <Avatar className="m-2" />
+        </div>
+        <div className="w-100">
+          <AlertBanner postType={null} content={reply} intl={intl} />
+        </div>
+      </div>
+
+      <div className="d-flex">
         <div className="d-flex m-3">
           <Avatar
             className={`m-2 ${colorClass && `border-${colorClass}`}`}
@@ -72,9 +78,8 @@ function Reply({
           {isEditing
             ? <CommentEditor comment={reply} onCloseEditor={() => setEditing(false)} />
             // eslint-disable-next-line react/no-danger
-            : <div dangerouslySetInnerHTML={{ __html: reply.renderedBody }} />}
+            : <div id="reply" dangerouslySetInnerHTML={{ __html: reply.renderedBody }} />}
         </div>
-
       </div>
       <div className="text-gray-500 align-self-end mt-2" title={reply.createdAt}>
         {timeago.format(reply.createdAt, intl.locale)}

src/discussions/comments/comment/ResponseEditor.jsx

@@ -14,7 +14,11 @@ function ResponseEditor({
   const [addingResponse, setAddingResponse] = useState(false);
   return addingResponse
     ? (
-      <CommentEditor comment={{ threadId: postId }} onCloseEditor={() => setAddingResponse(false)} />
+      <CommentEditor
+        comment={{ threadId: postId }}
+        edit={false}
+        onCloseEditor={() => setAddingResponse(false)}
+      />
     ) : (
       <div className="actions d-flex">
         <Button variant="primary" onClick={() => setAddingResponse(true)}>

src/discussions/comments/data/api.js

@@ -117,3 +117,29 @@ export async function deleteComment(commentId) {
   await getAuthenticatedHttpClient()
     .delete(url);
 }
+
+/**
+ * Get the comments by a specific user in a course's discussions
+ *
+ * comments = responses + comments in the UI
+ *
+ * @param {string} courseId Course ID for the course
+ * @param {string} username Username of the user
+ * @returns API response in the format
+ *  {
+ *    results: [array of comments],
+ *    pagination: {count, num_pages, next, previous}
+ *  }
+
+ */
+export async function getUserComments(courseId, username, { page }) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(commentsApiUrl, {
+      params: {
+        course_id: courseId,
+        username,
+        page,
+      },
+    });
+  return data;
+}

src/discussions/comments/messages.js

@@ -26,7 +26,7 @@ const messages = defineMessages({
   },
   endorsedResponseCount: {
     id: 'discussions.comments.comment.endorsedResponseCount',
-    defaultMessage: `{num, plural, 
+    defaultMessage: `{num, plural,
       =0 {No endorsed responses}
       one {Showing # endorsed response}
       other {Showing # endorsed responses}
@@ -147,6 +147,11 @@ const messages = defineMessages({
     defaultMessage: 'Reason for editing',
     description: 'Label for field visible to moderators that allows them to select a reason for editing another user\'s response',
   },
+  editReasonCodeError: {
+    id: 'discussions.editor.posts.editReasonCode.error',
+    defaultMessage: 'Select reason for editing',
+    description: 'Error message visible to moderators when they submit the post/response/comment without select reason for editing',
+  },
   editedBy: {
     id: 'discussions.comment.comments.editedBy',
     defaultMessage: 'Edited by',

src/discussions/common/AlertBanner.jsx

@@ -56,7 +56,7 @@ function AlertBanner({
         </Alert>
       )}
       {content.abuseFlagged && (
-        <Alert icon={Error} variant="danger" className="p-3 m-0 shadow-none mb-1 flex-fill">
+        <Alert icon={Error} variant="danger" className="p-3 m-0 shadow-none my-1 flex-fill">
           {intl.formatMessage(messages.abuseFlaggedMessage)}
         </Alert>
       )}

src/discussions/common/context.js

@@ -2,10 +2,11 @@
 import React from 'react';
 
 export const DiscussionContext = React.createContext({
+  page: null,
   courseId: null,
   postId: null,
-  category: null,
-  commentId: null,
-  learnerUsername: null,
+  topicId: null,
   inContext: false,
+  category: null,
+  learnerUsername: null,
 });

src/discussions/discussions-home/DiscussionContent.jsx

@@ -6,6 +6,8 @@ import { Route, Switch } from 'react-router';
 import { Routes } from '../../data/constants';
 import { CommentsView } from '../comments';
 import { useContainerSizeForParent } from '../data/hooks';
+import { LearnersContentView } from '../learners';
+import LearnerPageHeader from '../learners/LearnerPageHeader';
 import { PostEditor } from '../posts';
 
 export default function DiscussionContent() {
@@ -14,7 +16,10 @@ export default function DiscussionContent() {
   useContainerSizeForParent(refContainer);
 
   return (
-    <div className="d-flex bg-light-300 flex-column w-75 w-xs-100 w-xl-75 align-items-center h-100 overflow-auto">
+    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center h-100 overflow-auto">
+      <Route path={Routes.LEARNERS.LEARNER}>
+        <LearnerPageHeader />
+      </Route>
       <div className="d-flex flex-column w-100 mw-xl" ref={refContainer}>
         {postEditorVisible ? (
           <Route path={Routes.POSTS.NEW_POST}>
@@ -28,6 +33,9 @@ export default function DiscussionContent() {
             <Route path={Routes.COMMENTS.PATH}>
               <CommentsView />
             </Route>
+            <Route path={Routes.LEARNERS.LEARNER}>
+              <LearnersContentView />
+            </Route>
           </Switch>
         )}
       </div>

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -24,11 +24,8 @@ export default function DiscussionSidebar({ displaySidebar }) {
       data-testid="sidebar"
     >
       <Switch>
-        <Route path={Routes.POSTS.MY_POSTS}>
-          <PostsView showOwnPosts />
-        </Route>
         <Route
-          path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.TOPICS.CATEGORY]}
+          path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.TOPICS.CATEGORY, Routes.POSTS.MY_POSTS]}
           component={PostsView}
         />
         <Route path={Routes.TOPICS.PATH} component={TopicsView} />

src/discussions/empty-posts/EmptyPage.jsx

@@ -16,7 +16,7 @@ function EmptyPage({
 }) {
   const containerClasses = classNames(
     'justify-content-center align-items-center d-flex w-100 flex-column pt-5',
-    { 'bg-light-300': !fullWidth },
+    { 'bg-light-400': !fullWidth },
   );
 
   return (

src/discussions/learners/LearnerPageHeader.jsx

@@ -0,0 +1,70 @@
+import React, { useContext } from 'react';
+
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { generatePath, NavLink } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Avatar, ButtonGroup, Icon } from '@edx/paragon';
+import { Report } from '@edx/paragon/icons';
+
+import { Routes } from '../../data/constants';
+import { DiscussionContext } from '../common/context';
+import { selectLearner, selectLearnerAvatar, selectLearnerProfile } from './data/selectors';
+import messages from './messages';
+
+function LearnerPageHeader({ intl }) {
+  const { courseId, learnerUsername } = useContext(DiscussionContext);
+  const params = { courseId, learnerUsername };
+  const learner = useSelector(selectLearner(learnerUsername));
+  const profile = useSelector(selectLearnerProfile(learnerUsername));
+  const avatar = useSelector(selectLearnerAvatar(learnerUsername));
+
+  const activeTabClass = (active) => classNames('btn', { 'btn-primary': active, 'btn-outline-primary': !active });
+
+  return (
+    <div className="d-flex flex-column w-100 bg-white shadow-sm">
+      <div className="d-flex flex-row align-items-center m-4">
+        <Avatar src={avatar} alt={learnerUsername} />
+        <span className="font-weight-bold mx-3">
+          {profile.username}
+        </span>
+      </div>
+      <div className="d-flex pb-0 bg-light-200 justify-content-center p-2 flex-fill">
+        <ButtonGroup className="my-2 bg-white">
+          <NavLink
+            className={activeTabClass}
+            to={generatePath(Routes.LEARNERS.TABS.posts, params)}
+          >
+            {intl.formatMessage(messages.postsTab)} <span className="ml-3">{learner.threads}</span>
+            {
+              learner.activeFlags ? (
+                <span className="ml-3">
+                  <Icon src={Report} />
+                </span>
+              ) : null
+            }
+          </NavLink>
+          <NavLink
+            className={activeTabClass}
+            to={generatePath(Routes.LEARNERS.TABS.responses, params)}
+          >
+            {intl.formatMessage(messages.responsesTab)} <span className="ml-3">{learner.responses}</span>
+          </NavLink>
+          <NavLink
+            className={activeTabClass}
+            to={generatePath(Routes.LEARNERS.TABS.comments, params)}
+          >
+            {intl.formatMessage(messages.commentsTab)} <span className="ml-3">{learner.replies}</span>
+          </NavLink>
+        </ButtonGroup>
+      </div>
+    </div>
+  );
+}
+
+LearnerPageHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(LearnerPageHeader);

src/discussions/learners/LearnersContentView.jsx

@@ -0,0 +1,53 @@
+import React, { useContext } from 'react';
+
+import { useSelector } from 'react-redux';
+import {
+  generatePath, Redirect, Route, Switch,
+} from 'react-router-dom';
+
+import { Spinner } from '@edx/paragon';
+
+import { LearnerTabs, RequestStatus, Routes } from '../../data/constants';
+import { DiscussionContext } from '../common/context';
+import { learnersLoadingStatus } from './data/selectors';
+import CommentsTabContent from './learner/CommentsTabContent';
+import PostsTabContent from './learner/PostsTabContent';
+
+function LearnersContentView() {
+  const { courseId, learnerUsername } = useContext(DiscussionContext);
+  const params = { courseId, learnerUsername };
+  const apiStatus = useSelector(learnersLoadingStatus());
+
+  return (
+    <div className="learner-content d-flex flex-column">
+      <Switch>
+        <Route path={Routes.LEARNERS.LEARNER} exact>
+          <Redirect to={generatePath(Routes.LEARNERS.TABS.posts, params)} />
+        </Route>
+        <Route
+          path={Routes.LEARNERS.TABS.posts}
+          component={PostsTabContent}
+        />
+        <Route path={Routes.LEARNERS.TABS.responses}>
+          <CommentsTabContent tab={LearnerTabs.RESPONSES} />
+        </Route>
+        <Route path={Routes.LEARNERS.TABS.comments}>
+          <CommentsTabContent tab={LearnerTabs.COMMENTS} />
+        </Route>
+      </Switch>
+
+      {
+        apiStatus === RequestStatus.IN_PROGRESS && (
+          <div className="my-3 text-center">
+            <Spinner animation="border" className="mie-3" />
+          </div>
+        )
+      }
+    </div>
+  );
+}
+
+LearnersContentView.propTypes = {
+};
+
+export default LearnersContentView;

src/discussions/learners/LearnersContentView.test.jsx

@@ -0,0 +1,176 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { act } from 'react-dom/test-utils';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter, Route } from 'react-router';
+import { Factory } from 'rosie';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { LearnerTabs } from '../../data/constants';
+import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import { commentsApiUrl } from '../comments/data/api';
+import { DiscussionContext } from '../common/context';
+import DiscussionContent from '../discussions-home/DiscussionContent';
+import { threadsApiUrl } from '../posts/data/api';
+import { coursesApiUrl, userProfileApiUrl } from './data/api';
+import { fetchLearners } from './data/thunks';
+
+import '../comments/data/__factories__';
+import '../posts/data/__factories__';
+import './data/__factories__';
+
+let store;
+let axiosMock;
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const testUsername = 'leaner-1';
+
+function renderComponent(username = testUsername) {
+  return render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider value={{ learnerUsername: username, courseId }}>
+          <MemoryRouter initialEntries={[`/${courseId}/learners/${username}/${LearnerTabs.POSTS}`]}>
+            <Route path="/:courseId/learners/:learnerUsername">
+              <DiscussionContent />
+            </Route>
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+}
+
+describe('LearnersContentView', () => {
+  const learnerCount = 1;
+
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    store = initializeStore({});
+    Factory.resetAll();
+
+    axiosMock.onGet(`${coursesApiUrl}${courseId}/activity_stats/`)
+      .reply(
+        200,
+        Factory.build('learnersResult', {}, {
+          count: learnerCount,
+          pageSize: 5,
+        }),
+      );
+
+    axiosMock.onGet(`${userProfileApiUrl}?username=${testUsername}`)
+      .reply(
+        200,
+        Factory.build('learnersProfile', {}, {
+          username: [testUsername],
+        }).profiles,
+      );
+    await executeThunk(fetchLearners(courseId), store.dispatch, store.getState);
+
+    axiosMock.onGet(threadsApiUrl)
+      .reply(200, Factory.build('threadsResult', {}, {
+        topicId: undefined,
+        count: 6,
+        pageSize: 5,
+      }));
+
+    axiosMock.onGet(commentsApiUrl)
+      .reply(200, Factory.build('commentsResult', {}, {
+        count: 9,
+        pageSize: 8,
+      }));
+  });
+
+  test('it loads the posts view by default', async () => {
+    await act(async () => {
+      await renderComponent();
+    });
+    expect(screen.queryAllByTestId('post')).toHaveLength(5);
+    expect(screen.queryAllByText('This is Thread', { exact: false })).toHaveLength(5);
+  });
+
+  test('it renders all the comments WITHOUT parent id in responses tab', async () => {
+    await act(async () => {
+      await renderComponent();
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByText('Responses', { exact: false }));
+    });
+
+    expect(screen.queryAllByText('comment number', { exact: false })).toHaveLength(8);
+  });
+
+  test('it renders all the comments with parent id in comments tab', async () => {
+    axiosMock.onGet(commentsApiUrl)
+      .reply(200, Factory.build('commentsResult', {}, {
+        count: 4,
+        parentId: 'test_parent_id',
+      }));
+    await act(async () => {
+      await renderComponent();
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByRole('link', { name: /Comments \d+/i }));
+    });
+    expect(screen.queryAllByText('comment number', { exact: false })).toHaveLength(4);
+  });
+
+  test('it can switch back to the posts tab', async () => {
+    await act(async () => {
+      await renderComponent();
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByRole('link', { name: /Responses \d+/i }));
+    });
+    expect(screen.queryAllByText('comment number', { exact: false })).toHaveLength(8);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('link', { name: /Posts \d+/i }));
+    });
+    expect(screen.queryAllByTestId('post')).toHaveLength(5);
+  });
+
+  describe('Posts Tab Button', () => {
+    it('does not show Report Icon when the learner has NO active flags', async () => {
+      await act(async () => {
+        await renderComponent('leaner-2');
+      });
+      const button = screen.getByRole('link', { name: /Posts/i });
+      expect(button.innerHTML).not.toContain('svg');
+    });
+
+    it('shows the Report Icon when the learner has active Flags', async () => {
+      axiosMock.onGet(`${coursesApiUrl}${courseId}/activity_stats/`)
+        .reply(() => [200, Factory.build('learnersResult', {}, {
+          count: 1,
+          pageSize: 5,
+          activeFlags: 1,
+        })]);
+      axiosMock.onGet(`${userProfileApiUrl}?username=leaner-2`)
+        .reply(() => [200, Factory.build('learnersProfile', {}, {
+          username: ['leaner-2'],
+        }).profiles]);
+      await executeThunk(fetchLearners(courseId), store.dispatch, store.getState);
+
+      await act(async () => {
+        await renderComponent('leaner-2');
+      });
+      const button = screen.getByRole('link', { name: /Posts/i });
+      expect(button.innerHTML).toContain('svg');
+    });
+  });
+});

src/discussions/learners/LearnersView.jsx

@@ -46,8 +46,8 @@ function LearnersView() {
     }
   };
   return (
-    <div className="d-flex flex-column">
-      <div className="list-group list-group-flush">
+    <div className="d-flex flex-column border-right border-light-300 h-100">
+      <div className="list-group list-group-flush ">
         {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && !learnersTabEnabled && (
         <Redirect
           to={{

src/discussions/learners/data/__factories__/learners.factory.js

@@ -3,11 +3,12 @@ import { Factory } from 'rosie';
 Factory.define('learner')
   .sequence('id')
   .attr('username', ['id'], (id) => `leaner-${id}`)
+  .option('activeFlags', null, null)
+  .attr('active_flags', ['activeFlags'], (activeFlags) => activeFlags)
   .attrs({
     threads: 1,
     replies: 0,
     responses: 3,
-    active_flags: null,
     inactive_flags: null,
   });
 
@@ -16,19 +17,18 @@ Factory.define('learnersResult')
   .option('page', null, 1)
   .option('pageSize', null, 5)
   .option('courseId', null, 'course-v1:Test+TestX+Test_Course')
+  .option('activeFlags', null, 0)
   .attr(
     'pagination',
     ['courseId', 'count', 'page', 'pageSize'],
     (courseId, count, page, pageSize) => {
       const numPages = Math.ceil(count / pageSize);
       const next = page < numPages
-        ? `http://test.site/api/discussion/v1/courses/course-v1:edX+DemoX+Demo_Course/activity_stats?page=${
-          page + 1
+        ? `http://test.site/api/discussion/v1/courses/course-v1:edX+DemoX+Demo_Course/activity_stats?page=${page + 1
         }`
         : null;
       const prev = page > 1
-        ? `http://test.site/api/discussion/v1/courses/course-v1:edX+DemoX+Demo_Course/activity_stats?page=${
-          page - 1
+        ? `http://test.site/api/discussion/v1/courses/course-v1:edX+DemoX+Demo_Course/activity_stats?page=${page - 1
         }`
         : null;
       return {
@@ -41,12 +41,26 @@ Factory.define('learnersResult')
   )
   .attr(
     'results',
-    ['count', 'pageSize', 'page', 'courseId'],
-    (count, pageSize, page, courseId) => {
+    ['count', 'pageSize', 'page', 'courseId', 'activeFlags'],
+    (count, pageSize, page, courseId, activeFlags) => {
       const attrs = { course_id: courseId };
       Object.keys(attrs).forEach((key) => (attrs[key] === undefined ? delete attrs[key] : {}));
       const len = pageSize * page <= count ? pageSize : count % pageSize;
-      return Factory.buildList('learner', len, attrs);
+      let learners = [];
+
+      if (activeFlags && activeFlags <= len) {
+        learners = Factory.buildList('learner', len - activeFlags, attrs);
+        learners = learners.concat(
+          Factory.buildList(
+            'learner',
+            activeFlags,
+            { ...attrs, active_flags: Math.floor(Math.random() * 10) + 1 },
+          ),
+        );
+      } else {
+        learners = Factory.buildList('learner', len, attrs);
+      }
+      return learners;
     },
   );
 
@@ -68,6 +82,7 @@ Factory.define('learnersProfile')
       },
       last_login: new Date(Date.now() - 1000 * 60).toISOString(),
       username: user,
+      name: 'Test User',
     }));
     return profiles;
   });

src/discussions/learners/data/api.js

@@ -14,13 +14,16 @@ export const userProfileApiUrl = `${apiBaseUrl}/api/user/v1/accounts`;
 /**
  * Fetches all the learners in the given course.
  * @param {string} courseId
+ * @param {number} page
+ * @param {string} orderBy
  * @returns {Promise<{}>}
  */
 export async function getLearners(
-  courseId,
+  courseId, { page, orderBy },
 ) {
+  const params = { page, orderBy };
   const url = `${coursesApiUrl}${courseId}/activity_stats/`;
-  const { data } = await getAuthenticatedHttpClient().get(url);
+  const { data } = await getAuthenticatedHttpClient().get(url, { params });
   return data;
 }
 

src/discussions/learners/data/selectors.js

@@ -2,9 +2,11 @@
 
 import { createSelector } from '@reduxjs/toolkit';
 
+import { LearnerTabs } from '../../../data/constants';
+
 export const selectAllLearners = createSelector(
-  state => state.learners,
-  learners => learners.learners,
+  state => state.learners.pages,
+  pages => pages.flat(),
 );
 
 export const learnersLoadingStatus = () => state => state.learners.status;
@@ -15,6 +17,14 @@ export const selectLearnerFilters = () => state => state.learners.filters;
 
 export const selectLearnerNextPage = () => state => state.learners.nextPage;
 
+export const selectLearnerCommentsNextPage = (learner) => state => (
+  state.learners.commentPaginationByUser?.[learner]?.nextPage
+);
+
+export const selectLearnerPostsNextPage = (learner) => state => (
+  state.learners.postPaginationByUser?.[learner]?.nextPage
+);
+
 export const selectLearnerAvatar = author => state => (
   state.learners.learnerProfiles[author]?.profileImage?.imageUrlSmall
 );
@@ -22,3 +32,26 @@ export const selectLearnerAvatar = author => state => (
 export const selectLearnerLastLogin = author => state => (
   state.learners.learnerProfiles[author]?.lastLogin
 );
+
+export const selectLearner = (username) => createSelector(
+  [selectAllLearners],
+  learners => learners.find(l => l.username === username) || {},
+);
+
+export const selectLearnerProfile = (username) => state => state.learners.learnerProfiles[username] || {};
+
+export const selectUserPosts = username => state => (state.learners.postsByUser[username] || []).flat();
+
+/**
+ * Get the comments of a post.
+ * @param {string} username Username of the learner to get the comments of
+ * @param {LearnerTabs} commentType Type of comments to get
+ * @returns {Array} Array of comments
+ */
+export const selectUserComments = (username, commentType) => state => (
+  commentType === LearnerTabs.COMMENTS
+    ? (state.learners.commentsByUser[username] || []).flat().filter(c => c.parentId)
+    : (state.learners.commentsByUser[username] || []).flat().filter(c => !c.parentId)
+);
+
+export const flaggedCommentCount = (username) => state => state.learners.flaggedCommentsByUser[username] || 0;

src/discussions/learners/data/slices.js

@@ -11,23 +11,34 @@ const learnersSlice = createSlice({
   initialState: {
     status: RequestStatus.IN_PROGRESS,
     avatars: {},
-    learners: [],
     learnerProfiles: {},
     pages: [],
     nextPage: null,
     totalPages: null,
     totalLearners: null,
     sortedBy: LearnersOrdering.BY_LAST_ACTIVITY,
+    commentPaginationByUser: {
+
+    },
+    commentsByUser: {
+      // Map username to comments
+    },
+    postPaginationByUser: {
+
+    },
+    postsByUser: {
+      // Map username to posts
+    },
   },
   reducers: {
     fetchLearnersSuccess: (state, { payload }) => {
       state.status = RequestStatus.SUCCESSFUL;
-      state.learners = payload.results;
+      state.pages[payload.page - 1] = payload.results;
       state.learnerProfiles = {
         ...state.learnerProfiles,
         ...(payload.learnerProfiles || {}),
       };
-      state.nextPage = payload.pagination.next;
+      state.nextPage = (payload.page < payload.pagination.numPages) ? payload.page + 1 : null;
       state.totalPages = payload.pagination.numPages;
       state.totalLearners = payload.pagination.count;
     },
@@ -42,8 +53,38 @@ const learnersSlice = createSlice({
     },
     setSortedBy: (state, { payload }) => {
       state.sortedBy = payload;
-      state.pages = [];
     },
+    fetchUserCommentsRequest: (state) => {
+      state.status = RequestStatus.IN_PROGRESS;
+    },
+    fetchUserCommentsSuccess: (state, { payload }) => {
+      state.commentsByUser[payload.username] ??= [];
+      state.commentsByUser[payload.username][payload.page - 1] = payload.comments;
+      state.commentPaginationByUser[payload.username] = {
+        nextPage: (payload.page < payload.pagination.numPages) ? payload.page + 1 : null,
+        totalPages: payload.pagination.numPages,
+      };
+      state.status = RequestStatus.SUCCESSFUL;
+    },
+    fetchUserCommentsDenied: (state) => {
+      state.status = RequestStatus.DENIED;
+    },
+    fetchUserPostsRequest: (state) => {
+      state.status = RequestStatus.IN_PROGRESS;
+    },
+    fetchUserPostsSuccess: (state, { payload }) => {
+      state.postsByUser[payload.username] ??= [];
+      state.postsByUser[payload.username][payload.page - 1] = payload.posts;
+      state.postPaginationByUser[payload.username] = {
+        nextPage: (payload.page < payload.pagination.numPages) ? payload.page + 1 : null,
+        totalPages: payload.pagination.numPages,
+      };
+      state.status = RequestStatus.SUCCESS;
+    },
+    fetchUserPostsDenied: (state) => {
+      state.status = RequestStatus.DENIED;
+    },
+
   },
 });
 
@@ -53,6 +94,13 @@ export const {
   fetchLearnersSuccess,
   fetchLearnersDenied,
   setSortedBy,
+  fetchUserCommentsRequest,
+  fetchUserCommentsDenied,
+  fetchUserCommentsSuccess,
+  fetchUserPostsRequest,
+  fetchUserPostsDenied,
+  fetchUserPostsSuccess,
+
 } = learnersSlice.actions;
 
 export const learnersReducer = learnersSlice.reducer;

src/discussions/learners/data/thunks.js

@@ -2,6 +2,8 @@
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
+import { getUserComments } from '../../comments/data/api';
+import { getUserPosts } from '../../posts/data/api';
 import { getHttpErrorStatus } from '../../utils';
 import {
   getLearners, getUserProfiles,
@@ -11,22 +13,30 @@ import {
   fetchLearnersFailed,
   fetchLearnersRequest,
   fetchLearnersSuccess,
+  fetchUserCommentsDenied,
+  fetchUserCommentsRequest,
+  fetchUserCommentsSuccess,
+  fetchUserPostsDenied,
+  fetchUserPostsRequest,
+  fetchUserPostsSuccess,
 } from './slices';
 
 /**
  * Fetches the learners for the course courseId.
  * @param {string} courseId The course ID for the course to fetch data for.
+ * @param {string} orderBy
+ * @param {number} page
  * @returns {(function(*): Promise<void>)|*}
  */
 export function fetchLearners(courseId, {
   orderBy,
   page = 1,
 } = {}) {
-  const options = {
-    orderBy,
-    page,
-  };
   return async (dispatch) => {
+    const options = {
+      orderBy,
+      page,
+    };
     try {
       dispatch(fetchLearnersRequest({ courseId }));
       const learnerStats = await getLearners(courseId, options);
@@ -37,7 +47,7 @@ export function fetchLearners(courseId, {
           learnerProfiles[learnerProfile.username] = camelCaseObject(learnerProfile);
         },
       );
-      dispatch(fetchLearnersSuccess({ ...camelCaseObject(learnerStats), learnerProfiles }));
+      dispatch(fetchLearnersSuccess({ ...camelCaseObject(learnerStats), learnerProfiles, page }));
     } catch (error) {
       if (getHttpErrorStatus(error) === 403) {
         dispatch(fetchLearnersDenied());
@@ -48,3 +58,59 @@ export function fetchLearners(courseId, {
     }
   };
 }
+
+/**
+ * Fetch the comments of a user for the specified course and update the
+ * redux state
+ *
+ * @param {string} courseId Course ID of the course eg., course-v1:X+Y+Z
+ * @param {string} username Username of the learner
+ * @param {number} page
+ * @returns a promise that will update the state with the learner's comments
+ */
+export function fetchUserComments(courseId, username, { page = 1 } = {}) {
+  return async (dispatch) => {
+    try {
+      dispatch(fetchUserCommentsRequest());
+      const data = await getUserComments(courseId, username, { page });
+      dispatch(fetchUserCommentsSuccess(camelCaseObject({
+        page,
+        username,
+        comments: data.results,
+        pagination: data.pagination,
+      })));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(fetchUserCommentsDenied());
+      }
+    }
+  };
+}
+
+/**
+ * Fetch the posts of a user for the specified course and update the
+ * redux state
+ *
+ * @param {string} courseId Course ID of the course eg., course-v1:X+Y+Z
+ * @param {string} username Username of the learner
+ * @param page
+ * @returns a promise that will update the state with the learner's posts
+ */
+export function fetchUserPosts(courseId, username, { page = 1 } = {}) {
+  return async (dispatch) => {
+    try {
+      dispatch(fetchUserPostsRequest());
+      const data = await getUserPosts(courseId, username, { page });
+      dispatch(fetchUserPostsSuccess(camelCaseObject({
+        page,
+        username,
+        posts: data.results,
+        pagination: data.pagination,
+      })));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(fetchUserPostsDenied());
+      }
+    }
+  };
+}

src/discussions/learners/index.js

@@ -1,2 +1,3 @@
 /* eslint-disable import/prefer-default-export */
+export { default as LearnersContentView } from './LearnersContentView';
 export { default as LearnersView } from './LearnersView';

src/discussions/learners/learner/CommentsTabContent.jsx

@@ -0,0 +1,51 @@
+import React, { useContext, useEffect } from 'react';
+import PropType from 'prop-types';
+
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import { useDispatchWithState } from '../../../data/hooks';
+import Comment from '../../comments/comment/Comment';
+import messages from '../../comments/messages';
+import { DiscussionContext } from '../../common/context';
+import { selectLearnerCommentsNextPage, selectUserComments } from '../data/selectors';
+import { fetchUserComments } from '../data/thunks';
+
+function CommentsTabContent({ tab, intl }) {
+  const [loading, dispatch] = useDispatchWithState();
+  const { courseId, learnerUsername: username } = useContext(DiscussionContext);
+  const comments = useSelector(selectUserComments(username, tab));
+  const nextPage = useSelector(selectLearnerCommentsNextPage(username));
+
+  useEffect(() => {
+    dispatch(fetchUserComments(courseId, username));
+  }, [courseId, username]);
+
+  const handleLoadMoreComments = () => dispatch(fetchUserComments(courseId, username, { page: nextPage }));
+  return (
+    <div className="mx-3 my-3">
+      {comments.map(
+        (comment) => <Comment key={comment.id} comment={comment} showFullThread={false} postType="discussion" />,
+      )}
+      {nextPage && !loading && (
+        <Button
+          onClick={handleLoadMoreComments}
+          variant="link"
+          block="true"
+          className="card p-4"
+        >
+          {intl.formatMessage(messages.loadMoreComments)}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+CommentsTabContent.propTypes = {
+  intl: intlShape.isRequired,
+  tab: PropType.string.isRequired,
+};
+
+export default injectIntl(CommentsTabContent);

src/discussions/learners/learner/LearnerCard.jsx

@@ -6,10 +6,6 @@ import { Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Icon, IconButton,
-} from '@edx/paragon';
-import { MoreVert } from '@edx/paragon/icons';
 
 import { Routes } from '../../../data/constants';
 import { DiscussionContext } from '../../common/context';
@@ -63,12 +59,6 @@ function LearnerCard({
           </div>
           <LearnerFooter learner={learner} />
         </div>
-        <IconButton
-          src={MoreVert}
-          iconAs={Icon}
-          alt={learner.username}
-          disabled
-        />
       </div>
     </Link>
   );

src/discussions/learners/learner/LearnerFooter.jsx

@@ -4,10 +4,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Icon, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
-import {
-  Edit, Error,
-  QuestionAnswer,
-} from '@edx/paragon/icons';
+import { Edit, QuestionAnswer, Report } from '@edx/paragon/icons';
 
 import messages from './messages';
 import { learnerShape } from './proptypes';
@@ -32,7 +29,7 @@ function LearnerFooter({
         && (
           <OverlayTrigger
             overlay={(
-              <Tooltip>
+              <Tooltip id={`learner-${learner.username}`}>
                 <div className="d-flex flex-column align-items-start">
                   <span>
                     {intl.formatMessage(messages.reported, { reported: activeFlags })}
@@ -48,7 +45,7 @@ function LearnerFooter({
             )}
           >
             <div className="d-flex">
-              <Icon src={Error} className="mx-2 my-0 text-danger" />
+              <Icon src={Report} className="mx-2 my-0 text-danger" />
               <span style={{ minWidth: '2rem' }}>
                 {activeFlags} {Boolean(inactiveFlags) && `/ ${inactiveFlags}`}
               </span>

src/discussions/learners/learner/PostsTabContent.jsx

@@ -0,0 +1,56 @@
+import React, { useContext, useEffect } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import { useDispatchWithState } from '../../../data/hooks';
+import { DiscussionContext } from '../../common/context';
+import { Post } from '../../posts';
+import { selectLearnerPostsNextPage, selectUserPosts } from '../data/selectors';
+import { fetchUserPosts } from '../data/thunks';
+import messages from './messages';
+
+function PostsTabContent({ intl }) {
+  const [loading, dispatch] = useDispatchWithState();
+  const { courseId, learnerUsername: username } = useContext(DiscussionContext);
+  const posts = useSelector(selectUserPosts(username));
+  const nextPage = useSelector(selectLearnerPostsNextPage(username));
+
+  useEffect(() => {
+    dispatch(fetchUserPosts(courseId, username));
+  }, [courseId, username]);
+  // console.log({ posts });
+  const handleLoadMorePosts = () => dispatch(fetchUserPosts(courseId, username, { page: nextPage }));
+
+  return (
+    <div className="d-flex flex-column my-3 mx-3 bg-white rounded">
+      {posts.map((post) => (
+        <div
+          data-testid="post"
+          key={post.id}
+          className="px-3 pb-3 border-bottom border-light-500"
+        >
+          <Post post={post} />
+        </div>
+      ))}
+      {nextPage && !loading && (
+        <Button
+          onClick={handleLoadMorePosts}
+          variant="link"
+          block="true"
+          className="card p-4"
+        >
+          {intl.formatMessage(messages.loadMorePosts)}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+PostsTabContent.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(PostsTabContent);

src/discussions/learners/learner/messages.js

@@ -13,6 +13,11 @@ const messages = defineMessages({
     id: 'discussions.learner.lastLogin',
     defaultMessage: 'Last active {lastActiveTime}',
   },
+  loadMorePosts: {
+    id: 'discussions.learner.loadMostPosts',
+    defaultMessage: 'Load more posts',
+    description: 'Text on button for loading more posts by a user',
+  },
 });
 
 export default messages;

src/discussions/learners/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  postsTab: {
+    id: 'discussions.learner.tab.posts',
+    defaultMessage: 'Posts',
+    description: "Label for the learner's posts tab",
+  },
+  responsesTab: {
+    id: 'discussions.learner.tab.responses',
+    defaultMessage: 'Responses',
+    description: "Label for the learner's responses tab",
+  },
+  commentsTab: {
+    id: 'discussions.learner.tab.comments',
+    defaultMessage: 'Comments',
+    description: "Label for the learner's comments tab",
+  },
+});
+
+export default messages;

src/discussions/navigation/navigation-bar/NavigationBar.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useSelector } from 'react-redux';
-import { useParams } from 'react-router';
+import { matchPath, useParams } from 'react-router';
 import { NavLink } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -27,6 +27,7 @@ function NavigationBar({ intl }) {
     },
     {
       route: Routes.TOPICS.ALL,
+      isActive: (match, location) => Boolean(matchPath(location.pathname, { path: Routes.TOPICS.PATH })),
       labelMessage: messages.allTopics,
     },
   ];
@@ -41,7 +42,12 @@ function NavigationBar({ intl }) {
     <Nav variant="pills" className="py-2">
       {navLinks.map(link => (
         <Nav.Item key={link.route}>
-          <Nav.Link as={NavLink} to={discussionsPath(link.route, { courseId })} className="border">
+          <Nav.Link
+            as={NavLink}
+            to={discussionsPath(link.route, { courseId })}
+            className="border"
+            isActive={link.isActive}
+          >
             {intl.formatMessage(link.labelMessage)}
           </Nav.Link>
         </Nav.Item>

src/discussions/posts/PostsView.jsx

@@ -23,7 +23,32 @@ import PostFilterBar from './post-filter-bar/PostFilterBar';
 import NoResults from './NoResults';
 import { PostLink } from './post';
 
-function PostsList({ posts }) {
+function PostsList({ posts, topics }) {
+  const dispatch = useDispatch();
+  const {
+    courseId,
+    page,
+  } = useContext(DiscussionContext);
+  const loadingStatus = useSelector(threadsLoadingStatus());
+  const { authenticatedUser } = useContext(AppContext);
+  const orderBy = useSelector(selectThreadSorting());
+  const filters = useSelector(selectThreadFilters());
+  const nextPage = useSelector(selectThreadNextPage());
+  const showOwnPosts = page === 'my-posts';
+
+  const loadThreads = (topicIds, pageNum = undefined) => dispatch(fetchThreads(courseId, {
+    topicIds,
+    orderBy,
+    filters,
+    page: pageNum,
+    author: showOwnPosts ? authenticatedUser.username : null,
+  }));
+
+  useEffect(() => {
+    if (topics !== undefined) {
+      loadThreads(topics);
+    }
+  }, [courseId, orderBy, filters, page, JSON.stringify(topics)]);
   let lastPinnedIdx = null;
   const postInstances = posts && posts.map((post, idx) => {
     if (post.pinned && lastPinnedIdx !== false) {
@@ -33,7 +58,7 @@ function PostsList({ posts }) {
       // Add a spacing after the group of pinned posts
       return (
         <React.Fragment key={post.id}>
-          <div className="p-1 bg-light-300" />
+          <div className="p-1 bg-light-400" />
           <PostLink post={post} key={post.id} />
         </React.Fragment>
       );
@@ -44,6 +69,18 @@ function PostsList({ posts }) {
     <>
       {postInstances}
       {posts && posts.length === 0 && <NoResults />}
+      {loadingStatus === RequestStatus.IN_PROGRESS ? (
+        <div className="d-flex justify-content-center p-4">
+          <Spinner animation="border" variant="primary" size="lg" />
+        </div>
+      ) : (
+        nextPage && (
+          <ScrollThreshold onScroll={() => {
+            loadThreads(topics, nextPage);
+          }}
+          />
+        )
+      )}
     </>
   );
 }
@@ -53,84 +90,67 @@ PostsList.propTypes = {
     pinned: PropTypes.bool.isRequired,
     id: PropTypes.string.isRequired,
   })),
+  topics: PropTypes.arrayOf(PropTypes.string),
 };
 
 PostsList.defaultProps = {
   posts: [],
+  topics: undefined,
 };
 
-function PostsView({ showOwnPosts }) {
+function AllPostsList() {
+  const posts = useSelector(selectAllThreads);
+  return <PostsList posts={posts} topics={null} />;
+}
+
+function TopicPostsList({ topicId }) {
+  const posts = useSelector(selectTopicThreads([topicId]));
+  return <PostsList posts={posts} topics={[topicId]} />;
+}
+
+TopicPostsList.propTypes = {
+  topicId: PropTypes.string.isRequired,
+};
+
+function CategoryPostsList({ category }) {
+  const topicIds = useSelector(selectTopicsUnderCategory)(category);
+  const posts = useSelector(selectTopicThreads(topicIds));
+  return <PostsList posts={posts} topics={topicIds} />;
+}
+
+CategoryPostsList.propTypes = {
+  category: PropTypes.string.isRequired,
+};
+
+function PostsView() {
   const {
-    courseId,
     topicId,
     category,
+    page,
   } = useContext(DiscussionContext);
-  const dispatch = useDispatch();
-  const { authenticatedUser } = useContext(AppContext);
-  let topicIds = null;
-  const orderBy = useSelector(selectThreadSorting());
-  const filters = useSelector(selectThreadFilters());
-  const nextPage = useSelector(selectThreadNextPage());
-  const loadingStatus = useSelector(threadsLoadingStatus());
 
-  let postsListComponent = null;
-  let posts = [];
+  let postsListComponent;
+  const showOwnPosts = page === 'my-posts';
+
   if (topicId) {
-    posts = useSelector(selectTopicThreads([topicId]));
+    postsListComponent = <TopicPostsList topicId={topicId} />;
   } else if (category) {
-    topicIds = useSelector(selectTopicsUnderCategory)(category);
-    posts = useSelector(selectTopicThreads(topicIds));
+    postsListComponent = <CategoryPostsList category={category} />;
   } else {
-    posts = useSelector(selectAllThreads);
+    postsListComponent = <AllPostsList />;
   }
-  postsListComponent = <PostsList posts={posts} />;
-  useEffect(() => {
-    // The courseId from the URL is the course we WANT to load.
-    dispatch(fetchThreads(courseId, {
-      topicIds,
-      orderBy,
-      filters,
-      author: showOwnPosts ? authenticatedUser.username : null,
-    }));
-  }, [courseId, orderBy, filters, showOwnPosts, topicId, category]);
-
-  const loadMorePosts = async () => {
-    if (nextPage) {
-      dispatch(fetchThreads(courseId, {
-        topicIds,
-        orderBy,
-        filters,
-        page: nextPage,
-        author: showOwnPosts ? authenticatedUser.username : null,
-      }));
-    }
-  };
 
   return (
     <div className="discussion-posts d-flex flex-column">
       <PostFilterBar filterSelfPosts={showOwnPosts} />
       <div className="list-group list-group-flush">
         {postsListComponent}
-        {loadingStatus === RequestStatus.IN_PROGRESS ? (
-          <div className="d-flex justify-content-center p-4">
-            <Spinner animation="border" variant="primary" size="lg" />
-          </div>
-        ) : (
-          nextPage && (
-            <ScrollThreshold onScroll={loadMorePosts} />
-          )
-        )}
       </div>
     </div>
   );
 }
 
 PostsView.propTypes = {
-  showOwnPosts: PropTypes.bool,
-};
-
-PostsView.defaultProps = {
-  showOwnPosts: false,
 };
 
 export default PostsView;

src/discussions/posts/PostsView.test.jsx

@@ -29,16 +29,19 @@ async function renderComponent({
   postId, topicId, category, myPosts,
 } = { myPosts: false }) {
   let path = generatePath(Routes.POSTS.ALL_POSTS, { courseId });
-  let showOwnPosts = false;
+  let page;
   if (postId) {
     path = generatePath(Routes.POSTS.ALL_POSTS, { courseId, postId });
+    page = 'posts';
   } else if (topicId) {
     path = generatePath(Routes.POSTS.PATH, { courseId, topicId });
+    page = 'posts';
   } else if (category) {
     path = generatePath(Routes.TOPICS.CATEGORY, { courseId, category });
+    page = 'category';
   } else if (myPosts) {
     path = generatePath(Routes.POSTS.MY_POSTS, { courseId });
-    showOwnPosts = myPosts;
+    page = 'my-posts';
   }
   await render(
     <IntlProvider locale="en">
@@ -49,11 +52,12 @@ async function renderComponent({
             postId,
             topicId,
             category,
+            page,
           }}
           >
             <Switch>
               <Route path={Routes.POSTS.MY_POSTS}>
-                <PostsView showOwnPosts={showOwnPosts} />
+                <PostsView />
               </Route>
               <Route
                 path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.TOPICS.CATEGORY]}
@@ -81,6 +85,7 @@ describe('PostsView', () => {
 
     store = initializeStore({
       blocks: { blocks: { 'test-usage-key': { topics: ['some-topic-2', 'some-topic-0'] } } },
+      config: { userIsPrivileged: true },
     });
     Factory.resetAll();
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());

src/discussions/posts/data/api.js

@@ -196,3 +196,21 @@ export async function uploadFile(blob, filename, courseId, threadKey) {
   }
   return data;
 }
+
+/**
+ * Get the posts by a specific user in a course's discussions
+ *
+ * @param {string} courseId Course ID of the course
+ * @param {string} username Username of the user
+ * @param {number} page
+ * @returns API Response object in the format
+ *  {
+ *    results: [array of posts],
+ *    pagination: {count, num_pages, next, previous}
+ *  }
+ */
+export async function getUserPosts(courseId, username, { page }) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(threadsApiUrl, { params: { course_id: courseId, author: username, page } });
+  return data;
+}

src/discussions/posts/post-editor/PostEditor.jsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { Formik } from 'formik';
+import { isEmpty } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import * as Yup from 'yup';
@@ -83,14 +84,21 @@ function PostEditor({
   const nonCoursewareTopics = useSelector(selectNonCoursewareTopics);
   const nonCoursewareIds = useSelector(selectNonCoursewareIds);
   const coursewareTopics = useSelector(selectCoursewareTopics);
-  const {
-    allowAnonymous,
-    allowAnonymousToPeers,
-  } = useSelector(selectAnonymousPostingConfig);
   const cohorts = useSelector(selectCourseCohorts);
   const post = useSelector(selectThread(postId));
   const userIsPrivileged = useSelector(selectUserIsPrivileged);
   const settings = useSelector(selectDivisionSettings);
+  const { allowAnonymous, allowAnonymousToPeers } = useSelector(selectAnonymousPostingConfig);
+  const { reasonCodesEnabled, editReasons } = useSelector(selectModerationSettings);
+
+  const canDisplayEditReason = (reasonCodesEnabled && editExisting
+    && userIsPrivileged && post.author !== authenticatedUser.username
+  );
+
+  const editReasonCodeValidation = canDisplayEditReason && {
+    editReasonCode: Yup.string().required(intl.formatMessage(messages.editReasonCodeError)),
+  };
+
   const canSelectCohort = (tId) => {
     // If the user isn't privileged, they can't edit the cohort.
     // If the topic is being edited the cohort can't be changed.
@@ -164,60 +172,48 @@ function PostEditor({
       </div>
     );
   }
-  let initialValues = {
-    postType: 'discussion',
-    topic: topicId || nonCoursewareTopics?.[0]?.id,
-    title: '',
-    comment: '',
-    follow: true,
-    anonymous: false,
-    anonymousToPeers: false,
+
+  const initialValues = {
+    postType: post?.type || 'discussion',
+    topic: post?.topicId || topicId || nonCoursewareTopics?.[0]?.id,
+    title: post?.title || '',
+    comment: post?.rawBody || '',
+    follow: isEmpty(post?.following) ? true : post?.following,
+    anonymous: allowAnonymous ? false : undefined,
+    anonymousToPeers: allowAnonymousToPeers ? false : undefined,
+    editReasonCode: post?.lastEdit?.reasonCode || '',
   };
-  if (editExisting) {
-    initialValues = {
-      postType: post.type,
-      topic: post.topicId,
-      title: post.title,
-      comment: post.rawBody,
-      follow: (post.following === null || post.following === undefined) ? true : post.following,
-      anonymous: allowAnonymous ? false : undefined,
-      anonymousToPeers: allowAnonymousToPeers ? false : undefined,
-    };
-  }
+
+  const validationSchema = Yup.object().shape({
+    postType: Yup.mixed()
+      .oneOf(['discussion', 'question']),
+    topic: Yup.string()
+      .required(),
+    title: Yup.string()
+      .required(intl.formatMessage(messages.titleError)),
+    comment: Yup.string()
+      .required(intl.formatMessage(messages.commentError)),
+    follow: Yup.bool()
+      .default(true),
+    anonymous: Yup.bool()
+      .default(false)
+      .nullable(),
+    anonymousToPeers: Yup.bool()
+      .default(false)
+      .nullable(),
+    cohort: Yup.string()
+      .nullable()
+      .default(null),
+    ...editReasonCodeValidation,
+  });
 
   const postEditorId = `post-editor-${editExisting ? postId : 'new'}`;
 
-  const { reasonCodesEnabled, editReasons } = useSelector(selectModerationSettings);
-
   return (
     <Formik
       enableReinitialize
       initialValues={initialValues}
-      validationSchema={Yup.object()
-        .shape({
-          postType: Yup.mixed()
-            .oneOf(['discussion', 'question']),
-          topic: Yup.string()
-            .required(),
-          title: Yup.string()
-            .required(intl.formatMessage(messages.titleError)),
-          comment: Yup.string()
-            .required(intl.formatMessage(messages.commentError)),
-          follow: Yup.bool()
-            .default(true),
-          anonymous: Yup.bool()
-            .default(false)
-            .nullable(),
-          anonymousToPeers: Yup.bool()
-            .default(false)
-            .nullable(),
-          cohort: Yup.string()
-            .nullable()
-            .default(null),
-          editReasonCode: Yup.string()
-            .nullable()
-            .default(null),
-        })}
+      validationSchema={validationSchema}
       onSubmit={submitForm}
     >{
       ({
@@ -304,7 +300,7 @@ function PostEditor({
           <div className="border-bottom my-1" />
           <div className="d-flex flex-row py-2 mt-4 justify-content-between">
             <Form.Group
-              className="d-flex flex-fill"
+              className="w-100"
               isInvalid={isFormikFieldInvalid('title', {
                 errors,
                 touched,
@@ -321,27 +317,31 @@ function PostEditor({
               />
               <FormikErrorFeedback name="title" />
             </Form.Group>
-            {(reasonCodesEnabled
-              && editExisting
-              && userIsPrivileged
-              && post.author !== authenticatedUser.username) && (
-                <Form.Group className="d-flex flex-fill">
-                  <Form.Control
-                    name="editReasonCode"
-                    className="ml-4"
-                    as="select"
-                    value={values.editReasonCode}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                    aria-describedby="editReasonCodeInput"
-                    floatingLabel={intl.formatMessage(messages.editReasonCode)}
-                  >
-                    <option key="empty" value="">---</option>
-                    {editReasons.map(({ code, label }) => (
-                      <option key={code} value={code}>{label}</option>
-                    ))}
-                  </Form.Control>
-                </Form.Group>
+            {canDisplayEditReason && (
+              <Form.Group
+                className="w-100"
+                isInvalid={isFormikFieldInvalid('editReasonCode', {
+                  errors,
+                  touched,
+                })}
+              >
+                <Form.Control
+                  name="editReasonCode"
+                  className="m-0"
+                  as="select"
+                  value={values.editReasonCode}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  aria-describedby="editReasonCodeInput"
+                  floatingLabel={intl.formatMessage(messages.editReasonCode)}
+                >
+                  <option key="empty" value="">---</option>
+                  {editReasons.map(({ code, label }) => (
+                    <option key={code} value={code}>{label}</option>
+                  ))}
+                </Form.Control>
+                <FormikErrorFeedback name="editReasonCode" />
+              </Form.Group>
             )}
           </div>
           <div className="py-2">
@@ -374,19 +374,6 @@ function PostEditor({
                     {intl.formatMessage(messages.followPost)}
                   </Form.Checkbox>
                 </Form.Group>
-                {allowAnonymous && (
-                  <Form.Group>
-                    <Form.Checkbox
-                      name="anonymous"
-                      checked={values.anonymous}
-                      onChange={handleChange}
-                      onBlur={handleBlur}
-                      className="mr-4"
-                    >
-                      {intl.formatMessage(messages.anonymousPost)}
-                    </Form.Checkbox>
-                  </Form.Group>
-                )}
                 {allowAnonymousToPeers
                   && (
                     <Form.Group>

src/discussions/posts/post-editor/PostEditor.test.jsx

@@ -117,15 +117,13 @@ describe('PostEditor', () => {
           .toHaveLength(3);
 
         expect(screen.queryByText('cohort', { exact: false }))
-          .not
-          .toBeInTheDocument();
+          .not.toBeInTheDocument();
         if (allowAnonymous) {
           expect(screen.queryByText('Post anonymously'))
-            .toBeInTheDocument();
+            .not.toBeInTheDocument();
         } else {
           expect(screen.queryByText('Post anonymously'))
-            .not
-            .toBeInTheDocument();
+            .not.toBeInTheDocument();
         }
         if (allowAnonymousToPeers) {
           expect(screen.queryByText('Post anonymously to peers'))

src/discussions/posts/post-editor/messages.js

@@ -106,6 +106,11 @@ const messages = defineMessages({
     defaultMessage: 'Reason for editing',
     description: 'Label for field visible to moderators that allows them to select a reason for editing another user\'s post',
   },
+  editReasonCodeError: {
+    id: 'discussions.editor.posts.editReasonCode.error',
+    defaultMessage: 'Select reason for editing',
+    description: 'Error message visible to moderators when they submit the post/response/comment without select reason for editing',
+  },
 });
 
 export default messages;

src/discussions/posts/post-filter-bar/PostFilterBar.jsx

@@ -1,17 +1,17 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
 import { Collapsible, Form, Icon } from '@edx/paragon';
 import { Check, Sort } from '@edx/paragon/icons';
 
 import {
   PostsStatusFilter, ThreadOrdering, ThreadType,
 } from '../../../data/constants';
+import { selectUserIsPrivileged } from '../../data/selectors';
 import { setPostsTypeFilter, setSortedBy, setStatusFilter } from '../data';
 import { selectThreadFilters, selectThreadSorting } from '../data/selectors';
 import messages from './messages';
@@ -44,8 +44,8 @@ function PostFilterBar({
   filterSelfPosts,
   intl,
 }) {
-  const { authenticatedUser } = useContext(AppContext);
   const dispatch = useDispatch();
+  const userIsPrivileged = useSelector(selectUserIsPrivileged);
   const currentSorting = useSelector(selectThreadSorting());
   const currentFilters = useSelector(selectThreadFilters());
   const [isOpen, setOpen] = useState(false);
@@ -147,7 +147,7 @@ function PostFilterBar({
             value={PostsStatusFilter.FOLLOWING}
             selected={currentFilters.status}
           />
-          {authenticatedUser.administrator
+          {userIsPrivileged
           && (
           <ActionItem
             id="status-reported"

src/discussions/posts/post/ClosePostReasonModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { useSelector } from 'react-redux';
@@ -20,6 +20,7 @@ function ClosePostReasonModal({
   onCancel,
   onConfirm,
 }) {
+  const scrollTo = useRef(null);
   const [reasonCode, setReasonCode] = useState(null);
 
   const { postCloseReasons } = useSelector(selectModerationSettings);
@@ -32,12 +33,25 @@ function ClosePostReasonModal({
     }
   };
 
+  useEffect(() => {
+    /* istanbul ignore if: This API is not available in the test environment. */
+    if (scrollTo.current && scrollTo.current.scrollIntoView) {
+      // Use a timeout since the component is first given focus, which scrolls
+      // it into view but doesn't centrally align it. This should run after that.
+      setTimeout(() => {
+        scrollTo.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }, 0);
+    }
+  }, [scrollTo, isOpen]);
+
   return (
     <ModalDialog
       title={intl.formatMessage(messages.closePostModalTitle)}
       isOpen={isOpen}
       onClose={onCancel}
       hasCloseButton={false}
+      isFullscreenOnMobile
+      isFullscreenScroll
     >
       <ModalDialog.Header>
         <ModalDialog.Title>
@@ -45,7 +59,7 @@ function ClosePostReasonModal({
         </ModalDialog.Title>
       </ModalDialog.Header>
       <ModalDialog.Body>
-        <p>{intl.formatMessage(messages.closePostModalText)}</p>
+        <p ref={scrollTo}>{intl.formatMessage(messages.closePostModalText)}</p>
         <Form.Group>
           <Form.Control
             name="reasonCode"

src/discussions/posts/post/LikeButton.jsx

@@ -5,8 +5,8 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Icon, IconButton, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
-import { ThumbUpFilled, ThumbUpOutline } from '@edx/paragon/icons';
 
+import { ThumbUpFilled, ThumbUpOutline } from '../../../components/icons';
 import messages from './messages';
 
 function LikeButton({
@@ -34,7 +34,7 @@ function LikeButton({
       >
         <IconButton
           onClick={handleClick}
-          className="p-3 mr-2"
+          className="p-3 mr-2 mt-1"
           alt="Like"
           iconAs={Icon}
           size="inline"

src/discussions/posts/post/Post.jsx

@@ -75,7 +75,7 @@ function Post({
       <PostHeader post={post} actionHandlers={actionHandlers} />
       <div className="d-flex my-2 text-break">
         {/* eslint-disable-next-line react/no-danger */}
-        <div dangerouslySetInnerHTML={{ __html: post.renderedBody }} />
+        <div id="post" dangerouslySetInnerHTML={{ __html: post.renderedBody }} />
       </div>
       {topicContext && topic && (
         <div className="border p-3 rounded mb-3 mt-2 align-self-start">

src/discussions/posts/post/PostFooter.jsx

@@ -9,9 +9,15 @@ import {
   Badge, Icon, IconButton, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
 import {
-  Locked, People, QuestionAnswer, QuestionAnswerOutline, StarFilled, StarOutline,
+  Locked, People,
 } from '@edx/paragon/icons';
 
+import {
+  QuestionAnswer,
+  QuestionAnswerOutline,
+  StarFilled,
+  StarOutline,
+} from '../../../components/icons';
 import { updateExistingThread } from '../data/thunks';
 import LikeButton from './LikeButton';
 import messages from './messages';
@@ -24,7 +30,7 @@ function PostFooter({
 }) {
   const dispatch = useDispatch();
   return (
-    <div className="d-flex align-items-center mt-2">
+    <div className="d-flex align-items-center">
       <LikeButton
         count={post.voteCount}
         onClick={() => dispatch(updateExistingThread(post.id, { voted: !post.voted }))}
@@ -45,14 +51,14 @@ function PostFooter({
           alt="Follow"
           iconAs={Icon}
           size="inline"
-          className="mx-2.5 my-0"
+          className="mx-2.5 my-0 mt-1.5"
           src={post.following ? StarFilled : StarOutline}
         />
       </OverlayTrigger>
       {preview && post.commentCount > 1
         && (
           <>
-            <Icon src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline} className="mx-2 my-0" />
+            <Icon src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline} className="mx-2 my-0 mt-2" />
             <span style={{ minWidth: '2rem' }}>
               {post.commentCount}
             </span>

src/discussions/posts/post/PostLink.jsx

@@ -24,12 +24,14 @@ function PostLink({
     page,
     postId,
     inContext,
+    category,
   } = useContext(DiscussionContext);
   const linkUrl = discussionsPath(Routes.COMMENTS.PAGES[page], {
     0: inContext ? 'in-context' : undefined,
     courseId: post.courseId,
     topicId: post.topicId,
     postId: post.id,
+    category,
   });
   const showAnsweredBadge = post.hasEndorsed && post.type === ThreadType.QUESTION;
   const authorLabelColor = AvatarBorderAndLabelColors[post.authorLabel];
@@ -37,6 +39,7 @@ function PostLink({
     <Link
       className="discussion-post list-group-item list-group-item-action p-0 text-decoration-none text-gray-900 mw-100"
       to={linkUrl}
+      style={{ lineHeight: '21px' }}
     >
       {post.pinned && (
         <div className="d-flex flex-fill justify-content-end mr-4 text-light-500 p-0">
@@ -44,7 +47,7 @@ function PostLink({
         </div>
       )}
       <div
-        className={classNames('d-flex flex-row flex-fill mw-100 p-3 border-primary-500', { 'bg-light-300': post.read })}
+        className={classNames('d-flex flex-row flex-fill mw-100 p-2.5 border-primary-500', { 'bg-light-300': post.read })}
         style={post.id === postId ? {
           borderRightWidth: '4px',
           borderRightStyle: 'solid',

src/index.scss

@@ -5,3 +5,11 @@
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
+
+
+#post, #comment, #reply {
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+}