fix: post loading slow

test: added test cases for v3 Topics and units list page (#440 )
* test: added test cases for v3 Topics and units list page * refactor: v3 topics unit test cases * refactor: v3 topics unit test cases * refactor: v3 topics unit test cases * refactor: removed my added commented line and also optimized the code to get stats for section --------- Co-authored-by: sundasnoreen12 <sundasnoreen12@ggmail.com>
2023-02-21 13:00:36 +05:00 · 2023-02-21 12:45:08 +05:00 · 2023-02-21 11:36:05 +05:00 · 2023-02-20 16:07:58 +05:00 · 2023-02-20 14:47:07 +05:00 · 2023-02-19 15:26:47 -05:00
194 changed files with 8959 additions and 4562 deletions
--- a/.env
+++ b/.env
@@ -20,5 +20,6 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
-TA_FEEDBACK_FORM: ''
-STAFF_FEEDBACK_FORM: ''
+TA_FEEDBACK_FORM= ''
+STAFF_FEEDBACK_FORM= ''
+DISPLAY_FEEDBACK_BANNER='false'
--- a/.env.development
+++ b/.env.development
@@ -21,5 +21,6 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-TA_FEEDBACK_FORM: 'https://learner-form.test'
-STAFF_FEEDBACK_FORM: 'https://staff-form.test'
+TA_FEEDBACK_FORM='https://learner-form.test'
+STAFF_FEEDBACK_FORM='https://staff-form.test'
+DISPLAY_FEEDBACK_BANNER='false'
--- a/.env.test
+++ b/.env.test
@@ -19,5 +19,6 @@ SEGMENT_KEY=''
 SITE_NAME='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-TA_FEEDBACK_FORM: 'https://learner-form.test'
-STAFF_FEEDBACK_FORM: 'https://staff-form.test'
+TA_FEEDBACK_FORM='https://learner-form.test'
+STAFF_FEEDBACK_FORM='https://staff-form.test'
+DISPLAY_FEEDBACK_BANNER='false'
--- a/.github/pull_request_template.md
+++ b/.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.
--- a/.github/workflows/ci.yml
+++ b/.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
--- a/2
+++ b/2
@@ -59,7 +59,7 @@ push_translations:

 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --languages=$(transifex_langs)
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/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
--- a/catalog-info.yaml
+++ b/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'
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -8,5 +8,4 @@ openedx-release:
  # The openedx-release key is described in OEP-10:
  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
-  maybe: true   # Delete this "maybe" line when you have decided about Open edX inclusion.
  ref: master
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,12 +13,13 @@
        "@edx/frontend-component-footer": "11.2.0",
        "@edx/frontend-component-header": "3.2.0",
        "@edx/frontend-platform": "2.6.1",
-        "@edx/paragon": "19.10.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",
@@ -44,8 +45,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",
@@ -1830,109 +1829,6 @@
      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
      "dev": true
    },
-    "node_modules/@caporal/core": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@caporal/core/-/core-2.0.2.tgz",
-      "integrity": "sha512-o3J5aZINFWkkL+sL0DUs1dPHJjaetAAdwMRLbJ4U8aJW3K81E323IFMkFNYcOwTiPVhNzllC3USxZbU6xWFjFg==",
-      "dev": true,
-      "dependencies": {
-        "@types/glob": "^7.1.1",
-        "@types/lodash": "4.14.149",
-        "@types/node": "13.9.3",
-        "@types/table": "5.0.0",
-        "@types/tabtab": "^3.0.1",
-        "@types/wrap-ansi": "^3.0.0",
-        "chalk": "3.0.0",
-        "glob": "^7.1.6",
-        "lodash": "4.17.15",
-        "table": "5.4.6",
-        "tabtab": "^3.0.2",
-        "winston": "3.2.1",
-        "wrap-ansi": "^6.2.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@caporal/core/node_modules/@types/node": {
-      "version": "13.9.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.9.3.tgz",
-      "integrity": "sha512-01s+ac4qerwd6RHD+mVbOEsraDHSgUaefQlEdBbUolnQFjKwCr7luvAlEwW1RFojh67u0z4OUTjPn9LEl4zIkA==",
-      "dev": true
-    },
-    "node_modules/@caporal/core/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@caporal/core/node_modules/chalk": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@caporal/core/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@caporal/core/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/@caporal/core/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@caporal/core/node_modules/lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
-      "dev": true
-    },
-    "node_modules/@caporal/core/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/@cnakazawa/watch": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -1949,15 +1845,6 @@
        "node": ">=0.1.95"
      }
    },
-    "node_modules/@colors/colors": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
-      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
    "node_modules/@cospired/i18n-iso-languages": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-2.2.0.tgz",
@@ -3514,36 +3401,96 @@
      }
    },
    "node_modules/@edx/paragon": {
-      "version": "19.10.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.10.1.tgz",
-      "integrity": "sha512-kVIx/yJWYeaTIb+j2NmB/iz1XGR4WY8aYEQbt1FtGFWcKzeiThtiqr4TeRxQeA8UrooyQl5HyzYISq7xC5AH2w==",
+      "version": "20.15.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.15.0.tgz",
+      "integrity": "sha512-Sq5/je3Ub3UpXrrneaCShz+kB6wuMNmeF1Y/XfVt6X2i+ZCQGlQrBa3KtcwGwDOHIQ65eC6dqJpL9LISHg+xtg==",
      "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.36",
-        "@fortawesome/free-solid-svg-icons": "^5.15.4",
-        "@fortawesome/react-fontawesome": "^0.1.16",
-        "@popperjs/core": "^2.11.2",
-        "airbnb-prop-types": "^2.12.0",
-        "bootstrap": "4.6.0",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@popperjs/core": "^2.11.4",
+        "bootstrap": "^4.6.2",
        "classnames": "^2.3.1",
        "email-prop-type": "^3.0.0",
+        "file-selector": "^0.6.0",
        "font-awesome": "^4.7.0",
+        "glob": "^8.0.3",
        "lodash.uniqby": "^4.7.0",
-        "mailto-link": "^1.0.0",
+        "mailto-link": "^2.0.0",
        "prop-types": "^15.8.1",
-        "react-bootstrap": "^1.6.4",
+        "react-bootstrap": "^1.6.5",
+        "react-dropzone": "^14.2.1",
        "react-focus-on": "^3.5.4",
+        "react-loading-skeleton": "^3.1.0",
        "react-popper": "^2.2.5",
        "react-proptype-conditional-require": "^1.0.4",
        "react-responsive": "^8.2.0",
        "react-table": "^7.7.0",
        "react-transition-group": "^4.4.2",
-        "tabbable": "^4.0.0",
-        "uncontrollable": "7.2.1"
+        "tabbable": "^5.3.3",
+        "uncontrollable": "^7.2.1"
      },
      "peerDependencies": {
-        "prop-types": "^15.7.2",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6"
+        "react": "^16.8.6 || ^17.0.0",
+        "react-dom": "^16.8.6 || ^17.0.0",
+        "react-intl": "^5.25.1"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
+      "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
+      "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/glob": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
+      "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/minimatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+      "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/@edx/reactifex": {
@@ -6489,12 +6436,6 @@
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
      "dev": true
    },
-    "node_modules/@types/lodash": {
-      "version": "4.14.149",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.149.tgz",
-      "integrity": "sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==",
-      "dev": true
-    },
    "node_modules/@types/mime": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -6646,21 +6587,6 @@
      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
      "dev": true
    },
-    "node_modules/@types/table": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/table/-/table-5.0.0.tgz",
-      "integrity": "sha512-fQLtGLZXor264zUPWI95WNDsZ3QV43/c0lJpR/h1hhLJumXRmHNsrvBfEzW2YMhb0EWCsn4U6h82IgwsajAuTA==",
-      "dev": true
-    },
-    "node_modules/@types/tabtab": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/tabtab/-/tabtab-3.0.2.tgz",
-      "integrity": "sha512-d8aOSJPS3SEGZevyr7vbAVUNPWGFmdFlk13vbPPK87vz+gYGM57L8T11k4wK2mOgQYZjEVYQEqmCTvupPoQBWw==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
    "node_modules/@types/tapable": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@@ -6742,12 +6668,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/@types/wrap-ansi": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
-      "integrity": "sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g==",
-      "dev": true
-    },
    "node_modules/@types/ws": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -7074,28 +6994,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/airbnb-prop-types": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
-      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
-      "dependencies": {
-        "array.prototype.find": "^2.1.1",
-        "function.prototype.name": "^1.1.2",
-        "is-regex": "^1.1.0",
-        "object-is": "^1.1.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.2",
-        "prop-types": "^15.7.2",
-        "prop-types-exact": "^1.2.0",
-        "react-is": "^16.13.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      },
-      "peerDependencies": {
-        "react": "^0.14 || ^15.0.0 || ^16.0.0-alpha"
-      }
-    },
    "node_modules/ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -7272,15 +7170,6 @@
        "sprintf-js": "~1.0.2"
      }
    },
-    "node_modules/argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha512-dEamhpPEwRUBpLNHeuCm/v+g0anFByHahxodVO/BbAarHVBBg2MccCwf9K+o1Pof+2btdnkJelYVUWjW/VrATw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6.10"
-      }
-    },
    "node_modules/aria-hidden": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
@@ -7383,20 +7272,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/array.prototype.find": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.0.tgz",
-      "integrity": "sha512-sn40qmUiLYAcRb/1HsIQjTTZ1kCy8II8VtZJpMn2Aoen9twULhbWXisfh3HimGqMlHGUul0/TfKCnXg42LuPpQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.4",
-        "es-shim-unscopables": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/array.prototype.flat": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
@@ -7486,6 +7361,14 @@
        "node": ">= 4.5.0"
      }
    },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/autoprefixer": {
      "version": "10.2.6",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
@@ -8504,13 +8387,19 @@
      "dev": true
    },
    "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
      "peerDependencies": {
        "jquery": "1.9.1 - 3",
        "popper.js": "^1.16.1"
@@ -8778,6 +8667,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.1",
        "get-intrinsic": "^1.0.2"
@@ -9259,26 +9149,6 @@
        "node": ">= 0.12.0"
      }
    },
-    "node_modules/codecov": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.3.tgz",
-      "integrity": "sha512-Y8Hw+V3HgR7V71xWH2vQ9lyS358CbGCldWlJFR0JirqoGtOoas3R3/OclRTvgUYFK29mmJICDPauVKmpqbwhOA==",
-      "deprecated": "https://about.codecov.io/blog/codecov-uploader-deprecation-plan/",
-      "dev": true,
-      "dependencies": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.4",
-        "js-yaml": "3.14.1",
-        "teeny-request": "7.1.1",
-        "urlgrey": "1.0.0"
-      },
-      "bin": {
-        "codecov": "bin/codecov"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
    "node_modules/collect-v8-coverage": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -9298,16 +9168,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/color": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^1.9.3",
-        "color-string": "^1.6.0"
-      }
-    },
    "node_modules/color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -9323,16 +9183,6 @@
      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
      "dev": true
    },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
    "node_modules/colord": {
      "version": "2.9.2",
      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
@@ -9345,22 +9195,6 @@
      "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==",
      "dev": true
    },
-    "node_modules/colornames": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/colornames/-/colornames-1.1.1.tgz",
-      "integrity": "sha512-/pyV40IrsdulWv+wFPmERh9k/mjsPZ64yUMDmWrtj/k1nmgrzzIENWKdaVKyBbvFdQWqkcaRxr+polCo3VMe7A==",
-      "dev": true
-    },
-    "node_modules/colorspace": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
-      "integrity": "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==",
-      "dev": true,
-      "dependencies": {
-        "color": "^3.1.3",
-        "text-hex": "1.0.x"
-      }
-    },
    "node_modules/combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -10033,7 +9867,6 @@
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
-      "dev": true,
      "engines": {
        "node": ">=0.10"
      }
@@ -10421,6 +10254,7 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
      "dependencies": {
        "has-property-descriptors": "^1.0.0",
        "object-keys": "^1.1.1"
@@ -10556,17 +10390,6 @@
      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA=="
    },
-    "node_modules/diagnostics": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/diagnostics/-/diagnostics-1.1.1.tgz",
-      "integrity": "sha512-8wn1PmdunLJ9Tqbx+Fx/ZEuHfJf4NKSN2ZBj7SJC/OWRWha843+WsTjqMe1B5E3p28jqBlp+mJ2fPVxPyNgYKQ==",
-      "dev": true,
-      "dependencies": {
-        "colorspace": "1.1.x",
-        "enabled": "1.0.x",
-        "kuler": "1.0.x"
-      }
-    },
    "node_modules/diff-sequences": {
      "version": "27.5.1",
      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
@@ -10721,9 +10544,9 @@
      }
    },
    "node_modules/dompurify": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.8.tgz",
-      "integrity": "sha512-eVhaWoVibIzqdGYjwsBWodIQIaXFSB+cKDf4cfxLMsK0xiud6SE+/WCVx/Xw/UwQsa4cS3T2eITcdtmTg2UKcw=="
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
+      "integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
    },
    "node_modules/domutils": {
      "version": "2.8.0",
@@ -10930,15 +10753,6 @@
        "node": ">= 4"
      }
    },
-    "node_modules/enabled": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/enabled/-/enabled-1.0.2.tgz",
-      "integrity": "sha512-nnzgVSpB35qKrUN8358SjO1bYAmxoThECTWw9s3J0x5G8A9hokKHVDFzBjVpCoSryo6MhN8woVyascN5jheaNA==",
-      "dev": true,
-      "dependencies": {
-        "env-variable": "0.0.x"
-      }
-    },
    "node_modules/encodeurl": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -10981,12 +10795,6 @@
        "url": "https://github.com/fb55/entities?sponsor=1"
      }
    },
-    "node_modules/env-variable": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/env-variable/-/env-variable-0.0.6.tgz",
-      "integrity": "sha512-bHz59NlBbtS0NhftmR8+ExBEekE7br0e01jw+kk0NDro7TtZzBYZ5ScGPs3OmwnpyfHTHOtr1Y6uedCdrIldtg==",
-      "dev": true
-    },
    "node_modules/envinfo": {
      "version": "7.8.1",
      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
@@ -11021,6 +10829,7 @@
      "version": "1.20.1",
      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
      "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "es-to-primitive": "^1.2.1",
@@ -11053,23 +10862,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/es-check": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/es-check/-/es-check-6.2.1.tgz",
-      "integrity": "sha512-IPiRXUlwSTd2yMklIf9yEGe6GK5wCS8Sz1aTNHm1QSiYzI4aiq19giYbLi95tb+e0JJVKmcU0iQXQWW60a8V9A==",
-      "dev": true,
-      "dependencies": {
-        "@caporal/core": "^2.0.2",
-        "acorn": "^8.7.0",
-        "fast-glob": "^3.2.11"
-      },
-      "bin": {
-        "es-check": "index.js"
-      },
-      "engines": {
-        "node": ">= 4"
-      }
-    },
    "node_modules/es-module-lexer": {
      "version": "0.9.3",
      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
@@ -11080,6 +10872,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
      "dependencies": {
        "has": "^1.0.3"
      }
@@ -11088,6 +10881,7 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
      "dependencies": {
        "is-callable": "^1.1.4",
        "is-date-object": "^1.0.1",
@@ -11100,12 +10894,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/es6-promisify": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-6.1.1.tgz",
-      "integrity": "sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==",
-      "dev": true
-    },
    "node_modules/escalade": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -12334,21 +12122,6 @@
      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
      "dev": true
    },
-    "node_modules/fast-url-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
-      "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^1.3.2"
-      }
-    },
-    "node_modules/fast-url-parser/node_modules/punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-      "dev": true
-    },
    "node_modules/fast-xml-parser": {
      "version": "3.21.1",
      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.21.1.tgz",
@@ -12412,12 +12185,6 @@
        "pend": "~1.2.0"
      }
    },
-    "node_modules/fecha": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
-      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
-      "dev": true
-    },
    "node_modules/figures": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -12465,6 +12232,22 @@
        "webpack": "^4.0.0 || ^5.0.0"
      }
    },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/file-selector/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
    "node_modules/file-type": {
      "version": "12.4.2",
      "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
@@ -12520,6 +12303,14 @@
        "node": ">=8"
      }
    },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/finalhandler": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -13053,12 +12844,14 @@
    "node_modules/function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
    },
    "node_modules/function.prototype.name": {
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
@@ -13082,6 +12875,7 @@
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@@ -13108,6 +12902,7 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.1",
        "has": "^1.0.3",
@@ -13163,6 +12958,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "get-intrinsic": "^1.1.1"
@@ -13517,6 +13313,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.1"
      },
@@ -13528,6 +13325,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@@ -13545,6 +13343,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
      "dependencies": {
        "get-intrinsic": "^1.1.1"
      },
@@ -13566,6 +13365,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@@ -13590,6 +13390,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
      "dependencies": {
        "has-symbols": "^1.0.2"
      },
@@ -14049,15 +13850,6 @@
        "node": ">= 4"
      }
    },
-    "node_modules/ignore-walk": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
-      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "^3.0.4"
-      }
-    },
    "node_modules/image-webpack-loader": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/image-webpack-loader/-/image-webpack-loader-8.1.0.tgz",
@@ -14754,6 +14546,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
      "dependencies": {
        "get-intrinsic": "^1.1.0",
        "has": "^1.0.3",
@@ -14889,6 +14682,7 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
      "dependencies": {
        "has-bigints": "^1.0.1"
      },
@@ -14924,6 +14718,7 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "has-tostringtag": "^1.0.0"
@@ -14962,6 +14757,7 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@@ -15035,6 +14831,7 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
      "dependencies": {
        "has-tostringtag": "^1.0.0"
      },
@@ -15202,6 +14999,7 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@@ -15222,6 +15020,7 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
      "dependencies": {
        "has-tostringtag": "^1.0.0"
      },
@@ -15317,6 +15116,7 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "has-tostringtag": "^1.0.0"
@@ -15357,6 +15157,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2"
      },
@@ -15377,6 +15178,7 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
      "dependencies": {
        "has-tostringtag": "^1.0.0"
      },
@@ -15407,6 +15209,7 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
      "dependencies": {
        "has-symbols": "^1.0.2"
      },
@@ -15439,6 +15242,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2"
      },
@@ -19274,15 +19078,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/kuler": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/kuler/-/kuler-1.0.1.tgz",
-      "integrity": "sha512-J9nVUucG1p/skKul6DU3PUZrhs0LPulNaeUOox0IyXDi8S4CztTHs1gQphhuZmzXG7VOQSf6NJfKuzteQLv9gQ==",
-      "dev": true,
-      "dependencies": {
-        "colornames": "^1.1.1"
-      }
-    },
    "node_modules/leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -19472,19 +19267,6 @@
      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
      "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww=="
    },
-    "node_modules/logform": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/logform/-/logform-2.4.0.tgz",
-      "integrity": "sha512-CPSJw4ftjf517EhXZGGvTHHkYobo7ZCc0kvwUoOYcjfR2UVrI66RHj8MCrfAdEitdmFqbu2BYdYs8FHHZSb6iw==",
-      "dev": true,
-      "dependencies": {
-        "@colors/colors": "1.5.0",
-        "fecha": "^4.2.0",
-        "ms": "^2.1.1",
-        "safe-stable-stringify": "^2.3.1",
-        "triple-beam": "^1.3.0"
-      }
-    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -19542,14 +19324,17 @@
      }
    },
    "node_modules/mailto-link": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-1.0.0.tgz",
-      "integrity": "sha512-DVRvtkoeXLHAbH+S+9m3ILIdnvQsSc9IvJwfEclQVD8e8FhzwA5Mtw4Q0XXYr/sAziw/HsMc/gpGAI+5w6ohIw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-2.0.0.tgz",
+      "integrity": "sha512-b5FErkZ4t6mpH1IFZSw7Mm2IQHXQ2R0/5Q4xd7Rv8dVkWvE54mFG/UW7HjfFazXFjXTNsM+dSX2tTeIDrV9K9A==",
      "dependencies": {
        "assert-ok": "~1.0.0",
-        "cast-array": "~1.0.0",
+        "cast-array": "~1.0.1",
        "object-filter": "~1.0.2",
-        "query-string": "~2.4.1"
+        "query-string": "~7.0.0"
+      },
+      "engines": {
+        "node": ">= 12"
      }
    },
    "node_modules/make-dir": {
@@ -19962,48 +19747,6 @@
      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
      "dev": true
    },
-    "node_modules/node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-      "dev": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/node-fetch/node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
-    },
-    "node_modules/node-fetch/node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
-    },
-    "node_modules/node-fetch/node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
    "node_modules/node-forge": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -20304,6 +20047,7 @@
      "version": "1.12.2",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@@ -20312,6 +20056,7 @@
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3"
@@ -20327,6 +20072,7 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
      "engines": {
        "node": ">= 0.4"
      }
@@ -20347,6 +20093,7 @@
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.0",
        "define-properties": "^1.1.3",
@@ -20364,6 +20111,7 @@
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
@@ -20454,12 +20202,6 @@
        "wrappy": "1"
      }
    },
-    "node_modules/one-time": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/one-time/-/one-time-0.0.4.tgz",
-      "integrity": "sha512-qAMrwuk2xLEutlASoiPiAMW3EN3K96Ka/ilSXYr6qR1zSVXw2j7+yDSqGTC4T9apfLYxM3tLLjKvgPdAUK7kYQ==",
-      "dev": true
-    },
    "node_modules/onetime": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
@@ -21953,16 +21695,6 @@
        "react-is": "^16.13.1"
      }
    },
-    "node_modules/prop-types-exact": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
-      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
-      "dependencies": {
-        "has": "^1.0.3",
-        "object.assign": "^4.1.0",
-        "reflect.ownkeys": "^0.2.0"
-      }
-    },
    "node_modules/prop-types-extra": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
@@ -22052,14 +21784,28 @@
      }
    },
    "node_modules/query-string": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
-      "integrity": "sha512-Y+OMYUuY7HxznI6WBN822fi/FMvnCTiuqd6KNcidPColOmMWPoV1RGYyyzObve1T/dD1i0ZgCCbO8ytu0ZUrkA==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
      "dependencies": {
-        "strict-uri-encode": "^1.0.0"
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
      },
      "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/query-string/node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "engines": {
+        "node": ">=4"
      }
    },
    "node_modules/queue-microtask": {
@@ -22443,6 +22189,22 @@
        "react": "^16.14.0"
      }
    },
+    "node_modules/react-dropzone": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.2.tgz",
+      "integrity": "sha512-5oyGN/B5rNhop2ggUnxztXBQ6q6zii+OMEftPzsxAR2hhpVWz0nAV+3Ktxo2h5bZzdcCKrpd8bfWAVsveIBM+w==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
    "node_modules/react-error-overlay": {
      "version": "6.0.11",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -22557,6 +22319,14 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
+      "integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/react-mathjax-preview": {
      "version": "2.2.6",
      "resolved": "https://registry.npmjs.org/react-mathjax-preview/-/react-mathjax-preview-2.2.6.tgz",
@@ -23027,11 +22797,6 @@
        "redux": "^4"
      }
    },
