fix: fixed post coment actions menu accessibilty for keyboard

Update standard workflow files.

.github/pull_request_template.md

@@ -0,0 +1,24 @@
+### Description
+
+Include a description of your changes here, along with a link to any relevant Jira tickets and/or GitHub issues.
+
+#### How Has This Been Tested?
+
+Please describe in detail how you tested your changes.
+
+#### Screenshots/sandbox (optional):
+Include a link to the sandbox for design changes or screenshot for before and after. **Remove this section if it's not applicable.**
+
+|Before|After|
+|-------|-----|
+|      |      |
+
+#### Merge Checklist
+
+* [ ] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
+* [ ] Is there adequate test coverage for your changes?
+
+#### Post-merge Checklist
+
+* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/edx-infinity** to do it. 
+* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -16,4 +16,4 @@ jobs:
     secrets:
       GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
       GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

README.rst

@@ -1,16 +1,15 @@
-|Build Status| |Codecov| |license|
-
 frontend-app-discussions
 ========================
 
-Please tag **@edx/fedx-team** on any PRs or issues.  Thanks.
+|Build Status| |Codecov| |license|
 
-Introduction
-------------
+Purpose
+-------
 
 This repository is a React-based micro frontend for the Open edX discussion forums.
 
-**Installation and Startup**
+Getting Started
+---------------
 
 1. Clone your new repo:
 
@@ -26,6 +25,44 @@ This repository is a React-based micro frontend for the Open edX discussion foru
 
 The dev server is running at `http://localhost:2002 <http://localhost:2002>`_.
 
+Getting Help
+------------
+Please tag **@openedx/edx-infinity ** on any PRs or issues.  Thanks.
+
+If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.
+For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-discussions/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Getting Help: https://openedx.org/getting-help
+
+How to Contribute
+-----------------
+Details about how to become a contributor to the Open edX project may be found in the wiki at `How to contribute`_
+
+.. _How to contribute: https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/process/index.html
+
+PR description template should be automatically applied if you are sending PR from github interface; otherwise you
+can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend-app-discussions/blob/master/.github/pull_request_template.md>`_
+
+This project is currently accepting all types of contributions, bug fixes and security fixes
+
+The Open edX Code of Conduct
+----------------------------
+All community members should familiarize themselves with the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+People
+------
+The assigned maintainers for this component and other project details may be found in Backstage or from inspecting catalog-info.yaml.
+
+Reporting Security Issues
+-------------------------
+Please do not report security issues in public. Please email security@edx.org.
+
 Project Structure
 -----------------
 
@@ -48,4 +85,4 @@ Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-
 .. |Codecov| image:: https://codecov.io/gh/edx/frontend-app-discussions/branch/master/graph/badge.svg
    :target: https://codecov.io/gh/edx/frontend-app-discussions
 .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-discussions.svg
-   :target: @edx/frontend-app-discussions
+   :target: @edx/frontend-app-discussions

catalog-info.yaml

@@ -0,0 +1,18 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: 'frontend-app-discussions'
+  description: "The discussion forum for openEdx discussions"
+  links:
+    - url: "https://github.com/openedx/frontend-app-discussions"
+      title: "Frontend app discussions"
+      icon: "Web"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:edx-infinity
+  type: 'website'
+  lifecycle: 'production'

public/index.html

@@ -13,41 +13,178 @@
       window.MathJax = {
         tex: {
           inlineMath: [
-            ['$', '$'],
-            ['\\\\(', '\\\\)'],
-            ['\\(', '\\)'],
-            ['[mathjaxinline]', '[/mathjaxinline]'],
-            ['\\begin{math}', '\\end{math}'],
+            ["$", "$"],
+            ["\\\\(", "\\\\)"],
+            ["\\(", "\\)"],
+            ["[mathjaxinline]", "[/mathjaxinline]"],
+            ["\\begin{math}", "\\end{math}"],
           ],
           displayMath: [
-            ['[mathjax]', '[/mathjax]'],
-            ['$$', '$$'],
-            ['\\\\[', '\\\\]'],
-            ['\\[', '\\]'],
-            ['\\begin{displaymath}', '\\end{displaymath}'],
-            ['\\begin{equation}', '\\end{equation}'],
+            ["[mathjax]", "[/mathjax]"],
+            ["$$", "$$"],
+            ["\\\\[", "\\\\]"],
+            ["\\[", "\\]"],
+            ["\\begin{displaymath}", "\\end{displaymath}"],
+            ["\\begin{equation}", "\\end{equation}"],
           ],
           processEscapes: true,
           processEnvironments: true,
           autoload: {
             color: [],
-            colorv2: ['color']
+            colorv2: ["color"],
           },
-          packages: {'[+]': ['noerrors']}
+          packages: { "[+]": ["noerrors"] },
         },
         options: {
-          ignoreHtmlClass: 'tex2jax_ignore',
-          processHtmlClass: 'tex2jax_process'
+          ignoreHtmlClass: "tex2jax_ignore",
+          processHtmlClass: "tex2jax_process",
         },
         loader: {
-          load: ['input/asciimath', '[tex]/noerrors']
-        }
+          load: ["input/asciimath", "[tex]/noerrors"],
+        },
       };
     </script>
-    <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script"></script>
-
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+      id="MathJax-script"
+    ></script>
   </head>
   <body>
     <div id="root" class="small"></div>
+
+    <!-- begin usabilla live embed code -->
+    <script defer type="text/javascript">
+      window.lightningjs ||
+        (function (n) {
+          var e = "lightningjs";
+          function t(e, t) {
+            var r, i, a, o, d, c;
+            return (
+              t && (t += (/\?/.test(t) ? "&" : "?") + "lv=1"),
+              n[e] ||
+                ((r = window),
+                (i = document),
+                (a = e),
+                (o = i.location.protocol),
+                (d = "load"),
+                (c = 0),
+                (function () {
+                  n[a] = function () {
+                    var t = arguments,
+                      i = this,
+                      o = ++c,
+                      d = (i && i != r && i.id) || 0;
+                    function s() {
+                      return (s.id = o), n[a].apply(s, arguments);
+                    }
+                    return (
+                      (e.s = e.s || []).push([o, d, t]),
+                      (s.then = function (n, t, r) {
+                        var i = (e.fh[o] = e.fh[o] || []),
+                          a = (e.eh[o] = e.eh[o] || []),
+                          d = (e.ph[o] = e.ph[o] || []);
+                        return (
+                          n && i.push(n), t && a.push(t), r && d.push(r), s
+                        );
+                      }),
+                      s
+                    );
+                  };
+                  var e = (n[a]._ = {});
+                  function s() {
+                    e.P(d), (e.w = 1), n[a]("_load");
+                  }
+                  (e.fh = {}),
+                    (e.eh = {}),
+                    (e.ph = {}),
+                    (e.l = t
+                      ? t.replace(/^\/\//, ("https:" == o ? o : "http:") + "//")
+                      : t),
+                    (e.p = { 0: +new Date() }),
+                    (e.P = function (n) {
+                      e.p[n] = new Date() - e.p[0];
+                    }),
+                    e.w && s(),
+                    r.addEventListener
+                      ? r.addEventListener(d, s, !1)
+                      : r.attachEvent("onload", s);
+                  var l = function () {
+                    function n() {
+                      return [
+                        "<!DOCTYPE ",
+                        o,
+                        "><",
+                        o,
+                        "><head></head><",
+                        t,
+                        "><",
+                        r,
+                        ' src="',
+                        e.l,
+                        '"></',
+                        r,
+                        "></",
+                        t,
+                        "></",
+                        o,
+                        ">",
+                      ].join("");
+                    }
+                    var t = "body",
+                      r = "script",
+                      o = "html",
+                      d = i[t];
+                    if (!d) return setTimeout(l, 100);
+                    e.P(1);
+                    var c,
+                      s = i.createElement("div"),
+                      h = s.appendChild(i.createElement("div")),
+                      u = i.createElement("iframe");
+                    (s.style.display = "none"),
+                      (d.insertBefore(s, d.firstChild).id = "lightningjs-" + a),
+                      (u.frameBorder = "0"),
+                      (u.id = "lightningjs-frame-" + a),
+                      /MSIE[ ]+6/.test(navigator.userAgent) &&
+                        (u.src = "javascript:false"),
+                      (u.allowTransparency = "true"),
+                      h.appendChild(u);
+                    try {
+                      u.contentWindow.document.open();
+                    } catch (n) {
+                      (e.domain = i.domain),
+                        (c =
+                          "javascript:var d=document.open();d.domain='" +
+                          i.domain +
+                          "';"),
+                        (u.src = c + "void(0);");
+                    }
+                    try {
+                      var p = u.contentWindow.document;
+                      p.write(n()), p.close();
+                    } catch (e) {
+                      u.src =
+                        c +
+                        'd.write("' +
+                        n().replace(/"/g, String.fromCharCode(92) + '"') +
+                        '");d.close();';
+                    }
+                    e.P(2);
+                  };
+                  e.l && l();
+                })()),
+              (n[e].lv = "1"),
+              n[e]
+            );
+          }
+          var r = (window.lightningjs = t(e));
+          (r.require = t), (r.modules = n);
+        })({});
+      window.usabilla_live = lightningjs.require(
+        "usabilla_live",
+        "//w.usabilla.com/9e6036348fa1.js"
+      );
+    </script>
+    <!-- end usabilla live embed code -->
   </body>
 </html>

src/components/HTMLLoader.jsx

@@ -5,30 +5,37 @@ import DOMPurify from 'dompurify';
 
 import { logError } from '@edx/frontend-platform/logging';
 
+import { useDebounce } from '../discussions/data/hooks';
+
 const defaultSanitizeOptions = {
   USE_PROFILES: { html: true },
   ADD_ATTR: ['columnalign'],
 };
 
-function HTMLLoader({ htmlNode, componentId, cssClassName }) {
+function HTMLLoader({
+  htmlNode, componentId, cssClassName, testId, delay,
+}) {
   const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
   const previewRef = useRef();
 
+  const debouncedPostContent = useDebounce(htmlNode, delay);
+
   useEffect(() => {
     let promise = Promise.resolve(); // Used to hold chain of typesetting calls
     function typeset(code) {
-      promise = promise.then(() => window.MathJax.typesetPromise(code()))
+      promise = promise.then(() => window.MathJax?.typesetPromise(code()))
         .catch((err) => logError(`Typeset failed: ${err.message}`));
       return promise;
     }
-
-    typeset(() => {
-      previewRef.current.innerHTML = sanitizedMath;
-    });
-  }, [sanitizedMath]);
+    if (debouncedPostContent) {
+      typeset(() => {
+        previewRef.current.innerHTML = sanitizedMath;
+      });
+    }
+  }, [debouncedPostContent]);
 
   return (
-    <div ref={previewRef} className={cssClassName} id={componentId} />
+    <div ref={previewRef} className={cssClassName} id={componentId} data-testid={testId} />
 
   );
 }
@@ -37,12 +44,16 @@ HTMLLoader.propTypes = {
   htmlNode: PropTypes.node,
   componentId: PropTypes.string,
   cssClassName: PropTypes.string,
+  testId: PropTypes.string,
+  delay: PropTypes.number,
 };
 
 HTMLLoader.defaultProps = {
   htmlNode: '',
   componentId: null,
   cssClassName: '',
+  testId: '',
+  delay: 0,
 };
 
 export default HTMLLoader;

src/components/PostPreviewPane.jsx

@@ -29,17 +29,22 @@ function PostPreviewPane({
             className="float-right p-3"
             iconClassNames="icon-size"
           />
-          <HTMLLoader htmlNode={htmlNode} cssClassName="text-primary" componentId="post-preview" />
+          <HTMLLoader
+            htmlNode={htmlNode}
+            cssClassName="text-primary"
+            componentId="post-preview"
+            testId="post-preview"
+            delay={500}
+          />
         </div>
       )}
       <div className="d-flex justify-content-end">
-        {!showPreviewPane
-        && (
+        {!showPreviewPane && (
           <Button
             variant="link"
             size="sm"
             onClick={() => setShowPreviewPane(true)}
-            className={`text-primary-500 p-0 ${editExisting && 'mb-4.5'}`}
+            className={`text-primary-500 font-style p-0 ${editExisting && 'mb-4.5'}`}
             style={{ lineHeight: '26px' }}
           >
             {intl.formatMessage(messages.showPreviewButton)}

src/components/TinyMCEEditor.jsx

@@ -119,6 +119,7 @@ export default function TinyMCEEditor(props) {
           content_css: false,
           content_style: contentStyle,
           body_class: 'm-2 text-editor',
+          convert_urls: false,
           relative_urls: false,
           default_link_target: '_blank',
           target_list: false,

src/components/TopicStats.jsx

@@ -0,0 +1,108 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
+import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
+
+import {
+  selectUserHasModerationPrivileges,
+  selectUserIsGroupTa,
+} from '../discussions/data/selectors';
+import messages from '../discussions/in-context-topics/messages';
+
+function TopicStats({
+  threadCounts,
+  activeFlags,
+  inactiveFlags,
+  intl,
+}) {
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+  const userIsGroupTa = useSelector(selectUserIsGroupTa);
+  const canSeeReportedStats = (activeFlags || inactiveFlags) && (userHasModerationPrivileges || userIsGroupTa);
+  return (
+    <div className="d-flex align-items-center mt-2.5" style={{ marginBottom: '2px' }}>
+      <OverlayTrigger
+        overlay={(
+          <Tooltip>
+            <div className="d-flex flex-column align-items-start">
+              {intl.formatMessage(messages.discussions, {
+                count: threadCounts?.discussion || 0,
+              })}
+            </div>
+          </Tooltip>
+        )}
+      >
+        <div className="d-flex align-items-center mr-3.5">
+          <Icon src={PostOutline} className="icon-size mr-2" />
+          {threadCounts?.discussion || 0}
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger
+        overlay={(
+          <Tooltip>
+            <div className="d-flex flex-column align-items-start">
+              {intl.formatMessage(messages.questions, {
+                count: threadCounts?.question || 0,
+              })}
+            </div>
+          </Tooltip>
+        )}
+      >
+        <div className="d-flex align-items-center mr-3.5">
+          <Icon src={HelpOutline} className="icon-size mr-2" />
+          {threadCounts?.question || 0}
+        </div>
+      </OverlayTrigger>
+      {Boolean(canSeeReportedStats) && (
+        <OverlayTrigger
+          overlay={(
+            <Tooltip>
+              <div className="d-flex flex-column align-items-start">
+                {Boolean(activeFlags) && (
+                  <span>
+                    {intl.formatMessage(messages.reported, { reported: activeFlags })}
+                  </span>
+                )}
+                {Boolean(inactiveFlags) && (
+                  <span>
+                    {intl.formatMessage(messages.previouslyReported, { previouslyReported: inactiveFlags })}
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+          )}
+        >
+          <div className="d-flex align-items-center">
+            <Icon src={Report} className="icon-size mr-2 text-danger" />
+            {activeFlags}{Boolean(inactiveFlags) && `/${inactiveFlags}`}
+          </div>
+        </OverlayTrigger>
+      )}
+    </div>
+  );
+}
+
+TopicStats.propTypes = {
+  threadCounts: PropTypes.shape({
+    discussions: PropTypes.number,
+    questions: PropTypes.number,
+  }),
+  activeFlags: PropTypes.number,
+  inactiveFlags: PropTypes.number,
+  intl: intlShape.isRequired,
+};
+
+TopicStats.defaultProps = {
+  threadCounts: {
+    discussions: 0,
+    questions: 0,
+  },
+  activeFlags: null,
+  inactiveFlags: null,
+};
+
+export default injectIntl(TopicStats);

src/components/index.js

@@ -1,3 +1,4 @@
 export { default as PostActionsBar } from '../discussions/posts/post-actions-bar/PostActionsBar';
 export { default as Search } from './Search';
 export { default as TinyMCEEditor } from './TinyMCEEditor';
+export { default as TopicStats } from './TopicStats';

src/data/constants.js

@@ -63,6 +63,7 @@ export const ContentActions = {
  * @enum {string}
  */
 export const RequestStatus = {
+  IDLE: 'idle',
   IN_PROGRESS: 'in-progress',
   SUCCESSFUL: 'successful',
   FAILED: 'failed',

src/discussions/comments/CommentsView.jsx

@@ -1,257 +0,0 @@
-import React, { useContext, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router';
-import { useHistory, useLocation } from 'react-router-dom';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Button, Icon, IconButton, Spinner,
-} from '@edx/paragon';
-import { ArrowBack } from '@edx/paragon/icons';
-
-import {
-  EndorsementStatus, PostsPages, ThreadType,
-} from '../../data/constants';
-import { useDispatchWithState } from '../../data/hooks';
-import { DiscussionContext } from '../common/context';
-import { useIsOnDesktop } from '../data/hooks';
-import { EmptyPage } from '../empty-posts';
-import { Post } from '../posts';
-import { selectThread } from '../posts/data/selectors';
-import { fetchThread, markThreadAsRead } from '../posts/data/thunks';
-import { discussionsPath, filterPosts } from '../utils';
-import { selectThreadComments, selectThreadCurrentPage, selectThreadHasMorePages } from './data/selectors';
-import { fetchThreadComments } from './data/thunks';
-import { Comment, ResponseEditor } from './comment';
-import messages from './messages';
-
-function usePost(postId) {
-  const dispatch = useDispatch();
-  const thread = useSelector(selectThread(postId));
-
-  useEffect(() => {
-    if (thread && !thread.read) {
-      dispatch(markThreadAsRead(postId));
-    }
-  }, [postId]);
-
-  return thread;
-}
-
-function usePostComments(postId, endorsed = null) {
-  const [isLoading, dispatch] = useDispatchWithState();
-  const comments = useSelector(selectThreadComments(postId, endorsed));
-  const hasMorePages = useSelector(selectThreadHasMorePages(postId, endorsed));
-  const currentPage = useSelector(selectThreadCurrentPage(postId, endorsed));
-  const handleLoadMoreResponses = async () => dispatch(fetchThreadComments(postId, {
-    endorsed,
-    page: currentPage + 1,
-  }));
-  useEffect(() => {
-    dispatch(fetchThreadComments(postId, {
-      endorsed,
-      page: 1,
-    }));
-  }, [postId]);
-  return {
-    comments,
-    hasMorePages,
-    isLoading,
-    handleLoadMoreResponses,
-  };
-}
-
-function DiscussionCommentsView({
-  postType,
-  postId,
-  intl,
-  endorsed,
-  isClosed,
-}) {
-  const {
-    comments,
-    hasMorePages,
-    isLoading,
-    handleLoadMoreResponses,
-  } = usePostComments(postId, endorsed);
-
-  const endorsedComments = useMemo(() => [...filterPosts(comments, 'endorsed')], [comments]);
-  const unEndorsedComments = useMemo(() => [...filterPosts(comments, 'unendorsed')], [comments]);
-
-  const handleDefinition = (message, commentsLength) => (
-    <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
-      {intl.formatMessage(message, { num: commentsLength })}
-    </div>
-  );
-
-  const handleComments = (postComments, showAddResponse = false, showLoadMoreResponses = false) => (
-    <div className="mx-4" role="list">
-      {postComments.map(comment => (
-        <Comment comment={comment} key={comment.id} postType={postType} isClosedPost={isClosed} />
-      ))}
-      {hasMorePages && !isLoading && !showLoadMoreResponses && (
-        <Button
-          onClick={handleLoadMoreResponses}
-          variant="link"
-          block="true"
-          className="card p-4 mb-4 font-weight-500 font-size-14"
-          style={{
-            lineHeight: '20px',
-          }}
-          data-testid="load-more-comments"
-        >
-          {intl.formatMessage(messages.loadMoreResponses)}
-        </Button>
-      )}
-      {isLoading && !showLoadMoreResponses && (
-        <div className="card my-4 p-4 d-flex align-items-center">
-          <Spinner animation="border" variant="primary" />
-        </div>
-      )}
-      {!!postComments.length && !isClosed && showAddResponse
-        && <ResponseEditor postId={postId} addWrappingDiv />}
-    </div>
-  );
-  return (
-    <>
-      {((hasMorePages && isLoading) || !isLoading) && (
-        <>
-          {endorsedComments.length > 0 && (
-            <>
-              {handleDefinition(messages.endorsedResponseCount, endorsedComments.length)}
-              {endorsed === EndorsementStatus.DISCUSSION
-                ? handleComments(endorsedComments, false, true)
-                : handleComments(endorsedComments)}
-            </>
-          )}
-          {endorsed !== EndorsementStatus.ENDORSED && (
-            <>
-              {handleDefinition(messages.responseCount, unEndorsedComments.length)}
-              {unEndorsedComments.length === 0 && <br />}
-              {handleComments(unEndorsedComments, true)}
-            </>
-          )}
-        </>
-      )}
-    </>
-
-  );
-}
-
-DiscussionCommentsView.propTypes = {
-  postId: PropTypes.string.isRequired,
-  postType: PropTypes.string.isRequired,
-  isClosed: PropTypes.bool.isRequired,
-  intl: intlShape.isRequired,
-  endorsed: PropTypes.oneOf([
-    EndorsementStatus.ENDORSED, EndorsementStatus.UNENDORSED, EndorsementStatus.DISCUSSION,
-  ]).isRequired,
-};
-
-function CommentsView({ intl }) {
-  const [isLoading, submitDispatch] = useDispatchWithState();
-  const { postId } = useParams();
-  const thread = usePost(postId);
-  const history = useHistory();
-  const location = useLocation();
-  const isOnDesktop = useIsOnDesktop();
-  const {
-    courseId, learnerUsername, category, topicId, page, enableInContextSidebar,
-  } = useContext(DiscussionContext);
-
-  useEffect(() => {
-    if (!thread) { submitDispatch(fetchThread(postId, courseId, true)); }
-  }, [postId]);
-
-  if (!thread) {
-    if (!isLoading) {
-      return (
-        <EmptyPage title={intl.formatMessage(messages.noThreadFound)} />
-      );
-    }
-    return (
-      <Spinner animation="border" variant="primary" data-testid="loading-indicator" />
-    );
-  }
-
-  return (
-    <>
-      {!isOnDesktop && (
-        enableInContextSidebar ? (
-          <>
-            <div className="px-4 py-1.5 bg-white">
-              <Button
-                variant="plain"
-                className="px-0 font-weight-light text-primary-500"
-                iconBefore={ArrowBack}
-                onClick={() => history.push(discussionsPath(PostsPages[page], {
-                  courseId, learnerUsername, category, topicId,
-                })(location))}
-                size="sm"
-              >
-                {intl.formatMessage(messages.backAlt)}
-              </Button>
-            </div>
-            <div className="border-bottom border-light-400" />
-          </>
-        ) : (
-          <IconButton
-            src={ArrowBack}
-            iconAs={Icon}
-            style={{ padding: '18px' }}
-            size="inline"
-            className="ml-4 mt-4"
-            onClick={() => history.push(discussionsPath(PostsPages[page], {
-              courseId, learnerUsername, category, topicId,
-            })(location))}
-            alt={intl.formatMessage(messages.backAlt)}
-          />
-        )
-      )}
-      <div className={classNames('discussion-comments d-flex flex-column card', {
-        'm-4 p-4.5': !enableInContextSidebar,
-        'p-4 rounded-0 border-0 mb-4': enableInContextSidebar,
-      })}
-      >
-        <Post post={thread} />
-        {!thread.closed && <ResponseEditor postId={postId} />}
-      </div>
-      {thread.type === ThreadType.DISCUSSION && (
-        <DiscussionCommentsView
-          postId={postId}
-          intl={intl}
-          postType={thread.type}
-          endorsed={EndorsementStatus.DISCUSSION}
-          isClosed={thread.closed}
-        />
-      )}
-      {thread.type === ThreadType.QUESTION && (
-        <>
-          <DiscussionCommentsView
-            postId={postId}
-            intl={intl}
-            postType={thread.type}
-            endorsed={EndorsementStatus.ENDORSED}
-            isClosed={thread.closed}
-          />
-          <DiscussionCommentsView
-            postId={postId}
-            intl={intl}
-            postType={thread.type}
-            endorsed={EndorsementStatus.UNENDORSED}
-            isClosed={thread.closed}
-          />
-        </>
-      )}
-    </>
-  );
-}
-
-CommentsView.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CommentsView);

src/discussions/comments/CommentsView.test.jsx

@@ -1,730 +0,0 @@
-import {
-  act, fireEvent, render, screen, waitFor, /* within, */
-} from '@testing-library/react';
-import MockAdapter from 'axios-mock-adapter';
-import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route } from 'react-router';
-import { Factory } from 'rosie';
-
-import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
-import { DiscussionContext } from '../common/context';
-import { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
-import DiscussionContent from '../discussions-home/DiscussionContent';
-import { getThreadsApiUrl } from '../posts/data/api';
-import { fetchThreads } from '../posts/data/thunks';
-import { getCommentsApiUrl } from './data/api';
-
-import '../posts/data/__factories__';
-import './data/__factories__';
-
-const courseConfigApiUrl = getCourseConfigApiUrl();
-const commentsApiUrl = getCommentsApiUrl();
-const threadsApiUrl = getThreadsApiUrl();
-const discussionPostId = 'thread-1';
-const questionPostId = 'thread-2';
-const closedPostId = 'thread-2';
-const courseId = 'course-v1:edX+TestX+Test_Course';
-let store;
-let axiosMock;
-// let testLocation;
-
-function mockAxiosReturnPagedComments() {
-  [null, false, true].forEach(endorsed => {
-    const postId = endorsed === null ? discussionPostId : questionPostId;
-    [1, 2].forEach(page => {
-      axiosMock
-        .onGet(commentsApiUrl, {
-          params: {
-            thread_id: postId,
-            page,
-            page_size: undefined,
-            requested_fields: 'profile_image',
-            endorsed,
-          },
-        })
-        .reply(200, Factory.build('commentsResult', { can_delete: true }, {
-          threadId: postId,
-          page,
-          pageSize: 1,
-          count: 2,
-          endorsed,
-          childCount: page === 1 ? 2 : 0,
-        }));
-    });
-  });
-}
-
-function mockAxiosReturnPagedCommentsResponses() {
-  const parentId = 'comment-1';
-  const commentsResponsesApiUrl = `${commentsApiUrl}${parentId}/`;
-  const paramsTemplate = {
-    page: undefined,
-    page_size: undefined,
-    requested_fields: 'profile_image',
-  };
-
-  for (let page = 1; page <= 2; page++) {
-    axiosMock
-      .onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } })
-      .reply(200, Factory.build('commentsResult', null, {
-        parentId,
-        page,
-        pageSize: 1,
-        count: 2,
-      }));
-  }
-}
-
-function renderComponent(postId) {
-  render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <DiscussionContext.Provider
-          value={{ courseId }}
-        >
-          <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
-            <DiscussionContent />
-            <Route
-              path="*"
-              render={() => null}
-            />
-          </MemoryRouter>
-        </DiscussionContext.Provider>
-      </AppProvider>
-    </IntlProvider>,
-  );
-}
-
-describe('CommentsView', () => {
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
-    Factory.resetAll();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    axiosMock.onGet(threadsApiUrl)
-      .reply(200, Factory.build('threadsResult'));
-    axiosMock.onPatch(new RegExp(`${commentsApiUrl}*`)).reply(({
-      url,
-      data,
-    }) => {
-      const commentId = url.match(/comments\/(?<id>[a-z1-9-]+)\//).groups.id;
-      const {
-        rawBody,
-      } = camelCaseObject(JSON.parse(data));
-      return [200, Factory.build('comment', {
-        id: commentId,
-        rendered_body: rawBody,
-        raw_body: rawBody,
-      })];
-    });
-    axiosMock.onPost(commentsApiUrl)
-      .reply(({ data }) => {
-        const {
-          rawBody,
-          threadId,
-        } = camelCaseObject(JSON.parse(data));
-        return [200, Factory.build(
-          'comment',
-          {
-            rendered_body: rawBody,
-            raw_body: rawBody,
-            thread_id: threadId,
-          },
-        )];
-      });
-
-    executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
-    mockAxiosReturnPagedComments();
-    mockAxiosReturnPagedCommentsResponses();
-  });
-
-  describe('for all post types', () => {
-    function assertLastUpdateData(data) {
-      expect(JSON.parse(axiosMock.history.patch[axiosMock.history.patch.length - 1].data)).toMatchObject(data);
-    }
-
-    // it('should show and hide the editor', async () => {
-    //   renderComponent(discussionPostId);
-    //   await waitFor(() => screen.findByText('comment number 1', { exact: false }));
-    //   const addResponseButtons = screen.getAllByRole('button', { name: /add a response/i });
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       addResponseButtons[0],
-    //     );
-    //   });
-    //   expect(screen.queryByTestId('tinymce-editor')).toBeInTheDocument();
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-    //   });
-    //   expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
-    // });
-
-    // it('should allow posting a response', async () => {
-    //   renderComponent(discussionPostId);
-    //   await waitFor(() => screen.findByText('comment number 1', { exact: false }));
-    //   const responseButtons = screen.getAllByRole('button', { name: /add a response/i });
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       responseButtons[0],
-    //     );
-    //   });
-    //   await act(() => {
-    //     fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
-    //   });
-    //
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       screen.getByText(/submit/i),
-    //     );
-    //   });
-    //   expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
-    //   await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
-    // });
-
-    it('should not allow posting a response on a closed post', async () => {
-      renderComponent(closedPostId);
-      await waitFor(() => screen.findByText('Thread-2', { exact: false }));
-      expect(screen.queryByRole('button', { name: /add a response/i })).not.toBeInTheDocument();
-    });
-
-    // it('should allow posting a comment', async () => {
-    //   renderComponent(discussionPostId);
-    //   await waitFor(() => screen.findByText('comment number 1', { exact: false }));
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       screen.getAllByRole('button', { name: /add a comment/i })[0],
-    //     );
-    //   });
-    //   act(() => {
-    //     fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
-    //   });
-    //
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       screen.getByText(/submit/i),
-    //     );
-    //   });
-    //   expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
-    //   await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
-    // });
-
-    it('should not allow posting a comment on a closed post', async () => {
-      renderComponent(closedPostId);
-      await waitFor(() => screen.findByText('thread-2', { exact: false }));
-      await act(async () => {
-        expect(
-          screen.queryByRole('button', { name: /add a comment/i }),
-        ).not.toBeInTheDocument();
-      });
-    });
-
-    // it('should allow editing an existing comment', async () => {
-    //   renderComponent(discussionPostId);
-    //   await waitFor(() => screen.findByText('comment number 1', { exact: false }));
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       // The first edit menu is for the post, the second will be for the first comment.
-    //       screen.getAllByRole('button', { name: /actions menu/i })[1],
-    //     );
-    //   });
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /edit/i }));
-    //   });
-    //   act(() => {
-    //     fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
-    //   });
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /submit/i }));
-    //   });
-    //   await waitFor(async () => {
-    //     expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument();
-    //   });
-    // });
-    //
-    async function setupCourseConfig(reasonCodesEnabled = true) {
-      axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
-        has_moderation_privileges: true,
-        reason_codes_enabled: reasonCodesEnabled,
-        editReasons: [
-          { code: 'reason-1', label: 'reason 1' },
-          { code: 'reason-2', label: 'reason 2' },
-        ],
-        postCloseReasons: [
-          { code: 'reason-1', label: 'reason 1' },
-          { code: 'reason-2', label: 'reason 2' },
-        ],
-      });
-      axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
-      await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
-    }
-    //
-    // it('should show reason codes when editing an existing comment', async () => {
-    //   setupCourseConfig();
-    //   renderComponent(discussionPostId);
-    //   await waitFor(() => screen.findByText('comment number 1', { exact: false }));
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       // The first edit menu is for the post, the second will be for the first comment.
-    //       screen.getAllByRole('button', { name: /actions menu/i })[1],
-    //     );
-    //   });
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /edit/i }));
-    //   });
-    //   expect(screen.queryByRole('combobox', { name: /reason for editing/i })).toBeInTheDocument();
-    //   expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
-    //   await act(async () => {
-    //     fireEvent.change(screen.queryByRole('combobox', { name: /reason for editing/i }),
-    //     { target: { value: null } });
-    //   });
-    //   await act(async () => {
-    //     fireEvent.change(screen.queryByRole('combobox',
-    //     { name: /reason for editing/i }), { target: { value: 'reason-1' } });
-    //   });
-    //   await act(async () => {
-    //     fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
-    //   });
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /submit/i }));
-    //   });
-    //   assertLastUpdateData({ edit_reason_code: 'reason-1' });
-    // });
-    //
-    // it('should show reason codes when closing a post', async () => {
-    //   setupCourseConfig();
-    //   renderComponent(discussionPostId);
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       // The first edit menu is for the post
-    //       screen.getAllByRole('button', {
-    //         name: /actions menu/i,
-    //       })[0],
-    //     );
-    //   });
-    //   expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /close/i }));
-    //   });
-    //   expect(screen.queryByRole('dialog', { name: /close post/i })).toBeInTheDocument();
-    //   expect(screen.queryByRole('combobox', { name: /reason/i })).toBeInTheDocument();
-    //   expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
-    //   await act(async () => {
-    //     fireEvent.change(screen.queryByRole('combobox', { name: /reason/i }), { target: { value: 'reason-1' } });
-    //   });
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /close post/i }));
-    //   });
-    //   expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
-    //   assertLastUpdateData({ closed: true, close_reason_code: 'reason-1' });
-    // });
-
-    // it('should close the post directly if reason codes are not enabled', async () => {
-    //   setupCourseConfig(false);
-    //   renderComponent(discussionPostId);
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       // The first edit menu is for the post
-    //       screen.getAllByRole('button', { name: /actions menu/i })[0],
-    //     );
-    //   });
-    //   expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /close/i }));
-    //   });
-    //   expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
-    //   assertLastUpdateData({ closed: true });
-    // });
-
-    it.each([true, false])(
-      'should reopen the post directly when reason codes enabled=%s',
-      async (reasonCodesEnabled) => {
-        setupCourseConfig(reasonCodesEnabled);
-        renderComponent(closedPostId);
-        await act(async () => {
-          fireEvent.click(
-            // The first edit menu is for the post
-            screen.getAllByRole('button', { name: /actions menu/i })[0],
-          );
-        });
-        expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
-        await act(async () => {
-          fireEvent.click(screen.getByRole('button', { name: /reopen/i }));
-        });
-        expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
-        assertLastUpdateData({ closed: false });
-      },
-    );
-
-    // it('should show the editor if the post is edited', async () => {
-    //   setupCourseConfig(false);
-    //   renderComponent(discussionPostId);
-    //   await act(async () => {
-    //     fireEvent.click(
-    //       // The first edit menu is for the post
-    //       screen.getAllByRole('button', { name: /actions menu/i })[0],
-    //     );
-    //   });
-    //   await act(async () => {
-    //     fireEvent.click(screen.getByRole('button', { name: /edit/i }));
-    //   });
-    //   expect(testLocation.pathname).toBe(`/${courseId}/posts/${discussionPostId}/edit`);
-    // });
-
-    it('should allow pinning the post', async () => {
-      renderComponent(discussionPostId);
-      await act(async () => {
-        fireEvent.click(
-          // The first edit menu is for the post
-          screen.getAllByRole('button', { name: /actions menu/i })[0],
-        );
-      });
-      await act(async () => {
-        fireEvent.click(screen.getByRole('button', { name: /pin/i }));
-      });
-      assertLastUpdateData({ pinned: false });
-    });
-
-    it('should allow reporting the post', async () => {
-      renderComponent(discussionPostId);
-      await act(async () => {
-        fireEvent.click(
-          // The first edit menu is for the post
-          screen.getAllByRole('button', { name: /actions menu/i })[0],
-        );
-      });
-      await act(async () => {
-        fireEvent.click(screen.getByRole('button', { name: /report/i }));
-      });
-      expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
-      await act(async () => {
-        fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
-      });
-      expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
-      assertLastUpdateData({ abuse_flagged: true });
-    });
-
-  //   it('handles liking a comment', async () => {
-  //     renderComponent(discussionPostId);
-  //
-  //     // Wait for the content to load
-  //     await screen.findByText('comment number 7', { exact: false });
-  //     const view = screen.getByTestId('comment-comment-1');
-  //
-  //     const likeButton = within(view).getByRole('button', { name: /like/i });
-  //     await act(async () => {
-  //       fireEvent.click(likeButton);
-  //     });
-  //     expect(axiosMock.history.patch).toHaveLength(2);
-  //     expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
-  //   });
-  //
-  //   it('handles endorsing comments', async () => {
-  //     renderComponent(discussionPostId);
-  //     // Wait for the content to load
-  //     await screen.findByText('comment number 7', { exact: false });
-  //
-  //     // There should be three buttons, one for the post, the second for the
-  //     // comment and the third for a response to that comment
-  //     const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
-  //     await act(async () => {
-  //       fireEvent.click(actionButtons[1]);
-  //     });
-  //
-  //     await act(async () => {
-  //       fireEvent.click(screen.getByRole('button', { name: /Endorse/i }));
-  //     });
-  //     expect(axiosMock.history.patch).toHaveLength(2);
-  //     expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ endorsed: true });
-  //   });
-  //
-  //   it('handles reporting comments', async () => {
-  //     renderComponent(discussionPostId);
-  //     // Wait for the content to load
-  //     await screen.findByText('comment number 7', { exact: false });
-  //
-  //     // There should be three buttons, one for the post, the second for the
-  //     // comment and the third for a response to that comment
-  //     const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
-  //     await act(async () => {
-  //       fireEvent.click(actionButtons[1]);
-  //     });
-  //
-  //     await act(async () => {
-  //       fireEvent.click(screen.getByRole('button', { name: /Report/i }));
-  //     });
-  //     expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
-  //     await act(async () => {
-  //       fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
-  //     });
-  //     expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
-  //     expect(axiosMock.history.patch).toHaveLength(2);
-  //     expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ abuse_flagged: true });
-  //   });
-  // });
-  //
-  // describe('for discussion thread', () => {
-  //   const findLoadMoreCommentsButton = () => screen.findByTestId('load-more-comments');
-  //
-  //   it('shown post not found when post id does not belong to course', async () => {
-  //     renderComponent('unloaded-id');
-  //     expect(await screen.findByText('Thread not found', { exact: true }))
-  //       .toBeInTheDocument();
-  //   });
-  //
-  //   it('initially loads only the first page', async () => {
-  //     renderComponent(discussionPostId);
-  //     expect(await screen.findByText('comment number 1', { exact: false }))
-  //       .toBeInTheDocument();
-  //     expect(screen.queryByText('comment number 2', { exact: false }))
-  //       .not
-  //       .toBeInTheDocument();
-  //   });
-  //
-  //   it('pressing load more button will load next page of comments', async () => {
-  //     renderComponent(discussionPostId);
-  //
-  //     const loadMoreButton = await findLoadMoreCommentsButton();
-  //     fireEvent.click(loadMoreButton);
-  //
-  //     await screen.findByText('comment number 1', { exact: false });
-  //     await screen.findByText('comment number 2', { exact: false });
-  //   });
-  //
-  //   it('newly loaded comments are appended to the old ones', async () => {
-  //     renderComponent(discussionPostId);
-  //
-  //     const loadMoreButton = await findLoadMoreCommentsButton();
-  //     fireEvent.click(loadMoreButton);
-  //
-  //     await screen.findByText('comment number 1', { exact: false });
-  //     // check that comments from the first page are also displayed
-  //     expect(screen.queryByText('comment number 2', { exact: false }))
-  //       .toBeInTheDocument();
-  //   });
-  //
-  //   it('load more button is hidden when no more comments pages to load', async () => {
-  //     const totalPages = 2;
-  //     renderComponent(discussionPostId);
-  //
-  //     const loadMoreButton = await findLoadMoreCommentsButton();
-  //     for (let page = 1; page < totalPages; page++) {
-  //       fireEvent.click(loadMoreButton);
-  //     }
-  //
-  //     await screen.findByText('comment number 2', { exact: false });
-  //     await expect(findLoadMoreCommentsButton())
-  //       .rejects
-  //       .toThrow();
-  //   });
-  // });
-  //
-  // describe('for question thread', () => {
-  //   const findLoadMoreCommentsButtons = () => screen.findAllByTestId('load-more-comments');
-  //
-  //   it('initially loads only the first page', async () => {
-  //     act(() => renderComponent(questionPostId));
-  //     expect(await screen.findByText('comment number 3', { exact: false }))
-  //       .toBeInTheDocument();
-  //     expect(await screen.findByText('endorsed comment number 5', { exact: false }))
-  //       .toBeInTheDocument();
-  //     expect(screen.queryByText('comment number 4', { exact: false }))
-  //       .not
-  //       .toBeInTheDocument();
-  //   });
-  //
-  //   it('pressing load more button will load next page of comments', async () => {
-  //     act(() => {
-  //       renderComponent(questionPostId);
-  //     });
-  //
-  //     const [loadMoreButtonEndorsed, loadMoreButtonUnendorsed] = await findLoadMoreCommentsButtons();
-  //     // Both load more buttons should show
-  //     expect(await findLoadMoreCommentsButtons()).toHaveLength(2);
-  //     expect(await screen.findByText('unendorsed comment number 3', { exact: false }))
-  //       .toBeInTheDocument();
-  //     expect(await screen.findByText('endorsed comment number 5', { exact: false }))
-  //       .toBeInTheDocument();
-  //     // Comments from next page should not be loaded yet.
-  //     expect(await screen.queryByText('endorsed comment number 6', { exact: false }))
-  //       .not
-  //       .toBeInTheDocument();
-  //     expect(await screen.queryByText('unendorsed comment number 4', { exact: false }))
-  //       .not
-  //       .toBeInTheDocument();
-  //
-  //     await act(async () => {
-  //       fireEvent.click(loadMoreButtonEndorsed);
-  //     });
-  //     // Endorsed comment from next page should be loaded now.
-  //     await waitFor(() => expect(screen.queryByText('endorsed comment number 6', { exact: false }))
-  //       .toBeInTheDocument());
-  //     // Unendorsed comment from next page should not be loaded yet.
-  //     expect(await screen.queryByText('unendorsed comment number 4', { exact: false }))
-  //       .not
-  //       .toBeInTheDocument();
-  //     // Now only one load more buttons should show, for unendorsed comments
-  //     expect(await findLoadMoreCommentsButtons()).toHaveLength(1);
-  //     await act(async () => {
-  //       fireEvent.click(loadMoreButtonUnendorsed);
-  //     });
-  //     // Unendorsed comment from next page should be loaded now.
-  //     await waitFor(() => expect(screen.queryByText('unendorsed comment number 4', { exact: false }))
-  //       .toBeInTheDocument());
-  //     await expect(findLoadMoreCommentsButtons()).rejects.toThrow();
-  //   });
-  // });
-  //
-  // describe('comments responses', () => {
-  //   const findLoadMoreCommentsResponsesButton = () => screen.findByTestId('load-more-comments-responses');
-  //
-  //   it('initially loads only the first page', async () => {
-  //     renderComponent(discussionPostId);
-  //
-  //     await waitFor(() => screen.findByText('comment number 7', { exact: false }));
-  //     expect(screen.queryByText('comment number 8', { exact: false })).not.toBeInTheDocument();
-  //   });
-  //
-  //   it('pressing load more button will load next page of responses', async () => {
-  //     renderComponent(discussionPostId);
-  //
-  //     const loadMoreButton = await findLoadMoreCommentsResponsesButton();
-  //     await act(async () => {
-  //       fireEvent.click(loadMoreButton);
-  //     });
-  //
-  //     await screen.findByText('comment number 8', { exact: false });
-  //   });
-  //
-  //   it('newly loaded responses are appended to the old ones', async () => {
-  //     renderComponent(discussionPostId);
-  //
-  //     const loadMoreButton = await findLoadMoreCommentsResponsesButton();
-  //     await act(async () => {
-  //       fireEvent.click(loadMoreButton);
-  //     });
-  //
-  //     await screen.findByText('comment number 8', { exact: false });
-  //     // check that comments from the first page are also displayed
-  //     expect(screen.queryByText('comment number 7', { exact: false })).toBeInTheDocument();
-  //   });
-  //
-  //   it('load more button is hidden when no more responses pages to load', async () => {
-  //     const totalPages = 2;
-  //     renderComponent(discussionPostId);
-  //
-  //     const loadMoreButton = await findLoadMoreCommentsResponsesButton();
-  //     for (let page = 1; page < totalPages; page++) {
-  //       act(() => {
-  //         fireEvent.click(loadMoreButton);
-  //       });
-  //     }
-  //
-  //     await screen.findByText('comment number 8', { exact: false });
-  //     await expect(findLoadMoreCommentsResponsesButton())
-  //       .rejects
-  //       .toThrow();
-  //   });
-  //
-  //   it('handles liking a comment', async () => {
-  //     renderComponent(discussionPostId);
-  //
-  //     // Wait for the content to load
-  //     await screen.findByText('comment number 7', { exact: false });
-  //     const view = screen.getByTestId('comment-comment-1');
-  //
-  //     const likeButton = within(view).getByRole('button', { name: /like/i });
-  //     await act(async () => {
-  //       fireEvent.click(likeButton);
-  //     });
-  //     expect(axiosMock.history.patch).toHaveLength(2);
-  //     expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
-  //   });
-  //
-  //   it('handles endorsing comments', async () => {
-  //     renderComponent(discussionPostId);
-  //     // Wait for the content to load
-  //     await screen.findByText('comment number 7', { exact: false });
-  //
-  //     // There should be three buttons, one for the post, the second for the
-  //     // comment and the third for a response to that comment
-  //     const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
-  //     await act(async () => {
-  //       fireEvent.click(actionButtons[1]);
-  //     });
-  //
-  //     await act(async () => {
-  //       fireEvent.click(screen.getByRole('button', { name: /Endorse/i }));
-  //     });
-  //     expect(axiosMock.history.patch).toHaveLength(2);
-  //     expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ endorsed: true });
-  //   });
-  //
-  //   it('handles reporting comments', async () => {
-  //     renderComponent(discussionPostId);
-  //     // Wait for the content to load
-  //     await screen.findByText('comment number 7', { exact: false });
-  //
-  //     // There should be three buttons, one for the post, the second for the
-  //     // comment and the third for a response to that comment
-  //     const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
-  //     await act(async () => {
-  //       fireEvent.click(actionButtons[1]);
-  //     });
-  //
-  //     await act(async () => {
-  //       fireEvent.click(screen.getByRole('button', { name: /Report/i }));
-  //     });
-  //     expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
-  //     await act(async () => {
-  //       fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
-  //     });
-  //     expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
-  //     expect(axiosMock.history.patch).toHaveLength(2);
-  //     expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ abuse_flagged: true });
-  //   });
-  // });
-  //
-  // describe.each([
-  //   { component: 'post', testId: 'post-thread-1' },
-  //   { component: 'comment', testId: 'comment-comment-1' },
-  //   { component: 'reply', testId: 'reply-comment-7' },
-  // ])('delete confirmation modal', ({
-  //   component,
-  //   testId,
-  // }) => {
-  //   test(`for ${component}`, async () => {
-  //     renderComponent(discussionPostId);
-  //     // Wait for the content to load
-  //     await waitFor(() => expect(screen.queryByText('comment number 7', { exact: false })).toBeInTheDocument());
-  //     const content = screen.getByTestId(testId);
-  //     const actionsButton = within(content).getAllByRole('button', { name: /actions menu/i })[0];
-  //     await act(async () => {
-  //       fireEvent.click(actionsButton);
-  //     });
-  //     expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).not.toBeInTheDocument();
-  //     const deleteButton = within(content).queryByRole('button', { name: /delete/i });
-  //     await act(async () => {
-  //       fireEvent.click(deleteButton);
-  //     });
-  //     expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).toBeInTheDocument();
-  //     await act(async () => {
-  //       fireEvent.click(screen.queryByRole('button', { name: /delete/i }));
-  //     });
-  //     expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false })).not.toBeInTheDocument();
-  //   });
-  });
-});

src/discussions/comments/comment-icons/CommentIcons.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useDispatch } from 'react-redux';
-import * as timeago from 'timeago.js';
-
-import { injectIntl } from '@edx/frontend-platform/i18n';
-
-import timeLocale from '../../common/time-locale';
-import LikeButton from '../../posts/post/LikeButton';
-import { editComment } from '../data/thunks';
-
-function CommentIcons({
-  comment,
-}) {
-  const dispatch = useDispatch();
-  timeago.register('time-locale', timeLocale);
-
-  const handleLike = () => dispatch(editComment(comment.id, { voted: !comment.voted }));
-  return (
-    <div className="d-flex flex-row align-items-center">
-      <LikeButton
-        count={comment.voteCount}
-        onClick={handleLike}
-        voted={comment.voted}
-      />
-      <div className="d-flex flex-fill text-gray-500 justify-content-end" title={comment.createdAt}>
-        {timeago.format(comment.createdAt, 'time-locale')}
-      </div>
-    </div>
-  );
-}
-
-CommentIcons.propTypes = {
-  comment: PropTypes.shape({
-    id: PropTypes.string,
-    voteCount: PropTypes.number,
-    following: PropTypes.bool,
-    voted: PropTypes.bool,
-    createdAt: PropTypes.string,
-  }).isRequired,
-};
-
-export default injectIntl(CommentIcons);

src/discussions/comments/comment/CommentHeader.jsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-import { useSelector } from 'react-redux';
-
-import { injectIntl } from '@edx/frontend-platform/i18n';
-import { logError } from '@edx/frontend-platform/logging';
-import {
-  Avatar, Icon,
-} from '@edx/paragon';
-
-import { AvatarOutlineAndLabelColors, EndorsementStatus, ThreadType } from '../../../data/constants';
-import { AuthorLabel } from '../../common';
-import ActionsDropdown from '../../common/ActionsDropdown';
-import { useAlertBannerVisible } from '../../data/hooks';
-import { selectAuthorAvatars } from '../../posts/data/selectors';
-import { useActions } from '../../utils';
-import { commentShape } from './proptypes';
-
-function CommentHeader({
-  comment,
-  postType,
-  actionHandlers,
-}) {
-  const authorAvatars = useSelector(selectAuthorAvatars(comment.author));
-  const colorClass = AvatarOutlineAndLabelColors[comment.authorLabel];
-  const hasAnyAlert = useAlertBannerVisible(comment);
-
-  const actions = useActions({
-    ...comment,
-    postType,
-  });
-  const actionIcons = actions.find(({ action }) => action === EndorsementStatus.ENDORSED);
-
-  const handleIcons = (action) => {
-    const actionFunction = actionHandlers[action];
-    if (actionFunction) {
-      actionFunction();
-    } else {
-      logError(`Unknown or unimplemented action ${action}`);
-    }
-  };
-  return (
-    <div className={classNames('d-flex flex-row justify-content-between', {
-      'mt-2': hasAnyAlert,
-    })}
-    >
-      <div className="align-items-center d-flex flex-row">
-        <Avatar
-          className={`border-0 ml-0.5 mr-2.5 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
-          alt={comment.author}
-          src={authorAvatars?.imageUrlSmall}
-          style={{
-            width: '32px',
-            height: '32px',
-          }}
-        />
-        <AuthorLabel
-          author={comment.author}
-          authorLabel={comment.authorLabel}
-          labelColor={colorClass && `text-${colorClass}`}
-          linkToProfile
-        />
-      </div>
-      <div className="d-flex align-items-center">
-
-        {actionIcons && (
-          <span className="btn-icon btn-icon-sm mr-1 align-items-center pointer-cursor-hover">
-            <Icon
-              data-testid="check-icon"
-              onClick={() => handleIcons(actionIcons.action)}
-              src={actionIcons.icon}
-              className={['endorse', 'unendorse'].includes(actionIcons.id) ? 'text-dark-500' : 'text-success-500'}
-              size="sm"
-            />
-          </span>
-        )}
-
-        <ActionsDropdown
-          commentOrPost={{
-            ...comment,
-            postType,
-          }}
-          actionHandlers={actionHandlers}
-        />
-      </div>
-    </div>
-  );
-}
-
-CommentHeader.propTypes = {
-  comment: commentShape.isRequired,
-  actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
-  postType: PropTypes.oneOf([ThreadType.QUESTION, ThreadType.DISCUSSION]).isRequired,
-};
-
-export default injectIntl(CommentHeader);

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

@@ -1,57 +0,0 @@
-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 { DiscussionContext } from '../../common/context';
-import CommentHeader from './CommentHeader';
-
-let store;
-
-function renderComponent(comment, postType, actionHandlers) {
-  return render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <DiscussionContext.Provider
-          value={{ courseId: 'course-v1:edX+TestX+Test_Course' }}
-        >
-          <CommentHeader comment={comment} postType={postType} actionHandlers={actionHandlers} />
-        </DiscussionContext.Provider>
-      </AppProvider>
-    </IntlProvider>,
-  );
-}
-
-const mockComment = {
-  author: 'abc123',
-  authorLabel: 'ABC 123',
-  endorsed: true,
-  editableFields: ['endorsed'],
-};
-
-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('check-icon')).toHaveLength(1);
-  });
-  it('should render check icon for endorsed question posts', () => {
-    renderComponent(mockComment, 'question', {});
-    expect(screen.queryAllByTestId('check-icon')).toHaveLength(1);
-  });
-});

src/discussions/comments/comment/ResponseEditor.jsx

@@ -1,63 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
-
-import { DiscussionContext } from '../../common/context';
-import { useUserCanAddThreadInBlackoutDate } from '../../data/hooks';
-import messages from '../messages';
-import CommentEditor from './CommentEditor';
-
-function ResponseEditor({
-  postId,
-  intl,
-  addWrappingDiv,
-}) {
-  const { enableInContextSidebar } = useContext(DiscussionContext);
-  const [addingResponse, setAddingResponse] = useState(false);
-  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
-
-  useEffect(() => {
-    setAddingResponse(false);
-  }, [postId]);
-
-  return addingResponse
-    ? (
-      <div className={classNames({ 'bg-white p-4 mb-4 rounded': addWrappingDiv })}>
-        <CommentEditor
-          comment={{ threadId: postId }}
-          edit={false}
-          onCloseEditor={() => setAddingResponse(false)}
-        />
-      </div>
-    )
-    : userCanAddThreadInBlackoutDate && (
-      <div className={classNames({ 'mb-4': addWrappingDiv }, 'actions d-flex')}>
-        <Button
-          variant="primary"
-          className={classNames('px-2.5 py-2 font-size-14', { 'w-100': enableInContextSidebar })}
-          onClick={() => setAddingResponse(true)}
-          style={{
-            lineHeight: '20px',
-          }}
-        >
-          {intl.formatMessage(messages.addResponse)}
-        </Button>
-      </div>
-    );
-}
-
-ResponseEditor.propTypes = {
-  postId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-  addWrappingDiv: PropTypes.bool,
-};
-
-ResponseEditor.defaultProps = {
-  addWrappingDiv: false,
-};
-
-export default injectIntl(ResponseEditor);

src/discussions/comments/index.js

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

src/discussions/common/ActionsDropdown.jsx

@@ -11,9 +11,9 @@ import {
 import { MoreHoriz } from '@edx/paragon/icons';
 
 import { ContentActions } from '../../data/constants';
-import { commentShape } from '../comments/comment/proptypes';
 import { selectBlackoutDate } from '../data/selectors';
 import messages from '../messages';
+import { commentShape } from '../post-comments/comments/comment/proptypes';
 import { postShape } from '../posts/post/proptypes';
 import { inBlackoutDateRange, useActions } from '../utils';
 import { DiscussionContext } from './context';
@@ -23,6 +23,8 @@ function ActionsDropdown({
   commentOrPost,
   disabled,
   actionHandlers,
+  iconSize,
+  dropDownIconSize,
 }) {
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = useState(null);
@@ -49,8 +51,9 @@ function ActionsDropdown({
         src={MoreHoriz}
         iconAs={Icon}
         disabled={disabled}
-        size="sm"
+        size={iconSize}
         ref={setTarget}
+        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimentions' : ''}
       />
       <div className="actions-dropdown">
         <ModalPopup
@@ -66,7 +69,7 @@ function ActionsDropdown({
             {actions.map(action => (
               <React.Fragment key={action.id}>
                 {(action.action === ContentActions.DELETE)
-              && <Dropdown.Divider />}
+                  && <Dropdown.Divider />}
 
                 <Dropdown.Item
                   as={Button}
@@ -94,10 +97,14 @@ ActionsDropdown.propTypes = {
   commentOrPost: PropTypes.oneOfType([commentShape, postShape]).isRequired,
   disabled: PropTypes.bool,
   actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
+  iconSize: PropTypes.string,
+  dropDownIconSize: PropTypes.bool,
 };
 
 ActionsDropdown.defaultProps = {
   disabled: false,
+  iconSize: 'sm',
+  dropDownIconSize: false,
 };
 
 export default injectIntl(ActionsDropdown);

src/discussions/common/ActionsDropdown.test.jsx

@@ -14,7 +14,7 @@ import messages from '../messages';
 import { ACTIONS_LIST } from '../utils';
 import ActionsDropdown from './ActionsDropdown';
 
-import '../comments/data/__factories__';
+import '../post-comments/data/__factories__';
 import '../posts/data/__factories__';
 
 let store;

src/discussions/common/AlertBanner.jsx

@@ -8,11 +8,11 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
 import { Report } from '@edx/paragon/icons';
 
-import { commentShape } from '../comments/comment/proptypes';
-import messages from '../comments/messages';
 import {
   selectModerationSettings, selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
 } from '../data/selectors';
+import { commentShape } from '../post-comments/comments/comment/proptypes';
+import messages from '../post-comments/messages';
 import { postShape } from '../posts/post/proptypes';
 import AuthorLabel from './AuthorLabel';
 
@@ -33,32 +33,45 @@ function AlertBanner({
   return (
     <>
       {canSeeReportedBanner && (
-        <Alert icon={Report} variant="danger" className="px-3 mb-2 py-10px shadow-none flex-fill">
+        <Alert icon={Report} variant="danger" className="px-3 mb-1 py-10px shadow-none flex-fill">
           {intl.formatMessage(messages.abuseFlaggedMessage)}
         </Alert>
       )}
       {reasonCodesEnabled && canSeeLastEditOrClosedAlert && (
         <>
           {content.lastEdit?.reason && (
-            <Alert variant="info" className="px-3 shadow-none mb-2 py-10px bg-light-200">
-              <div className="d-flex align-items-center flex-wrap">
+            <Alert variant="info" className="px-3 shadow-none mb-1 py-10px bg-light-200">
+              <div className="d-flex align-items-center flex-wrap text-gray-700 font-style">
                 {intl.formatMessage(messages.editedBy)}
                 <span className="ml-1 mr-3">
-                  <AuthorLabel author={content.lastEdit.editorUsername} linkToProfile />
+                  <AuthorLabel author={content.lastEdit.editorUsername} linkToProfile postOrComment />
+                </span>
+                <span
+                  className="mx-1.5 font-size-8 font-style text-light-700"
+                  style={{ lineHeight: '15px' }}
+                >
+                  {intl.formatMessage(messages.fullStop)}
                 </span>
                 {intl.formatMessage(messages.reason)}:&nbsp;{content.lastEdit.reason}
               </div>
             </Alert>
           )}
           {content.closed && (
-            <Alert variant="info" className="px-3 shadow-none mb-2 py-10px bg-light-200">
-              <div className="d-flex align-items-center flex-wrap">
+            <Alert variant="info" className="px-3 shadow-none mb-1 py-10px bg-light-200">
+              <div className="d-flex align-items-center flex-wrap text-gray-700 font-style">
                 {intl.formatMessage(messages.closedBy)}
                 <span className="ml-1 ">
-                  <AuthorLabel author={content.closedBy} linkToProfile />
+                  <AuthorLabel author={content.closedBy} linkToProfile postOrComment />
                 </span>
-                <span className="mx-1" />
+                <span
+                  className="mx-1.5 font-size-8 font-style text-light-700"
+                  style={{ lineHeight: '15px' }}
+                >
+                  {intl.formatMessage(messages.fullStop)}
+                </span>
+
                 {content.closeReason && (`${intl.formatMessage(messages.reason)}: ${content.closeReason}`)}
+
               </div>
             </Alert>
           )}

src/discussions/common/AlertBanner.test.jsx

@@ -7,11 +7,11 @@ import { AppProvider } from '@edx/frontend-platform/react';
 
 import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
-import messages from '../comments/messages';
+import messages from '../post-comments/messages';
 import AlertBanner from './AlertBanner';
 import { DiscussionContext } from './context';
 
-import '../comments/data/__factories__';
+import '../post-comments/data/__factories__';
 import '../posts/data/__factories__';
 
 let store;

src/discussions/common/AuthorLabel.jsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 import { Link, useLocation } from 'react-router-dom';
+import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon } from '@edx/paragon';
+import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
 import { Institution, School } from '@edx/paragon/icons';
 
 import { Routes } from '../../data/constants';
@@ -13,6 +14,7 @@ import { useShowLearnersTab } from '../data/hooks';
 import messages from '../messages';
 import { discussionsPath } from '../utils';
 import { DiscussionContext } from './context';
+import timeLocale from './time-locale';
 
 function AuthorLabel({
   intl,
@@ -21,11 +23,15 @@ function AuthorLabel({
   linkToProfile,
   labelColor,
   alert,
+  postCreatedAt,
+  authorToolTip,
+  postOrComment,
 }) {
   const location = useLocation();
   const { courseId } = useContext(DiscussionContext);
   let icon = null;
   let authorLabelMessage = null;
+  timeago.register('time-locale', timeLocale);
 
   if (authorLabel === 'Staff') {
     icon = Institution;
@@ -37,37 +43,56 @@ 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', labelColor);
+  const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
 
   const showUserNameAsLink = useShowLearnersTab()
-      && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
+    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
 
   const labelContents = (
     <div className={className}>
-      <span
-        className={classNames('mr-1 font-size-14 font-style-normal font-family-inter font-weight-500', {
-          'text-gray-700': isRetiredUser,
-          'text-primary-500': !authorLabelMessage && !isRetiredUser && !alert,
-        })}
-        role="heading"
-        aria-level="2"
-      >
-        {isRetiredUser ? '[Deactivated]' : author }
-      </span>
-      {icon && (
-        <Icon
-          style={{
-            width: '1rem',
-            height: '1rem',
-          }}
-          src={icon}
-        />
+      {!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', {
+          'disable-div': !authorToolTip,
+        })}
+        >
+          <Icon
+            style={{
+              width: '1rem',
+              height: '1rem',
+            }}
+            src={icon}
+            data-testid="author-icon"
+          />
+
+        </div>
+      </OverlayTrigger>
       {authorLabelMessage && (
         <span
-          className={classNames('mr-1 font-size-14 font-style-normal font-family-inter font-weight-500', {
-            'text-primary-500': !authorLabelMessage && !isRetiredUser && !alert,
+          className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+            'text-primary-500': showTextPrimary,
             'text-gray-700': isRetiredUser,
           })}
           style={{ marginLeft: '2px' }}
@@ -75,6 +100,19 @@ function AuthorLabel({
           {authorLabelMessage}
         </span>
       )}
+      {postCreatedAt && (
+        <span
+          title={postCreatedAt}
+          className={classNames('font-family-inter align-content-center', {
+            'text-white': alert,
+            'text-gray-500': !alert,
+          })}
+          style={{ lineHeight: '20px', fontSize: '12px', marginBottom: '-2.3px' }}
+        >
+          {timeago.format(postCreatedAt, 'time-locale')}
+        </span>
+      )}
+
     </div>
   );
 
@@ -100,6 +138,9 @@ AuthorLabel.propTypes = {
   linkToProfile: PropTypes.bool,
   labelColor: PropTypes.string,
   alert: PropTypes.bool,
+  postCreatedAt: PropTypes.string,
+  authorToolTip: PropTypes.bool,
+  postOrComment: PropTypes.bool,
 };
 
 AuthorLabel.defaultProps = {
@@ -107,6 +148,9 @@ AuthorLabel.defaultProps = {
   authorLabel: null,
   labelColor: '',
   alert: false,
+  postCreatedAt: null,
+  authorToolTip: false,
+  postOrComment: false,
 };
 
 export default injectIntl(AuthorLabel);

src/discussions/common/EndorsedAlertBanner.jsx

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert, Icon } from '@edx/paragon';
 import { CheckCircle, Verified } from '@edx/paragon/icons';
 
 import { ThreadType } from '../../data/constants';
-import { commentShape } from '../comments/comment/proptypes';
-import messages from '../comments/messages';
+import { commentShape } from '../post-comments/comments/comment/proptypes';
+import messages from '../post-comments/messages';
 import AuthorLabel from './AuthorLabel';
 import timeLocale from './time-locale';
 
@@ -27,32 +27,32 @@ function EndorsedAlertBanner({
     content.endorsed && (
       <Alert
         variant="plain"
-        className={`px-3 mb-0 py-10px align-items-center shadow-none ${classes}`}
+        className={`px-2.5 mb-0 py-8px align-items-center shadow-none ${classes}`}
         style={{ borderRadius: '0.375rem 0.375rem 0 0' }}
-        icon={iconClass}
       >
         <div className="d-flex justify-content-between flex-wrap">
-          <strong className="lead">{intl.formatMessage(
-            isQuestion
-              ? messages.answer
-              : messages.endorsed,
-          )}
-          </strong>
-          <span className="d-flex align-items-center mr-1 flex-wrap">
-            <span className="mr-1">
-              {intl.formatMessage(
-                isQuestion
-                  ? messages.answeredLabel
-                  : messages.endorsedLabel,
-              )}
-            </span>
+          <div className="d-flex align-items-center">
+            <Icon
+              src={iconClass}
+              style={{
+                width: '21px',
+                height: '20px',
+              }}
+            />
+            <strong className="ml-2 font-family-inter">
+              {intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
+            </strong>
+          </div>
+          <span className="d-flex align-items-center align-items-center flex-wrap" style={{ marginRight: '-1px' }}>
             <AuthorLabel
               author={content.endorsedBy}
               authorLabel={content.endorsedByLabel}
               linkToProfile
               alert={content.endorsed}
+              postCreatedAt={content.endorsedAt}
+              authorToolTip
+              postOrComment
             />
-            {intl.formatMessage(messages.time, { time: timeago.format(content.endorsedAt, 'time-locale') })}
           </span>
         </div>
       </Alert>

src/discussions/common/EndorsedAlertBanner.test.jsx

@@ -7,11 +7,11 @@ import { AppProvider } from '@edx/frontend-platform/react';
 
 import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
-import messages from '../comments/messages';
+import messages from '../post-comments/messages';
 import { DiscussionContext } from './context';
 import EndorsedAlertBanner from './EndorsedAlertBanner';
 
-import '../comments/data/__factories__';
+import '../post-comments/data/__factories__';
 import '../posts/data/__factories__';
 
 let store;
@@ -46,21 +46,21 @@ describe.each([
     type: 'comment',
     postType: ThreadType.QUESTION,
     props: { endorsed: true, endorsedBy: 'test-user', endorsedByLabel: 'Staff' },
-    expectText: [messages.answer.defaultMessage, messages.answeredLabel.defaultMessage, 'test-user', 'Staff'],
+    expectText: [messages.answer.defaultMessage, 'Staff'],
   },
   {
     label: 'TA endorsed comment in a question thread',
     type: 'comment',
     postType: ThreadType.QUESTION,
     props: { endorsed: true, endorsedBy: 'test-user', endorsedByLabel: 'Community TA' },
-    expectText: [messages.answer.defaultMessage, messages.answeredLabel.defaultMessage, 'test-user', 'TA'],
+    expectText: [messages.answer.defaultMessage, 'TA'],
   },
   {
     label: 'endorsed comment in a discussion thread',
     type: 'comment',
     postType: ThreadType.DISCUSSION,
     props: { endorsed: true, endorsedBy: 'test-user' },
-    expectText: [messages.endorsed.defaultMessage, messages.endorsedLabel.defaultMessage, 'test-user'],
+    expectText: [messages.endorsed.defaultMessage],
   },
 ])('EndorsedAlertBanner', ({
   label, type, postType, props, expectText,

src/discussions/common/HoverCard.jsx

@@ -0,0 +1,116 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Button, Icon, IconButton } from '@edx/paragon';
+
+import {
+  StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
+} from '../../components/icons';
+import { useUserCanAddThreadInBlackoutDate } from '../data/hooks';
+import { commentShape } from '../post-comments/comments/comment/proptypes';
+import { postShape } from '../posts/post/proptypes';
+import ActionsDropdown from './ActionsDropdown';
+import { DiscussionContext } from './context';
+
+function HoverCard({
+  commentOrPost,
+  actionHandlers,
+  handleResponseCommentButton,
+  addResponseCommentButtonMessage,
+  onLike,
+  onFollow,
+  isClosedPost,
+  endorseIcons,
+}) {
+  const { enableInContextSidebar } = useContext(DiscussionContext);
+  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
+  return (
+    <div
+      className="flex-fill justify-content-end align-items-center hover-card mr-n4 position-absolute"
+      data-testid={`hover-card-${commentOrPost.id}`}
+      id={`hover-card-${commentOrPost.id}`}
+    >
+      {userCanAddThreadInBlackoutDate && (
+        <div className="d-flex">
+          <Button
+            variant="tertiary"
+            className={classNames('px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
+              { 'w-100': enableInContextSidebar })}
+            onClick={() => handleResponseCommentButton()}
+            disabled={isClosedPost}
+            style={{ lineHeight: '20px' }}
+          >
+            {addResponseCommentButtonMessage}
+          </Button>
+        </div>
+      )}
+      {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"
+          />
+        </div>
+      )}
+      <div className="hover-button">
+        <IconButton
+          src={commentOrPost.voted ? ThumbUpFilled : ThumbUpOutline}
+          iconAs={Icon}
+          size="sm"
+          alt="Like"
+          iconClassNames="like-icon-dimentions"
+          onClick={(e) => {
+            e.preventDefault();
+            onLike();
+          }}
+        />
+      </div>
+      {commentOrPost.following !== undefined && (
+        <div className="hover-button">
+          <IconButton
+            src={commentOrPost.following ? StarFilled : StarOutline}
+            iconAs={Icon}
+            size="sm"
+            alt="Follow"
+            iconClassNames="follow-icon-dimentions"
+            onClick={(e) => {
+              e.preventDefault();
+              onFollow();
+            }}
+          />
+        </div>
+      )}
+      <div className="hover-button ml-auto">
+        <ActionsDropdown commentOrPost={commentOrPost} actionHandlers={actionHandlers} dropDownIconSize />
+      </div>
+    </div>
+  );
+}
+
+HoverCard.propTypes = {
+  commentOrPost: PropTypes.oneOfType([commentShape, postShape]).isRequired,
+  actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
+  handleResponseCommentButton: PropTypes.func.isRequired,
+  onLike: PropTypes.func.isRequired,
+  onFollow: PropTypes.func,
+  addResponseCommentButtonMessage: PropTypes.string.isRequired,
+  isClosedPost: PropTypes.bool.isRequired,
+  endorseIcons: PropTypes.objectOf(PropTypes.any),
+};
+
+HoverCard.defaultProps = {
+  onFollow: () => null,
+  endorseIcons: null,
+};
+
+export default injectIntl(HoverCard);

src/discussions/common/HoverCard.test.jsx

@@ -0,0 +1,186 @@
+import {
+  render, screen, waitFor,
+  within,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter, Route } from 'react-router';
+import { Factory } from 'rosie';
+
+import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import DiscussionContent from '../discussions-home/DiscussionContent';
+import { getCommentsApiUrl } from '../post-comments/data/api';
+import { getThreadsApiUrl } from '../posts/data/api';
+import { fetchThreads } from '../posts/data/thunks';
+import { DiscussionContext } from './context';
+
+import '../posts/data/__factories__';
+import '../post-comments/data/__factories__';
+
+const commentsApiUrl = getCommentsApiUrl();
+const threadsApiUrl = getThreadsApiUrl();
+const discussionPostId = 'thread-1';
+const questionPostId = 'thread-2';
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const reverseOrder = false;
+let store;
+let axiosMock;
+let container;
+
+function mockAxiosReturnPagedComments() {
+  [null, false, true].forEach(endorsed => {
+    const postId = endorsed === null ? discussionPostId : questionPostId;
+    [1, 2].forEach(page => {
+      axiosMock
+        .onGet(commentsApiUrl, {
+          params: {
+            thread_id: postId,
+            page,
+            page_size: undefined,
+            requested_fields: 'profile_image',
+            endorsed,
+            reverse_order: reverseOrder,
+          },
+        })
+        .reply(200, Factory.build('commentsResult', { can_delete: true }, {
+          threadId: postId,
+          page,
+          pageSize: 1,
+          count: 2,
+          endorsed,
+          childCount: page === 1 ? 2 : 0,
+        }));
+    });
+  });
+}
+
+function mockAxiosReturnPagedCommentsResponses() {
+  const parentId = 'comment-1';
+  const commentsResponsesApiUrl = `${commentsApiUrl}${parentId}/`;
+  const paramsTemplate = {
+    page: undefined,
+    page_size: undefined,
+    requested_fields: 'profile_image',
+  };
+
+  for (let page = 1; page <= 2; page++) {
+    axiosMock
+      .onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } })
+      .reply(200, Factory.build('commentsResult', null, {
+        parentId,
+        page,
+        pageSize: 1,
+        count: 2,
+      }));
+  }
+}
+
+function renderComponent(postId) {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider
+          value={{ courseId }}
+        >
+          <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
+            <DiscussionContent />
+            <Route
+              path="*"
+            />
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+  return container;
+}
+
+describe('HoverCard', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    Factory.resetAll();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(threadsApiUrl)
+      .reply(200, Factory.build('threadsResult'));
+    axiosMock.onPatch(new RegExp(`${commentsApiUrl}*`)).reply(({
+      url,
+      data,
+    }) => {
+      const commentId = url.match(/comments\/(?<id>[a-z1-9-]+)\//).groups.id;
+      const {
+        rawBody,
+      } = camelCaseObject(JSON.parse(data));
+      return [200, Factory.build('comment', {
+        id: commentId,
+        rendered_body: rawBody,
+        raw_body: rawBody,
+      })];
+    });
+    axiosMock.onPost(commentsApiUrl)
+      .reply(({ data }) => {
+        const {
+          rawBody,
+          threadId,
+        } = camelCaseObject(JSON.parse(data));
+        return [200, Factory.build(
+          'comment',
+          {
+            rendered_body: rawBody,
+            raw_body: rawBody,
+            thread_id: threadId,
+          },
+        )];
+      });
+
+    executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
+    mockAxiosReturnPagedComments();
+    mockAxiosReturnPagedCommentsResponses();
+  });
+
+  test('it should have hover card on post', async () => {
+    renderComponent(discussionPostId);
+    const post = screen.getByTestId('post-thread-1');
+    expect(within(post).getByTestId('hover-card-thread-1')).toBeInTheDocument();
+  });
+
+  test('it should have hover card on comment', async () => {
+    renderComponent(discussionPostId);
+    const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+    expect(within(comment).getByTestId('hover-card-comment-1')).toBeInTheDocument();
+  });
+
+  test('it should show add response, like, follow and actions menu for hovered post', async () => {
+    renderComponent(discussionPostId);
+    const post = screen.getByTestId('post-thread-1');
+    const view = within(post).getByTestId('hover-card-thread-1');
+    expect(within(view).queryByRole('button', { name: /Add response/i })).toBeInTheDocument();
+    expect(within(view).getByRole('button', { name: /like/i })).toBeInTheDocument();
+    expect(within(view).queryByRole('button', { name: /follow/i })).toBeInTheDocument();
+    expect(within(view).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
+  });
+
+  test('it should show add comment, Endorse, like and actions menu Buttons for hovered comment', async () => {
+    renderComponent(questionPostId);
+    const comment = await waitFor(() => screen.findByTestId('comment-comment-3'));
+    const view = within(comment).getByTestId('hover-card-comment-3');
+    expect(within(view).queryByRole('button', { name: /Add comment/i })).toBeInTheDocument();
+    expect(within(view).getByRole('button', { name: /Endorse/i })).toBeInTheDocument();
+    expect(within(view).queryByRole('button', { name: /like/i })).toBeInTheDocument();
+    expect(within(view).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
+  });
+});

src/discussions/data/hooks.js

@@ -224,3 +224,24 @@ export const useTourConfiguration = (intl) => {
     }
   ));
 };
+
+export const useDebounce = (value, delay) => {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay], // Only re-call effect if value or delay changes
+  );
+  return debouncedValue;
+};

src/discussions/discussions-home/DiscussionContent.jsx

@@ -6,7 +6,7 @@ import { Route, Switch } from 'react-router';
 import { injectIntl } from '@edx/frontend-platform/i18n';
 
 import { Routes } from '../../data/constants';
-import { CommentsView } from '../comments';
+import { PostCommentsView } from '../post-comments';
 import { PostEditor } from '../posts';
 
 function DiscussionContent() {
@@ -25,7 +25,7 @@ function DiscussionContent() {
               <PostEditor editExisting />
             </Route>
             <Route path={Routes.COMMENTS.PATH}>
-              <CommentsView />
+              <PostCommentsView />
             </Route>
           </Switch>
         )}

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -87,7 +87,7 @@ export default function DiscussionsHome() {
         >
           <div
             className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
-              'pl-4 pr-2.5 py-1.5': enableInContextSidebar,
+              'pl-4 pr-3 py-0': enableInContextSidebar,
             })}
           >
             {!enableInContextSidebar && <Route path={Routes.DISCUSSIONS.PATH} component={NavigationBar} />}
@@ -120,11 +120,11 @@ export default function DiscussionsHome() {
                 path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.LEARNERS.POSTS]}
                 render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyAllPosts} />}
               />
-              {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} /> }
+              {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} />}
             </Switch>
           )}
         </div>
-        <DiscussionsProductTour />
+        {!enableInContextSidebar && <DiscussionsProductTour />}
       </main>
       {!enableInContextSidebar && <Footer />}
     </DiscussionContext.Provider>

src/discussions/in-context-topics/TopicPostsView.jsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -8,6 +8,7 @@ import { Spinner } from '@edx/paragon';
 
 import { RequestStatus, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
+import { selectDiscussionProvider } from '../data/selectors';
 import { selectTopicThreads } from '../posts/data/selectors';
 import PostsList from '../posts/PostsList';
 import { discussionsPath, handleKeyDown } from '../utils';
@@ -15,14 +16,18 @@ import {
   selectArchivedTopic, selectLoadingStatus, selectNonCoursewareTopics,
   selectSubsection, selectSubsectionUnits, selectUnits,
 } from './data/selectors';
+import { fetchCourseTopicsV3 } from './data/thunks';
 import { BackButton, NoResults } from './components';
 import messages from './messages';
 import { Topic } from './topic';
 
 function TopicPostsView({ intl }) {
   const location = useLocation();
+  const dispatch = useDispatch();
   const { courseId, topicId, category } = useContext(DiscussionContext);
-  const topicsLoadingStatus = useSelector(selectLoadingStatus);
+  const provider = useSelector(selectDiscussionProvider);
+  const topicsStatus = useSelector(selectLoadingStatus);
+  const topicsInProgress = topicsStatus === RequestStatus.IN_PROGRESS;
   const posts = useSelector(selectTopicThreads([topicId]));
   const selectedSubsectionUnits = useSelector(selectSubsectionUnits(category));
   const selectedSubsection = useSelector(selectSubsection(category));
@@ -30,6 +35,12 @@ function TopicPostsView({ intl }) {
   const selectedNonCoursewareTopic = useSelector(selectNonCoursewareTopics)?.find(topic => topic.id === topicId);
   const selectedArchivedTopic = useSelector(selectArchivedTopic(topicId));
 
+  useEffect(() => {
+    if (provider && topicsStatus === RequestStatus.IDLE) {
+      dispatch(fetchCourseTopicsV3(courseId));
+    }
+  }, [provider]);
+
   const backButtonPath = () => {
     const path = selectedUnit ? Routes.TOPICS.CATEGORY : Routes.TOPICS.ALL;
     const params = selectedUnit ? { courseId, category: selectedUnit?.parentId } : { courseId };
@@ -40,12 +51,14 @@ function TopicPostsView({ intl }) {
     <div className="discussion-posts d-flex flex-column h-100">
       {topicId ? (
         <BackButton
+          loading={topicsInProgress}
           path={backButtonPath()}
           title={selectedUnit?.name || selectedNonCoursewareTopic?.name || selectedArchivedTopic?.name
             || intl.formatMessage(messages.unnamedTopic)}
         />
       ) : (
         <BackButton
+          loading={topicsInProgress}
           path={discussionsPath(Routes.TOPICS.ALL, { courseId })(location)}
           title={selectedSubsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
         />
@@ -56,6 +69,7 @@ function TopicPostsView({ intl }) {
           <PostsList
             posts={posts}
             topics={[topicId]}
+            parentIsLoading={topicsInProgress}
           />
         ) : (
           selectedSubsectionUnits?.map((unit) => (
@@ -65,10 +79,10 @@ function TopicPostsView({ intl }) {
             />
           ))
         )}
-        {(category && selectedSubsectionUnits.length === 0 && topicsLoadingStatus === RequestStatus.SUCCESSFUL) && (
+        {(category && selectedSubsectionUnits.length === 0 && topicsStatus === RequestStatus.SUCCESSFUL) && (
           <NoResults />
         )}
-        {(category && topicsLoadingStatus === RequestStatus.IN_PROGRESS) && (
+        {(category && topicsInProgress) && (
           <div className="d-flex justify-content-center p-4">
             <Spinner animation="border" variant="primary" size="lg" />
           </div>

src/discussions/in-context-topics/TopicPostsView.test.jsx

@@ -0,0 +1,255 @@
+import {
+  fireEvent, render, screen, waitFor, within,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { act } from 'react-dom/test-utils';
+import { IntlProvider } from 'react-intl';
+import { generatePath, 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 { PostActionsBar } from '../../components';
+import { Routes } from '../../data/constants';
+import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import { DiscussionContext } from '../common/context';
+import { getThreadsApiUrl } from '../posts/data/api';
+import { fetchThreads } from '../posts/data/thunks';
+import { getCourseTopicsApiUrl } from './data/api';
+import { selectCoursewareTopics } from './data/selectors';
+import { fetchCourseTopicsV3 } from './data/thunks';
+import TopicPostsView from './TopicPostsView';
+import TopicsView from './TopicsView';
+
+import './data/__factories__';
+import '../posts/data/__factories__/threads.factory';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const threadsApiUrl = getThreadsApiUrl();
+const topicsApiUrl = getCourseTopicsApiUrl();
+let store;
+let axiosMock;
+let lastLocation;
+let container;
+
+async function renderComponent({ topicId, category } = { }) {
+  let path = `/${courseId}/topics`;
+  if (topicId) {
+    path = generatePath(Routes.POSTS.PATH, { courseId, topicId });
+  } else if (category) {
+    path = generatePath(Routes.TOPICS.CATEGORY, { courseId, category });
+  }
+  const wrapper = await render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider value={{
+          courseId,
+          topicId,
+          category,
+          page: 'topics',
+        }}
+        >
+          <MemoryRouter initialEntries={[path]}>
+            <Route exact path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}>
+              <TopicPostsView />
+            </Route>
+            <Route exact path={[Routes.TOPICS.ALL]}>
+              <PostActionsBar />
+              <TopicsView />
+            </Route>
+            <Route
+              render={({ location }) => {
+                lastLocation = location;
+                return null;
+              }}
+            />
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+}
+
+describe('InContext Topic Posts View', () => {
+  let coursewareTopics;
+
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore({
+      config: {
+        enableInContext: true,
+        provider: 'openedx',
+        hasModerationPrivileges: true,
+        blackouts: [],
+      },
+    });
+    Factory.resetAll();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    lastLocation = undefined;
+  });
+
+  async function setupTopicsMockResponse() {
+    axiosMock.onGet(`${topicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      })
+        .concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+
+    const state = store.getState();
+    coursewareTopics = selectCoursewareTopics(state);
+  }
+
+  async function setupPostsMockResponse(topicId, numOfResponses = 3) {
+    axiosMock.onGet(threadsApiUrl)
+      .reply(() => {
+        const threadAttrs = { previewBody: 'thread preview body' };
+        return [200, Factory.build('threadsResult', {}, {
+          topicId,
+          threadAttrs,
+          count: numOfResponses,
+        })];
+      });
+    await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
+  }
+
+  test.each([
+    { parentId: 'noncourseware-topic-1', parentTitle: 'general-topic-1', topicType: 'NonCourseware' },
+    { parentId: 'courseware-topic-1-v3-1', parentTitle: 'Introduction Introduction 1-1-1', topicType: 'Courseware' },
+  ])('\'$topicType\' topic should have a required number of post lengths.', async ({ parentId, parentTitle }) => {
+    await setupTopicsMockResponse();
+    await setupPostsMockResponse(parentId, 3);
+
+    await act(async () => {
+      renderComponent({ topicId: parentId });
+    });
+
+    await waitFor(async () => {
+      const posts = await container.querySelectorAll('.discussion-post');
+      const backButton = screen.getByLabelText('Back to topics list');
+      const parentHeader = await screen.findByText(parentTitle);
+
+      expect(lastLocation.pathname.endsWith(`/topics/${parentId}`)).toBeTruthy();
+      expect(posts).toHaveLength(3);
+      expect(backButton).toBeInTheDocument();
+      expect(parentHeader).toBeInTheDocument();
+    });
+  });
+
+  it('A back button should redirect from list of posts to list of units.', async () => {
+    await setupTopicsMockResponse();
+    const subSection = coursewareTopics[0].children[0];
+    const unit = subSection.children[0];
+
+    await act(async () => {
+      setupPostsMockResponse(unit.id, 2);
+      renderComponent({ topicId: unit.id });
+    });
+
+    const backButton = await screen.getByLabelText('Back to topics list');
+
+    await act(async () => fireEvent.click(backButton));
+    await waitFor(async () => {
+      renderComponent({ category: subSection.id });
+
+      const subSectionList = await container.querySelector('.list-group');
+      const units = subSectionList.querySelectorAll('.discussion-topic');
+      const unitHeader = within(subSectionList).queryByText(unit.name);
+
+      expect(lastLocation.pathname.endsWith(`/category/${subSection.id}`)).toBeTruthy();
+      expect(unitHeader).toBeInTheDocument();
+      expect(units).toHaveLength(4);
+    });
+  });
+
+  it('A back button should redirect from units to the parent/selected subsection.', async () => {
+    await setupTopicsMockResponse();
+    const subSection = coursewareTopics[0].children[0];
+
+    renderComponent({ category: subSection.id });
+
+    const backButton = await screen.getByLabelText('Back to topics list');
+
+    await act(async () => fireEvent.click(backButton));
+    await waitFor(async () => {
+      renderComponent();
+
+      const sectionList = await container.querySelector('.list-group');
+      const subSections = sectionList.querySelectorAll('.discussion-topic-group');
+      const subSectionHeader = within(sectionList).queryByText(subSection.displayName);
+
+      expect(lastLocation.pathname.endsWith('/topics')).toBeTruthy();
+      expect(subSectionHeader).toBeInTheDocument();
+      expect(subSections).toHaveLength(3);
+    });
+  });
+
+  test.each([
+    { searchText: 'hello world', output: 'Showing 0 results for', resultCount: 0 },
+    { searchText: 'introduction', output: 'Showing 8 results for', resultCount: 8 },
+  ])('It should have a search bar with a clear button and \'$output\' results found text.',
+    async ({ searchText, output, resultCount }) => {
+      await setupTopicsMockResponse();
+      await renderComponent();
+
+      const searchField = await within(container).getByPlaceholderText('Search topics');
+      const searchButton = await within(container).getByTestId('search-icon');
+      fireEvent.change(searchField, { target: { value: searchText } });
+
+      await waitFor(async () => expect(searchField).toHaveValue(searchText));
+      await act(async () => fireEvent.click(searchButton));
+      await waitFor(async () => {
+        const clearButton = await within(container).queryByText('Clear results');
+        const searchMessage = within(container).queryByText(`${output} "${searchText}"`);
+        const units = container.querySelectorAll('.discussion-topic');
+
+        expect(searchMessage).toBeInTheDocument();
+        expect(clearButton).toBeInTheDocument();
+        expect(units).toHaveLength(resultCount);
+      });
+    });
+
+  it('When click on the clear button it should move to main topics pages.', async () => {
+    await setupTopicsMockResponse();
+    await renderComponent();
+
+    const searchText = 'hello world';
+    const searchField = await within(container).getByPlaceholderText('Search topics');
+    const searchButton = await within(container).getByTestId('search-icon');
+
+    fireEvent.change(searchField, { target: { value: searchText } });
+
+    await waitFor(async () => expect(searchField).toHaveValue(searchText));
+    await act(async () => fireEvent.click(searchButton));
+    await waitFor(async () => {
+      const clearButton = await within(container).queryByText('Clear results');
+
+      await act(async () => fireEvent.click(clearButton));
+      await waitFor(async () => {
+        const coursewareTopicList = await container.querySelectorAll('.discussion-topic-group');
+
+        expect(coursewareTopicList).toHaveLength(3);
+        expect(within(container).queryByText('Clear results')).not.toBeInTheDocument();
+      });
+    });
+  });
+});

src/discussions/in-context-topics/TopicsView.test.jsx

@@ -0,0 +1,233 @@
+import {
+  fireEvent, render, screen, waitFor,
+  within,
+} 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 { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import { DiscussionContext } from '../common/context';
+import { getCourseTopicsApiUrl } from './data/api';
+import { selectCoursewareTopics, selectNonCoursewareTopics } from './data/selectors';
+import { fetchCourseTopicsV3 } from './data/thunks';
+import TopicPostsView from './TopicPostsView';
+import TopicsView from './TopicsView';
+
+import './data/__factories__';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const category = 'section-topic-1';
+
+const topicsApiUrl = `${getCourseTopicsApiUrl()}`;
+let store;
+let axiosMock;
+let lastLocation;
+let container;
+
+function renderComponent() {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider value={{ courseId, category }}>
+          <MemoryRouter initialEntries={[`/${courseId}/topics/`]}>
+            <Route path="/:courseId/topics/">
+              <TopicsView />
+            </Route>
+            <Route path="/:courseId/category/:category">
+              <TopicPostsView />
+            </Route>
+            <Route
+              render={({ location }) => {
+                lastLocation = location;
+                return null;
+              }}
+            />
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+}
+
+describe('InContext Topics View', () => {
+  let nonCoursewareTopics;
+  let coursewareTopics;
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore({
+      config: { enableInContext: true, provider: 'openedx', hasModerationPrivileges: true },
+    });
+    Factory.resetAll();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    lastLocation = undefined;
+  });
+
+  async function setupMockResponse() {
+    axiosMock.onGet(`${topicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      }).concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+
+    const state = store.getState();
+    nonCoursewareTopics = selectNonCoursewareTopics(state);
+    coursewareTopics = selectCoursewareTopics(state);
+  }
+
+  it('A non-courseware topic should be clickable and should have a title', async () => {
+    await setupMockResponse();
+    renderComponent();
+
+    const nonCourseware = nonCoursewareTopics[0];
+    const nonCoursewareTopic = await screen.findByText(nonCourseware.name);
+
+    await act(async () => {
+      fireEvent.click(nonCoursewareTopic);
+    });
+    await waitFor(() => {
+      expect(screen.queryByText(nonCourseware.name)).toBeInTheDocument();
+      expect(lastLocation.pathname.endsWith(`/topics/${nonCourseware.id}`)).toBeTruthy();
+    });
+  });
+
+  it('A non-courseware topic should be on the top of the list', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const topic = await container.querySelector('.discussion-topic');
+
+    expect(within(topic).queryByText('general-topic-1')).toBeInTheDocument();
+    expect(topic.nextSibling).toBe(container.querySelector('.divider'));
+  });
+
+  it('A non-Courseware topic should have 3 stats and should be hoverable', async () => {
+    await setupMockResponse();
+    renderComponent();
+
+    const topic = await container.querySelector('.discussion-topic');
+    const statsList = await topic.querySelectorAll('.icon-size');
+
+    expect(statsList.length).toBe(3);
+    fireEvent.mouseOver(statsList[0]);
+    expect(screen.queryByText('1 Discussion')).toBeInTheDocument();
+  });
+
+  it('Section groups should be listed in the middle of the topics list.', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const topicsList = await screen.getByRole('list');
+    const sectionGroups = await screen.getAllByTestId('section-group');
+
+    expect(topicsList.children[1]).toStrictEqual(topicsList.querySelector('.divider'));
+    expect(sectionGroups.length).toBe(2);
+    expect(topicsList.children[5]).toStrictEqual(topicsList.querySelector('.divider'));
+  });
+
+  it('A section group should have only a title and required subsections.', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const sectionGroups = await screen.getAllByTestId('section-group');
+
+    coursewareTopics.forEach(async (topic, index) => {
+      const stats = await sectionGroups[index].querySelectorAll('.icon-size:not([data-testid="subsection-group"].icon-size)');
+      const subsectionGroups = await within(sectionGroups[index]).getAllByTestId('subsection-group');
+
+      expect(within(sectionGroups[index]).queryByText(topic.displayName)).toBeInTheDocument();
+      expect(stats).toHaveLength(0);
+      expect(subsectionGroups).toHaveLength(2);
+    });
+  });
+
+  it('The subsection should have a title name, be clickable, and have the stats', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const subsectionObject = coursewareTopics[0].children[0];
+    const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
+    const subSectionTitle = await within(subSection).queryByText(subsectionObject.displayName);
+    const statsList = await subSection.querySelectorAll('.icon-size');
+
+    expect(subSectionTitle).toBeInTheDocument();
+    expect(statsList).toHaveLength(2);
+  });
+
+  it('Subsection names should be clickable and redirected to the units lists', async () => {
+    await setupMockResponse();
+    renderComponent();
+
+    const subsectionObject = coursewareTopics[0].children[0];
+    const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
+
+    await act(async () => fireEvent.click(subSection));
+    await waitFor(async () => {
+      const backButton = await screen.getByLabelText('Back to topics list');
+      const topicsList = await screen.getByRole('list');
+      const subSectionHeading = await screen.findByText(subsectionObject.displayName);
+      const units = await topicsList.querySelectorAll('.discussion-topic');
+
+      expect(backButton).toBeInTheDocument();
+      expect(subSectionHeading).toBeInTheDocument();
+      expect(units).toHaveLength(4);
+      expect(lastLocation.pathname.endsWith(`/category/${subsectionObject.id}`)).toBeTruthy();
+    });
+  });
+
+  it('The number of units should be matched with the actual unit length.', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const subSection = await container.querySelector(`[data-subsection-id=${coursewareTopics[0].children[0].id}]`);
+
+    await act(async () => fireEvent.click(subSection));
+    await waitFor(async () => {
+      const units = await container.querySelectorAll('.discussion-topic');
+
+      expect(units).toHaveLength(4);
+    });
+  });
+
+  it('A unit should have a title and stats and should be clickable', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const subSectionObject = coursewareTopics[0].children[0];
+    const unitObject = subSectionObject.children[0];
+
+    const subSection = await container.querySelector(`[data-subsection-id=${subSectionObject.id}]`);
+
+    await act(async () => fireEvent.click(subSection));
+    await waitFor(async () => {
+      const unitElement = await screen.findByText(unitObject.name);
+      const unitContainer = await container.querySelector(`[data-topic-id=${unitObject.id}]`);
+      const statsList = await unitContainer.querySelectorAll('.icon-size');
+
+      expect(unitElement).toBeInTheDocument();
+      expect(statsList).toHaveLength(3);
+
+      await act(async () => fireEvent.click(unitContainer));
+      await waitFor(async () => {
+        expect(lastLocation.pathname.endsWith(`/topics/${unitObject.id}`)).toBeTruthy();
+      });
+    });
+  });
+});

src/discussions/in-context-topics/components/BackButton.jsx

@@ -4,12 +4,14 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon, IconButton } from '@edx/paragon';
+import { Icon, IconButton, Spinner } from '@edx/paragon';
 import { ArrowBack } from '@edx/paragon/icons';
 
 import messages from '../messages';
 
-function BackButton({ intl, path, title }) {
+function BackButton({
+  intl, path, title, loading,
+}) {
   const history = useHistory();
 
   return (
@@ -24,7 +26,7 @@ function BackButton({ intl, path, title }) {
           alt={intl.formatMessage(messages.backAlt)}
         />
         <div className="d-flex flex-fill justify-content-center align-items-center mr-4.5">
-          {title}
+          {loading ? <Spinner animation="border" variant="primary" size="sm" /> : title}
         </div>
       </div>
       <div className="border-bottom border-light-400" />
@@ -36,6 +38,11 @@ BackButton.propTypes = {
   intl: intlShape.isRequired,
   path: PropTypes.shape({}).isRequired,
   title: PropTypes.string.isRequired,
+  loading: PropTypes.bool,
+};
+
+BackButton.defaultProps = {
+  loading: false,
 };
 
 export default injectIntl(BackButton);

src/discussions/in-context-topics/data/__factories__/inContextTopics.factory.js

@@ -0,0 +1,89 @@
+import { Factory } from 'rosie';
+
+import { getApiBaseUrl } from '../../../../data/constants';
+
+Factory.define('topic')
+  .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}-${idx}`)
+  .sequence('enabled-in-context', ['enabledInContext'], (idx, enabledInContext) => enabledInContext)
+  .sequence('name', ['topicNamePrefix'], (idx, topicNamePrefix) => `${topicNamePrefix}-${idx}`)
+  .sequence('usage-key', ['usageKey'], (idx, usageKey) => usageKey)
+  .sequence('courseware', ['courseware'], (idx, courseware) => courseware)
+  .attr('activeFlags', null, true)
+  .attr('thread_counts', ['discussionCount', 'questionCount'], (discCount, questCount) => {
+    Factory.reset('thread-counts');
+    return Factory.build('thread-counts', null, { discussionCount: discCount, questionCount: questCount });
+  });
+
+Factory.define('sub-section')
+  .sequence('block_id', (idx) => `${idx}`)
+  .option('topicPrefix', null, '')
+  .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}-topic-${idx}`)
+  .sequence('display-name', ['sectionPrefix'], (idx, sectionPrefix) => `Introduction ${sectionPrefix + idx}`)
+  .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
+  .sequence('legacy_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}?experience=legacy`)
+  .sequence('lms_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}`)
+  .sequence('student_view_url', ['id', 'courseId'],
+    (idx, id) => `${getApiBaseUrl}/xblock/block-v1:${id}`)
+  .attr('type', null, 'sequential')
+  .attr('activeFlags', null, true)
+  .attr('thread_counts', ['discussionCount', 'questionCount'], (discCount, questCount) => {
+    Factory.reset('thread-counts');
+    return Factory.build('thread-counts', null, { discussionCount: discCount, questionCount: questCount });
+  })
+  .attr('children', ['id', 'display-name', 'courseId'], (id, name, courseId) => {
+    Factory.reset('topic');
+    return Factory.buildList('topic', 2, null, {
+      topicPrefix: `${id}`,
+      enabledInContext: true,
+      topicNamePrefix: `${name}`,
+      usageKey: `${courseId.replace('course-v1:', 'block-v1:')} +type@vertical+block@vertical_`,
+      discussionCount: 1,
+      questionCount: 1,
+    });
+  });
+
+Factory.define('section')
+  .sequence('block_id', (idx) => `${idx}`)
+  .option('topicPrefix', null, '')
+  .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}-topic-${idx}-v3`)
+  .attr('courseware', null, true)
+  .sequence('display-name', (idx) => `Introduction ${idx}`)
+  .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
+  .sequence('legacy_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}?experience=legacy`)
+  .sequence('lms_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`)
+  .sequence('student_view_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/xblock/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`)
+  .attr('type', null, 'chapter')
+  .attr('children', ['id', 'display-name'], (id, name) => {
+    Factory.reset('sub-section');
+    return Factory.buildList('sub-section', 2, null, {
+      sectionPrefix: `${name}-`,
+      topicPrefix: 'section',
+      id,
+      discussionCount: 1,
+      questionCount: 1,
+    });
+  });
+
+Factory.define('thread-counts')
+  .sequence('discussion', ['discussionCount'], (idx, discussionCount) => discussionCount)
+  .sequence('question', ['questionCount'], (idx, questionCount) => questionCount);
+
+Factory.define('archived-topics')
+  .attr('id', null, 'archived')
+  .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
+  .attr('children', ['id', 'courseId'], (id, courseId) => {
+    Factory.reset('topic');
+    return Factory.buildList('topic', 2, null, {
+      topicPrefix: `${id}`,
+      enabledInContext: false,
+      topicNamePrefix: `${id}`,
+      usageKey: `${courseId.replace('course-v1:', 'block-v1:')} +type@vertical+block@`,
+      discussionCount: 1,
+      questionCount: 1,
+    });
+  });

src/discussions/in-context-topics/data/__factories__/index.js

@@ -0,0 +1 @@
+import './inContextTopics.factory';

src/discussions/in-context-topics/data/api.js

@@ -4,6 +4,8 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 import { getApiBaseUrl } from '../../../data/constants';
 
+export const getCourseTopicsApiUrl = () => `${getApiBaseUrl()}/api/discussion/v3/course_topics/`;
+
 export async function getCourseTopicsV3(courseId) {
   const url = `${getApiBaseUrl()}/api/discussion/v3/course_topics/${courseId}`;
   const { data } = await getAuthenticatedHttpClient().get(url);

src/discussions/in-context-topics/data/api.test.js

@@ -0,0 +1,72 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import { initializeStore } from '../../../store';
+import { executeThunk } from '../../../test-utils';
+import { getCourseTopicsApiUrl, getCourseTopicsV3 } from './api';
+import { fetchCourseTopicsV3 } from './thunks';
+
+import './__factories__';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const courseId2 = 'course-v1:edX+TestX+Test_Course2';
+const courseTopicsApiUrl = getCourseTopicsApiUrl();
+
+let axiosMock = null;
+let store;
+
+describe('In context topic api tests', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  test('successfully get topics', async () => {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      }).concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+
+    const response = await getCourseTopicsV3(courseId);
+
+    expect(response).not.toBeUndefined();
+  });
+
+  it('failed to fetch topics', async () => {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId2}`)
+      .reply(404);
+    await executeThunk(fetchCourseTopicsV3(courseId2), store.dispatch, store.getState);
+
+    expect(store.getState().inContextTopics.status).toEqual('failed');
+  });
+
+  it('denied to fetch topics', async () => {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId}`)
+      .reply(403, {});
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch);
+
+    expect(store.getState().inContextTopics.status).toEqual('denied');
+  });
+});

src/discussions/in-context-topics/data/redux.test.js

@@ -0,0 +1,186 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import { initializeStore } from '../../../store';
+import { executeThunk } from '../../../test-utils';
+import { getCourseTopicsApiUrl } from './api';
+import { fetchCourseTopicsV3 } from './thunks';
+
+import './__factories__';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const courseTopicsApiUrl = getCourseTopicsApiUrl();
+
+let axiosMock;
+let store;
+
+describe('Redux in context topics tests', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  async function setupMockData() {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      }).concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+    const state = store.getState();
+    return state;
+  }
+
+  test('successfully load initial states in redux', async () => {
+    executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+    const state = store.getState();
+
+    expect(state.inContextTopics.status).toEqual('in-progress');
+    expect(state.inContextTopics.topics).toHaveLength(0);
+    expect(state.inContextTopics.coursewareTopics).toHaveLength(0);
+    expect(state.inContextTopics.nonCoursewareTopics).toHaveLength(0);
+    expect(state.inContextTopics.nonCoursewareIds).toHaveLength(0);
+    expect(state.inContextTopics.units).toHaveLength(0);
+    expect(state.inContextTopics.archivedTopics).toHaveLength(0);
+    expect(state.inContextTopics.filter).toEqual('');
+  });
+
+  test('successfully store all api data of courseware and noncourseware in redux', async () => {
+    setupMockData().then((state) => {
+      const { coursewareTopics, nonCoursewareTopics } = state.inContextTopics;
+
+      expect(coursewareTopics).toHaveLength(2);
+      expect(nonCoursewareTopics).toHaveLength(1);
+    });
+  });
+
+  test('successfully store the combined list of courseware and noncourseware topics in topics', async () => {
+    setupMockData().then((state) => {
+      const {
+        coursewareTopics, nonCoursewareTopics, archivedTopics, topics,
+      } = state.inContextTopics;
+
+      expect(topics).toHaveLength(coursewareTopics.length + nonCoursewareTopics.length + archivedTopics.length);
+    });
+  });
+
+  test('successfully get the posts ', async () => {
+    setupMockData().then((state) => {
+      expect(state?.inContextTopics?.status).toEqual('successful');
+    });
+  });
+
+  test('successfully checked that the coursewaretopic has three levels', async () => {
+    setupMockData().then((state) => {
+      const { coursewareTopics } = state.inContextTopics;
+
+      // contain chapter at first level
+      coursewareTopics.forEach((chapter, index) => {
+        expect(chapter.courseware).toEqual(true);
+        expect(chapter.id).toEqual(`courseware-topic-${index + 1}-v3`);
+        expect(chapter.type).toEqual('chapter');
+        expect(chapter).toHaveProperty('blockId');
+        expect(chapter).toHaveProperty('lmsWebUrl');
+        expect(chapter).toHaveProperty('legacyWebUrl');
+        expect(chapter).toHaveProperty('studentViewUrl');
+
+        // contain section at second level
+        chapter.children.forEach((section, secIndex) => {
+          expect(section.id).toEqual(`section-topic-${secIndex + 1}`);
+          expect(section.type).toEqual('sequential');
+          expect(section).toHaveProperty('blockId');
+          expect(section).toHaveProperty('lmsWebUrl');
+          expect(section).toHaveProperty('legacyWebUrl');
+          expect(section).toHaveProperty('studentViewUrl');
+
+          // contain sub section at third level
+          section.children.forEach((subSection, subSecIndex) => {
+            expect(subSection.enabledInContext).toEqual(true);
+            expect(subSection.id).toEqual(`courseware-topic-${index + 1}-v3-${subSecIndex + 1}`);
+            expect(subSection).toHaveProperty('usageKey');
+            expect(subSection).not.toHaveProperty('blockId');
+            expect(subSection?.threadCounts?.discussion).toEqual(1);
+            expect(subSection?.threadCounts?.question).toEqual(1);
+          });
+        });
+      });
+    });
+  });
+
+  test('successfully checked that the noncoursewaretopic have proper attributes', async () => {
+    setupMockData().then((state) => {
+      const { nonCoursewareTopics } = state.inContextTopics;
+
+      nonCoursewareTopics.forEach((topic, index) => {
+        expect(topic.usageKey).toEqual('');
+        expect(topic.id).toEqual(`noncourseware-topic-${index + 1}`);
+        expect(topic.name).toEqual(`general-topic-${index + 1}`);
+        expect(topic.enabledInContext).toEqual(true);
+        expect(topic?.threadCounts?.discussion).toEqual(1);
+        expect(topic?.threadCounts?.question).toEqual(1);
+        expect(topic).not.toHaveProperty('blockId');
+      });
+    });
+  });
+
+  test('nonCoursewareIds successfully contains ids of noncourseware topics', async () => {
+    setupMockData().then((state) => {
+      const { nonCoursewareIds, nonCoursewareTopics } = state.inContextTopics;
+
+      nonCoursewareIds.forEach((nonCoursewareId, index) => {
+        expect(nonCoursewareTopics[index].id).toEqual(nonCoursewareId);
+      });
+    });
+  });
+
+  test('selectUnits successfully contains all sub sections', async () => {
+    setupMockData().then((state) => {
+      const subSections = state.inContextTopics.coursewareTopics?.map(x => x.children)
+        ?.flat()?.map(x => x.children)?.flat();
+      const { units } = state.inContextTopics;
+
+      units.forEach(unit => {
+        const subSection = subSections.find(x => x.id === unit.id);
+        expect(subSection?.id).toEqual(unit.id);
+      });
+    });
+  });
+
+  test('successfully stored archived data in redux', async () => {
+    setupMockData().then((state) => {
+      const { archivedTopics } = state.inContextTopics;
+
+      archivedTopics.forEach((archivedTopic, index) => {
+        expect(archivedTopic?.enabledInContext).toEqual(false);
+        expect(archivedTopic?.id).toEqual(`archived-${index + 1}`);
+        expect(archivedTopic?.usageKey).not.toBeNull();
+        expect(archivedTopic?.threadCounts?.discussion).toEqual(1);
+        expect(archivedTopic?.threadCounts?.question).toEqual(1);
+      });
+    });
+  });
+});

src/discussions/in-context-topics/data/selector.test.jsx

@@ -0,0 +1,147 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import { initializeStore } from '../../../store';
+import { executeThunk } from '../../../test-utils';
+import { getCourseTopicsApiUrl } from './api';
+import {
+  selectArchivedTopics,
+  selectCoursewareTopics,
+  selectLoadingStatus,
+  selectNonCoursewareIds,
+  selectNonCoursewareTopics,
+  selectTopics,
+  selectUnits,
+} from './selectors';
+import { fetchCourseTopicsV3 } from './thunks';
+
+import './__factories__';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const courseTopicsApiUrl = getCourseTopicsApiUrl();
+
+let axiosMock;
+let store;
+
+describe('In Context Topics Selector test cases', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  async function setupMockData() {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      }).concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+
+    const state = store.getState();
+    return state;
+  }
+
+  test('should return topics list', async () => {
+    setupMockData().then((state) => {
+      const topics = selectTopics(state);
+
+      expect(topics).not.toBeUndefined();
+      topics.forEach(data => {
+        const topicFunc = jest.fn((topic) => {
+          if (topic.id.includes('noncourseware-topic')) { return true; }
+          if (topic.id.includes('courseware-topic')) { return true; }
+          if (topic.id.includes('archived')) { return true; }
+          return false;
+        });
+        topicFunc(data);
+        expect(topicFunc).toHaveReturnedWith(true);
+      });
+    });
+  });
+
+  test('should return courseware topics list', async () => {
+    setupMockData().then((state) => {
+      const coursewareTopics = selectCoursewareTopics(state);
+
+      expect(coursewareTopics).not.toBeUndefined();
+      coursewareTopics.forEach((topic, index) => {
+        expect(topic?.id).toEqual(`courseware-topic-${index + 1}-v3`);
+      });
+    });
+  });
+
+  test('should return noncourseware topics list', async () => {
+    setupMockData().then((state) => {
+      const nonCoursewareTopics = selectNonCoursewareTopics(state);
+
+      expect(nonCoursewareTopics).not.toBeUndefined();
+      nonCoursewareTopics.forEach((topic, index) => {
+        expect(topic?.id).toEqual(`noncourseware-topic-${index + 1}`);
+      });
+    });
+  });
+
+  test('should return noncourseware ids list', async () => {
+    setupMockData().then((state) => {
+      const nonCoursewareIds = selectNonCoursewareIds(state);
+
+      expect(nonCoursewareIds).not.toBeUndefined();
+      nonCoursewareIds.forEach((id, index) => {
+        expect(id).toEqual(`noncourseware-topic-${index + 1}`);
+      });
+    });
+  });
+
+  test('should return units list', async () => {
+    setupMockData().then((state) => {
+      const units = selectUnits(state);
+
+      expect(units).not.toBeUndefined();
+      units.forEach(unit => {
+        expect(unit?.usageKey).not.toBeNull();
+      });
+    });
+  });
+
+  test('should return archived topics list', async () => {
+    setupMockData().then((state) => {
+      const archivedTopics = selectArchivedTopics(state);
+
+      expect(archivedTopics).not.toBeUndefined();
+      archivedTopics.forEach((topic, index) => {
+        expect(topic.id).toEqual(`archived-${index + 1}`);
+      });
+    });
+  });
+
+  test('should return loading status successful', async () => {
+    setupMockData().then((state) => {
+      const status = selectLoadingStatus(state);
+
+      expect(status).toEqual('successful');
+    });
+  });
+});

src/discussions/in-context-topics/data/slices.js

@@ -6,7 +6,7 @@ import { RequestStatus } from '../../../data/constants';
 const topicsSlice = createSlice({
   name: 'inContextTopics',
   initialState: {
-    status: RequestStatus.IN_PROGRESS,
+    status: RequestStatus.IDLE,
     topics: [],
     coursewareTopics: [],
     nonCoursewareTopics: [],
@@ -44,6 +44,7 @@ export const {
   fetchCourseTopicsRequest,
   fetchCourseTopicsSuccess,
   fetchCourseTopicsFailed,
+  fetchCourseTopicsDenied,
   setFilter,
   setSortBy,
 } = topicsSlice.actions;

src/discussions/in-context-topics/data/thunks.js

@@ -3,8 +3,11 @@ import { reduce } from 'lodash';
 
 import { logError } from '@edx/frontend-platform/logging';
 
+import { getHttpErrorStatus } from '../../utils';
 import { getCourseTopicsV3 } from './api';
-import { fetchCourseTopicsFailed, fetchCourseTopicsRequest, fetchCourseTopicsSuccess } from './slices';
+import {
+  fetchCourseTopicsDenied, fetchCourseTopicsFailed, fetchCourseTopicsRequest, fetchCourseTopicsSuccess,
+} from './slices';
 
 function normalizeTopicsV3(topics) {
   const coursewareUnits = reduce(topics, (arrayOfUnits, chapter) => {
@@ -57,7 +60,11 @@ export function fetchCourseTopicsV3(courseId) {
       const data = await getCourseTopicsV3(courseId);
       dispatch(fetchCourseTopicsSuccess(normalizeTopicsV3(data)));
     } catch (error) {
-      dispatch(fetchCourseTopicsFailed());
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(fetchCourseTopicsDenied());
+      } else {
+        dispatch(fetchCourseTopicsFailed());
+      }
       logError(error);
     }
   };

src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx

@@ -50,6 +50,7 @@ function TopicSearchBar({ intl }) {
           <Icon
             src={SearchIcon}
             onClick={() => onSubmit(searchValue)}
+            data-testid="search-icon"
           />
         </span>
       </SearchField.Advanced>

src/discussions/in-context-topics/topic/SectionBaseGroup.jsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
+import TopicStats from '../../../components/TopicStats';
 import { Routes } from '../../../data/constants';
 import { discussionsPath } from '../../utils';
 import messages from '../messages';
@@ -49,12 +50,13 @@ function SectionBaseGroup({
           aria-current={isSelected(section.id) ? 'page' : undefined}
           tabIndex={(isSelected(subsection.id) || index === 0) ? 0 : -1}
         >
-          <div className="d-flex flex-row py-3.5 px-4">
+          <div className="d-flex flex-row pt-2.5 pb-2 px-4">
             <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
               <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
                 <div className="topic-name text-truncate">
                   {subsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
                 </div>
+                <TopicStats threadCounts={subsection?.threadCounts} />
               </div>
             </div>
           </div>

src/discussions/in-context-topics/topic/Topic.jsx

@@ -11,6 +11,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
 import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
 
+import TopicStats from '../../../components/TopicStats';
 import { Routes } from '../../../data/constants';
 import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
 import { discussionsPath } from '../../utils';
@@ -53,65 +54,11 @@ function Topic({
                 {topic?.name || topic?.displayName || intl.formatMessage(messages.unnamedTopicSubCategories)}
               </div>
             </div>
-            <div className="d-flex align-items-center mt-2.5" style={{ marginBottom: '2px' }}>
-              <OverlayTrigger
-                overlay={(
-                  <Tooltip>
-                    <div className="d-flex flex-column align-items-start">
-                      {intl.formatMessage(messages.discussions, {
-                        count: topic.threadCounts?.discussion || 0,
-                      })}
-                    </div>
-                  </Tooltip>
-                  )}
-              >
-                <div className="d-flex align-items-center mr-3.5">
-                  <Icon src={PostOutline} className="icon-size mr-2" />
-                  {topic.threadCounts?.discussion || 0}
-                </div>
-              </OverlayTrigger>
-              <OverlayTrigger
-                overlay={(
-                  <Tooltip>
-                    <div className="d-flex flex-column align-items-start">
-                      {intl.formatMessage(messages.questions, {
-                        count: topic.threadCounts?.question || 0,
-                      })}
-                    </div>
-                  </Tooltip>
-                )}
-              >
-                <div className="d-flex align-items-center mr-3.5">
-                  <Icon src={HelpOutline} className="icon-size mr-2" />
-                  {topic.threadCounts?.question || 0}
-                </div>
-              </OverlayTrigger>
-              {Boolean(canSeeReportedStats) && (
-                <OverlayTrigger
-                  overlay={(
-                    <Tooltip>
-                      <div className="d-flex flex-column align-items-start">
-                        {Boolean(activeFlags) && (
-                        <span>
-                          {intl.formatMessage(messages.reported, { reported: activeFlags })}
-                        </span>
-                        )}
-                        {Boolean(inactiveFlags) && (
-                        <span>
-                          {intl.formatMessage(messages.previouslyReported, { previouslyReported: inactiveFlags })}
-                        </span>
-                        )}
-                      </div>
-                    </Tooltip>
-                    )}
-                >
-                  <div className="d-flex align-items-center">
-                    <Icon src={Report} className="icon-size mr-2 text-danger" />
-                    {activeFlags}{Boolean(inactiveFlags) && `/${inactiveFlags}`}
-                  </div>
-                </OverlayTrigger>
-              )}
-            </div>
+            <TopicStats
+              threadCounts={topic?.threadCounts}
+              activeFlags={topic?.activeFlags}
+              inactiveFlags={topic?.inactiveFlags}
+            />
           </div>
         </div>
       </Link>

src/discussions/index.js

@@ -1,4 +1,4 @@
-export * from './comments';
 export * from './discussions-home';
+export * from './post-comments';
 export * from './posts';
 export * from './topics';

src/discussions/learners/LearnerPostsView.jsx

@@ -88,7 +88,7 @@ function LearnerPostsView({ intl }) {
           onClick={() => history.push(discussionsPath(Routes.LEARNERS.PATH, { courseId })(location))}
           alt={intl.formatMessage(messages.back)}
         />
-        <div className="text-primary-500 font-style-normal font-family-inter font-weight-bold py-2.5">
+        <div className="text-primary-500 font-style font-weight-bold py-2.5">
           {intl.formatMessage(messages.activityForLearner, { username: capitalize(username) })}
         </div>
         <div style={{ padding: '18px' }} />

src/discussions/learners/learner/LearnerCard.jsx

@@ -40,7 +40,7 @@ function LearnerCard({
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
             <div className="d-flex align-items-center flex-fill">
               <div
-                className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style-normal font-family-inter"
+                className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style"
               >
                 {learner.username}
               </div>

src/discussions/post-comments/PostCommentsView.jsx

@@ -0,0 +1,149 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Button, Icon, IconButton, Spinner,
+} from '@edx/paragon';
+import { ArrowBack } from '@edx/paragon/icons';
+
+import {
+  EndorsementStatus, PostsPages, RequestStatus, ThreadType,
+} from '../../data/constants';
+import { useDispatchWithState } from '../../data/hooks';
+import { DiscussionContext } from '../common/context';
+import { useIsOnDesktop } from '../data/hooks';
+import { EmptyPage } from '../empty-posts';
+import { Post } from '../posts';
+import { fetchThread } from '../posts/data/thunks';
+import { discussionsPath } from '../utils';
+import { ResponseEditor } from './comments/comment';
+import CommentsSort from './comments/CommentsSort';
+import CommentsView from './comments/CommentsView';
+import { useCommentsCount, usePost } from './data/hooks';
+import { selectCommentsStatus } from './data/selectors';
+import messages from './messages';
+
+function PostCommentsView({ intl }) {
+  const [isLoading, submitDispatch] = useDispatchWithState();
+  const { postId } = useParams();
+  const thread = usePost(postId);
+  const commentsStatus = useSelector(selectCommentsStatus);
+  const commentsCount = useCommentsCount(postId);
+  const history = useHistory();
+  const location = useLocation();
+  const isOnDesktop = useIsOnDesktop();
+  const [addingResponse, setAddingResponse] = useState(false);
+  const {
+    courseId, learnerUsername, category, topicId, page, enableInContextSidebar,
+  } = useContext(DiscussionContext);
+  const enableCommentsSort = false;
+
+  useEffect(() => {
+    if (!thread) { submitDispatch(fetchThread(postId, courseId, true)); }
+    setAddingResponse(false);
+  }, [postId]);
+
+  if (!thread) {
+    if (!isLoading) {
+      return (
+        <EmptyPage title={intl.formatMessage(messages.noThreadFound)} />
+      );
+    }
+    return (
+      <div style={{
+        position: 'absolute',
+        top: '50%',
+      }}
+      >
+        <Spinner animation="border" variant="primary" data-testid="loading-indicator" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {!isOnDesktop && (
+        enableInContextSidebar ? (
+          <>
+            <div className="px-4 py-1.5 bg-white">
+              <Button
+                variant="plain"
+                className="px-0 line-height-24 py-0 my-1.5 border-0 font-weight-normal font-style text-primary-500"
+                iconBefore={ArrowBack}
+                onClick={() => history.push(discussionsPath(PostsPages[page], {
+                  courseId, learnerUsername, category, topicId,
+                })(location))}
+                size="sm"
+              >
+                {intl.formatMessage(messages.backAlt)}
+              </Button>
+            </div>
+            <div className="border-bottom border-light-400" />
+          </>
+        ) : (
+          <IconButton
+            src={ArrowBack}
+            iconAs={Icon}
+            style={{ padding: '18px' }}
+            size="inline"
+            className="ml-4 mt-4"
+            onClick={() => history.push(discussionsPath(PostsPages[page], {
+              courseId, learnerUsername, category, topicId,
+            })(location))}
+            alt={intl.formatMessage(messages.backAlt)}
+          />
+        )
+      )}
+      <div
+        className="discussion-comments d-flex flex-column card border-0 post-card-margin post-card-padding"
+      >
+        <Post post={thread} handleAddResponseButton={() => setAddingResponse(true)} />
+        {!thread.closed && (
+          <ResponseEditor
+            postId={postId}
+            handleCloseEditor={() => setAddingResponse(false)}
+            addingResponse={addingResponse}
+          />
+        )}
+      </div>
+      {!!commentsCount && commentsStatus === RequestStatus.SUCCESSFUL && enableCommentsSort && <CommentsSort />}
+      {thread.type === ThreadType.DISCUSSION && (
+        <CommentsView
+          postId={postId}
+          intl={intl}
+          postType={thread.type}
+          endorsed={EndorsementStatus.DISCUSSION}
+          isClosed={thread.closed}
+        />
+      )}
+      {thread.type === ThreadType.QUESTION && (
+        <>
+          <CommentsView
+            postId={postId}
+            intl={intl}
+            postType={thread.type}
+            endorsed={EndorsementStatus.ENDORSED}
+            isClosed={thread.closed}
+          />
+          <CommentsView
+            postId={postId}
+            intl={intl}
+            postType={thread.type}
+            endorsed={EndorsementStatus.UNENDORSED}
+            isClosed={thread.closed}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+PostCommentsView.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(PostCommentsView);

src/discussions/post-comments/PostCommentsView.test.jsx

@@ -0,0 +1,699 @@
+import {
+  act, fireEvent, render, screen, waitFor, within,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter, Route } from 'react-router';
+import { Factory } from 'rosie';
+
+import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import { DiscussionContext } from '../common/context';
+import { getCourseConfigApiUrl } from '../data/api';
+import { fetchCourseConfig } from '../data/thunks';
+import DiscussionContent from '../discussions-home/DiscussionContent';
+import { getThreadsApiUrl } from '../posts/data/api';
+import { fetchThreads } from '../posts/data/thunks';
+import { getCommentsApiUrl } from './data/api';
+
+import '../posts/data/__factories__';
+import './data/__factories__';
+
+const courseConfigApiUrl = getCourseConfigApiUrl();
+const commentsApiUrl = getCommentsApiUrl();
+const threadsApiUrl = getThreadsApiUrl();
+const discussionPostId = 'thread-1';
+const questionPostId = 'thread-2';
+const closedPostId = 'thread-2';
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const reverseOrder = false;
+let store;
+let axiosMock;
+let testLocation;
+
+function mockAxiosReturnPagedComments() {
+  [null, false, true].forEach(endorsed => {
+    const postId = endorsed === null ? discussionPostId : questionPostId;
+    [1, 2].forEach(page => {
+      axiosMock
+        .onGet(commentsApiUrl, {
+          params: {
+            thread_id: postId,
+            page,
+            page_size: undefined,
+            requested_fields: 'profile_image',
+            endorsed,
+            reverse_order: reverseOrder,
+          },
+        })
+        .reply(200, Factory.build('commentsResult', { can_delete: true }, {
+          threadId: postId,
+          page,
+          pageSize: 1,
+          count: 2,
+          endorsed,
+          childCount: page === 1 ? 2 : 0,
+        }));
+    });
+  });
+}
+
+function mockAxiosReturnPagedCommentsResponses() {
+  const parentId = 'comment-1';
+  const commentsResponsesApiUrl = `${commentsApiUrl}${parentId}/`;
+  const paramsTemplate = {
+    page: undefined,
+    page_size: undefined,
+    requested_fields: 'profile_image',
+  };
+
+  for (let page = 1; page <= 2; page++) {
+    axiosMock
+      .onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } })
+      .reply(200, Factory.build('commentsResult', null, {
+        parentId,
+        page,
+        pageSize: 1,
+        count: 2,
+      }));
+  }
+}
+
+function renderComponent(postId) {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider
+          value={{ courseId }}
+        >
+          <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
+            <DiscussionContent />
+            <Route
+              path="*"
+              render={({ location }) => {
+                testLocation = location;
+                return null;
+              }}
+            />
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  return wrapper;
+}
+
+describe('ThreadView', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    Factory.resetAll();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(threadsApiUrl)
+      .reply(200, Factory.build('threadsResult'));
+    axiosMock.onPatch(new RegExp(`${commentsApiUrl}*`)).reply(({
+      url,
+      data,
+    }) => {
+      const commentId = url.match(/comments\/(?<id>[a-z1-9-]+)\//).groups.id;
+      const {
+        rawBody,
+      } = camelCaseObject(JSON.parse(data));
+      return [200, Factory.build('comment', {
+        id: commentId,
+        rendered_body: rawBody,
+        raw_body: rawBody,
+      })];
+    });
+    axiosMock.onPost(commentsApiUrl)
+      .reply(({ data }) => {
+        const {
+          rawBody,
+          threadId,
+        } = camelCaseObject(JSON.parse(data));
+        return [200, Factory.build(
+          'comment',
+          {
+            rendered_body: rawBody,
+            raw_body: rawBody,
+            thread_id: threadId,
+          },
+        )];
+      });
+
+    executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
+    mockAxiosReturnPagedComments();
+    mockAxiosReturnPagedCommentsResponses();
+  });
+
+  describe('for all post types', () => {
+    function assertLastUpdateData(data) {
+      expect(JSON.parse(axiosMock.history.patch[axiosMock.history.patch.length - 1].data)).toMatchObject(data);
+    }
+
+    it('should show and hide the editor', async () => {
+      renderComponent(discussionPostId);
+      const post = screen.getByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      const addResponseButton = within(hoverCard).getByRole('button', { name: /Add response/i });
+      await act(async () => {
+        fireEvent.click(
+          addResponseButton,
+        );
+      });
+      expect(screen.queryByTestId('tinymce-editor')).toBeInTheDocument();
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+      });
+      expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
+    });
+
+    it('should allow posting a response', async () => {
+      renderComponent(discussionPostId);
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      const addResponseButton = within(hoverCard).getByRole('button', { name: /Add response/i });
+      await act(async () => {
+        fireEvent.click(
+          addResponseButton,
+        );
+      });
+      await act(() => {
+        fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
+      });
+
+      await act(async () => {
+        fireEvent.click(
+          screen.getByText(/submit/i),
+        );
+      });
+      expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
+      await waitFor(async () => expect(await screen.findByTestId('comment-1')).toBeInTheDocument());
+    });
+
+    it('should not allow posting a response on a closed post', async () => {
+      renderComponent(closedPostId);
+      const post = screen.getByTestId('post-thread-2');
+      const hoverCard = within(post).getByTestId('hover-card-thread-2');
+      expect(within(hoverCard).getByRole('button', { name: /Add response/i })).toBeDisabled();
+    });
+
+    it('should allow posting a comment', async () => {
+      renderComponent(discussionPostId);
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+      const hoverCard = within(comment).getByTestId('hover-card-comment-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /Add comment/i }),
+        );
+      });
+      act(() => {
+        fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
+      });
+      await act(async () => {
+        fireEvent.click(
+          screen.getByText(/submit/i),
+        );
+      });
+      expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
+      await waitFor(async () => expect(await screen.findByTestId('reply-comment-7')).toBeInTheDocument());
+    });
+
+    it('should not allow posting a comment on a closed post', async () => {
+      renderComponent(closedPostId);
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-3'));
+      const hoverCard = within(comment).getByTestId('hover-card-comment-3');
+      expect(within(hoverCard).getByRole('button', { name: /Add comment/i })).toBeDisabled();
+    });
+
+    it('should allow editing an existing comment', async () => {
+      renderComponent(discussionPostId);
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+      const hoverCard = within(comment).getByTestId('hover-card-comment-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /edit/i }));
+      });
+      act(() => {
+        fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /submit/i }));
+      });
+      await waitFor(async () => {
+        expect(await screen.findByTestId('comment-comment-1')).toBeInTheDocument();
+      });
+    });
+
+    async function setupCourseConfig(reasonCodesEnabled = true) {
+      axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
+        has_moderation_privileges: true,
+        reason_codes_enabled: reasonCodesEnabled,
+        editReasons: [
+          { code: 'reason-1', label: 'reason 1' },
+          { code: 'reason-2', label: 'reason 2' },
+        ],
+        postCloseReasons: [
+          { code: 'reason-1', label: 'reason 1' },
+          { code: 'reason-2', label: 'reason 2' },
+        ],
+      });
+      axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
+      await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+    }
+
+    it('should show reason codes when editing an existing comment', async () => {
+      setupCourseConfig();
+      renderComponent(discussionPostId);
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+      const hoverCard = within(comment).getByTestId('hover-card-comment-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /edit/i }));
+      });
+      expect(screen.queryByRole('combobox', { name: /reason for editing/i })).toBeInTheDocument();
+      expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
+      await act(async () => {
+        fireEvent.change(screen.queryByRole('combobox', { name: /reason for editing/i }),
+          { target: { value: null } });
+      });
+      await act(async () => {
+        fireEvent.change(screen.queryByRole('combobox',
+          { name: /reason for editing/i }), { target: { value: 'reason-1' } });
+      });
+      await act(async () => {
+        fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /submit/i }));
+      });
+      assertLastUpdateData({ edit_reason_code: 'reason-1' });
+    });
+
+    it('should show reason codes when closing a post', async () => {
+      setupCourseConfig();
+      renderComponent(discussionPostId);
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /close/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /close post/i })).toBeInTheDocument();
+      expect(screen.queryByRole('combobox', { name: /reason/i })).toBeInTheDocument();
+      expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
+      await act(async () => {
+        fireEvent.change(screen.queryByRole('combobox', { name: /reason/i }), { target: { value: 'reason-1' } });
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /close post/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
+      assertLastUpdateData({ closed: true, close_reason_code: 'reason-1' });
+    });
+
+    it('should close the post directly if reason codes are not enabled', async () => {
+      setupCourseConfig(false);
+      renderComponent(discussionPostId);
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /close/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
+      assertLastUpdateData({ closed: true });
+    });
+
+    it.each([true, false])(
+      'should reopen the post directly when reason codes enabled=%s',
+      async (reasonCodesEnabled) => {
+        setupCourseConfig(reasonCodesEnabled);
+        renderComponent(closedPostId);
+        const post = screen.getByTestId('post-thread-2');
+        const hoverCard = within(post).getByTestId('hover-card-thread-2');
+        await act(async () => {
+          fireEvent.click(
+            within(hoverCard).getByRole('button', { name: /actions menu/i }),
+          );
+        });
+        expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
+        await act(async () => {
+          fireEvent.click(screen.getByRole('button', { name: /reopen/i }));
+        });
+        expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
+        assertLastUpdateData({ closed: false });
+      },
+    );
+
+    it('should show the editor if the post is edited', async () => {
+      setupCourseConfig(false);
+      renderComponent(discussionPostId);
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /edit/i }));
+      });
+      expect(testLocation.pathname).toBe(`/${courseId}/posts/${discussionPostId}/edit`);
+    });
+
+    it('should allow pinning the post', async () => {
+      renderComponent(discussionPostId);
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /pin/i }));
+      });
+      assertLastUpdateData({ pinned: false });
+    });
+
+    it('should allow reporting the post', async () => {
+      renderComponent(discussionPostId);
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /report/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
+      await act(async () => {
+        fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
+      assertLastUpdateData({ abuse_flagged: true });
+    });
+
+    it('handles liking a post', async () => {
+      renderComponent(discussionPostId);
+
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /like/i }),
+        );
+      });
+      expect(axiosMock.history.patch).toHaveLength(2);
+      expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
+    });
+
+    it('handles liking a comment', async () => {
+      renderComponent(discussionPostId);
+
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+      const hoverCard = within(comment).getByTestId('hover-card-comment-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /like/i }),
+        );
+      });
+      expect(axiosMock.history.patch).toHaveLength(2);
+      expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
+    });
+
+    it('handles endorsing comments', async () => {
+      renderComponent(discussionPostId);
+      // Wait for the content to load
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+      const hoverCard = within(comment).getByTestId('hover-card-comment-1');
+      await act(async () => {
+        fireEvent.click(within(hoverCard).getByRole('button', { name: /Endorse/i }));
+      });
+      expect(axiosMock.history.patch).toHaveLength(2);
+      expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ endorsed: true });
+    });
+
+    it('handles reporting comments', async () => {
+      renderComponent(discussionPostId);
+      // Wait for the content to load
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+      const hoverCard = within(comment).getByTestId('hover-card-comment-1');
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /Report/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).toBeInTheDocument();
+      await act(async () => {
+        fireEvent.click(screen.queryByRole('button', { name: /Confirm/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /Report \w+/i, exact: false })).not.toBeInTheDocument();
+      expect(axiosMock.history.patch).toHaveLength(2);
+      expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ abuse_flagged: true });
+    });
+  });
+
+  describe('for discussion thread', () => {
+    const findLoadMoreCommentsButton = () => screen.findByTestId('load-more-comments');
+
+    it('shown post not found when post id does not belong to course', async () => {
+      renderComponent('unloaded-id');
+      expect(await screen.findByText('Thread not found', { exact: true }))
+        .toBeInTheDocument();
+    });
+
+    it('initially loads only the first page', async () => {
+      renderComponent(discussionPostId);
+      expect(await screen.findByTestId('comment-comment-1'))
+        .toBeInTheDocument();
+      expect(screen.queryByTestId('comment-comment-2'))
+        .not
+        .toBeInTheDocument();
+    });
+
+    it('pressing load more button will load next page of comments', async () => {
+      renderComponent(discussionPostId);
+
+      const loadMoreButton = await findLoadMoreCommentsButton();
+      fireEvent.click(loadMoreButton);
+
+      await screen.findByTestId('comment-comment-1');
+      await screen.findByTestId('comment-comment-2');
+    });
+
+    it('newly loaded comments are appended to the old ones', async () => {
+      renderComponent(discussionPostId);
+
+      const loadMoreButton = await findLoadMoreCommentsButton();
+      fireEvent.click(loadMoreButton);
+
+      await screen.findByTestId('comment-comment-1');
+      // check that comments from the first page are also displayed
+      expect(screen.queryByTestId('comment-comment-2'))
+        .toBeInTheDocument();
+    });
+
+    it('load more button is hidden when no more comments pages to load', async () => {
+      const totalPages = 2;
+      renderComponent(discussionPostId);
+
+      const loadMoreButton = await findLoadMoreCommentsButton();
+      for (let page = 1; page < totalPages; page++) {
+        fireEvent.click(loadMoreButton);
+      }
+
+      await screen.findByTestId('comment-comment-2');
+      await expect(findLoadMoreCommentsButton())
+        .rejects
+        .toThrow();
+    });
+  });
+
+  describe('for question thread', () => {
+    const findLoadMoreCommentsButtons = () => screen.findAllByTestId('load-more-comments');
+
+    it('initially loads only the first page', async () => {
+      act(() => renderComponent(questionPostId));
+      expect(await screen.findByTestId('comment-comment-3'))
+        .toBeInTheDocument();
+      expect(await screen.findByTestId('comment-comment-5'))
+        .toBeInTheDocument();
+      expect(screen.queryByTestId('comment-comment-4'))
+        .not
+        .toBeInTheDocument();
+    });
+
+    it('pressing load more button will load next page of comments', async () => {
+      act(() => {
+        renderComponent(questionPostId);
+      });
+
+      const [loadMoreButtonEndorsed, loadMoreButtonUnendorsed] = await findLoadMoreCommentsButtons();
+      // Both load more buttons should show
+      expect(await findLoadMoreCommentsButtons()).toHaveLength(2);
+      expect(await screen.findByTestId('comment-comment-3'))
+        .toBeInTheDocument();
+      expect(await screen.findByTestId('comment-comment-5'))
+        .toBeInTheDocument();
+      // Comments from next page should not be loaded yet.
+      expect(await screen.queryByTestId('comment-comment-6'))
+        .not
+        .toBeInTheDocument();
+      expect(await screen.queryByTestId('comment-comment-4'))
+        .not
+        .toBeInTheDocument();
+
+      await act(async () => {
+        fireEvent.click(loadMoreButtonEndorsed);
+      });
+      // Endorsed comment from next page should be loaded now.
+      await waitFor(() => expect(screen.queryByTestId('comment-comment-6'))
+        .toBeInTheDocument());
+      // Unendorsed comment from next page should not be loaded yet.
+      expect(await screen.queryByTestId('comment-comment-4'))
+        .not
+        .toBeInTheDocument();
+      // Now only one load more buttons should show, for unendorsed comments
+      expect(await findLoadMoreCommentsButtons()).toHaveLength(1);
+      await act(async () => {
+        fireEvent.click(loadMoreButtonUnendorsed);
+      });
+      // Unendorsed comment from next page should be loaded now.
+      await waitFor(() => expect(screen.queryByTestId('comment-comment-4'))
+        .toBeInTheDocument());
+      await expect(findLoadMoreCommentsButtons()).rejects.toThrow();
+    });
+  });
+
+  describe('for comments replies', () => {
+    const findLoadMoreCommentsResponsesButton = () => screen.findByTestId('load-more-comments-responses');
+
+    it('initially loads only the first page', async () => {
+      renderComponent(discussionPostId);
+
+      await waitFor(() => screen.findByTestId('reply-comment-7'));
+      expect(screen.queryByTestId('reply-comment-8')).not.toBeInTheDocument();
+    });
+
+    it('pressing load more button will load next page of responses', async () => {
+      renderComponent(discussionPostId);
+
+      const loadMoreButton = await findLoadMoreCommentsResponsesButton();
+      await act(async () => {
+        fireEvent.click(loadMoreButton);
+      });
+
+      await screen.findByTestId('reply-comment-8');
+    });
+
+    it('newly loaded responses are appended to the old ones', async () => {
+      renderComponent(discussionPostId);
+
+      const loadMoreButton = await findLoadMoreCommentsResponsesButton();
+      await act(async () => {
+        fireEvent.click(loadMoreButton);
+      });
+
+      await screen.findByTestId('reply-comment-8');
+      // check that comments from the first page are also displayed
+      expect(screen.queryByTestId('reply-comment-7')).toBeInTheDocument();
+    });
+
+    it('load more button is hidden when no more responses pages to load', async () => {
+      const totalPages = 2;
+      renderComponent(discussionPostId);
+
+      const loadMoreButton = await findLoadMoreCommentsResponsesButton();
+      for (let page = 1; page < totalPages; page++) {
+        act(() => {
+          fireEvent.click(loadMoreButton);
+        });
+      }
+
+      await screen.findByTestId('reply-comment-8');
+      await expect(findLoadMoreCommentsResponsesButton())
+        .rejects
+        .toThrow();
+    });
+  });
+
+  describe.each([
+    { component: 'post', testId: 'post-thread-1', cardId: 'hover-card-thread-1' },
+    { component: 'comment', testId: 'comment-comment-1', cardId: 'hover-card-comment-1' },
+  ])('delete confirmation modal', ({
+    component,
+    testId,
+    cardId,
+  }) => {
+    test(`for ${component}`, async () => {
+      renderComponent(discussionPostId);
+      // Wait for the content to load
+      const post = await screen.findByTestId(testId);
+      const hoverCard = within(post).getByTestId(cardId);
+      expect(screen.queryByRole('dialog', { name: /Delete response/i, exact: false })).not.toBeInTheDocument();
+      await act(async () => {
+        fireEvent.click(
+          within(hoverCard).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      await act(async () => {
+        fireEvent.click(screen.queryByRole('button', { name: /Delete/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /Delete/i, exact: false })).toBeInTheDocument();
+    });
+  });
+
+  describe('for comments replies', () => {
+    it('shows delete confirmation modal', async () => {
+      renderComponent(discussionPostId);
+      const reply = await waitFor(() => screen.findByTestId('reply-comment-7'));
+      await act(async () => {
+        fireEvent.click(
+          within(reply).getByRole('button', { name: /actions menu/i }),
+        );
+      });
+      await act(async () => {
+        fireEvent.click(screen.queryByRole('button', { name: /Delete/i }));
+      });
+      expect(screen.queryByRole('dialog', { name: /Delete/i, exact: false })).toBeInTheDocument();
+    });
+  });
+});

src/discussions/post-comments/comments/CommentsSort.jsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Button, Dropdown, ModalPopup, useToggle,
+} from '@edx/paragon';
+import {
+  ExpandLess, ExpandMore,
+} from '@edx/paragon/icons';
+
+import { selectCommentSortOrder } from '../data/selectors';
+import { setCommentSortOrder } from '../data/slices';
+import messages from '../messages';
+
+function CommentSortDropdown({
+  intl,
+}) {
+  const dispatch = useDispatch();
+  const sortedOrder = useSelector(selectCommentSortOrder);
+  const [isOpen, open, close] = useToggle(false);
+  const [target, setTarget] = useState(null);
+
+  const handleActions = (reverseOrder) => {
+    close();
+    dispatch(setCommentSortOrder(reverseOrder));
+  };
+
+  return (
+    <>
+      <div className="comments-sort d-flex justify-content-end mx-4 mt-2">
+        <Button
+          alt={intl.formatMessage(messages.actionsAlt)}
+          ref={setTarget}
+          variant="tertiary"
+          onClick={open}
+          size="sm"
+          iconAfter={isOpen ? ExpandLess : ExpandMore}
+        >
+          {intl.formatMessage(messages.commentSort, {
+            sort: sortedOrder,
+          })}
+        </Button>
+      </div>
+      <div className="actions-dropdown">
+        <ModalPopup
+          onClose={close}
+          positionRef={target}
+          isOpen={isOpen}
+        >
+          <div
+            className="bg-white p-1 shadow d-flex flex-column"
+            data-testid="comment-sort-dropdown-modal-popup"
+          >
+            <Dropdown.Item
+              className="d-flex justify-content-start py-1.5 mb-1"
+              as={Button}
+              variant="tertiary"
+              size="inline"
+              onClick={() => handleActions(false)}
+              autoFocus={sortedOrder === false}
+            >
+              {intl.formatMessage(messages.commentSort, {
+                sort: false,
+              })}
+            </Dropdown.Item>
+            <Dropdown.Item
+              className="d-flex justify-content-start py-1.5"
+              as={Button}
+              variant="tertiary"
+              size="inline"
+              onClick={() => handleActions(true)}
+              autoFocus={sortedOrder === true}
+            >
+              {intl.formatMessage(messages.commentSort, {
+                sort: true,
+              })}
+            </Dropdown.Item>
+          </div>
+        </ModalPopup>
+      </div>
+    </>
+  );
+}
+
+CommentSortDropdown.propTypes = {
+  intl: intlShape.isRequired,
+
+};
+
+export default injectIntl(CommentSortDropdown);

src/discussions/post-comments/comments/CommentsView.jsx

@@ -0,0 +1,130 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Spinner } from '@edx/paragon';
+
+import { EndorsementStatus } from '../../../data/constants';
+import { useUserCanAddThreadInBlackoutDate } from '../../data/hooks';
+import { filterPosts, isLastElementOfList } from '../../utils';
+import { usePostComments } from '../data/hooks';
+import messages from '../messages';
+import { Comment, ResponseEditor } from './comment';
+
+function CommentsView({
+  postType,
+  postId,
+  intl,
+  endorsed,
+  isClosed,
+}) {
+  const {
+    comments,
+    hasMorePages,
+    isLoading,
+    handleLoadMoreResponses,
+  } = usePostComments(postId, endorsed);
+
+  const endorsedComments = useMemo(() => [...filterPosts(comments, 'endorsed')], [comments]);
+  const unEndorsedComments = useMemo(() => [...filterPosts(comments, 'unendorsed')], [comments]);
+  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
+  const [addingResponse, setAddingResponse] = useState(false);
+
+  const handleDefinition = (message, commentsLength) => (
+    <div
+      className="mx-4 my-14px text-gray-700 font-style"
+      role="heading"
+      aria-level="2"
+    >
+      {intl.formatMessage(message, { num: commentsLength })}
+    </div>
+  );
+
+  const handleComments = (postComments, showLoadMoreResponses = false) => (
+    <div className="mx-4" role="list">
+      {postComments.map((comment) => (
+        <Comment
+          comment={comment}
+          key={comment.id}
+          postType={postType}
+          isClosedPost={isClosed}
+          marginBottom={isLastElementOfList(postComments, comment)}
+        />
+      ))}
+      {hasMorePages && !isLoading && !showLoadMoreResponses && (
+        <Button
+          onClick={handleLoadMoreResponses}
+          variant="link"
+          block="true"
+          className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500 font-size-14"
+          data-testid="load-more-comments"
+        >
+          {intl.formatMessage(messages.loadMoreResponses)}
+        </Button>
+      )}
+      {isLoading && !showLoadMoreResponses && (
+        <div className="mb-2 mt-3 d-flex justify-content-center">
+          <Spinner animation="border" variant="primary" className="spinner-dimentions" />
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      {((hasMorePages && isLoading) || !isLoading) && (
+        <>
+          {endorsedComments.length > 0 && (
+            <>
+              {handleDefinition(messages.endorsedResponseCount, endorsedComments.length)}
+              {endorsed === EndorsementStatus.DISCUSSION
+                ? handleComments(endorsedComments, true)
+                : handleComments(endorsedComments, false)}
+            </>
+          )}
+          {endorsed !== EndorsementStatus.ENDORSED && (
+            <>
+              {handleDefinition(messages.responseCount, unEndorsedComments.length)}
+              {unEndorsedComments.length === 0 && <br />}
+              {handleComments(unEndorsedComments, false)}
+              {(userCanAddThreadInBlackoutDate && !!unEndorsedComments.length && !isClosed) && (
+                <div className="mx-4">
+                  {!addingResponse && (
+                    <Button
+                      variant="plain"
+                      block="true"
+                      className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
+                      line-height-24 font-size-14 text-primary-500"
+                      onClick={() => setAddingResponse(true)}
+                      data-testid="add-response"
+                    >
+                      {intl.formatMessage(messages.addResponse)}
+                    </Button>
+                  )}
+                  <ResponseEditor
+                    postId={postId}
+                    handleCloseEditor={() => setAddingResponse(false)}
+                    addWrappingDiv
+                    addingResponse={addingResponse}
+                  />
+                </div>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+}
+
+CommentsView.propTypes = {
+  postId: PropTypes.string.isRequired,
+  postType: PropTypes.string.isRequired,
+  isClosed: PropTypes.bool.isRequired,
+  intl: intlShape.isRequired,
+  endorsed: PropTypes.oneOf([
+    EndorsementStatus.ENDORSED, EndorsementStatus.UNENDORSED, EndorsementStatus.DISCUSSION,
+  ]).isRequired,
+};
+
+export default injectIntl(CommentsView);

src/discussions/post-comments/comments/comment/Comment.jsx

@@ -7,16 +7,18 @@ import { useDispatch, useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, useToggle } from '@edx/paragon';
 
-import HTMLLoader from '../../../components/HTMLLoader';
-import { ContentActions } from '../../../data/constants';
-import { AlertBanner, Confirmation, EndorsedAlertBanner } from '../../common';
-import { DiscussionContext } from '../../common/context';
-import { useUserCanAddThreadInBlackoutDate } from '../../data/hooks';
-import { fetchThread } from '../../posts/data/thunks';
-import CommentIcons from '../comment-icons/CommentIcons';
-import { selectCommentCurrentPage, selectCommentHasMorePages, selectCommentResponses } from '../data/selectors';
-import { editComment, fetchCommentResponses, removeComment } from '../data/thunks';
-import messages from '../messages';
+import HTMLLoader from '../../../../components/HTMLLoader';
+import { ContentActions, EndorsementStatus } from '../../../../data/constants';
+import { AlertBanner, Confirmation, EndorsedAlertBanner } from '../../../common';
+import { DiscussionContext } from '../../../common/context';
+import HoverCard from '../../../common/HoverCard';
+import { useUserCanAddThreadInBlackoutDate } from '../../../data/hooks';
+import { fetchThread } from '../../../posts/data/thunks';
+import LikeButton from '../../../posts/post/LikeButton';
+import { useActions } from '../../../utils';
+import { selectCommentCurrentPage, selectCommentHasMorePages, selectCommentResponses } from '../../data/selectors';
+import { editComment, fetchCommentResponses, removeComment } from '../../data/thunks';
+import messages from '../../messages';
 import CommentEditor from './CommentEditor';
 import CommentHeader from './CommentHeader';
 import { commentShape } from './proptypes';
@@ -28,6 +30,7 @@ function Comment({
   showFullThread = true,
   isClosedPost,
   intl,
+  marginBottom,
 }) {
   const dispatch = useDispatch();
   const hasChildren = comment.childCount > 0;
@@ -49,6 +52,11 @@ function Comment({
       dispatch(fetchCommentResponses(comment.id, { page: 1 }));
     }
   }, [comment.id]);
+  const actions = useActions({
+    ...comment,
+    postType,
+  });
+  const endorseIcons = actions.find(({ action }) => action === EndorsementStatus.ENDORSED);
 
   const handleAbusedFlag = () => {
     if (comment.abuseFlagged) {
@@ -83,8 +91,14 @@ function Comment({
   );
 
   return (
-    <div className={classNames({ 'py-2 my-3': showFullThread })}>
-      <div className="d-flex flex-column card" data-testid={`comment-${comment.id}`} role="listitem">
+    <div className={classNames({ 'mb-3': (showFullThread && !marginBottom) })}>
+      {/* eslint-disable jsx-a11y/no-noninteractive-tabindex */}
+      <div
+        tabIndex="0"
+        className="d-flex flex-column card on-focus"
+        data-testid={`comment-${comment.id}`}
+        role="listitem"
+      >
         <Confirmation
           isOpen={isDeleting}
           title={intl.formatMessage(messages.deleteResponseTitle)}
@@ -105,73 +119,86 @@ function Comment({
           />
         )}
         <EndorsedAlertBanner postType={postType} content={comment} />
-        <div className="d-flex flex-column p-4.5">
+        <div className="d-flex flex-column post-card-comment px-4 pt-3.5 pb-10px" tabIndex="0">
+          <HoverCard
+            commentOrPost={comment}
+            actionHandlers={actionHandlers}
+            handleResponseCommentButton={() => setReplying(true)}
+            onLike={() => dispatch(editComment(comment.id, { voted: !comment.voted }))}
+            addResponseCommentButtonMessage={intl.formatMessage(messages.addComment)}
+            isClosedPost={isClosedPost}
+            endorseIcons={endorseIcons}
+          />
           <AlertBanner content={comment} />
-          <CommentHeader comment={comment} actionHandlers={actionHandlers} postType={postType} />
+          <CommentHeader comment={comment} />
           {isEditing
             ? (
               <CommentEditor comment={comment} onCloseEditor={() => setEditing(false)} formClasses="pt-3" />
             )
-            : <HTMLLoader cssClassName="comment-body text-break pt-4 text-primary-500" componentId="comment" htmlNode={comment.renderedBody} />}
-          <CommentIcons
-            comment={comment}
-            following={comment.following}
-            onLike={() => dispatch(editComment(comment.id, { voted: !comment.voted }))}
-            createdAt={comment.createdAt}
-          />
-          <div className="sr-only" role="heading" aria-level="3"> {intl.formatMessage(messages.replies, { count: inlineReplies.length })}</div>
-          <div className="d-flex flex-column" role="list">
-            {/* Pass along intl since component used here is the one before it's injected with `injectIntl` */}
-            {inlineReplies.map(inlineReply => (
-              <Reply
-                reply={inlineReply}
-                postType={postType}
-                key={inlineReply.id}
-                intl={intl}
+            : (
+              <HTMLLoader
+                cssClassName="comment-body html-loader text-break mt-14px font-style text-primary-500"
+                componentId="comment"
+                htmlNode={comment.renderedBody}
+                testId={comment.id}
               />
-            ))}
-          </div>
+            )}
+          {comment.voted && (
+            <div className="ml-n1.5 mt-10px">
+              <LikeButton
+                count={comment.voteCount}
+                onClick={() => dispatch(editComment(comment.id, { voted: !comment.voted }))}
+                voted={comment.voted}
+              />
+            </div>
+          )}
+          {inlineReplies.length > 0 && (
+            <div className="d-flex flex-column mt-0.5" role="list">
+              {/* Pass along intl since component used here is the one before it's injected with `injectIntl` */}
+              {inlineReplies.map(inlineReply => (
+                <Reply
+                  reply={inlineReply}
+                  postType={postType}
+                  key={inlineReply.id}
+                  intl={intl}
+                />
+              ))}
+            </div>
+          )}
           {hasMorePages && (
             <Button
               onClick={handleLoadMoreComments}
               variant="link"
               block="true"
-              className="mt-4.5 font-size-14 font-style-normal font-family-inter font-weight-500 px-2.5 py-2"
+              className="font-size-14 line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
               data-testid="load-more-comments-responses"
-              style={{
-                lineHeight: '20px',
-              }}
             >
               {intl.formatMessage(messages.loadMoreComments)}
             </Button>
           )}
           {!isNested && showFullThread && (
             isReplying ? (
-              <CommentEditor
-                comment={{
-                  threadId: comment.threadId,
-                  parentId: comment.id,
-                }}
-                edit={false}
-                onCloseEditor={() => setReplying(false)}
-              />
+              <div className="mt-2.5">
+                <CommentEditor
+                  comment={{ threadId: comment.threadId, parentId: comment.id }}
+                  edit={false}
+                  onCloseEditor={() => setReplying(false)}
+                />
+              </div>
             ) : (
               <>
-                {!isClosedPost && userCanAddThreadInBlackoutDate
+                {!isClosedPost && userCanAddThreadInBlackoutDate && (inlineReplies.length >= 5)
                   && (
                     <Button
-                      className="d-flex flex-grow mt-3 py-2 font-size-14"
-                      variant="outline-primary"
-                      style={{
-                        lineHeight: '20px',
-                      }}
+                      className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500"
+                      variant="plain"
+                      style={{ height: '36px' }}
                       onClick={() => setReplying(true)}
                     >
                       {intl.formatMessage(messages.addComment)}
                     </Button>
                   )}
               </>
-
             )
           )}
         </div>
@@ -186,11 +213,13 @@ Comment.propTypes = {
   showFullThread: PropTypes.bool,
   isClosedPost: PropTypes.bool,
   intl: intlShape.isRequired,
+  marginBottom: PropTypes.bool,
 };
 
 Comment.defaultProps = {
   showFullThread: true,
   isClosedPost: false,
+  marginBottom: true,
 };
 
 export default injectIntl(Comment);

src/discussions/post-comments/comments/comment/CommentEditor.jsx

@@ -9,19 +9,19 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import { Button, Form, StatefulButton } from '@edx/paragon';
 
-import { TinyMCEEditor } from '../../../components';
-import FormikErrorFeedback from '../../../components/FormikErrorFeedback';
-import PostPreviewPane from '../../../components/PostPreviewPane';
-import { useDispatchWithState } from '../../../data/hooks';
+import { TinyMCEEditor } from '../../../../components';
+import FormikErrorFeedback from '../../../../components/FormikErrorFeedback';
+import PostPreviewPane from '../../../../components/PostPreviewPane';
+import { useDispatchWithState } from '../../../../data/hooks';
 import {
   selectModerationSettings,
   selectUserHasModerationPrivileges,
   selectUserIsGroupTa,
   selectUserIsStaff,
-} from '../../data/selectors';
-import { formikCompatibleHandler, isFormikFieldInvalid } from '../../utils';
-import { addComment, editComment } from '../data/thunks';
-import messages from '../messages';
+} from '../../../data/selectors';
+import { formikCompatibleHandler, isFormikFieldInvalid } from '../../../utils';
+import { addComment, editComment } from '../../data/thunks';
+import messages from '../../messages';
 
 function CommentEditor({
   intl,

src/discussions/post-comments/comments/comment/CommentHeader.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Avatar } from '@edx/paragon';
+
+import { AvatarOutlineAndLabelColors } from '../../../../data/constants';
+import { AuthorLabel } from '../../../common';
+import { useAlertBannerVisible } from '../../../data/hooks';
+import { selectAuthorAvatars } from '../../../posts/data/selectors';
+import { commentShape } from './proptypes';
+
+function CommentHeader({
+  comment,
+}) {
+  const authorAvatars = useSelector(selectAuthorAvatars(comment.author));
+  const colorClass = AvatarOutlineAndLabelColors[comment.authorLabel];
+  const hasAnyAlert = useAlertBannerVisible(comment);
+
+  return (
+    <div className={classNames('d-flex flex-row justify-content-between', {
+      'mt-2': hasAnyAlert,
+    })}
+    >
+      <div className="align-items-center d-flex flex-row">
+        <Avatar
+          className={`border-0 ml-0.5 mr-2.5 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
+          alt={comment.author}
+          src={authorAvatars?.imageUrlSmall}
+          style={{
+            width: '32px',
+            height: '32px',
+          }}
+        />
+        <AuthorLabel
+          author={comment.author}
+          authorLabel={comment.authorLabel}
+          labelColor={colorClass && `text-${colorClass}`}
+          linkToProfile
+          postCreatedAt={comment.createdAt}
+          postOrComment
+        />
+      </div>
+    </div>
+  );
+}
+
+CommentHeader.propTypes = {
+  comment: commentShape.isRequired,
+};
+
+export default injectIntl(CommentHeader);

src/discussions/post-comments/comments/comment/Reply.jsx

@@ -7,16 +7,16 @@ import * as timeago from 'timeago.js';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, useToggle } from '@edx/paragon';
 
-import HTMLLoader from '../../../components/HTMLLoader';
-import { AvatarOutlineAndLabelColors, ContentActions } from '../../../data/constants';
+import HTMLLoader from '../../../../components/HTMLLoader';
+import { AvatarOutlineAndLabelColors, ContentActions } from '../../../../data/constants';
 import {
   ActionsDropdown, AlertBanner, AuthorLabel, Confirmation,
-} from '../../common';
-import timeLocale from '../../common/time-locale';
-import { useAlertBannerVisible } from '../../data/hooks';
-import { selectAuthorAvatars } from '../../posts/data/selectors';
-import { editComment, removeComment } from '../data/thunks';
-import messages from '../messages';
+} from '../../../common';
+import timeLocale from '../../../common/time-locale';
+import { useAlertBannerVisible } from '../../../data/hooks';
+import { selectAuthorAvatars } from '../../../posts/data/selectors';
+import { editComment, removeComment } from '../../data/thunks';
+import messages from '../../messages';
 import CommentEditor from './CommentEditor';
 import { commentShape } from './proptypes';
 
@@ -64,7 +64,7 @@ function Reply({
   const hasAnyAlert = useAlertBannerVisible(reply);
 
   return (
-    <div className="d-flex flex-column mt-4.5" data-testid={`reply-${reply.id}`} role="listitem">
+    <div className="d-flex flex-column mt-2.5 " data-testid={`reply-${reply.id}`} role="listitem">
       <Confirmation
         isOpen={isDeleting}
         title={intl.formatMessage(messages.deleteCommentTitle)}
@@ -108,11 +108,18 @@ function Reply({
           />
         </div>
         <div
-          className="bg-light-300 px-4 pb-2 pt-2.5 flex-fill"
+          className="bg-light-300 pl-4 pt-2.5 pr-2.5 pb-10px flex-fill"
           style={{ borderRadius: '0rem 0.375rem 0.375rem' }}
         >
-          <div className="d-flex flex-row justify-content-between align-items-center mb-0.5">
-            <AuthorLabel author={reply.author} authorLabel={reply.authorLabel} labelColor={colorClass && `text-${colorClass}`} linkToProfile />
+          <div className="d-flex flex-row justify-content-between" style={{ height: '24px' }}>
+            <AuthorLabel
+              author={reply.author}
+              authorLabel={reply.authorLabel}
+              labelColor={colorClass && `text-${colorClass}`}
+              linkToProfile
+              postCreatedAt={reply.createdAt}
+              postOrComment
+            />
             <div className="ml-auto d-flex">
               <ActionsDropdown
                 commentOrPost={{
@@ -120,17 +127,22 @@ function Reply({
                   postType,
                 }}
                 actionHandlers={actionHandlers}
+                iconSize="inline"
               />
             </div>
           </div>
           {isEditing
             ? <CommentEditor comment={reply} onCloseEditor={() => setEditing(false)} />
-            : <HTMLLoader componentId="reply" htmlNode={reply.renderedBody} cssClassName="text-break text-primary-500" />}
+            : (
+              <HTMLLoader
+                componentId="reply"
+                htmlNode={reply.renderedBody}
+                cssClassName="html-loader text-break font-style text-primary-500"
+                testId={reply.id}
+              />
+            )}
         </div>
       </div>
-      <div className="text-gray-500 align-self-end mt-2" title={reply.createdAt}>
-        {timeago.format(reply.createdAt, 'time-locale')}
-      </div>
     </div>
   );
 }

src/discussions/post-comments/comments/comment/ResponseEditor.jsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+
+import { injectIntl } from '@edx/frontend-platform/i18n';
+
+import CommentEditor from './CommentEditor';
+
+function ResponseEditor({
+  postId,
+  addWrappingDiv,
+  handleCloseEditor,
+  addingResponse,
+}) {
+  useEffect(() => {
+    handleCloseEditor();
+  }, [postId]);
+
+  return addingResponse
+    && (
+      <div className={classNames({ 'bg-white p-4 mb-4 rounded mt-2': addWrappingDiv })}>
+        <CommentEditor
+          comment={{ threadId: postId }}
+          edit={false}
+          onCloseEditor={handleCloseEditor}
+        />
+      </div>
+    );
+}
+
+ResponseEditor.propTypes = {
+  postId: PropTypes.string.isRequired,
+  addWrappingDiv: PropTypes.bool,
+  handleCloseEditor: PropTypes.func.isRequired,
+  addingResponse: PropTypes.bool.isRequired,
+};
+
+ResponseEditor.defaultProps = {
+  addWrappingDiv: false,
+};
+
+export default injectIntl(ResponseEditor);

src/discussions/post-comments/data/api.js

@@ -23,6 +23,7 @@ export async function getThreadComments(
     endorsed,
     page,
     pageSize,
+    reverseOrder,
   } = {},
 ) {
   const params = snakeCaseObject({
@@ -30,6 +31,7 @@ export async function getThreadComments(
     endorsed: EndorsementValue[endorsed],
     page,
     pageSize,
+    reverseOrder,
     requestedFields: 'profile_image',
   });
 

src/discussions/post-comments/data/hooks.js

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import { EndorsementStatus } from '../../../data/constants';
+import { useDispatchWithState } from '../../../data/hooks';
+import { selectThread } from '../../posts/data/selectors';
+import { markThreadAsRead } from '../../posts/data/thunks';
+import {
+  selectCommentSortOrder, selectThreadComments, selectThreadCurrentPage, selectThreadHasMorePages,
+} from './selectors';
+import { fetchThreadComments } from './thunks';
+
+function trackLoadMoreEvent(postId, params) {
+  sendTrackEvent(
+    'edx.forum.responses.loadMore',
+    {
+      postId,
+      params,
+    },
+  );
+}
+
+export function usePost(postId) {
+  const dispatch = useDispatch();
+  const thread = useSelector(selectThread(postId));
+
+  useEffect(() => {
+    if (thread && !thread.read) {
+      dispatch(markThreadAsRead(postId));
+    }
+  }, [postId]);
+
+  return thread;
+}
+
+export function usePostComments(postId, endorsed = null) {
+  const [isLoading, dispatch] = useDispatchWithState();
+  const comments = useSelector(selectThreadComments(postId, endorsed));
+  const reverseOrder = useSelector(selectCommentSortOrder);
+  const hasMorePages = useSelector(selectThreadHasMorePages(postId, endorsed));
+  const currentPage = useSelector(selectThreadCurrentPage(postId, endorsed));
+
+  const handleLoadMoreResponses = async () => {
+    const params = {
+      endorsed,
+      page: currentPage + 1,
+      reverseOrder,
+    };
+    await dispatch(fetchThreadComments(postId, params));
+    trackLoadMoreEvent(postId, params);
+  };
+
+  useEffect(() => {
+    dispatch(fetchThreadComments(postId, {
+      endorsed,
+      page: 1,
+      reverseOrder,
+    }));
+  }, [postId, reverseOrder]);
+
+  return {
+    comments,
+    hasMorePages,
+    isLoading,
+    handleLoadMoreResponses,
+  };
+}
+
+export function useCommentsCount(postId) {
+  const discussions = useSelector(selectThreadComments(postId, EndorsementStatus.DISCUSSION));
+  const endorsedQuestions = useSelector(selectThreadComments(postId, EndorsementStatus.ENDORSED));
+  const unendorsedQuestions = useSelector(selectThreadComments(postId, EndorsementStatus.UNENDORSED));
+
+  return [...discussions, ...endorsedQuestions, ...unendorsedQuestions].length;
+}

src/discussions/post-comments/data/redux.test.js

@@ -276,8 +276,7 @@ describe('Comments/Responses data layer tests', () => {
     const commentId = 'comment-1';
 
     // This will generate 3 comments, so the responses will start at id = 'comment-4'
-    axiosMock.onGet(commentsApiUrl)
-      .reply(200, Factory.build('commentsResult'));
+    axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
     await executeThunk(fetchThreadComments(threadId), store.dispatch, store.getState);
 
     // Build all comments first, so we can paginate over them and they
@@ -301,8 +300,7 @@ describe('Comments/Responses data layer tests', () => {
       parent_id: commentId,
     });
     allResponses.push(comment);
-    axiosMock.onPost(commentsApiUrl)
-      .reply(200, comment);
+    axiosMock.onPost(commentsApiUrl).reply(200, comment);
     await executeThunk(addComment('Test Comment', threadId, null), store.dispatch, store.getState);
 
     // Someone else posted a new response now
@@ -316,15 +314,14 @@ describe('Comments/Responses data layer tests', () => {
       });
     await executeThunk(fetchCommentResponses(commentId, { page: 2 }), store.dispatch, store.getState);
 
+    // sorting is implemented on backend
     expect(store.getState().comments.commentsInComments[commentId])
       .toEqual([
         'comment-4',
         'comment-5',
         'comment-6',
-        'comment-7',
-        // our comment was pushed down
         'comment-8',
-        // the newer comment is placed correctly
+        'comment-7',
         'comment-9',
       ]);
   });
@@ -356,8 +353,7 @@ describe('Comments/Responses data layer tests', () => {
     // Post new comment
     const comment = Factory.build('comment', { thread_id: threadId });
     allComments.push(comment);
-    axiosMock.onPost(commentsApiUrl)
-      .reply(200, comment);
+    axiosMock.onPost(commentsApiUrl).reply(200, comment);
     await executeThunk(addComment('Test Comment', threadId, null), store.dispatch, store.getState);
 
     // Somebody else posted a new response now
@@ -371,15 +367,14 @@ describe('Comments/Responses data layer tests', () => {
       });
     await executeThunk(fetchThreadComments(threadId, { page: 2, endorsed }), store.dispatch, store.getState);
 
+    // sorting is implemented on backend
     expect(store.getState().comments.commentsInThreads[threadId][endorsed])
       .toEqual([
         'comment-1',
         'comment-2',
         'comment-3',
-        'comment-4',
-        // our comment was pushed down
         'comment-5',
-        // the newer comment is placed correctly
+        'comment-4',
         'comment-6',
       ]);
   });

src/discussions/post-comments/data/selectors.js

@@ -36,4 +36,6 @@ export const selectCommentCurrentPage = commentId => (
   state => state.comments.responsesPagination[commentId]?.currentPage || null
 );
 
-export const commentsStatus = state => state.comments.status;
+export const selectCommentsStatus = state => state.comments.status;
+
+export const selectCommentSortOrder = state => state.comments.sortOrder;

src/discussions/post-comments/data/slices.js

@@ -22,6 +22,7 @@ const commentsSlice = createSlice({
     postStatus: RequestStatus.SUCCESSFUL,
     pagination: {},
     responsesPagination: {},
+    sortOrder: false,
   },
   reducers: {
     fetchCommentsRequest: (state) => {
@@ -56,15 +57,6 @@ const commentsSlice = createSlice({
         hasMorePages: Boolean(payload.pagination.next),
       };
       state.commentsById = { ...state.commentsById, ...payload.commentsById };
-      // We sort the comments by creation time.
-      // This way our new comments are pushed down to the correct
-      // position when more pages of older comments are loaded.
-      state.commentsInThreads[threadId][endorsed].sort(
-        (a, b) => (
-          Date.parse(state.commentsById[a].createdAt)
-          - Date.parse(state.commentsById[b].createdAt)
-        ),
-      );
     },
     fetchCommentsFailed: (state) => {
       state.status = RequestStatus.FAILED;
@@ -90,12 +82,6 @@ const commentsSlice = createSlice({
         ]),
       ];
       state.commentsById = { ...state.commentsById, ...payload.commentsById };
-      state.commentsInComments[payload.commentId].sort(
-        (a, b) => (
-          Date.parse(state.commentsById[a].createdAt)
-          - Date.parse(state.commentsById[b].createdAt)
-        ),
-      );
       state.responsesPagination[payload.commentId] = {
         currentPage: payload.page,
         totalPages: payload.pagination.numPages,
@@ -181,6 +167,9 @@ const commentsSlice = createSlice({
       }
       delete state.commentsById[commentId];
     },
+    setCommentSortOrder: (state, { payload }) => {
+      state.sortOrder = payload;
+    },
   },
 });
 
@@ -206,6 +195,7 @@ export const {
   deleteCommentFailed,
   deleteCommentRequest,
   deleteCommentSuccess,
+  setCommentSortOrder,
 } = commentsSlice.actions;
 
 export const commentsReducer = commentsSlice.reducer;

src/discussions/post-comments/data/thunks.js

@@ -74,11 +74,18 @@ function normaliseComments(data) {
   };
 }
 
-export function fetchThreadComments(threadId, { page = 1, endorsed = EndorsementStatus.DISCUSSION } = {}) {
+export function fetchThreadComments(
+  threadId,
+  {
+    page = 1,
+    reverseOrder,
+    endorsed = EndorsementStatus.DISCUSSION,
+  } = {},
+) {
   return async (dispatch) => {
     try {
       dispatch(fetchCommentsRequest());
-      const data = await getThreadComments(threadId, { page, endorsed });
+      const data = await getThreadComments(threadId, { page, reverseOrder, endorsed });
       dispatch(fetchCommentsSuccess({
         ...normaliseComments(camelCaseObject(data)),
         endorsed,

src/discussions/post-comments/index.js

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

src/discussions/post-comments/messages.js

@@ -1,15 +1,15 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  addComment: {
+    id: 'discussions.comments.comment.addComment',
+    defaultMessage: 'Add comment',
+    description: 'Button to add a comment to a response',
+  },
   addResponse: {
     id: 'discussions.comments.comment.addResponse',
     defaultMessage: 'Add a response',
-    description: 'Button to add a response in a thread of forum posts',
-  },
-  addComment: {
-    id: 'discussions.comments.comment.addComment',
-    defaultMessage: 'Add a comment',
-    description: 'Button to add a comment to a response',
+    description: 'Button to add a response to a response',
   },
   abuseFlaggedMessage: {
     id: 'discussions.comments.comment.abuseFlaggedMessage',
@@ -188,6 +188,11 @@ const messages = defineMessages({
     defaultMessage: 'Edited by',
     description: 'Text shown to users to indicate who edited a post. Followed by the username of editor.',
   },
+  fullStop: {
+    id: 'discussions.comment.comments.fullStop',
+    defaultMessage: '•',
+    description: 'Fullstop shown to users to indicate who edited a post. Followed by a reason.',
+  },
   reason: {
     id: 'discussions.comment.comments.reason',
     defaultMessage: 'Reason',
@@ -197,11 +202,6 @@ const messages = defineMessages({
     id: 'discussions.post.closedBy',
     defaultMessage: 'Post closed by',
   },
-  replies: {
-    id: 'discussion.comment.repliesHeading',
-    defaultMessage: '{count} replies for the response added',
-    description: 'Text added for screen reader to understand nesting replies.',
-  },
   time: {
     id: 'discussion.comment.time',
     defaultMessage: '{time} ago',
@@ -212,6 +212,15 @@ const messages = defineMessages({
     defaultMessage: 'Thread not found',
     description: 'message to show on screen if the request thread is not found in course',
   },
+  commentSort: {
+    id: 'discussions.comment.sortFilterStatus',
+    defaultMessage: `{sort, select,
+      false {Oldest first}
+      true {Newest first}
+      other {{sort}}
+    }`,
+    description: 'sort message showing current sorting',
+  },
 });
 
 export default messages;

src/discussions/posts/PostsList.jsx

@@ -23,7 +23,7 @@ import NoResults from './NoResults';
 import { PostLink } from './post';
 
 function PostsList({
-  posts, topics, intl, isTopicTab,
+  posts, topics, intl, isTopicTab, parentIsLoading,
 }) {
   const dispatch = useDispatch();
   const {
@@ -50,8 +50,7 @@ function PostsList({
       topicIds,
       isFilterChanged,
     };
-
-    if (showOwnPosts) {
+    if (showOwnPosts && filters.search === '') {
       dispatch(fetchUserPosts(courseId, params));
     } else {
       dispatch(fetchThreads(courseId, params));
@@ -86,10 +85,10 @@ function PostsList({
 
   return (
     <>
-      {postInstances(pinnedPosts)}
-      {postInstances(unpinnedPosts)}
+      {!parentIsLoading && postInstances(pinnedPosts)}
+      {!parentIsLoading && postInstances(unpinnedPosts)}
       {posts?.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
-      {loadingStatus === RequestStatus.IN_PROGRESS ? (
+      {loadingStatus === RequestStatus.IN_PROGRESS || parentIsLoading ? (
         <div className="d-flex justify-content-center p-4 mx-auto my-auto">
           <Spinner animation="border" variant="primary" size="lg" />
         </div>
@@ -111,6 +110,7 @@ PostsList.propTypes = {
   })),
   topics: PropTypes.arrayOf(PropTypes.string),
   isTopicTab: PropTypes.bool,
+  parentIsLoading: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 
@@ -118,6 +118,7 @@ PostsList.defaultProps = {
   posts: [],
   topics: undefined,
   isTopicTab: false,
+  parentIsLoading: undefined,
 };
 
 export default injectIntl(PostsList);

src/discussions/posts/PostsView.jsx

@@ -13,10 +13,7 @@ import { fetchCourseTopicsV3 } from '../in-context-topics/data/thunks';
 import { selectTopics } from '../topics/data/selectors';
 import { fetchCourseTopics } from '../topics/data/thunks';
 import { handleKeyDown } from '../utils';
-import {
-  selectAllThreads,
-  selectTopicThreads,
-} from './data/selectors';
+import { selectAllThreads, selectTopicThreads } from './data/selectors';
 import { setSearchQuery } from './data/slices';
 import PostFilterBar from './post-filter-bar/PostFilterBar';
 import PostsList from './PostsList';
@@ -40,7 +37,7 @@ function CategoryPostsList({ category }) {
   const groupedCategory = useSelector(selectCurrentCategoryGrouping)(category);
   // If grouping at subsection is enabled, only apply it when browsing discussions in context in the learning MFE.
   const topicIds = useSelector(selectTopicsUnderCategory)(enableInContextSidebar ? groupedCategory : category);
-  const posts = useSelector(selectTopicThreads(topicIds));
+  const posts = useSelector(enableInContextSidebar ? selectAllThreads : selectTopicThreads(topicIds));
   return <PostsList posts={posts} topics={topicIds} />;
 }
 

src/discussions/posts/PostsView.test.jsx

@@ -191,7 +191,7 @@ describe('PostsView', () => {
           .toHaveLength(topicThreadCount);
         // When grouping is enabled, topic 1 will be shown, but not otherwise.
         expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-1/i))
-          .toHaveLength(grouping ? topicThreadCount : 0);
+          .toHaveLength(grouping ? topicThreadCount : 2);
       },
     );
   });

src/discussions/posts/post-actions-bar/PostActionsBar.jsx

@@ -42,17 +42,17 @@ function PostActionsBar({
           : <Search />
       )}
       {enableInContextSidebar && (
-        <h4 className="d-flex flex-grow-1 font-weight-bold my-0 py-0 align-self-center">
+        <h4 className="d-flex flex-grow-1 font-weight-bold font-style my-0 py-10px align-self-center">
           {intl.formatMessage(messages.title)}
         </h4>
       )}
-      {loadingStatus === RequestStatus.SUCCESSFUL && userCanAddThreadInBlackoutDate
-      && (
+      {loadingStatus === RequestStatus.SUCCESSFUL && userCanAddThreadInBlackoutDate && (
         <>
           {!enableInContextSidebar && <div className="border-right border-light-400 mx-3" />}
           <Button
             variant={enableInContextSidebar ? 'plain' : 'brand'}
-            className={classNames('my-0', { 'p-0': enableInContextSidebar })}
+            className={classNames('my-0 font-style border-0 line-height-24',
+              { 'px-3 py-10px border-0': enableInContextSidebar })}
             onClick={() => dispatch(showPostEditor())}
             size={enableInContextSidebar ? 'md' : 'sm'}
           >
@@ -62,13 +62,17 @@ function PostActionsBar({
       )}
       {enableInContextSidebar && (
         <>
-          <div className="border-right border-light-300 mr-2 ml-3.5 my-2" />
-          <IconButton
-            src={Close}
-            iconAs={Icon}
-            onClick={handleCloseInContext}
-            alt={intl.formatMessage(messages.close)}
-          />
+          <div className="border-right border-light-300 mr-3 ml-1.5 my-10px" />
+          <div className="justify-content-center mt-2.5 mx-3px">
+            <IconButton
+              src={Close}
+              iconAs={Icon}
+              onClick={handleCloseInContext}
+              alt={intl.formatMessage(messages.close)}
+              iconClassNames="spinner-dimentions"
+              className="spinner-dimentions"
+            />
+          </div>
         </>
       )}
     </div>

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

@@ -54,9 +54,9 @@ function DiscussionPostType({
   value,
   type,
   selected,
-  description,
   icon,
 }) {
+  const { enableInContextSidebar } = useContext(DiscussionContext);
   // Need to use regular label since Form.Label doesn't support overriding htmlFor
   return (
     <label htmlFor={`post-type-${value}`} className="d-flex p-0 my-0 mr-3">
@@ -66,12 +66,11 @@ function DiscussionPostType({
           'border-primary': selected,
           'border-light-400': !selected,
         })}
-        style={{ cursor: 'pointer', width: '14.25rem' }}
+        style={{ cursor: 'pointer', width: `${enableInContextSidebar ? '10.021rem' : '14.25rem'}` }}
       >
-        <Card.Section className="py-3 px-10px d-flex flex-column align-items-center">
+        <Card.Section className="px-4 py-3 d-flex flex-column align-items-center">
           <span className="text-primary-300 mb-0.5">{icon}</span>
-          <span className="text-gray-700 mb-0.5">{type}</span>
-          <span className="x-small text-gray-500">{description}</span>
+          <span className="text-gray-700">{type}</span>
         </Card.Section>
       </Card>
     </label>
@@ -82,7 +81,6 @@ DiscussionPostType.propTypes = {
   value: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
   selected: PropTypes.bool.isRequired,
-  description: PropTypes.string.isRequired,
   icon: PropTypes.element.isRequired,
 };
 
@@ -108,7 +106,7 @@ function PostEditor({
   const nonCoursewareIds = useSelector(enableInContext ? inContextCoursewareIds : selectNonCoursewareIds);
   const coursewareTopics = useSelector(enableInContext ? inContextCourseware : selectCoursewareTopics);
   const cohorts = useSelector(selectCourseCohorts);
-  const post = useSelector(selectThread(postId));
+  const post = useSelector(editExisting ? selectThread(postId) : () => ({}));
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const settings = useSelector(selectDivisionSettings);
@@ -270,7 +268,7 @@ function PostEditor({
         resetForm,
       }) => (
         <Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
-          <h4 className="mb-4" style={{ lineHeight: '16px' }}>
+          <h4 className="mb-4 font-style font-size-16" style={{ lineHeight: '16px' }}>
             {editExisting
               ? intl.formatMessage(messages.editPostHeading)
               : intl.formatMessage(messages.addPostHeading)}
@@ -444,7 +442,7 @@ function PostEditor({
 
           <PostPreviewPane htmlNode={values.comment} isPost editExisting={editExisting} />
 
-          <div className="d-flex flex-row mt-n4 w-75 text-primary">
+          <div className="d-flex flex-row mt-n4 w-75 text-primary font-style">
             {!editExisting && (
               <>
                 <Form.Group>
@@ -461,18 +459,18 @@ function PostEditor({
                   </Form.Checkbox>
                 </Form.Group>
                 {allowAnonymousToPeers && (
-                <Form.Group>
-                  <Form.Checkbox
-                    name="anonymousToPeers"
-                    checked={values.anonymousToPeers}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                  >
-                    <span className="font-size-14">
-                      {intl.formatMessage(messages.anonymousToPeersPost)}
-                    </span>
-                  </Form.Checkbox>
-                </Form.Group>
+                  <Form.Group>
+                    <Form.Checkbox
+                      name="anonymousToPeers"
+                      checked={values.anonymousToPeers}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                    >
+                      <span className="font-size-14">
+                        {intl.formatMessage(messages.anonymousToPeersPost)}
+                      </span>
+                    </Form.Checkbox>
+                  </Form.Group>
                 )}
               </>
             )}
@@ -498,7 +496,7 @@ function PostEditor({
           </div>
         </Form>
       )
-    }
+      }
     </Formik>
   );
 }

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

@@ -141,6 +141,16 @@ describe('PostEditor', () => {
         }
       },
     );
+    test('selectThread is not called while creating a new post', async () => {
+      const mockSelectThread = jest.fn();
+      jest.mock('../data/selectors', () => ({
+        selectThread: mockSelectThread,
+      }));
+      await renderComponent();
+      expect(mockSelectThread)
+        .not
+        .toHaveBeenCalled();
+    });
   });
 
   describe('cohorting', () => {

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

@@ -113,7 +113,7 @@ const messages = defineMessages({
   },
   showPreviewButton: {
     id: 'discussions.editor.posts.showPreview.button',
-    defaultMessage: 'Show Preview',
+    defaultMessage: 'Show preview',
     description: 'show preview button text to allow user to see their post content.',
   },
   actionsAlt: {

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

@@ -71,7 +71,6 @@ function PostFilterBar({
   const currentFilters = useSelector(selectThreadFilters());
   const { status } = useSelector(state => state.cohorts);
   const cohorts = useSelector(selectCourseCohorts);
-
   const [isOpen, setOpen] = useState(false);
 
   const selectedCohort = useMemo(() => cohorts.find(cohort => (
@@ -138,7 +137,7 @@ function PostFilterBar({
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
-        <span className="text-primary-700 pr-4">
+        <span className="text-primary-500 pr-4 font-style">
           {intl.formatMessage(messages.sortFilterStatus, {
             own: false,
             type: currentFilters.postType,

src/discussions/posts/post/LikeButton.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon, IconButtonWithTooltip } from '@edx/paragon';
+import {
+  Icon, IconButton, OverlayTrigger, Tooltip,
+} from '@edx/paragon';
 
 import { ThumbUpFilled, ThumbUpOutline } from '../../../components/icons';
 import messages from './messages';
@@ -12,7 +14,6 @@ function LikeButton({
   intl,
   onClick,
   voted,
-  preview,
 }) {
   const handleClick = (e) => {
     e.preventDefault();
@@ -23,20 +24,27 @@ function LikeButton({
   };
 
   return (
-    <div className="d-flex align-items-center mr-4 text-primary-500">
-      <IconButtonWithTooltip
-        id={`like-${count}-tooltip`}
-        tooltipPlacement="top"
-        tooltipContent={intl.formatMessage(voted ? messages.removeLike : messages.like)}
-        src={voted ? ThumbUpFilled : ThumbUpOutline}
-        iconAs={Icon}
-        alt="Like"
-        onClick={handleClick}
-        size={preview ? 'inline' : 'sm'}
-        className={`mr-0.5 ${preview && 'p-3'}`}
-        iconClassNames={preview && 'icon-size'}
-      />
-      {(count && count > 0) ? count : null}
+    <div className="d-flex align-items-center mr-36px text-primary-500">
+      <OverlayTrigger
+        overlay={(
+          <Tooltip id={`liked-${count}-tooltip`}>
+            {intl.formatMessage(voted ? messages.removeLike : messages.like)}
+          </Tooltip>
+        )}
+      >
+        <IconButton
+          src={voted ? ThumbUpFilled : ThumbUpOutline}
+          onClick={handleClick}
+          className="post-footer-icon-dimentions"
+          alt="Like"
+          iconAs={Icon}
+          iconClassNames="like-icon-dimentions"
+        />
+      </OverlayTrigger>
+      <div className="font-style">
+        {(count && count > 0) ? count : null}
+      </div>
+
     </div>
   );
 }
@@ -46,13 +54,11 @@ LikeButton.propTypes = {
   intl: intlShape.isRequired,
   onClick: PropTypes.func,
   voted: PropTypes.bool,
-  preview: PropTypes.bool,
 };
 
 LikeButton.defaultProps = {
   voted: false,
   onClick: undefined,
-  preview: false,
 };
 
 export default injectIntl(LikeButton);

src/discussions/posts/post/Post.jsx

@@ -13,6 +13,7 @@ import { ContentActions } from '../../../data/constants';
 import { selectorForUnitSubsection, selectTopicContext } from '../../../data/selectors';
 import { AlertBanner, Confirmation } from '../../common';
 import { DiscussionContext } from '../../common/context';
+import HoverCard from '../../common/HoverCard';
 import { selectModerationSettings } from '../../data/selectors';
 import { selectTopic } from '../../topics/data/selectors';
 import { removeThread, updateExistingThread } from '../data/thunks';
@@ -26,12 +27,13 @@ function Post({
   post,
   preview,
   intl,
+  handleAddResponseButton,
 }) {
   const location = useLocation();
   const history = useHistory();
   const dispatch = useDispatch();
   const { enableInContextSidebar } = useContext(DiscussionContext);
-  const { courseId } = useSelector((state) => state.courseTabs);
+  const courseId = useSelector((state) => state.config.id);
   const topic = useSelector(selectTopic(post.topicId));
   const getTopicSubsection = useSelector(selectorForUnitSubsection);
   const topicContext = useSelector(selectTopicContext(post.topicId));
@@ -39,7 +41,6 @@ function Post({
   const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
   const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false);
   const [isClosing, showClosePostModal, hideClosePostModal] = useToggle(false);
-
   const handleAbusedFlag = () => {
     if (post.abuseFlagged) {
       dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged }));
@@ -87,7 +88,12 @@ function Post({
   );
 
   return (
-    <div className="d-flex flex-column w-100 mw-100" data-testid={`post-${post.id}`}>
+    <div
+      className="d-flex flex-column w-100 mw-100 post-card-comment"
+      data-testid={`post-${post.id}`}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex="0"
+    >
       <Confirmation
         isOpen={isDeleting}
         title={intl.formatMessage(messages.deletePostTitle)}
@@ -107,21 +113,32 @@ function Post({
           confirmButtonVariant="danger"
         />
       )}
+      <HoverCard
+        commentOrPost={post}
+        actionHandlers={actionHandlers}
+        handleResponseCommentButton={handleAddResponseButton}
+        addResponseCommentButtonMessage={intl.formatMessage(messages.addResponse)}
+        onLike={() => dispatch(updateExistingThread(post.id, { voted: !post.voted }))}
+        onFollow={() => dispatch(updateExistingThread(post.id, { following: !post.following }))}
+        isClosedPost={post.closed}
+      />
       <AlertBanner content={post} />
-      <PostHeader post={post} actionHandlers={actionHandlers} />
-      <div className="d-flex mt-4 mb-2 text-break font-style-normal text-primary-500">
-        <HTMLLoader htmlNode={post.renderedBody} componentId="post" />
+      <PostHeader post={post} />
+      <div className="d-flex mt-14px text-break font-style text-primary-500">
+        <HTMLLoader htmlNode={post.renderedBody} componentId="post" cssClassName="html-loader" testId={post.id} />
       </div>
-      {topicContext && topic && (
-        <div className={classNames('border px-3 rounded mb-4 border-light-400 align-self-start py-2.5',
-          { 'w-100': enableInContextSidebar })}
+      {topicContext && (
+        <div
+          className={classNames('mt-14px mb-1 font-style font-size-12',
+            { 'w-100': enableInContextSidebar })}
+          style={{ lineHeight: '20px' }}
         >
-          <span className="text-gray-500">{intl.formatMessage(messages.relatedTo)}{' '}</span>
+          <span className="text-gray-500" style={{ lineHeight: '20px' }}>{intl.formatMessage(messages.relatedTo)}{' '}</span>
           <Hyperlink
             destination={topicContext.unitLink}
             target="_top"
           >
-            {enableInContextSidebar
+            {(topicContext && !topic)
               ? (
                 <>
                   <span className="w-auto">{topicContext.chapterName}</span>
@@ -135,9 +152,7 @@ function Post({
           </Hyperlink>
         </div>
       )}
-      <div className="mb-3">
-        <PostFooter post={post} preview={preview} />
-      </div>
+      <PostFooter post={post} preview={preview} />
       <ClosePostReasonModal
         isOpen={isClosing}
         onCancel={hideClosePostModal}
@@ -154,6 +169,7 @@ Post.propTypes = {
   intl: intlShape.isRequired,
   post: postShape.isRequired,
   preview: PropTypes.bool,
+  handleAddResponseButton: PropTypes.func.isRequired,
 };
 
 Post.defaultProps = {

src/discussions/posts/post/PostFooter.jsx

@@ -1,25 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { useDispatch, useSelector } from 'react-redux';
-import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Badge, Icon, IconButtonWithTooltip, OverlayTrigger, Tooltip,
+  Icon, IconButton, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
-import {
-  Locked,
-} from '@edx/paragon/icons';
+import { Locked, People } from '@edx/paragon/icons';
 
-import {
-  People,
-  QuestionAnswer,
-  QuestionAnswerOutline,
-  StarFilled,
-  StarOutline,
-} from '../../../components/icons';
-import timeLocale from '../../common/time-locale';
+import { StarFilled, StarOutline } from '../../../components/icons';
 import { selectUserHasModerationPrivileges } from '../../data/selectors';
 import { updateExistingThread } from '../data/thunks';
 import LikeButton from './LikeButton';
@@ -29,81 +18,61 @@ import { postShape } from './proptypes';
 function PostFooter({
   post,
   intl,
-  preview,
-  showNewCountLabel,
 }) {
   const dispatch = useDispatch();
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
-  timeago.register('time-locale', timeLocale);
-
   return (
-    <div className="d-flex align-items-center">
-      <LikeButton
-        count={post.voteCount}
-        onClick={() => dispatch(updateExistingThread(post.id, { voted: !post.voted }))}
-        voted={post.voted}
-        preview={preview}
-      />
-      <IconButtonWithTooltip
-        id={`follow-${post.id}-tooltip`}
-        tooltipPlacement="top"
-        tooltipContent={intl.formatMessage(post.following ? messages.unFollow : messages.follow)}
-        src={post.following ? StarFilled : StarOutline}
-        iconAs={Icon}
-        alt="Follow"
-        onClick={(e) => {
-          e.preventDefault();
-          dispatch(updateExistingThread(post.id, { following: !post.following }));
-          return true;
-        }}
-        size={preview ? 'inline' : 'sm'}
-        className={preview && 'p-3'}
-        iconClassNames={preview && 'icon-size'}
-      />
-      {preview && post.commentCount > 1 && (
-        <div className="d-flex align-items-center ml-4">
-          <IconButtonWithTooltip
-            tooltipPlacement="top"
-            tooltipContent={intl.formatMessage(messages.viewActivity)}
-            src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline}
-            iconAs={Icon}
-            alt="Comment Count"
-            size="inline"
-            className="p-3 mr-0.5"
-            iconClassNames="icon-size"
-          />
-          {post.commentCount}
-        </div>
+    <div className="d-flex align-items-center ml-n1.5 mt-10px" style={{ lineHeight: '32px' }}>
+      {post.voteCount !== 0 && (
+        <LikeButton
+          count={post.voteCount}
+          onClick={() => dispatch(updateExistingThread(post.id, { voted: !post.voted }))}
+          voted={post.voted}
+        />
       )}
-      {showNewCountLabel && preview && post?.unreadCommentCount > 0 && post.commentCount > 1 && (
-        <Badge variant="light" className="ml-2">
-          {intl.formatMessage(messages.newLabel, { count: post.unreadCommentCount })}
-        </Badge>
+      {post.following && (
+        <OverlayTrigger
+          overlay={(
+            <Tooltip id={`follow-${post.id}-tooltip`}>
+              {intl.formatMessage(post.following ? messages.unFollow : messages.follow)}
+            </Tooltip>
+          )}
+        >
+          <IconButton
+            src={post.following ? StarFilled : StarOutline}
+            onClick={(e) => {
+              e.preventDefault();
+              dispatch(updateExistingThread(post.id, { following: !post.following }));
+              return true;
+            }}
+            iconAs={Icon}
+            iconClassNames="follow-icon-dimentions"
+            className="post-footer-icon-dimentions"
+            alt="Follow"
+          />
+        </OverlayTrigger>
       )}
       <div className="d-flex flex-fill justify-content-end align-items-center">
         {post.groupId && userHasModerationPrivileges && (
-          <>
-            <OverlayTrigger
-              overlay={(
-                <Tooltip id={`visibility-${post.id}-tooltip`}>{post.groupName}</Tooltip>
-              )}
-            >
-              <span data-testid="cohort-icon">
-                <People />
-              </span>
-            </OverlayTrigger>
-            <span
-              className="text-gray-700 mx-1.5 font-weight-500"
-              style={{ fontSize: '16px' }}
-            >
-              ·
+          <OverlayTrigger
+            overlay={(
+              <Tooltip id={`visibility-${post.id}-tooltip`}>{post.groupName}</Tooltip>
+            )}
+          >
+            <span data-testid="cohort-icon">
+              <Icon
+                src={People}
+                style={{
+                  width: '22px',
+                  height: '20px',
+                }}
+                className="text-gray-500"
+              />
             </span>
-          </>
+          </OverlayTrigger>
         )}
-        <span title={post.createdAt} className="text-gray-700">
-          {timeago.format(post.createdAt, 'time-locale')}
-        </span>
-        {!preview && post.closed
+
+        {post.closed
           && (
             <OverlayTrigger
               overlay={(
@@ -117,8 +86,8 @@ function PostFooter({
                 style={{
                   width: '1rem',
                   height: '1rem',
+                  marginLeft: '19.5px',
                 }}
-                className="ml-3"
               />
             </OverlayTrigger>
           )}
@@ -130,13 +99,7 @@ function PostFooter({
 PostFooter.propTypes = {
   intl: intlShape.isRequired,
   post: postShape.isRequired,
-  preview: PropTypes.bool,
-  showNewCountLabel: PropTypes.bool,
-};
 
-PostFooter.defaultProps = {
-  preview: false,
-  showNewCountLabel: false,
 };
 
 export default injectIntl(PostFooter);

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

@@ -64,11 +64,6 @@ describe('PostFooter', () => {
     });
   });
 
-  it("shows 'x new' badge for new comments in case of read post only", () => {
-    renderComponent(mockPost, true, true);
-    expect(screen.getByText('2 New')).toBeTruthy();
-  });
-
   it("doesn't have 'new' badge when there are 0 new comments", () => {
     renderComponent({ ...mockPost, unreadCommentCount: 0 });
     expect(screen.queryByText('2 New')).toBeFalsy();
@@ -89,18 +84,24 @@ describe('PostFooter', () => {
     expect(screen.getByTestId('cohort-icon')).toBeTruthy();
   });
 
-  it.each([[true, /unfollow/i], [false, /follow/i]])('test follow button when following=%s', async (following, message) => {
-    renderComponent({ ...mockPost, following });
+  it('test follow button when following=true', async () => {
+    renderComponent({ ...mockPost, following: true });
     const followButton = screen.getByRole('button', { name: /follow/i });
     expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
     await act(async () => {
       fireEvent.mouseEnter(followButton);
     });
-    expect(screen.getByRole('tooltip')).toHaveTextContent(message);
+
+    expect(screen.getByRole('tooltip')).toHaveTextContent(/unfollow/i);
     await act(async () => {
       fireEvent.click(followButton);
     });
     // clicking on the button triggers thread update.
     expect(store.getState().threads.status === RequestStatus.IN_PROGRESS).toBeTruthy();
   });
+
+  it('test follow button when following=false', async () => {
+    renderComponent({ ...mockPost, following: false });
+    expect(screen.queryByRole('button', { name: /follow/i })).not.toBeInTheDocument();
+  });
 });

src/discussions/posts/post/PostHeader.jsx

@@ -9,7 +9,7 @@ import { Avatar, Badge, Icon } from '@edx/paragon';
 
 import { Issue, Question } from '../../../components/icons';
 import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
-import { ActionsDropdown, AuthorLabel } from '../../common';
+import { AuthorLabel } from '../../common';
 import { useAlertBannerVisible } from '../../data/hooks';
 import { selectAuthorAvatars } from '../data/selectors';
 import messages from './messages';
@@ -24,7 +24,7 @@ export function PostAvatar({
   const avatarSize = useMemo(() => {
     let size = '2rem';
     if (post.type === ThreadType.DISCUSSION && !fromPostLink) {
-      size = '2.375rem';
+      size = '2rem';
     } else if (post.type === ThreadType.QUESTION) {
       size = '1.5rem';
     }
@@ -52,11 +52,11 @@ export function PostAvatar({
         />
       )}
       <Avatar
-        className={classNames('border-0', {
+        className={classNames('border-0 mt-1', {
           [`outline-${outlineColor}`]: outlineColor,
           'outline-anonymous': !outlineColor,
           'mt-3 ml-2': post.type === ThreadType.QUESTION && fromPostLink,
-          'avarat-img-position': post.type === ThreadType.QUESTION,
+          'avarat-img-position mt-17px': post.type === ThreadType.QUESTION,
         })}
         style={{
           height: avatarSize,
@@ -86,14 +86,13 @@ function PostHeader({
   intl,
   post,
   preview,
-  actionHandlers,
 }) {
   const showAnsweredBadge = preview && post.hasEndorsed && post.type === ThreadType.QUESTION;
   const authorLabelColor = AvatarOutlineAndLabelColors[post.authorLabel];
   const hasAnyAlert = useAlertBannerVisible(post);
 
   return (
-    <div className={classNames('d-flex flex-fill mw-100', { 'mt-2': hasAnyAlert && !preview })}>
+    <div className={classNames('d-flex flex-fill mw-100', { 'mt-10px': hasAnyAlert && !preview })}>
       <div className="flex-shrink-0">
         <PostAvatar post={post} authorLabel={post.authorLabel} />
       </div>
@@ -109,21 +108,27 @@ function PostHeader({
                   && <Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>}
               </div>
             )
-            : <h4 className="mb-0" style={{ lineHeight: '28px' }} aria-level="1" tabIndex="-1" accessKey="h">{post.title}</h4>}
+            : (
+              <h5
+                className="mb-0 font-style text-primary-500"
+                style={{ lineHeight: '21px' }}
+                aria-level="1"
+                tabIndex="-1"
+                accessKey="h"
+              >
+                {post.title}
+              </h5>
+            )}
           <AuthorLabel
             author={post.author || intl.formatMessage(messages.anonymous)}
             authorLabel={post.authorLabel}
             labelColor={authorLabelColor && `text-${authorLabelColor}`}
             linkToProfile
+            postCreatedAt={post.createdAt}
+            postOrComment
           />
         </div>
       </div>
-      {!preview
-        && (
-          <div className="ml-auto d-flex">
-            <ActionsDropdown commentOrPost={post} actionHandlers={actionHandlers} />
-          </div>
-        )}
     </div>
   );
 }
@@ -132,7 +137,6 @@ PostHeader.propTypes = {
   intl: intlShape.isRequired,
   post: postShape.isRequired,
   preview: PropTypes.bool,
-  actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
 };
 
 PostHeader.defaultProps = {

src/discussions/posts/post/PostLink.jsx

@@ -74,15 +74,15 @@ function PostLink({
                 <Truncate lines={1} className="mr-1.5" whiteSpace>
                   <span
                     class={
-                        classNames('font-weight-500 font-size-14 text-primary-500 font-style-normal font-family-inter align-bottom',
-                          { 'font-weight-bolder': !read })
-                      }
+                      classNames('font-weight-500 font-size-14 text-primary-500 font-style align-bottom',
+                        { 'font-weight-bolder': !read })
+                    }
                   >
                     {post.title}
                   </span>
                   <span class="align-bottom"> </span>
                   <span
-                    class="text-gray-700 font-weight-normal font-size-14 font-style-normal font-family-inter align-bottom"
+                    class="text-gray-700 font-weight-normal font-size-14 font-style align-bottom"
                   >
                     {isPostPreviewAvailable(post.previewBody)
                       ? post.previewBody
@@ -107,10 +107,11 @@ function PostLink({
                 )}
 
                 {post.pinned && (
-                <Icon
-                  src={PushPin}
-                  className={`post-summary-icons-dimensions text-gray-700 ${canSeeReportedBadge || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
-                />
+                  <Icon
+                    src={PushPin}
+                    className={`post-summary-icons-dimensions text-gray-700
+                    ${canSeeReportedBadge || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
+                  />
                 )}
               </div>
             </div>

src/discussions/posts/post/PostSummaryFooter.jsx

@@ -9,16 +9,10 @@ import {
   Badge, Icon, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
 import {
-  Locked,
+  StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
 } from '@edx/paragon/icons';
 
-import {
-  People,
-  QuestionAnswer,
-  QuestionAnswerOutline,
-  StarFilled,
-  StarOutline, ThumbUpFilled, ThumbUpOutline,
-} from '../../../components/icons';
+import { People, QuestionAnswer, QuestionAnswerOutline } from '../../../components/icons';
 import timeLocale from '../../common/time-locale';
 import { selectUserHasModerationPrivileges } from '../../data/selectors';
 import messages from './messages';
@@ -32,9 +26,8 @@ function PostSummaryFooter({
 }) {
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   timeago.register('time-locale', timeLocale);
-
   return (
-    <div className="d-flex align-items-center text-gray-700">
+    <div className="d-flex align-items-center text-gray-700" style={{ height: '24px' }}>
       <div className="d-flex align-items-center mr-4.5">
         <OverlayTrigger
           overlay={(
@@ -43,11 +36,11 @@ function PostSummaryFooter({
             </Tooltip>
           )}
         >
-          <Icon src={post.voted ? ThumbUpFilled : ThumbUpOutline} className="post-summary-icons-dimensions mr-0.5">
+          <Icon src={post.voted ? ThumbUpFilled : ThumbUpOutline} className="post-summary-like-dimensions mr-0.5">
             <span className="sr-only">{' '}{intl.formatMessage(post.voted ? messages.likedPost : messages.postLikes)}</span>
           </Icon>
         </OverlayTrigger>
-        <div className="font-family-inter font-style-normal">
+        <div className="font-style">
           {(post.voteCount && post.voteCount > 0) ? post.voteCount : null}
         </div>
       </div>
@@ -60,12 +53,14 @@ function PostSummaryFooter({
         )}
       >
         <Icon src={post.following ? StarFilled : StarOutline} className="post-summary-icons-dimensions mr-0.5">
-          <span className="sr-only">{' '}{ intl.formatMessage(post.following ? messages.srOnlyFollowDescription : messages.srOnlyUnFollowDescription)}</span>
+          <span className="sr-only">
+            {' '}{intl.formatMessage(post.following ? messages.srOnlyFollowDescription : messages.srOnlyUnFollowDescription)}
+          </span>
         </Icon>
       </OverlayTrigger>
 
       {preview && post.commentCount > 1 && (
-        <div className="d-flex align-items-center ml-4.5">
+        <div className="d-flex align-items-center ml-4.5 text-gray-700 font-style font-size-12">
           <OverlayTrigger
             overlay={(
               <Tooltip id={`follow-${post.id}-tooltip`}>
@@ -73,7 +68,10 @@ function PostSummaryFooter({
               </Tooltip>
             )}
           >
-            <Icon src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline} className="post-summary-icons-dimensions mr-0.5">
+            <Icon
+              src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline}
+              className="post-summary-comment-count-dimensions mr-0.5"
+            >
               <span className="sr-only">{' '} {intl.formatMessage(messages.activity)}</span>
             </Icon>
           </OverlayTrigger>
@@ -87,46 +85,22 @@ function PostSummaryFooter({
       )}
       <div className="d-flex flex-fill justify-content-end align-items-center">
         {post.groupId && userHasModerationPrivileges && (
-          <>
-            <OverlayTrigger
-              overlay={(
-                <Tooltip id={`visibility-${post.id}-tooltip`}>{post.groupName}</Tooltip>
-              )}
-            >
-              <span data-testid="cohort-icon" className="post-summary-icons-dimensions">
-                <People />
-              </span>
-            </OverlayTrigger>
-            <span
-              className="text-gray-700 mx-1.5 font-weight-500"
-              style={{ fontSize: '16px' }}
-            >
-              ·
+          <OverlayTrigger
+            overlay={(
+              <Tooltip id={`visibility-${post.id}-tooltip`}>{post.groupName}</Tooltip>
+            )}
+          >
+            <span data-testid="cohort-icon" className="mr-2">
+              <Icon
+                src={People}
+                className="text-gray-500 post-summary-icons-dimensions"
+              />
             </span>
-          </>
+          </OverlayTrigger>
         )}
-        <span title={post.createdAt} className="text-gray-700 post-summary-timestamp">
+        <span title={post.createdAt} className="text-gray-700 post-summary-timestamp ml-0.5">
           {timeago.format(post.createdAt, 'time-locale')}
         </span>
-        {!preview && post.closed
-          && (
-            <OverlayTrigger
-              overlay={(
-                <Tooltip id={`closed-${post.id}-tooltip`}>
-                  {intl.formatMessage(messages.postClosed)}
-                </Tooltip>
-              )}
-            >
-              <Icon
-                src={Locked}
-                style={{
-                  width: '1rem',
-                  height: '1rem',
-                }}
-                className="ml-3 post-summary-icons-dimensions"
-              />
-            </OverlayTrigger>
-          )}
       </div>
     </div>
   );

src/discussions/posts/post/messages.js

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'anonymous',
     description: 'Author name displayed when a post is anonymous',
   },
+  addResponse: {
+    id: 'discussions.post.addResponse',
+    defaultMessage: 'Add response',
+    description: 'Button to add a response in a thread of forum posts',
+  },
   lastResponse: {
     id: 'discussions.post.lastResponse',
     defaultMessage: 'Last response {time}',

src/discussions/utils.js

@@ -5,9 +5,7 @@ import { generatePath, useRouteMatch } from 'react-router';
 
 import { getConfig } from '@edx/frontend-platform';
 import {
-  CheckCircle,
-  CheckCircleOutline,
-  Delete, Edit, Pin, QuestionAnswer, Report, Verified, VerifiedOutline,
+  CheckCircle, CheckCircleOutline, Delete, Edit, Pin, QuestionAnswer, Report, Verified, VerifiedOutline,
 } from '@edx/paragon/icons';
 
 import { InsertLink } from '../components/icons';
@@ -185,7 +183,6 @@ export function useActions(content) {
         .every(condition => condition === true)
       : true
   );
-
   return ACTIONS_LIST.filter(
     ({
       action,
@@ -295,3 +292,7 @@ export function handleKeyDown(event) {
     selectedOption.focus();
   }
 }
+
+export function isLastElementOfList(list, element) {
+  return list[list.length - 1] === element;
+}

src/i18n/messages/ar.json

@@ -1,46 +1,6 @@
 {
   "navigation.course.tabs.label": "مواد المساق",
   "learn.course.tabs.navigation.overflow.menu": "المزيد...",
-  "discussions.comments.comment.addResponse": "إضافة رد",
-  "discussions.comments.comment.addComment": "إضافة تعليق ",
-  "discussions.comments.comment.abuseFlaggedMessage": "تم إبلاغ الطاقم عن هذا المحتوى لمراجعته.",
-  "discussions.actions.back.alt": "العودة إلى القائمة",
-  "discussions.comments.comment.responseCount": "{num، plural, =0 {دون رد} one {تم إظهار ردّ واحد} two {تم إظهار ردّين} few {تم إظهار # ردود} many {تم إظهار # ردًا} other {تم إظهار # ردود}}",
-  "discussions.comments.comment.endorsedResponseCount": "{num، plural, =0 {لا ردود معتمدة} one {تم إظهار ردّ واحد معتمد} two {تم إظهار ردّين معتمدين} few {تم إظهار # ردود معتمدة} many {تم إظهار # ردًا معتمدًا} other {تم إظهار # ردود معتمدة}}",
-  "discussions.comments.comment.loadMoreComments": "تحميل المزيد من التعليقات",
-  "discussions.comments.comment.loadMoreResponses": "تحميل المزيد من الردود",
-  "discussions.comments.comment.visibility": "هذه المشاركة تظهر {group، select، null {للجميع} other {لـ {group}}.",
-  "discussions.comments.comment.postedTime": "تم نشر {postType، select، discussion {المناقشة} question {المنشور} other {{postType}} {relativeTime} من طرف",
-  "discussions.comments.comment.commentTime": "تم النشر {relativeTime}",
-  "discussions.comments.comment.answer": "الإجابة",
-  "discussions.comments.comment.answeredlabel": "تم تعليمها كمُجابة من طرف",
-  "discussions.comments.comment.endorsed": "معتمد",
-  "discussions.comments.comment.endorsedlabel": "اعتمده",
-  "discussions.actions.label": "قائمة الإجراءات",
-  "discussions.actions.edit": "تعديل",
-  "discussions.actions.pin": "تثبيت",
-  "discussions.actions.delete": "حذف",
-  "discussions.editor.submit": "إرسال",
-  "discussions.editor.submitting": "الإرسال جارٍ",
-  "discussions.editor.cancel": "إلغاء",
-  "discussions.editor.error.empty": "لا يمكن أن يكون محتوى المنشور فارغًا.",
-  "discussions.editor.delete.response.title": "حذف الرد",
-  "discussions.editor.delete.response.description": "هل أنت متأكد من رغبتك في حذف هذا الردّ نهائيًا؟",
-  "discussions.editor.delete.comment.title": "حذف التعليق",
-  "discussions.editor.delete.comment.description": "هل أنت متأكد من رغبتك في حذف هذا التعليق نهائيا؟",
-  "discussions.delete.confirmation.button.delete": "حذف",
-  "discussions.editor.response.response.title": "أتريد الإبلاغ عن محتوى غير لائق؟",
-  "discussions.editor.response.description": "سيراجع فريق الإشراف على المناقشة هذا المحتوى و يتخذ الإجراء المناسب.",
-  "discussions.editor.report.comment.title": "أتريد الإبلاغ عن محتوى غير لائق؟",
-  "discussions.editor.report.comment.description": "سيراجع فريق الإشراف على المناقشة هذا المحتوى ويتخذ الإجراء المناسب.",
-  "discussions.editor.comments.editReasonCode": "سبب التعديل",
-  "discussions.editor.posts.editReasonCode.error": "حدد سبب التعديل",
-  "discussions.comment.comments.editedBy": "عدّله",
-  "discussions.comment.comments.reason": "السبب",
-  "discussions.post.closedBy": "تم إقفال المنشور من طرف",
-  "discussion.comment.repliesHeading": "{count, plural, =0 {لم يضف أي رد} one {أضيف رد واحد} two {أضيف ردان} few {أضيفت # ردود} many {أضيف # ردًا} other {أضيفت # ردود} على الرد",
-  "discussion.comment.time": "منذ {time}",
-  "discussion.thread.notFound": "المناقشة غير موجودة",
   "discussions.topics.backAlt": "Back to topics list",
   "discussions.topics.discussions": "{count، plural, =0 {لا مناقشات} one {مناقشة واحدة} two {مناقشتان} few {# مناقشات} many {# مناقشة} other {# مناقشات}",
   "discussions.topics.questions": "{count، plural, =0 {لا مناقشات} one {سؤال واحد} two {سؤالان} few {# اسئلة} many {# سؤالًا} other {# أسئلة}",
@@ -68,7 +28,10 @@
   "discussion.learner.posts": "المنشورات",
   "discussions.actions.button.alt": "قائمة الإجراءات",
   "discussions.actions.copylink": "نسخ الرابط",
+  "discussions.actions.edit": "تعديل",
+  "discussions.actions.pin": "تثبيت",
   "discussions.actions.unpin": "إلغاء التثبيت",
+  "discussions.actions.delete": "حذف",
   "discussions.confirmation.button.confirm": "تأكيد",
   "discussions.actions.close": "إقفال ",
   "discussions.actions.reopen": "إعادة الفتح",
@@ -109,6 +72,44 @@
   "discussions.navigation.navigationBar.allTopics": "المواضيع",
   "discussions.navigation.navigationBar.myPosts": "منشوراتي",
   "discussions.navigation.navigationBar.learners": "المتعلمون",
+  "discussions.comments.comment.addComment": "Add comment",
+  "discussions.comments.comment.addResponse": "إضافة رد",
+  "discussions.comments.comment.abuseFlaggedMessage": "تم إبلاغ الطاقم عن هذا المحتوى لمراجعته.",
+  "discussions.actions.back.alt": "العودة إلى القائمة",
+  "discussions.comments.comment.responseCount": "{num، plural, =0 {دون رد} one {تم إظهار ردّ واحد} two {تم إظهار ردّين} few {تم إظهار # ردود} many {تم إظهار # ردًا} other {تم إظهار # ردود}}",
+  "discussions.comments.comment.endorsedResponseCount": "{num، plural, =0 {لا ردود معتمدة} one {تم إظهار ردّ واحد معتمد} two {تم إظهار ردّين معتمدين} few {تم إظهار # ردود معتمدة} many {تم إظهار # ردًا معتمدًا} other {تم إظهار # ردود معتمدة}}",
+  "discussions.comments.comment.loadMoreComments": "تحميل المزيد من التعليقات",
+  "discussions.comments.comment.loadMoreResponses": "تحميل المزيد من الردود",
+  "discussions.comments.comment.visibility": "هذه المشاركة تظهر {group، select، null {للجميع} other {لـ {group}}.",
+  "discussions.comments.comment.postedTime": "تم نشر {postType، select، discussion {المناقشة} question {المنشور} other {{postType}} {relativeTime} من طرف",
+  "discussions.comments.comment.commentTime": "تم النشر {relativeTime}",
+  "discussions.comments.comment.answer": "الإجابة",
+  "discussions.comments.comment.answeredlabel": "تم تعليمها كمُجابة من طرف",
+  "discussions.comments.comment.endorsed": "معتمد",
+  "discussions.comments.comment.endorsedlabel": "اعتمده",
+  "discussions.actions.label": "قائمة الإجراءات",
+  "discussions.editor.submit": "إرسال",
+  "discussions.editor.submitting": "الإرسال جارٍ",
+  "discussions.editor.cancel": "إلغاء",
+  "discussions.editor.error.empty": "لا يمكن أن يكون محتوى المنشور فارغًا.",
+  "discussions.editor.delete.response.title": "حذف الرد",
+  "discussions.editor.delete.response.description": "هل أنت متأكد من رغبتك في حذف هذا الردّ نهائيًا؟",
+  "discussions.editor.delete.comment.title": "حذف التعليق",
+  "discussions.editor.delete.comment.description": "هل أنت متأكد من رغبتك في حذف هذا التعليق نهائيا؟",
+  "discussions.delete.confirmation.button.delete": "حذف",
+  "discussions.editor.response.response.title": "أتريد الإبلاغ عن محتوى غير لائق؟",
+  "discussions.editor.response.description": "سيراجع فريق الإشراف على المناقشة هذا المحتوى و يتخذ الإجراء المناسب.",
+  "discussions.editor.report.comment.title": "أتريد الإبلاغ عن محتوى غير لائق؟",
+  "discussions.editor.report.comment.description": "سيراجع فريق الإشراف على المناقشة هذا المحتوى ويتخذ الإجراء المناسب.",
+  "discussions.editor.comments.editReasonCode": "سبب التعديل",
+  "discussions.editor.posts.editReasonCode.error": "حدد سبب التعديل",
+  "discussions.comment.comments.editedBy": "عدّله",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "السبب",
+  "discussions.post.closedBy": "تم إقفال المنشور من طرف",
+  "discussion.comment.time": "منذ {time}",
+  "discussion.thread.notFound": "المناقشة غير موجودة",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "المناقشات",
   "discussions.posts.actionBar.searchAllPosts": "البحث في كافّة المنشورات",
   "discussions.posts.actionBar.search": "{page، select، topics {مواضيع البحث} posts {بحث في كل المشاركات} learners {بحث عن المتعلمين} myPosts} {بحث في كل المشاركات",
@@ -141,7 +142,7 @@
   "discussions.post.editor.anonymousPost": "النشر كمجهول",
   "discussions.post.editor.anonymousToPeersPost": "انشر ﻷقرانك كمجهول",
   "discussions.editor.posts.editReasonCode": "سبب التعديل",
-  "discussions.editor.posts.showPreview.button": "عرض المعاينة",
+  "discussions.editor.posts.showPreview.button": "Show preview",
   "discussions.topic.noName.label": "تصنيف دون اسم",
   "discussions.subtopic.noName.label": "تصنيف فرعي دون اسم",
   "discussions.posts.filter.showALl": "عرض الكل",
@@ -163,6 +164,7 @@
   "discussions.posts.sort.voteCount": "الأكثر إعجابًا",
   "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {جميع}\n      true {ما كتبته من}\n      other {{own}}\n   } \n {type, select,\ndiscussion {المناقشات}\nquestion {الأسئلة}\nall {المنشورات}\nother {{type}}\n}\n {status, select,\n      statusAll {}\n      statusUnread {غير المقروءة}\n      statusFollowing {التي تتابعها}\n      statusReported {المُبلّغ عنها}\n      statusUnanswered {دون إجابة}\n      statusUnresponded {دون رد}\n      other {{status}}\n    } و المنشورة {cohortType, select,\n        all {}\n        group {ضمن {cohort}}\n        other {{cohortType}}\n    }، مرتبة حسب {sort, select,\n      lastActivityAt {أحدث نشاط}\n      commentCount {أكثر نشاط}\n      voteCount {أكثر إعجاب}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "مجهول",
+  "discussions.post.addResponse": "Add response",
   "discussions.post.lastResponse": "آخر رد {time}",
   "discussions.post.postedOn": "منشور في {time} من طرف {author} {authorLabel}",
   "discussions.post.contentReported": "تم الإبلاغ",

src/i18n/messages/de_DE.json

@@ -1,210 +1,212 @@
 {
-  "navigation.course.tabs.label": "Course Material",
-  "learn.course.tabs.navigation.overflow.menu": "More...",
-  "discussions.comments.comment.addResponse": "Add a response",
-  "discussions.comments.comment.addComment": "Add a comment",
-  "discussions.comments.comment.abuseFlaggedMessage": "Content reported for staff to review",
-  "discussions.actions.back.alt": "Back to list",
-  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
-  "discussions.comments.comment.loadMoreComments": "Load more comments",
-  "discussions.comments.comment.loadMoreResponses": "Load more responses",
-  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
-  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
-  "discussions.comments.comment.commentTime": "Posted {relativeTime}",
-  "discussions.comments.comment.answer": "Answer",
-  "discussions.comments.comment.answeredlabel": "Marked as answered by",
-  "discussions.comments.comment.endorsed": "Endorsed",
-  "discussions.comments.comment.endorsedlabel": "Endorsed by",
-  "discussions.actions.label": "Actions menu",
-  "discussions.actions.edit": "Edit",
-  "discussions.actions.pin": "Pin",
-  "discussions.actions.delete": "Delete",
-  "discussions.editor.submit": "Submit",
-  "discussions.editor.submitting": "Submitting",
-  "discussions.editor.cancel": "Cancel",
-  "discussions.editor.error.empty": "Post content cannot be empty.",
-  "discussions.editor.delete.response.title": "Delete response",
-  "discussions.editor.delete.response.description": "Are you sure you want to permanently delete this response?",
-  "discussions.editor.delete.comment.title": "Delete comment",
-  "discussions.editor.delete.comment.description": "Are you sure you want to permanently delete this comment?",
-  "discussions.delete.confirmation.button.delete": "Delete",
-  "discussions.editor.response.response.title": "Report inappropriate content?",
-  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.report.comment.title": "Report inappropriate content?",
-  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.comments.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.editReasonCode.error": "Select reason for editing",
-  "discussions.comment.comments.editedBy": "Edited by",
-  "discussions.comment.comments.reason": "Reason",
-  "discussions.post.closedBy": "Post closed by",
-  "discussion.comment.repliesHeading": "{count} replies for the response added",
-  "discussion.comment.time": "{time} ago",
-  "discussion.thread.notFound": "Thread not found",
-  "discussions.topics.backAlt": "Back to topics list",
-  "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
-  "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
-  "discussions.topics.reported": "{reported} reported",
-  "discussions.topics.previouslyReported": "{previouslyReported} previously reported",
-  "discussions.topics.find.label": "Search topics",
-  "discussions.topics.unnamed.section.label": "Unnamed Section",
-  "discussions.topics.unnamed.subsection.label": "Unnamed Subsection",
-  "discussions.subtopics.unnamed.topic.label": "Unnamed Topic",
-  "discussions.topics.title": "No topic exists",
-  "discussions.topics.createTopic": "Please contact you admin to create a topic",
-  "discussions.topics.nothing": "Nothing here yet",
-  "discussions.topics.archived.label": "Archived",
-  "discussions.learner.reported": "{reported} reported",
-  "discussions.learner.previouslyReported": "{previouslyReported} previously reported",
-  "discussions.learner.lastLogin": "Last active {lastActiveTime}",
-  "discussions.learner.loadMostLearners": "Load more",
-  "discussions.learner.back": "Back",
-  "discussions.learner.activityForLearner": "Activity for {username}",
-  "discussions.learner.mostActivity": "Most activity",
-  "discussions.learner.reportedActivity": "Reported activity",
-  "discussions.learner.recentActivity": "Recent activity",
-  "discussions.learner.sortFilterStatus": "All learners sorted by {sort, select,\n      flagged {reported activity}\n      activity {most activity}\n      other {{sort}}\n    }",
-  "discussion.learner.allActivity": "All activity",
-  "discussion.learner.posts": "Posts",
-  "discussions.actions.button.alt": "Actions menu",
-  "discussions.actions.copylink": "Copy link",
-  "discussions.actions.unpin": "Unpin",
-  "discussions.confirmation.button.confirm": "Confirm",
-  "discussions.actions.close": "Close",
-  "discussions.actions.reopen": "Reopen",
-  "discussions.actions.report": "Report",
-  "discussions.actions.unreport": "Unreport",
-  "discussions.actions.endorse": "Endorse",
-  "discussions.actions.unendorse": "Unendorse",
-  "discussions.actions.markAnswered": "Mark as answered",
-  "discussions.actions.unMarkAnswered": "Unmark as answered",
-  "discussions.modal.confirmation.button.cancel": "Cancel",
-  "discussions.empty.allTopics": "All discussion activity for these topics will show up here.",
-  "discussions.empty.allPosts": "All discussion activity for your course will show up here.",
-  "discussions.empty.myPosts": "Posts you've interacted with will show up here.",
-  "discussions.empty.topic": "All discussion activity for this topic will show up here.",
-  "discussions.empty.title": "Nothing here yet",
-  "discussions.empty.noPostSelected": "No post selected",
-  "discussions.empty.noTopicSelected": "No topic selected",
-  "discussions.sidebar.noResultsFound": "No results found",
-  "discussions.sidebar.differentKeywords": "Try searching different keywords",
-  "discussions.sidebar.removeKeywords": "Try searching different keywords or removing some filters",
-  "discussions.sidebar.removeKeywordsOnly": "Try searching different keywords",
-  "discussions.sidebar.removeFilters": "Try removing some filters",
-  "discussions.empty.iconAlt": "Empty",
-  "discussions.authors.label.staff": "Staff",
+  "navigation.course.tabs.label": "Kursmaterial",
+  "learn.course.tabs.navigation.overflow.menu": "Mehr...",
+  "discussions.topics.backAlt": "Zurück zur Themenliste",
+  "discussions.topics.discussions": "{count, plural, =0 {Diskussion} one {# Diskussion} other {# Diskussionen} }",
+  "discussions.topics.questions": "{count, plural, =0 {Frage} one {# Frage} other {# Fragen} }",
+  "discussions.topics.reported": "{reported} gemeldet",
+  "discussions.topics.previouslyReported": "{previouslyReported} zuvor gemeldet",
+  "discussions.topics.find.label": "Themen suchen",
+  "discussions.topics.unnamed.section.label": "Unbenannter Abschnitt",
+  "discussions.topics.unnamed.subsection.label": "Unbenannter Unterabschnitt",
+  "discussions.subtopics.unnamed.topic.label": "Unbenanntes Thema",
+  "discussions.topics.title": "Kein Thema vorhanden",
+  "discussions.topics.createTopic": "Bitte kontaktieren Sie Ihren Administrator, um ein Thema zu erstellen",
+  "discussions.topics.nothing": "Hier noch nichts",
+  "discussions.topics.archived.label": "Archiviert",
+  "discussions.learner.reported": "{reported} gemeldet",
+  "discussions.learner.previouslyReported": "{previouslyReported} zuvor gemeldet",
+  "discussions.learner.lastLogin": "Zuletzt aktiv {lastActiveTime}",
+  "discussions.learner.loadMostLearners": "Lade weiteres",
+  "discussions.learner.back": "Zurück",
+  "discussions.learner.activityForLearner": "Aktivität für {username}",
+  "discussions.learner.mostActivity": "Die meisten Aktivitäten",
+  "discussions.learner.reportedActivity": "Gemeldete Aktivität",
+  "discussions.learner.recentActivity": "Letzte Aktivität",
+  "discussions.learner.sortFilterStatus": "Alle Lernenden sortiert nach {sort, select, flagged {gemeldete Aktivität} activity {höchste Aktivität} other {{sort}} }",
+  "discussion.learner.allActivity": "Alle Aktivitäten",
+  "discussion.learner.posts": "Beiträge",
+  "discussions.actions.button.alt": "Aktionsmenü",
+  "discussions.actions.copylink": "Link kopieren",
+  "discussions.actions.edit": "Bearbeiten",
+  "discussions.actions.pin": "Veröffentlichen",
+  "discussions.actions.unpin": "Ablösen",
+  "discussions.actions.delete": "Löschen",
+  "discussions.confirmation.button.confirm": "Bestätigen",
+  "discussions.actions.close": "Schließen",
+  "discussions.actions.reopen": "Wieder öffnen",
+  "discussions.actions.report": "Melden",
+  "discussions.actions.unreport": "Meldung aufheben",
+  "discussions.actions.endorse": "Befürworten",
+  "discussions.actions.unendorse": "Nicht Befürworten",
+  "discussions.actions.markAnswered": "Als beantwortet markieren",
+  "discussions.actions.unMarkAnswered": "Markierung als beantwortet aufheben",
+  "discussions.modal.confirmation.button.cancel": "Löschen",
+  "discussions.empty.allTopics": "Alle Diskussionsaktivitäten zu diesen Themen werden hier angezeigt.",
+  "discussions.empty.allPosts": "Alle Diskussionsaktivitäten für Ihren Kurs werden hier angezeigt.",
+  "discussions.empty.myPosts": "Beiträge, mit denen Sie interagiert haben, werden hier angezeigt.",
+  "discussions.empty.topic": "Alle Diskussionsaktivitäten zu diesem Thema werden hier angezeigt.",
+  "discussions.empty.title": "Hier noch nichts",
+  "discussions.empty.noPostSelected": "Kein Beitrag ausgewählt",
+  "discussions.empty.noTopicSelected": "Kein Thema ausgewählt",
+  "discussions.sidebar.noResultsFound": "Keine Ergebnisse gefunden",
+  "discussions.sidebar.differentKeywords": "Versuchen Sie, nach anderen Schlüsselwörtern zu suchen",
+  "discussions.sidebar.removeKeywords": "Versuchen Sie, nach anderen Schlüsselwörtern zu suchen oder einige Filter zu entfernen",
+  "discussions.sidebar.removeKeywordsOnly": "Versuchen Sie, nach anderen Schlüsselwörtern zu suchen",
+  "discussions.sidebar.removeFilters": "Versuchen Sie, einige Filter zu entfernen",
+  "discussions.empty.iconAlt": "Leer",
+  "discussions.authors.label.staff": "Betreuung",
   "discussions.authors.label.ta": "TA",
-  "discussions.learner.loadMostPosts": "Load more posts",
-  "discussions.post.anonymous.author": "anonymous",
-  "discussion.banner.welcomeMessage": "🎉 Welcome to the new and improved discussions experience!",
-  "discussion.banner.learnMore": "Learn more",
-  "discussion.banner.shareFeedback": "Share feedback",
-  "discussion.blackoutBanner.information": "Posting in discussions is temporarily disabled by the course team",
-  "discussions.editor.image.warning.message": "Images having width or height greater than 999px will not be visible when the post, response or comment is viewed using in-line course discussions",
-  "discussions.editor.image.warning.title": "Warning!",
+  "discussions.learner.loadMostPosts": "Mehr Beiträge laden",
+  "discussions.post.anonymous.author": "Anonym",
+  "discussion.banner.welcomeMessage": "🎉 Willkommen beim neuen und verbesserten Diskussionserlebnis!",
+  "discussion.banner.learnMore": "Lernen Sie mehr",
+  "discussion.banner.shareFeedback": "Feedback teilen",
+  "discussion.blackoutBanner.information": "Das Posten in Diskussionen wird vom Kursteam vorübergehend deaktiviert",
+  "discussions.editor.image.warning.message": "Bilder mit einer Breite oder Höhe von mehr als 999 Pixel sind nicht sichtbar, wenn der Beitrag, die Antwort oder der Kommentar über Inline-Kursdiskussionen angezeigt werden",
+  "discussions.editor.image.warning.title": "Warnung!",
   "discussions.editor.image.warning.dismiss": "Ok",
-  "discussions.navigation.breadcrumbMenu.allTopics": "Topics",
-  "discussions.navigation.breadcrumbMenu.showAll": "Show all",
-  "discussions.navigation.navigationBar.allPosts": "All posts",
-  "discussions.navigation.navigationBar.allTopics": "Topics",
-  "discussions.navigation.navigationBar.myPosts": "My posts",
-  "discussions.navigation.navigationBar.learners": "Learners",
-  "discussions.app.title": "Discussions",
-  "discussions.posts.actionBar.searchAllPosts": "Search all posts",
-  "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
-  "discussions.actionBar.searchInfo": "Showing {count} results for \"{text}\"",
-  "discussions.actionBar.searchRewriteInfo": "No results found for \"{searchString}\". Showing {count} results for \"{textSearchRewrite}\".",
-  "discussions.actionBar.searchInfoSearching": "Searching...",
-  "discussions.actionBar.clearSearch": "Clear results",
-  "discussion.posts.actionBar.add": "Add a post",
-  "discussion.posts.actionBar.close": "Close",
-  "discussions.post.editor.type": "Post type",
-  "discussions.post.editor.addPostHeading": "Add a post",
-  "discussions.post.editor.editPostHeading": "Edit post",
-  "discussions.post.editor.typeDescription": "Questions raise issues that need answers. Discussions share ideas and start conversations.",
-  "discussions.post.editor.required": "Required",
-  "discussions.post.editor.questionType": "Question",
-  "discussions.post.editor.questionDescription": "Raise issues that need answers",
-  "discussions.post.editor.discussionType": "Discussion",
-  "discussions.post.editor.discussionDescription": "Share ideas and start conversations",
-  "discussions.post.editor.topicArea": "Topic area",
-  "discussions.post.editor.topicAreaDescription": "Add your post to a relevant topic to help others find it.",
-  "discussions.post.editor.cohortVisibility": "Cohort visibility",
-  "discussions.post.editor.cohortVisibilityAllLearners": "All learners",
-  "discussions.post.editor.title": "Post title",
-  "discussions.post.editor.titleDescription": "Add a clear and descriptive title to encourage participation.",
-  "discussions.post.editor.title.error": "Post title cannot be empty.",
-  "discussions.post.editor.content.error": "Post content cannot be empty.",
-  "discussions.post.editor.questionText": "Your question or idea (required)",
-  "discussions.post.editor.preview": "Preview",
-  "discussions.post.editor.followPost": "Follow this post",
-  "discussions.post.editor.anonymousPost": "Post anonymously",
-  "discussions.post.editor.anonymousToPeersPost": "Post anonymously to peers",
-  "discussions.editor.posts.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.showPreview.button": "Show Preview",
-  "discussions.topic.noName.label": "Unnamed category",
-  "discussions.subtopic.noName.label": "Unnamed subcategory",
-  "discussions.posts.filter.showALl": "Show all",
-  "discussions.posts.filter.discussions": "Discussions",
-  "discussions.posts.filter.questions": "Questions",
+  "discussions.navigation.breadcrumbMenu.allTopics": "Themen",
+  "discussions.navigation.breadcrumbMenu.showAll": "Alles anzeigen",
+  "discussions.navigation.navigationBar.allPosts": "Alle Artikel",
+  "discussions.navigation.navigationBar.allTopics": "Themen",
+  "discussions.navigation.navigationBar.myPosts": "Meine Posts",
+  "discussions.navigation.navigationBar.learners": "Lernende",
+  "discussions.comments.comment.addComment": "Kommentar hinzufügen",
+  "discussions.comments.comment.addResponse": "Fügen Sie eine Antwort hinzu",
+  "discussions.comments.comment.abuseFlaggedMessage": "Inhalte, die den Kursmitarbeitern zur Überprüfung gemeldet wurden",
+  "discussions.actions.back.alt": "Zurück zur Liste",
+  "discussions.comments.comment.responseCount": "{num, plural, =0 {Keine Antworten} one {# Antwort wird angezeigt} other {# Antworten werden angezeigt} }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural, =0 {Keine empfohlenen Antworten} one {# empfohlene Antworten werden angezeigt} other {# empfohlene Antworten werden angezeigt} }",
+  "discussions.comments.comment.loadMoreComments": "Weitere Kommentare laden",
+  "discussions.comments.comment.loadMoreResponses": "Weitere Antworten laden",
+  "discussions.comments.comment.visibility": "Dieser Beitrag ist sichtbar für {group, select, null {Jeder} other {{group}} }.",
+  "discussions.comments.comment.postedTime": "{postType, select, discussion {Diskussion} question {Frage} other {{postType}} } gepostet {a0917e9bee14} von.c5z0",
+  "discussions.comments.comment.commentTime": "Gepostet {relativeTime}",
+  "discussions.comments.comment.answer": "Antwort",
+  "discussions.comments.comment.answeredlabel": "Als beantwortet von markiert",
+  "discussions.comments.comment.endorsed": "Bestätigt",
+  "discussions.comments.comment.endorsedlabel": "Bestätigt von",
+  "discussions.actions.label": "Aktionsmenü",
+  "discussions.editor.submit": "Einreichen",
+  "discussions.editor.submitting": "Übermitteln, einreichen",
+  "discussions.editor.cancel": "Löschen",
+  "discussions.editor.error.empty": "Der Beitragsinhalt darf nicht leer sein.",
+  "discussions.editor.delete.response.title": "Antwort löschen",
+  "discussions.editor.delete.response.description": "Möchten Sie diese Antwort wirklich dauerhaft löschen?",
+  "discussions.editor.delete.comment.title": "Kommentar löschen",
+  "discussions.editor.delete.comment.description": "Möchten Sie diesen Kommentar wirklich dauerhaft löschen?",
+  "discussions.delete.confirmation.button.delete": "Löschen",
+  "discussions.editor.response.response.title": "Unangemessene Inhalte melden?",
+  "discussions.editor.response.description": "Das Diskussionsmoderationsteam überprüft diesen Inhalt und ergreift entsprechende Maßnahmen.",
+  "discussions.editor.report.comment.title": "Unangemessene Inhalte melden?",
+  "discussions.editor.report.comment.description": "Das Diskussionsmoderationsteam überprüft diesen Inhalt und ergreift entsprechende Maßnahmen.",
+  "discussions.editor.comments.editReasonCode": "Grund für die Bearbeitung",
+  "discussions.editor.posts.editReasonCode.error": "Grund für die Bearbeitung auswählen",
+  "discussions.comment.comments.editedBy": "Bearbeitet von",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Grund",
+  "discussions.post.closedBy": "Post geschlossen von",
+  "discussion.comment.time": "{time} vor",
+  "discussion.thread.notFound": "Thema nicht gefunden",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
+  "discussions.app.title": "Diskussionen",
+  "discussions.posts.actionBar.searchAllPosts": "Einträge durchsuchen",
+  "discussions.posts.actionBar.search": "{page, select, topics {Suchthemen} posts {Alle Beiträge durchsuchen} learners {Lernende suchen} myPosts {Alle Beiträge durchsuchen} a00a14c5d87{d9fz}09 {d9fz}09 {d9fz}09 {d9fz}",
+  "discussions.actionBar.searchInfo": "{count} Ergebnisse für "{text}" werden angezeigt",
+  "discussions.actionBar.searchRewriteInfo": "Keine Ergebnisse gefunden für "{searchString}". {count} Ergebnisse für "{textSearchRewrite}" werden angezeigt.",
+  "discussions.actionBar.searchInfoSearching": "Suche...",
+  "discussions.actionBar.clearSearch": "Klare Ergebnisse",
+  "discussion.posts.actionBar.add": "Fügen Sie einen Beitrag hinzu",
+  "discussion.posts.actionBar.close": "Schließen",
+  "discussions.post.editor.type": "Beitragsart",
+  "discussions.post.editor.addPostHeading": "Fügen Sie einen Beitrag hinzu",
+  "discussions.post.editor.editPostHeading": "Beitrag bearbeiten",
+  "discussions.post.editor.typeDescription": "Wenn Sie eine konkrete Antwort für ein Problem suchen, stellen Sie eine Frage. Um sich mit anderen Nutzern über ein Thema auszutauschen und Ideen zu teilen, nutzen Sie die Diskussion. ",
+  "discussions.post.editor.required": "Erforderlich",
+  "discussions.post.editor.questionType": "Frage",
+  "discussions.post.editor.questionDescription": "Sprechen Sie Probleme an, die Antworten erfordern",
+  "discussions.post.editor.discussionType": "Diskussion",
+  "discussions.post.editor.discussionDescription": "Teilen Sie Ideen und beginnen Sie Gespräche",
+  "discussions.post.editor.topicArea": "Themenbereich",
+  "discussions.post.editor.topicAreaDescription": "Fügen Sie Ihren Beitrag zu einem entsprechenden Thema hinzu, um andern das Auffinden zu erleichtern.",
+  "discussions.post.editor.cohortVisibility": "Kohortensichtbarkeit",
+  "discussions.post.editor.cohortVisibilityAllLearners": "Alle Teilnehmer",
+  "discussions.post.editor.title": "Titel des Beitrags",
+  "discussions.post.editor.titleDescription": "Um zur Teilnahme zu motivieren, fügen Sie bitte einen klaren und beschreibenden Titel hinzu.",
+  "discussions.post.editor.title.error": "Beitragstitel darf nicht leer sein.",
+  "discussions.post.editor.content.error": "Der Beitragsinhalt darf nicht leer sein.",
+  "discussions.post.editor.questionText": "Ihre Frage oder Idee (*)",
+  "discussions.post.editor.preview": "Vorschau",
+  "discussions.post.editor.followPost": "Diesem Eintrag folgen",
+  "discussions.post.editor.anonymousPost": "Anonym posten",
+  "discussions.post.editor.anonymousToPeersPost": "Posten Sie anonym an Kollegen",
+  "discussions.editor.posts.editReasonCode": "Bearbeitungsgrund",
+  "discussions.editor.posts.showPreview.button": "Vorschau zeigen",
+  "discussions.topic.noName.label": "Unbenannte Kategorie",
+  "discussions.subtopic.noName.label": "Unbenannte Unterkategorie",
+  "discussions.posts.filter.showALl": "Alles anzeigen",
+  "discussions.posts.filter.discussions": "Diskussionen",
+  "discussions.posts.filter.questions": "Fragen",
   "discussions.posts.filter.message": "Status: {filterBy}",
-  "discussions.posts.status.filter.anyStatus": "Any status",
-  "discussions.posts.status.filter.unread": "Unread",
-  "discussions.posts.status.filter.following": "Following",
-  "discussions.posts.status.filter.reported": "Reported",
-  "discussions.posts.status.filter.unanswered": "Unanswered",
-  "discussions.posts.status.filter.unresponded": "Not responded",
-  "discussions.posts.filter.myPosts": "My posts",
-  "discussions.posts.filter.myDiscussions": "My discussions",
-  "discussions.posts.filter.myQuestions": "My questions",
-  "discussions.posts.sort.message": "Sorted by {sortBy}",
-  "discussions.posts.sort.lastActivity": "Recent activity",
-  "discussions.posts.sort.commentCount": "Most activity",
-  "discussions.posts.sort.voteCount": "Most likes",
-  "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
-  "discussions.post.author.anonymous": "anonymous",
-  "discussions.post.lastResponse": "Last response {time}",
-  "discussions.post.postedOn": "Posted {time} by {author} {authorLabel}",
-  "discussions.post.contentReported": "Reported",
-  "discussions.post.following": "Following",
-  "discussions.post.follow": "Follow",
-  "discussions.post.followed": "Followed",
-  "discussions.post.notFollowed": "Not Followed",
-  "discussions.post.answered": "Answered",
-  "discussions.post.unFollow": "Unfollow",
-  "discussions.post.like": "Like",
-  "discussions.post.removeLike": "Unlike",
-  "discussions.post.liked": "liked",
-  "discussions.post.likes": "likes",
-  "discussions.post.viewActivity": "View activity",
-  "discussions.post.activity": "Activity",
-  "discussions.post.closed": "Post closed for responses and comments",
-  "discussions.post.relatedTo": "Related to",
-  "discussions.editor.delete.post.title": "Delete post",
-  "discussions.editor.delete.post.description": "Are you sure you want to permanently delete this post?",
-  "discussions.post.delete.confirmation.button.delete": "Delete",
-  "discussions.editor.report.post.title": "Report inappropriate content?",
-  "discussions.editor.report.post.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.post.closePostModal.title": "Close post",
-  "discussions.post.closePostModal.text": "Enter a reason for closing this post. This will only be displayed to other moderators.",
-  "discussions.post.closePostModal.reasonCodeInput": "Reason",
-  "discussions.post.closePostModal.cancel": "Cancel",
-  "discussions.post.closePostModal.confirm": "Close post",
-  "discussions.post.label.new": "{count} New",
-  "discussions.post.editedBy": "Edited by",
-  "discussions.post.editReason": "Reason",
-  "discussions.post.postWithoutPreview": "No preview available",
-  "discussions.post.follow.description": "you are following this post",
-  "discussions.post.unfollow.description": "you are not following this post",
-  "discussions.topics.sort.message": "Sorted by {sortBy}",
-  "discussions.topics.sort.lastActivity": "Recent activity",
-  "discussions.topics.sort.commentCount": "Most activity",
-  "discussions.topics.sort.courseStructure": "Course Structure",
-  "discussions.topics.unnamed.label": "Unnamed category",
-  "discussions.subtopics.unnamed.label": "Unnamed subcategory",
-  "tour.action.advance": "Next",
-  "tour.action.dismiss": "Dismiss",
-  "tour.action.end": "Okay",
-  "tour.body.notRespondedFilter": "Now you can filter discussions to find posts with no response.",
-  "tour.title.notRespondedFilter": "New filtering option!"
+  "discussions.posts.status.filter.anyStatus": "Jeder Status",
+  "discussions.posts.status.filter.unread": "Ungelesen",
+  "discussions.posts.status.filter.following": "Folge",
+  "discussions.posts.status.filter.reported": "Gemeldet",
+  "discussions.posts.status.filter.unanswered": "Unbeantwortet",
+  "discussions.posts.status.filter.unresponded": "Nicht geantwortet",
+  "discussions.posts.filter.myPosts": "Meine Posts",
+  "discussions.posts.filter.myDiscussions": "Meine Diskussionen",
+  "discussions.posts.filter.myQuestions": "Meine Fragen",
+  "discussions.posts.sort.message": "Sortiert nach {sortBy}",
+  "discussions.posts.sort.lastActivity": "Letzte Aktivität",
+  "discussions.posts.sort.commentCount": "Die meisten Aktivitäten",
+  "discussions.posts.sort.voteCount": "Die meisten Likes",
+  "discussions.posts.sort-filter.sortFilterStatus": "{own, select, false {All} true {Own} other {{own}} } {status, select, statusAll {} statusUnread {unread} statusFollowing {followed} statusReported {reported} statusUnanswered {unanswered} statusUnresponded {unresponded} other { {status}} } {type, select, discussion {discussions} question {questions} all {posts} other {{type}} } {cohortType, select, all {} group {in {cohort}} other {{cohortType}} } sortiert nach {sort, select, lastActivityAt {neueste Aktivität} commentCount {meiste Aktivität} voteCount {meiste Likes} other {{a0fc8413bba} 10cz",
+  "discussions.post.author.anonymous": "Anonym",
+  "discussions.post.addResponse": "Antwort hinzufügen",
+  "discussions.post.lastResponse": "Letzte Antwort {time}",
+  "discussions.post.postedOn": "Gepostet {time} von {author} {authorLabel}",
+  "discussions.post.contentReported": "Gemeldet",
+  "discussions.post.following": "Folge",
+  "discussions.post.follow": "Folgen",
+  "discussions.post.followed": "Gefolgt",
+  "discussions.post.notFollowed": "Nicht gefolgt",
+  "discussions.post.answered": "Beantwortet",
+  "discussions.post.unFollow": "Verlassen",
+  "discussions.post.like": "Wie",
+  "discussions.post.removeLike": "nicht wie",
+  "discussions.post.liked": "gefallen",
+  "discussions.post.likes": "Likes",
+  "discussions.post.viewActivity": "Aktivität anzeigen",
+  "discussions.post.activity": "Aktivität",
+  "discussions.post.closed": "Beitrag für Antworten und Kommentare geschlossen",
+  "discussions.post.relatedTo": "Im Zusammenhang mit",
+  "discussions.editor.delete.post.title": "Beitrag entfernen",
+  "discussions.editor.delete.post.description": "Möchten Sie diesen Beitrag wirklich dauerhaft löschen?",
+  "discussions.post.delete.confirmation.button.delete": "Löschen",
+  "discussions.editor.report.post.title": "Unangemessene Inhalte melden?",
+  "discussions.editor.report.post.description": "Das Diskussionsmoderationsteam überprüft diesen Inhalt und ergreift entsprechende Maßnahmen.",
+  "discussions.post.closePostModal.title": "Beitrag schließen",
+  "discussions.post.closePostModal.text": "Geben Sie einen Grund für das Schließen dieses Beitrags ein. Dies wird nur anderen Moderatoren angezeigt.",
+  "discussions.post.closePostModal.reasonCodeInput": "Grund",
+  "discussions.post.closePostModal.cancel": "Löschen",
+  "discussions.post.closePostModal.confirm": "Beitrag schließen",
+  "discussions.post.label.new": "{count} Neu",
+  "discussions.post.editedBy": "Bearbeitet von",
+  "discussions.post.editReason": "Grund",
+  "discussions.post.postWithoutPreview": "Keine Vorschau vorhanden",
+  "discussions.post.follow.description": "Sie folgen diesem Beitrag",
+  "discussions.post.unfollow.description": "Sie folgen diesem Beitrag nicht",
+  "discussions.topics.sort.message": "Sortiert nach {sortBy}",
+  "discussions.topics.sort.lastActivity": "Letzte Aktivität",
+  "discussions.topics.sort.commentCount": "Die meisten Aktivitäten",
+  "discussions.topics.sort.courseStructure": "Kursstruktur",
+  "discussions.topics.unnamed.label": "Unbenannte Kategorie",
+  "discussions.subtopics.unnamed.label": "Unbenannte Unterkategorie",
+  "tour.action.advance": "Weiter",
+  "tour.action.dismiss": "Abgewiesen",
+  "tour.action.end": "okay",
+  "tour.body.notRespondedFilter": "Jetzt können Sie Diskussionen filtern, um Beiträge ohne Antwort zu finden.",
+  "tour.title.notRespondedFilter": "Neue Filteroption!"
 }

src/i18n/messages/es_419.json

@@ -1,58 +1,18 @@
 {
   "navigation.course.tabs.label": "Material del Curso",
   "learn.course.tabs.navigation.overflow.menu": "Más...",
-  "discussions.comments.comment.addResponse": "Agregar una respuesta",
-  "discussions.comments.comment.addComment": "Agregar un comentario",
-  "discussions.comments.comment.abuseFlaggedMessage": "Contenido informado para que el personal lo revise",
-  "discussions.actions.back.alt": "Back to list",
-  "discussions.comments.comment.responseCount": "{num, plural, =0 {No responses} one {Showing # response} other {Showing # responses} }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural, =0 {Sin respuestas respaldadas} one {Mostrando # respuesta respaldada} other {Mostrando # respuestas respaldadas} }",
-  "discussions.comments.comment.loadMoreComments": "Cargar más comentarios",
-  "discussions.comments.comment.loadMoreResponses": "Cargar más respuestas",
-  "discussions.comments.comment.visibility": "Esta publicación es visible para {group, select, null {Everyone} other {{group}} }.",
-  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } publicado {relativeTime} por",
-  "discussions.comments.comment.commentTime": "Publicado {relativeTime}",
-  "discussions.comments.comment.answer": "Respuesta",
-  "discussions.comments.comment.answeredlabel": "Marcado como respondido por",
-  "discussions.comments.comment.endorsed": "respaldado",
-  "discussions.comments.comment.endorsedlabel": "Avalado por",
-  "discussions.actions.label": "Menú de acciones",
-  "discussions.actions.edit": "Editar",
-  "discussions.actions.pin": "Marcar",
-  "discussions.actions.delete": "Borrar",
-  "discussions.editor.submit": "Enviar",
-  "discussions.editor.submitting": "Enviando",
-  "discussions.editor.cancel": "Cancelar",
-  "discussions.editor.error.empty": "El contenido de la publicación no puede estar vacío.",
-  "discussions.editor.delete.response.title": "Eliminar respuesta",
-  "discussions.editor.delete.response.description": "¿Está seguro de que desea eliminar esta respuesta de forma permanente?",
-  "discussions.editor.delete.comment.title": "Eliminar comentario",
-  "discussions.editor.delete.comment.description": "¿Estás seguro de que quieres eliminar este comentario de forma permanente?",
-  "discussions.delete.confirmation.button.delete": "Borrar",
-  "discussions.editor.response.response.title": "Report inappropriate content?",
-  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.report.comment.title": "Report inappropriate content?",
-  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.comments.editReasonCode": "Razón de la edición",
-  "discussions.editor.posts.editReasonCode.error": "Seleccione el motivo de la edición",
-  "discussions.comment.comments.editedBy": "Editado por",
-  "discussions.comment.comments.reason": "Motivo",
-  "discussions.post.closedBy": "Publicación cerrada por",
-  "discussion.comment.repliesHeading": "{count} respuestas para la respuesta añadida",
-  "discussion.comment.time": "hace {time}",
-  "discussion.thread.notFound": "Thread not found",
-  "discussions.topics.backAlt": "Back to topics list",
+  "discussions.topics.backAlt": "Volver a la lista de temas",
   "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
   "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
   "discussions.topics.reported": "{reported} informado",
   "discussions.topics.previouslyReported": "{previouslyReported} informado anteriormente",
   "discussions.topics.find.label": "Buscar temas",
-  "discussions.topics.unnamed.section.label": "Unnamed Section",
-  "discussions.topics.unnamed.subsection.label": "Unnamed Subsection",
-  "discussions.subtopics.unnamed.topic.label": "Unnamed Topic",
-  "discussions.topics.title": "No topic exists",
-  "discussions.topics.createTopic": "Please contact you admin to create a topic",
-  "discussions.topics.nothing": "Nothing here yet",
+  "discussions.topics.unnamed.section.label": "Sección sin nombre",
+  "discussions.topics.unnamed.subsection.label": "Subsección sin nombre",
+  "discussions.subtopics.unnamed.topic.label": "Tema sin nombre",
+  "discussions.topics.title": "No existe ningún tema",
+  "discussions.topics.createTopic": "Póngase en contacto con su administrador para crear un tema",
+  "discussions.topics.nothing": "Nada aquí todavía",
   "discussions.topics.archived.label": "Archivado",
   "discussions.learner.reported": "{reported} informado",
   "discussions.learner.previouslyReported": "{previouslyReported} informado anteriormente",
@@ -62,23 +22,26 @@
   "discussions.learner.activityForLearner": "Actividad para {username}",
   "discussions.learner.mostActivity": "La mayoría de la actividad",
   "discussions.learner.reportedActivity": "Actividad reportada",
-  "discussions.learner.recentActivity": "Recent activity",
-  "discussions.learner.sortFilterStatus": "All learners sorted by {sort, select,\n      flagged {reported activity}\n      activity {most activity}\n      other {{sort}}\n    }",
+  "discussions.learner.recentActivity": "Actividad reciente",
+  "discussions.learner.sortFilterStatus": "Todos los alumnos ordenados por {sort, select, flagged {actividad notificada} activity {mayor actividad} other {{sort}} }",
   "discussion.learner.allActivity": "Toda la actividad",
   "discussion.learner.posts": "Publicaciones",
   "discussions.actions.button.alt": "Menú de acciones",
   "discussions.actions.copylink": "Copiar link",
+  "discussions.actions.edit": "Editar",
+  "discussions.actions.pin": "Marcar",
   "discussions.actions.unpin": "Desmarcar",
-  "discussions.confirmation.button.confirm": "Confirm",
+  "discussions.actions.delete": "Borrar",
+  "discussions.confirmation.button.confirm": "Confirmar",
   "discussions.actions.close": "Cerrar",
   "discussions.actions.reopen": "Reabrir",
   "discussions.actions.report": "Informar",
   "discussions.actions.unreport": "Dejar de denunciar",
   "discussions.actions.endorse": "Validar",
   "discussions.actions.unendorse": "Invalidar",
-  "discussions.actions.markAnswered": "Mark as answered",
+  "discussions.actions.markAnswered": "Marcar como respondida",
   "discussions.actions.unMarkAnswered": "Desmarcar como respondida",
-  "discussions.modal.confirmation.button.cancel": "Cancel",
+  "discussions.modal.confirmation.button.cancel": "Cancelar",
   "discussions.empty.allTopics": "Toda la actividad de debate de estos temas se mostrará aquí.",
   "discussions.empty.allPosts": "Toda la actividad de debate de su curso se mostrará aquí.",
   "discussions.empty.myPosts": "Las publicaciones con las que has interactuado se mostrarán aquí.",
@@ -99,16 +62,54 @@
   "discussion.banner.welcomeMessage": "🎉 ¡Bienvenido a la nueva y mejorada experiencia de debates!",
   "discussion.banner.learnMore": "Aprender más",
   "discussion.banner.shareFeedback": "Compartir comentarios",
-  "discussion.blackoutBanner.information": "Posting in discussions is temporarily disabled by the course team",
-  "discussions.editor.image.warning.message": "Images having width or height greater than 999px will not be visible when the post, response or comment is viewed using in-line course discussions",
-  "discussions.editor.image.warning.title": "Warning!",
-  "discussions.editor.image.warning.dismiss": "Ok",
+  "discussion.blackoutBanner.information": "El equipo del curso deshabilita temporalmente la publicación en discusiones",
+  "discussions.editor.image.warning.message": "Las imágenes que tengan un ancho o alto superior a 999 px no serán visibles cuando la publicación, la respuesta o el comentario se vean mediante debates en línea del curso.",
+  "discussions.editor.image.warning.title": "¡Advertencia!",
+  "discussions.editor.image.warning.dismiss": "Aceptar",
   "discussions.navigation.breadcrumbMenu.allTopics": "Temas",
   "discussions.navigation.breadcrumbMenu.showAll": "Mostrar todo",
   "discussions.navigation.navigationBar.allPosts": "Todos los mensajes",
   "discussions.navigation.navigationBar.allTopics": "Temas",
   "discussions.navigation.navigationBar.myPosts": "Mis publicaciones",
   "discussions.navigation.navigationBar.learners": "Estudiantes",
+  "discussions.comments.comment.addComment": "Añadir comentario",
+  "discussions.comments.comment.addResponse": "Agregar una respuesta",
+  "discussions.comments.comment.abuseFlaggedMessage": "Contenido informado para que el personal lo revise",
+  "discussions.actions.back.alt": "Volver a la lista",
+  "discussions.comments.comment.responseCount": "{num, plural, =0 {No responses} one {Showing # response} other {Showing # responses} }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural, =0 {Sin respuestas respaldadas} one {Mostrando # respuesta respaldada} other {Mostrando # respuestas respaldadas} }",
+  "discussions.comments.comment.loadMoreComments": "Cargar más comentarios",
+  "discussions.comments.comment.loadMoreResponses": "Cargar más respuestas",
+  "discussions.comments.comment.visibility": "Esta publicación es visible para {group, select, null {Everyone} other {{group}} }.",
+  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } publicado {relativeTime} por",
+  "discussions.comments.comment.commentTime": "Publicado {relativeTime}",
+  "discussions.comments.comment.answer": "Respuesta",
+  "discussions.comments.comment.answeredlabel": "Marcado como respondido por",
+  "discussions.comments.comment.endorsed": "respaldado",
+  "discussions.comments.comment.endorsedlabel": "Avalado por",
+  "discussions.actions.label": "Menú de acciones",
+  "discussions.editor.submit": "Enviar",
+  "discussions.editor.submitting": "Enviando",
+  "discussions.editor.cancel": "Cancelar",
+  "discussions.editor.error.empty": "El contenido de la publicación no puede estar vacío.",
+  "discussions.editor.delete.response.title": "Eliminar respuesta",
+  "discussions.editor.delete.response.description": "¿Está seguro de que desea eliminar esta respuesta de forma permanente?",
+  "discussions.editor.delete.comment.title": "Eliminar comentario",
+  "discussions.editor.delete.comment.description": "¿Estás seguro de que quieres eliminar este comentario de forma permanente?",
+  "discussions.delete.confirmation.button.delete": "Borrar",
+  "discussions.editor.response.response.title": "¿Denunciar contenido inapropiado?",
+  "discussions.editor.response.description": "El equipo de moderación de debates revisará este contenido y tomará las medidas adecuadas.",
+  "discussions.editor.report.comment.title": "¿Denunciar contenido inapropiado?",
+  "discussions.editor.report.comment.description": "El equipo de moderación de debates revisará este contenido y tomará las medidas adecuadas.",
+  "discussions.editor.comments.editReasonCode": "Razón de la edición",
+  "discussions.editor.posts.editReasonCode.error": "Seleccione el motivo de la edición",
+  "discussions.comment.comments.editedBy": "Editado por",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Motivo",
+  "discussions.post.closedBy": "Publicación cerrada por",
+  "discussion.comment.time": "hace {time}",
+  "discussion.thread.notFound": "Hilo no encontrado",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "Debates",
   "discussions.posts.actionBar.searchAllPosts": "Buscar en todas las publicaciones",
   "discussions.posts.actionBar.search": "{page, select, topics {Search topics} posts {Search all posts} learners {Search learners} myPosts {Search all posts} other {{page}} }",
@@ -142,8 +143,8 @@
   "discussions.post.editor.anonymousToPeersPost": "Publicar de forma anónima para tus compañeros",
   "discussions.editor.posts.editReasonCode": "Motivo de la edición",
   "discussions.editor.posts.showPreview.button": "Mostrar vista previa",
-  "discussions.topic.noName.label": "Unnamed category",
-  "discussions.subtopic.noName.label": "Unnamed subcategory",
+  "discussions.topic.noName.label": "Categoría sin nombre",
+  "discussions.subtopic.noName.label": "Subcategoría sin nombre",
   "discussions.posts.filter.showALl": "Mostrar todo",
   "discussions.posts.filter.discussions": "Debates\n",
   "discussions.posts.filter.questions": "Preguntas",
@@ -153,7 +154,7 @@
   "discussions.posts.status.filter.following": "Siguiendo",
   "discussions.posts.status.filter.reported": "Informado",
   "discussions.posts.status.filter.unanswered": "Sin responder",
-  "discussions.posts.status.filter.unresponded": "Not responded",
+  "discussions.posts.status.filter.unresponded": "Sin respuesta",
   "discussions.posts.filter.myPosts": "Mis publicaciones",
   "discussions.posts.filter.myDiscussions": "Mis debates",
   "discussions.posts.filter.myQuestions": "Mis preguntas",
@@ -161,30 +162,31 @@
   "discussions.posts.sort.lastActivity": "Actividad reciente",
   "discussions.posts.sort.commentCount": "La mayoría de la actividad",
   "discussions.posts.sort.voteCount": "La mayoría me gusta",
-  "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
+  "discussions.posts.sort-filter.sortFilterStatus": "{own, select, false {All} true {Own} other {{own}} } {status, select, statusAll {} statusUnread {unread} statusFollowing {followed} statusReported {reported} statusUnanswered {unanswered} statusUnresponded {unresponded} other { {status}} } {type, select, discussion {discussions} question {questions} all {posts} other {{type}} } {cohortType, select, all {} group {in {cohort}} other {{cohortType}} } ordenado por {sort, select, lastActivityAt {actividad reciente} commentCount {mayor actividad} voteCount {mayor cantidad de Me gusta} other {{a0fc841}bba10}",
   "discussions.post.author.anonymous": "anónimo",
+  "discussions.post.addResponse": "Añadir respuesta",
   "discussions.post.lastResponse": "Última respuesta {time}",
   "discussions.post.postedOn": "Publicado {time} por {author} {authorLabel}",
   "discussions.post.contentReported": "Informado",
   "discussions.post.following": "Siguiendo",
   "discussions.post.follow": "Seguir",
-  "discussions.post.followed": "Followed",
-  "discussions.post.notFollowed": "Not Followed",
+  "discussions.post.followed": "Seguido",
+  "discussions.post.notFollowed": "No seguido",
   "discussions.post.answered": "Respondido",
   "discussions.post.unFollow": "Dejar de seguir",
   "discussions.post.like": "Me gusta",
   "discussions.post.removeLike": "Dejar de gustar",
-  "discussions.post.liked": "liked",
-  "discussions.post.likes": "likes",
+  "discussions.post.liked": "Me gusta",
+  "discussions.post.likes": "Me gustan",
   "discussions.post.viewActivity": "Ver actividad",
-  "discussions.post.activity": "Activity",
+  "discussions.post.activity": "Actividad",
   "discussions.post.closed": "Publicación cerrada por respuestas y comentarios.",
-  "discussions.post.relatedTo": "Related to",
+  "discussions.post.relatedTo": "Relacionado con",
   "discussions.editor.delete.post.title": "Eliminar mensaje",
   "discussions.editor.delete.post.description": "¿Seguro que quieres eliminar esta publicación de forma permanente?",
-  "discussions.post.delete.confirmation.button.delete": "Delete",
-  "discussions.editor.report.post.title": "Report inappropriate content?",
-  "discussions.editor.report.post.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.post.delete.confirmation.button.delete": "Borrar",
+  "discussions.editor.report.post.title": "¿Denunciar contenido inapropiado?",
+  "discussions.editor.report.post.description": "El equipo de moderación de debates revisará este contenido y tomará las medidas adecuadas.",
   "discussions.post.closePostModal.title": "Cerrar publicación",
   "discussions.post.closePostModal.text": "Escribe un motivo para cerrar esta publicación. Esto solo se mostrará a otros moderadores.",
   "discussions.post.closePostModal.reasonCodeInput": "Motivo",
@@ -194,17 +196,17 @@
   "discussions.post.editedBy": "Editado por",
   "discussions.post.editReason": "Motivo",
   "discussions.post.postWithoutPreview": "No hay vista previa disponible",
-  "discussions.post.follow.description": "you are following this post",
-  "discussions.post.unfollow.description": "you are not following this post",
+  "discussions.post.follow.description": "estás siguiendo esta publicación",
+  "discussions.post.unfollow.description": "No estás siguiendo esta publicación",
   "discussions.topics.sort.message": "Ordenado por {sortBy}",
   "discussions.topics.sort.lastActivity": "Actividad reciente",
   "discussions.topics.sort.commentCount": "La mayoría de la actividad",
   "discussions.topics.sort.courseStructure": "Estructura del curso",
-  "discussions.topics.unnamed.label": "Unnamed category",
-  "discussions.subtopics.unnamed.label": "Unnamed subcategory",
-  "tour.action.advance": "Next",
-  "tour.action.dismiss": "Dismiss",
-  "tour.action.end": "Okay",
-  "tour.body.notRespondedFilter": "Now you can filter discussions to find posts with no response.",
-  "tour.title.notRespondedFilter": "New filtering option!"
+  "discussions.topics.unnamed.label": "Categoría sin nombre",
+  "discussions.subtopics.unnamed.label": "Subcategoría sin nombre",
+  "tour.action.advance": "Siguiente",
+  "tour.action.dismiss": "Descartar",
+  "tour.action.end": "Okey",
+  "tour.body.notRespondedFilter": "Ahora puede filtrar debates para encontrar publicaciones sin respuesta.",
+  "tour.title.notRespondedFilter": "¡Nueva opción de filtrado!"
 }

src/i18n/messages/fr.json

@@ -1,46 +1,6 @@
 {
   "navigation.course.tabs.label": "Course Material",
   "learn.course.tabs.navigation.overflow.menu": "Plus...",
-  "discussions.comments.comment.addResponse": "Ajouter une réponse",
-  "discussions.comments.comment.addComment": "Ajouter un commentaire",
-  "discussions.comments.comment.abuseFlaggedMessage": "Contenu signalé au personnel pour examen",
-  "discussions.actions.back.alt": "Back to list",
-  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
-  "discussions.comments.comment.loadMoreComments": "Charger plus de commentaires",
-  "discussions.comments.comment.loadMoreResponses": "Charger plus de réponses",
-  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
-  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
-  "discussions.comments.comment.commentTime": "Posted {relativeTime}",
-  "discussions.comments.comment.answer": "Réponse",
-  "discussions.comments.comment.answeredlabel": "Marqué comme répondu par",
-  "discussions.comments.comment.endorsed": "Approuvé",
-  "discussions.comments.comment.endorsedlabel": "Approuvé par",
-  "discussions.actions.label": "Menu Actions",
-  "discussions.actions.edit": "Modifier",
-  "discussions.actions.pin": "Épingler",
-  "discussions.actions.delete": "Delete",
-  "discussions.editor.submit": "Submit",
-  "discussions.editor.submitting": "Submitting",
-  "discussions.editor.cancel": "Annuler",
-  "discussions.editor.error.empty": "Le contenu de la publication ne peut pas être vide.",
-  "discussions.editor.delete.response.title": "Delete response",
-  "discussions.editor.delete.response.description": "Are you sure you want to permanently delete this response?",
-  "discussions.editor.delete.comment.title": "Delete comment",
-  "discussions.editor.delete.comment.description": "Are you sure you want to permanently delete this comment?",
-  "discussions.delete.confirmation.button.delete": "Delete",
-  "discussions.editor.response.response.title": "Report inappropriate content?",
-  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.report.comment.title": "Report inappropriate content?",
-  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.comments.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.editReasonCode.error": "Select reason for editing",
-  "discussions.comment.comments.editedBy": "Édité par",
-  "discussions.comment.comments.reason": "Motif",
-  "discussions.post.closedBy": "Message fermé par",
-  "discussion.comment.repliesHeading": "{count} réponses pour la réponse ajoutée",
-  "discussion.comment.time": "il y a {time}",
-  "discussion.thread.notFound": "Thread not found",
   "discussions.topics.backAlt": "Back to topics list",
   "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
   "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
@@ -68,7 +28,10 @@
   "discussion.learner.posts": "Posts",
   "discussions.actions.button.alt": "Actions menu",
   "discussions.actions.copylink": "Copy link",
+  "discussions.actions.edit": "Modifier",
+  "discussions.actions.pin": "Épingler",
   "discussions.actions.unpin": "Unpin",
+  "discussions.actions.delete": "Delete",
   "discussions.confirmation.button.confirm": "Confirm",
   "discussions.actions.close": "Close",
   "discussions.actions.reopen": "Reopen",
@@ -109,6 +72,44 @@
   "discussions.navigation.navigationBar.allTopics": "Topics",
   "discussions.navigation.navigationBar.myPosts": "My posts",
   "discussions.navigation.navigationBar.learners": "Learners",
+  "discussions.comments.comment.addComment": "Add comment",
+  "discussions.comments.comment.addResponse": "Ajouter une réponse",
+  "discussions.comments.comment.abuseFlaggedMessage": "Contenu signalé au personnel pour examen",
+  "discussions.actions.back.alt": "Back to list",
+  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
+  "discussions.comments.comment.loadMoreComments": "Charger plus de commentaires",
+  "discussions.comments.comment.loadMoreResponses": "Charger plus de réponses",
+  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
+  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
+  "discussions.comments.comment.commentTime": "Posted {relativeTime}",
+  "discussions.comments.comment.answer": "Réponse",
+  "discussions.comments.comment.answeredlabel": "Marqué comme répondu par",
+  "discussions.comments.comment.endorsed": "Approuvé",
+  "discussions.comments.comment.endorsedlabel": "Approuvé par",
+  "discussions.actions.label": "Menu Actions",
+  "discussions.editor.submit": "Submit",
+  "discussions.editor.submitting": "Submitting",
+  "discussions.editor.cancel": "Annuler",
+  "discussions.editor.error.empty": "Le contenu de la publication ne peut pas être vide.",
+  "discussions.editor.delete.response.title": "Delete response",
+  "discussions.editor.delete.response.description": "Are you sure you want to permanently delete this response?",
+  "discussions.editor.delete.comment.title": "Delete comment",
+  "discussions.editor.delete.comment.description": "Are you sure you want to permanently delete this comment?",
+  "discussions.delete.confirmation.button.delete": "Delete",
+  "discussions.editor.response.response.title": "Report inappropriate content?",
+  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.report.comment.title": "Report inappropriate content?",
+  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.comments.editReasonCode": "Reason for editing",
+  "discussions.editor.posts.editReasonCode.error": "Select reason for editing",
+  "discussions.comment.comments.editedBy": "Édité par",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Motif",
+  "discussions.post.closedBy": "Message fermé par",
+  "discussion.comment.time": "il y a {time}",
+  "discussion.thread.notFound": "Thread not found",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "Discussions",
   "discussions.posts.actionBar.searchAllPosts": "Search all posts",
   "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
@@ -141,7 +142,7 @@
   "discussions.post.editor.anonymousPost": "Post anonymously",
   "discussions.post.editor.anonymousToPeersPost": "Post anonymously to peers",
   "discussions.editor.posts.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.showPreview.button": "Show Preview",
+  "discussions.editor.posts.showPreview.button": "Show preview",
   "discussions.topic.noName.label": "Unnamed category",
   "discussions.subtopic.noName.label": "Unnamed subcategory",
   "discussions.posts.filter.showALl": "Show all",
@@ -163,6 +164,7 @@
   "discussions.posts.sort.voteCount": "Most likes",
   "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "anonymous",
+  "discussions.post.addResponse": "Add response",
   "discussions.post.lastResponse": "Last response {time}",
   "discussions.post.postedOn": "Posted {time} by {author} {authorLabel}",
   "discussions.post.contentReported": "Reported",

src/i18n/messages/fr_CA.json

@@ -1,46 +1,6 @@
 {
   "navigation.course.tabs.label": "Matériel de cours",
   "learn.course.tabs.navigation.overflow.menu": "Plus...",
-  "discussions.comments.comment.addResponse": "Ajouter une réponse",
-  "discussions.comments.comment.addComment": "Ajouter un commentaire",
-  "discussions.comments.comment.abuseFlaggedMessage": "Contenu signalé au personnel pour examen",
-  "discussions.actions.back.alt": "Retour à la liste",
-  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {Aucune réponse}\n     one {Affiche # réponse}\n     other {Affiche # réponses}\n    }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
-  "discussions.comments.comment.loadMoreComments": "Charger plus de commentaires",
-  "discussions.comments.comment.loadMoreResponses": "Charger plus de réponses",
-  "discussions.comments.comment.visibility": "Ce message est visible par {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
-  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
-  "discussions.comments.comment.commentTime": "Publié {relativeTime}",
-  "discussions.comments.comment.answer": "Réponse",
-  "discussions.comments.comment.answeredlabel": "Marqué comme répondu par",
-  "discussions.comments.comment.endorsed": "Approuvé",
-  "discussions.comments.comment.endorsedlabel": "Approuvé par",
-  "discussions.actions.label": "Menu Actions",
-  "discussions.actions.edit": "Éditer",
-  "discussions.actions.pin": "Épingler",
-  "discussions.actions.delete": "Supprimer",
-  "discussions.editor.submit": "Soumettre",
-  "discussions.editor.submitting": "Soumission",
-  "discussions.editor.cancel": "Annuler",
-  "discussions.editor.error.empty": "Le contenu de la publication ne peut pas être vide.",
-  "discussions.editor.delete.response.title": "Supprimer la réponse",
-  "discussions.editor.delete.response.description": "Êtes-vous sûr de vouloir supprimer définitivement cette réponse?",
-  "discussions.editor.delete.comment.title": "Supprimer le commentaire",
-  "discussions.editor.delete.comment.description": "Êtes-vous sûr de vouloir supprimer définitivement ce commentaire?",
-  "discussions.delete.confirmation.button.delete": "Supprimer",
-  "discussions.editor.response.response.title": "Signaler un contenu inapproprié?",
-  "discussions.editor.response.description": "L'équipe de modération de la discussion examinera ce contenu et prendra les mesures appropriées.",
-  "discussions.editor.report.comment.title": "Signaler un contenu inapproprié?",
-  "discussions.editor.report.comment.description": "L'équipe de modération de la discussion examinera ce contenu et prendra les mesures appropriées.",
-  "discussions.editor.comments.editReasonCode": "Raison de la modification",
-  "discussions.editor.posts.editReasonCode.error": "Sélectionnez la raison de la modification",
-  "discussions.comment.comments.editedBy": "Édité par",
-  "discussions.comment.comments.reason": "Raison",
-  "discussions.post.closedBy": "Message fermé par",
-  "discussion.comment.repliesHeading": "{count} réponses pour la réponse ajoutée",
-  "discussion.comment.time": "il y a {time}",
-  "discussion.thread.notFound": "Sujet introuvable",
   "discussions.topics.backAlt": "Retour à la liste des sujets",
   "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
   "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
@@ -68,7 +28,10 @@
   "discussion.learner.posts": "Posts",
   "discussions.actions.button.alt": "Menu Actions",
   "discussions.actions.copylink": "Copier le lien",
+  "discussions.actions.edit": "Éditer",
+  "discussions.actions.pin": "Épingler",
   "discussions.actions.unpin": "Détacher",
+  "discussions.actions.delete": "Supprimer",
   "discussions.confirmation.button.confirm": "Confirmer",
   "discussions.actions.close": "Fermer",
   "discussions.actions.reopen": "Rouvrir",
@@ -109,6 +72,44 @@
   "discussions.navigation.navigationBar.allTopics": "Sujets",
   "discussions.navigation.navigationBar.myPosts": "Mes messages",
   "discussions.navigation.navigationBar.learners": "Apprenants",
+  "discussions.comments.comment.addComment": "Ajouter un commentaire",
+  "discussions.comments.comment.addResponse": "Ajouter une réponse",
+  "discussions.comments.comment.abuseFlaggedMessage": "Contenu signalé au personnel pour examen",
+  "discussions.actions.back.alt": "Retour à la liste",
+  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {Aucune réponse}\n     one {Affiche # réponse}\n     other {Affiche # réponses}\n    }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
+  "discussions.comments.comment.loadMoreComments": "Charger plus de commentaires",
+  "discussions.comments.comment.loadMoreResponses": "Charger plus de réponses",
+  "discussions.comments.comment.visibility": "Ce message est visible par {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
+  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
+  "discussions.comments.comment.commentTime": "Publié {relativeTime}",
+  "discussions.comments.comment.answer": "Réponse",
+  "discussions.comments.comment.answeredlabel": "Marqué comme répondu par",
+  "discussions.comments.comment.endorsed": "Approuvé",
+  "discussions.comments.comment.endorsedlabel": "Approuvé par",
+  "discussions.actions.label": "Menu Actions",
+  "discussions.editor.submit": "Soumettre",
+  "discussions.editor.submitting": "Soumission",
+  "discussions.editor.cancel": "Annuler",
+  "discussions.editor.error.empty": "Le contenu de la publication ne peut pas être vide.",
+  "discussions.editor.delete.response.title": "Supprimer la réponse",
+  "discussions.editor.delete.response.description": "Êtes-vous sûr de vouloir supprimer définitivement cette réponse?",
+  "discussions.editor.delete.comment.title": "Supprimer le commentaire",
+  "discussions.editor.delete.comment.description": "Êtes-vous sûr de vouloir supprimer définitivement ce commentaire?",
+  "discussions.delete.confirmation.button.delete": "Supprimer",
+  "discussions.editor.response.response.title": "Signaler un contenu inapproprié?",
+  "discussions.editor.response.description": "L'équipe de modération de la discussion examinera ce contenu et prendra les mesures appropriées.",
+  "discussions.editor.report.comment.title": "Signaler un contenu inapproprié?",
+  "discussions.editor.report.comment.description": "L'équipe de modération de la discussion examinera ce contenu et prendra les mesures appropriées.",
+  "discussions.editor.comments.editReasonCode": "Raison de la modification",
+  "discussions.editor.posts.editReasonCode.error": "Sélectionnez la raison de la modification",
+  "discussions.comment.comments.editedBy": "Édité par",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Raison",
+  "discussions.post.closedBy": "Message fermé par",
+  "discussion.comment.time": "il y a {time}",
+  "discussion.thread.notFound": "Sujet introuvable",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "Discussions",
   "discussions.posts.actionBar.searchAllPosts": "Recherche dans les messages",
   "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
@@ -163,6 +164,7 @@
   "discussions.posts.sort.voteCount": "La plupart des aimés",
   "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "anonyme",
+  "discussions.post.addResponse": "Ajouter une réponse",
   "discussions.post.lastResponse": "Dernière réponse {time}",
   "discussions.post.postedOn": "Publié {time} par {author} {authorLabel}",
   "discussions.post.contentReported": "Signalé",

src/i18n/messages/fr_FR.json

@@ -1,46 +1,6 @@
 {
   "navigation.course.tabs.label": "Course Material",
   "learn.course.tabs.navigation.overflow.menu": "More...",
-  "discussions.comments.comment.addResponse": "Add a response",
-  "discussions.comments.comment.addComment": "Add a comment",
-  "discussions.comments.comment.abuseFlaggedMessage": "Content reported for staff to review",
-  "discussions.actions.back.alt": "Back to list",
-  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
-  "discussions.comments.comment.loadMoreComments": "Load more comments",
-  "discussions.comments.comment.loadMoreResponses": "Load more responses",
-  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
-  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
-  "discussions.comments.comment.commentTime": "Posted {relativeTime}",
-  "discussions.comments.comment.answer": "Answer",
-  "discussions.comments.comment.answeredlabel": "Marked as answered by",
-  "discussions.comments.comment.endorsed": "Endorsed",
-  "discussions.comments.comment.endorsedlabel": "Endorsed by",
-  "discussions.actions.label": "Actions menu",
-  "discussions.actions.edit": "Edit",
-  "discussions.actions.pin": "Pin",
-  "discussions.actions.delete": "Delete",
-  "discussions.editor.submit": "Submit",
-  "discussions.editor.submitting": "Submitting",
-  "discussions.editor.cancel": "Cancel",
-  "discussions.editor.error.empty": "Post content cannot be empty.",
-  "discussions.editor.delete.response.title": "Delete response",
-  "discussions.editor.delete.response.description": "Are you sure you want to permanently delete this response?",
-  "discussions.editor.delete.comment.title": "Delete comment",
-  "discussions.editor.delete.comment.description": "Are you sure you want to permanently delete this comment?",
-  "discussions.delete.confirmation.button.delete": "Delete",
-  "discussions.editor.response.response.title": "Report inappropriate content?",
-  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.report.comment.title": "Report inappropriate content?",
-  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.comments.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.editReasonCode.error": "Select reason for editing",
-  "discussions.comment.comments.editedBy": "Edited by",
-  "discussions.comment.comments.reason": "Reason",
-  "discussions.post.closedBy": "Post closed by",
-  "discussion.comment.repliesHeading": "{count} replies for the response added",
-  "discussion.comment.time": "{time} ago",
-  "discussion.thread.notFound": "Thread not found",
   "discussions.topics.backAlt": "Back to topics list",
   "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
   "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
@@ -68,7 +28,10 @@
   "discussion.learner.posts": "Posts",
   "discussions.actions.button.alt": "Actions menu",
   "discussions.actions.copylink": "Copy link",
+  "discussions.actions.edit": "Edit",
+  "discussions.actions.pin": "Pin",
   "discussions.actions.unpin": "Unpin",
+  "discussions.actions.delete": "Delete",
   "discussions.confirmation.button.confirm": "Confirm",
   "discussions.actions.close": "Close",
   "discussions.actions.reopen": "Reopen",
@@ -109,6 +72,44 @@
   "discussions.navigation.navigationBar.allTopics": "Topics",
   "discussions.navigation.navigationBar.myPosts": "My posts",
   "discussions.navigation.navigationBar.learners": "Learners",
+  "discussions.comments.comment.addComment": "Add comment",
+  "discussions.comments.comment.addResponse": "Add a response",
+  "discussions.comments.comment.abuseFlaggedMessage": "Content reported for staff to review",
+  "discussions.actions.back.alt": "Back to list",
+  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
+  "discussions.comments.comment.loadMoreComments": "Load more comments",
+  "discussions.comments.comment.loadMoreResponses": "Load more responses",
+  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
+  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
+  "discussions.comments.comment.commentTime": "Posted {relativeTime}",
+  "discussions.comments.comment.answer": "Answer",
+  "discussions.comments.comment.answeredlabel": "Marked as answered by",
+  "discussions.comments.comment.endorsed": "Endorsed",
+  "discussions.comments.comment.endorsedlabel": "Endorsed by",
+  "discussions.actions.label": "Actions menu",
+  "discussions.editor.submit": "Submit",
+  "discussions.editor.submitting": "Submitting",
+  "discussions.editor.cancel": "Cancel",
+  "discussions.editor.error.empty": "Post content cannot be empty.",
+  "discussions.editor.delete.response.title": "Delete response",
+  "discussions.editor.delete.response.description": "Are you sure you want to permanently delete this response?",
+  "discussions.editor.delete.comment.title": "Delete comment",
+  "discussions.editor.delete.comment.description": "Are you sure you want to permanently delete this comment?",
+  "discussions.delete.confirmation.button.delete": "Delete",
+  "discussions.editor.response.response.title": "Report inappropriate content?",
+  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.report.comment.title": "Report inappropriate content?",
+  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.comments.editReasonCode": "Reason for editing",
+  "discussions.editor.posts.editReasonCode.error": "Select reason for editing",
+  "discussions.comment.comments.editedBy": "Edited by",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Reason",
+  "discussions.post.closedBy": "Post closed by",
+  "discussion.comment.time": "{time} ago",
+  "discussion.thread.notFound": "Thread not found",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "Discussions",
   "discussions.posts.actionBar.searchAllPosts": "Search all posts",
   "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
@@ -141,7 +142,7 @@
   "discussions.post.editor.anonymousPost": "Post anonymously",
   "discussions.post.editor.anonymousToPeersPost": "Post anonymously to peers",
   "discussions.editor.posts.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.showPreview.button": "Show Preview",
+  "discussions.editor.posts.showPreview.button": "Show preview",
   "discussions.topic.noName.label": "Unnamed category",
   "discussions.subtopic.noName.label": "Unnamed subcategory",
   "discussions.posts.filter.showALl": "Show all",
@@ -163,6 +164,7 @@
   "discussions.posts.sort.voteCount": "Most likes",
   "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "anonymous",
+  "discussions.post.addResponse": "Add response",
   "discussions.post.lastResponse": "Last response {time}",
   "discussions.post.postedOn": "Posted {time} by {author} {authorLabel}",
   "discussions.post.contentReported": "Reported",

src/i18n/messages/it_IT.json

@@ -1,46 +1,6 @@
 {
   "navigation.course.tabs.label": "Materiale del corso",
   "learn.course.tabs.navigation.overflow.menu": "Altro... ",
-  "discussions.comments.comment.addResponse": "Aggiungi una risposta",
-  "discussions.comments.comment.addComment": "Aggiungi un commento",
-  "discussions.comments.comment.abuseFlaggedMessage": "Contenuto segnalato per la revisione da parte del personale",
-  "discussions.actions.back.alt": "Back to list",
-  "discussions.comments.comment.responseCount": "{num, plural, =0 {Nessuna risposta} one {Mostra # risposte} other {Mostra # risposte} }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural, =0 {Nessuna risposta approvata} one {Mostra # risposta approvata} other {Mostra # risposte approvate} }",
-  "discussions.comments.comment.loadMoreComments": "Carica più commenti",
-  "discussions.comments.comment.loadMoreResponses": "Carica più risposte",
-  "discussions.comments.comment.visibility": "Questo post è visibile a {group, select, null {Everyone} other {{group}} }.",
-  "discussions.comments.comment.postedTime": "{postType, select, discussion {Discussione} question {Domanda} other {{postType}} } pubblicato da {a0917e90}14c5z0",
-  "discussions.comments.comment.commentTime": "Inserito {relativeTime}",
-  "discussions.comments.comment.answer": "Risposta",
-  "discussions.comments.comment.answeredlabel": "Contrassegnato come risposta da",
-  "discussions.comments.comment.endorsed": "Approvato",
-  "discussions.comments.comment.endorsedlabel": "Approvato dal",
-  "discussions.actions.label": "Menù Azioni",
-  "discussions.actions.edit": "Modifica",
-  "discussions.actions.pin": "Blocca",
-  "discussions.actions.delete": "Cancella",
-  "discussions.editor.submit": "Invia",
-  "discussions.editor.submitting": "In fase di invio",
-  "discussions.editor.cancel": "Annulla",
-  "discussions.editor.error.empty": "Il contenuto del post non può essere vuoto.",
-  "discussions.editor.delete.response.title": "Elimina risposta",
-  "discussions.editor.delete.response.description": "Sei sicuro di voler eliminare definitivamente questa risposta?",
-  "discussions.editor.delete.comment.title": "Elimina commento",
-  "discussions.editor.delete.comment.description": "Sei sicuro di voler eliminare definitivamente questo commento?",
-  "discussions.delete.confirmation.button.delete": "Cancella",
-  "discussions.editor.response.response.title": "Report inappropriate content?",
-  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.report.comment.title": "Report inappropriate content?",
-  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.comments.editReasonCode": "Motivo della modifica",
-  "discussions.editor.posts.editReasonCode.error": "Seleziona il motivo per la modifica",
-  "discussions.comment.comments.editedBy": "A cura di",
-  "discussions.comment.comments.reason": "Motivo ",
-  "discussions.post.closedBy": "Post chiuso da",
-  "discussion.comment.repliesHeading": "{count} risposte per la risposta aggiunta",
-  "discussion.comment.time": "{time} fa",
-  "discussion.thread.notFound": "Thread not found",
   "discussions.topics.backAlt": "Back to topics list",
   "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
   "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
@@ -68,7 +28,10 @@
   "discussion.learner.posts": "Posts",
   "discussions.actions.button.alt": "Menù Azioni",
   "discussions.actions.copylink": "Copia link",
+  "discussions.actions.edit": "Modifica",
+  "discussions.actions.pin": "Blocca",
   "discussions.actions.unpin": "Sblocca ",
+  "discussions.actions.delete": "Cancella",
   "discussions.confirmation.button.confirm": "Confirm",
   "discussions.actions.close": "Chiudi",
   "discussions.actions.reopen": "Riaprire",
@@ -109,6 +72,44 @@
   "discussions.navigation.navigationBar.allTopics": "Argomenti",
   "discussions.navigation.navigationBar.myPosts": "I miei post",
   "discussions.navigation.navigationBar.learners": "Utenti",
+  "discussions.comments.comment.addComment": "Add comment",
+  "discussions.comments.comment.addResponse": "Aggiungi una risposta",
+  "discussions.comments.comment.abuseFlaggedMessage": "Contenuto segnalato per la revisione da parte del personale",
+  "discussions.actions.back.alt": "Back to list",
+  "discussions.comments.comment.responseCount": "{num, plural, =0 {Nessuna risposta} one {Mostra # risposte} other {Mostra # risposte} }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural, =0 {Nessuna risposta approvata} one {Mostra # risposta approvata} other {Mostra # risposte approvate} }",
+  "discussions.comments.comment.loadMoreComments": "Carica più commenti",
+  "discussions.comments.comment.loadMoreResponses": "Carica più risposte",
+  "discussions.comments.comment.visibility": "Questo post è visibile a {group, select, null {Everyone} other {{group}} }.",
+  "discussions.comments.comment.postedTime": "{postType, select, discussion {Discussione} question {Domanda} other {{postType}} } pubblicato da {a0917e90}14c5z0",
+  "discussions.comments.comment.commentTime": "Inserito {relativeTime}",
+  "discussions.comments.comment.answer": "Risposta",
+  "discussions.comments.comment.answeredlabel": "Contrassegnato come risposta da",
+  "discussions.comments.comment.endorsed": "Approvato",
+  "discussions.comments.comment.endorsedlabel": "Approvato dal",
+  "discussions.actions.label": "Menù Azioni",
+  "discussions.editor.submit": "Invia",
+  "discussions.editor.submitting": "In fase di invio",
+  "discussions.editor.cancel": "Annulla",
+  "discussions.editor.error.empty": "Il contenuto del post non può essere vuoto.",
+  "discussions.editor.delete.response.title": "Elimina risposta",
+  "discussions.editor.delete.response.description": "Sei sicuro di voler eliminare definitivamente questa risposta?",
+  "discussions.editor.delete.comment.title": "Elimina commento",
+  "discussions.editor.delete.comment.description": "Sei sicuro di voler eliminare definitivamente questo commento?",
+  "discussions.delete.confirmation.button.delete": "Cancella",
+  "discussions.editor.response.response.title": "Report inappropriate content?",
+  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.report.comment.title": "Report inappropriate content?",
+  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.comments.editReasonCode": "Motivo della modifica",
+  "discussions.editor.posts.editReasonCode.error": "Seleziona il motivo per la modifica",
+  "discussions.comment.comments.editedBy": "A cura di",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Motivo ",
+  "discussions.post.closedBy": "Post chiuso da",
+  "discussion.comment.time": "{time} fa",
+  "discussion.thread.notFound": "Thread not found",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "Discussioni",
   "discussions.posts.actionBar.searchAllPosts": "Cerca tutti i messaggi",
   "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
@@ -141,7 +142,7 @@
   "discussions.post.editor.anonymousPost": "Pubblica in modo anonimo",
   "discussions.post.editor.anonymousToPeersPost": "Pubblica in modo anonimo ai colleghi",
   "discussions.editor.posts.editReasonCode": "Motivo della modifica",
-  "discussions.editor.posts.showPreview.button": "Anteprima dello spettacolo",
+  "discussions.editor.posts.showPreview.button": "Show preview",
   "discussions.topic.noName.label": "Unnamed category",
   "discussions.subtopic.noName.label": "Unnamed subcategory",
   "discussions.posts.filter.showALl": "Mostra tutto",
@@ -163,6 +164,7 @@
   "discussions.posts.sort.voteCount": "La maggior parte dei Mi piace",
   "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "anonimo",
+  "discussions.post.addResponse": "Add response",
   "discussions.post.lastResponse": "Ultima risposta {time}",
   "discussions.post.postedOn": "Inserito {time} da {author} {authorLabel}",
   "discussions.post.contentReported": "Segnalato ",

src/i18n/messages/pl.json

@@ -1,46 +1,6 @@
 {
   "navigation.course.tabs.label": "Course Material",
   "learn.course.tabs.navigation.overflow.menu": "More...",
-  "discussions.comments.comment.addResponse": "Dodaj odpowiedź",
-  "discussions.comments.comment.addComment": "Add a comment",
-  "discussions.comments.comment.abuseFlaggedMessage": "Content reported for staff to review",
-  "discussions.actions.back.alt": "Back to list",
-  "discussions.comments.comment.responseCount": "{num, plural,\n=0 {No responses}\none {Showing # response}\nother {Showing # responses}\n}",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n=0 {No endorsed responses}\none {Showing # endorsed response}\nother {Showing # endorsed responses}\n}",
-  "discussions.comments.comment.loadMoreComments": "Załaduj więcej komentarzy",
-  "discussions.comments.comment.loadMoreResponses": "Załaduj więcej odpowiedzi",
-  "discussions.comments.comment.visibility": "Ten post jest widoczny dla  {group, select,\n null {Everyone}\nother {{group}}\n }.",
-  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
-  "discussions.comments.comment.commentTime": "Wysłano {relativeTime}",
-  "discussions.comments.comment.answer": "Answer",
-  "discussions.comments.comment.answeredlabel": "Oznaczono jako odpowiedziane przez",
-  "discussions.comments.comment.endorsed": "Zatwierdzony",
-  "discussions.comments.comment.endorsedlabel": "Zatwierdzony przez",
-  "discussions.actions.label": "Actions menu",
-  "discussions.actions.edit": "Edit",
-  "discussions.actions.pin": "Pin",
-  "discussions.actions.delete": "Delete",
-  "discussions.editor.submit": "Submit",
-  "discussions.editor.submitting": "Submitting",
-  "discussions.editor.cancel": "Cancel",
-  "discussions.editor.error.empty": "Post content cannot be empty.",
-  "discussions.editor.delete.response.title": "Usuń odpowiedź",
-  "discussions.editor.delete.response.description": "Czy na pewno chcesz trwale usunąć tę odpowiedź?",
-  "discussions.editor.delete.comment.title": "Usuń komentarz",
-  "discussions.editor.delete.comment.description": "Czy na pewno chcesz trwale usunąć ten komentarz?",
-  "discussions.delete.confirmation.button.delete": "Delete",
-  "discussions.editor.response.response.title": "Report inappropriate content?",
-  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.report.comment.title": "Report inappropriate content?",
-  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.comments.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.editReasonCode.error": "Wybierz powód edycji",
-  "discussions.comment.comments.editedBy": "Edytowany przez",
-  "discussions.comment.comments.reason": "Reason",
-  "discussions.post.closedBy": "Post zamknięty przez",
-  "discussion.comment.repliesHeading": "{count} replies for the response added",
-  "discussion.comment.time": "{time} ago",
-  "discussion.thread.notFound": "Thread not found",
   "discussions.topics.backAlt": "Back to topics list",
   "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
   "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
@@ -68,7 +28,10 @@
   "discussion.learner.posts": "Posts",
   "discussions.actions.button.alt": "Menu czynności",
   "discussions.actions.copylink": "Copy link",
+  "discussions.actions.edit": "Edit",
+  "discussions.actions.pin": "Pin",
   "discussions.actions.unpin": "Unpin",
+  "discussions.actions.delete": "Delete",
   "discussions.confirmation.button.confirm": "Confirm",
   "discussions.actions.close": "Close",
   "discussions.actions.reopen": "Otwórz ponownie",
@@ -109,6 +72,44 @@
   "discussions.navigation.navigationBar.allTopics": "Topics",
   "discussions.navigation.navigationBar.myPosts": "Moje posty",
   "discussions.navigation.navigationBar.learners": "Learners",
+  "discussions.comments.comment.addComment": "Add comment",
+  "discussions.comments.comment.addResponse": "Dodaj odpowiedź",
+  "discussions.comments.comment.abuseFlaggedMessage": "Content reported for staff to review",
+  "discussions.actions.back.alt": "Back to list",
+  "discussions.comments.comment.responseCount": "{num, plural,\n=0 {No responses}\none {Showing # response}\nother {Showing # responses}\n}",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n=0 {No endorsed responses}\none {Showing # endorsed response}\nother {Showing # endorsed responses}\n}",
+  "discussions.comments.comment.loadMoreComments": "Załaduj więcej komentarzy",
+  "discussions.comments.comment.loadMoreResponses": "Załaduj więcej odpowiedzi",
+  "discussions.comments.comment.visibility": "Ten post jest widoczny dla  {group, select,\n null {Everyone}\nother {{group}}\n }.",
+  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
+  "discussions.comments.comment.commentTime": "Wysłano {relativeTime}",
+  "discussions.comments.comment.answer": "Answer",
+  "discussions.comments.comment.answeredlabel": "Oznaczono jako odpowiedziane przez",
+  "discussions.comments.comment.endorsed": "Zatwierdzony",
+  "discussions.comments.comment.endorsedlabel": "Zatwierdzony przez",
+  "discussions.actions.label": "Actions menu",
+  "discussions.editor.submit": "Submit",
+  "discussions.editor.submitting": "Submitting",
+  "discussions.editor.cancel": "Cancel",
+  "discussions.editor.error.empty": "Post content cannot be empty.",
+  "discussions.editor.delete.response.title": "Usuń odpowiedź",
+  "discussions.editor.delete.response.description": "Czy na pewno chcesz trwale usunąć tę odpowiedź?",
+  "discussions.editor.delete.comment.title": "Usuń komentarz",
+  "discussions.editor.delete.comment.description": "Czy na pewno chcesz trwale usunąć ten komentarz?",
+  "discussions.delete.confirmation.button.delete": "Delete",
+  "discussions.editor.response.response.title": "Report inappropriate content?",
+  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.report.comment.title": "Report inappropriate content?",
+  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.comments.editReasonCode": "Reason for editing",
+  "discussions.editor.posts.editReasonCode.error": "Wybierz powód edycji",
+  "discussions.comment.comments.editedBy": "Edytowany przez",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Reason",
+  "discussions.post.closedBy": "Post zamknięty przez",
+  "discussion.comment.time": "{time} ago",
+  "discussion.thread.notFound": "Thread not found",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "Discussions",
   "discussions.posts.actionBar.searchAllPosts": "Search all posts",
   "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
@@ -141,7 +142,7 @@
   "discussions.post.editor.anonymousPost": "Post anonymously",
   "discussions.post.editor.anonymousToPeersPost": "Post anonymously to peers",
   "discussions.editor.posts.editReasonCode": "Powód edycji",
-  "discussions.editor.posts.showPreview.button": "Show Preview",
+  "discussions.editor.posts.showPreview.button": "Show preview",
   "discussions.topic.noName.label": "Unnamed category",
   "discussions.subtopic.noName.label": "Unnamed subcategory",
   "discussions.posts.filter.showALl": "Show all",
@@ -163,6 +164,7 @@
   "discussions.posts.sort.voteCount": "Most likes",
   "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "anonymous",
+  "discussions.post.addResponse": "Add response",
   "discussions.post.lastResponse": "Ostatnia odpowiedź {time}",
   "discussions.post.postedOn": "Posted {time} by {author} {authorLabel}",
   "discussions.post.contentReported": "Reported",

src/i18n/messages/tr_TR.json

@@ -1,58 +1,18 @@
 {
   "navigation.course.tabs.label": "Ders Materyali",
   "learn.course.tabs.navigation.overflow.menu": "Daha Fazlası...",
-  "discussions.comments.comment.addResponse": "Bir cevap ekle",
-  "discussions.comments.comment.addComment": "Bir yorum ekle",
-  "discussions.comments.comment.abuseFlaggedMessage": "Personelin incelemesi için bildirilen içerik",
-  "discussions.actions.back.alt": "Listeye dön",
-  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
-  "discussions.comments.comment.loadMoreComments": "Daha fazla yorum yükle",
-  "discussions.comments.comment.loadMoreResponses": "Daha fazla yanıt yükle",
-  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
-  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
-  "discussions.comments.comment.commentTime": "{relativeTime} önce gönderildi",
-  "discussions.comments.comment.answer": "Cevap",
-  "discussions.comments.comment.answeredlabel": "Yanıtlandı olarak işaretleyen ",
-  "discussions.comments.comment.endorsed": "Doğrulandı",
-  "discussions.comments.comment.endorsedlabel": "Doğrulayan",
-  "discussions.actions.label": "Eylemler menüsü",
-  "discussions.actions.edit": "Düzenle",
-  "discussions.actions.pin": "İşaretle",
-  "discussions.actions.delete": "Sil",
-  "discussions.editor.submit": "Gönder",
-  "discussions.editor.submitting": "Gönderiliyor",
-  "discussions.editor.cancel": "İptal",
-  "discussions.editor.error.empty": "Gönderi içeriği boş olamaz.",
-  "discussions.editor.delete.response.title": "Yanıtı sil",
-  "discussions.editor.delete.response.description": "Bu yanıtı kalıcı olarak silmek istediğinizden emin misiniz?",
-  "discussions.editor.delete.comment.title": "Yorumu sil",
-  "discussions.editor.delete.comment.description": "Bu yorumu kalıcı olarak silmek istediğinizden emin misiniz?",
-  "discussions.delete.confirmation.button.delete": "Sil",
-  "discussions.editor.response.response.title": "Uygunsuz içerik mi raporlayacaksınız?",
-  "discussions.editor.response.description": "Tartışma yöneticileri bu içeriği inceleyecek ve uygun işlemi yapacaktır.",
-  "discussions.editor.report.comment.title": "Uygunsuz içerik mi raporlayacaksınız?",
-  "discussions.editor.report.comment.description": "Tartışma yöneticileri bu içeriği inceleyecek ve uygun işlemi yapacaktır.",
-  "discussions.editor.comments.editReasonCode": "Düzenleme nedeni",
-  "discussions.editor.posts.editReasonCode.error": "Düzenleme nedenini seçin",
-  "discussions.comment.comments.editedBy": "Düzenleyen",
-  "discussions.comment.comments.reason": "Gerekçe",
-  "discussions.post.closedBy": "Gönderiyi kapatan ",
-  "discussion.comment.repliesHeading": "Eklenen yanıt için {count} yanıt",
-  "discussion.comment.time": "{time} önce",
-  "discussion.thread.notFound": "Tartışma zinciri bulunamadı",
-  "discussions.topics.backAlt": "Back to topics list",
+  "discussions.topics.backAlt": "Konular listesine dön",
   "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
   "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
   "discussions.topics.reported": "{reported} rapor edildi",
   "discussions.topics.previouslyReported": "{previouslyReported} ileti rapor edildi",
   "discussions.topics.find.label": "Konuları ara",
-  "discussions.topics.unnamed.section.label": "Unnamed Section",
-  "discussions.topics.unnamed.subsection.label": "Unnamed Subsection",
-  "discussions.subtopics.unnamed.topic.label": "Unnamed Topic",
-  "discussions.topics.title": "No topic exists",
-  "discussions.topics.createTopic": "Please contact you admin to create a topic",
-  "discussions.topics.nothing": "Nothing here yet",
+  "discussions.topics.unnamed.section.label": "İsimsiz Bölüm",
+  "discussions.topics.unnamed.subsection.label": "İsimsiz Altbölüm",
+  "discussions.subtopics.unnamed.topic.label": "İsimsiz Konu",
+  "discussions.topics.title": "Hiçbir konu yok",
+  "discussions.topics.createTopic": "Bir konu başlatmak için yöneticinizle iletişime geçin",
+  "discussions.topics.nothing": "Burada henüz bir şey yok",
   "discussions.topics.archived.label": "Arşivlenmiş",
   "discussions.learner.reported": "{reported} rapor edildi",
   "discussions.learner.previouslyReported": "{previouslyReported} daha önce rapor edildi",
@@ -68,14 +28,17 @@
   "discussion.learner.posts": "Gönderiler",
   "discussions.actions.button.alt": "Eylemler menüsü",
   "discussions.actions.copylink": "Bağlantıyı kopyala",
+  "discussions.actions.edit": "Düzenle",
+  "discussions.actions.pin": "İşaretle",
   "discussions.actions.unpin": "İşareti kaldır",
+  "discussions.actions.delete": "Sil",
   "discussions.confirmation.button.confirm": "Onayla",
   "discussions.actions.close": "Kapat",
   "discussions.actions.reopen": "Yeniden aç",
   "discussions.actions.report": "Raporla",
-  "discussions.actions.unreport": "Bildirme",
+  "discussions.actions.unreport": "Raporlamaktan vazgeç",
   "discussions.actions.endorse": "Destekle",
-  "discussions.actions.unendorse": "Destekleme",
+  "discussions.actions.unendorse": "Desteklemekten vazgeç",
   "discussions.actions.markAnswered": "Cevaplandı olarak işaretle",
   "discussions.actions.unMarkAnswered": "Cevaplandı olarak işaretini kaldır",
   "discussions.modal.confirmation.button.cancel": "İptal",
@@ -99,7 +62,7 @@
   "discussion.banner.welcomeMessage": "🎉 Yeni ve geliştirilmiş tartışma deneyimine hoş geldiniz!",
   "discussion.banner.learnMore": "Daha fazlasını öğren",
   "discussion.banner.shareFeedback": "Geri bildirim paylaş",
-  "discussion.blackoutBanner.information": "Posting in discussions is temporarily disabled by the course team",
+  "discussion.blackoutBanner.information": "Tartışmalarda ileti yayınlama, ders ekibi tarafından geçici olarak devre dışı bırakıldı",
   "discussions.editor.image.warning.message": "Genişliği veya yüksekliği 999 pikselden büyük olan resimler, çevrimiçi ders tartışmalarında yer alan gönderi, yanıt veya yorumlarda görüntülenemez.",
   "discussions.editor.image.warning.title": "Uyarı!",
   "discussions.editor.image.warning.dismiss": "Tamam",
@@ -109,6 +72,44 @@
   "discussions.navigation.navigationBar.allTopics": "Konular",
   "discussions.navigation.navigationBar.myPosts": "İletilerim",
   "discussions.navigation.navigationBar.learners": "Öğrenciler",
+  "discussions.comments.comment.addComment": "Yorum ekle",
+  "discussions.comments.comment.addResponse": "Bir cevap ekle",
+  "discussions.comments.comment.abuseFlaggedMessage": "Personelin incelemesi için bildirilen içerik",
+  "discussions.actions.back.alt": "Listeye dön",
+  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
+  "discussions.comments.comment.loadMoreComments": "Daha fazla yorum yükle",
+  "discussions.comments.comment.loadMoreResponses": "Daha fazla yanıt yükle",
+  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
+  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
+  "discussions.comments.comment.commentTime": "{relativeTime} önce gönderildi",
+  "discussions.comments.comment.answer": "Cevap",
+  "discussions.comments.comment.answeredlabel": "Yanıtlandı olarak işaretleyen ",
+  "discussions.comments.comment.endorsed": "Doğrulandı",
+  "discussions.comments.comment.endorsedlabel": "Doğrulayan",
+  "discussions.actions.label": "Eylemler menüsü",
+  "discussions.editor.submit": "Gönder",
+  "discussions.editor.submitting": "Gönderiliyor",
+  "discussions.editor.cancel": "İptal",
+  "discussions.editor.error.empty": "Gönderi içeriği boş olamaz.",
+  "discussions.editor.delete.response.title": "Yanıtı sil",
+  "discussions.editor.delete.response.description": "Bu yanıtı kalıcı olarak silmek istediğinizden emin misiniz?",
+  "discussions.editor.delete.comment.title": "Yorumu sil",
+  "discussions.editor.delete.comment.description": "Bu yorumu kalıcı olarak silmek istediğinizden emin misiniz?",
+  "discussions.delete.confirmation.button.delete": "Sil",
+  "discussions.editor.response.response.title": "Uygunsuz içerik mi raporlayacaksınız?",
+  "discussions.editor.response.description": "Tartışma yöneticileri bu içeriği inceleyecek ve uygun işlemi yapacaktır.",
+  "discussions.editor.report.comment.title": "Uygunsuz içerik mi raporlayacaksınız?",
+  "discussions.editor.report.comment.description": "Tartışma yöneticileri bu içeriği inceleyecek ve uygun işlemi yapacaktır.",
+  "discussions.editor.comments.editReasonCode": "Düzenleme nedeni",
+  "discussions.editor.posts.editReasonCode.error": "Düzenleme nedenini seçin",
+  "discussions.comment.comments.editedBy": "Düzenleyen",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Gerekçe",
+  "discussions.post.closedBy": "Gönderiyi kapatan ",
+  "discussion.comment.time": "{time} önce",
+  "discussion.thread.notFound": "Tartışma zinciri bulunamadı",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "Forumlar",
   "discussions.posts.actionBar.searchAllPosts": "Tüm gönderilerde ara",
   "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
@@ -141,7 +142,7 @@
   "discussions.post.editor.anonymousPost": "Anonim olarak gönder",
   "discussions.post.editor.anonymousToPeersPost": "Akranlarına anonim olarak gönder",
   "discussions.editor.posts.editReasonCode": "Düzenleme nedeni",
-  "discussions.editor.posts.showPreview.button": "Önizlemeyi Göster",
+  "discussions.editor.posts.showPreview.button": "Önizlemeyi göster",
   "discussions.topic.noName.label": "İsimsiz kategori",
   "discussions.subtopic.noName.label": "İsimsiz alt kategori",
   "discussions.posts.filter.showALl": "Tümünü göster",
@@ -163,21 +164,22 @@
   "discussions.posts.sort.voteCount": "En çok beğenilenler",
   "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "anonim",
+  "discussions.post.addResponse": "Yanıt ekle",
   "discussions.post.lastResponse": "Son yanıt {time}",
   "discussions.post.postedOn": "{author} {authorLabel} tarafından {time} önce gönderildi",
   "discussions.post.contentReported": "Rapor edildi",
   "discussions.post.following": "Takip ediliyor",
   "discussions.post.follow": "Takip et",
-  "discussions.post.followed": "Followed",
-  "discussions.post.notFollowed": "Not Followed",
+  "discussions.post.followed": "İzlendi",
+  "discussions.post.notFollowed": "İzlenmedi",
   "discussions.post.answered": "Yanıtlandı",
   "discussions.post.unFollow": "Takibi bırak",
   "discussions.post.like": "Beğen",
   "discussions.post.removeLike": "Beğenmeme",
-  "discussions.post.liked": "liked",
-  "discussions.post.likes": "likes",
+  "discussions.post.liked": "beğendi",
+  "discussions.post.likes": "beğeni",
   "discussions.post.viewActivity": "Etkinliği görüntüle",
-  "discussions.post.activity": "Activity",
+  "discussions.post.activity": "Etkinlik",
   "discussions.post.closed": "Yanıtlar ve yorumlar için gönderi kapatıldı",
   "discussions.post.relatedTo": "Bunun ile ilgili",
   "discussions.editor.delete.post.title": "Gönderiyi sil",
@@ -194,17 +196,17 @@
   "discussions.post.editedBy": "Düzenleyen",
   "discussions.post.editReason": "Gerekçe",
   "discussions.post.postWithoutPreview": "Önizleme yok",
-  "discussions.post.follow.description": "you are following this post",
-  "discussions.post.unfollow.description": "you are not following this post",
+  "discussions.post.follow.description": "bu iletiyi izliyorsunuz",
+  "discussions.post.unfollow.description": "bu iletiyi izlemiyorsunuz",
   "discussions.topics.sort.message": "{sortBy} ölçütüne göre sıralandı",
   "discussions.topics.sort.lastActivity": "Son etkinlik",
   "discussions.topics.sort.commentCount": "En çok etkinlik",
   "discussions.topics.sort.courseStructure": "Ders Yapısı",
   "discussions.topics.unnamed.label": "İsimsiz kategori",
   "discussions.subtopics.unnamed.label": "İsimsiz alt kategori",
-  "tour.action.advance": "Next",
-  "tour.action.dismiss": "Dismiss",
-  "tour.action.end": "Okay",
-  "tour.body.notRespondedFilter": "Now you can filter discussions to find posts with no response.",
-  "tour.title.notRespondedFilter": "New filtering option!"
+  "tour.action.advance": "Sonraki",
+  "tour.action.dismiss": "İptal",
+  "tour.action.end": "Tamam",
+  "tour.body.notRespondedFilter": "Artık yanıt vermeyen iletileri bulmak için tartışmaları filtreleyebilirsiniz.",
+  "tour.title.notRespondedFilter": "Yeni filtreleme seçeneği!"
 }

src/i18n/messages/zh_CN.json

@@ -1,46 +1,6 @@
 {
   "navigation.course.tabs.label": "Course Material",
   "learn.course.tabs.navigation.overflow.menu": "More...",
-  "discussions.comments.comment.addResponse": "Add a response",
-  "discussions.comments.comment.addComment": "Add a comment",
-  "discussions.comments.comment.abuseFlaggedMessage": "Content reported for staff to review",
-  "discussions.actions.back.alt": "Back to list",
-  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
-  "discussions.comments.comment.loadMoreComments": "Load more comments",
-  "discussions.comments.comment.loadMoreResponses": "Load more responses",
-  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
-  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
-  "discussions.comments.comment.commentTime": "Posted {relativeTime}",
-  "discussions.comments.comment.answer": "Answer",
-  "discussions.comments.comment.answeredlabel": "Marked as answered by",
-  "discussions.comments.comment.endorsed": "Endorsed",
-  "discussions.comments.comment.endorsedlabel": "Endorsed by",
-  "discussions.actions.label": "Actions menu",
-  "discussions.actions.edit": "Edit",
-  "discussions.actions.pin": "Pin",
-  "discussions.actions.delete": "Delete",
-  "discussions.editor.submit": "Submit",
-  "discussions.editor.submitting": "Submitting",
-  "discussions.editor.cancel": "Cancel",
-  "discussions.editor.error.empty": "Post content cannot be empty.",
-  "discussions.editor.delete.response.title": "Delete response",
-  "discussions.editor.delete.response.description": "Are you sure you want to permanently delete this response?",
-  "discussions.editor.delete.comment.title": "Delete comment",
-  "discussions.editor.delete.comment.description": "Are you sure you want to permanently delete this comment?",
-  "discussions.delete.confirmation.button.delete": "Delete",
-  "discussions.editor.response.response.title": "Report inappropriate content?",
-  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.report.comment.title": "Report inappropriate content?",
-  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
-  "discussions.editor.comments.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.editReasonCode.error": "Select reason for editing",
-  "discussions.comment.comments.editedBy": "Edited by",
-  "discussions.comment.comments.reason": "Reason",
-  "discussions.post.closedBy": "Post closed by",
-  "discussion.comment.repliesHeading": "{count} replies for the response added",
-  "discussion.comment.time": "{time} ago",
-  "discussion.thread.notFound": "Thread not found",
   "discussions.topics.backAlt": "Back to topics list",
   "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
   "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
@@ -68,7 +28,10 @@
   "discussion.learner.posts": "Posts",
   "discussions.actions.button.alt": "Actions menu",
   "discussions.actions.copylink": "Copy link",
+  "discussions.actions.edit": "Edit",
+  "discussions.actions.pin": "Pin",
   "discussions.actions.unpin": "Unpin",
+  "discussions.actions.delete": "Delete",
   "discussions.confirmation.button.confirm": "Confirm",
   "discussions.actions.close": "Close",
   "discussions.actions.reopen": "Reopen",
@@ -109,6 +72,44 @@
   "discussions.navigation.navigationBar.allTopics": "Topics",
   "discussions.navigation.navigationBar.myPosts": "My posts",
   "discussions.navigation.navigationBar.learners": "Learners",
+  "discussions.comments.comment.addComment": "Add comment",
+  "discussions.comments.comment.addResponse": "Add a response",
+  "discussions.comments.comment.abuseFlaggedMessage": "Content reported for staff to review",
+  "discussions.actions.back.alt": "Back to list",
+  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
+  "discussions.comments.comment.loadMoreComments": "Load more comments",
+  "discussions.comments.comment.loadMoreResponses": "Load more responses",
+  "discussions.comments.comment.visibility": "This post is visible to {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
+  "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
+  "discussions.comments.comment.commentTime": "Posted {relativeTime}",
+  "discussions.comments.comment.answer": "Answer",
+  "discussions.comments.comment.answeredlabel": "Marked as answered by",
+  "discussions.comments.comment.endorsed": "Endorsed",
+  "discussions.comments.comment.endorsedlabel": "Endorsed by",
+  "discussions.actions.label": "Actions menu",
+  "discussions.editor.submit": "Submit",
+  "discussions.editor.submitting": "Submitting",
+  "discussions.editor.cancel": "Cancel",
+  "discussions.editor.error.empty": "Post content cannot be empty.",
+  "discussions.editor.delete.response.title": "Delete response",
+  "discussions.editor.delete.response.description": "Are you sure you want to permanently delete this response?",
+  "discussions.editor.delete.comment.title": "Delete comment",
+  "discussions.editor.delete.comment.description": "Are you sure you want to permanently delete this comment?",
+  "discussions.delete.confirmation.button.delete": "Delete",
+  "discussions.editor.response.response.title": "Report inappropriate content?",
+  "discussions.editor.response.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.report.comment.title": "Report inappropriate content?",
+  "discussions.editor.report.comment.description": "The discussion moderation team will review this content and take appropriate action.",
+  "discussions.editor.comments.editReasonCode": "Reason for editing",
+  "discussions.editor.posts.editReasonCode.error": "Select reason for editing",
+  "discussions.comment.comments.editedBy": "Edited by",
+  "discussions.comment.comments.fullStop": "•",
+  "discussions.comment.comments.reason": "Reason",
+  "discussions.post.closedBy": "Post closed by",
+  "discussion.comment.time": "{time} ago",
+  "discussion.thread.notFound": "Thread not found",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
   "discussions.app.title": "Discussions",
   "discussions.posts.actionBar.searchAllPosts": "Search all posts",
   "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
@@ -141,7 +142,7 @@
   "discussions.post.editor.anonymousPost": "Post anonymously",
   "discussions.post.editor.anonymousToPeersPost": "Post anonymously to peers",
   "discussions.editor.posts.editReasonCode": "Reason for editing",
-  "discussions.editor.posts.showPreview.button": "Show Preview",
+  "discussions.editor.posts.showPreview.button": "Show preview",
   "discussions.topic.noName.label": "Unnamed category",
   "discussions.subtopic.noName.label": "Unnamed subcategory",
   "discussions.posts.filter.showALl": "Show all",
@@ -163,6 +164,7 @@
   "discussions.posts.sort.voteCount": "Most likes",
   "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "anonymous",
+  "discussions.post.addResponse": "Add response",
   "discussions.post.lastResponse": "Last response {time}",
   "discussions.post.postedOn": "Posted {time} by {author} {authorLabel}",
   "discussions.post.contentReported": "Reported",

src/index.scss

@@ -41,10 +41,22 @@ $fa-font-path: "~font-awesome/fonts";
   outline: #EAE6E5 solid 2px;
 }
 
+.font-size-16 {
+  font-size: 16px;
+}
+
 .font-size-14 {
   font-size: 14px;
 }
 
+.font-size-12 {
+  font-size: 12px;
+}
+
+.font-size-8 {
+  font-size: 8px;
+}
+
 .font-weight-500 {
   font-weight: 500;
 }
@@ -57,9 +69,24 @@ $fa-font-path: "~font-awesome/fonts";
   font-family: "Inter";
 }
 
-.icon-size {
-  height: 20px !important;
+.post-footer-icon-dimentions {
+  width: 32px !important;
+  height: 32px !important;
+}
+
+.like-icon-dimentions {
+  width: 21px !important;
+  height: 23px !important;
+}
+
+.follow-icon-dimentions {
+  width: 21px !important;
+  height: 24px !important;
+}
+
+.dropdown-icon-dimentions {
   width: 20px !important;
+  height: 21px !important;
 }
 
 .post-summary-icons-dimensions {
@@ -67,6 +94,16 @@ $fa-font-path: "~font-awesome/fonts";
   width: 16px !important;
 }
 
+.post-summary-comment-count-dimensions {
+  height: 15.39px;
+  width: 15.5px
+}
+
+.post-summary-like-dimensions {
+  height: 16px;
+  width: 17px
+}
+
 .post-summary-timestamp {
   font-size: 12px !important;
   line-height: 20px !important;
@@ -77,6 +114,20 @@ $fa-font-path: "~font-awesome/fonts";
   border-right-style: solid;
 }
 
+.my-14px {
+  margin-top: 14px;
+  margin-bottom: 14px;
+}
+
+.my-10px {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.mb-14px {
+  margin-bottom: 14px;
+}
+
 .mr-0\.5 {
   margin-right: 2px;
 }
@@ -93,6 +144,31 @@ $fa-font-path: "~font-awesome/fonts";
   margin-left: 2px;
 }
 
+.mx-3px {
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+.mt-14px {
+  margin-top: 14px;
+}
+
+.mb-10px {
+  margin-bottom: 10px;
+}
+
+.mt-10px {
+  margin-top: 10px;
+}
+
+.mt-17px {
+  margin-top: 17px !important;
+}
+
+.mr-36px {
+  margin-right: 36.6px;
+}
+
 .badge-padding {
   padding-top: 1px;
   padding-bottom: 1px
@@ -102,7 +178,7 @@ $fa-font-path: "~font-awesome/fonts";
   background-color: unset !important;
 }
 
-.learner > a:hover {
+.learner>a:hover {
   background-color: #F2F0EF;
 }
 
@@ -111,14 +187,32 @@ $fa-font-path: "~font-awesome/fonts";
   padding-bottom: 10px;
 }
 
+.py-8px {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.pb-10px {
+  padding-bottom: 10px;
+}
+
+.pt-10px {
+  padding-top: 10px !important;
+}
+
 .px-10px {
   padding-left: 10px;
   padding-right: 10px;
 }
 
+.py-2px {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
+
 .question-icon-size {
-  width: 1.625rem;
-  height: 1.625rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .question-icon-position {
@@ -134,6 +228,7 @@ $fa-font-path: "~font-awesome/fonts";
 header {
   .logo {
     margin-right: 1rem;
+
     img {
       height: 1.75rem;
     }
@@ -142,6 +237,7 @@ header {
 
 #learner-posts-link {
   color: inherit;
+
   span[role=heading]:hover {
     text-decoration: underline;
   }
@@ -170,11 +266,12 @@ header {
   }
 }
 
-.pointer-cursor-hover :hover{
+.pointer-cursor-hover :hover {
   cursor: pointer;
 }
 
-.filter-bar:focus-visible, .filter-bar:focus {
+.filter-bar:focus-visible,
+.filter-bar:focus {
   outline: none;
 }
 
@@ -198,9 +295,9 @@ header {
     };
   };
 
-  .container-xl{
+  .container-xl {
     .course-title-lockup {
-      font-size: 1.125 rem;
+      font-size: 1.125rem;
     };
 
     .logo {
@@ -221,7 +318,7 @@ header {
 
   .container-xl {
     padding-left: 31px;
-    font-size: 1.125 rem;
+    font-size: 1.125rem;
 
     .nav {
       line-height: 28px;
@@ -239,7 +336,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 1;
+  z-index: 2;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
@@ -250,10 +347,10 @@ header {
 }
 
 .actions-dropdown {
-  z-index: 0;
+  z-index: 1;
 }
 
-.discussion-topic-group:last-of-type .divider{
+.discussion-topic-group:last-of-type .divider {
   display: none;
 }
 
@@ -269,6 +366,12 @@ header {
   z-index: 0;
 }
 
+.btn-icon.btn-icon-primary:hover {
+  background-color: #F2F0EF !important;
+  color: #00262B !important
+}
+
+
 @media only screen and (max-width: 767px) {
   body:not(.tox-force-desktop) .tox .tox-dialog {
     align-self: center;
@@ -286,3 +389,99 @@ header {
 .pgn__checkpoint {
   max-width: 340px !important;
 }
+
+.post-card-padding {
+  padding: 24px 24px 10px 24px;
+}
+
+.post-card-margin {
+  margin: 24px 24px 0px 24px;
+}
+
+.hover-card {
+  height: 36px;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15), 0px 4px 10px rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  background: #FFFFFF;
+  max-width: fit-content;
+  margin-left: auto;
+  margin-top: -2.063rem;
+  z-index: 1;
+  right: 32px;
+}
+
+.response-editor-position {
+  margin-top: 50px !important;
+}
+
+.hover-button:hover {
+  background-color: #F2F0EF !important;
+  height: 36px;
+  border: none;
+}
+
+.btn-tertiary:hover {
+  background-color: #F2F0EF;
+}
+
+.btn-tertiary:disabled {
+  color: #454545;
+  background-color: transparent;
+}
+
+.disable-div {
+  pointer-events: none;
+}
+
+.on-focus:focus-within {
+  outline: 2px solid black;
+}
+
+.html-loader p:last-child {
+  margin-bottom: 0px;
+}
+
+.post-card-comment {
+  outline: none;
+
+  &:not(:hover),
+  &:not(:focus) {
+    .hover-card {
+      display: none;
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    .hover-card {
+      display: flex;
+    }
+  }
+}
+
+.spinner-dimentions {
+  height: 24px;
+  width: 24px;
+}
+
+.MJX-TEX {
+  white-space: normal;
+}
+
+.font-style {
+  font-family: "Inter";
+  font-style: normal;
+}
+
+.in-context-navbar {
+  line-height: 44px;
+}
+
+.line-height-24 {
+  line-height: 24px;
+}
+
+.comments-sort {
+  margin-bottom: -44px;
+  z-index: 1;
+}