refactor: updated selector tag

Co-authored-by: adeel.tajamul <adeel.tajamul@arbisoft.com>

.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/ci.yml

@@ -34,4 +34,4 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v3

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'

package.json

@@ -34,22 +34,22 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "12.0.0",
-    "@edx/frontend-component-header": "4.0.0",
-    "@edx/frontend-platform": "4.2.0",
+    "@edx/frontend-component-footer": "11.2.0",
+    "@edx/frontend-component-header": "3.2.0",
+    "@edx/frontend-platform": "2.6.1",
     "@edx/paragon": "20.15.0",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
     "classnames": "2.3.1",
     "core-js": "3.21.1",
+    "dompurify": "^2.4.3",
     "formik": "2.2.9",
     "lodash.snakecase": "4.1.1",
     "prop-types": "15.8.1",
     "raw-loader": "4.0.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-mathjax-preview": "2.2.6",
     "react-redux": "7.2.6",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
@@ -68,8 +68,6 @@
     "@testing-library/user-event": "13.5.0",
     "axios-mock-adapter": "1.20.0",
     "babel-plugin-react-intl": "8.2.25",
-    "codecov": "3.8.3",
-    "es-check": "6.2.1",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "glob": "7.2.0",
     "husky": "7.0.4",

public/index.html

@@ -9,8 +9,182 @@
       href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
       type="image/x-icon"
     />
+    <script>
+      window.MathJax = {
+        tex: {
+          inlineMath: [
+            ["$", "$"],
+            ["\\\\(", "\\\\)"],
+            ["\\(", "\\)"],
+            ["[mathjaxinline]", "[/mathjaxinline]"],
+            ["\\begin{math}", "\\end{math}"],
+          ],
+          displayMath: [
+            ["[mathjax]", "[/mathjax]"],
+            ["$$", "$$"],
+            ["\\\\[", "\\\\]"],
+            ["\\[", "\\]"],
+            ["\\begin{displaymath}", "\\end{displaymath}"],
+            ["\\begin{equation}", "\\end{equation}"],
+          ],
+          processEscapes: true,
+          processEnvironments: true,
+          autoload: {
+            color: [],
+            colorv2: ["color"],
+          },
+          packages: { "[+]": ["noerrors"] },
+        },
+        options: {
+          ignoreHtmlClass: "tex2jax_ignore",
+          processHtmlClass: "tex2jax_process",
+        },
+        loader: {
+          load: ["input/asciimath", "[tex]/noerrors"],
+        },
+      };
+    </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/FilterBar.jsx

@@ -120,28 +120,27 @@ function FilterBar({
           <div className="d-flex flex-row py-2 justify-content-between">
             {filters.map((value) => (
               <Form.RadioSet
+                key={value.name}
                 name={value.name}
                 className="d-flex flex-column list-group list-group-flush"
                 value={selectedFilters[value.name]}
                 onChange={onFilterChange}
               >
-                {
-                  value.filters.map(filterName => {
-                    const element = allFilters.find(obj => obj.id === filterName);
-                    if (element) {
-                      return (
-                        <ActionItem
-                          id={element.id}
-                          label={element.label}
-                          value={element.value}
-                          selected={selectedFilters[value.name]}
-                        />
-                      );
-                    }
-                    return false;
-                  })
-                }
-
+                {value.filters.map(filterName => {
+                  const element = allFilters.find(obj => obj.id === filterName);
+                  if (element) {
+                    return (
+                      <ActionItem
+                        key={element.id}
+                        id={element.id}
+                        label={element.label}
+                        value={element.value}
+                        selected={selectedFilters[value.name]}
+                      />
+                    );
+                  }
+                  return false;
+                })}
               </Form.RadioSet>
             ))}
           </div>

src/components/HTMLLoader.jsx

@@ -1,53 +1,42 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
-import MathJax from 'react-mathjax-preview';
+import DOMPurify from 'dompurify';
 
-const baseConfig = {
-  showMathMenu: true,
-  tex2jax: {
-    inlineMath: [
-      ['$', '$'],
-      ['\\\\(', '\\\\)'],
-      ['\\(', '\\)'],
-      ['[mathjaxinline]', '[/mathjaxinline]'],
-      ['\\begin{math}', '\\end{math}'],
-    ],
-    displayMath: [
-      ['[mathjax]', '[/mathjax]'],
-      ['$$', '$$'],
-      ['\\\\[', '\\\\]'],
-      ['\\[', '\\]'],
-      ['\\begin{displaymath}', '\\end{displaymath}'],
-      ['\\begin{equation}', '\\end{equation}'],
-    ],
-  },
+import { logError } from '@edx/frontend-platform/logging';
 
-  skipStartupTypeset: true,
+import { useDebounce } from '../discussions/data/hooks';
+
+const defaultSanitizeOptions = {
+  USE_PROFILES: { html: true },
+  ADD_ATTR: ['columnalign'],
 };
 
-function HTMLLoader({ htmlNode, componentId, cssClassName }) {
-  const isLatex = htmlNode.match(/(\${1,2})((?:\\.|.)*)\1/)
-                  || htmlNode.match(/(\[mathjax](.+?)\[\/mathjax])+/)
-                  || htmlNode.match(/(\[mathjaxinline](.+?)\[\/mathjaxinline])+/)
-                  || htmlNode.match(/(\\begin\{math}(.+?)\\end\{math})+/)
-                  || htmlNode.match(/(\\begin\{displaymath}(.+?)\\end\{displaymath})+/)
-                  || htmlNode.match(/(\\begin\{equation}(.+?)\\end\{equation})+/)
-                  || htmlNode.match(/(\\\[(.+?)\\\])+/)
-                  || htmlNode.match(/(\\\((.+?)\\\))+/);
+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()))
+        .catch((err) => logError(`Typeset failed: ${err.message}`));
+      return promise;
+    }
+    if (debouncedPostContent) {
+      typeset(() => {
+        previewRef.current.innerHTML = sanitizedMath;
+      });
+    }
+  }, [debouncedPostContent]);
 
   return (
-    isLatex ? (
-      <MathJax
-        math={htmlNode}
-        id={componentId}
-        className={cssClassName}
-        sanitizeOptions={{ USE_PROFILES: { html: true } }}
-        config={baseConfig}
-      />
-    )
-      // eslint-disable-next-line react/no-danger
-      : <div className={cssClassName} id={componentId} dangerouslySetInnerHTML={{ __html: htmlNode }} />
+    <div ref={previewRef} className={cssClassName} id={componentId} data-testid={testId} />
+
   );
 }
 
@@ -55,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/NavigationBar/data/selectors.js

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+
+export const selectCourseTabs = state => state.courseTabs;

src/components/PostPreviewPane.jsx