-    "node_modules/reflect.ownkeys": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
-      "integrity": "sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg=="
-    },
    "node_modules/regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -23087,6 +22852,7 @@
      "version": "1.4.3",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
@@ -23493,15 +23259,6 @@
        "ret": "~0.1.10"
      }
    },
-    "node_modules/safe-stable-stringify": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.3.1.tgz",
-      "integrity": "sha512-kYBSfT+troD9cDA85VDnHZ1rpHC50O0g1e6WlGHVCz/g+JS+9WKLj+XwFYyR8UbrZN8ll9HUpDAAddY58MGisg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -24113,6 +23870,7 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.0",
        "get-intrinsic": "^1.0.2",
@@ -24128,21 +23886,6 @@
      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
      "dev": true
    },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "dev": true
-    },
    "node_modules/sisteransi": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -24606,6 +24349,14 @@
        "node": ">= 6"
      }
    },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/split-string": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -24630,15 +24381,6 @@
      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
      "dev": true
    },
-    "node_modules/stack-trace": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
-      "integrity": "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/stack-utils": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.5.tgz",
@@ -24777,19 +24519,12 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "dependencies": {
-        "stubs": "^3.0.0"
-      }
-    },
    "node_modules/strict-uri-encode": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
      "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==",
+      "dev": true,
+      "optional": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -24883,6 +24618,7 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.4",
@@ -24896,6 +24632,7 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.4",
@@ -25007,12 +24744,6 @@
      "dev": true,
      "optional": true
    },
-    "node_modules/stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw==",
-      "dev": true
-    },
    "node_modules/style-loader": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
@@ -25195,9 +24926,9 @@
      "dev": true
    },
    "node_modules/tabbable": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
-      "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
    },
    "node_modules/table": {
      "version": "5.4.6",
@@ -25237,166 +24968,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/tabtab": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/tabtab/-/tabtab-3.0.2.tgz",
-      "integrity": "sha512-jANKmUe0sIQc/zTALTBy186PoM/k6aPrh3A7p6AaAfF6WPSbTx1JYeGIGH162btpH+mmVEXln+UxwViZHO2Jhg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.0.1",
-        "es6-promisify": "^6.0.0",
-        "inquirer": "^6.0.0",
-        "minimist": "^1.2.0",
-        "mkdirp": "^0.5.1",
-        "untildify": "^3.0.3"
-      }
-    },
-    "node_modules/tabtab/node_modules/ansi-escapes": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/ansi-regex": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/cli-cursor": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
-      "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==",
-      "dev": true,
-      "dependencies": {
-        "restore-cursor": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/cli-width": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
-      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
-      "dev": true
-    },
-    "node_modules/tabtab/node_modules/figures": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-      "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==",
-      "dev": true,
-      "dependencies": {
-        "escape-string-regexp": "^1.0.5"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/inquirer": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz",
-      "integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-escapes": "^3.2.0",
-        "chalk": "^2.4.2",
-        "cli-cursor": "^2.1.0",
-        "cli-width": "^2.0.0",
-        "external-editor": "^3.0.3",
-        "figures": "^2.0.0",
-        "lodash": "^4.17.12",
-        "mute-stream": "0.0.7",
-        "run-async": "^2.2.0",
-        "rxjs": "^6.4.0",
-        "string-width": "^2.1.0",
-        "strip-ansi": "^5.1.0",
-        "through": "^2.3.6"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/mimic-fn": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
-      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/mute-stream": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
-      "integrity": "sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==",
-      "dev": true
-    },
-    "node_modules/tabtab/node_modules/onetime": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
-      "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/restore-cursor": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
-      "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==",
-      "dev": true,
-      "dependencies": {
-        "onetime": "^2.0.0",
-        "signal-exit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dev": true,
-      "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tabtab/node_modules/string-width/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -25424,22 +24995,6 @@
        "node": ">= 0.8.0"
      }
    },
-    "node_modules/teeny-request": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
-      "integrity": "sha512-iwY6rkW5DDGq8hE2YgNQlKbptYpY5Nn2xecjQiNjOXWbKzPGUfmeUBCSQbbr306d7Z7U2N0TPl+/SwYRfua1Dg==",
-      "dev": true,
-      "dependencies": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "node-fetch": "^2.6.1",
-        "stream-events": "^1.0.5",
-        "uuid": "^8.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/temp-dir": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
@@ -25560,12 +25115,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/text-hex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
-      "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
-      "dev": true
-    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -25773,12 +25322,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/triple-beam": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
-      "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==",
-      "dev": true
-    },
    "node_modules/tryer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -25908,6 +25451,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "has-bigints": "^1.0.2",
@@ -26088,15 +25632,6 @@
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
      "dev": true
    },
-    "node_modules/untildify": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/untildify/-/untildify-3.0.3.tgz",
-      "integrity": "sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -26162,15 +25697,6 @@
        "node": ">= 4"
      }
    },
-    "node_modules/urlgrey": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-1.0.0.tgz",
-      "integrity": "sha512-hJfIzMPJmI9IlLkby8QrsCykQ+SXDeO2W5Q9QTW3QpqZVTx4a/K7p8/5q+/isD8vsbVaFgql/gvAoQCRQ2Cb5w==",
-      "dev": true,
-      "dependencies": {
-        "fast-url-parser": "^1.1.3"
-      }
-    },
    "node_modules/use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -27105,6 +26631,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
      "dependencies": {
        "is-bigint": "^1.0.1",
        "is-boolean-object": "^1.1.0",
@@ -27128,68 +26655,6 @@
      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
      "dev": true
    },
-    "node_modules/winston": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/winston/-/winston-3.2.1.tgz",
-      "integrity": "sha512-zU6vgnS9dAWCEKg/QYigd6cgMVVNwyTzKs81XZtTFuRwJOcDdBg7AU0mXVyNbs7O5RH2zdv+BdNZUlx7mXPuOw==",
-      "dev": true,
-      "dependencies": {
-        "async": "^2.6.1",
-        "diagnostics": "^1.1.1",
-        "is-stream": "^1.1.0",
-        "logform": "^2.1.1",
-        "one-time": "0.0.4",
-        "readable-stream": "^3.1.1",
-        "stack-trace": "0.0.x",
-        "triple-beam": "^1.3.0",
-        "winston-transport": "^4.3.0"
-      },
-      "engines": {
-        "node": ">= 6.4.0"
-      }
-    },
-    "node_modules/winston-transport": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.5.0.tgz",
-      "integrity": "sha512-YpZzcUzBedhlTAfJg6vJDlyEai/IFMIVcaEZZyl3UXIl4gmqRpU7AE89AHLkbzLUsv0NVmw7ts+iztqKxxPW1Q==",
-      "dev": true,
-      "dependencies": {
-        "logform": "^2.3.2",
-        "readable-stream": "^3.6.0",
-        "triple-beam": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 6.4.0"
-      }
-    },
-    "node_modules/winston-transport/node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/winston/node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
    "node_modules/word-wrap": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -28655,90 +28120,6 @@
      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
      "dev": true
    },
-    "@caporal/core": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@caporal/core/-/core-2.0.2.tgz",
-      "integrity": "sha512-o3J5aZINFWkkL+sL0DUs1dPHJjaetAAdwMRLbJ4U8aJW3K81E323IFMkFNYcOwTiPVhNzllC3USxZbU6xWFjFg==",
-      "dev": true,
-      "requires": {
-        "@types/glob": "^7.1.1",
-        "@types/lodash": "4.14.149",
-        "@types/node": "13.9.3",
-        "@types/table": "5.0.0",
-        "@types/tabtab": "^3.0.1",
-        "@types/wrap-ansi": "^3.0.0",
-        "chalk": "3.0.0",
-        "glob": "^7.1.6",
-        "lodash": "4.17.15",
-        "table": "5.4.6",
-        "tabtab": "^3.0.2",
-        "winston": "3.2.1",
-        "wrap-ansi": "^6.2.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "13.9.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.9.3.tgz",
-          "integrity": "sha512-01s+ac4qerwd6RHD+mVbOEsraDHSgUaefQlEdBbUolnQFjKwCr7luvAlEwW1RFojh67u0z4OUTjPn9LEl4zIkA==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "lodash": {
-          "version": "4.17.15",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
    "@cnakazawa/watch": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -28749,12 +28130,6 @@
        "minimist": "^1.2.0"
      }
    },
-    "@colors/colors": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
-      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
-      "dev": true
-    },
    "@cospired/i18n-iso-languages": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-2.2.0.tgz",
@@ -29979,31 +29354,76 @@
      }
    },
    "@edx/paragon": {
-      "version": "19.10.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.10.1.tgz",
-      "integrity": "sha512-kVIx/yJWYeaTIb+j2NmB/iz1XGR4WY8aYEQbt1FtGFWcKzeiThtiqr4TeRxQeA8UrooyQl5HyzYISq7xC5AH2w==",
+      "version": "20.15.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.15.0.tgz",
+      "integrity": "sha512-Sq5/je3Ub3UpXrrneaCShz+kB6wuMNmeF1Y/XfVt6X2i+ZCQGlQrBa3KtcwGwDOHIQ65eC6dqJpL9LISHg+xtg==",
      "requires": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.36",
-        "@fortawesome/free-solid-svg-icons": "^5.15.4",
-        "@fortawesome/react-fontawesome": "^0.1.16",
-        "@popperjs/core": "^2.11.2",
-        "airbnb-prop-types": "^2.12.0",
-        "bootstrap": "4.6.0",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@popperjs/core": "^2.11.4",
+        "bootstrap": "^4.6.2",
        "classnames": "^2.3.1",
        "email-prop-type": "^3.0.0",
+        "file-selector": "^0.6.0",
        "font-awesome": "^4.7.0",
+        "glob": "^8.0.3",
        "lodash.uniqby": "^4.7.0",
-        "mailto-link": "^1.0.0",
+        "mailto-link": "^2.0.0",
        "prop-types": "^15.8.1",
-        "react-bootstrap": "^1.6.4",
+        "react-bootstrap": "^1.6.5",
+        "react-dropzone": "^14.2.1",
        "react-focus-on": "^3.5.4",
+        "react-loading-skeleton": "^3.1.0",
        "react-popper": "^2.2.5",
        "react-proptype-conditional-require": "^1.0.4",
        "react-responsive": "^8.2.0",
        "react-table": "^7.7.0",
        "react-transition-group": "^4.4.2",
-        "tabbable": "^4.0.0",
-        "uncontrollable": "7.2.1"
+        "tabbable": "^5.3.3",
+        "uncontrollable": "^7.2.1"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
+          "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg=="
+        },
+        "@fortawesome/fontawesome-svg-core": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
+          "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
+          "requires": {
+            "@fortawesome/fontawesome-common-types": "6.2.0"
+          }
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "8.0.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
+          "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^5.0.1",
+            "once": "^1.3.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+          "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
      }
    },
    "@edx/reactifex": {
@@ -32291,12 +31711,6 @@
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
      "dev": true
    },
-    "@types/lodash": {
-      "version": "4.14.149",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.149.tgz",
-      "integrity": "sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==",
-      "dev": true
-    },
    "@types/mime": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -32447,21 +31861,6 @@
      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
      "dev": true
    },
-    "@types/table": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/table/-/table-5.0.0.tgz",
-      "integrity": "sha512-fQLtGLZXor264zUPWI95WNDsZ3QV43/c0lJpR/h1hhLJumXRmHNsrvBfEzW2YMhb0EWCsn4U6h82IgwsajAuTA==",
-      "dev": true
-    },
-    "@types/tabtab": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/tabtab/-/tabtab-3.0.2.tgz",
-      "integrity": "sha512-d8aOSJPS3SEGZevyr7vbAVUNPWGFmdFlk13vbPPK87vz+gYGM57L8T11k4wK2mOgQYZjEVYQEqmCTvupPoQBWw==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
    "@types/tapable": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@@ -32540,12 +31939,6 @@
        }
      }
    },
-    "@types/wrap-ansi": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
-      "integrity": "sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g==",
-      "dev": true
-    },
    "@types/ws": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -32827,22 +32220,6 @@
        "indent-string": "^4.0.0"
      }
    },
-    "airbnb-prop-types": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
-      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
-      "requires": {
-        "array.prototype.find": "^2.1.1",
-        "function.prototype.name": "^1.1.2",
-        "is-regex": "^1.1.0",
-        "object-is": "^1.1.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.2",
-        "prop-types": "^15.7.2",
-        "prop-types-exact": "^1.2.0",
-        "react-is": "^16.13.1"
-      }
-    },
    "ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -32964,12 +32341,6 @@
        "sprintf-js": "~1.0.2"
      }
    },
-    "argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha512-dEamhpPEwRUBpLNHeuCm/v+g0anFByHahxodVO/BbAarHVBBg2MccCwf9K+o1Pof+2btdnkJelYVUWjW/VrATw==",
-      "dev": true
-    },
    "aria-hidden": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
@@ -33042,17 +32413,6 @@
      "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==",
      "dev": true
    },
-    "array.prototype.find": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.0.tgz",
-      "integrity": "sha512-sn40qmUiLYAcRb/1HsIQjTTZ1kCy8II8VtZJpMn2Aoen9twULhbWXisfh3HimGqMlHGUul0/TfKCnXg42LuPpQ==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.4",
-        "es-shim-unscopables": "^1.0.0"
-      }
-    },
    "array.prototype.flat": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
@@ -33121,6 +32481,11 @@
      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
      "dev": true
    },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
    "autoprefixer": {
      "version": "10.2.6",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
@@ -33942,9 +33307,9 @@
      "dev": true
    },
    "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
      "requires": {}
    },
    "brace-expansion": {
@@ -34151,6 +33516,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
      "requires": {
        "function-bind": "^1.1.1",
        "get-intrinsic": "^1.0.2"
@@ -34523,19 +33889,6 @@
      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
      "dev": true
    },
-    "codecov": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.3.tgz",
-      "integrity": "sha512-Y8Hw+V3HgR7V71xWH2vQ9lyS358CbGCldWlJFR0JirqoGtOoas3R3/OclRTvgUYFK29mmJICDPauVKmpqbwhOA==",
-      "dev": true,
-      "requires": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.4",
-        "js-yaml": "3.14.1",
-        "teeny-request": "7.1.1",
-        "urlgrey": "1.0.0"
-      }
-    },
    "collect-v8-coverage": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -34552,16 +33905,6 @@
        "object-visit": "^1.0.0"
      }
    },
-    "color": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^1.9.3",
-        "color-string": "^1.6.0"
-      }
-    },
    "color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -34577,16 +33920,6 @@
      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
      "dev": true
    },
-    "color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
    "colord": {
      "version": "2.9.2",
      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
@@ -34599,22 +33932,6 @@
      "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==",
      "dev": true
    },
-    "colornames": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/colornames/-/colornames-1.1.1.tgz",
-      "integrity": "sha512-/pyV40IrsdulWv+wFPmERh9k/mjsPZ64yUMDmWrtj/k1nmgrzzIENWKdaVKyBbvFdQWqkcaRxr+polCo3VMe7A==",
-      "dev": true
-    },
-    "colorspace": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
-      "integrity": "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==",
-      "dev": true,
-      "requires": {
-        "color": "^3.1.3",
-        "text-hex": "1.0.x"
-      }
-    },
    "combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -35127,8 +34444,7 @@
    "decode-uri-component": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
-      "dev": true
+      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og=="
    },
    "decompress": {
      "version": "4.2.1",
@@ -35428,6 +34744,7 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
      "requires": {
        "has-property-descriptors": "^1.0.0",
        "object-keys": "^1.1.1"
@@ -35530,17 +34847,6 @@
      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA=="
    },
-    "diagnostics": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/diagnostics/-/diagnostics-1.1.1.tgz",
-      "integrity": "sha512-8wn1PmdunLJ9Tqbx+Fx/ZEuHfJf4NKSN2ZBj7SJC/OWRWha843+WsTjqMe1B5E3p28jqBlp+mJ2fPVxPyNgYKQ==",
-      "dev": true,
-      "requires": {
-        "colorspace": "1.1.x",
-        "enabled": "1.0.x",
-        "kuler": "1.0.x"
-      }
-    },
    "diff-sequences": {
      "version": "27.5.1",
      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
@@ -35666,9 +34972,9 @@
      }
    },
    "dompurify": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.8.tgz",
-      "integrity": "sha512-eVhaWoVibIzqdGYjwsBWodIQIaXFSB+cKDf4cfxLMsK0xiud6SE+/WCVx/Xw/UwQsa4cS3T2eITcdtmTg2UKcw=="
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
+      "integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
    },
    "domutils": {
      "version": "2.8.0",
@@ -35836,15 +35142,6 @@
      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
    },
-    "enabled": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/enabled/-/enabled-1.0.2.tgz",
-      "integrity": "sha512-nnzgVSpB35qKrUN8358SjO1bYAmxoThECTWw9s3J0x5G8A9hokKHVDFzBjVpCoSryo6MhN8woVyascN5jheaNA==",
-      "dev": true,
-      "requires": {
-        "env-variable": "0.0.x"
-      }
-    },
    "encodeurl": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -35875,12 +35172,6 @@
      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
      "dev": true
    },
-    "env-variable": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/env-variable/-/env-variable-0.0.6.tgz",
-      "integrity": "sha512-bHz59NlBbtS0NhftmR8+ExBEekE7br0e01jw+kk0NDro7TtZzBYZ5ScGPs3OmwnpyfHTHOtr1Y6uedCdrIldtg==",
-      "dev": true
-    },
    "envinfo": {
      "version": "7.8.1",
      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
@@ -35909,6 +35200,7 @@
      "version": "1.20.1",
      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
      "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "es-to-primitive": "^1.2.1",
@@ -35935,17 +35227,6 @@
        "unbox-primitive": "^1.0.2"
      }
    },
-    "es-check": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/es-check/-/es-check-6.2.1.tgz",
-      "integrity": "sha512-IPiRXUlwSTd2yMklIf9yEGe6GK5wCS8Sz1aTNHm1QSiYzI4aiq19giYbLi95tb+e0JJVKmcU0iQXQWW60a8V9A==",
-      "dev": true,
-      "requires": {
-        "@caporal/core": "^2.0.2",
-        "acorn": "^8.7.0",
-        "fast-glob": "^3.2.11"
-      }
-    },
    "es-module-lexer": {
      "version": "0.9.3",
      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
@@ -35956,6 +35237,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
      "requires": {
        "has": "^1.0.3"
      }
@@ -35964,18 +35246,13 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
      "requires": {
        "is-callable": "^1.1.4",
        "is-date-object": "^1.0.1",
        "is-symbol": "^1.0.2"
      }
    },
-    "es6-promisify": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-6.1.1.tgz",
-      "integrity": "sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==",
-      "dev": true
-    },
    "escalade": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -36949,23 +36226,6 @@
      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
      "dev": true
    },
-    "fast-url-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
-      "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
-      "dev": true,
-      "requires": {
-        "punycode": "^1.3.2"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-          "dev": true
-        }
-      }
-    },
    "fast-xml-parser": {
      "version": "3.21.1",
      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.21.1.tgz",
@@ -37019,12 +36279,6 @@
        "pend": "~1.2.0"
      }
    },
-    "fecha": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
-      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
-      "dev": true
-    },
    "figures": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -37053,6 +36307,21 @@
        "schema-utils": "^3.0.0"
      }
    },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
    "file-type": {
      "version": "12.4.2",
      "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
@@ -37093,6 +36362,11 @@
        "to-regex-range": "^5.0.1"
      }
    },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
+    },
    "finalhandler": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -37479,12 +36753,14 @@
    "function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
    },
    "function.prototype.name": {
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
@@ -37501,7 +36777,8 @@
    "functions-have-names": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
    },
    "gensync": {
      "version": "1.0.0-beta.2",
@@ -37519,6 +36796,7 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dev": true,
      "requires": {
        "function-bind": "^1.1.1",
        "has": "^1.0.3",
@@ -37559,6 +36837,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "get-intrinsic": "^1.1.1"
@@ -37822,6 +37101,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
      "requires": {
        "function-bind": "^1.1.1"
      }
@@ -37829,7 +37109,8 @@
    "has-bigints": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
    },
    "has-flag": {
      "version": "3.0.0",
@@ -37841,6 +37122,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
      "requires": {
        "get-intrinsic": "^1.1.1"
      }
@@ -37855,7 +37137,8 @@
    "has-symbols": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
    },
    "has-to-string-tag-x": {
      "version": "1.4.1",
@@ -37871,6 +37154,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
      "requires": {
        "has-symbols": "^1.0.2"
      }
@@ -38209,15 +37493,6 @@
      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
      "dev": true
    },
-    "ignore-walk": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
-      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
-      "dev": true,
-      "requires": {
-        "minimatch": "^3.0.4"
-      }
-    },
    "image-webpack-loader": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/image-webpack-loader/-/image-webpack-loader-8.1.0.tgz",
@@ -38736,6 +38011,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
      "requires": {
        "get-intrinsic": "^1.1.0",
        "has": "^1.0.3",
@@ -38853,6 +38129,7 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
      "requires": {
        "has-bigints": "^1.0.1"
      }
@@ -38876,6 +38153,7 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "has-tostringtag": "^1.0.0"
@@ -38890,7 +38168,8 @@
    "is-callable": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true
    },
    "is-ci": {
      "version": "2.0.0",
@@ -38950,6 +38229,7 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
      "requires": {
        "has-tostringtag": "^1.0.0"
      }
@@ -39069,7 +38349,8 @@
    "is-negative-zero": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA=="
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
    },
    "is-number": {
      "version": "7.0.0",
@@ -39081,6 +38362,7 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
      "requires": {
        "has-tostringtag": "^1.0.0"
      }
@@ -39149,6 +38431,7 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "has-tostringtag": "^1.0.0"
@@ -39177,6 +38460,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2"
      }
@@ -39191,6 +38475,7 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
      "requires": {
        "has-tostringtag": "^1.0.0"
      }
@@ -39209,6 +38494,7 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
      "requires": {
        "has-symbols": "^1.0.2"
      }
@@ -39232,6 +38518,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2"
      }
@@ -42165,15 +41452,6 @@
      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
      "dev": true
    },
-    "kuler": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/kuler/-/kuler-1.0.1.tgz",
-      "integrity": "sha512-J9nVUucG1p/skKul6DU3PUZrhs0LPulNaeUOox0IyXDi8S4CztTHs1gQphhuZmzXG7VOQSf6NJfKuzteQLv9gQ==",
-      "dev": true,
-      "requires": {
-        "colornames": "^1.1.1"
-      }
-    },
    "leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -42332,19 +41610,6 @@
      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
      "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww=="
    },
-    "logform": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/logform/-/logform-2.4.0.tgz",
-      "integrity": "sha512-CPSJw4ftjf517EhXZGGvTHHkYobo7ZCc0kvwUoOYcjfR2UVrI66RHj8MCrfAdEitdmFqbu2BYdYs8FHHZSb6iw==",
-      "dev": true,
-      "requires": {
-        "@colors/colors": "1.5.0",
-        "fecha": "^4.2.0",
-        "ms": "^2.1.1",
-        "safe-stable-stringify": "^2.3.1",
-        "triple-beam": "^1.3.0"
-      }
-    },
    "loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -42395,14 +41660,14 @@
      "dev": true
    },
    "mailto-link": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-1.0.0.tgz",
-      "integrity": "sha512-DVRvtkoeXLHAbH+S+9m3ILIdnvQsSc9IvJwfEclQVD8e8FhzwA5Mtw4Q0XXYr/sAziw/HsMc/gpGAI+5w6ohIw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-2.0.0.tgz",
+      "integrity": "sha512-b5FErkZ4t6mpH1IFZSw7Mm2IQHXQ2R0/5Q4xd7Rv8dVkWvE54mFG/UW7HjfFazXFjXTNsM+dSX2tTeIDrV9K9A==",
      "requires": {
        "assert-ok": "~1.0.0",
-        "cast-array": "~1.0.0",
+        "cast-array": "~1.0.1",
        "object-filter": "~1.0.2",
-        "query-string": "~2.4.1"
+        "query-string": "~7.0.0"
      }
    },
    "make-dir": {
@@ -42728,39 +41993,6 @@
        }
      }
    },
-    "node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-      "dev": true,
-      "requires": {
-        "whatwg-url": "^5.0.0"
-      },
-      "dependencies": {
-        "tr46": {
-          "version": "0.0.3",
-          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-          "dev": true
-        },
-        "webidl-conversions": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-          "dev": true
-        },
-        "whatwg-url": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-          "dev": true,
-          "requires": {
-            "tr46": "~0.0.3",
-            "webidl-conversions": "^3.0.0"
-          }
-        }
-      }
-    },
    "node-forge": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -43001,12 +42233,14 @@
    "object-inspect": {
      "version": "1.12.2",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true
    },
    "object-is": {
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3"
@@ -43015,7 +42249,8 @@
    "object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
    },
    "object-visit": {
      "version": "1.0.1",
@@ -43030,6 +42265,7 @@
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.0",
        "define-properties": "^1.1.3",
@@ -43041,6 +42277,7 @@
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
@@ -43107,12 +42344,6 @@
        "wrappy": "1"
      }
    },
-    "one-time": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/one-time/-/one-time-0.0.4.tgz",
-      "integrity": "sha512-qAMrwuk2xLEutlASoiPiAMW3EN3K96Ka/ilSXYr6qR1zSVXw2j7+yDSqGTC4T9apfLYxM3tLLjKvgPdAUK7kYQ==",
-      "dev": true
-    },
    "onetime": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
@@ -44152,16 +43383,6 @@
        "react-is": "^16.13.1"
      }
    },
-    "prop-types-exact": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
-      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
-      "requires": {
-        "has": "^1.0.3",
-        "object.assign": "^4.1.0",
-        "reflect.ownkeys": "^0.2.0"
-      }
-    },
    "prop-types-extra": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
@@ -44236,11 +43457,21 @@
      }
    },
    "query-string": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
-      "integrity": "sha512-Y+OMYUuY7HxznI6WBN822fi/FMvnCTiuqd6KNcidPColOmMWPoV1RGYyyzObve1T/dD1i0ZgCCbO8ytu0ZUrkA==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
      "requires": {
-        "strict-uri-encode": "^1.0.0"
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "dependencies": {
+        "strict-uri-encode": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+          "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
+        }
      }
    },
    "queue-microtask": {
@@ -44514,6 +43745,16 @@
        "scheduler": "^0.19.1"
      }
    },
+    "react-dropzone": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.2.tgz",
+      "integrity": "sha512-5oyGN/B5rNhop2ggUnxztXBQ6q6zii+OMEftPzsxAR2hhpVWz0nAV+3Ktxo2h5bZzdcCKrpd8bfWAVsveIBM+w==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
    "react-error-overlay": {
      "version": "6.0.11",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -44602,6 +43843,12 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
+    "react-loading-skeleton": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
+      "integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==",
+      "requires": {}
+    },
    "react-mathjax-preview": {
      "version": "2.2.6",
      "resolved": "https://registry.npmjs.org/react-mathjax-preview/-/react-mathjax-preview-2.2.6.tgz",
@@ -44957,11 +44204,6 @@
      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
      "requires": {}
    },
-    "reflect.ownkeys": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
-      "integrity": "sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg=="
-    },
    "regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -45011,6 +44253,7 @@
      "version": "1.4.3",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
@@ -45316,12 +44559,6 @@
        "ret": "~0.1.10"
      }
    },
-    "safe-stable-stringify": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.3.1.tgz",
-      "integrity": "sha512-kYBSfT+troD9cDA85VDnHZ1rpHC50O0g1e6WlGHVCz/g+JS+9WKLj+XwFYyR8UbrZN8ll9HUpDAAddY58MGisg==",
-      "dev": true
-    },
    "safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -45817,6 +45054,7 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.0",
        "get-intrinsic": "^1.0.2",
@@ -45829,23 +45067,6 @@
      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
      "dev": true
    },
-    "simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.3.1"
-      },
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
-        }
-      }
-    },
    "sisteransi": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -46243,6 +45464,11 @@
        }
      }
    },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
    "split-string": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -46264,12 +45490,6 @@
      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
      "dev": true
    },
-    "stack-trace": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
-      "integrity": "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==",
-      "dev": true
-    },
    "stack-utils": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.5.tgz",
@@ -46383,19 +45603,12 @@
      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
      "dev": true
    },
-    "stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "requires": {
-        "stubs": "^3.0.0"
-      }
-    },
    "strict-uri-encode": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ=="
+      "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==",
+      "dev": true,
+      "optional": true
    },
    "string_decoder": {
      "version": "1.1.1",
@@ -46475,6 +45688,7 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.4",
@@ -46485,6 +45699,7 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.4",
@@ -46568,12 +45783,6 @@
      "dev": true,
      "optional": true
    },
-    "stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw==",
-      "dev": true
-    },
    "style-loader": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
@@ -46712,9 +45921,9 @@
      "dev": true
    },
    "tabbable": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
-      "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
    },
    "table": {
      "version": "5.4.6",
@@ -46747,137 +45956,6 @@
        }
      }
    },
-    "tabtab": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/tabtab/-/tabtab-3.0.2.tgz",
-      "integrity": "sha512-jANKmUe0sIQc/zTALTBy186PoM/k6aPrh3A7p6AaAfF6WPSbTx1JYeGIGH162btpH+mmVEXln+UxwViZHO2Jhg==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.0.1",
-        "es6-promisify": "^6.0.0",
-        "inquirer": "^6.0.0",
-        "minimist": "^1.2.0",
-        "mkdirp": "^0.5.1",
-        "untildify": "^3.0.3"
-      },
-      "dependencies": {
-        "ansi-escapes": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-          "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
-          "dev": true
-        },
-        "ansi-regex": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-          "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
-          "dev": true
-        },
-        "cli-cursor": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
-          "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==",
-          "dev": true,
-          "requires": {
-            "restore-cursor": "^2.0.0"
-          }
-        },
-        "cli-width": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
-          "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
-          "dev": true
-        },
-        "figures": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-          "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==",
-          "dev": true,
-          "requires": {
-            "escape-string-regexp": "^1.0.5"
-          }
-        },
-        "inquirer": {
-          "version": "6.5.2",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz",
-          "integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==",
-          "dev": true,
-          "requires": {
-            "ansi-escapes": "^3.2.0",
-            "chalk": "^2.4.2",
-            "cli-cursor": "^2.1.0",
-            "cli-width": "^2.0.0",
-            "external-editor": "^3.0.3",
-            "figures": "^2.0.0",
-            "lodash": "^4.17.12",
-            "mute-stream": "0.0.7",
-            "run-async": "^2.2.0",
-            "rxjs": "^6.4.0",
-            "string-width": "^2.1.0",
-            "strip-ansi": "^5.1.0",
-            "through": "^2.3.6"
-          }
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
-          "dev": true
-        },
-        "mimic-fn": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
-          "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
-          "dev": true
-        },
-        "mute-stream": {
-          "version": "0.0.7",
-          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
-          "integrity": "sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==",
-          "dev": true
-        },
-        "onetime": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
-          "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
-          "dev": true,
-          "requires": {
-            "mimic-fn": "^1.0.0"
-          }
-        },
-        "restore-cursor": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
-          "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==",
-          "dev": true,
-          "requires": {
-            "onetime": "^2.0.0",
-            "signal-exit": "^3.0.2"
-          }
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "dev": true,
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          },
-          "dependencies": {
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        }
-      }
-    },
    "tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -46899,19 +45977,6 @@
        "xtend": "^4.0.0"
      }
    },
-    "teeny-request": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
-      "integrity": "sha512-iwY6rkW5DDGq8hE2YgNQlKbptYpY5Nn2xecjQiNjOXWbKzPGUfmeUBCSQbbr306d7Z7U2N0TPl+/SwYRfua1Dg==",
-      "dev": true,
-      "requires": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "node-fetch": "^2.6.1",
-        "stream-events": "^1.0.5",
-        "uuid": "^8.0.0"
-      }
-    },
    "temp-dir": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
@@ -46990,12 +46055,6 @@
        "minimatch": "^3.0.4"
      }
    },
-    "text-hex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
-      "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
-      "dev": true
-    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -47171,12 +46230,6 @@
        "escape-string-regexp": "^1.0.2"
      }
    },
-    "triple-beam": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
-      "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==",
-      "dev": true
-    },
    "tryer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -47277,6 +46330,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "has-bigints": "^1.0.2",
@@ -47421,12 +46475,6 @@
        }
      }
    },
-    "untildify": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/untildify/-/untildify-3.0.3.tgz",
-      "integrity": "sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==",
-      "dev": true
-    },
    "uri-js": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -47469,15 +46517,6 @@
      "dev": true,
      "optional": true
    },
-    "urlgrey": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-1.0.0.tgz",
-      "integrity": "sha512-hJfIzMPJmI9IlLkby8QrsCykQ+SXDeO2W5Q9QTW3QpqZVTx4a/K7p8/5q+/isD8vsbVaFgql/gvAoQCRQ2Cb5w==",
-      "dev": true,
-      "requires": {
-        "fast-url-parser": "^1.1.3"
-      }
-    },
    "use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -48157,6 +47196,7 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
      "requires": {
        "is-bigint": "^1.0.1",
        "is-boolean-object": "^1.1.0",
@@ -48177,60 +47217,6 @@
      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
      "dev": true
    },
-    "winston": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/winston/-/winston-3.2.1.tgz",
-      "integrity": "sha512-zU6vgnS9dAWCEKg/QYigd6cgMVVNwyTzKs81XZtTFuRwJOcDdBg7AU0mXVyNbs7O5RH2zdv+BdNZUlx7mXPuOw==",
-      "dev": true,
-      "requires": {
-        "async": "^2.6.1",
-        "diagnostics": "^1.1.1",
-        "is-stream": "^1.1.0",
-        "logform": "^2.1.1",
-        "one-time": "0.0.4",
-        "readable-stream": "^3.1.1",
-        "stack-trace": "0.0.x",
-        "triple-beam": "^1.3.0",
-        "winston-transport": "^4.3.0"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
-      }
-    },
-    "winston-transport": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.5.0.tgz",
-      "integrity": "sha512-YpZzcUzBedhlTAfJg6vJDlyEai/IFMIVcaEZZyl3UXIl4gmqRpU7AE89AHLkbzLUsv0NVmw7ts+iztqKxxPW1Q==",
-      "dev": true,
-      "requires": {
-        "logform": "^2.3.2",
-        "readable-stream": "^3.6.0",
-        "triple-beam": "^1.3.0"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
-      }
-    },
    "word-wrap": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
--- a/package.json
+++ b/package.json
@@ -37,19 +37,19 @@
    "@edx/frontend-component-footer": "11.2.0",
    "@edx/frontend-component-header": "3.2.0",
    "@edx/frontend-platform": "2.6.1",
-    "@edx/paragon": "19.10.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",
--- a/public/index.html
+++ b/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
+      async
+      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+      id="MathJax-script"
+    ></script>
  </head>
-  <body class="vh-100 vw-100 h-100 m-0">
-    <div id="root" class="vh-100 vw-100 small"></div>
+  <body>
+    <div id="root" class="small"></div>
+
+    <!-- begin usabilla live embed code -->
+    <script 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>
--- a/src/components/FilterBar.jsx
+++ b/src/components/FilterBar.jsx
@@ -0,0 +1,200 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { capitalize, toString } from 'lodash';
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Collapsible, Form, Icon, Spinner,
+} from '@edx/paragon';
+import { Tune } from '@edx/paragon/icons';
+
+import {
+  PostsStatusFilter, RequestStatus,
+  ThreadOrdering, ThreadType,
+} from '../data/constants';
+import { selectCourseCohorts } from '../discussions/cohorts/data/selectors';
+import messages from '../discussions/posts/post-filter-bar/messages';
+import { ActionItem } from '../discussions/posts/post-filter-bar/PostFilterBar';
+
+function FilterBar({
+  intl,
+  filters,
+  selectedFilters,
+  onFilterChange,
+  showCohortsFilter,
+}) {
+  const [isOpen, setOpen] = useState(false);
+  const cohorts = useSelector(selectCourseCohorts);
+  const { status } = useSelector(state => state.cohorts);
+  const selectedCohort = useMemo(() => cohorts.find(cohort => (
+    toString(cohort.id) === selectedFilters.cohort)),
+  [selectedFilters.cohort]);
+
+  const allFilters = [
+    {
+      id: 'type-all',
+      label: intl.formatMessage(messages.allPosts),
+      value: ThreadType.ALL,
+    },
+    {
+      id: 'type-discussions',
+      label: intl.formatMessage(messages.filterDiscussions),
+      value: ThreadType.DISCUSSION,
+    },
+    {
+      id: 'type-questions',
+      label: intl.formatMessage(messages.filterQuestions),
+      value: ThreadType.QUESTION,
+    },
+    {
+      id: 'status-any',
+      label: intl.formatMessage(messages.filterAnyStatus),
+      value: PostsStatusFilter.ALL,
+    },
+    {
+      id: 'status-unread',
+      label: intl.formatMessage(messages.filterUnread),
+      value: PostsStatusFilter.UNREAD,
+    },
+    {
+      id: 'status-reported',
+      label: intl.formatMessage(messages.filterReported),
+      value: PostsStatusFilter.REPORTED,
+    },
+    {
+      id: 'status-unanswered',
+      label: intl.formatMessage(messages.filterUnanswered),
+      value: PostsStatusFilter.UNANSWERED,
+    },
+    {
+      id: 'status-unresponded',
+      label: intl.formatMessage(messages.filterUnresponded),
+      value: PostsStatusFilter.UNRESPONDED,
+    },
+    {
+      id: 'sort-activity',
+      label: intl.formatMessage(messages.lastActivityAt),
+      value: ThreadOrdering.BY_LAST_ACTIVITY,
+    },
+    {
+      id: 'sort-comments',
+      label: intl.formatMessage(messages.commentCount),
+      value: ThreadOrdering.BY_COMMENT_COUNT,
+    },
+    {
+      id: 'sort-votes',
+      label: intl.formatMessage(messages.voteCount),
+      value: ThreadOrdering.BY_VOTE_COUNT,
+    },
+  ];
+
+  return (
+    <Collapsible.Advanced
+      open={isOpen}
+      onToggle={() => setOpen(!isOpen)}
+      className="filter-bar collapsible-card-lg border-0"
+    >
+      <Collapsible.Trigger className="collapsible-trigger border-0">
+        <span className="text-primary-700 pr-4">
+          {intl.formatMessage(messages.sortFilterStatus, {
+            own: false,
+            type: selectedFilters.postType,
+            sort: selectedFilters.orderBy,
+            status: selectedFilters.status,
+            cohortType: selectedCohort?.name ? 'group' : 'all',
+            cohort: capitalize(selectedCohort?.name),
+          })}
+        </span>
+        <Collapsible.Visible whenClosed>
+          <Icon src={Tune} />
+        </Collapsible.Visible>
+        <Collapsible.Visible whenOpen>
+          <Icon src={Tune} />
+        </Collapsible.Visible>
+      </Collapsible.Trigger>
+      <Collapsible.Body className="collapsible-body px-4 pb-3 pt-0">
+        <Form>
+          <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
+                        key={element.id}
+                        id={element.id}
+                        label={element.label}
+                        value={element.value}
+                        selected={selectedFilters[value.name]}
+                      />
+                    );
+                  }
+                  return false;
+                })}
+              </Form.RadioSet>
+            ))}
+          </div>
+          {showCohortsFilter && (
+            <>
+              <div className="border-bottom my-2" />
+              {status === RequestStatus.IN_PROGRESS ? (
+                <div className="d-flex justify-content-center p-4">
+                  <Spinner animation="border" variant="primary" size="lg" />
+                </div>
+              ) : (
+                <div className="d-flex flex-row pt-2">
+                  <Form.RadioSet
+                    name="cohort"
+                    className="d-flex flex-column list-group list-group-flush w-100"
+                    value={selectedFilters.cohort}
+                    onChange={onFilterChange}
+                  >
+                    <ActionItem
+                      id="all-groups"
+                      label="All groups"
+                      value=""
+                      selected={selectedFilters.cohort}
+                    />
+                    {cohorts.map(cohort => (
+                      <ActionItem
+                        key={toString(cohort.id)}
+                        id={toString(cohort.id)}
+                        label={capitalize(cohort.name)}
+                        value={toString(cohort.id)}
+                        selected={selectedFilters.cohort}
+                      />
+                    ))}
+                  </Form.RadioSet>
+                </div>
+              )}
+            </>
+          )}
+        </Form>
+      </Collapsible.Body>
+    </Collapsible.Advanced>
+  );
+}
+
+FilterBar.propTypes = {
+  intl: intlShape.isRequired,
+  filters: PropTypes.array.isRequired,
+  selectedFilters: PropTypes.object.isRequired,
+  onFilterChange: PropTypes.func.isRequired,
+  showCohortsFilter: PropTypes.bool,
+};
+
+FilterBar.defaultProps = {
+  showCohortsFilter: false,
+};
+
+export default injectIntl(FilterBar);
--- a/src/components/HTMLLoader.jsx
+++ b/src/components/HTMLLoader.jsx
@@ -1,47 +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]'],
-    ],
-    displayMath: [
-      ['[mathjax]', '[/mathjax]'],
-      ['$$', '$$'],
-      ['\\\\[', '\\\\]'],
-      ['\\[', '\\]'],
-    ],
-  },
+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(/(\\\[(.+?)\\\])+/)
-                  || 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} />
+
  );
 }