@@ -29,17 +29,23 @@ function PostPreviewPane({
             className="float-right p-3"
             iconClassNames="icon-size"
           />
-          <HTMLLoader htmlNode={htmlNode} cssClassName="text-primary" />
+          <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="md"
+            size="sm"
             onClick={() => setShowPreviewPane(true)}
-            className={`text-primary-500 px-0 ${editExisting && 'mb-4.5'}`}
+            className={`text-primary-500 font-style p-0 ${editExisting && 'mb-4.5'}`}
+            style={{ lineHeight: '26px' }}
           >
             {intl.formatMessage(messages.showPreviewButton)}
           </Button>

src/components/Search.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import camelCase from 'lodash/camelCase';
 import { useDispatch, useSelector } from 'react-redux';
@@ -14,7 +14,6 @@ import postsMessages from '../discussions/posts/post-actions-bar/messages';
 import { setFilter as setTopicFilter } from '../discussions/topics/data/slices';
 
 function Search({ intl }) {
-  const [previousSearchValue, setPreviousSearchValue] = useState('');
   const dispatch = useDispatch();
   const { page } = useContext(DiscussionContext);
   const postSearch = useSelector(({ threads }) => threads.filters.search);
@@ -36,7 +35,6 @@ function Search({ intl }) {
     dispatch(setSearchQuery(''));
     dispatch(setTopicFilter(''));
     dispatch(setUsernameSearch(''));
-    setPreviousSearchValue('');
   };
 
   const onChange = (query) => {
@@ -44,7 +42,7 @@ function Search({ intl }) {
   };
 
   const onSubmit = (query) => {
-    if (query === '' || query === previousSearchValue) {
+    if (query === '') {
       return;
     }
     if (isPostSearch) {
@@ -54,7 +52,6 @@ function Search({ intl }) {
     } else if (page === 'learners') {
       dispatch(setUsernameSearch(query));
     }
-    setPreviousSearchValue(query);
   };
 
   useEffect(() => onClear(), [page]);

src/components/TinyMCEEditor.jsx

@@ -32,6 +32,7 @@ import 'tinymce/plugins/lists';
 import 'tinymce/plugins/emoticons';
 import 'tinymce/plugins/emoticons/js/emojis';
 import 'tinymce/plugins/charmap';
+import 'tinymce/plugins/paste';
 /* eslint import/no-webpack-loader-syntax: off */
 // eslint-disable-next-line import/no-unresolved
 import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
@@ -100,12 +101,13 @@ export default function TinyMCEEditor(props) {
           skin: false,
           menubar: false,
           branding: false,
+          paste_data_images: false,
           contextmenu: false,
           browser_spellcheck: true,
           a11y_advanced_options: true,
           autosave_interval: '1s',
           autosave_restore_when_empty: false,
-          plugins: 'autoresize autosave codesample link lists image imagetools code emoticons charmap',
+          plugins: 'autoresize autosave codesample link lists image imagetools code emoticons charmap paste',
           toolbar: 'undo redo'
                       + ' | formatselect | bold italic underline'
                       + ' | link blockquote openedx_code image'
@@ -117,6 +119,8 @@ 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,
           images_upload_handler: uploadHandler,

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',
@@ -190,6 +191,8 @@ export const Routes = {
     CATEGORY: `${BASE_PATH}/category/:category`,
     CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId`,
     TOPIC: `${BASE_PATH}/topics/:topicId`,
+    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId`,
+    TOPIC_POST_EDIT: `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
   },
 };
 

src/data/selectors.js

@@ -38,12 +38,6 @@ export const selectTopicsUnderCategory = createSelector(
   ),
 );
 
-export const selectSequences = createSelector(
-  selectChapters,
-  selectBlocks,
-  (chapterIds, blocks) => chapterIds?.flatMap(cId => blocks[cId].children.map(seqId => blocks[seqId])) || [],
-);
-
 export const selectArchivedTopics = createSelector(
   state => state.topics.topics,
   state => state.topics.archivedIds || [],

src/discussions/comments/CommentsView.jsx

@@ -1,239 +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 sortedComments = useMemo(() => [...filterPosts(comments, 'endorsed'),
-    ...filterPosts(comments, 'unendorsed')], [comments]);
-
-  return (
-    <>
-      {((hasMorePages && isLoading) || !isLoading)
-      && (
-      <div className="mx-4 text-primary-700" role="heading" aria-level="2" style={{ lineHeight: '28px' }}>
-        {endorsed === EndorsementStatus.ENDORSED
-          ? intl.formatMessage(messages.endorsedResponseCount, { num: sortedComments.length })
-          : intl.formatMessage(messages.responseCount, { num: sortedComments.length })}
-      </div>
-      )}
-
-      <div className="mx-4" role="list">
-        {sortedComments.map(comment => (
-          <Comment comment={comment} key={comment.id} postType={postType} isClosedPost={isClosed} />
-        ))}
-        {hasMorePages && !isLoading && (
-          <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
-        && (
-          <div className="card my-4 p-4 d-flex align-items-center">
-            <Spinner animation="border" variant="primary" />
-          </div>
-        )}
-        {!!sortedComments.length && !isClosed
-          && <ResponseEditor postId={postId} addWrappingDiv />}
-      </div>
-    </>
-
-  );
-}
-
-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, inContext,
-  } = 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 && (
-        inContext ? (
-          <>
-            <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': !inContext,
-        'p-4 rounded-0 border-0 mb-4': inContext,
-      })}
-      >
-        <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/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/Comment.jsx

@@ -1,169 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, useToggle } from '@edx/paragon';
-
-import HTMLLoader from '../../../components/HTMLLoader';
-import { ContentActions } from '../../../data/constants';
-import { AlertBanner, DeleteConfirmation, EndorsedAlertBanner } from '../../common';
-import { DiscussionContext } from '../../common/context';
-import { selectBlackoutDate } from '../../data/selectors';
-import { fetchThread } from '../../posts/data/thunks';
-import { inBlackoutDateRange } from '../../utils';
-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 CommentEditor from './CommentEditor';
-import CommentHeader from './CommentHeader';
-import { commentShape } from './proptypes';
-import Reply from './Reply';
-
-function Comment({
-  postType,
-  comment,
-  showFullThread = true,
-  isClosedPost,
-  intl,
-}) {
-  const dispatch = useDispatch();
-  const hasChildren = comment.childCount > 0;
-  const isNested = Boolean(comment.parentId);
-  const inlineReplies = useSelector(selectCommentResponses(comment.id));
-  const [isEditing, setEditing] = useState(false);
-  const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
-  const [isReplying, setReplying] = useState(false);
-  const hasMorePages = useSelector(selectCommentHasMorePages(comment.id));
-  const currentPage = useSelector(selectCommentCurrentPage(comment.id));
-  const blackoutDateRange = useSelector(selectBlackoutDate);
-  const {
-    courseId,
-  } = useContext(DiscussionContext);
-  useEffect(() => {
-    // If the comment has a parent comment, it won't have any children, so don't fetch them.
-    if (hasChildren && !currentPage && showFullThread) {
-      dispatch(fetchCommentResponses(comment.id, { page: 1 }));
-    }
-  }, [comment.id]);
-
-  const actionHandlers = {
-    [ContentActions.EDIT_CONTENT]: () => setEditing(true),
-    [ContentActions.ENDORSE]: async () => {
-      await dispatch(editComment(comment.id, { endorsed: !comment.endorsed }, ContentActions.ENDORSE));
-      await dispatch(fetchThread(comment.threadId, courseId));
-    },
-    [ContentActions.DELETE]: showDeleteConfirmation,
-    [ContentActions.REPORT]: () => dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged })),
-  };
-
-  const handleLoadMoreComments = () => (
-    dispatch(fetchCommentResponses(comment.id, { page: currentPage + 1 }))
-  );
-
-  return (
-    <div className={classNames({ 'py-2 my-3': showFullThread })}>
-      <div className="d-flex flex-column card" data-testid={`comment-${comment.id}`} role="listitem">
-        <DeleteConfirmation
-          isOpen={isDeleting}
-          title={intl.formatMessage(messages.deleteResponseTitle)}
-          description={intl.formatMessage(messages.deleteResponseDescription)}
-          onClose={hideDeleteConfirmation}
-          onDelete={() => {
-            dispatch(removeComment(comment.id));
-            hideDeleteConfirmation();
-          }}
-        />
-        <EndorsedAlertBanner postType={postType} content={comment} />
-        <div className="d-flex flex-column p-4.5">
-          <AlertBanner content={comment} />
-          <CommentHeader comment={comment} actionHandlers={actionHandlers} postType={postType} />
-          {isEditing
-            ? (
-              <CommentEditor comment={comment} onCloseEditor={() => setEditing(false)} formClasses="pt-3" />
-            )
-            : <HTMLLoader cssClassName="comment-body 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}
-              />
-            ))}
-          </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"
-            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)}
-              />
-            ) : (
-              <>
-                {(!isClosedPost && !inBlackoutDateRange(blackoutDateRange))
-                  && (
-                    <Button
-                      className="d-flex flex-grow mt-3 py-2 font-size-14"
-                      variant="outline-primary"
-                      style={{
-                        lineHeight: '20px',
-                      }}
-                      onClick={() => setReplying(true)}
-                    >
-                      {intl.formatMessage(messages.addComment)}
-                    </Button>
-                  )}
-              </>
-
-            )
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-Comment.propTypes = {
-  postType: PropTypes.oneOf(['discussion', 'question']).isRequired,
-  comment: commentShape.isRequired,
-  showFullThread: PropTypes.bool,
-  isClosedPost: PropTypes.bool,
-  intl: intlShape.isRequired,
-};
-
-Comment.defaultProps = {
-  showFullThread: true,
-  isClosedPost: false,
-};
-
-export default injectIntl(Comment);

src/discussions/comments/comment/CommentHeader.jsx

@@ -1,102 +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">
-          <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/Reply.jsx

@@ -1,112 +0,0 @@
-import React, { useState } 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 { Avatar, useToggle } from '@edx/paragon';
-
-import HTMLLoader from '../../../components/HTMLLoader';
-import { AvatarOutlineAndLabelColors, ContentActions } from '../../../data/constants';
-import {
-  ActionsDropdown, AlertBanner, AuthorLabel, DeleteConfirmation,
-} 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';
-
-function Reply({
-  reply,
-  postType,
-  intl,
-}) {
-  timeago.register('time-locale', timeLocale);
-  const dispatch = useDispatch();
-  const [isEditing, setEditing] = useState(false);
-  const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
-  const actionHandlers = {
-    [ContentActions.EDIT_CONTENT]: () => setEditing(true),
-    [ContentActions.ENDORSE]: () => dispatch(editComment(
-      reply.id,
-      { endorsed: !reply.endorsed },
-      ContentActions.ENDORSE,
-    )),
-    [ContentActions.DELETE]: showDeleteConfirmation,
-    [ContentActions.REPORT]: () => dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged })),
-  };
-  const authorAvatars = useSelector(selectAuthorAvatars(reply.author));
-  const colorClass = AvatarOutlineAndLabelColors[reply.authorLabel];
-  const hasAnyAlert = useAlertBannerVisible(reply);
-
-  return (
-    <div className="d-flex flex-column mt-4.5" data-testid={`reply-${reply.id}`} role="listitem">
-      <DeleteConfirmation
-        isOpen={isDeleting}
-        title={intl.formatMessage(messages.deleteCommentTitle)}
-        description={intl.formatMessage(messages.deleteCommentDescription)}
-        onClose={hideDeleteConfirmation}
-        onDelete={() => {
-          dispatch(removeComment(reply.id));
-          hideDeleteConfirmation();
-        }}
-      />
-
-      {hasAnyAlert && (
-        <div className="d-flex">
-          <div className="d-flex invisible">
-            <Avatar />
-          </div>
-          <div className="w-100">
-            <AlertBanner content={reply} intl={intl} />
-          </div>
-        </div>
-      )}
-
-      <div className="d-flex">
-        <div className="d-flex mr-3 mt-2.5">
-          <Avatar
-            className={`ml-0.5 mt-0.5 border-0 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
-            alt={reply.author}
-            src={authorAvatars?.imageUrlSmall}
-            style={{
-              width: '32px',
-              height: '32px',
-            }}
-          />
-        </div>
-        <div
-          className="bg-light-300 px-4 pb-2 pt-2.5 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 />
-            <ActionsDropdown
-              commentOrPost={{
-                ...reply,
-                postType,
-              }}
-              actionHandlers={actionHandlers}
-            />
-          </div>
-          {isEditing
-            ? <CommentEditor comment={reply} onCloseEditor={() => setEditing(false)} />
-            : <HTMLLoader componentId="reply" htmlNode={reply.renderedBody} cssClassName="text-primary-500" />}
-        </div>
-      </div>
-      <div className="text-gray-500 align-self-end mt-2" title={reply.createdAt}>
-        {timeago.format(reply.createdAt, 'time-locale')}
-      </div>
-    </div>
-  );
-}
-Reply.propTypes = {
-  postType: PropTypes.oneOf(['discussion', 'question']).isRequired,
-  reply: commentShape.isRequired,
-  intl: intlShape.isRequired,
-};
-export default injectIntl(Reply);

src/discussions/comments/comment/ResponseEditor.jsx

@@ -1,66 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-import { useSelector } from 'react-redux';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
-
-import { DiscussionContext } from '../../common/context';
-import { selectBlackoutDate } from '../../data/selectors';
-import { inBlackoutDateRange } from '../../utils';
-import messages from '../messages';
-import CommentEditor from './CommentEditor';
-
-function ResponseEditor({
-  postId,
-  intl,
-  addWrappingDiv,
-}) {
-  const { inContext } = useContext(DiscussionContext);
-  const [addingResponse, setAddingResponse] = useState(false);
-
-  useEffect(() => {
-    setAddingResponse(false);
-  }, [postId]);
-
-  const blackoutDateRange = useSelector(selectBlackoutDate);
-
-  return addingResponse
-    ? (
-      <div className={classNames({ 'bg-white p-4 mb-4 rounded': addWrappingDiv })}>
-        <CommentEditor
-          comment={{ threadId: postId }}
-          edit={false}
-          onCloseEditor={() => setAddingResponse(false)}
-        />
-      </div>
-    )
-    : !inBlackoutDateRange(blackoutDateRange) && (
-      <div className={classNames({ 'mb-4': addWrappingDiv }, 'actions d-flex')}>
-        <Button
-          variant="primary"
-          className={classNames('px-2.5 py-2 font-size-14', { 'w-100': inContext })}
-          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,11 +23,13 @@ function ActionsDropdown({
   commentOrPost,
   disabled,
   actionHandlers,
+  iconSize,
+  dropDownIconSize,
 }) {
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = useState(null);
   const actions = useActions(commentOrPost);
-  const { inContext } = useContext(DiscussionContext);
+  const { enableInContextSidebar } = useContext(DiscussionContext);
   const handleActions = (action) => {
     const actionFunction = actionHandlers[action];
     if (actionFunction) {
@@ -49,40 +51,43 @@ function ActionsDropdown({
         src={MoreHoriz}
         iconAs={Icon}
         disabled={disabled}
-        size="sm"
+        size={iconSize}
         ref={setTarget}
+        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimentions' : ''}
       />
-      <ModalPopup
-        onClose={close}
-        positionRef={target}
-        isOpen={isOpen}
-        placement={inContext ? 'left' : 'auto-start'}
-      >
-        <div
-          className="bg-white p-1 shadow d-flex flex-column"
-          data-testid="actions-dropdown-modal-popup"
+      <div className="actions-dropdown">
+        <ModalPopup
+          onClose={close}
+          positionRef={target}
+          isOpen={isOpen}
+          placement={enableInContextSidebar ? 'left' : 'auto-start'}
         >
-          {actions.map(action => (
-            <React.Fragment key={action.id}>
-              {action.action === ContentActions.DELETE
-              && <Dropdown.Divider />}
+          <div
+            className="bg-white p-1 shadow d-flex flex-column"
+            data-testid="actions-dropdown-modal-popup"
+          >
+            {actions.map(action => (
+              <React.Fragment key={action.id}>
+                {(action.action === ContentActions.DELETE)
+                  && <Dropdown.Divider />}
 
-              <Dropdown.Item
-                as={Button}
-                variant="tertiary"
-                size="inline"
-                onClick={() => {
-                  close();
-                  handleActions(action.action);
-                }}
-                className="d-flex justify-content-start py-1.5 mr-4"
-              >
-                <Icon src={action.icon} className="mr-1" /> {intl.formatMessage(action.label)}
-              </Dropdown.Item>
-            </React.Fragment>
-          ))}
-        </div>
-      </ModalPopup>
+                <Dropdown.Item
+                  as={Button}
+                  variant="tertiary"
+                  size="inline"
+                  onClick={() => {
+                    close();
+                    handleActions(action.action);
+                  }}
+                  className="d-flex justify-content-start py-1.5 mr-4"
+                >
+                  <Icon src={action.icon} className="mr-1" /> {intl.formatMessage(action.label)}
+                </Dropdown.Item>
+              </React.Fragment>
+            ))}
+          </div>
+        </ModalPopup>
+      </div>
     </>
   );
 }
@@ -92,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

@@ -6,11 +6,13 @@ import { useSelector } from 'react-redux';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
-import { Error } from '@edx/paragon/icons';
+import { Report } from '@edx/paragon/icons';
 
-import { commentShape } from '../comments/comment/proptypes';
-import messages from '../comments/messages';
-import { selectModerationSettings, selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../data/selectors';
+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';
 
@@ -20,40 +22,56 @@ function AlertBanner({
 }) {
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
+  const userIsGlobalStaff = useSelector(selectUserIsStaff);
   const { reasonCodesEnabled } = useSelector(selectModerationSettings);
   const userIsContentAuthor = getAuthenticatedUser().username === content.author;
-  const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsContentAuthor || userIsGroupTa);
   const canSeeReportedBanner = content?.abuseFlagged;
+  const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
+    || userIsGlobalStaff || userIsContentAuthor
+  );
 
   return (
     <>
       {canSeeReportedBanner && (
-        <Alert icon={Error} 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', 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/Confirmation.jsx

@@ -6,13 +6,16 @@ import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 
 import messages from '../messages';
 
-function DeleteConfirmation({
+function Confirmation({
   intl,
   isOpen,
   title,
   description,
   onClose,
-  onDelete,
+  comfirmAction,
+  closeButtonVaraint,
+  confirmButtonVariant,
+  confirmButtonText,
 }) {
   return (
     <ModalDialog title={title} isOpen={isOpen} hasCloseButton={false} onClose={onClose} zIndex={5000}>
@@ -26,11 +29,11 @@ function DeleteConfirmation({
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <ActionRow>
-          <ModalDialog.CloseButton variant="tertiary">
-            {intl.formatMessage(messages.deleteConfirmationCancel)}
+          <ModalDialog.CloseButton variant={closeButtonVaraint}>
+            {intl.formatMessage(messages.confirmationCancel)}
           </ModalDialog.CloseButton>
-          <Button variant="primary" onClick={onDelete}>
-            {intl.formatMessage(messages.deleteConfirmationDelete)}
+          <Button variant={confirmButtonVariant} onClick={comfirmAction}>
+            { confirmButtonText || intl.formatMessage(messages.confirmationConfirm)}
           </Button>
         </ActionRow>
       </ModalDialog.Footer>
@@ -38,13 +41,22 @@ function DeleteConfirmation({
   );
 }
 
-DeleteConfirmation.propTypes = {
+Confirmation.propTypes = {
   intl: intlShape.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
+  comfirmAction: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
+  closeButtonVaraint: PropTypes.string,
+  confirmButtonVariant: PropTypes.string,
+  confirmButtonText: PropTypes.string,
 };
 
-export default injectIntl(DeleteConfirmation);
+Confirmation.defaultProps = {
+  closeButtonVaraint: 'default',
+  confirmButtonVariant: 'primary',
+  confirmButtonText: '',
+};
+
+export default injectIntl(Confirmation);

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/common/context.js

@@ -6,7 +6,7 @@ export const DiscussionContext = React.createContext({
   courseId: null,
   postId: null,
   topicId: null,
-  inContext: false,
+  enableInContextSidebar: false,
   category: null,
   learnerUsername: null,
 });

src/discussions/common/index.js

@@ -1,5 +1,5 @@
 export { default as ActionsDropdown } from './ActionsDropdown';
 export { default as AlertBanner } from './AlertBanner';
 export { default as AuthorLabel } from './AuthorLabel';
-export { default as DeleteConfirmation } from './DeleteConfirmation';
+export { default as Confirmation } from './Confirmation';
 export { default as EndorsedAlertBanner } from './EndorsedAlertBanner';

src/discussions/data/hooks.js

@@ -1,6 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import {
-  useContext, useEffect, useRef, useState,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
 } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,20 +13,30 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { AppContext } from '@edx/frontend-platform/react';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
-import { Routes } from '../../data/constants';
+import { RequestStatus, Routes } from '../../data/constants';
 import { selectTopicsUnderCategory } from '../../data/selectors';
 import { fetchCourseBlocks } from '../../data/thunks';
 import { DiscussionContext } from '../common/context';
 import { clearRedirect } from '../posts/data';
+import { threadsLoadingStatus } from '../posts/data/selectors';
 import { selectTopics } from '../topics/data/selectors';
-import { fetchCourseTopics } from '../topics/data/thunks';
-import { discussionsPath } from '../utils';
+import tourCheckpoints from '../tours/constants';
+import { selectTours } from '../tours/data/selectors';
+import { updateTourShowStatus } from '../tours/data/thunks';
+import messages from '../tours/messages';
+import { discussionsPath, inBlackoutDateRange } from '../utils';
 import {
-  selectAreThreadsFiltered, selectLearnersTabEnabled,
+  selectAreThreadsFiltered,
+  selectBlackoutDate,
+  selectEnableInContext,
+  selectIsCourseAdmin,
+  selectIsCourseStaff,
+  selectLearnersTabEnabled,
   selectModerationSettings,
   selectPostThreadCount,
   selectUserHasModerationPrivileges,
   selectUserIsGroupTa,
+  selectUserIsStaff,
 } from './selectors';
 import { fetchCourseConfig } from './thunks';
 
@@ -34,27 +47,28 @@ export function useTotalTopicThreadCount() {
     return 0;
   }
 
-  return Object.keys(topics).reduce((total, topicId) => {
-    const topic = topics[topicId];
-    return total + topic.threadCounts.discussion + topic.threadCounts.question;
-  }, 0);
+  return Object.keys(topics)
+    .reduce((total, topicId) => {
+      const topic = topics[topicId];
+      return total + topic.threadCounts.discussion + topic.threadCounts.question;
+    }, 0);
 }
 
 export const useSidebarVisible = () => {
+  const enableInContext = useSelector(selectEnableInContext);
+  const isViewingTopics = useRouteMatch(Routes.TOPICS.ALL);
+  const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
-  const isViewingTopics = useRouteMatch(Routes.TOPICS.PATH);
-  const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
+  const isThreadsEmpty = Boolean(useSelector(threadsLoadingStatus()) === RequestStatus.SUCCESSFUL && !totalThreads);
+  const isIncontextTopicsView = Boolean(useRouteMatch(Routes.TOPICS.PATH) && enableInContext);
+  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics?.isExact || isViewingLearners));
 
-  if (isFiltered) {
+  if (isIncontextTopicsView) {
     return true;
   }
 
-  if (isViewingTopics || isViewingLearners) {
-    return true;
-  }
-
-  return totalThreads > 0;
+  return !hideSidebar;
 };
 
 export function useCourseDiscussionData(courseId) {
@@ -64,7 +78,6 @@ export function useCourseDiscussionData(courseId) {
   useEffect(() => {
     async function fetchBaseData() {
       await dispatch(fetchCourseConfig(courseId));
-      await dispatch(fetchCourseTopics(courseId));
       await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
     }
 
@@ -72,7 +85,7 @@ export function useCourseDiscussionData(courseId) {
   }, [courseId]);
 }
 
-export function useRedirectToThread(courseId, inContext) {
+export function useRedirectToThread(courseId, enableInContextSidebar) {
   const dispatch = useDispatch();
   const redirectToThread = useSelector(
     (state) => state.threads.redirectToThread,
@@ -85,7 +98,7 @@ export function useRedirectToThread(courseId, inContext) {
     // stored in redirectToThread
     if (redirectToThread) {
       dispatch(clearRedirect());
-      const newLocation = discussionsPath(Routes.COMMENTS.PAGES[inContext ? 'topics' : 'my-posts'], {
+      const newLocation = discussionsPath(Routes.COMMENTS.PAGES[enableInContextSidebar ? 'topics' : 'my-posts'], {
         courseId,
         postId: redirectToThread.threadId,
         topicId: redirectToThread.topicId,
@@ -97,7 +110,7 @@ export function useRedirectToThread(courseId, inContext) {
 
 export function useIsOnDesktop() {
   const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.large.minWidth;
+  return windowSize.width >= breakpoints.medium.minWidth;
 }
 
 export function useIsOnXLDesktop() {
@@ -174,3 +187,61 @@ export const useCurrentDiscussionTopic = () => {
   }
   return null;
 };
+
+export const useUserCanAddThreadInBlackoutDate = () => {
+  const blackoutDateRange = useSelector(selectBlackoutDate);
+  const isUserAdmin = useSelector(selectUserIsStaff);
+  const userHasModerationPrivilages = useSelector(selectUserHasModerationPrivileges);
+  const isUserGroupTA = useSelector(selectUserIsGroupTa);
+  const isCourseAdmin = useSelector(selectIsCourseAdmin);
+  const isCourseStaff = useSelector(selectIsCourseStaff);
+  const isInBlackoutDateRange = inBlackoutDateRange(blackoutDateRange);
+
+  return (!(isInBlackoutDateRange)
+          || (isUserAdmin || userHasModerationPrivilages || isUserGroupTA || isCourseAdmin || isCourseStaff));
+};
+
+function camelToConstant(string) {
+  return string.replace(/[A-Z]/g, (match) => `_${match}`).toUpperCase();
+}
+
+export const useTourConfiguration = (intl) => {
+  const dispatch = useDispatch();
+
+  const { enableInContextSidebar } = useContext(DiscussionContext);
+  const tours = useSelector(selectTours);
+
+  return tours.map((tour) => (
+    {
+      tourId: tour.tourName,
+      advanceButtonText: intl.formatMessage(messages.advanceButtonText),
+      dismissButtonText: intl.formatMessage(messages.dismissButtonText),
+      endButtonText: intl.formatMessage(messages.endButtonText),
+      enabled: tour && Boolean(tour.showTour && !enableInContextSidebar),
+      onDismiss: () => dispatch(updateTourShowStatus(tour.id)),
+      onEnd: () => dispatch(updateTourShowStatus(tour.id)),
+      checkpoints: tourCheckpoints(intl)[camelToConstant(tour.tourName)],
+    }
+  ));
+};
+
+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/data/hooks.test.jsx

@@ -1,15 +1,33 @@
 import { render } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
+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 { useCurrentDiscussionTopic } from './hooks';
+import { getCourseConfigApiUrl } from './api';
+import { useCurrentDiscussionTopic, useUserCanAddThreadInBlackoutDate } from './hooks';
+import { fetchCourseConfig } from './thunks';
 
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const courseConfigApiUrl = getCourseConfigApiUrl();
 let store;
-initializeMockApp();
+let axiosMock;
+
+const generateApiResponse = (blackouts = [], isCourseAdmin = false) => ({
+  blackouts,
+  hasModerationPrivileges: false,
+  isGroupTa: false,
+  isCourseAdmin,
+  isCourseStaff: false,
+  isUserAdmin: false,
+});
+
 describe('Hooks', () => {
   describe('useCurrentDiscussionTopic', () => {
     function ComponentWithHook() {
@@ -39,6 +57,7 @@ describe('Hooks', () => {
     }
 
     beforeEach(() => {
+      initializeMockApp();
       store = initializeStore({
         blocks: {
           blocks: {
@@ -82,4 +101,75 @@ describe('Hooks', () => {
       expect(queryByText('null')).toBeInTheDocument();
     });
   });
+
+  describe('useUserCanAddThreadInBlackoutDate', () => {
+    function ComponentWithHook() {
+      const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
+      return (
+        <div>
+          {String(userCanAddThreadInBlackoutDate)}
+        </div>
+      );
+    }
+
+    function renderComponent() {
+      return render(
+        <IntlProvider locale="en">
+          <AppProvider store={store}>
+            <ComponentWithHook />
+          </AppProvider>
+        </IntlProvider>,
+      );
+    }
+    describe('User can add Thread in blackoutdates ', () => {
+      beforeEach(() => {
+        initializeMockApp({
+          authenticatedUser: {
+            userId: 3,
+            username: 'abc123',
+            administrator: true,
+            roles: [],
+          },
+        });
+        axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+        Factory.resetAll();
+        store = initializeStore();
+      });
+
+      test('when blackoutdates are not active and Role is Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([], false));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are not active and Role is not Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([], true));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are active and Role is Learner return false', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([{
+            start: '2022-11-25T00:00:00Z',
+            end: '2050-11-25T23:59:00Z',
+          }], false));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('false')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are active and Role is not Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([
+            { start: '2022-11-25T00:00:00Z', end: '2050-11-25T23:59:00Z' }], true));
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+    });
+  });
 });

src/discussions/data/selectors.js

@@ -24,6 +24,12 @@ export const selectBlackoutDate = state => state.config.blackouts;
 
 export const selectGroupAtSubsection = state => state.config.groupAtSubsection;
 
+export const selectIsCourseAdmin = state => state.config.isCourseAdmin;
+
+export const selectIsCourseStaff = state => state.config.isCourseStaff;
+
+export const selectEnableInContext = state => state.config.enableInContext;
+
 export const selectModerationSettings = state => ({
   postCloseReasons: state.config.postCloseReasons,
   editReasons: state.config.editReasons,
@@ -47,7 +53,7 @@ export function selectAreThreadsFiltered(state) {
 
 export function selectTopicThreadCount(topicId) {
   return state => {
-    const topic = state.topics.topics[topicId];
+    const topic = topicId && state.topics?.topics[topicId];
     if (!topic) {
       return 0;
     }

src/discussions/data/slices.js

@@ -14,6 +14,8 @@ const configSlice = createSlice({
     groupAtSubsection: false,
     hasModerationPrivileges: false,
     isGroupTa: false,
+    isCourseAdmin: false,
+    isCourseStaff: false,
     isUserAdmin: false,
     learnersTabEnabled: false,
     settings: {
@@ -25,6 +27,7 @@ const configSlice = createSlice({
     reasonCodesEnabled: false,
     editReasons: [],
     postCloseReasons: [],
+    enableInContext: false,
   },
   reducers: {
     fetchConfigRequest: (state) => {

src/discussions/data/thunks.js

@@ -3,7 +3,7 @@ import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
 import {
-  LearnersOrdering,
+  DiscussionProvider, LearnersOrdering,
   PostsStatusFilter,
 } from '../../data/constants';
 import { setSortedBy } from '../learners/data';
@@ -36,7 +36,10 @@ export function fetchCourseConfig(courseId) {
         learnerSort = LearnersOrdering.BY_FLAG;
       }
 
-      dispatch(fetchConfigSuccess(camelCaseObject(config)));
+      dispatch(fetchConfigSuccess(camelCaseObject({
+        ...config,
+        enable_in_context: config.provider === DiscussionProvider.OPEN_EDX,
+      })));
       dispatch(setSortedBy(learnerSort));
       dispatch(setStatusFilter(postsFilterStatus));
     } catch (error) {

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/DiscussionSidebar.jsx

@@ -14,51 +14,72 @@ import { DiscussionContext } from '../common/context';
 import {
   useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
 } from '../data/hooks';
-import { selectconfigLoadingStatus } from '../data/selectors';
+import { selectconfigLoadingStatus, selectEnableInContext } from '../data/selectors';
+import { TopicPostsView, TopicsView as InContextTopicsView } from '../in-context-topics';
 import { LearnerPostsView, LearnersView } from '../learners';
 import { PostsView } from '../posts';
-import { TopicsView } from '../topics';
+import { TopicsView as LegacyTopicsView } from '../topics';
 
 export default function DiscussionSidebar({ displaySidebar, postActionBarRef }) {
   const location = useLocation();
   const isOnDesktop = useIsOnDesktop();
   const isOnXLDesktop = useIsOnXLDesktop();
+  const { enableInContextSidebar } = useContext(DiscussionContext);
+  const enableInContext = useSelector(selectEnableInContext);
   const configStatus = useSelector(selectconfigLoadingStatus);
   const redirectToLearnersTab = useShowLearnersTab();
   const sidebarRef = useRef(null);
   const postActionBarHeight = useContainerSize(postActionBarRef);
   const { height: windowHeight } = useWindowSize();
-  const { inContext } = useContext(DiscussionContext);
 
   useEffect(() => {
-    if (sidebarRef && postActionBarHeight && !inContext) {
+    if (sidebarRef && postActionBarHeight && !enableInContextSidebar) {
       if (isOnDesktop) {
         sidebarRef.current.style.maxHeight = `${windowHeight - postActionBarHeight}px`;
       }
       sidebarRef.current.style.minHeight = `${windowHeight - postActionBarHeight}px`;
       sidebarRef.current.style.top = `${postActionBarHeight}px`;
     }
-  }, [sidebarRef, postActionBarHeight, inContext]);
+  }, [sidebarRef, postActionBarHeight, enableInContextSidebar]);
 
   return (
     <div
       ref={sidebarRef}
-      className={classNames('flex-column  position-sticky', {
+      className={classNames('flex-column position-sticky', {
         'd-none': !displaySidebar,
-        'd-flex overflow-auto': displaySidebar,
+        'd-flex overflow-auto box-shadow-centered-1': displaySidebar,
         'w-100': !isOnDesktop,
         'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
         'w-25 sidebar-XL-width': isOnXLDesktop,
-        'min-content-height': !inContext,
+        'min-content-height': !enableInContextSidebar,
       })}
       data-testid="sidebar"
     >
       <Switch>
+        {enableInContext && !enableInContextSidebar && (
+          <Route
+            path={Routes.TOPICS.ALL}
+            component={InContextTopicsView}
+            exact
+          />
+        )}
+        {enableInContext && !enableInContextSidebar && (
+          <Route
+            path={[
+              Routes.TOPICS.TOPIC,
+              Routes.TOPICS.CATEGORY,
+              Routes.TOPICS.TOPIC_POST,
+              Routes.TOPICS.TOPIC_POST_EDIT,
+            ]}
+            component={TopicPostsView}
+            exact
+          />
+        )}
         <Route
-          path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.TOPICS.CATEGORY, Routes.POSTS.MY_POSTS]}
+          path={[Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS, Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
           component={PostsView}
         />
-        <Route path={Routes.TOPICS.PATH} component={TopicsView} />
+        <Route path={Routes.TOPICS.PATH} component={LegacyTopicsView} />
         {redirectToLearnersTab && (
           <Route path={Routes.LEARNERS.POSTS} component={LearnerPostsView} />
         )}
@@ -66,13 +87,13 @@ export default function DiscussionSidebar({ displaySidebar, postActionBarRef })
           <Route path={Routes.LEARNERS.PATH} component={LearnersView} />
         )}
         {configStatus === RequestStatus.SUCCESSFUL && (
-        <Redirect
-          from={Routes.DISCUSSIONS.PATH}
-          to={{
-            ...location,
-            pathname: Routes.POSTS.ALL_POSTS,
-          }}
-        />
+          <Redirect
+            from={Routes.DISCUSSIONS.PATH}
+            to={{
+              ...location,
+              pathname: Routes.POSTS.ALL_POSTS,
+            }}
+          />
         )}
       </Switch>
     </div>

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -12,60 +12,53 @@ import { getConfig } from '@edx/frontend-platform';
 
 import { PostActionsBar } from '../../components';
 import { CourseTabsNavigation } from '../../components/NavigationBar';
+import { selectCourseTabs } from '../../components/NavigationBar/data/selectors';
 import { ALL_ROUTES, DiscussionProvider, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
 import {
   useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useShowLearnersTab, useSidebarVisible,
 } from '../data/hooks';
-import { selectDiscussionProvider } from '../data/selectors';
+import { selectDiscussionProvider, selectEnableInContext } from '../data/selectors';
 import { EmptyLearners, EmptyPosts, EmptyTopics } from '../empty-posts';
+import { EmptyTopic as InContextEmptyTopics } from '../in-context-topics/components';
 import messages from '../messages';
-import { BreadcrumbMenu, LegacyBreadcrumbMenu, NavigationBar } from '../navigation';
+import { LegacyBreadcrumbMenu, NavigationBar } from '../navigation';
+import { selectPostEditorVisible } from '../posts/data/selectors';
+import DiscussionsProductTour from '../tours/DiscussionsProductTour';
 import { postMessageToParent } from '../utils';
 import BlackoutInformationBanner from './BlackoutInformationBanner';
 import DiscussionContent from './DiscussionContent';
 import DiscussionSidebar from './DiscussionSidebar';
-import InformationBanner from './InformationsBanner';
+import InformationBanner from './InformationBanner';
 
 export default function DiscussionsHome() {
   const location = useLocation();
   const postActionBarRef = useRef(null);
-  const postEditorVisible = useSelector(
-    (state) => state.threads.postEditorVisible,
-  );
-  const {
-    params: { page },
-  } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`);
-
+  const postEditorVisible = useSelector(selectPostEditorVisible);
+  const provider = useSelector(selectDiscussionProvider);
+  const enableInContext = useSelector(selectEnableInContext);
+  const { courseNumber, courseTitle, org } = useSelector(selectCourseTabs);
+  const { params: { page } } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`);
   const { params: { path } } = useRouteMatch(`${Routes.DISCUSSIONS.PATH}/:path*`);
   const { params } = useRouteMatch(ALL_ROUTES);
   const isRedirectToLearners = useShowLearnersTab();
-  const isFeedbackBannerVisible = getConfig().DISPLAY_FEEDBACK_BANNER === 'true';
-
-  const {
-    courseId,
-    postId,
-    topicId,
-    category,
-    learnerUsername,
-  } = params;
-  const inContext = new URLSearchParams(location.search).get('inContext') !== null;
-  // Display the content area if we are currently viewing/editing a post or creating one.
-  const displayContentArea = postId || postEditorVisible || (learnerUsername && postId);
-  let displaySidebar = useSidebarVisible();
-
   const isOnDesktop = useIsOnDesktop();
+  let displaySidebar = useSidebarVisible();
+  const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
+  const isFeedbackBannerVisible = getConfig().DISPLAY_FEEDBACK_BANNER === 'true';
+  const {
+    courseId, postId, topicId, category, learnerUsername,
+  } = params;
 
-  const { courseNumber, courseTitle, org } = useSelector((state) => state.courseTabs);
-  if (displayContentArea) {
-    // If the window is larger than a particular size, show the sidebar for navigating between posts/topics.
-    // However, for smaller screens or embeds, only show the sidebar if the content area isn't displayed.
-    displaySidebar = isOnDesktop;
-  }
-
-  const provider = useSelector(selectDiscussionProvider);
   useCourseDiscussionData(courseId);
-  useRedirectToThread(courseId, inContext);
+  useRedirectToThread(courseId, enableInContextSidebar);
+
+  /*  Display the content area if we are currently viewing/editing a post or creating one.
+  If the window is larger than a particular size, show the sidebar for navigating between posts/topics.
+  However, for smaller screens or embeds, onlyshow the sidebar if the content area isn't displayed. */
+  const displayContentArea = (postId || postEditorVisible || (learnerUsername && postId));
+  if (displayContentArea) { displaySidebar = isOnDesktop; }
+
   useEffect(() => {
     if (path && path !== 'undefined') {
       postMessageToParent('discussions.navigate', { path });
@@ -78,41 +71,47 @@ export default function DiscussionsHome() {
       courseId,
       postId,
       topicId,
-      inContext,
+      enableInContextSidebar,
       category,
       learnerUsername,
     }}
     >
-      {!inContext && <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />}
+      {!enableInContextSidebar && <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />}
       <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
-        {!inContext && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
+        {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
         <div
-          className={classNames('header-action-bar', { 'shadow-none border-light-300 border-bottom': inContext })}
+          className={classNames('header-action-bar', {
+            'shadow-none border-light-300 border-bottom': enableInContextSidebar,
+          })}
           ref={postActionBarRef}
         >
           <div
             className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
-              'pl-4 pr-2.5 py-1.5': inContext,
+              'pl-4 pr-3 py-0': enableInContextSidebar,
             })}
           >
-            {!inContext && <Route path={Routes.DISCUSSIONS.PATH} component={NavigationBar} />}
-            <PostActionsBar inContext={inContext} />
+            {!enableInContextSidebar && <Route path={Routes.DISCUSSIONS.PATH} component={NavigationBar} />}
+            <PostActionsBar />
           </div>
           {isFeedbackBannerVisible && <InformationBanner />}
           <BlackoutInformationBanner />
         </div>
-        {!inContext && (
+        {provider === DiscussionProvider.LEGACY && (
           <Route
             path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
-            component={provider === DiscussionProvider.LEGACY ? LegacyBreadcrumbMenu : BreadcrumbMenu}
+            component={LegacyBreadcrumbMenu}
           />
         )}
+
         <div className="d-flex flex-row">
           <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
           {displayContentArea && <DiscussionContent />}
           {!displayContentArea && (
             <Switch>
-              <Route path={Routes.TOPICS.PATH} component={EmptyTopics} />
+              <Route
+                path={Routes.TOPICS.PATH}
+                component={(enableInContext || enableInContextSidebar) ? InContextEmptyTopics : EmptyTopics}
+              />
               <Route
                 path={Routes.POSTS.MY_POSTS}
                 render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyMyPosts} />}
@@ -121,12 +120,13 @@ 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>
+        {!enableInContextSidebar && <DiscussionsProductTour />}
       </main>
-      {!inContext && <Footer />}
+      {!enableInContextSidebar && <Footer />}
     </DiscussionContext.Provider>
   );
 }

src/discussions/discussions-home/DiscussionsHome.test.jsx

@@ -1,18 +1,25 @@
 import {
   fireEvent, render, screen, waitFor,
 } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 import { Context as ResponsiveContext } from 'react-responsive';
 import { MemoryRouter } from 'react-router';
 
 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 { getCourseConfigApiUrl } from '../data/api';
+import { fetchCourseConfig } from '../data/thunks';
 import navigationBarMessages from '../navigation/navigation-bar/messages';
 import DiscussionsHome from './DiscussionsHome';
 
+const courseConfigApiUrl = getCourseConfigApiUrl();
+let axiosMock;
 let store;
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
 
@@ -40,7 +47,7 @@ describe('DiscussionsHome', () => {
         roles: [],
       },
     });
-
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     store = initializeStore();
   });
 
@@ -63,7 +70,9 @@ describe('DiscussionsHome', () => {
   });
 
   test('in-context view should show close button', async () => {
-    renderComponent(`/${courseId}/topics?inContext`);
+    axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { provider: 'openedx' });
+    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+    renderComponent(`/${courseId}/topics?inContextSidebar`);
 
     expect(screen.queryByText(navigationBarMessages.allTopics.defaultMessage))
       .not
@@ -73,10 +82,12 @@ describe('DiscussionsHome', () => {
   });
 
   test('the close button should post a message', async () => {
+    axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { provider: 'openedx' });
+    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     const { parent } = window;
     delete window.parent;
     window.parent = { ...window, postMessage: jest.fn() };
-    renderComponent(`/${courseId}/topics?inContext`);
+    renderComponent(`/${courseId}/topics?inContextSidebar`);
 
     const closeButton = screen.queryByRole('button', { name: 'Close' });
 
@@ -88,7 +99,7 @@ describe('DiscussionsHome', () => {
     window.parent = parent;
   });
 
-  test('header, course navigation bar and footer are visible', async () => {
+  test('header, course navigation bar and footer are only visible in Discussions MFE', async () => {
     renderComponent();
     expect(screen.queryByRole('banner')).toBeInTheDocument();
     expect(document.getElementById('courseTabsNavigation')).toBeInTheDocument();

src/discussions/discussions-home/InformationBanner.test.jsx

@@ -8,7 +8,7 @@ import { initializeStore } from '../../store';
 import { DiscussionContext } from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
 import messages from '../messages';
-import InformationBanner from './InformationsBanner';
+import InformationBanner from './InformationBanner';
 
 import '../posts/data/__factories__';
 

src/discussions/empty-posts/EmptyPosts.jsx

@@ -52,7 +52,11 @@ function EmptyPosts({ intl, subTitleMessage }) {
 }
 
 EmptyPosts.propTypes = {
-  subTitleMessage: propTypes.string.isRequired,
+  subTitleMessage: propTypes.shape({
+    id: propTypes.string,
+    defaultMessage: propTypes.string,
+    description: propTypes.string,
+  }).isRequired,
   intl: intlShape.isRequired,
 };
 

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

@@ -0,0 +1,99 @@
+import React, { useContext, useEffect } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+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';
+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 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));
+  const selectedUnit = useSelector(selectUnits)?.find(unit => unit.id === topicId);
+  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 };
+    return discussionsPath(path, params)(location);
+  };
+
+  return (
+    <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)}
+        />
+      )}
+      <div className="border-bottom border-light-400" />
+      <div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
+        {topicId ? (
+          <PostsList
+            posts={posts}
+            topics={[topicId]}
+            parentIsLoading={topicsInProgress}
+          />
+        ) : (
+          selectedSubsectionUnits?.map((unit) => (
+            <Topic
+              key={unit.id}
+              topic={unit}
+            />
+          ))
+        )}
+        {(category && selectedSubsectionUnits.length === 0 && topicsStatus === RequestStatus.SUCCESSFUL) && (
+          <NoResults />
+        )}
+        {(category && topicsInProgress) && (
+          <div className="d-flex justify-content-center p-4">
+            <Spinner animation="border" variant="primary" size="lg" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+TopicPostsView.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TopicPostsView);