@@ -49,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;
--- a/src/components/NavigationBar/data/api.js
+++ b/src/components/NavigationBar/data/api.js
@@ -2,7 +2,7 @@
 import { camelCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-import { API_BASE_URL } from '../../../data/constants';
+import { getApiBaseUrl } from '../../../data/constants';

 function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
  const data = camelCaseObject(metadata);
@@ -21,7 +21,7 @@ function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
 }

 export async function getCourseHomeCourseMetadata(courseId, rootSlug) {
-  const url = `${API_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+  const url = `${getApiBaseUrl()}/api/course_home/course_metadata/${courseId}`;
  // don't know the context of adding timezone in url. hence omitting it
  // url = appendBrowserTimezoneToUrl(url);
  const { data } = await getAuthenticatedHttpClient().get(url);
--- a/src/components/NavigationBar/data/selectors.js
+++ b/src/components/NavigationBar/data/selectors.js
@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+
+export const selectCourseTabs = state => state.courseTabs;
--- a/src/components/PostPreviewPane.jsx
+++ b/src/components/PostPreviewPane.jsx
@@ -17,8 +17,8 @@ function PostPreviewPane({
    <>
      {showPreviewPane && (
        <div
-          className={`p-2 bg-light-200 rounded box-shadow-down-1 post-preview ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
-          style={{ maxHeight: '200px', overflow: 'scroll' }}
+          className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
+          style={{ minHeight: '200px', wordBreak: 'break-word' }}
        >
          <IconButton
            onClick={() => setShowPreviewPane(false)}
@@ -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>
--- a/src/components/SearchInfo.jsx
+++ b/src/components/SearchInfo.jsx
@@ -14,18 +14,23 @@ function SearchInfo({
  text,
  loadingStatus,
  onClear,
+  textSearchRewrite,
 }) {
  return (
    <div className="d-flex flex-row border-bottom border-light-400">
      <Icon src={Search} className="justify-content-start ml-3.5 mr-2 mb-2 mt-2.5" />
-      <Button variant="" size="inline">
-        {
-          loadingStatus === RequestStatus.SUCCESSFUL
-            ? intl.formatMessage(messages.searchInfo, { count, text })
-            : intl.formatMessage(messages.searchInfoSearching)
-        }
+      <Button variant="" size="inline" className="text-justify p-2">
+        {loadingStatus === RequestStatus.SUCCESSFUL && (
+          textSearchRewrite ? intl.formatMessage(messages.searchRewriteInfo, {
+            searchString: text,
+            count,
+            textSearchRewrite,
+          })
+            : intl.formatMessage(messages.searchInfo, { count, text })
+        )}
+        {loadingStatus !== RequestStatus.SUCCESSFUL && intl.formatMessage(messages.searchInfoSearching)}
      </Button>
-      <Button variant="link" size="inline" className="ml-auto mr-4" onClick={onClear}>
+      <Button variant="link" size="inline" className="ml-auto mr-3" onClick={onClear} style={{ minWidth: '26%' }}>
        {intl.formatMessage(messages.clearSearch)}
      </Button>
    </div>
@@ -37,11 +42,13 @@ SearchInfo.propTypes = {
  count: PropTypes.number.isRequired,
  text: PropTypes.string.isRequired,
  loadingStatus: PropTypes.string.isRequired,
+  textSearchRewrite: PropTypes.string,
  onClear: PropTypes.func,
 };

 SearchInfo.defaultProps = {
  onClear: () => {},
+  textSearchRewrite: null,
 };

 export default injectIntl(SearchInfo);
--- a/src/components/TinyMCEEditor.jsx
+++ b/src/components/TinyMCEEditor.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';

 import { Editor } from '@tinymce/tinymce-react';
 import { useParams } from 'react-router';
@@ -6,7 +6,11 @@ import { useParams } from 'react-router';
 // eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
 import tinymce from 'tinymce/tinymce';

+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ActionRow, AlertModal, Button } from '@edx/paragon';
+
 import { MAX_UPLOAD_FILE_SIZE } from '../data/constants';
+import messages from '../discussions/messages';
 import { uploadFile } from '../discussions/posts/data/api';

 import 'tinymce/plugins/code';
@@ -18,6 +22,7 @@ import 'tinymce/icons/default';
 import 'tinymce/skins/ui/oxide/skin.css';
 // importing the plugin js.
 import 'tinymce/plugins/autolink';
+import 'tinymce/plugins/autoresize';
 import 'tinymce/plugins/autosave';
 import 'tinymce/plugins/codesample';
 import 'tinymce/plugins/image';
@@ -27,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';
@@ -57,7 +63,8 @@ export default function TinyMCEEditor(props) {
  // loading process and is instead loaded as a string via content_style

  const { courseId, postId } = useParams();
-
+  const [showImageWarning, setShowImageWarning] = useState(false);
+  const intl = useIntl();
  const uploadHandler = async (blobInfo, success, failure) => {
    try {
      const blob = blobInfo.blob();
@@ -68,6 +75,11 @@ export default function TinyMCEEditor(props) {
      }
      const filename = blobInfo.filename();
      const { location } = await uploadFile(blob, filename, courseId, postId || 'root');
+      const img = new Image();
+      img.onload = function () {
+        if (img.height > 999 || img.width > 999) { setShowImageWarning(true); }
+      };
+      img.src = location;
      success(location);
    } catch (e) {
      failure(e.toString(), { remove: true });
@@ -83,34 +95,57 @@ export default function TinyMCEEditor(props) {
  }

  return (
-    <Editor
-      init={{
-        skin: false,
-        menubar: false,
-        branding: false,
-        contextmenu: false,
-        browser_spellcheck: true,
-        a11y_advanced_options: true,
-        autosave_interval: '1s',
-        autosave_restore_when_empty: false,
-        plugins: 'autosave codesample link lists image imagetools code emoticons charmap',
-        toolbar: 'undo redo'
-          + ' | formatselect | bold italic underline'
-          + ' | link blockquote openedx_code image'
-          + ' | bullist numlist outdent indent'
-          + ' | removeformat'
-          + ' | openedx_html'
-          + ' | emoticons'
-          + ' | charmap',
-        content_css: false,
-        content_style: contentStyle,
-        body_class: 'm-2 text-editor',
-        default_link_target: '_blank',
-        target_list: false,
-        images_upload_handler: uploadHandler,
-        setup,
-      }}
-      {...props}
-    />
+    <>
+      <Editor
+        init={{
+          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 paste',
+          toolbar: 'undo redo'
+                      + ' | formatselect | bold italic underline'
+                      + ' | link blockquote openedx_code image'
+                      + ' | bullist numlist outdent indent'
+                      + ' | removeformat'
+                      + ' | openedx_html'
+                      + ' | emoticons'
+                      + ' | charmap',
+          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,
+          setup,
+        }}
+        {...props}
+      />
+      <AlertModal
+        title={intl.formatMessage(messages.imageWarningModalTitle)}
+        isOpen={showImageWarning}
+        onClose={() => setShowImageWarning(false)}
+        isBlocking
+        footerNode={(
+          <ActionRow>
+            <Button variant="danger" onClick={() => setShowImageWarning(false)}>
+              {intl.formatMessage(messages.imageWarningDismissButton)}
+            </Button>
+          </ActionRow>
+                )}
+      >
+        <p>
+          {intl.formatMessage(messages.imageWarningMessage)}
+        </p>
+      </AlertModal>
+    </>
+
  );
 }
--- a/src/components/TopicStats.jsx
+++ b/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);
--- a/src/components/index.js
+++ b/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';
--- a/src/data/api.js
+++ b/src/data/api.js
@@ -1,9 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-import { API_BASE_URL } from './constants';
+import { getApiBaseUrl } from './constants';

-export const blocksAPIURL = `${API_BASE_URL}/api/courses/v1/blocks/`;
+export const getBlocksAPIURL = () => `${getApiBaseUrl()}/api/courses/v1/blocks/`;
 export async function getCourseBlocks(courseId, username) {
  const params = {
    course_id: courseId,
@@ -14,6 +14,6 @@ export async function getCourseBlocks(courseId, username) {
    student_view_data: 'discussion',
  };
  const { data } = await getAuthenticatedHttpClient()
-    .get(blocksAPIURL, { params });
+    .get(getBlocksAPIURL(), { params });
  return data;
 }
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -1,6 +1,6 @@
 import { getConfig } from '@edx/frontend-platform';

-export const API_BASE_URL = getConfig().LMS_BASE_URL;
+export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;

 /**
 * Enum for thread types.
@@ -63,6 +63,7 @@ export const ContentActions = {
 * @enum {string}
 */
 export const RequestStatus = {
+  IDLE: 'idle',
  IN_PROGRESS: 'in-progress',
  SUCCESSFUL: 'successful',
  FAILED: 'failed',
@@ -90,16 +91,6 @@ export const ThreadOrdering = {
  BY_VOTE_COUNT: 'voteCount',
 };

-/**
- * Enum for thread view status filtering.
- * @readonly
- * @enum {string}
- */
-export const ThreadViewStatus = {
-  UNREAD: 'unread',
-  UNANSWERED: 'unanswered',
-};
-
 /**
 * Enum for filtering posts by status.
 * @readonly
@@ -111,6 +102,7 @@ export const PostsStatusFilter = {
  FOLLOWING: 'statusFollowing',
  REPORTED: 'statusReported',
  UNANSWERED: 'statusUnanswered',
+  UNRESPONDED: 'statusUnresponded',
 };

 /**
@@ -133,6 +125,7 @@ export const TopicOrdering = {
 export const LearnersOrdering = {
  BY_FLAG: 'flagged',
  BY_LAST_ACTIVITY: 'activity',
+  BY_RECENCY: 'recency',
 };

 /**
@@ -198,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`,
  },
 };

--- a/src/data/redux.test.js
+++ b/src/data/redux.test.js
@@ -7,10 +7,11 @@ import { initializeMockApp } from '@edx/frontend-platform/testing';
 import { initializeStore } from '../store';
 import { executeThunk } from '../test-utils';
 import { getBlocksAPIResponse } from './__factories__';
-import { blocksAPIURL } from './api';
+import { getBlocksAPIURL } from './api';
 import { RequestStatus } from './constants';
 import { fetchCourseBlocks } from './thunks';

+const blocksAPIURL = getBlocksAPIURL();
 const courseId = 'course-v1:edX+DemoX+Demo_Course';

 let axiosMock;
--- a/src/data/selectors.js
+++ b/src/data/selectors.js
@@ -2,7 +2,7 @@

 import { createSelector } from '@reduxjs/toolkit';

-import { selectDiscussionProvider } from '../discussions/data/selectors';
+import { selectDiscussionProvider, selectGroupAtSubsection } from '../discussions/data/selectors';
 import { DiscussionProvider } from './constants';

 export const selectTopicContext = (topicId) => (state) => state.blocks.topics[topicId];
@@ -14,6 +14,18 @@ export const selectorForUnitSubsection = createSelector(
  blocks => key => blocks[blocks[key]?.parent],
 );

+// If subsection grouping is enabled, and the current selection is a unit, then get the current subsection.
+export const selectCurrentCategoryGrouping = createSelector(
+  selectDiscussionProvider,
+  selectGroupAtSubsection,
+  selectBlocks,
+  (provider, groupAtSubsection, blocks) => blockId => (
+    (provider !== 'openedx' || !groupAtSubsection || blocks[blockId]?.type !== 'vertical')
+      ? blockId
+      : blocks[blockId].parent
+  ),
+);
+
 export const selectChapters = (state) => state.blocks.chapters;
 export const selectTopicsUnderCategory = createSelector(
  selectDiscussionProvider,
@@ -26,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 || [],
--- a/src/discussions/cohorts/data/api.js
+++ b/src/discussions/cohorts/data/api.js
@@ -6,9 +6,7 @@ ensureConfig([
  'LMS_BASE_URL',
 ], 'Comments API service');

-const apiBaseUrl = getConfig().LMS_BASE_URL;
-
-export const getCohortsApiUrl = courseId => `${apiBaseUrl}/api/cohorts/v1/courses/${courseId}/cohorts/`;
+export const getCohortsApiUrl = courseId => `${getConfig().LMS_BASE_URL}/api/cohorts/v1/courses/${courseId}/cohorts/`;

 export async function getCourseCohorts(courseId) {
  const params = snakeCaseObject({ courseId });
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -1,170 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-
-import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Spinner } from '@edx/paragon';
-
-import { EndorsementStatus, ThreadType } from '../../data/constants';
-import { useDispatchWithState } from '../../data/hooks';
-import { Post } from '../posts';
-import { selectThread } from '../posts/data/selectors';
-import { fetchThread, markThreadAsRead } from '../posts/data/thunks';
-import { 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 (
-    <>
-      <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} />
-        ))}
-        {!!sortedComments.length && !isClosed
-          && <ResponseEditor postId={postId} addWrappingDiv />}
-        {hasMorePages && !isLoading && (
-          <Button
-            onClick={handleLoadMoreResponses}
-            variant="link"
-            block="true"
-            className="card p-4"
-            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>
-        )}
-      </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 { postId } = useParams();
-  const thread = usePost(postId);
-  const dispatch = useDispatch();
-  if (!thread) {
-    dispatch(fetchThread(postId, true));
-    return (
-      <Spinner animation="border" variant="primary" data-testid="loading-indicator" />
-    );
-  }
-  return (
-    <>
-      <div className="discussion-comments d-flex flex-column m-4 p-4.5 card">
-        <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);
--- a/src/discussions/comments/comment-icons/CommentIcons.jsx
+++ b/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);
--- a/src/discussions/comments/comment/Comment.jsx
+++ b/src/discussions/comments/comment/Comment.jsx
@@ -1,163 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, useToggle } from '@edx/paragon';
-
-import HTMLLoader from '../../../components/HTMLLoader';
-import { ContentActions } from '../../../data/constants';
-import { AlertBanner, DeleteConfirmation, EndorsedAlertBanner } from '../../common';
-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);
-
-  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));
-    },
-    [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)} />
-            )
-            : <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.loadMoreResponses)}
-          </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-4.5"
-                      variant="outline-primary"
-                      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);
--- a/src/discussions/comments/comment/CommentHeader.jsx
+++ b/src/discussions/comments/comment/CommentHeader.jsx
@@ -1,68 +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 { Avatar, Icon } from '@edx/paragon';
-import { CheckCircle, Verified } from '@edx/paragon/icons';
-
-import { AvatarOutlineAndLabelColors, 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 { commentShape } from './proptypes';
-
-function CommentHeader({
-  comment,
-  postType,
-  actionHandlers,
-}) {
-  const authorAvatars = useSelector(selectAuthorAvatars(comment.author));
-  const colorClass = AvatarOutlineAndLabelColors[comment.authorLabel];
-  const hasAnyAlert = useAlertBannerVisible(comment);
-
-  return (
-    <div className={classNames('d-flex flex-row justify-content-between', {
-      'mt-2': hasAnyAlert,
-    })}
-    >
-      <div className="align-items-center d-flex flex-row">
-        <Avatar
-          className={`border-0 ml-0.5 mr-2.5 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
-          alt={comment.author}
-          src={authorAvatars?.imageUrlSmall}
-          style={{
-            width: '32px',
-            height: '32px',
-          }}
-        />
-        <AuthorLabel author={comment.author} authorLabel={comment.authorLabel} labelColor={colorClass && `text-${colorClass}`} linkToProfile />
-      </div>
-      <div className="d-flex align-items-center">
-        <span className="btn-icon btn-icon-sm mr-1 align-items-center">
-          {comment.endorsed && (postType === 'question'
-            ? <Icon src={CheckCircle} className="text-success" data-testid="check-icon" />
-            : <Icon src={Verified} className="text-dark-500" data-testid="verified-icon" />)}
-        </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);
--- a/src/discussions/comments/comment/CommentHeader.test.jsx
+++ b/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: [],
-};
-
-describe('Comment Header', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-  });
-
-  it('should render verified icon for endorsed discussion posts', () => {
-    renderComponent(mockComment, 'discussion', {});
-    expect(screen.queryAllByTestId('verified-icon')).toHaveLength(1);
-  });
-  it('should render check icon for endorsed question posts', () => {
-    renderComponent(mockComment, 'question', {});
-    expect(screen.queryAllByTestId('check-icon')).toHaveLength(1);
-  });
-});
--- a/src/discussions/comments/comment/Reply.jsx
+++ b/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);
--- a/src/discussions/comments/comment/ResponseEditor.jsx
+++ b/src/discussions/comments/comment/ResponseEditor.jsx
@@ -1,57 +0,0 @@
-import React, { 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 { selectBlackoutDate } from '../../data/selectors';
-import { inBlackoutDateRange } from '../../utils';
-import messages from '../messages';
-import CommentEditor from './CommentEditor';
-
-function ResponseEditor({
-  postId,
-  intl,
-  addWrappingDiv,
-}) {
-  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="px-2.5 py-2" onClick={() => setAddingResponse(true)}>
-          {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);
--- a/src/discussions/comments/index.js
+++ b/src/discussions/comments/index.js
@@ -1,2 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export { default as CommentsView } from './CommentsView';
--- a/src/discussions/common/ActionsDropdown.jsx
+++ b/src/discussions/common/ActionsDropdown.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';

 import { useSelector } from 'react-redux';
@@ -6,26 +6,30 @@ import { useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
 import {
-  Button, Dropdown, Icon, IconButton, ModalPopup,
+  Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
 } from '@edx/paragon';
 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';

 function ActionsDropdown({
  intl,
  commentOrPost,
  disabled,
  actionHandlers,
+  iconSize,
+  dropDownIconSize,
 }) {
-  const [isOpen, setOpen] = useState(false);
-  const dropdownIconRef = React.useRef(null);
+  const [isOpen, open, close] = useToggle(false);
+  const [target, setTarget] = useState(null);
  const actions = useActions(commentOrPost);
+  const { enableInContextSidebar } = useContext(DiscussionContext);
  const handleActions = (action) => {
    const actionFunction = actionHandlers[action];
    if (actionFunction) {
@@ -42,45 +46,48 @@ function ActionsDropdown({
  return (
    <>
      <IconButton
-        onClick={() => setOpen(!isOpen)}
+        onClick={open}
        alt={intl.formatMessage(messages.actionsAlt)}
        src={MoreHoriz}
        iconAs={Icon}
        disabled={disabled}
-        size="sm"
-        ref={dropdownIconRef}
+        size={iconSize}
+        ref={setTarget}
+        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimentions' : ''}
      />
-      <ModalPopup
-        onClose={() => setOpen(false)}
-        positionRef={dropdownIconRef}
-        isOpen={isOpen}
-        placement="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={() => {
-                  setOpen(false);
-                  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>
    </>
  );
 }
@@ -90,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);
--- a/src/discussions/common/ActionsDropdown.test.jsx
+++ b/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;
--- a/src/discussions/common/AlertBanner.jsx
+++ b/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,41 +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 isReportedByCurrentUser = getAuthenticatedUser().username === content?.abuseFlaggedBy;
-  const canSeeReportedBanner = (userHasModerationPrivileges || userIsGroupTa || isReportedByCurrentUser);
+  const canSeeReportedBanner = content?.abuseFlagged;
+  const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
+    || userIsGlobalStaff || userIsContentAuthor
+  );

  return (
    <>
-      {content.abuseFlagged && canSeeReportedBanner && (
-        <Alert icon={Error} variant="danger" className="px-3 mb-2 py-10px shadow-none flex-fill">
+      {canSeeReportedBanner && (
+        <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>
          )}
--- a/src/discussions/common/AlertBanner.test.jsx
+++ b/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;
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/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,
@@ -20,11 +22,16 @@ function AuthorLabel({
  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;
@@ -36,43 +43,76 @@ 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 !== 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-primary-500': !authorLabelMessage && !isRetiredUser,
-          'text-gray-700': isRetiredUser,
-        })}
-        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-3 font-size-14 font-style-normal font-family-inter font-weight-500', {
-            'text-primary-500': !authorLabelMessage,
+          className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+            'text-primary-500': showTextPrimary,
+            'text-gray-700': isRetiredUser,
          })}
          style={{ marginLeft: '2px' }}
        >
          {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>
  );

@@ -97,12 +137,20 @@ AuthorLabel.propTypes = {
  authorLabel: PropTypes.string,
  linkToProfile: PropTypes.bool,
  labelColor: PropTypes.string,
+  alert: PropTypes.bool,
+  postCreatedAt: PropTypes.string,
+  authorToolTip: PropTypes.bool,
+  postOrComment: PropTypes.bool,
 };

 AuthorLabel.defaultProps = {
  linkToProfile: false,
  authorLabel: null,
  labelColor: '',
+  alert: false,
+  postCreatedAt: null,
+  authorToolTip: false,
+  postOrComment: false,
 };

 export default injectIntl(AuthorLabel);
--- a/src/discussions/common/AuthorLabel.test.jsx
+++ b/src/discussions/common/AuthorLabel.test.jsx
@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { IntlProvider } from 'react-intl';
+
+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 AuthorLabel from './AuthorLabel';
+import { DiscussionContext } from './context';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const courseConfigApiUrl = getCourseConfigApiUrl();
+let store;
+let axiosMock;
+let container;
+
+function renderComponent(author, authorLabel, linkToProfile, labelColor) {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider value={{ courseId }}>
+          <AuthorLabel
+            author={author}
+            authorLabel={authorLabel}
+            linkToProfile={linkToProfile}
+            labelColor={labelColor}
+          />
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+  return container;
+}
+
+describe('Author label', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
+      learners_tab_enabled: true,
+      has_moderation_privileges: true,
+    });
+    axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
+    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+  });
+
+  describe.each([
+    ['anonymous', null, false, ''],
+    ['ta_user', 'Community TA', true, 'text-TA-color'],
+    ['retired__user', null, false, ''],
+    ['staff_user', 'Staff', true, 'text-staff-color'],
+    ['learner_user', null, false, ''],
+  ])('for %s', (
+    author, authorLabel, linkToProfile, labelColor,
+  ) => {
+    it('it has author name text',
+      async () => {
+        renderComponent(author, authorLabel, linkToProfile, labelColor);
+        const authorElement = container.querySelector('[role=heading]');
+        const authorName = author.startsWith('retired__user') ? '[Deactivated]' : author;
+
+        expect(authorElement).toHaveTextContent(authorName);
+      });
+
+    it(`it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
+      async () => {
+        renderComponent(author, authorLabel, linkToProfile, labelColor);
+
+        if (linkToProfile) {
+          expect(screen.queryByTestId('learner-posts-link')).toBeInTheDocument();
+        } else {
+          expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
+        }
+      });
+
+    it(`it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
+      async () => {
+        renderComponent(author, authorLabel, linkToProfile, labelColor);
+        const authorElement = container.querySelector('[role=heading]');
+        const labelElement = authorElement.parentNode.lastChild;
+        const label = ['TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
+
+        if (linkToProfile) {
+          expect(authorElement.parentNode).toHaveClass(labelColor);
+          expect(authorElement.parentNode.lastChild).toHaveTextContent(label);
+        } else {
+          expect(authorElement.parentNode.lastChild).not.toHaveTextContent(label, { exact: true });
+          expect(authorElement.parentNode).not.toHaveClass(labelColor, { exact: true });
+        }
+      });
+  });
+});
--- a/src/discussions/common/DeleteConfirmation.jsx
+++ b/src/discussions/common/DeleteConfirmation.jsx
@@ -6,16 +6,19 @@ 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}>
+    <ModalDialog title={title} isOpen={isOpen} hasCloseButton={false} onClose={onClose} zIndex={5000}>
      <ModalDialog.Header>
        <ModalDialog.Title>
          {title}
@@ -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);
--- a/src/discussions/common/EndorsedAlertBanner.jsx
+++ b/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,27 +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-2">
-              {intl.formatMessage(
-                isQuestion
-                  ? messages.answeredLabel
-                  : messages.endorsedLabel,
-              )}
-            </span>
-            <AuthorLabel author={content.endorsedBy} authorLabel={content.endorsedByLabel} linkToProfile />
-            {intl.formatMessage(messages.time, { time: timeago.format(content.endorsedAt, 'time-locale') })}
+          <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
+            />
          </span>
        </div>
      </Alert>
--- a/src/discussions/common/EndorsedAlertBanner.test.jsx
+++ b/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,
--- a/src/discussions/common/HoverCard.jsx
+++ b/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);
--- a/src/discussions/common/HoverCard.test.jsx
+++ b/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();
+  });
+});
--- a/src/discussions/common/context.js
+++ b/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,
 });
--- a/src/discussions/common/index.js
+++ b/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';
--- a/src/discussions/data/api.js
+++ b/src/discussions/data/api.js
@@ -7,16 +7,14 @@ ensureConfig([
  'LMS_BASE_URL',
 ], 'Posts API service');

-const apiBaseUrl = getConfig().LMS_BASE_URL;
-
-export const courseConfigApiUrl = `${apiBaseUrl}/api/discussion/v1/courses/`;
+export const getCourseConfigApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;

 /**
 * Get discussions course config
 * @param {string} courseId
 */
 export async function getDiscussionsConfig(courseId) {
-  const url = `${courseConfigApiUrl}${courseId}/`;
+  const url = `${getCourseConfigApiUrl()}${courseId}/`;
  const { data } = await getAuthenticatedHttpClient().get(url);
  return data;
 }
@@ -26,7 +24,7 @@ export async function getDiscussionsConfig(courseId) {
 * @param {string} courseId
 */
 export async function getDiscussionsSettings(courseId) {
-  const url = `${courseConfigApiUrl}${courseId}/settings`;
+  const url = `${getCourseConfigApiUrl()}${courseId}/settings`;
  const { data } = await getAuthenticatedHttpClient().get(url);
  return data;
 }
--- a/src/discussions/data/hooks.js
+++ b/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,18 +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, selectUserRoles,
+  selectUserIsGroupTa,
+  selectUserIsStaff,
 } from './selectors';
 import { fetchCourseConfig } from './thunks';

@@ -32,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) {
@@ -62,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));
    }

@@ -70,7 +85,7 @@ export function useCourseDiscussionData(courseId) {
  }, [courseId]);
 }

-export function useRedirectToThread(courseId) {
+export function useRedirectToThread(courseId, enableInContextSidebar) {
  const dispatch = useDispatch();
  const redirectToThread = useSelector(
    (state) => state.threads.redirectToThread,
@@ -83,9 +98,10 @@ export function useRedirectToThread(courseId) {
    // stored in redirectToThread
    if (redirectToThread) {
      dispatch(clearRedirect());
-      const newLocation = discussionsPath(Routes.COMMENTS.PAGES['my-posts'], {
+      const newLocation = discussionsPath(Routes.COMMENTS.PAGES[enableInContextSidebar ? 'topics' : 'my-posts'], {
        courseId,
        postId: redirectToThread.threadId,
+        topicId: redirectToThread.topicId,
      })(location);
      history.push(newLocation);
    }
@@ -93,7 +109,8 @@ export function useRedirectToThread(courseId) {
 }

 export function useIsOnDesktop() {
-  return window.outerWidth >= breakpoints.large.minWidth;
+  const windowSize = useWindowSize();
+  return windowSize.width >= breakpoints.medium.minWidth;
 }

 export function useIsOnXLDesktop() {
@@ -140,8 +157,7 @@ export const useAlertBannerVisible = (content) => {
  const { reasonCodesEnabled } = useSelector(selectModerationSettings);
  const userIsContentAuthor = getAuthenticatedUser().username === content.author;
  const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsContentAuthor || userIsGroupTa);
-  const isReportedByCurrentUser = getAuthenticatedUser().username === content?.abuseFlaggedBy;
-  const canSeeReportedBanner = (userHasModerationPrivileges || userIsGroupTa || isReportedByCurrentUser);
+  const canSeeReportedBanner = content.abuseFlagged;

  return (
    (reasonCodesEnabled && canSeeLastEditOrClosedAlert && (content.lastEdit?.reason || content.closed))
@@ -149,12 +165,83 @@ export const useAlertBannerVisible = (content) => {
  );
 };

-export const useShowLearnersTab = () => {
-  const learnersTabEnabled = useSelector(selectLearnersTabEnabled);
-  const userRoles = useSelector(selectUserRoles);
-  const isAdmin = useSelector(selectUserIsStaff);
-  const IsGroupTA = useSelector(selectUserIsGroupTa);
-  const privileged = useSelector(selectUserHasModerationPrivileges);
-  const allowedUsers = isAdmin || IsGroupTA || privileged || (userRoles.includes('Student') && userRoles.length > 1);
-  return learnersTabEnabled && allowedUsers;
+export const useShowLearnersTab = () => useSelector(selectLearnersTabEnabled);
+
+/**
+ * React hook that gets the current topic ID from the current topic or category.
+ * The topicId in the DiscussionContext only return the direct topicId from the URL.
+ * If the URL has the current block ID it cannot get the topicID from that. This hook
+ * gets the topic ID from the URL if available, or from the current category otherwise.
+ * It only returns an ID if a single ID is available, if navigating a subsection it
+ * returns null.
+ * @returns {null|string} A topic ID if a single one available in the current context.
+ */
+export const useCurrentDiscussionTopic = () => {
+  const { topicId, category } = useContext(DiscussionContext);
+  const topics = useSelector(selectTopicsUnderCategory)(category);
+  if (topicId) {
+    return topicId;
+  }
+  if (topics?.length === 1) {
+    return topics[0];
+  }
+  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;
 };
--- a/src/discussions/data/hooks.test.jsx
+++ b/src/discussions/data/hooks.test.jsx
@@ -0,0 +1,175 @@
+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 { 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;
+let axiosMock;
+
+const generateApiResponse = (blackouts = [], isCourseAdmin = false) => ({
+  blackouts,
+  hasModerationPrivileges: false,
+  isGroupTa: false,
+  isCourseAdmin,
+  isCourseStaff: false,
+  isUserAdmin: false,
+});
+
+describe('Hooks', () => {
+  describe('useCurrentDiscussionTopic', () => {
+    function ComponentWithHook() {
+      const topic = useCurrentDiscussionTopic();
+      return (
+        <div>
+          {String(topic)}
+        </div>
+      );
+    }
+
+    function renderComponent({ topicId, category }) {
+      return render(
+        <IntlProvider locale="en">
+          <AppProvider store={store}>
+            <DiscussionContext.Provider
+              value={{
+                topicId,
+                category,
+              }}
+            >
+              <ComponentWithHook />
+            </DiscussionContext.Provider>
+          </AppProvider>
+        </IntlProvider>,
+      );
+    }
+
+    beforeEach(() => {
+      initializeMockApp();
+      store = initializeStore({
+        blocks: {
+          blocks: {
+            'some-unit-key': { topics: ['some-topic-0'], parent: 'some-sequence-key' },
+            'some-sequence-key': { topics: ['some-topic-0'] },
+            'another-sequence-key': { topics: ['some-topic-1', 'some-topic-2'] },
+            'empty-key': { topics: [] },
+          },
+        },
+        config: { provider: 'openedx' },
+      });
+    });
+
+    test('when topicId is in context', () => {
+      const { queryByText } = renderComponent({ topicId: 'some-topic' });
+      expect(queryByText('some-topic')).toBeInTheDocument();
+    });
+
+    test('when the category is a unit', () => {
+      const { queryByText } = renderComponent({ category: 'some-unit-key' });
+      expect(queryByText('some-topic-0')).toBeInTheDocument();
+    });
+
+    test('when the category is a sequence with one unit', () => {
+      const { queryByText } = renderComponent({ category: 'some-sequence-key' });
+      expect(queryByText('some-topic-0')).toBeInTheDocument();
+    });
+
+    test('when the category is a sequence with multiple units', () => {
+      const { queryByText } = renderComponent({ category: 'another-sequence-key' });
+      expect(queryByText('null')).toBeInTheDocument();
+    });
+
+    test('when the category is invalid', () => {
+      const { queryByText } = renderComponent({ category: 'invalid-key' });
+      expect(queryByText('null')).toBeInTheDocument();
+    });
+
+    test('when the category has no topics', () => {
+      const { queryByText } = renderComponent({ category: 'empty-key' });
+      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();
+      });
+    });
+  });
+});
--- a/src/discussions/data/selectors.js
+++ b/src/discussions/data/selectors.js
@@ -22,6 +22,14 @@ export const selectDivisionSettings = state => state.config.settings;

 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,
@@ -45,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;
    }
--- a/src/discussions/data/slices.js
+++ b/src/discussions/data/slices.js
@@ -11,8 +11,11 @@ const configSlice = createSlice({
    allowAnonymous: false,
    allowAnonymousToPeers: false,
    userRoles: [],
+    groupAtSubsection: false,
    hasModerationPrivileges: false,
    isGroupTa: false,
+    isCourseAdmin: false,
+    isCourseStaff: false,
    isUserAdmin: false,
    learnersTabEnabled: false,
    settings: {
@@ -24,6 +27,7 @@ const configSlice = createSlice({
    reasonCodesEnabled: false,
    editReasons: [],
    postCloseReasons: [],
+    enableInContext: false,
  },
  reducers: {
    fetchConfigRequest: (state) => {
--- a/src/discussions/data/thunks.js
+++ b/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) {
--- a/src/discussions/discussions-home/BlackoutInformationBanner.jsx
+++ b/src/discussions/discussions-home/BlackoutInformationBanner.jsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { PageBanner } from '@edx/paragon';
+
+import { selectBlackoutDate } from '../data/selectors';
+import messages from '../messages';
+import { inBlackoutDateRange } from '../utils';
+
+function BlackoutInformationBanner({
+  intl,
+}) {
+  const isDiscussionsBlackout = inBlackoutDateRange(useSelector(selectBlackoutDate));
+  const [showBanner, setShowBanner] = useState(true);
+
+  return (
+    <PageBanner
+      variant="accentB"
+      show={isDiscussionsBlackout && showBanner}
+      dismissible
+      onDismiss={() => setShowBanner(false)}
+    >
+      <div className="font-weight-500">
+        {intl.formatMessage(messages.blackoutDiscussionInformation)}
+      </div>
+    </PageBanner>
+  );
+}
+
+BlackoutInformationBanner.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BlackoutInformationBanner);
--- a/src/discussions/discussions-home/BlackoutInformationBanner.test.jsx
+++ b/src/discussions/discussions-home/BlackoutInformationBanner.test.jsx
@@ -0,0 +1,76 @@
+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 { fetchConfigSuccess } from '../data/slices';
+import messages from '../messages';
+import BlackoutInformationBanner from './BlackoutInformationBanner';
+
+let store;
+let container;
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+let activeStartDate = new Date();
+activeStartDate.setDate(activeStartDate.getDate() - 2);
+let activeEndDate = new Date();
+activeEndDate.setDate(activeEndDate.getDate() + 2);
+activeStartDate = activeStartDate.toISOString();
+activeEndDate = activeEndDate.toISOString();
+
+const getConfigData = (blackouts = []) => ({
+  id: 'course-v1:edX+DemoX+Demo_Course',
+  userRoles: ['Admin', 'Student'],
+  hasModerationPrivileges: false,
+  isGroupTa: false,
+  isUserAdmin: false,
+  blackouts,
+});
+
+function renderComponent() {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider value={{ courseId }}>
+          <BlackoutInformationBanner />
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+  return container;
+}
+
+describe('Blackout Information Banner', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: ['Student'],
+      },
+    });
+  });
+
+  test.each([
+    { blackouts: [], visibility: false },
+    { blackouts: ['2021-12-31T10:15', '2021-12-31T10:20'], visibility: false },
+    { blackouts: [{ start: activeStartDate, end: activeEndDate }], visibility: true },
+    { blackouts: [{ start: activeEndDate, end: activeEndDate }], visibility: false },
+  ])('Test Blackout Banner is visible on app load if blackout date is active', async ({ blackouts, visibility }) => {
+    store = initializeStore();
+    await store.dispatch(fetchConfigSuccess(getConfigData(blackouts)));
+    renderComponent();
+    if (visibility) {
+      const element = await screen.findByRole('alert');
+      expect(element).toBeInTheDocument();
+      expect(element).toHaveTextContent(messages.blackoutDiscussionInformation.defaultMessage);
+    } else {
+      const element = await screen.queryByRole('alert');
+      expect(element).not.toBeInTheDocument();
+    }
+  });
+});
--- a/src/discussions/discussions-home/DiscussionContent.jsx
+++ b/src/discussions/discussions-home/DiscussionContent.jsx
@@ -1,46 +1,20 @@
-import React, { useContext } from 'react';
+import React from 'react';

 import { useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router';
-import { useHistory, useLocation } from 'react-router-dom';

-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon, IconButton } from '@edx/paragon';
-import { ArrowBack } from '@edx/paragon/icons';
+import { injectIntl } from '@edx/frontend-platform/i18n';

-import { PostsPages, Routes } from '../../data/constants';
-import { CommentsView } from '../comments';
-import { DiscussionContext } from '../common/context';
-import { useIsOnDesktop } from '../data/hooks';
-import messages from '../messages';
+import { Routes } from '../../data/constants';
+import { PostCommentsView } from '../post-comments';
 import { PostEditor } from '../posts';
-import { discussionsPath } from '../utils';

-function DiscussionContent({ intl }) {
-  const location = useLocation();
-  const history = useHistory();
+function DiscussionContent() {
  const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
-  const isOnDesktop = useIsOnDesktop();
-  const {
-    courseId, learnerUsername, category, topicId, page,
-  } = useContext(DiscussionContext);

  return (
    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center">
      <div className="d-flex flex-column w-100">
-        {!isOnDesktop && (
-          <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)}
-          />
-        )}
        {postEditorVisible ? (
          <Route path={Routes.POSTS.NEW_POST}>
            <PostEditor />
@@ -51,7 +25,7 @@ function DiscussionContent({ intl }) {
              <PostEditor editExisting />
            </Route>
            <Route path={Routes.COMMENTS.PATH}>
-              <CommentsView />
+              <PostCommentsView />
            </Route>
          </Switch>
        )}
@@ -60,8 +34,4 @@ function DiscussionContent({ intl }) {
  );
 }

-DiscussionContent.propTypes = {
-  intl: intlShape.isRequired,
-};
-
 export default injectIntl(DiscussionContent);
--- a/src/discussions/discussions-home/DiscussionSidebar.jsx
+++ b/src/discussions/discussions-home/DiscussionSidebar.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';

 import classNames from 'classnames';
@@ -7,67 +7,93 @@ import {
  Redirect, Route, Switch, useLocation,
 } from 'react-router';

+import { useWindowSize } from '@edx/paragon';
+
 import { RequestStatus, Routes } from '../../data/constants';
+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();

  useEffect(() => {
-    if (sidebarRef && postActionBarHeight) {
+    if (sidebarRef && postActionBarHeight && !enableInContextSidebar) {
      if (isOnDesktop) {
-        sidebarRef.current.style.maxHeight = `${document.body.offsetHeight - postActionBarHeight}px`;
+        sidebarRef.current.style.maxHeight = `${windowHeight - postActionBarHeight}px`;
      }
-      sidebarRef.current.style.minHeight = `${document.body.offsetHeight - postActionBarHeight}px`;
+      sidebarRef.current.style.minHeight = `${windowHeight - postActionBarHeight}px`;
      sidebarRef.current.style.top = `${postActionBarHeight}px`;
    }
-  }, [sidebarRef, postActionBarHeight]);
+  }, [sidebarRef, postActionBarHeight, enableInContextSidebar]);

  return (
    <div
      ref={sidebarRef}
-      className={classNames('flex-column min-content-height 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': !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} />
+          <Route path={Routes.LEARNERS.POSTS} component={LearnerPostsView} />
        )}
        {redirectToLearnersTab && (
-        <Route path={Routes.LEARNERS.PATH} component={LearnersView} />
+          <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>
--- a/src/discussions/discussions-home/DiscussionSidebar.test.jsx
+++ b/src/discussions/discussions-home/DiscussionSidebar.test.jsx
@@ -13,7 +13,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeStore } from '../../store';
 import { DiscussionContext } from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
-import { threadsApiUrl } from '../posts/data/api';
+import { getThreadsApiUrl } from '../posts/data/api';
 import DiscussionSidebar from './DiscussionSidebar';

 import '../posts/data/__factories__';
@@ -21,6 +21,7 @@ import '../posts/data/__factories__';
 let store;
 let container;
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const threadsApiUrl = getThreadsApiUrl();
 let axiosMock;

 function renderComponent(displaySidebar = true, location = `/${courseId}/`) {
--- a/src/discussions/discussions-home/DiscussionsHome.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';

+import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
  Route, Switch, useLocation, useRouteMatch,
@@ -7,64 +8,57 @@ import {

 import Footer from '@edx/frontend-component-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
+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 {
-    courseId,
-    postId,
-    topicId,
-    category,
-    learnerUsername,
-  } = params;
-  const inContext = new URLSearchParams(location.search).get('inContext') !== null;
-  const inIframe = new URLSearchParams(location.search).get('inIframe')?.toLowerCase() === 'true';
-  // 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);
+  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 });
@@ -77,50 +71,62 @@ export default function DiscussionsHome() {
      courseId,
      postId,
      topicId,
-      inContext,
+      enableInContextSidebar,
      category,
      learnerUsername,
    }}
    >
-      {!inIframe && <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">
-        {!inIframe
-          && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
-        <div className="header-action-bar" ref={postActionBarRef}>
+        {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
+        <div
+          className={classNames('header-action-bar', {
+            'shadow-none border-light-300 border-bottom': enableInContextSidebar,
+          })}
+          ref={postActionBarRef}
+        >
          <div
-            className="d-flex flex-row justify-content-between navbar fixed-top"
+            className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
+              '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>
-          <InformationBanner />
+          {isFeedbackBannerVisible && <InformationBanner />}
+          <BlackoutInformationBanner />
        </div>
-        <Route
-          path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
-          component={provider === DiscussionProvider.LEGACY ? LegacyBreadcrumbMenu : BreadcrumbMenu}
-        />
+        {provider === DiscussionProvider.LEGACY && (
+          <Route
+            path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
+            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.POSTS.MY_POSTS}
-              render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyMyPosts} />}
-            />
-            <Route
-              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} /> }
-          </Switch>
+            <Switch>
+              <Route
+                path={Routes.TOPICS.PATH}
+                component={(enableInContext || enableInContextSidebar) ? InContextEmptyTopics : EmptyTopics}
+              />
+              <Route
+                path={Routes.POSTS.MY_POSTS}
+                render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyMyPosts} />}
+              />
+              <Route
+                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} />}
+            </Switch>
          )}
        </div>
+        <DiscussionsProductTour />
      </main>
-      {!inIframe && <Footer />}
+      {!enableInContextSidebar && <Footer />}
    </DiscussionContext.Provider>
  );
 }
--- a/src/discussions/discussions-home/DiscussionsHome.test.jsx
+++ b/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,35 +99,10 @@ describe('DiscussionsHome', () => {
    window.parent = parent;
  });

-  describe.each([
-    {
-      queryParam: 'inIframe=True',
-      iframeView: true,
-    },
-    {
-      queryParam: 'inIframe=False',
-      iframeView: false,
-    },
-    {
-      queryParam: '',
-      iframeView: false,
-    },
-  ])(
-    'Header/Footer visibility',
-    ({
-      queryParam,
-      iframeView,
-    }) => {
-      test(`inIframe query param ${queryParam}`, async () => {
-        renderComponent(`/${courseId}/topics?${queryParam}`);
-        if (iframeView) {
-          expect(screen.queryByRole('banner')).not.toBeInTheDocument();
-          expect(screen.queryByRole('contentinfo')).not.toBeInTheDocument();
-        } else {
-          expect(screen.queryByRole('banner')).toBeInTheDocument();
-          expect(screen.queryByRole('contentinfo')).toBeInTheDocument();
-        }
-      });
-    },
-  );
+  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();
+    expect(screen.queryByRole('contentinfo')).toBeInTheDocument();
+  });
 });
--- a/src/discussions/discussions-home/InformationsBanner.jsx
+++ b/src/discussions/discussions-home/InformationsBanner.jsx
@@ -27,7 +27,7 @@ function InformationBanner({
      dismissible
      onDismiss={() => setShowBanner(false)}
    >
-      <div style={{ fontWeight: '500' }}>
+      <div className="font-weight-500">
        {intl.formatMessage(messages.bannerMessage)}
        {!hideLearnMoreButton
          && (
--- a/src/discussions/discussions-home/InformationBanner.test.jsx
+++ b/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__';

--- a/src/discussions/empty-posts/EmptyPosts.jsx
+++ b/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,
 };

--- a/src/discussions/empty-posts/EmptyPosts.test.jsx
+++ b/src/discussions/empty-posts/EmptyPosts.test.jsx
@@ -12,7 +12,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import messages from '../messages';
-import { threadsApiUrl } from '../posts/data/api';
+import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
 import EmptyPosts from './EmptyPosts';

@@ -20,6 +20,7 @@ import '../posts/data/__factories__';

 let store;
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const threadsApiUrl = getThreadsApiUrl();

 function renderComponent(location = `/${courseId}/`) {
  return render(
--- a/src/discussions/empty-posts/EmptyTopics.test.jsx
+++ b/src/discussions/empty-posts/EmptyTopics.test.jsx
@@ -9,7 +9,7 @@ import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

-import { API_BASE_URL } from '../../data/constants';
+import { getApiBaseUrl } from '../../data/constants';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import messages from '../messages';
@@ -20,7 +20,7 @@ import '../topics/data/__factories__';

 let store;
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
-const topicsApiUrl = `${API_BASE_URL}/api/discussion/v1/course_topics/${courseId}`;
+const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;

 function renderComponent(location = `/${courseId}/topics/`) {
  return render(
--- a/src/discussions/in-context-topics/TopicPostsView.jsx
+++ b/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);
--- a/src/discussions/in-context-topics/TopicsView.jsx
+++ b/src/discussions/in-context-topics/TopicsView.jsx
@@ -0,0 +1,121 @@
+import React, { useContext, useEffect } from 'react';
+
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Spinner } from '@edx/paragon';
+
+import SearchInfo from '../../components/SearchInfo';
+import { RequestStatus } from '../../data/constants';
+import { DiscussionContext } from '../common/context';
+import { selectAreThreadsFiltered, selectDiscussionProvider } from '../data/selectors';
+import { clearFilter, clearSort } from '../posts/data/slices';
+import NoResults from '../posts/NoResults';
+import { handleKeyDown } from '../utils';
+import {
+  selectArchivedTopics, selectCoursewareTopics, selectFilteredTopics, selectLoadingStatus,
+  selectNonCoursewareTopics, selectTopicFilter, selectTopics,
+} from './data/selectors';
+import { setFilter } from './data/slices';
+import { fetchCourseTopicsV3 } from './data/thunks';
+import { ArchivedBaseGroup, SectionBaseGroup, Topic } from './topic';
+
+function TopicsList() {
+  const loadingStatus = useSelector(selectLoadingStatus);
+  const coursewareTopics = useSelector(selectCoursewareTopics);
+  const nonCoursewareTopics = useSelector(selectNonCoursewareTopics);
+  const archivedTopics = useSelector(selectArchivedTopics);
+
+  return (
+    <>
+      {nonCoursewareTopics?.map((topic, index) => (
+        <Topic
+          key={topic.id}
+          topic={topic}
+          showDivider={(nonCoursewareTopics.length - 1) !== index}
+        />
+      ))}
+      {coursewareTopics?.map((topic, index) => (
+        <SectionBaseGroup
+          key={topic.id}
+          section={topic?.children}
+          sectionId={topic.id}
+          sectionTitle={topic.displayName}
+          showDivider={(coursewareTopics.length - 1) !== index}
+        />
+      ))}
+      {!isEmpty(archivedTopics) && (
+        <ArchivedBaseGroup
+          archivedTopics={archivedTopics}
+          showDivider={(!isEmpty(nonCoursewareTopics) || !isEmpty(coursewareTopics))}
+        />
+      )}
+      {loadingStatus === RequestStatus.IN_PROGRESS && (
+        <div className="d-flex justify-content-center p-4">
+          <Spinner animation="border" variant="primary" size="lg" />
+        </div>
+      )}
+    </>
+  );
+}
+
+function TopicsView() {
+  const dispatch = useDispatch();
+  const { courseId } = useContext(DiscussionContext);
+  const provider = useSelector(selectDiscussionProvider);
+  const topicFilter = useSelector(selectTopicFilter);
+  const filteredTopics = useSelector(selectFilteredTopics);
+  const loadingStatus = useSelector(selectLoadingStatus);
+  const isPostsFiltered = useSelector(selectAreThreadsFiltered);
+  const topics = useSelector(selectTopics);
+
+  useEffect(() => {
+    if (provider) {
+      dispatch(fetchCourseTopicsV3(courseId));
+    }
+  }, [provider]);
+
+  useEffect(() => {
+    if (isPostsFiltered) {
+      dispatch(clearFilter());
+      dispatch(clearSort());
+    }
+  }, [isPostsFiltered]);
+
+  return (
+    <div className="d-flex flex-column h-100" data-testid="inContext-topics-view">
+      {topicFilter && (
+        <>
+          <SearchInfo
+            text={topicFilter}
+            count={filteredTopics.length}
+            loadingStatus={loadingStatus}
+            onClear={() => dispatch(setFilter(''))}
+          />
+          {filteredTopics.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
+        </>
+      )}
+      <div
+        className={classNames('list-group list-group-flush flex-fill', {
+          'justify-content-center': loadingStatus === RequestStatus.IN_PROGRESS && isEmpty(topics),
+        })}
+        role="list"
+        onKeyDown={e => handleKeyDown(e)}
+      >
+        {topicFilter ? (
+          filteredTopics?.map((topic) => (
+            <Topic
+              key={topic.id}
+              topic={topic}
+            />
+          ))
+        ) : (
+          <TopicsList />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TopicsView;
--- a/src/discussions/in-context-topics/TopicsView.test.jsx
+++ b/src/discussions/in-context-topics/TopicsView.test.jsx
@@ -0,0 +1,233 @@
+import {
+  fireEvent, render, screen, waitFor,
+  within,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { act } from 'react-dom/test-utils';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter, Route } from 'react-router';
+import { Factory } from 'rosie';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import { DiscussionContext } from '../common/context';
+import { getCourseTopicsApiUrl } from './data/api';
+import { selectCoursewareTopics, selectNonCoursewareTopics } from './data/selectors';
+import { fetchCourseTopicsV3 } from './data/thunks';
+import TopicPostsView from './TopicPostsView';
+import TopicsView from './TopicsView';
+
+import './data/__factories__';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const category = 'section-topic-1';
+
+const topicsApiUrl = `${getCourseTopicsApiUrl()}`;
+let store;
+let axiosMock;
+let lastLocation;
+let container;
+
+function renderComponent() {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider value={{ courseId, category }}>
+          <MemoryRouter initialEntries={[`/${courseId}/topics/`]}>
+            <Route path="/:courseId/topics/">
+              <TopicsView />
+            </Route>
+            <Route path="/:courseId/category/:category">
+              <TopicPostsView />
+            </Route>
+            <Route
+              render={({ location }) => {
+                lastLocation = location;
+                return null;
+              }}
+            />
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+}
+
+describe('InContext Topics View', () => {
+  let nonCoursewareTopics;
+  let coursewareTopics;
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore({
+      config: { enableInContext: true, provider: 'openedx', hasModerationPrivileges: true },
+    });
+    Factory.resetAll();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    lastLocation = undefined;
+  });
+
+  async function setupMockResponse() {
+    axiosMock.onGet(`${topicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      }).concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+
+    const state = store.getState();
+    nonCoursewareTopics = selectNonCoursewareTopics(state);
+    coursewareTopics = selectCoursewareTopics(state);
+  }
+
+  it('A non-courseware topic should be clickable and should have a title', async () => {
+    await setupMockResponse();
+    renderComponent();
+
+    const nonCourseware = nonCoursewareTopics[0];
+    const nonCoursewareTopic = await screen.findByText(nonCourseware.name);
+
+    await act(async () => {
+      fireEvent.click(nonCoursewareTopic);
+    });
+    await waitFor(() => {
+      expect(screen.queryByText(nonCourseware.name)).toBeInTheDocument();
+      expect(lastLocation.pathname.endsWith(`/topics/${nonCourseware.id}`)).toBeTruthy();
+    });
+  });
+
+  it('A non-courseware topic should be on the top of the list', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const topic = await container.querySelector('.discussion-topic');
+
+    expect(within(topic).queryByText('general-topic-1')).toBeInTheDocument();
+    expect(topic.nextSibling).toBe(container.querySelector('.divider'));
+  });
+
+  it('A non-Courseware topic should have 3 stats and should be hoverable', async () => {
+    await setupMockResponse();
+    renderComponent();
+
+    const topic = await container.querySelector('.discussion-topic');
+    const statsList = await topic.querySelectorAll('.icon-size');
+
+    expect(statsList.length).toBe(3);
+    fireEvent.mouseOver(statsList[0]);
+    expect(screen.queryByText('1 Discussion')).toBeInTheDocument();
+  });
+
+  it('Section groups should be listed in the middle of the topics list.', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const topicsList = await screen.getByRole('list');
+    const sectionGroups = await screen.getAllByTestId('section-group');
+
+    expect(topicsList.children[1]).toStrictEqual(topicsList.querySelector('.divider'));
+    expect(sectionGroups.length).toBe(2);
+    expect(topicsList.children[5]).toStrictEqual(topicsList.querySelector('.divider'));
+  });
+
+  it('A section group should have only a title and required subsections.', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const sectionGroups = await screen.getAllByTestId('section-group');
+
+    coursewareTopics.forEach(async (topic, index) => {
+      const stats = await sectionGroups[index].querySelectorAll('.icon-size:not([data-testid="subsection-group"].icon-size)');
+      const subsectionGroups = await within(sectionGroups[index]).getAllByTestId('subsection-group');
+
+      expect(within(sectionGroups[index]).queryByText(topic.displayName)).toBeInTheDocument();
+      expect(stats).toHaveLength(0);
+      expect(subsectionGroups).toHaveLength(2);
+    });
+  });
+
+  it('The subsection should have a title name, be clickable, and have the stats', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const subsectionObject = coursewareTopics[0].children[0];
+    const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
+    const subSectionTitle = await within(subSection).queryByText(subsectionObject.displayName);
+    const statsList = await subSection.querySelectorAll('.icon-size');
+
+    expect(subSectionTitle).toBeInTheDocument();
+    expect(statsList).toHaveLength(2);
+  });
+
+  it('Subsection names should be clickable and redirected to the units lists', async () => {
+    await setupMockResponse();
+    renderComponent();
+
+    const subsectionObject = coursewareTopics[0].children[0];
+    const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
+
+    await act(async () => fireEvent.click(subSection));
+    await waitFor(async () => {
+      const backButton = await screen.getByLabelText('Back to topics list');
+      const topicsList = await screen.getByRole('list');
+      const subSectionHeading = await screen.findByText(subsectionObject.displayName);
+      const units = await topicsList.querySelectorAll('.discussion-topic');
+
+      expect(backButton).toBeInTheDocument();
+      expect(subSectionHeading).toBeInTheDocument();
+      expect(units).toHaveLength(4);
+      expect(lastLocation.pathname.endsWith(`/category/${subsectionObject.id}`)).toBeTruthy();
+    });
+  });
+
+  it('The number of units should be matched with the actual unit length.', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const subSection = await container.querySelector(`[data-subsection-id=${coursewareTopics[0].children[0].id}]`);
+
+    await act(async () => fireEvent.click(subSection));
+    await waitFor(async () => {
+      const units = await container.querySelectorAll('.discussion-topic');
+
+      expect(units).toHaveLength(4);
+    });
+  });
+
+  it('A unit should have a title and stats and should be clickable', async () => {
+    await setupMockResponse();
+    renderComponent();
+    const subSectionObject = coursewareTopics[0].children[0];
+    const unitObject = subSectionObject.children[0];
+
+    const subSection = await container.querySelector(`[data-subsection-id=${subSectionObject.id}]`);
+
+    await act(async () => fireEvent.click(subSection));
+    await waitFor(async () => {
+      const unitElement = await screen.findByText(unitObject.name);
+      const unitContainer = await container.querySelector(`[data-topic-id=${unitObject.id}]`);
+      const statsList = await unitContainer.querySelectorAll('.icon-size');
+
+      expect(unitElement).toBeInTheDocument();
+      expect(statsList).toHaveLength(3);
+
+      await act(async () => fireEvent.click(unitContainer));
+      await waitFor(async () => {
+        expect(lastLocation.pathname.endsWith(`/topics/${unitObject.id}`)).toBeTruthy();
+      });
+    });
+  });
+});
--- a/src/discussions/in-context-topics/components/BackButton.jsx
+++ b/src/discussions/in-context-topics/components/BackButton.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useHistory } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, IconButton, Spinner } from '@edx/paragon';
+import { ArrowBack } from '@edx/paragon/icons';
+
+import messages from '../messages';
+
+function BackButton({
+  intl, path, title, loading,
+}) {
+  const history = useHistory();
+
+  return (
+    <>
+      <div className="d-flex py-2.5 px-3 font-weight-bold border-light-400 border-bottom">
+        <IconButton
+          src={ArrowBack}
+          iconAs={Icon}
+          style={{ padding: '18px' }}
+          size="inline"
+          onClick={() => history.push(path)}
+          alt={intl.formatMessage(messages.backAlt)}
+        />
+        <div className="d-flex flex-fill justify-content-center align-items-center mr-4.5">
+          {loading ? <Spinner animation="border" variant="primary" size="sm" /> : title}
+        </div>
+      </div>
+      <div className="border-bottom border-light-400" />
+    </>
+  );
+}
+
+BackButton.propTypes = {
+  intl: intlShape.isRequired,
+  path: PropTypes.shape({}).isRequired,
+  title: PropTypes.string.isRequired,
+  loading: PropTypes.bool,
+};
+
+BackButton.defaultProps = {
+  loading: false,
+};
+
+export default injectIntl(BackButton);
--- a/src/discussions/in-context-topics/components/EmptyTopics.jsx
+++ b/src/discussions/in-context-topics/components/EmptyTopics.jsx
@@ -0,0 +1,83 @@
+import React, { useContext } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { useRouteMatch } from 'react-router';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { ALL_ROUTES } from '../../../data/constants';
+import { DiscussionContext } from '../../common/context';
+import { useIsOnDesktop } from '../../data/hooks';
+import { selectPostThreadCount } from '../../data/selectors';
+import EmptyPage from '../../empty-posts/EmptyPage';
+import messages from '../../messages';
+import { messages as postMessages, showPostEditor } from '../../posts';
+import { selectCourseWareThreadsCount, selectTotalTopicsThreadsCount } from '../data/selectors';
+
+function EmptyTopics({ intl }) {
+  const match = useRouteMatch(ALL_ROUTES);
+  const dispatch = useDispatch();
+  const { enableInContextSidebar } = useContext(DiscussionContext);
+  const courseWareThreadsCount = useSelector(selectCourseWareThreadsCount(match.params.category));
+  const topicThreadsCount = useSelector(selectPostThreadCount);
+  // hasGlobalThreads is used to determine if there are any post available in courseware and non-courseware topics
+  const hasGlobalThreads = useSelector(selectTotalTopicsThreadsCount) > 0;
+
+  function addPost() {
+    return dispatch(showPostEditor());
+  }
+
+  const isOnDesktop = useIsOnDesktop();
+
+  let title = messages.emptyTitle;
+  let fullWidth = false;
+  let subTitle;
+  let action;
+  let actionText;
+
+  if (!isOnDesktop) {
+    return null;
+  }
+
+  if (match.params.topicId) {
+    if (topicThreadsCount > 0) {
+      title = messages.noPostSelected;
+    } else {
+      action = addPost;
+      actionText = postMessages.addAPost;
+      subTitle = messages.emptyTopic;
+      fullWidth = true;
+    }
+  } else if (match.params.category) {
+    if (enableInContextSidebar && topicThreadsCount > 0) {
+      title = messages.noPostSelected;
+    } else if (courseWareThreadsCount > 0) {
+      title = messages.noTopicSelected;
+    } else {
+      action = addPost;
+      actionText = postMessages.addAPost;
+      subTitle = messages.emptyTopic;
+      fullWidth = true;
+    }
+  } else if (hasGlobalThreads) {
+    title = messages.noTopicSelected;
+  } else {
+    fullWidth = true;
+  }
+
+  return (
+    <EmptyPage
+      title={intl.formatMessage(title)}
+      subTitle={subTitle && intl.formatMessage(subTitle)}
+      action={action}
+      actionText={actionText && intl.formatMessage(actionText)}
+      fullWidth={fullWidth}
+    />
+  );
+}
+
+EmptyTopics.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(EmptyTopics);
--- a/src/discussions/in-context-topics/components/NoResults.jsx
+++ b/src/discussions/in-context-topics/components/NoResults.jsx
@@ -0,0 +1,29 @@
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { selectTopics } from '../data/selectors';
+import messages from '../messages';
+
+function NoResults({ intl }) {
+  const topics = useSelector(selectTopics);
+
+  let title = messages.nothingHere;
+  const helpMessage = '';
+  if (topics.length === 0) {
+    title = messages.noTopicExists;
+  }
+
+  return (
+    <div className="h-100 mt-5 align-self-center mx-auto w-50 d-flex flex-column justify-content-center text-center">
+      <h4 className="font-weight-normal text-primary-500">{intl.formatMessage(title)}</h4>
+      { helpMessage && <small className="font-weight-normal text-gray-700">{intl.formatMessage(helpMessage)}</small>}
+    </div>
+  );
+}
+
+NoResults.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(NoResults);
--- a/src/discussions/in-context-topics/components/index.js
+++ b/src/discussions/in-context-topics/components/index.js
@@ -0,0 +1,4 @@
+/* eslint-disable import/prefer-default-export */
+export { default as BackButton } from './BackButton';
+export { default as EmptyTopic } from './EmptyTopics';
+export { default as NoResults } from './NoResults';
--- a/src/discussions/in-context-topics/data/factories/inContextTopics.factory.js
+++ b/src/discussions/in-context-topics/data/factories/inContextTopics.factory.js
@@ -0,0 +1,89 @@
+import { Factory } from 'rosie';
+
+import { getApiBaseUrl } from '../../../../data/constants';
+
+Factory.define('topic')
+  .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}-${idx}`)
+  .sequence('enabled-in-context', ['enabledInContext'], (idx, enabledInContext) => enabledInContext)
+  .sequence('name', ['topicNamePrefix'], (idx, topicNamePrefix) => `${topicNamePrefix}-${idx}`)
+  .sequence('usage-key', ['usageKey'], (idx, usageKey) => usageKey)
+  .sequence('courseware', ['courseware'], (idx, courseware) => courseware)
+  .attr('activeFlags', null, true)
+  .attr('thread_counts', ['discussionCount', 'questionCount'], (discCount, questCount) => {
+    Factory.reset('thread-counts');
+    return Factory.build('thread-counts', null, { discussionCount: discCount, questionCount: questCount });
+  });
+
+Factory.define('sub-section')
+  .sequence('block_id', (idx) => `${idx}`)
+  .option('topicPrefix', null, '')
+  .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}-topic-${idx}`)
+  .sequence('display-name', ['sectionPrefix'], (idx, sectionPrefix) => `Introduction ${sectionPrefix + idx}`)
+  .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
+  .sequence('legacy_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}?experience=legacy`)
+  .sequence('lms_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}`)
+  .sequence('student_view_url', ['id', 'courseId'],
+    (idx, id) => `${getApiBaseUrl}/xblock/block-v1:${id}`)
+  .attr('type', null, 'sequential')
+  .attr('activeFlags', null, true)
+  .attr('thread_counts', ['discussionCount', 'questionCount'], (discCount, questCount) => {
+    Factory.reset('thread-counts');
+    return Factory.build('thread-counts', null, { discussionCount: discCount, questionCount: questCount });
+  })
+  .attr('children', ['id', 'display-name', 'courseId'], (id, name, courseId) => {
+    Factory.reset('topic');
+    return Factory.buildList('topic', 2, null, {
+      topicPrefix: `${id}`,
+      enabledInContext: true,
+      topicNamePrefix: `${name}`,
+      usageKey: `${courseId.replace('course-v1:', 'block-v1:')} +type@vertical+block@vertical_`,
+      discussionCount: 1,
+      questionCount: 1,
+    });
+  });
+
+Factory.define('section')
+  .sequence('block_id', (idx) => `${idx}`)
+  .option('topicPrefix', null, '')
+  .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}-topic-${idx}-v3`)
+  .attr('courseware', null, true)
+  .sequence('display-name', (idx) => `Introduction ${idx}`)
+  .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
+  .sequence('legacy_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}?experience=legacy`)
+  .sequence('lms_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`)
+  .sequence('student_view_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/xblock/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`)
+  .attr('type', null, 'chapter')
+  .attr('children', ['id', 'display-name'], (id, name) => {
+    Factory.reset('sub-section');
+    return Factory.buildList('sub-section', 2, null, {
+      sectionPrefix: `${name}-`,
+      topicPrefix: 'section',
+      id,
+      discussionCount: 1,
+      questionCount: 1,
+    });
+  });
+
+Factory.define('thread-counts')
+  .sequence('discussion', ['discussionCount'], (idx, discussionCount) => discussionCount)
+  .sequence('question', ['questionCount'], (idx, questionCount) => questionCount);
+
+Factory.define('archived-topics')
+  .attr('id', null, 'archived')
+  .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
+  .attr('children', ['id', 'courseId'], (id, courseId) => {
+    Factory.reset('topic');
+    return Factory.buildList('topic', 2, null, {
+      topicPrefix: `${id}`,
+      enabledInContext: false,
+      topicNamePrefix: `${id}`,
+      usageKey: `${courseId.replace('course-v1:', 'block-v1:')} +type@vertical+block@`,
+      discussionCount: 1,
+      questionCount: 1,
+    });
+  });
--- a/src/discussions/in-context-topics/data/factories/index.js
+++ b/src/discussions/in-context-topics/data/factories/index.js
@@ -0,0 +1 @@
+import './inContextTopics.factory';
--- a/src/discussions/in-context-topics/data/api.js
+++ b/src/discussions/in-context-topics/data/api.js
@@ -0,0 +1,13 @@
+/* eslint-disable import/prefer-default-export */
+import { camelCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { getApiBaseUrl } from '../../../data/constants';
+
+export const getCourseTopicsApiUrl = () => `${getApiBaseUrl()}/api/discussion/v3/course_topics/`;
+
+export async function getCourseTopicsV3(courseId) {
+  const url = `${getApiBaseUrl()}/api/discussion/v3/course_topics/${courseId}`;
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return camelCaseObject(data);
+}
--- a/src/discussions/in-context-topics/data/api.test.js
+++ b/src/discussions/in-context-topics/data/api.test.js
@@ -0,0 +1,72 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import { initializeStore } from '../../../store';
+import { executeThunk } from '../../../test-utils';
+import { getCourseTopicsApiUrl, getCourseTopicsV3 } from './api';
+import { fetchCourseTopicsV3 } from './thunks';
+
+import './__factories__';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const courseId2 = 'course-v1:edX+TestX+Test_Course2';
+const courseTopicsApiUrl = getCourseTopicsApiUrl();
+
+let axiosMock = null;
+let store;
+
+describe('In context topic api tests', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  test('successfully get topics', async () => {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      }).concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+
+    const response = await getCourseTopicsV3(courseId);
+
+    expect(response).not.toBeUndefined();
+  });
+
+  it('failed to fetch topics', async () => {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId2}`)
+      .reply(404);
+    await executeThunk(fetchCourseTopicsV3(courseId2), store.dispatch, store.getState);
+
+    expect(store.getState().inContextTopics.status).toEqual('failed');
+  });
+
+  it('denied to fetch topics', async () => {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId}`)
+      .reply(403, {});
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch);
+
+    expect(store.getState().inContextTopics.status).toEqual('denied');
+  });
+});
--- a/src/discussions/in-context-topics/data/index.js
+++ b/src/discussions/in-context-topics/data/index.js
--- a/src/discussions/in-context-topics/data/redux.test.js
+++ b/src/discussions/in-context-topics/data/redux.test.js
@@ -0,0 +1,186 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import { initializeStore } from '../../../store';
+import { executeThunk } from '../../../test-utils';
+import { getCourseTopicsApiUrl } from './api';
+import { fetchCourseTopicsV3 } from './thunks';
+
+import './__factories__';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const courseTopicsApiUrl = getCourseTopicsApiUrl();
+
+let axiosMock;
+let store;
+
+describe('Redux in context topics tests', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  async function setupMockData() {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      }).concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+    const state = store.getState();
+    return state;
+  }
+
+  test('successfully load initial states in redux', async () => {
+    executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+    const state = store.getState();
+
+    expect(state.inContextTopics.status).toEqual('in-progress');
+    expect(state.inContextTopics.topics).toHaveLength(0);
+    expect(state.inContextTopics.coursewareTopics).toHaveLength(0);
+    expect(state.inContextTopics.nonCoursewareTopics).toHaveLength(0);
+    expect(state.inContextTopics.nonCoursewareIds).toHaveLength(0);
+    expect(state.inContextTopics.units).toHaveLength(0);
+    expect(state.inContextTopics.archivedTopics).toHaveLength(0);
+    expect(state.inContextTopics.filter).toEqual('');
+  });
+
+  test('successfully store all api data of courseware and noncourseware in redux', async () => {
+    setupMockData().then((state) => {
+      const { coursewareTopics, nonCoursewareTopics } = state.inContextTopics;
+
+      expect(coursewareTopics).toHaveLength(2);
+      expect(nonCoursewareTopics).toHaveLength(1);
+    });
+  });
+
+  test('successfully store the combined list of courseware and noncourseware topics in topics', async () => {
+    setupMockData().then((state) => {
+      const {
+        coursewareTopics, nonCoursewareTopics, archivedTopics, topics,
+      } = state.inContextTopics;
+
+      expect(topics).toHaveLength(coursewareTopics.length + nonCoursewareTopics.length + archivedTopics.length);
+    });
+  });
+
+  test('successfully get the posts ', async () => {
+    setupMockData().then((state) => {
+      expect(state?.inContextTopics?.status).toEqual('successful');
+    });
+  });
+
+  test('successfully checked that the coursewaretopic has three levels', async () => {
+    setupMockData().then((state) => {
+      const { coursewareTopics } = state.inContextTopics;
+
+      // contain chapter at first level
+      coursewareTopics.forEach((chapter, index) => {
+        expect(chapter.courseware).toEqual(true);
+        expect(chapter.id).toEqual(`courseware-topic-${index + 1}-v3`);
+        expect(chapter.type).toEqual('chapter');
+        expect(chapter).toHaveProperty('blockId');
+        expect(chapter).toHaveProperty('lmsWebUrl');
+        expect(chapter).toHaveProperty('legacyWebUrl');
+        expect(chapter).toHaveProperty('studentViewUrl');
+
+        // contain section at second level
+        chapter.children.forEach((section, secIndex) => {
+          expect(section.id).toEqual(`section-topic-${secIndex + 1}`);
+          expect(section.type).toEqual('sequential');
+          expect(section).toHaveProperty('blockId');
+          expect(section).toHaveProperty('lmsWebUrl');
+          expect(section).toHaveProperty('legacyWebUrl');
+          expect(section).toHaveProperty('studentViewUrl');
+
+          // contain sub section at third level
+          section.children.forEach((subSection, subSecIndex) => {
+            expect(subSection.enabledInContext).toEqual(true);
+            expect(subSection.id).toEqual(`courseware-topic-${index + 1}-v3-${subSecIndex + 1}`);
+            expect(subSection).toHaveProperty('usageKey');
+            expect(subSection).not.toHaveProperty('blockId');
+            expect(subSection?.threadCounts?.discussion).toEqual(1);
+            expect(subSection?.threadCounts?.question).toEqual(1);
+          });
+        });
+      });
+    });
+  });
+
+  test('successfully checked that the noncoursewaretopic have proper attributes', async () => {
+    setupMockData().then((state) => {
+      const { nonCoursewareTopics } = state.inContextTopics;
+
+      nonCoursewareTopics.forEach((topic, index) => {
+        expect(topic.usageKey).toEqual('');
+        expect(topic.id).toEqual(`noncourseware-topic-${index + 1}`);
+        expect(topic.name).toEqual(`general-topic-${index + 1}`);
+        expect(topic.enabledInContext).toEqual(true);
+        expect(topic?.threadCounts?.discussion).toEqual(1);
+        expect(topic?.threadCounts?.question).toEqual(1);
+        expect(topic).not.toHaveProperty('blockId');
+      });
+    });
+  });
+
+  test('nonCoursewareIds successfully contains ids of noncourseware topics', async () => {
+    setupMockData().then((state) => {
+      const { nonCoursewareIds, nonCoursewareTopics } = state.inContextTopics;
+
+      nonCoursewareIds.forEach((nonCoursewareId, index) => {
+        expect(nonCoursewareTopics[index].id).toEqual(nonCoursewareId);
+      });
+    });
+  });
+
+  test('selectUnits successfully contains all sub sections', async () => {
+    setupMockData().then((state) => {
+      const subSections = state.inContextTopics.coursewareTopics?.map(x => x.children)
+        ?.flat()?.map(x => x.children)?.flat();
+      const { units } = state.inContextTopics;
+
+      units.forEach(unit => {
+        const subSection = subSections.find(x => x.id === unit.id);
+        expect(subSection?.id).toEqual(unit.id);
+      });
+    });
+  });
+
+  test('successfully stored archived data in redux', async () => {
+    setupMockData().then((state) => {
+      const { archivedTopics } = state.inContextTopics;
+
+      archivedTopics.forEach((archivedTopic, index) => {
+        expect(archivedTopic?.enabledInContext).toEqual(false);
+        expect(archivedTopic?.id).toEqual(`archived-${index + 1}`);
+        expect(archivedTopic?.usageKey).not.toBeNull();
+        expect(archivedTopic?.threadCounts?.discussion).toEqual(1);
+        expect(archivedTopic?.threadCounts?.question).toEqual(1);
+      });
+    });
+  });
+});
--- a/src/discussions/in-context-topics/data/selector.test.jsx
+++ b/src/discussions/in-context-topics/data/selector.test.jsx
@@ -0,0 +1,147 @@
+import MockAdapter from 'axios-mock-adapter';
+import { Factory } from 'rosie';
+
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import { initializeStore } from '../../../store';
+import { executeThunk } from '../../../test-utils';
+import { getCourseTopicsApiUrl } from './api';
+import {
+  selectArchivedTopics,
+  selectCoursewareTopics,
+  selectLoadingStatus,
+  selectNonCoursewareIds,
+  selectNonCoursewareTopics,
+  selectTopics,
+  selectUnits,
+} from './selectors';
+import { fetchCourseTopicsV3 } from './thunks';
+
+import './__factories__';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const courseTopicsApiUrl = getCourseTopicsApiUrl();
+
+let axiosMock;
+let store;
+
+describe('In Context Topics Selector test cases', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    Factory.resetAll();
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  async function setupMockData() {
+    axiosMock.onGet(`${courseTopicsApiUrl}${courseId}`)
+      .reply(200, (Factory.buildList('topic', 1, null, {
+        topicPrefix: 'noncourseware-topic',
+        enabledInContext: true,
+        topicNamePrefix: 'general-topic',
+        usageKey: '',
+        courseware: false,
+        discussionCount: 1,
+        questionCount: 1,
+      }).concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
+        .concat(Factory.buildList('archived-topics', 2, null)));
+    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
+
+    const state = store.getState();
+    return state;
+  }
+
+  test('should return topics list', async () => {
+    setupMockData().then((state) => {
+      const topics = selectTopics(state);
+
+      expect(topics).not.toBeUndefined();
+      topics.forEach(data => {
+        const topicFunc = jest.fn((topic) => {
+          if (topic.id.includes('noncourseware-topic')) { return true; }
+          if (topic.id.includes('courseware-topic')) { return true; }
+          if (topic.id.includes('archived')) { return true; }
+          return false;
+        });
+        topicFunc(data);
+        expect(topicFunc).toHaveReturnedWith(true);
+      });
+    });
+  });
+
+  test('should return courseware topics list', async () => {
+    setupMockData().then((state) => {
+      const coursewareTopics = selectCoursewareTopics(state);
+
+      expect(coursewareTopics).not.toBeUndefined();
+      coursewareTopics.forEach((topic, index) => {
+        expect(topic?.id).toEqual(`courseware-topic-${index + 1}-v3`);
+      });
+    });
+  });
+
+  test('should return noncourseware topics list', async () => {
+    setupMockData().then((state) => {
+      const nonCoursewareTopics = selectNonCoursewareTopics(state);
+
+      expect(nonCoursewareTopics).not.toBeUndefined();
+      nonCoursewareTopics.forEach((topic, index) => {
+        expect(topic?.id).toEqual(`noncourseware-topic-${index + 1}`);
+      });
+    });
+  });
+
+  test('should return noncourseware ids list', async () => {
+    setupMockData().then((state) => {
+      const nonCoursewareIds = selectNonCoursewareIds(state);
+
+      expect(nonCoursewareIds).not.toBeUndefined();
+      nonCoursewareIds.forEach((id, index) => {
+        expect(id).toEqual(`noncourseware-topic-${index + 1}`);
+      });
+    });
+  });
+
+  test('should return units list', async () => {
+    setupMockData().then((state) => {
+      const units = selectUnits(state);
+
+      expect(units).not.toBeUndefined();
+      units.forEach(unit => {
+        expect(unit?.usageKey).not.toBeNull();
+      });
+    });
+  });
+
+  test('should return archived topics list', async () => {
+    setupMockData().then((state) => {
+      const archivedTopics = selectArchivedTopics(state);
+
+      expect(archivedTopics).not.toBeUndefined();
+      archivedTopics.forEach((topic, index) => {
+        expect(topic.id).toEqual(`archived-${index + 1}`);
+      });
+    });
+  });
+
+  test('should return loading status successful', async () => {
+    setupMockData().then((state) => {
+      const status = selectLoadingStatus(state);
+
+      expect(status).toEqual('successful');
+    });
+  });
+});
--- a/src/discussions/in-context-topics/data/selectors.js
+++ b/src/discussions/in-context-topics/data/selectors.js
@@ -0,0 +1,67 @@
+/* eslint-disable import/prefer-default-export */
+
+import { createSelector } from '@reduxjs/toolkit';
+
+export const selectTopicFilter = state => state.inContextTopics.filter.trim().toLowerCase();
+
+export const selectTopics = state => state.inContextTopics.topics;
+
+export const selectCoursewareTopics = state => state.inContextTopics.coursewareTopics;
+
+export const selectNonCoursewareTopics = state => state.inContextTopics.nonCoursewareTopics;
+
+export const selectNonCoursewareIds = state => state.inContextTopics.nonCoursewareIds;
+
+export const selectUnits = state => state.inContextTopics.units;
+
+export const selectSubsectionUnits = subsectionId => state => state.inContextTopics.units?.filter(
+  unit => unit.parentId === subsectionId,
+);
+
+export const selectSubsection = category => createSelector(
+  selectCoursewareTopics,
+  (coursewareTopics) => (
+    coursewareTopics?.map((topic) => topic?.children)?.flat()?.find((topic) => topic.id === category)
+  ),
+);
+
+export const selectArchivedTopics = state => state.inContextTopics.archivedTopics;
+
+export const selectArchivedTopic = topic => createSelector(
+  selectArchivedTopics,
+  (archivedTopics) => (
+    archivedTopics?.find((archivedTopic) => archivedTopic.id === topic)
+  ),
+);
+
+export const selectLoadingStatus = state => state.inContextTopics.status;
+
+export const selectFilteredTopics = createSelector(
+  selectUnits,
+  selectNonCoursewareTopics,
+  selectTopicFilter,
+  (units, nonCoursewareTopics, filter) => (
+    (units && nonCoursewareTopics && filter) && [...units, ...nonCoursewareTopics]?.filter(
+      topic => topic.name.toLowerCase().includes(filter),
+    )
+  ),
+);
+
+export const selectTotalTopicsThreadsCount = createSelector(
+  selectUnits,
+  selectNonCoursewareTopics,
+  (units, nonCoursewareTopics) => (
+    (units && nonCoursewareTopics) && [...units, ...nonCoursewareTopics]?.reduce((total, topic) => (
+      total + topic.threadCounts.discussion + topic.threadCounts.question
+    ), 0)
+  ),
+);
+
+export const selectCourseWareThreadsCount = category => createSelector(
+  selectSubsectionUnits(category),
+  (units) => (
+    units?.reduce((total, unit) => (
+      total + unit.threadCounts.discussion + unit.threadCounts.question
+    ), 0)
+  ),
+);
--- a/src/discussions/in-context-topics/data/slices.js
+++ b/src/discussions/in-context-topics/data/slices.js
@@ -0,0 +1,52 @@
+/* eslint-disable no-param-reassign,import/prefer-default-export */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../../data/constants';
+
+const topicsSlice = createSlice({
+  name: 'inContextTopics',
+  initialState: {
+    status: RequestStatus.IDLE,
+    topics: [],
+    coursewareTopics: [],
+    nonCoursewareTopics: [],
+    nonCoursewareIds: [],
+    units: [],
+    archivedTopics: [],
+    filter: '',
+  },
+  reducers: {
+    fetchCourseTopicsRequest: (state) => {
+      state.status = RequestStatus.IN_PROGRESS;
+    },
+    fetchCourseTopicsSuccess: (state, { payload }) => {
+      state.status = RequestStatus.SUCCESSFUL;
+      state.topics = payload.topics;
+      state.coursewareTopics = payload.coursewareTopics;
+      state.nonCoursewareTopics = payload.nonCoursewareTopics;
+      state.nonCoursewareIds = payload.nonCoursewareIds;
+      state.units = payload.units;
+      state.archivedTopics = payload.archivedTopics;
+    },
+    fetchCourseTopicsFailed: (state) => {
+      state.status = RequestStatus.FAILED;
+    },
+    fetchCourseTopicsDenied: (state) => {
+      state.status = RequestStatus.DENIED;
+    },
+    setFilter: (state, { payload }) => {
+      state.filter = payload;
+    },
+  },
+});
+
+export const {
+  fetchCourseTopicsRequest,
+  fetchCourseTopicsSuccess,
+  fetchCourseTopicsFailed,
+  fetchCourseTopicsDenied,
+  setFilter,
+  setSortBy,
+} = topicsSlice.actions;
+
+export const inContextTopicsReducer = topicsSlice.reducer;
--- a/src/discussions/in-context-topics/data/thunks.js
+++ b/src/discussions/in-context-topics/data/thunks.js
@@ -0,0 +1,71 @@
+/* eslint-disable import/prefer-default-export */
+import { reduce } from 'lodash';
+
+import { logError } from '@edx/frontend-platform/logging';
+
+import { getHttpErrorStatus } from '../../utils';
+import { getCourseTopicsV3 } from './api';
+import {
+  fetchCourseTopicsDenied, fetchCourseTopicsFailed, fetchCourseTopicsRequest, fetchCourseTopicsSuccess,
+} from './slices';
+
+function normalizeTopicsV3(topics) {
+  const coursewareUnits = reduce(topics, (arrayOfUnits, chapter) => {
+    if (chapter?.children) {
+      return [
+        ...arrayOfUnits,
+        ...reduce(chapter.children, (units, sequential) => {
+          if (sequential?.children) {
+            return [
+              ...units,
+              ...sequential.children.map((unit) => ({
+                ...unit,
+                parentId: sequential.id,
+                parentTitle: sequential.displayName,
+              })),
+            ];
+          }
+          return units;
+        }, []),
+      ];
+    }
+    return arrayOfUnits;
+  }, []);
+
+  const archivedTopics = reduce(topics, (arrayOfArchivedTopics, topic) => {
+    if (topic.id === 'archived') {
+      return topic.children;
+    }
+    return arrayOfArchivedTopics;
+  }, []);
+
+  const coursewareTopics = topics.filter((topic) => topic.courseware);
+  const nonCoursewareTopics = topics.filter((topic) => !topic.courseware && topic.enabledInContext);
+  const nonCoursewareIds = nonCoursewareTopics?.map((topic) => topic.id);
+
+  return {
+    topics,
+    units: coursewareUnits,
+    coursewareTopics,
+    nonCoursewareTopics,
+    nonCoursewareIds,
+    archivedTopics,
+  };
+}
+
+export function fetchCourseTopicsV3(courseId) {
+  return async (dispatch) => {
+    try {
+      dispatch(fetchCourseTopicsRequest({ courseId }));
+      const data = await getCourseTopicsV3(courseId);
+      dispatch(fetchCourseTopicsSuccess(normalizeTopicsV3(data)));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(fetchCourseTopicsDenied());
+      } else {
+        dispatch(fetchCourseTopicsFailed());
+      }
+      logError(error);
+    }
+  };
+}
--- a/src/discussions/in-context-topics/index.js
+++ b/src/discussions/in-context-topics/index.js
@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+export { default as TopicPostsView } from './TopicPostsView';
+export { default as TopicsView } from './TopicsView';
--- a/src/discussions/in-context-topics/messages.js
+++ b/src/discussions/in-context-topics/messages.js
@@ -0,0 +1,79 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  backAlt: {
+    id: 'discussions.topics.backAlt',
+    defaultMessage: 'Back to topics list',
+    description: 'Display back button text used to navigate back to topics list',
+  },
+  discussions: {
+    id: 'discussions.topics.discussions',
+    defaultMessage: `{count, plural,
+      =0 {Discussion}
+      one {# Discussion}
+      other {# Discussions}
+    }`,
+    description: 'Display tooltip text used to indicate how many posts type are discussion',
+  },
+  questions: {
+    id: 'discussions.topics.questions',
+    defaultMessage: `{count, plural,
+      =0 {Question}
+      one {# Question}
+      other {# Questions}
+    }`,
+    description: 'Display tooltip text used to indicate how many posts type are questions',
+  },
+  reported: {
+    id: 'discussions.topics.reported',
+    defaultMessage: '{reported} reported',
+    description: 'Display tooltip text used to indicate how many posts are reported',
+  },
+  previouslyReported: {
+    id: 'discussions.topics.previouslyReported',
+    defaultMessage: '{previouslyReported} previously reported',
+    description: 'Display tooltip text used to indicate how many posts are previously reported',
+  },
+  searchTopics: {
+    id: 'discussions.topics.find.label',
+    defaultMessage: 'Search topics',
+    description: 'Placeholder text in search bar',
+  },
+  unnamedSection: {
+    id: 'discussions.topics.unnamed.section.label',
+    defaultMessage: 'Unnamed Section',
+    description: 'Text to display in place of section name if section name is empty',
+  },
+  unnamedSubsection: {
+    id: 'discussions.topics.unnamed.subsection.label',
+    defaultMessage: 'Unnamed Subsection',
+    description: 'Text to display in place of subsection name if subsection name is empty',
+  },
+  unnamedTopic: {
+    id: 'discussions.subtopics.unnamed.topic.label',
+    defaultMessage: 'Unnamed Topic',
+    description: 'Text to display in place of topic name if topic name is empty',
+  },
+  noTopicExists: {
+    id: 'discussions.topics.title',
+    defaultMessage: 'No topic exists',
+    description: 'Text to display in place of topic list if topic does not exist',
+  },
+  createTopic: {
+    id: 'discussions.topics.createTopic',
+    defaultMessage: 'Please contact you admin to create a topic',
+    description: 'Helping Text to display in place of topic list if topic does not exist',
+  },
+  nothingHere: {
+    id: 'discussions.topics.nothing',
+    defaultMessage: 'Nothing here yet',
+    description: 'Helping Text to display if nothing here yet',
+  },
+  archivedTopics: {
+    id: 'discussions.topics.archived.label',
+    defaultMessage: 'Archived',
+    description: 'Heading for displaying topics that are archived.',
+  },
+});
+
+export default messages;
--- a/src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx
+++ b/src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx
@@ -0,0 +1,64 @@
+import React, { useContext, useEffect } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, SearchField } from '@edx/paragon';
+import { Search as SearchIcon } from '@edx/paragon/icons';
+
+import { DiscussionContext } from '../../common/context';
+import postsMessages from '../../posts/post-actions-bar/messages';
+import { setFilter as setTopicFilter } from '../data/slices';
+
+function TopicSearchBar({ intl }) {
+  const dispatch = useDispatch();
+  const { page } = useContext(DiscussionContext);
+  const topicSearch = useSelector(({ inContextTopics }) => inContextTopics.filter);
+  let searchValue = '';
+
+  const onClear = () => {
+    dispatch(setTopicFilter(''));
+  };
+
+  const onChange = (query) => {
+    searchValue = query;
+  };
+
+  const onSubmit = (query) => {
+    if (query === '') {
+      return;
+    }
+    dispatch(setTopicFilter(query));
+  };
+
+  useEffect(() => onClear(), [page]);
+
+  return (
+    <>
+      <SearchField.Advanced
+        onClear={onClear}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        value={topicSearch}
+      >
+        <SearchField.Label />
+        <SearchField.Input
+          style={{ paddingRight: '1rem' }}
+          placeholder={intl.formatMessage(postsMessages.search, { page: 'topics' })}
+        />
+        <span className="mt-auto mb-auto mr-2.5 pointer-cursor-hover">
+          <Icon
+            src={SearchIcon}
+            onClick={() => onSubmit(searchValue)}
+          />
+        </span>
+      </SearchField.Advanced>
+    </>
+  );
+}
+
+TopicSearchBar.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TopicSearchBar);
--- a/src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx
+++ b/src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { useDispatch } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { SearchField } from '@edx/paragon';
+
+import { setFilter } from '../data';
+import messages from '../messages';
+
+function TopicSearchResultBar({ intl }) {
+  const dispatch = useDispatch();
+
+  return (
+    <div className="d-flex flex-row p-1 align-items-center">
+      <SearchField
+        className="flex-fill m-1 border-0"
+        placeholder={intl.formatMessage(messages.searchTopics)}
+        onSubmit={(query) => dispatch(setFilter(query))}
+        onChange={(query) => dispatch(setFilter(query))}
+      />
+    </div>
+  );
+}
+
+TopicSearchResultBar.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TopicSearchResultBar);
--- a/src/discussions/in-context-topics/topic-search/index.js
+++ b/src/discussions/in-context-topics/topic-search/index.js
@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+export { default as TopicSearchBar } from './TopicSearchBar';
+export { default as TopicSearchResultBar } from './TopicSearchResultBar';
--- a/src/discussions/in-context-topics/topic/ArchivedBaseGroup.jsx
+++ b/src/discussions/in-context-topics/topic/ArchivedBaseGroup.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+import Topic, { topicShape } from './Topic';
+
+function ArchivedBaseGroup({
+  archivedTopics,
+  showDivider,
+  intl,
+}) {
+  return (
+    <>
+      {showDivider && (
+        <>
+          <div className="divider border-top border-light-500" />
+          <div className="divider pt-1 bg-light-300" />
+        </>
+      )}
+      <div
+        className="discussion-topic-group d-flex flex-column text-primary-500"
+        data-testid="archived-group"
+      >
+        <div className="pt-3 px-4 font-weight-bold">{intl.formatMessage(messages.archivedTopics)}</div>
+        {archivedTopics?.map((topic, index) => (
+          <Topic
+            key={topic.id}
+            topic={topic}
+            showDivider={(archivedTopics.length - 1) !== index}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
+
+ArchivedBaseGroup.propTypes = {
+  archivedTopics: PropTypes.arrayOf(topicShape).isRequired,
+  showDivider: PropTypes.bool,
+  intl: intlShape.isRequired,
+};
+
+ArchivedBaseGroup.defaultProps = {
+  showDivider: false,
+};
+export default injectIntl(ArchivedBaseGroup);
--- a/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx
+++ b/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import TopicStats from '../../../components/TopicStats';
+import { Routes } from '../../../data/constants';
+import { discussionsPath } from '../../utils';
+import messages from '../messages';
+import { topicShape } from './Topic';
+
+function SectionBaseGroup({
+  section,
+  sectionTitle,
+  sectionId,
+  showDivider,
+  intl,
+}) {
+  const { courseId } = useParams();
+  const isSelected = (id) => window.location.pathname.includes(id);
+  const sectionUrl = (id) => discussionsPath(Routes.TOPICS.CATEGORY, {
+    courseId,
+    category: id,
+  });
+
+  return (
+    <div
+      className="discussion-topic-group d-flex flex-column text-primary-500"
+      data-section-id={sectionId}
+      data-testid="section-group"
+    >
+      <div className="pt-3 px-4 font-weight-bold">
+        {sectionTitle || intl.formatMessage(messages.unnamedSection)}
+      </div>
+      {section.map((subsection, index) => (
+        <Link
+          className={classNames('subsection p-0 text-decoration-none text-primary-500', {
+            'border-bottom border-light-400': (section.length - 1 !== index),
+          })}
+          key={subsection.id}
+          role="option"
+          data-subsection-id={subsection.id}
+          data-testid="subsection-group"
+          to={sectionUrl(subsection.id)}
+          onClick={() => isSelected(subsection.id)}
+          aria-current={isSelected(section.id) ? 'page' : undefined}
+          tabIndex={(isSelected(subsection.id) || index === 0) ? 0 : -1}
+        >
+          <div className="d-flex flex-row pt-2.5 pb-2 px-4">
+            <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
+              <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
+                <div className="topic-name text-truncate">
+                  {subsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
+                </div>
+                <TopicStats threadCounts={subsection?.threadCounts} />
+              </div>
+            </div>
+          </div>
+        </Link>
+      ))}
+      {showDivider && (
+        <>
+          <div className="divider border-top border-light-500" />
+          <div className="divider pt-1 bg-light-300" />
+        </>
+      )}
+    </div>
+  );
+}
+
+SectionBaseGroup.propTypes = {
+  section: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    blockId: PropTypes.string,
+    lmsWebUrl: PropTypes.string,
+    legacyWebUrl: PropTypes.string,
+    studentViewUrl: PropTypes.string,
+    type: PropTypes.string,
+    displayName: PropTypes.string,
+    children: PropTypes.arrayOf(topicShape),
+  })).isRequired,
+  sectionTitle: PropTypes.string.isRequired,
+  sectionId: PropTypes.string.isRequired,
+  showDivider: PropTypes.bool.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SectionBaseGroup);
--- a/src/discussions/in-context-topics/topic/Topic.jsx
+++ b/src/discussions/in-context-topics/topic/Topic.jsx
@@ -0,0 +1,102 @@
+/* eslint-disable no-unused-vars, react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
+import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
+
+import TopicStats from '../../../components/TopicStats';
+import { Routes } from '../../../data/constants';
+import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
+import { discussionsPath } from '../../utils';
+import messages from '../messages';
+
+function Topic({
+  topic,
+  showDivider,
+  index,
+  intl,
+}) {
+  const { courseId } = useParams();
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+  const userIsGroupTa = useSelector(selectUserIsGroupTa);
+  const { inactiveFlags, activeFlags } = topic;
+  const canSeeReportedStats = (activeFlags || inactiveFlags) && (userHasModerationPrivileges || userIsGroupTa);
+  const isSelected = (id) => window.location.pathname.includes(id);
+  const topicUrl = discussionsPath(Routes.TOPICS.TOPIC, {
+    courseId,
+    topicId: topic.id,
+  });
+
+  return (
+    <>
+      <Link
+        className={classNames('discussion-topic p-0 text-decoration-none text-primary-500', {
+          'border-light-400 border-bottom': showDivider,
+        })}
+        data-topic-id={topic.id}
+        to={topicUrl}
+        onClick={() => isSelected(topic.id)}
+        aria-current={isSelected(topic.id) ? 'page' : undefined}
+        role="option"
+        tabIndex={(isSelected(topic.id) || index === 0) ? 0 : -1}
+      >
+        <div className="d-flex flex-row pt-2.5 pb-2 px-4">
+          <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
+            <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
+              <div className="topic-name text-truncate">
+                {topic?.name || topic?.displayName || intl.formatMessage(messages.unnamedTopicSubCategories)}
+              </div>
+            </div>
+            <TopicStats
+              threadCounts={topic?.threadCounts}
+              activeFlags={topic?.activeFlags}
+              inactiveFlags={topic?.inactiveFlags}
+            />
+          </div>
+        </div>
+      </Link>
+      {!showDivider && (
+        <>
+          <div className="divider border-top border-light-500" />
+          <div className="divider pt-1 bg-light-300" />
+        </>
+      )}
+    </>
+  );
+}
+
+export const topicShape = PropTypes.shape({
+  id: PropTypes.string,
+  usage_key: PropTypes.string,
+  name: PropTypes.string,
+  thread_counts: PropTypes.shape({
+    discussions: PropTypes.number,
+    questions: PropTypes.number,
+  }),
+  enabled_in_context: PropTypes.bool,
+  flags: PropTypes.number,
+});
+
+Topic.propTypes = {
+  intl: intlShape.isRequired,
+  topic: topicShape,
+  showDivider: PropTypes.bool,
+  index: PropTypes.number,
+};
+
+Topic.defaultProps = {
+  showDivider: true,
+  index: -1,
+  topic: {
+    usage_key: '',
+  },
+};
+
+export default injectIntl(Topic);
--- a/src/discussions/in-context-topics/topic/index.js
+++ b/src/discussions/in-context-topics/topic/index.js
@@ -0,0 +1,4 @@
+/* eslint-disable import/prefer-default-export */
+export { default as ArchivedBaseGroup } from './ArchivedBaseGroup';
+export { default as SectionBaseGroup } from './SectionBaseGroup';
+export { default as Topic } from './Topic';
--- a/src/discussions/index.js
+++ b/src/discussions/index.js
@@ -1,4 +1,4 @@
-export * from './comments';
 export * from './discussions-home';
+export * from './post-comments';
 export * from './posts';
 export * from './topics';
--- a/src/discussions/learners/LearnerPostsView.jsx
+++ b/src/discussions/learners/LearnerPostsView.jsx
@@ -12,17 +12,23 @@ import {
 } from '@edx/paragon';
 import { ArrowBack } from '@edx/paragon/icons';

-import { RequestStatus, Routes } from '../../data/constants';
+import {
+  RequestStatus,
+  Routes,
+} from '../../data/constants';
 import { DiscussionContext } from '../common/context';
+import { selectUserHasModerationPrivileges, selectUserIsStaff } from '../data/selectors';
 import {
  selectAllThreads,
  selectThreadNextPage,
  threadsLoadingStatus,
 } from '../posts/data/selectors';
+import { clearPostsPages } from '../posts/data/slices';
 import NoResults from '../posts/NoResults';
 import { PostLink } from '../posts/post';
 import { discussionsPath, filterPosts } from '../utils';
 import { fetchUserPosts } from './data/thunks';
+import LearnerPostFilterBar from './learner-post-filter-bar/LearnerPostFilterBar';
 import messages from './messages';

 function LearnerPostsView({ intl }) {
@@ -32,18 +38,28 @@ function LearnerPostsView({ intl }) {

  const posts = useSelector(selectAllThreads);
  const loadingStatus = useSelector(threadsLoadingStatus());
+  const postFilter = useSelector(state => state.learners.postFilter);
  const { courseId, learnerUsername: username } = useContext(DiscussionContext);
  const nextPage = useSelector(selectThreadNextPage());
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+  const userIsStaff = useSelector(selectUserIsStaff);
+
+  const loadMorePosts = (pageNum = undefined) => {
+    const params = {
+      author: username,
+      page: pageNum,
+      filters: postFilter,
+      orderBy: postFilter.orderBy,
+      countFlagged: (userHasModerationPrivileges || userIsStaff) || undefined,
+    };
+
+    dispatch(fetchUserPosts(courseId, params));
+  };

  useEffect(() => {
-    dispatch(fetchUserPosts(courseId, username));
-  }, [courseId, username]);
-
-  const loadMorePosts = () => (
-    dispatch(fetchUserPosts(courseId, username, {
-      page: nextPage,
-    }))
-  );
+    dispatch(clearPostsPages());
+    loadMorePosts();
+  }, [courseId, postFilter, username]);

  const checkIsSelected = (id) => window.location.pathname.includes(id);
  const pinnedPosts = useMemo(() => filterPosts(posts, 'pinned'), [posts]);
@@ -72,12 +88,14 @@ function LearnerPostsView({ intl }) {
          onClick={() => history.push(discussionsPath(Routes.LEARNERS.PATH, { courseId })(location))}
          alt={intl.formatMessage(messages.back)}
        />
-        <div className="text-primary-500 font-style-normal font-family-inter font-weight-bold py-2.5">
+        <div className="text-primary-500 font-style font-weight-bold py-2.5">
          {intl.formatMessage(messages.activityForLearner, { username: capitalize(username) })}
        </div>
        <div style={{ padding: '18px' }} />
      </div>
      <div className="bg-light-400 border border-light-300" />
+      <LearnerPostFilterBar />
+      <div className="border-bottom border-light-400" />
      <div className="list-group list-group-flush">
        {postInstances(pinnedPosts)}
        {postInstances(unpinnedPosts)}
@@ -88,7 +106,7 @@ function LearnerPostsView({ intl }) {
          </div>
        ) : (
          nextPage && loadingStatus === RequestStatus.SUCCESSFUL && (
-            <Button onClick={() => loadMorePosts()} variant="primary" size="md">
+            <Button onClick={() => loadMorePosts(nextPage)} variant="primary" size="md">
              {intl.formatMessage(messages.loadMore)}
            </Button>
          )
--- a/src/discussions/learners/LearnerPostsView.test.jsx
+++ b/src/discussions/learners/LearnerPostsView.test.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { act } from 'react-dom/test-utils';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter, Route } from 'react-router';
+import { Factory } from 'rosie';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import { DiscussionContext } from '../common/context';
+import { getCourseConfigApiUrl } from '../data/api';
+import { fetchCourseConfig } from '../data/thunks';
+import { getCoursesApiUrl } from './data/api';
+import LearnerPostsView from './LearnerPostsView';
+
+import './data/__factories__';
+
+let store;
+let axiosMock;
+const coursesApiUrl = getCoursesApiUrl();
+const courseConfigApiUrl = getCourseConfigApiUrl();
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const username = 'abc123';
+
+function renderComponent(path = `/${courseId}/learners/${username}/posts`) {
+  return render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider
+          value={{
+            learnerUsername: username,
+            courseId,
+          }}
+        >
+          <MemoryRouter initialEntries={[path]}>
+            <Route path={path}>
+              <LearnerPostsView />
+            </Route>
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+}
+
+describe('LearnerPostsView', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username,
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    Factory.resetAll();
+    const learnerPosts = Factory.build('learnerPosts', {}, {
+      abuseFlaggedCount: 1,
+    });
+    const apiUrl = `${coursesApiUrl}${courseId}/learner/`;
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(apiUrl, { username, count_flagged: true })
+      .reply(() => [200, learnerPosts]);
+  });
+
+  describe('Basic', () => {
+    test('Reported icon is visible to moderator for post with reported comment', async () => {
+      axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
+        has_moderation_privileges: true,
+      });
+      axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
+      await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+      await act(async () => {
+        renderComponent();
+      });
+      expect(screen.queryAllByTestId('reported-post')[0]).toBeInTheDocument();
+    });
+
+    test('Reported icon is not visible to learner for post with reported comment', async () => {
+      await renderComponent();
+      expect(screen.queryByTestId('reported-post')).not.toBeInTheDocument();
+    });
+  });
+});
--- a/src/discussions/learners/LearnersView.test.jsx
+++ b/src/discussions/learners/LearnersView.test.jsx
@@ -13,9 +13,9 @@ import { AppProvider } from '@edx/frontend-platform/react';

 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
-import { courseConfigApiUrl } from '../data/api';
+import { getCourseConfigApiUrl } from '../data/api';
 import { fetchCourseConfig } from '../data/thunks';
-import { coursesApiUrl, userProfileApiUrl } from './data/api';
+import { getCoursesApiUrl, getUserProfileApiUrl } from './data/api';
 import { fetchLearners } from './data/thunks';
 import LearnersView from './LearnersView';

@@ -23,6 +23,9 @@ import './data/__factories__';

 let store;
 let axiosMock;
+const coursesApiUrl = getCoursesApiUrl();
+const courseConfigApiUrl = getCourseConfigApiUrl();
+const userProfileApiUrl = getUserProfileApiUrl();
 const courseId = 'course-v1:edX+TestX+Test_Course';

 function renderComponent() {
--- a/src/discussions/learners/data/factories/learners.factory.js
+++ b/src/discussions/learners/data/factories/learners.factory.js
@@ -86,3 +86,63 @@ Factory.define('learnersProfile')
    }));
    return profiles;
  });
+
+Factory.define('learnerPosts')
+  .option('abuseFlaggedCount', null, null)
+  .option('courseId', null, 'course-v1:edX+TestX+Test_Course')
+  .attr(
+    'results',
+    ['abuseFlaggedCount', 'courseId'],
+    (abuseFlaggedCount, courseId) => {
+      const threads = [];
+      for (let i = 0; i < 2; i++) {
+        threads.push({
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+          editable_fields: [
+            'abuse_flagged',
+            'following',
+            'group_id',
+            'raw_body',
+            'closed',
+            'read',
+            'title',
+            'topic_id',
+            'type',
+            'voted',
+            'pinned',
+          ],
+          id: `post_id${i}`,
+          author: 'test_user',
+          author_label: 'Staff',
+          abuse_flagged: false,
+          can_delete: true,
+          voted: false,
+          vote_count: 1,
+          title: `Title ${i}`,
+          raw_body: `<p>body ${i}</p>`,
+          preview_body: `<p>body ${i}</p>`,
+          course_id: courseId,
+          group_id: null,
+          group_name: null,
+          abuse_flagged_count: abuseFlaggedCount,
+          following: false,
+          comment_count: 8,
+          unread_comment_count: 0,
+          endorsed_comment_list_url: null,
+          non_endorsed_comment_list_url: null,
+          read: false,
+          has_endorsed: false,
+          pinned: false,
+          topic_id: 'topic',
+        });
+      }
+      return threads;
+    },
+  )
+  .attr('pagination', [], () => ({
+    next: null,
+    prev: null,
+    count: 2,
+    num_pages: 1,
+  }));
--- a/src/discussions/learners/data/api.js
+++ b/src/discussions/learners/data/api.js
@@ -1,15 +1,15 @@
 /* eslint-disable import/prefer-default-export */
-import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import snakeCase from 'lodash/snakeCase';
+
+import { ensureConfig, getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

 ensureConfig([
  'LMS_BASE_URL',
 ], 'Posts API service');

-const apiBaseUrl = getConfig().LMS_BASE_URL;
-
-export const coursesApiUrl = `${apiBaseUrl}/api/discussion/v1/courses/`;
-export const userProfileApiUrl = `${apiBaseUrl}/api/user/v1/accounts`;
+export const getCoursesApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
+export const getUserProfileApiUrl = () => `${getConfig().LMS_BASE_URL}/api/user/v1/accounts`;

 /**
 * Fetches all the learners in the given course.
@@ -18,7 +18,7 @@ export const userProfileApiUrl = `${apiBaseUrl}/api/user/v1/accounts`;
 * @returns {Promise<{}>}
 */
 export async function getLearners(courseId, params) {
-  const url = `${coursesApiUrl}${courseId}/activity_stats/`;
+  const url = `${getCoursesApiUrl()}${courseId}/activity_stats/`;
  const { data } = await getAuthenticatedHttpClient().get(url, { params });
  return data;
 }
@@ -28,7 +28,7 @@ export async function getLearners(courseId, params) {
 * @param {string} usernames
 */
 export async function getUserProfiles(usernames) {
-  const url = `${userProfileApiUrl}?username=${usernames.join()}`;
+  const url = `${getUserProfileApiUrl()}?username=${usernames.join()}`;
  const { data } = await getAuthenticatedHttpClient().get(url);
  return data;
 }
@@ -37,18 +37,50 @@ export async function getUserProfiles(usernames) {
 * Get the posts by a specific user in a course's discussions
 *
 * @param {string} courseId Course ID of the course
- * @param {string} username Username of the user
+ * @param {string} author
 * @param {number} page
+ * @param {number} pageSize
+ * @param {string} textSearch A search string to match.
+ * @param {ThreadOrdering} orderBy The results wil be sorted on this basis.
+ * @param {boolean} following If true, only threads followed by the current user will be returned.
+ * @param {boolean} flagged If true, only threads that have been reported will be returned.
+ * @param {string} threadType Can be 'discussion' or 'question'.
+ * @param {ThreadViewStatus} view Set to "unread" on "unanswered" to filter to only those statuses.
+ * @param {boolean} countFlagged If true, abuseFlaggedCount will be available.
+ * @param {number} cohort
 * @returns API Response object in the format
 *  {
 *    results: [array of posts],
 *    pagination: {count, num_pages, next, previous}
 *  }
 */
-export async function getUserPosts(courseId, username, { page }) {
-  const learnerPostsApiUrl = `${coursesApiUrl}${courseId}/learner/`;
+export async function getUserPosts(courseId, {
+  page,
+  pageSize,
+  textSearch,
+  orderBy,
+  status,
+  author,
+  threadType,
+  countFlagged,
+  cohort,
+} = {}) {
+  const learnerPostsApiUrl = `${getCoursesApiUrl()}${courseId}/learner/`;
+
+  const params = snakeCaseObject({
+    page,
+    pageSize,
+    textSearch,
+    threadType,
+    orderBy: orderBy && snakeCase(orderBy),
+    status,
+    requestedFields: 'profile_image',
+    username: author,
+    countFlagged,
+    groupId: cohort,
+  });

  const { data } = await getAuthenticatedHttpClient()
-    .get(learnerPostsApiUrl, { params: { username, page } });
+    .get(learnerPostsApiUrl, { params });
  return data;
 }
--- a/src/discussions/learners/data/slices.js
+++ b/src/discussions/learners/data/slices.js
@@ -3,7 +3,10 @@ import { createSlice } from '@reduxjs/toolkit';

 import {
  LearnersOrdering,
+  PostsStatusFilter,
  RequestStatus,
+  ThreadOrdering,
+  ThreadType,
 } from '../../../data/constants';

 const learnersSlice = createSlice({
@@ -16,6 +19,12 @@ const learnersSlice = createSlice({
    totalPages: null,
    totalLearners: null,
    sortedBy: LearnersOrdering.BY_LAST_ACTIVITY,
+    postFilter: {
+      postType: ThreadType.ALL,
+      status: PostsStatusFilter.ALL,
+      orderBy: ThreadOrdering.BY_LAST_ACTIVITY,
+      cohort: '',
+    },
    usernameSearch: null,
  },
  reducers: {
@@ -47,6 +56,10 @@ const learnersSlice = createSlice({
      state.usernameSearch = payload;
      state.pages = [];
    },
+    setPostFilter: (state, { payload }) => {
+      state.pages = [];
+      state.postFilter = payload;
+    },
  },
 });

@@ -57,6 +70,7 @@ export const {
  fetchLearnersDenied,
  setSortedBy,
  setUsernameSearch,
+  setPostFilter,
 } = learnersSlice.actions;

 export const learnersReducer = learnersSlice.reducer;
--- a/src/discussions/learners/data/thunks.js
+++ b/src/discussions/learners/data/thunks.js
@@ -2,6 +2,9 @@
 import { camelCaseObject, snakeCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';

+import {
+  PostsStatusFilter, ThreadType,
+} from '../../../data/constants';
 import {
  fetchLearnerThreadsRequest,
  fetchThreadsDenied,
@@ -67,15 +70,48 @@ export function fetchLearners(courseId, {
 * @param page
 * @returns a promise that will update the state with the learner's posts
 */
-export function fetchUserPosts(courseId, username, { page = 1 } = {}) {
+export function fetchUserPosts(courseId, {
+  orderBy,
+  filters = {},
+  page = 1,
+  author = null,
+  countFlagged,
+} = {}) {
+  const options = {
+    orderBy,
+    page,
+    author,
+    countFlagged,
+  };
+  if (filters.status === PostsStatusFilter.UNREAD) {
+    options.status = 'unread';
+  }
+  if (filters.status === PostsStatusFilter.UNANSWERED) {
+    options.status = 'unanswered';
+  }
+  if (filters.status === PostsStatusFilter.REPORTED) {
+    options.status = 'flagged';
+  }
+  if (filters.status === PostsStatusFilter.UNRESPONDED) {
+    options.status = 'unresponded';
+  }
+  if (filters.postType !== ThreadType.ALL) {
+    options.threadType = filters.postType;
+  }
+  if (filters.search) {
+    options.textSearch = filters.search;
+  }
+  if (filters.cohort) {
+    options.cohort = filters.cohort;
+  }
  return async (dispatch) => {
    try {
-      dispatch(fetchLearnerThreadsRequest({ courseId, author: username }));
+      dispatch(fetchLearnerThreadsRequest({ courseId, author }));

-      const data = await getUserPosts(courseId, username, { page });
+      const data = await getUserPosts(courseId, options);
      const normalisedData = normaliseThreads(camelCaseObject(data));

-      dispatch(fetchThreadsSuccess({ ...normalisedData, page, author: username }));
+      dispatch(fetchThreadsSuccess({ ...normalisedData, page, author }));
    } catch (error) {
      if (getHttpErrorStatus(error) === 403) {
        dispatch(fetchThreadsDenied());
--- a/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx
+++ b/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx
@@ -0,0 +1,103 @@
+import React, { useEffect } from 'react';
+
+import { isEmpty } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import FilterBar from '../../../components/FilterBar';
+import { selectCourseCohorts } from '../../cohorts/data/selectors';
+import { fetchCourseCohorts } from '../../cohorts/data/thunks';
+import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
+import { setPostFilter } from '../data/slices';
+
+function LearnerPostFilterBar() {
+  const dispatch = useDispatch();
+  const { courseId } = useParams();
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+  const userIsGroupTa = useSelector(selectUserIsGroupTa);
+  const cohorts = useSelector(selectCourseCohorts);
+  const postFilter = useSelector(state => state.learners.postFilter);
+
+  const filtersToShow = [
+    {
+      name: 'postType',
+      filters: ['type-all', 'type-discussions', 'type-questions'],
+    },
+    {
+      name: 'status',
+      filters: ['status-any', 'status-unread', 'status-unanswered', 'status-unresponded'],
+    },
+    {
+      name: 'orderBy',
+      filters: ['sort-activity', 'sort-comments', 'sort-votes'],
+    },
+  ];
+
+  if (userHasModerationPrivileges || userIsGroupTa) {
+    filtersToShow[1].filters.splice(2, 0, 'status-reported');
+  }
+
+  const handleFilterChange = (event) => {
+    const { name, value } = event.currentTarget;
+    const filterContentEventProperties = {
+      statusFilter: postFilter.status,
+      threadTypeFilter: postFilter.postType,
+      sortFilter: postFilter.orderBy,
+      cohortFilter: postFilter.cohort,
+      triggeredBy: name,
+    };
+    if (name === 'postType') {
+      if (postFilter.postType !== value) {
+        dispatch(setPostFilter({
+          ...postFilter,
+          postType: value,
+        }));
+        filterContentEventProperties.threadTypeFilter = value;
+      }
+    } else if (name === 'status') {
+      if (postFilter.status !== value) {
+        dispatch(setPostFilter({
+          ...postFilter,
+          status: value,
+        }));
+        filterContentEventProperties.statusFilter = value;
+      }
+    } else if (name === 'orderBy') {
+      if (postFilter.orderBy !== value) {
+        dispatch(setPostFilter({
+          ...postFilter,
+          orderBy: value,
+        }));
+        filterContentEventProperties.sortFilter = value;
+      }
+    } else if (name === 'cohort') {
+      if (postFilter.cohort !== value) {
+        dispatch(setPostFilter({
+          ...postFilter,
+          cohort: value,
+        }));
+        filterContentEventProperties.cohortFilter = value;
+      }
+    }
+    sendTrackEvent('edx.forum.filter.content', filterContentEventProperties);
+  };
+
+  useEffect(() => {
+    if (userHasModerationPrivileges && isEmpty(cohorts)) {
+      dispatch(fetchCourseCohorts(courseId));
+    }
+  }, [courseId, userHasModerationPrivileges]);
+
+  return (
+    <FilterBar
+      filters={filtersToShow}
+      selectedFilters={postFilter}
+      onFilterChange={handleFilterChange}
+      showCohortsFilter={userHasModerationPrivileges || userIsGroupTa}
+    />
+  );
+}
+
+export default LearnerPostFilterBar;
--- a/Show More
+++ b/Show More