feat: Editor bar visibility (palm.master) (#581)

* feat: fixed editor bar visibility

* feat: fixed z index

.env

@@ -15,8 +15,10 @@ LOGO_WHITE_URL=''
 FAVICON_URL=''
 MARKETING_SITE_BASE_URL=''
 ORDER_HISTORY_URL=''
-POST_MARK_AS_READ_DELAY=2000
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
 SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
+SUPPORT_URL=''
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.env.development

@@ -16,8 +16,10 @@ LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
-POST_MARK_AS_READ_DELAY=2000
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
+SUPPORT_URL='https://support.edx.org'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.env.test

@@ -8,14 +8,16 @@ LMS_BASE_URL='http://localhost:18000'
 LEARNING_BASE_URL='http://localhost:2000'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
-LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
-LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
-LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+LOGO_URL='https://edx-cdn.org/v3/default/logo.svg'
+LOGO_TRADEMARK_URL='https://edx-cdn.org/v3/default/logo-trademark.svg'
+LOGO_WHITE_URL='https://edx-cdn.org/v3/default/logo-white.svg'
+FAVICON_URL='https://edx-cdn.org/v3/default/favicon.ico'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
-POST_MARK_AS_READ_DELAY=2000
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
-SITE_NAME=localhost
+SITE_NAME='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
+SUPPORT_URL='https://support.edx.org'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.eslintrc.js

@@ -1,10 +1,14 @@
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint',
-{
-  "plugins": ["simple-import-sort"],
-    "rules": {
+module.exports = createConfig(
+  'eslint',
+  {
+    plugins: ['simple-import-sort'],
+    rules: {
       'import/no-extraneous-dependencies': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'jsx-a11y/no-noninteractive-element-interactions': 'off',
+      'jsx-a11y/no-access-key': 'off',
       'simple-import-sort/imports': [
         'error', {
           groups: [
@@ -22,7 +26,6 @@ module.exports = createConfig('eslint',
         },
       ],
       'simple-import-sort/exports': 'error',
-    }
-  }
+    },
+  },
 );
-

.github/pull_request_template.md

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

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

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

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

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

.github/workflows/ci.yml

@@ -9,18 +9,17 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [12, 14, 16]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v2
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -34,4 +33,4 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v3

.github/workflows/commitlint.yml

@@ -7,4 +7,4 @@ on:
 
 jobs:
   commitlint:
-    uses: edx/.github/.github/workflows/commitlint.yml@master
+    uses: openedx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

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

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

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

.nvmrc

@@ -1 +1 @@
-12
+18

.tx/config

@@ -0,0 +1,8 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-app-discussions]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type = KEYVALUEJSON

Makefile

@@ -1,21 +1,32 @@
+export TRANSIFEX_RESOURCE = frontend-app-discussions
 transifex_resource = frontend-app-discussions
-transifex_langs = "ar,fr,es_419,zh_CN"
+transifex_langs = "ar,fr,es_419,zh_CN,tr_TR,pl,fr_CA,fr_FR,de_DE,it_IT"
 
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
 
+NPM_TESTS=build i18n_extract lint test
+
+.PHONY: test
+test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
+
+.PHONY: test.npm.*
+test.npm.%: validate-no-uncommitted-package-lock-changes
+	test -d node_modules || $(MAKE) requirements
+	npm run $(*)
+
+.PHONY: requirements
+
 precommit:
 	npm run lint
 	npm audit
 
-requirements:
-	npm install
+requirements:  ## install ci requirements
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -38,17 +49,17 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --language=$(transifex_langs)
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
-	git diff --exit-code package-lock.json
+	git diff --exit-code package-lock.json

README.rst

@@ -1,20 +1,19 @@
-|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:
 
-  ``git clone https://github.com/edx/frontend-app-discussions.git``
+  ``git clone https://github.com/openedx/frontend-app-discussions.git``
 
 2. Install npm dependencies:
 
@@ -26,10 +25,48 @@ 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
 -----------------
 
-The source for this project is organized into nested submodules according to the ADR `Feature-based Application Organization <https://github.com/edx/frontend-app-discussions/blob/master/docs/decisions/0002-feature-based-application-organization.rst>`_.
+The source for this project is organized into nested submodules according to the ADR `Feature-based Application Organization <https://github.com/openedx/frontend-app-discussions/blob/master/docs/decisions/0002-feature-based-application-organization.rst>`_.
 
 Build Process Notes
 -------------------
@@ -41,11 +78,11 @@ The production build is created with ``npm run build``.
 Internationalization
 --------------------
 
-Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-platform/module-Internationalization.html>`_ for documentation on internationalization.  The documentation explains how to use it, and the `How To <https://github.com/edx/frontend-i18n/blob/master/docs/how_tos/i18n.rst>`_ has more detail.
+Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-platform/module-Internationalization.html>`_ for documentation on internationalization.  The documentation explains how to use it, and the `How To <https://github.com/openedx/frontend-i18n/blob/master/docs/how_tos/i18n.rst>`_ has more detail.
 
 .. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-discussions.svg?branch=master
    :target: https://travis-ci.org/edx/frontend-app-discussions
 .. |Codecov| image:: https://codecov.io/gh/edx/frontend-app-discussions/branch/master/graph/badge.svg
    :target: https://codecov.io/gh/edx/frontend-app-discussions
 .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-discussions.svg
-   :target: @edx/frontend-app-discussions
+   :target: @edx/frontend-app-discussions

catalog-info.yaml

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

docs/how_tos/i18n.rst

@@ -2,4 +2,4 @@
 React App i18n HOWTO
 ####################
 
-This document has moved to the frontend-platform repo: https://github.com/edx/frontend-platform/blob/master/docs/how_tos/i18n.rst
+This document has moved to the frontend-platform repo: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst

jest.config.js

@@ -1,8 +1,9 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
-  // If you want to add config BEFORE jest loads, use setupFiles instead.  
+  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.
+  // If you want to add config BEFORE jest loads, use setupFiles instead.
+  setupFiles: ['<rootDir>/.env.test'],
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],

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

package.json

@@ -4,16 +4,14 @@
   "description": "Discussions Frontend",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-discussions.git"
+    "url": "git+https://github.com/openedx/frontend-app-discussions.git"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "is-es5": "es-check es5 ./dist/*.js",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
     "snapshot": "fedx-scripts jest --updateSnapshot",
@@ -27,22 +25,25 @@
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/edx/frontend-app-discussions#readme",
+  "homepage": "https://github.com/openedx/frontend-app-discussions#readme",
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/edx/frontend-app-discussions/issues"
+    "url": "https://github.com/openedx/frontend-app-discussions/issues"
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-platform": "1.15.4",
-    "@edx/paragon": "19.10.1",
+    "@edx/frontend-component-footer": "12.0.0",
+    "@edx/frontend-component-header": "4.0.3",
+    "@edx/frontend-platform": "4.4.0",
+    "@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",
@@ -59,18 +60,18 @@
     "yup": "0.31.1"
   },
   "devDependencies": {
-    "@edx/frontend-build": "9.1.4",
+    "@edx/browserslist-config": "1.1.0",
+    "@edx/frontend-build": "12.8.38",
+    "@edx/reactifex": "1.0.3",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "13.5.0",
     "axios-mock-adapter": "1.20.0",
-    "codecov": "3.8.3",
-    "es-check": "6.2.1",
+    "babel-plugin-react-intl": "8.2.25",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "glob": "7.2.0",
     "husky": "7.0.4",
     "jest": "27.5.1",
-    "reactifex": "1.1.1",
     "rosie": "2.1.0"
   }
 }

public/index.html

@@ -1,12 +1,187 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-us">
   <head>
-      <title>Discussions | <%= process.env.SITE_NAME %></title>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
+    <title>Discussions | <%= process.env.SITE_NAME %></title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="shortcut icon"
+      href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
+      type="image/x-icon"
+    />
+    <script>
+      window.MathJax = {
+        tex: {
+          inlineMath: [
+            ["$", "$"],
+            ["\\\\(", "\\\\)"],
+            ["\\(", "\\)"],
+            ["[mathjaxinline]", "[/mathjaxinline]"],
+            ["\\begin{math}", "\\end{math}"],
+          ],
+          displayMath: [
+            ["[mathjax]", "[/mathjax]"],
+            ["$$", "$$"],
+            ["\\\\[", "\\\\]"],
+            ["\\[", "\\]"],
+            ["\\begin{displaymath}", "\\end{displaymath}"],
+            ["\\begin{equation}", "\\end{equation}"],
+          ],
+          processEscapes: true,
+          processEnvironments: true,
+          autoload: {
+            color: [],
+            colorv2: ["color"],
+          },
+          packages: { "[+]": ["noerrors"] },
+        },
+        options: {
+          ignoreHtmlClass: "tex2jax_ignore",
+          processHtmlClass: "tex2jax_process",
+        },
+        loader: {
+          load: ["input/asciimath", "[tex]/noerrors"],
+        },
+      };
+    </script>
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+      id="MathJax-script"
+    ></script>
   </head>
-  <body class="vh-100 vw-100 overflow-hidden">
-    <div id="root" class="vh-100 vw-100 small"></div>
+  <body>
+    <div id="root" class="small"></div>
+
+    <!-- begin usabilla live embed code -->
+    <script defer type="text/javascript">
+      window.lightningjs ||
+        (function (n) {
+          var e = "lightningjs";
+          function t(e, t) {
+            var r, i, a, o, d, c;
+            return (
+              t && (t += (/\?/.test(t) ? "&" : "?") + "lv=1"),
+              n[e] ||
+                ((r = window),
+                (i = document),
+                (a = e),
+                (o = i.location.protocol),
+                (d = "load"),
+                (c = 0),
+                (function () {
+                  n[a] = function () {
+                    var t = arguments,
+                      i = this,
+                      o = ++c,
+                      d = (i && i != r && i.id) || 0;
+                    function s() {
+                      return (s.id = o), n[a].apply(s, arguments);
+                    }
+                    return (
+                      (e.s = e.s || []).push([o, d, t]),
+                      (s.then = function (n, t, r) {
+                        var i = (e.fh[o] = e.fh[o] || []),
+                          a = (e.eh[o] = e.eh[o] || []),
+                          d = (e.ph[o] = e.ph[o] || []);
+                        return (
+                          n && i.push(n), t && a.push(t), r && d.push(r), s
+                        );
+                      }),
+                      s
+                    );
+                  };
+                  var e = (n[a]._ = {});
+                  function s() {
+                    e.P(d), (e.w = 1), n[a]("_load");
+                  }
+                  (e.fh = {}),
+                    (e.eh = {}),
+                    (e.ph = {}),
+                    (e.l = t
+                      ? t.replace(/^\/\//, ("https:" == o ? o : "http:") + "//")
+                      : t),
+                    (e.p = { 0: +new Date() }),
+                    (e.P = function (n) {
+                      e.p[n] = new Date() - e.p[0];
+                    }),
+                    e.w && s(),
+                    r.addEventListener
+                      ? r.addEventListener(d, s, !1)
+                      : r.attachEvent("onload", s);
+                  var l = function () {
+                    function n() {
+                      return [
+                        "<!DOCTYPE ",
+                        o,
+                        "><",
+                        o,
+                        "><head></head><",
+                        t,
+                        "><",
+                        r,
+                        ' src="',
+                        e.l,
+                        '"></',
+                        r,
+                        "></",
+                        t,
+                        "></",
+                        o,
+                        ">",
+                      ].join("");
+                    }
+                    var t = "body",
+                      r = "script",
+                      o = "html",
+                      d = i[t];
+                    if (!d) return setTimeout(l, 100);
+                    e.P(1);
+                    var c,
+                      s = i.createElement("div"),
+                      h = s.appendChild(i.createElement("div")),
+                      u = i.createElement("iframe");
+                    (s.style.display = "none"),
+                      (d.insertBefore(s, d.firstChild).id = "lightningjs-" + a),
+                      (u.frameBorder = "0"),
+                      (u.id = "lightningjs-frame-" + a),
+                      /MSIE[ ]+6/.test(navigator.userAgent) &&
+                        (u.src = "javascript:false"),
+                      (u.allowTransparency = "true"),
+                      h.appendChild(u);
+                    try {
+                      u.contentWindow.document.open();
+                    } catch (n) {
+                      (e.domain = i.domain),
+                        (c =
+                          "javascript:var d=document.open();d.domain='" +
+                          i.domain +
+                          "';"),
+                        (u.src = c + "void(0);");
+                    }
+                    try {
+                      var p = u.contentWindow.document;
+                      p.write(n()), p.close();
+                    } catch (e) {
+                      u.src =
+                        c +
+                        'd.write("' +
+                        n().replace(/"/g, String.fromCharCode(92) + '"') +
+                        '");d.close();';
+                    }
+                    e.P(2);
+                  };
+                  e.l && l();
+                })()),
+              (n[e].lv = "1"),
+              n[e]
+            );
+          }
+          var r = (window.lightningjs = t(e));
+          (r.require = t), (r.modules = n);
+        })({});
+
+    </script>
+    <!-- end usabilla live embed code -->
   </body>
 </html>

src/assets/empty.svg

@@ -1,44 +1,44 @@
 <svg width="246" height="204" viewBox="0 0 246 204" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.9664 80.7056C1.9299 101.534 -5.31519 125.861 4.55784 148.18C22.5467 188.845 120.573 177.416 163.26 161.447C283.487 116.471 225.675 -1.54332 95.6636 27.6382C59.2626 35.8086 30.003 59.877 15.9664 80.7056Z" fill="#E1DDDB" fill-opacity="0.3"/>
-<path d="M95.6307 23.4976C101.102 13.3476 109.932 6.31365 123.036 10.536C124.191 11.0005 125.403 11.311 126.639 11.4597C127.895 11.386 129.146 11.2369 130.384 11.0131C136.292 10.5259 140.656 16.2505 143.529 21.427C148.867 31.0796 158.622 44.1833 156.724 55.7847C155.252 64.7776 146.797 71.0097 138.261 74.1562C128.636 77.7063 118.244 78.655 108.136 76.9069C103.061 76.034 97.813 74.3288 94.159 70.6443C89.084 65.5084 88.069 57.6016 88.4547 50.3443C88.9926 42.2345 91.1749 31.8104 95.6307 23.4976Z" fill="white"/>
+<path d="M15.966 80.706C1.93 101.534-5.315 125.86 4.558 148.18c17.989 40.665 116.015 29.236 158.702 13.267 120.227-44.976 62.415-162.99-67.596-133.809-36.401 8.17-65.661 32.239-79.698 53.068Z" fill="#D7D3D1" fill-opacity="0.3"></path>
+<path d="M95.6307 23.4976C101.102 13.3476 109.932 6.31365 123.036 10.536C124.191 11.0005 125.403 11.311 126.639 11.4597C127.895 11.386 129.146 11.2369 130.384 11.0131C136.292 10.5259 140.656 16.2505 143.529 21.427C148.867 31.0796 158.622 44.1833 156.724 55.7847C155.252 64.7776 146.797 71.0097 138.261 74.1562C128.636 77.7063 118.244 78.655 108.136 76.9069C103.061 76.034 97.813 74.3288 94.159 70.6443C89.084 65.5084 88.069 57.6016 88.4547 50.3443C88.9926 42.2345 91.1749 31.8104 95.6307 23.4976Z" fill="#EEEAE9"/>
 <path d="M117.991 78.2569C114.66 78.2567 111.336 77.9715 108.054 77.4043C101.649 76.3081 97.0006 74.2172 93.8439 71.0098C89.4084 66.554 87.4393 59.652 87.9772 50.3952C88.5558 40.7933 91.2557 30.6534 95.2142 23.2845C99.8528 14.657 108.46 5.35964 123.137 10.0895L123.837 10.3331C124.73 10.6795 125.665 10.9015 126.618 10.9929C127.348 10.9968 128.077 10.9219 128.79 10.7696C129.278 10.6884 129.805 10.597 130.303 10.5564C135.165 10.1403 139.752 13.7334 143.894 21.2038C144.848 22.9293 145.924 24.7563 147.091 26.6949C152.278 35.3732 158.733 46.1728 157.139 55.866C155.871 63.712 148.877 70.7155 138.392 74.5928C131.864 77.0187 124.955 78.2596 117.991 78.2569ZM96.0972 23.721C92.1996 30.9782 89.5302 40.976 88.9922 50.4459C88.4543 59.3982 90.332 66.0972 94.5544 70.3602C97.5994 73.4053 102.076 75.4352 108.277 76.4502C118.3 78.1754 128.602 77.223 138.139 73.6894C148.289 69.9238 155.079 63.1842 156.307 55.6732C157.84 46.325 151.486 35.6777 146.38 27.1212C145.223 25.1826 144.127 23.3556 143.163 21.6199C139.214 14.5149 134.941 11.0741 130.465 11.4699C129.988 11.4699 129.521 11.5917 129.034 11.6729C128.218 11.8545 127.384 11.9464 126.547 11.947C125.503 11.8549 124.477 11.6122 123.502 11.2263L122.812 10.9929C108.744 6.45585 100.482 15.4284 95.9957 23.7413L96.0972 23.721Z" fill="#454545"/>
-<path d="M182.845 167.75C182.845 167.75 178.596 94.152 167.857 84.3978C152.409 70.4314 97.5788 67.5184 86.4443 70.3909C66.7533 75.4659 53.0508 106.22 53.0508 106.22L85.7135 115.985C85.7845 141.248 88.3119 167.75 88.3119 167.75H182.845Z" fill="#03C7E8"/>
-<path d="M84.2307 146.058C84.1627 146.053 84.0963 146.035 84.0354 146.004C83.9746 145.973 83.9204 145.93 83.8761 145.878C83.8317 145.827 83.7981 145.766 83.7771 145.702C83.7561 145.637 83.7481 145.568 83.7537 145.5L88.1689 87.6451C88.1741 87.5757 88.1928 87.5081 88.2242 87.446C88.2556 87.3839 88.299 87.3286 88.3518 87.2833C88.4046 87.238 88.4659 87.2037 88.532 87.1821C88.5982 87.1606 88.668 87.1524 88.7373 87.1579C88.8063 87.163 88.8736 87.1819 88.9352 87.2134C88.9967 87.2449 89.0514 87.2884 89.0959 87.3414C89.1403 87.3944 89.1737 87.4557 89.1941 87.5219C89.2144 87.588 89.2213 87.6575 89.2144 87.7263L84.7991 145.581C84.794 145.65 84.7752 145.718 84.7437 145.779C84.7122 145.841 84.6686 145.895 84.6156 145.94C84.5627 145.984 84.5013 146.018 84.4352 146.038C84.3691 146.058 84.2995 146.065 84.2307 146.058Z" fill="#454545"/>
-<path d="M114.163 90.7217C117.828 95.279 123.298 98.527 129.196 98.6184C129.959 98.6607 130.724 98.5574 131.449 98.3139C132.442 97.8894 133.288 97.1838 133.885 96.2839C136.544 92.6299 136.656 87.7071 135.986 83.2411C135.509 80.1048 134.595 76.8162 132.22 74.7151C129.429 72.2487 125.379 72.0152 121.654 71.9137C117.929 71.8122 109.291 70.7262 107.911 75.314C106.622 79.5059 111.707 87.6665 114.163 90.7217Z" fill="#454545"/>
+<path d="M182.845 167.75C182.845 167.75 178.596 94.152 167.857 84.3978C152.409 70.4314 97.5788 67.5184 86.4443 70.3909C66.7533 75.4659 53.0508 106.22 53.0508 106.22L85.7135 115.985C85.7845 141.248 88.3119 167.75 88.3119 167.75H182.845Z" fill="#B5AFAB"/>
+<path d="M84.2307 146.058C84.1627 146.053 84.0963 146.035 84.0354 146.004C83.9746 145.973 83.9204 145.93 83.8761 145.878C83.8317 145.827 83.7981 145.766 83.7771 145.702C83.7561 145.637 83.7481 145.568 83.7537 145.5L88.1689 87.6451C88.1741 87.5757 88.1928 87.5081 88.2242 87.446C88.2556 87.3839 88.299 87.3286 88.3518 87.2833C88.4046 87.238 88.4659 87.2037 88.532 87.1821C88.5982 87.1606 88.668 87.1524 88.7373 87.1579C88.8063 87.163 88.8736 87.1819 88.9352 87.2134C88.9967 87.2449 89.0514 87.2884 89.0959 87.3414C89.1403 87.3944 89.1737 87.4557 89.1941 87.5219C89.2144 87.588 89.2213 87.6575 89.2144 87.7263L84.7991 145.581C84.794 145.65 84.7752 145.718 84.7437 145.779C84.7122 145.841 84.6686 145.895 84.6156 145.94C84.5627 145.984 84.5013 146.018 84.4352 146.038C84.3691 146.058 84.2995 146.065 84.2307 146.058Z" fill="#5C524D"/>
+<path d="M114.163 90.7217C117.828 95.279 123.298 98.527 129.196 98.6184C129.959 98.6607 130.724 98.5574 131.449 98.3139C132.442 97.8894 133.288 97.1838 133.885 96.2839C136.544 92.6299 136.656 87.7071 135.986 83.2411C135.509 80.1048 134.595 76.8162 132.22 74.7151C129.429 72.2487 125.379 72.0152 121.654 71.9137C117.929 71.8122 109.291 70.7262 107.911 75.314C106.622 79.5059 111.707 87.6665 114.163 90.7217Z" fill="#5C524D"/>
 <path d="M129.42 99.0646H129.187C123.553 98.9732 117.809 95.9587 113.82 91.0055C111.17 87.7169 106.146 79.536 107.476 75.1816C108.805 70.8273 115.9 71.1216 120.123 71.3855L121.676 71.4566C125.786 71.5784 129.704 71.8829 132.516 74.3696C135.327 76.8564 136.028 80.5307 136.424 83.1697C137.286 88.874 136.556 93.3197 134.252 96.5372C133.611 97.5159 132.692 98.2797 131.613 98.7296C130.908 98.9745 130.165 99.0881 129.42 99.0646ZM116.662 72.1671C113.089 72.1671 109.181 72.6847 108.339 75.4455C107.11 79.4142 112.064 87.4022 114.51 90.4472C118.336 95.1974 123.827 98.08 129.197 98.1714C129.908 98.2085 130.62 98.1157 131.298 97.8973C132.211 97.5007 132.988 96.8442 133.531 96.0094C135.683 93.0456 136.363 88.7623 135.561 83.3016C135.185 80.7946 134.404 77.2116 131.947 75.0395C129.491 72.8674 125.604 72.4614 121.666 72.3498C121.209 72.3498 120.65 72.3498 120.102 72.2787C119.067 72.228 117.88 72.1671 116.662 72.1671Z" fill="#454545"/>
-<path d="M137.874 43.808C138.249 42.5429 138.885 41.3706 139.742 40.3671C140.181 39.8733 140.761 39.5266 141.404 39.374C142.047 39.2215 142.721 39.2706 143.335 39.5145C143.762 39.7688 144.12 40.1237 144.379 40.5484C144.637 40.973 144.787 41.4544 144.817 41.9505C144.867 42.9487 144.701 43.9458 144.33 44.8737C143.765 46.6382 142.787 48.2423 141.477 49.5529C140.827 50.204 140.05 50.7154 139.195 51.0558C138.34 51.3961 137.424 51.5582 136.504 51.5321" fill="white"/>
+<path d="M137.874 43.808C138.249 42.5429 138.885 41.3706 139.742 40.3671C140.181 39.8733 140.761 39.5266 141.404 39.374C142.047 39.2215 142.721 39.2706 143.335 39.5145C143.762 39.7688 144.12 40.1237 144.379 40.5484C144.637 40.973 144.787 41.4544 144.817 41.9505C144.867 42.9487 144.701 43.9458 144.33 44.8737C143.765 46.6382 142.787 48.2423 141.477 49.5529C140.827 50.204 140.05 50.7154 139.195 51.0558C138.34 51.3961 137.424 51.5582 136.504 51.5321" fill="#EEEAE9"/>
 <path d="M136.89 51.9282H136.474C136.367 51.9179 136.268 51.8667 136.198 51.7854C136.128 51.7041 136.093 51.5989 136.098 51.4917C136.101 51.4379 136.114 51.3851 136.138 51.3366C136.161 51.2881 136.195 51.245 136.235 51.2098C136.276 51.1747 136.324 51.1482 136.375 51.1321C136.427 51.116 136.481 51.1106 136.535 51.1162C137.403 51.1458 138.268 50.9971 139.076 50.6794C139.884 50.3617 140.619 49.8816 141.234 49.2689C142.496 48.0042 143.436 46.4553 143.975 44.7521C144.329 43.8802 144.488 42.9414 144.442 42.0015C144.417 41.5693 144.287 41.1497 144.062 40.7798C143.837 40.4098 143.525 40.1009 143.152 39.8801C142.615 39.6774 142.028 39.6427 141.47 39.7804C140.911 39.9181 140.408 40.2218 140.026 40.6515C139.218 41.6241 138.614 42.7494 138.25 43.9604C138.232 44.0102 138.204 44.0559 138.168 44.0947C138.132 44.1336 138.089 44.1648 138.041 44.1866C137.992 44.2083 137.94 44.2202 137.887 44.2214C137.834 44.2227 137.782 44.2133 137.732 44.1939C137.632 44.1572 137.55 44.0822 137.504 43.9852C137.458 43.8883 137.453 43.7772 137.489 43.6762C137.886 42.3539 138.557 41.1298 139.458 40.0831C139.958 39.5304 140.615 39.1452 141.342 38.9799C142.069 38.8146 142.828 38.8773 143.518 39.1595C144.012 39.44 144.429 39.8394 144.73 40.3214C145.031 40.8034 145.208 41.353 145.243 41.9203C145.299 42.9602 145.126 43.9997 144.736 44.9653C144.16 46.8097 143.143 48.4856 141.772 49.8474C140.468 51.1359 138.723 51.8799 136.89 51.9282Z" fill="#454545"/>
-<path d="M130.902 61.4082L132.475 77.0595C132.475 77.0595 131.714 85.961 121.929 84.1645C119.055 83.6096 116.34 82.4241 113.979 80.6936C111.619 78.963 109.671 76.7304 108.277 74.1566L108.643 46.0715C108.582 44.9246 110.967 40.9965 109.84 31.0698C113.195 30.7268 116.441 29.6886 119.371 28.0214C122.302 26.3542 124.853 24.0946 126.862 21.3867C126.862 21.3867 131.399 26.9895 133.307 28.7252C134.839 30.0073 136.203 31.477 137.367 33.0998C140.412 37.6673 140.28 45.1174 139.549 50.3548C138.839 54.6584 136.342 61.5198 130.902 61.4082Z" fill="white"/>
+<path d="M130.902 61.4082L132.475 77.0595C132.475 77.0595 131.714 85.961 121.929 84.1645C119.055 83.6096 116.34 82.4241 113.979 80.6936C111.619 78.963 109.671 76.7304 108.277 74.1566L108.643 46.0715C108.582 44.9246 110.967 40.9965 109.84 31.0698C113.195 30.7268 116.441 29.6886 119.371 28.0214C122.302 26.3542 124.853 24.0946 126.862 21.3867C126.862 21.3867 131.399 26.9895 133.307 28.7252C134.839 30.0073 136.203 31.477 137.367 33.0998C140.412 37.6673 140.28 45.1174 139.549 50.3548C138.839 54.6584 136.342 61.5198 130.902 61.4082Z" fill="#EEEAE9"/>
 <path d="M124.375 84.8953C123.527 84.8897 122.681 84.8082 121.847 84.6517C118.893 84.0752 116.102 82.8527 113.676 81.0717C111.249 79.2906 109.246 76.9951 107.81 74.3495C107.795 74.2826 107.795 74.2133 107.81 74.1465C107.81 74.1465 108.175 46.2441 108.175 46.0716C108.218 45.5697 108.323 45.0751 108.49 44.5998C109.058 42.651 110.226 38.591 109.383 31.1206C109.377 31.0608 109.382 31.0004 109.4 30.9428C109.417 30.8852 109.446 30.8318 109.485 30.7857C109.519 30.736 109.565 30.6948 109.617 30.6649C109.67 30.6351 109.729 30.6174 109.789 30.6131C113.072 30.2679 116.248 29.2475 119.118 27.6161C121.988 25.9847 124.49 23.7774 126.466 21.133C126.507 21.0737 126.562 21.0246 126.625 20.9894C126.688 20.9542 126.759 20.9339 126.831 20.93C126.904 20.9272 126.977 20.9414 127.044 20.9713C127.111 21.0012 127.17 21.0461 127.217 21.1026C127.217 21.1026 131.754 26.6952 133.621 28.3801C135.158 29.6918 136.522 31.1924 137.681 32.8461C141.193 38.1647 140.422 46.8836 139.935 50.3853C139.346 54.5773 136.89 61.5503 131.439 61.865L132.952 77.0189C132.709 79.4527 131.521 81.6941 129.643 83.2612C128.121 84.3844 126.265 84.9603 124.375 84.8953ZM108.693 74.045C110.072 76.5357 111.98 78.6941 114.282 80.3687C116.585 82.0433 119.226 83.1935 122.02 83.7382C124.943 84.266 127.308 83.86 129.054 82.5304C130.698 81.131 131.753 79.1626 132.008 77.0189L130.444 61.459C130.439 61.393 130.447 61.3266 130.468 61.2637C130.489 61.2009 130.522 61.143 130.566 61.0936C130.611 61.0479 130.665 61.0118 130.724 60.9874C130.784 60.963 130.847 60.9508 130.911 60.9515H131.033C136.108 60.9515 138.433 54.2423 138.991 50.2534C139.478 46.8531 140.229 38.4185 136.89 33.3638C135.757 31.7708 134.431 30.3252 132.941 29.0602C130.797 26.8597 128.764 24.5527 126.851 22.148C122.766 27.2984 116.828 30.6462 110.307 31.4759C111.068 38.8346 109.901 42.8845 109.292 44.8536C109.159 45.2422 109.067 45.6436 109.018 46.0513C109.018 46.0513 109.058 46.0817 108.693 74.045Z" fill="#454545"/>
-<path d="M131.438 66.5538C128.868 67.0035 126.223 66.7221 123.805 65.7418C118.233 63.7828 117.908 59.9766 117.908 59.9766C117.908 59.9766 122.597 62.9201 130.9 61.3773L131.438 66.5538Z" fill="#454545"/>
+<path d="M131.438 66.5538C128.868 67.0035 126.223 66.7221 123.805 65.7418C118.233 63.7828 117.908 59.9766 117.908 59.9766C117.908 59.9766 122.597 62.9201 130.9 61.3773L131.438 66.5538Z" fill="#5C524D"/>
 <path d="M129.176 67.2139C127.292 67.1821 125.427 66.8391 123.655 66.1989C117.879 64.1689 117.483 60.2206 117.463 60.1089C117.455 60.025 117.471 59.9405 117.508 59.8652C117.546 59.7899 117.605 59.7268 117.677 59.6833C117.749 59.6397 117.832 59.6175 117.916 59.6192C118.001 59.6209 118.083 59.6464 118.153 59.6928C118.153 59.6928 122.812 62.5246 130.82 61.0326C130.945 61.0116 131.073 61.0408 131.176 61.1138C131.226 61.15 131.268 61.1971 131.298 61.2516C131.327 61.306 131.345 61.3664 131.348 61.4284L131.876 66.5034C131.898 66.5877 131.895 66.6764 131.868 66.7591C131.841 66.8418 131.791 66.9151 131.724 66.9703C131.68 67.0105 131.629 67.0411 131.573 67.0603C131.517 67.0795 131.458 67.0869 131.399 67.082C130.664 67.1971 129.92 67.2413 129.176 67.2139ZM118.59 60.86C119.036 62.0273 120.315 64.0674 123.959 65.3463C126.186 66.196 128.589 66.4786 130.952 66.1685L130.516 61.9359C124.406 62.9611 120.315 61.6822 118.59 60.86Z" fill="#454545"/>
-<path d="M124.061 36.0742C124.061 36.0742 129.846 43.0879 128.78 44.519C127.715 45.9502 124.284 45.4122 124.284 45.4122" fill="white"/>
+<path d="M124.061 36.0742C124.061 36.0742 129.846 43.0879 128.78 44.519C127.715 45.9502 124.284 45.4122 124.284 45.4122" fill="#EEEAE9"/>
 <path d="M125.714 45.9592C125.211 45.9586 124.71 45.9247 124.212 45.8577C124.106 45.8253 124.017 45.7561 123.958 45.6627C123.9 45.5693 123.878 45.4581 123.895 45.3494C123.912 45.2408 123.968 45.142 124.052 45.0713C124.137 45.0006 124.244 44.9627 124.354 44.9645C125.237 45.1066 127.683 45.2385 128.414 44.2438C128.87 43.6348 126.668 39.9504 123.694 36.3573C123.657 36.312 123.628 36.2598 123.611 36.2036C123.594 36.1475 123.588 36.0885 123.594 36.03C123.6 35.9716 123.617 35.9148 123.644 35.863C123.672 35.8112 123.709 35.7653 123.755 35.728C123.849 35.6544 123.968 35.6197 124.087 35.631C124.206 35.6423 124.316 35.6988 124.394 35.7889C126.201 37.9813 130.281 43.239 129.134 44.7818C128.414 45.7562 126.881 45.9592 125.714 45.9592Z" fill="#454545"/>
 <path d="M131.302 37.6836C131.774 37.6204 132.06 36.8441 131.941 35.9495C131.821 35.055 131.341 34.381 130.869 34.4442C130.397 34.5074 130.111 35.2838 130.23 36.1783C130.35 37.0729 130.83 37.7468 131.302 37.6836Z" fill="#454545"/>
 <path d="M117.067 37.7043C117.543 37.6987 117.921 36.9626 117.911 36.0602C117.9 35.1577 117.505 34.4306 117.029 34.4362C116.552 34.4418 116.175 35.1779 116.185 36.0803C116.196 36.9828 116.59 37.7099 117.067 37.7043Z" fill="#454545"/>
-<path d="M111.798 41.8686C111.449 40.5288 110.853 39.2657 110.042 38.1436C109.575 37.5067 108.964 36.9903 108.258 36.6373C107.551 36.2842 106.771 36.1047 105.982 36.1136C105.494 36.1326 105.016 36.2622 104.586 36.4925C104.155 36.7228 103.782 37.0479 103.495 37.4432C103.153 38.0128 102.938 38.6501 102.866 39.3108C102.348 42.7923 103.515 47.3293 106.794 49.1259C107.347 49.4737 107.988 49.6582 108.641 49.6582C109.295 49.6582 109.935 49.4737 110.488 49.1259" fill="white"/>
+<path d="M111.798 41.8686C111.449 40.5288 110.853 39.2657 110.042 38.1436C109.575 37.5067 108.964 36.9903 108.258 36.6373C107.551 36.2842 106.771 36.1047 105.982 36.1136C105.494 36.1326 105.016 36.2622 104.586 36.4925C104.155 36.7228 103.782 37.0479 103.495 37.4432C103.153 38.0128 102.938 38.6501 102.866 39.3108C102.348 42.7923 103.515 47.3293 106.794 49.1259C107.347 49.4737 107.988 49.6582 108.641 49.6582C109.295 49.6582 109.935 49.4737 110.488 49.1259" fill="#"/>
 <path d="M108.865 50.0604C108.072 50.0422 107.296 49.8333 106.601 49.4514C103.171 47.5635 101.932 42.8844 102.47 39.2202C102.547 38.5008 102.783 37.8074 103.161 37.1902C103.481 36.7428 103.898 36.3741 104.382 36.1121C104.865 35.8501 105.402 35.7016 105.952 35.6779C106.81 35.6717 107.657 35.8702 108.423 36.2567C109.189 36.6433 109.852 37.2069 110.357 37.9007C111.203 39.0603 111.823 40.3687 112.184 41.7577C112.212 41.86 112.2 41.9693 112.148 42.0623C112.097 42.1552 112.012 42.2244 111.91 42.2551C111.86 42.2722 111.807 42.2789 111.754 42.2747C111.702 42.2706 111.651 42.2557 111.604 42.2309C111.557 42.2062 111.516 42.1721 111.483 42.1309C111.45 42.0897 111.426 42.0421 111.413 41.9912C111.077 40.6998 110.506 39.4817 109.728 38.3981C109.306 37.8037 108.747 37.3198 108.099 36.9876C107.45 36.6554 106.731 36.4847 106.003 36.4899C105.578 36.5057 105.162 36.617 104.786 36.8156C104.41 37.0141 104.083 37.2948 103.83 37.6368C103.52 38.1565 103.329 38.7391 103.272 39.342C102.765 42.722 103.881 47.0357 106.987 48.7409C107.466 49.0597 108.025 49.2365 108.599 49.2509C109.174 49.2653 109.741 49.1166 110.235 48.8221C110.321 48.7589 110.428 48.7311 110.534 48.7443C110.639 48.7575 110.736 48.8108 110.804 48.8932C110.869 48.9781 110.899 49.0855 110.885 49.192C110.872 49.2986 110.817 49.3955 110.732 49.4616C110.193 49.8617 109.536 50.0722 108.865 50.0604Z" fill="#454545"/>
 <path d="M166.029 161.964C165.906 161.964 165.786 161.92 165.691 161.84C165.597 161.76 165.533 161.65 165.512 161.528C162.03 139.797 155.362 98.3744 155.057 97.1158C155.023 96.9813 155.043 96.8387 155.114 96.719C155.184 96.5994 155.299 96.5122 155.433 96.4764C155.568 96.4454 155.711 96.4683 155.83 96.5402C155.95 96.6121 156.036 96.7275 156.072 96.8621C156.468 98.4759 166.131 158.777 166.547 161.355C166.567 161.492 166.533 161.632 166.451 161.744C166.37 161.856 166.247 161.932 166.11 161.954L166.029 161.964Z" fill="#454545"/>
-<path d="M103.112 184.842L102.977 184.655H102.747H55.0401C50.0527 184.655 45.9305 180.138 45.9305 174.453V116.416C45.9305 110.737 50.0532 106.208 55.0401 106.208H181.016C186.003 106.208 190.134 110.738 190.165 116.419V174.453C190.165 180.138 186.037 184.655 181.049 184.655H131.929H131.726L131.592 184.807L115.869 202.609L103.112 184.842Z" fill="white" stroke="#454545" stroke-width="0.9"/>
+<path d="M103.112 184.842L102.977 184.655H102.747H55.0401C50.0527 184.655 45.9305 180.138 45.9305 174.453V116.416C45.9305 110.737 50.0532 106.208 55.0401 106.208H181.016C186.003 106.208 190.134 110.738 190.165 116.419V174.453C190.165 180.138 186.037 184.655 181.049 184.655H131.929H131.726L131.592 184.807L115.869 202.609L103.112 184.842Z" fill="#EEEAE9" stroke="#454545" stroke-width="0.9"/>
 <path d="M126.486 55.034C118.985 55.034 116.59 45.1377 116.488 44.7114C116.464 44.5944 116.486 44.4726 116.551 44.372C116.615 44.2715 116.717 44.2002 116.833 44.1735C116.89 44.1599 116.95 44.1579 117.008 44.1674C117.066 44.1769 117.122 44.1979 117.172 44.229C117.222 44.2601 117.265 44.3009 117.299 44.3488C117.334 44.3968 117.358 44.451 117.371 44.5084C117.371 44.5998 119.695 54.1408 126.506 54.1408C127.212 54.168 127.916 54.0394 128.567 53.764C129.217 53.4885 129.8 53.0731 130.272 52.5472C132.616 49.8778 131.987 44.7013 131.977 44.6505C131.968 44.5918 131.972 44.532 131.986 44.4745C132.001 44.417 132.027 44.3631 132.063 44.3158C132.099 44.2686 132.144 44.229 132.196 44.1993C132.247 44.1696 132.304 44.1505 132.363 44.143C132.48 44.131 132.598 44.1642 132.692 44.2358C132.787 44.3074 132.85 44.4121 132.87 44.5287C132.87 44.7622 133.57 50.162 130.952 53.1359C130.395 53.7634 129.705 54.2592 128.932 54.5875C128.16 54.9157 127.324 55.0682 126.486 55.034Z" fill="#454545"/>
-<path d="M70.1771 103.176C73.7637 101.377 78.12 99.9134 81.6644 101.817C83.3455 102.866 84.7632 104.287 85.8078 105.971C88.0669 109.136 90.1082 112.451 91.9175 115.893C92.3914 116.848 92.7954 118.019 92.0581 118.706C91.16 119.551 89.7377 118.638 88.9482 117.701C87.5236 116.028 86.3296 114.173 85.3981 112.183C87.2805 114.936 88.7735 117.936 89.8348 121.097C90.0177 121.471 90.0817 121.891 90.0181 122.302C89.8722 122.667 89.588 122.96 89.2274 123.116C88.8667 123.273 88.4587 123.281 88.0922 123.139C87.3497 122.858 86.7046 122.367 86.2347 121.728C84.1638 119.239 82.3741 116.53 80.8983 113.649C82.3828 116.657 83.8796 119.745 84.2431 123.078C84.3088 123.353 84.3162 123.639 84.2649 123.917C84.2135 124.196 84.1045 124.46 83.9449 124.694C83.7065 124.904 83.4062 125.031 83.0894 125.055C82.7726 125.079 82.4565 124.999 82.1891 124.828C81.6793 124.464 81.2568 123.992 80.952 123.445L75.6783 115.778C77.0141 118.725 77.9793 121.827 78.5518 125.012C78.6234 125.274 78.623 125.551 78.5505 125.813C78.2358 126.713 76.8342 126.341 76.1662 125.662C75.1107 124.468 74.2905 123.084 73.7489 121.585C72.0643 117.734 70.4974 113.712 68.6538 109.896C67.1293 106.761 66.4761 105.033 70.1771 103.176Z" fill="white"/>
+<path d="M70.1771 103.176C73.7637 101.377 78.12 99.9134 81.6644 101.817C83.3455 102.866 84.7632 104.287 85.8078 105.971C88.0669 109.136 90.1082 112.451 91.9175 115.893C92.3914 116.848 92.7954 118.019 92.0581 118.706C91.16 119.551 89.7377 118.638 88.9482 117.701C87.5236 116.028 86.3296 114.173 85.3981 112.183C87.2805 114.936 88.7735 117.936 89.8348 121.097C90.0177 121.471 90.0817 121.891 90.0181 122.302C89.8722 122.667 89.588 122.96 89.2274 123.116C88.8667 123.273 88.4587 123.281 88.0922 123.139C87.3497 122.858 86.7046 122.367 86.2347 121.728C84.1638 119.239 82.3741 116.53 80.8983 113.649C82.3828 116.657 83.8796 119.745 84.2431 123.078C84.3088 123.353 84.3162 123.639 84.2649 123.917C84.2135 124.196 84.1045 124.46 83.9449 124.694C83.7065 124.904 83.4062 125.031 83.0894 125.055C82.7726 125.079 82.4565 124.999 82.1891 124.828C81.6793 124.464 81.2568 123.992 80.952 123.445L75.6783 115.778C77.0141 118.725 77.9793 121.827 78.5518 125.012C78.6234 125.274 78.623 125.551 78.5505 125.813C78.2358 126.713 76.8342 126.341 76.1662 125.662C75.1107 124.468 74.2905 123.084 73.7489 121.585C72.0643 117.734 70.4974 113.712 68.6538 109.896C67.1293 106.761 66.4761 105.033 70.1771 103.176Z" fill="#EEEAE9"/>
 <path d="M77.958 126.765L78.0684 126.749C78.2758 126.704 78.4681 126.606 78.6266 126.465C78.785 126.324 78.9042 126.144 78.9726 125.944C79.0614 125.607 79.0675 125.254 78.9905 124.914C78.6521 123.052 78.1839 121.216 77.5894 119.419L80.5096 123.697C80.8645 124.309 81.3549 124.832 81.9432 125.225C82.3005 125.453 82.7244 125.554 83.1464 125.512C83.5684 125.471 83.964 125.288 84.2695 124.994C84.4767 124.712 84.621 124.389 84.6929 124.047C84.7648 123.705 84.7626 123.352 84.6863 123.01C84.5274 121.793 84.252 120.594 83.864 119.429C84.4984 120.359 85.1577 121.183 85.8586 122.011C86.357 122.728 87.0556 123.282 87.867 123.604C88.1454 123.691 88.4383 123.721 88.7284 123.693C89.0186 123.665 89.3002 123.578 89.5565 123.44C89.7497 123.337 89.9205 123.198 90.0587 123.029C90.197 122.859 90.2999 122.664 90.3614 122.455C90.4574 121.958 90.4043 121.445 90.2087 120.979C89.9753 120.255 89.7117 119.535 89.4297 118.828C89.9032 119.214 90.4782 119.455 91.0854 119.521C91.3167 119.539 91.5492 119.507 91.7672 119.428C91.9853 119.348 92.184 119.224 92.3501 119.062C92.871 118.572 93.2855 117.585 92.2992 115.692C90.4856 112.233 88.4385 108.901 86.1719 105.721C85.0837 103.975 83.6092 102.503 81.8619 101.418C78.8572 99.8217 74.971 100.259 69.9541 102.778C65.9002 104.812 66.657 106.884 68.2137 110.097C69.4397 112.62 70.5521 115.275 71.623 117.791C72.1819 119.102 72.7308 120.415 73.2481 121.722C73.8155 123.272 74.6668 124.702 75.7585 125.94C76.0393 126.234 76.3829 126.461 76.7638 126.604C77.1447 126.747 77.5529 126.802 77.958 126.765ZM75.6082 115.306C75.5536 115.304 75.4993 115.313 75.4476 115.33C75.3469 115.387 75.271 115.48 75.2346 115.59C75.1982 115.7 75.2039 115.819 75.2507 115.925C76.5744 118.833 77.527 121.896 78.0858 125.042C78.1393 125.224 78.1475 125.416 78.1096 125.603C78.0928 125.657 78.061 125.706 78.0176 125.744C77.9743 125.781 77.9213 125.806 77.8647 125.814C77.6113 125.827 77.3581 125.786 77.1214 125.695C76.8847 125.604 76.6697 125.464 76.4903 125.284C75.481 124.129 74.6936 122.798 74.1677 121.357C73.6003 120.057 73.0514 118.744 72.5442 117.435C71.4641 114.858 70.3387 112.186 69.0996 109.643C67.6013 106.545 67.1227 105.222 70.4321 103.558C75.1432 101.188 78.7608 100.74 81.5158 102.179C83.1359 103.197 84.5009 104.573 85.5059 106.202C87.7534 109.348 89.7816 112.644 91.5763 116.068C91.8963 116.687 92.3545 117.808 91.808 118.333C91.7304 118.406 91.6381 118.462 91.5372 118.497C91.4363 118.532 91.3291 118.545 91.2228 118.535C90.4804 118.382 89.8188 117.964 89.3603 117.361C88.9613 116.898 88.5854 116.452 88.2259 115.911C87.5179 114.519 86.7231 113.172 85.8463 111.879C85.7786 111.784 85.6785 111.717 85.5648 111.691C85.451 111.665 85.3317 111.681 85.2292 111.737C85.1284 111.796 85.0535 111.891 85.0192 112.002C84.9848 112.114 84.9936 112.234 85.0438 112.34C85.7112 113.761 86.5088 115.118 87.4264 116.392C88.209 117.951 88.8768 119.565 89.4243 121.221C89.5572 121.517 89.6069 121.843 89.5678 122.165C89.5075 122.344 89.3789 122.493 89.2099 122.579C89.0614 122.67 88.8961 122.731 88.7237 122.757C88.5513 122.783 88.3754 122.774 88.2064 122.731C87.5704 122.454 87.0251 122.003 86.6327 121.431C84.5887 118.966 82.8207 116.284 81.3603 113.434C81.2978 113.338 81.2021 113.269 81.0916 113.239C80.981 113.209 80.8633 113.22 80.7607 113.271C80.6582 113.322 80.578 113.41 80.5355 113.516C80.493 113.622 80.491 113.741 80.53 113.848C81.9552 116.804 83.4258 119.855 83.8218 123.132C83.8773 123.341 83.89 123.56 83.8592 123.774C83.8284 123.989 83.7546 124.195 83.6423 124.381C83.4755 124.509 83.2729 124.582 83.0626 124.59C82.8523 124.598 82.6447 124.541 82.4685 124.426C82.0062 124.101 81.6199 123.68 81.3361 123.192L76.0639 115.534C76.0203 115.454 75.9533 115.389 75.8718 115.349C75.7904 115.308 75.6984 115.293 75.6082 115.306Z" fill="#454545"/>
 <path d="M207.372 99.7322C207.43 99.7275 207.486 99.7122 207.538 99.6872C215.214 94.2396 220.02 88.2106 221.846 81.7353C229.021 77.1588 232.984 70.6532 232.606 63.8795C231.975 51.8119 217.685 42.7708 200.833 43.6732C183.98 44.6076 170.809 55.1665 171.449 67.2315C172.089 79.2964 186.367 88.3304 203.184 87.4163C205.507 87.2898 207.816 86.9722 210.087 86.4668C209.922 90.8412 208.779 95.1232 206.742 98.998C206.69 99.085 206.665 99.1856 206.671 99.2869C206.677 99.3882 206.712 99.4854 206.774 99.5662C206.835 99.6469 206.919 99.7074 207.016 99.7398C207.112 99.7722 207.215 99.7751 207.313 99.7481L207.372 99.7322ZM200.922 44.7007C217.2 43.8164 230.955 52.4343 231.59 63.933C231.952 70.3746 228.141 76.5868 221.138 80.9804C221.033 81.051 220.954 81.1535 220.912 81.2727C219.332 87.1032 215.203 92.6024 208.622 97.6282C210.263 93.9118 211.129 89.9003 211.169 85.8383C211.169 85.7615 211.151 85.6857 211.117 85.6166C211.084 85.5475 211.035 85.4869 210.975 85.4395C210.914 85.392 210.844 85.3589 210.769 85.3426C210.694 85.3263 210.616 85.3272 210.541 85.3453C208.13 85.9195 205.672 86.2772 203.197 86.4139C186.902 87.3133 173.124 78.6909 172.49 67.1922C171.855 55.6935 184.6 45.6178 200.892 44.7086L200.922 44.7007Z" fill="#D3CECB"/>
 <path d="M75.9248 170.151C75.6912 170.236 75.5706 170.494 75.6553 170.728C75.7401 170.961 75.9982 171.082 76.2319 170.997L75.9248 170.151ZM105.694 146.36L105.325 146.103L105.694 146.36ZM108.515 125.736L108.549 126.184L108.515 125.736ZM96.4601 134.933L96.8292 135.19L96.4601 134.933ZM151.042 128.024L151.44 128.233L151.042 128.024ZM149.712 113.888L149.745 114.337L149.712 113.888ZM133.632 131.3L133.202 131.17L133.202 131.17L133.632 131.3ZM133.617 131.352L134.047 131.482L134.047 131.482L133.617 131.352ZM157.054 147.878C157.291 147.802 157.421 147.548 157.345 147.312C157.268 147.075 157.015 146.945 156.778 147.021L157.054 147.878ZM133.202 131.17L133.186 131.221L134.047 131.482L134.063 131.431L133.202 131.17ZM136.528 147.943C142.241 142.272 147.672 135.394 151.44 128.233L150.643 127.814C146.927 134.878 141.557 141.683 135.893 147.305L136.528 147.943ZM151.44 128.233C152.08 127.017 153.347 123.307 153.658 119.949C153.814 118.276 153.74 116.614 153.172 115.382C152.884 114.756 152.461 114.228 151.866 113.877C151.271 113.526 150.542 113.375 149.678 113.44L149.745 114.337C150.465 114.283 151.003 114.413 151.409 114.652C151.815 114.892 152.126 115.263 152.355 115.759C152.821 116.77 152.913 118.236 152.762 119.866C152.461 123.114 151.225 126.708 150.643 127.814L151.44 128.233ZM149.678 113.44C145.534 113.75 141.938 116.475 139.139 119.927C136.333 123.388 134.271 127.646 133.202 131.17L134.063 131.431C135.102 128.005 137.114 123.854 139.838 120.494C142.568 117.126 145.959 114.62 149.745 114.337L149.678 113.44ZM133.186 131.221C132.448 133.654 131.751 137 131.92 140.149C132.09 143.295 133.133 146.344 135.983 148.012L136.438 147.236C133.964 145.788 132.981 143.108 132.819 140.101C132.657 137.097 133.325 133.865 134.047 131.482L133.186 131.221ZM96.091 134.675C93.9783 137.703 91.552 142.707 90.6804 147.575C89.8122 152.425 90.4654 157.33 94.7866 159.86L95.2412 159.083C91.4248 156.849 90.7184 152.47 91.5663 147.734C92.411 143.016 94.7766 138.132 96.8292 135.19L96.091 134.675ZM108.481 125.287C105.71 125.494 103.304 126.859 101.256 128.647C99.2081 130.434 97.4895 132.671 96.091 134.675L96.8292 135.19C98.2148 133.204 99.8836 131.039 101.848 129.325C103.811 127.611 106.04 126.372 108.549 126.184L108.481 125.287ZM106.063 146.617C107.294 144.848 110.281 139.483 111.829 134.629C112.599 132.216 113.042 129.845 112.667 128.091C112.477 127.198 112.067 126.431 111.349 125.919C110.635 125.41 109.678 125.197 108.481 125.287L108.549 126.184C109.611 126.105 110.337 126.302 110.827 126.652C111.313 126.999 111.63 127.541 111.787 128.279C112.109 129.786 111.735 131.961 110.972 134.355C109.454 139.114 106.511 144.399 105.325 146.103L106.063 146.617ZM95.3309 159.791C99.3824 155.769 102.824 151.27 106.063 146.617L105.325 146.103C102.099 150.737 98.6929 155.185 94.6969 159.152L95.3309 159.791ZM76.2319 170.997C83.5488 168.342 89.6767 165.404 95.3309 159.791L94.6969 159.152C89.1766 164.632 83.1888 167.515 75.9248 170.151L76.2319 170.997ZM94.7866 159.86C101.288 163.666 109.486 162.902 117.124 160.117C124.773 157.327 131.961 152.476 136.528 147.943L135.893 147.305C131.416 151.749 124.338 156.528 116.816 159.271C109.282 162.019 101.403 162.69 95.2412 159.083L94.7866 159.86ZM135.983 148.012C139.071 149.82 142.811 150.274 146.52 150.039C150.233 149.803 153.958 148.876 157.054 147.878L156.778 147.021C153.72 148.007 150.074 148.912 146.463 149.14C142.848 149.369 139.312 148.918 136.438 147.236L135.983 148.012Z" fill="#D7D3D1"/>
 <path d="M34.1208 1.67272L34.1208 1.67271C39.9029 0.930545 45.3366 1.92561 49.4422 4.11327C53.5488 6.30152 56.2929 9.65956 56.8045 13.6458C57.3161 17.632 55.5083 21.5751 52.0884 24.7305C48.6694 27.8851 43.6661 30.2212 37.8913 30.9639L37.8912 30.9639C36.1449 31.1889 34.3819 31.2561 32.6236 31.1648L32.0474 31.1349L32.1587 31.7011C32.6982 34.4435 33.7686 37.0476 35.3035 39.3693C29.2428 36.2215 26.3184 32.6297 24.9143 29.7128L24.8379 29.5541L24.6742 29.4894C19.3949 27.4043 15.8095 23.6168 15.215 18.9913L15.2149 18.991C14.6999 15.0042 16.5008 11.0607 19.9169 7.90532C23.3321 4.7507 28.3352 2.4146 34.1208 1.67272Z" stroke="#D3CECB" stroke-width="0.9"/>
-<path d="M61.0231 135.858L48.305 133.863L49.2502 146.414L57.0239 149.239L65.7092 152.397L63.3431 144.054L61.0231 135.858Z" fill="white"/>
+<path d="M61.0231 135.858L48.305 133.863L49.2502 146.414L57.0239 149.239L65.7092 152.397L63.3431 144.054L61.0231 135.858Z" fill="#EEEAE9"/>
 <path d="M66.0579 152.457C66.0648 152.408 66.0613 152.357 66.0477 152.309L61.3616 135.77C61.3421 135.706 61.305 135.649 61.2544 135.604C61.2038 135.56 61.1417 135.529 61.075 135.517L48.3569 133.522C48.3039 133.516 48.2503 133.521 48.1995 133.537C48.1487 133.552 48.1018 133.578 48.0616 133.612C48.0239 133.647 47.9944 133.69 47.9751 133.737C47.9558 133.784 47.9471 133.835 47.9496 133.887L48.9053 146.418C48.9097 146.484 48.9336 146.547 48.9742 146.6C49.0148 146.653 49.0702 146.693 49.1337 146.716L65.5927 152.7C65.6534 152.724 65.7197 152.73 65.7838 152.719C65.848 152.708 65.9075 152.679 65.9554 152.636C66.0052 152.587 66.0406 152.525 66.0579 152.457ZM60.7765 136.167L65.2501 151.856L49.6494 146.181L48.7496 134.284L60.7765 136.167Z" fill="#454545"/>
-<path d="M55.3166 137.493L51.3945 141.013L15.4608 102.75L19.3828 99.2312L55.3166 137.493Z" fill="white"/>
-<path d="M55.6719 137.552L55.6801 137.504C55.6838 137.459 55.6774 137.413 55.6612 137.37C55.645 137.327 55.6195 137.289 55.5863 137.256L19.6493 98.9922C19.6177 98.9586 19.5797 98.9313 19.5375 98.912C19.4953 98.8927 19.4496 98.8817 19.4032 98.8797C19.3104 98.8779 19.2205 98.9099 19.1509 98.9694L15.2269 102.5C15.1925 102.529 15.1645 102.565 15.1448 102.606C15.1251 102.646 15.1141 102.69 15.1124 102.735C15.1107 102.78 15.1183 102.825 15.1349 102.867C15.1515 102.909 15.1766 102.948 15.2087 102.98L51.1388 141.243C51.2014 141.311 51.2888 141.353 51.382 141.358C51.4752 141.364 51.5665 141.333 51.6361 141.273L55.56 137.743C55.6186 137.693 55.6581 137.626 55.6719 137.552ZM19.3681 99.7079L54.811 137.466L51.4142 140.519L15.9632 102.767L19.3681 99.7079Z" fill="#454545"/>
-<path d="M15.465 102.744L13.3205 108.151L49.2506 146.414L51.4021 141.008L15.465 102.744Z" fill="#454545"/>
-<path d="M51.7505 141.068C51.7591 141.015 51.7552 140.961 51.7392 140.91C51.7231 140.858 51.6954 140.811 51.658 140.772L15.728 102.509C15.6862 102.466 15.6344 102.434 15.5772 102.416C15.52 102.398 15.4592 102.395 15.4004 102.405C15.3415 102.416 15.2864 102.441 15.2401 102.478C15.1938 102.515 15.1578 102.563 15.1352 102.617L12.9907 108.024C12.966 108.084 12.9591 108.15 12.9709 108.214C12.9827 108.278 13.0127 108.337 13.0575 108.386L48.9945 146.65C49.0356 146.693 49.0869 146.724 49.1438 146.742C49.2006 146.761 49.261 146.764 49.3195 146.753C49.3779 146.742 49.4325 146.717 49.4781 146.68C49.5237 146.643 49.5589 146.595 49.5803 146.541L51.7318 141.135L51.7505 141.068ZM15.5906 103.389L50.994 141.085L49.1238 145.775L13.7226 108.108L15.5906 103.389Z" fill="#454545"/>
-<path d="M25.0873 97.5939L19.3945 99.228L55.3245 137.491L61.0174 135.857L25.0873 97.5939Z" fill="#454545"/>
+<path d="M55.3166 137.493L51.3945 141.013L15.4608 102.75L19.3828 99.2312L55.3166 137.493Z" fill="#EEEAE9"/>
+<path d="M55.6719 137.552L55.6801 137.504C55.6838 137.459 55.6774 137.413 55.6612 137.37C55.645 137.327 55.6195 137.289 55.5863 137.256L19.6493 98.9922C19.6177 98.9586 19.5797 98.9313 19.5375 98.912C19.4953 98.8927 19.4496 98.8817 19.4032 98.8797C19.3104 98.8779 19.2205 98.9099 19.1509 98.9694L15.2269 102.5C15.1925 102.529 15.1645 102.565 15.1448 102.606C15.1251 102.646 15.1141 102.69 15.1124 102.735C15.1107 102.78 15.1183 102.825 15.1349 102.867C15.1515 102.909 15.1766 102.948 15.2087 102.98L51.1388 141.243C51.2014 141.311 51.2888 141.353 51.382 141.358C51.4752 141.364 51.5665 141.333 51.6361 141.273L55.56 137.743C55.6186 137.693 55.6581 137.626 55.6719 137.552ZM19.3681 99.7079L54.811 137.466L51.4142 140.519L15.9632 102.767L19.3681 99.7079Z" fill="#5C524D"/>
+<path d="M15.465 102.744L13.3205 108.151L49.2506 146.414L51.4021 141.008L15.465 102.744Z" fill="#5C524D"/>
+<path d="M51.7505 141.068C51.7591 141.015 51.7552 140.961 51.7392 140.91C51.7231 140.858 51.6954 140.811 51.658 140.772L15.728 102.509C15.6862 102.466 15.6344 102.434 15.5772 102.416C15.52 102.398 15.4592 102.395 15.4004 102.405C15.3415 102.416 15.2864 102.441 15.2401 102.478C15.1938 102.515 15.1578 102.563 15.1352 102.617L12.9907 108.024C12.966 108.084 12.9591 108.15 12.9709 108.214C12.9827 108.278 13.0127 108.337 13.0575 108.386L48.9945 146.65C49.0356 146.693 49.0869 146.724 49.1438 146.742C49.2006 146.761 49.261 146.764 49.3195 146.753C49.3779 146.742 49.4325 146.717 49.4781 146.68C49.5237 146.643 49.5589 146.595 49.5803 146.541L51.7318 141.135L51.7505 141.068ZM15.5906 103.389L50.994 141.085L49.1238 145.775L13.7226 108.108L15.5906 103.389Z" fill="#5C524D"/>
+<path d="M25.0873 97.5939L19.3945 99.228L55.3245 137.491L61.0174 135.857L25.0873 97.5939Z" fill="#5C524D"/>
 <path d="M61.367 135.946C61.3741 135.893 61.3695 135.839 61.3535 135.788C61.3376 135.737 61.3107 135.69 61.2745 135.65L25.3492 97.3593C25.3025 97.3132 25.2443 97.2799 25.1805 97.2627C25.1166 97.2455 25.0494 97.2452 24.9856 97.2616L19.2858 98.8944C19.2279 98.9097 19.1755 98.9401 19.1341 98.9824C19.0927 99.0246 19.0639 99.0771 19.0507 99.1344C19.0349 99.1901 19.034 99.2491 19.0482 99.3055C19.0623 99.362 19.091 99.414 19.1315 99.4567L55.0616 137.72C55.1107 137.764 55.1717 137.793 55.2371 137.805C55.3026 137.816 55.3699 137.809 55.431 137.783L61.1296 136.157C61.1865 136.14 61.2379 136.109 61.279 136.067C61.3201 136.025 61.3496 135.974 61.3647 135.918L61.367 135.946ZM25.01 97.9949L60.4135 135.691L55.4693 137.103L20.0345 99.381L25.01 97.9949Z" fill="#454545"/>
-<path d="M63.3443 144.054L60.8645 144.117L57.3153 147.305L57.0251 149.239L65.7104 152.397L63.3443 144.054Z" fill="#03C7E8"/>
+<path d="M63.3443 144.054L60.8645 144.117L57.3153 147.305L57.0251 149.239L65.7104 152.397L63.3443 144.054Z" fill="#B5AFAB"/>
 <path d="M66.0577 152.457C66.0646 152.408 66.0611 152.357 66.0475 152.308L63.6825 143.958C63.6602 143.885 63.6136 143.82 63.5499 143.775C63.4863 143.73 63.4092 143.706 63.3308 143.708L60.8499 143.779C60.7667 143.779 60.687 143.811 60.6267 143.866L57.0786 147.048C57.0218 147.104 56.9823 147.175 56.9644 147.252L56.6801 149.194C56.6674 149.271 56.6828 149.35 56.7237 149.418C56.7646 149.485 56.8284 149.536 56.9037 149.562L65.589 152.72C65.6497 152.744 65.716 152.751 65.7801 152.74C65.8443 152.728 65.9038 152.7 65.9517 152.657C66.0061 152.602 66.043 152.533 66.0577 152.457ZM63.0822 144.402L65.1872 151.845L57.4136 149.019L57.6438 147.475L61.0336 144.462L63.0822 144.402Z" fill="#454545"/>
 <path d="M73.8776 59.2742L68.5595 58.375L64.808 62.2459L64.0142 56.9138L59.1738 54.5463L64.0001 52.1437L64.7589 46.8115L68.5384 50.6543L73.8425 49.727L71.3485 54.5112L73.8776 59.2742Z" fill="#D3CECB"/>
 <path d="M31.6856 197.783L25.1642 196.68L24.9049 196.636L24.7218 196.825L20.1199 201.574L19.146 195.033L19.1073 194.773L18.8712 194.657L12.9346 191.753L18.8544 188.806L19.0896 188.689L19.1266 188.429L20.0574 181.888L24.6946 186.603L24.8786 186.79L25.1372 186.745L31.6422 185.607L28.5826 191.477L28.461 191.71L28.5844 191.942L31.6856 197.783Z" stroke="#D3CECB"/>
-<path d="M245.799 173.629L238.276 172.357L232.97 177.832L231.847 170.29L225 166.941L231.827 163.542L232.9 156L238.246 161.436L245.749 160.124L242.221 166.891L245.799 173.629Z" fill="#D7D3D1"/>
+<path d="M245.799 173.629L238.276 172.357L232.97 177.832L231.847 170.29L225 166.941L231.827 163.542L232.9 156L238.246 161.436L245.749 160.124L242.221 166.891L245.799 173.629Z" fill="#BAB5B1"/>
 <path d="M220.924 155.81L219.388 153.342L219.249 153.119L218.986 153.107L216.081 152.974L217.952 150.748L218.121 150.547L218.051 150.293L217.279 147.493L219.973 148.584L220.217 148.683L220.436 148.538L222.862 146.939L222.66 149.84L222.642 150.102L222.847 150.266L225.116 152.077L222.291 152.779L222.036 152.842L221.943 153.089L220.924 155.81Z" stroke="#D3CECB"/>
 <path d="M46.3063 94.4625L41.8463 90.7153L41.665 90.5631L41.4369 90.6262L35.8235 92.1786L38.0027 86.777L38.0912 86.5576L37.9606 86.3603L34.7482 81.5065L40.5584 81.9101L40.7943 81.9264L40.9416 81.7415L44.5671 77.1896L45.9847 82.8389L46.0422 83.068L46.2635 83.1509L51.7106 85.1897L46.7684 88.2814L46.5677 88.407L46.5575 88.6435L46.3063 94.4625Z" stroke="#D3CECB" stroke-width="0.9"/>
 </svg>

src/components/FilterBar.jsx

@@ -0,0 +1,202 @@
+/* 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';
+
+const 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);

src/components/FormikErrorFeedback.jsx

@@ -5,7 +5,7 @@ import { getIn, useFormikContext } from 'formik';
 
 import { Form, TransitionReplace } from '@edx/paragon';
 
-function FormikErrorFeedback({ name }) {
+const FormikErrorFeedback = ({ name }) => {
   const {
     touched,
     errors,
@@ -26,7 +26,7 @@ function FormikErrorFeedback({ name }) {
         )}
     </TransitionReplace>
   );
-}
+};
 
 FormikErrorFeedback.propTypes = {
   name: PropTypes.string.isRequired,

src/components/HTMLLoader.jsx

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

src/components/NavigationBar/CourseTabsNavigation.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect } 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 { fetchTab } from './data/thunks';
+import Tabs from './tabs/Tabs';
+import messages from './messages';
+
+import './navBar.scss';
+
+const CourseTabsNavigation = ({
+  activeTab, className, intl, courseId, rootSlug,
+}) => {
+  const dispatch = useDispatch();
+
+  const tabs = useSelector(state => state.courseTabs.tabs);
+  useEffect(() => {
+    dispatch(fetchTab(courseId, rootSlug));
+  }, [courseId]);
+
+  return (
+    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
+      <div className="container-xl">
+        {!!tabs.length
+          && (
+          <Tabs
+            className="nav-underline-tabs"
+            aria-label={intl.formatMessage(messages.courseMaterial)}
+          >
+            {tabs.map(({ url, title, slug }) => (
+              <a
+                key={slug}
+                className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
+                href={url}
+              >
+                {title}
+              </a>
+            ))}
+          </Tabs>
+          )}
+      </div>
+    </div>
+  );
+};
+
+CourseTabsNavigation.propTypes = {
+  activeTab: PropTypes.string,
+  className: PropTypes.string,
+  rootSlug: PropTypes.string,
+  courseId: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+};
+
+CourseTabsNavigation.defaultProps = {
+  activeTab: undefined,
+  className: null,
+  rootSlug: 'outline',
+};
+
+export default injectIntl(CourseTabsNavigation);

src/components/NavigationBar/data/__factories__/index.js

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

src/components/NavigationBar/data/__factories__/navigationBar.factory.js

@@ -0,0 +1,50 @@
+import { Factory } from 'rosie';
+
+import { getApiBaseUrl } from '../../../../data/constants';
+
+Factory.define('navigationBar')
+  .attr('can_show_upgrade_sock', null, false)
+  .attr('can_view_certificate', null, false)
+  .attr('celebrations', null, {
+    first_section: false, streak_discount_enabled: false, streak_length_to_celebrate: null, weekly_goal: false,
+  })
+  .option('hasCourseAccess', null, true)
+
+  .attr('course_access', ['hasCourseAccess'], (hasCourseAccess) => ({
+    additional_context_user_message: null,
+    developer_message: null,
+    error_code: null,
+    has_access: hasCourseAccess,
+    user_fragment: null,
+    user_message: null,
+  }))
+  .option('course_id', null, 'course-v1:edX+DemoX+Demo_Course')
+  .attr('is_enrolled', null, false)
+  .attr('is_self_paced', null, false)
+  .attr('is_staff', null, true)
+  .attr('number', null, 'DemoX')
+  .attr('org', null, 'edX')
+  .attr('original_user_is_staff', null, true)
+  .attr('title', null, 'Demonstration Course')
+  .attr('username', null, 'edx')
+  .attr('tabs', ['course_id'], (idx, courseId) => [
+    {
+      tab_id: 'courseware',
+      title: 'Course',
+      url: `${getApiBaseUrl}/course/${courseId}/home`,
+    },
+    {
+      tab_id: 'progress',
+      title: 'Progress',
+      url: `${getApiBaseUrl}/course/${courseId}/progress`,
+    },
+    {
+      tab_id: 'discussion',
+      title: 'Discussion',
+      url: `${getApiBaseUrl}/course/${courseId}/discussion/forum/`,
+    },
+    {
+      tab_id: 'instructor',
+      title: 'Instructor',
+      url: `${getApiBaseUrl}/course/${courseId}/instructor`,
+    }]);

src/components/NavigationBar/data/api.js

@@ -0,0 +1,31 @@
+/* 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 getCourseMetadataApiUrl = (courseId) => `${getApiBaseUrl()}/api/course_home/course_metadata/${courseId}`;
+
+function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
+  const data = camelCaseObject(metadata);
+  return {
+    ...data,
+    tabs: data.tabs.map(tab => ({
+      // The API uses "courseware" as a slug for both courseware and the outline tab.
+      // If needed, we switch it to "outline" here for
+      // use within the MFE to differentiate between course home and courseware.
+      slug: tab.tabId === 'courseware' ? rootSlug : tab.tabId,
+      title: tab.title,
+      url: tab.url,
+    })),
+    isMasquerading: data.originalUserIsStaff && !data.isStaff,
+  };
+}
+
+export async function getCourseHomeCourseMetadata(courseId, rootSlug) {
+  const url = getCourseMetadataApiUrl(courseId);
+  // don't know the context of adding timezone in url. hence omitting it
+  // url = appendBrowserTimezoneToUrl(url);
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return normalizeCourseHomeCourseMetadata(data, rootSlug);
+}

src/components/NavigationBar/data/api.test.js

@@ -0,0 +1,67 @@
+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 { getCourseMetadataApiUrl } from './api';
+import { fetchTab } from './thunks';
+
+import './__factories__';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+let axiosMock = null;
+let store;
+
+describe('Navigation bar api tests', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  it('Successfully get navigation tabs', async () => {
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1)));
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
+
+    expect(store.getState().courseTabs.tabs).toHaveLength(4);
+    expect(store.getState().courseTabs.courseStatus).toEqual('loaded');
+  });
+
+  it('Failed to get navigation tabs', async () => {
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(404);
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
+
+    expect(store.getState().courseTabs.courseStatus).toEqual('failed');
+  });
+
+  it('Denied to get navigation tabs', async () => {
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(403, {});
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
+
+    expect(store.getState().courseTabs.courseStatus).toEqual('denied');
+  });
+
+  it('Denied to get navigation bar when user has no access on course', async () => {
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(
+      200,
+      (Factory.build('navigationBar', 1, { hasCourseAccess: false })),
+    );
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
+
+    expect(store.getState().courseTabs.courseStatus).toEqual('denied');
+  });
+});

src/components/NavigationBar/data/index.js

@@ -0,0 +1 @@
+export * from './slice';

src/components/NavigationBar/data/selectors.js

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

src/components/NavigationBar/data/slice.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+export const LOADING = 'loading';
+export const LOADED = 'loaded';
+export const FAILED = 'failed';
+export const DENIED = 'denied';
+
+const slice = createSlice({
+  name: 'courseTabs',
+  initialState: {
+    courseStatus: 'loading',
+    courseId: null,
+    tabs: [],
+    courseTitle: null,
+    courseNumber: null,
+    org: null,
+  },
+  reducers: {
+    fetchTabDenied: (state, { payload }) => {
+      state.courseId = payload.courseId;
+      state.courseStatus = DENIED;
+    },
+    fetchTabFailure: (state, { payload }) => {
+      state.courseId = payload.courseId;
+      state.courseStatus = FAILED;
+    },
+    fetchTabRequest: (state, { payload }) => {
+      state.courseId = payload.courseId;
+      state.courseStatus = LOADING;
+    },
+    fetchTabSuccess: (state, { payload }) => {
+      state.courseId = payload.courseId;
+      state.targetUserId = payload.targetUserId;
+      state.tabs = payload.tabs;
+      state.courseStatus = LOADED;
+      state.courseTitle = payload.courseTitle;
+      state.courseNumber = payload.courseNumber;
+      state.org = payload.org;
+    },
+  },
+});
+
+export const {
+  fetchTabDenied,
+  fetchTabFailure,
+  fetchTabRequest,
+  fetchTabSuccess,
+} = slice.actions;
+
+export const courseTabsReducer = slice.reducer;

src/components/NavigationBar/data/thunks.js

@@ -0,0 +1,38 @@
+/* eslint-disable import/prefer-default-export, no-unused-expressions */
+import { logError } from '@edx/frontend-platform/logging';
+
+import { getHttpErrorStatus } from '../../../discussions/utils';
+import { getCourseHomeCourseMetadata } from './api';
+import {
+  fetchTabDenied,
+  fetchTabFailure,
+  fetchTabRequest,
+  fetchTabSuccess,
+} from './slice';
+
+export function fetchTab(courseId, rootSlug) {
+  return async (dispatch) => {
+    dispatch(fetchTabRequest({ courseId }));
+    try {
+      const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId, rootSlug);
+      if (!courseHomeCourseMetadata.courseAccess.hasAccess) {
+        dispatch(fetchTabDenied({ courseId }));
+      } else {
+        dispatch(fetchTabSuccess({
+          courseId,
+          tabs: courseHomeCourseMetadata.tabs,
+          org: courseHomeCourseMetadata.org,
+          courseNumber: courseHomeCourseMetadata.number,
+          courseTitle: courseHomeCourseMetadata.title,
+        }));
+      }
+    } catch (e) {
+      if (getHttpErrorStatus(e) === 403) {
+        dispatch(fetchTabDenied({ courseId }));
+      } else {
+        dispatch(fetchTabFailure({ courseId }));
+      }
+      logError(e);
+    }
+  };
+}

src/components/NavigationBar/index.js

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

src/components/NavigationBar/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  courseMaterial: {
+    id: 'navigation.course.tabs.label',
+    defaultMessage: 'Course Material',
+    description: 'The accessible label for course tabs navigation',
+  },
+});
+
+export default messages;

src/components/NavigationBar/navBar.scss

@@ -0,0 +1,48 @@
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
+
+$fa-font-path: "~font-awesome/fonts";
+@import "~font-awesome/scss/font-awesome";
+
+.course-tabs-navigation {
+  border-bottom: solid 1px #eaeaea;
+
+  .nav a,
+  .nav button {
+    &:hover {
+      background-color: $light-400;
+    }
+  }
+
+  .nav a {
+    &:not(.active):hover {
+      background-color: $light-400;
+      border-bottom: none;
+    }
+  }
+}
+
+.nav-underline-tabs {
+  margin: 0 0 -1px;
+
+  .nav-link {
+    border-bottom: 4px solid transparent;
+    border-top: 4px solid transparent;
+    color: $gray-700;
+
+    // temporary until we can remove .btn class from dropdowns
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+
+    &:hover,
+    &:focus,
+    &.active {
+      font-weight: $font-weight-normal;
+      color: $primary-500;
+      border-bottom-color: $primary-500;
+    }
+  }
+}

src/components/NavigationBar/tabs/Tabs.jsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@edx/paragon';
+
+import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
+
+const Tabs = ({ children, className, ...attrs }) => {
+  const [
+    indexOfLastVisibleChild,
+    containerElementRef,
+    invisibleStyle,
+    overflowElementRef,
+  ] = useIndexOfLastVisibleChild();
+
+  const tabChildren = useMemo(() => {
+    const childrenArray = React.Children.toArray(children);
+    const indexOfOverflowStart = indexOfLastVisibleChild + 1;
+
+    // All tabs will be rendered. Those that would overflow are set to invisible.
+    const wrappedChildren = childrenArray.map((child, index) => React.cloneElement(child, {
+      style: index > indexOfLastVisibleChild ? invisibleStyle : null,
+    }));
+
+    // Build the list of items to put in the overflow menu
+    const overflowChildren = childrenArray.slice(indexOfOverflowStart)
+      .map(overflowChild => React.cloneElement(overflowChild, { className: 'dropdown-item' }));
+
+    // Insert the overflow menu at the cut off index (even if it will be hidden
+    // it so it can be part of measurements)
+    wrappedChildren.splice(
+      indexOfOverflowStart,
+      0, (
+        <div
+          className="nav-item flex-shrink-0"
+          style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
+          ref={overflowElementRef}
+          key="overflow"
+        >
+          <Dropdown className="h-100">
+            <Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
+              <FormattedMessage
+                id="learn.course.tabs.navigation.overflow.menu"
+                description="The title of the overflow menu for course tabs"
+                defaultMessage="More..."
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
+          </Dropdown>
+        </div>
+      ),
+    );
+    return wrappedChildren;
+  }, [children, indexOfLastVisibleChild]);
+
+  return (
+    <nav
+      {...attrs}
+      className={classNames('nav flex-nowrap', className)}
+      ref={containerElementRef}
+    >
+      {tabChildren}
+    </nav>
+  );
+};
+
+Tabs.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+Tabs.defaultProps = {
+  children: null,
+  className: undefined,
+};
+
+export default Tabs;

src/components/NavigationBar/tabs/Tabs.test.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import Tabs from './Tabs';
+import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
+
+jest.mock('./useIndexOfLastVisibleChild');
+
+describe('Tabs', () => {
+  const mockChildren = [...Array(4).keys()].map(i => (<button key={i} type="button">{`Item ${i}`}</button>));
+  // Only half of the children will be visible. The rest of them will be in the dropdown.
+  const indexOfLastVisibleChild = mockChildren.length / 2 - 1;
+
+  const invisibleStyle = { visibility: 'hidden' };
+  useIndexOfLastVisibleChild.mockReturnValue([indexOfLastVisibleChild, null, invisibleStyle, null]);
+
+  function renderComponent(children = null) {
+    render(
+      <IntlProvider locale="en">
+        <Tabs>
+          {children}
+        </Tabs>
+      </IntlProvider>,
+    );
+  }
+
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+  });
+
+  it('renders without children', async () => {
+    renderComponent();
+    expect(screen.getByRole('button', { text: 'More...', hidden: true })).toBeInTheDocument();
+  });
+
+  it('hides invisible children', async () => {
+    renderComponent(mockChildren);
+    // adding hidden property is necessary because everything enclosed in a div with property hidden
+    const allButtons = screen.getAllByRole('button', { hidden: true });
+    expect(screen.getAllByRole('button', { hidden: false })).toHaveLength(3);
+    [...Array(mockChildren.length).keys()].forEach(i => {
+      if (i <= indexOfLastVisibleChild + 1) {
+        expect(allButtons[i]).not.toHaveAttribute('style');
+      } else {
+        expect(allButtons[i]).toHaveStyle('visibility: hidden;');
+      }
+    });
+  });
+});

src/components/NavigationBar/tabs/useIndexOfLastVisibleChild.js

@@ -0,0 +1,77 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+import { useWindowSize } from '@edx/paragon';
+
+const invisibleStyle = {
+  position: 'absolute',
+  left: 0,
+  pointerEvents: 'none',
+  visibility: 'hidden',
+};
+
+/**
+ * This hook will find the index of the last child of a containing element
+ * that fits within its bounding rectangle. This is done by summing the widths
+ * of the children until they exceed the width of the container.
+ *
+ * The hook returns an array containing:
+ * [indexOfLastVisibleChild, containerElementRef, invisibleStyle, overflowElementRef]
+ *
+ * indexOfLastVisibleChild - the index of the last visible child
+ * containerElementRef - a ref to be added to the containing html node
+ * invisibleStyle - a set of styles to be applied to child of the containing node
+ *    if it needs to be hidden. These styles remove the element visually, from
+ *    screen readers, and from normal layout flow. But, importantly, these styles
+ *    preserve the width of the element, so that future width calculations will
+ *    still be accurate.
+ * overflowElementRef - a ref to be added to an html node inside the container
+ *    that is likely to be used to contain a "More" type dropdown or other
+ *    mechanism to reveal hidden children. The width of this element is always
+ *    included when determining which children will fit or not. Usage of this ref
+ *    is optional.
+ */
+export default function useIndexOfLastVisibleChild() {
+  const containerElementRef = useRef(null);
+  const overflowElementRef = useRef(null);
+  const containingRectRef = useRef({});
+  const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);
+  const windowSize = useWindowSize();
+
+  useLayoutEffect(() => {
+    const containingRect = containerElementRef.current.getBoundingClientRect();
+
+    // No-op if the width is unchanged.
+    // (Assumes tabs themselves don't change count or width).
+    if (!containingRect.width === containingRectRef.current.width) {
+      return;
+    }
+    // Update for future comparison
+    containingRectRef.current = containingRect;
+
+    // Get array of child nodes from NodeList form
+    const childNodesArr = Array.prototype.slice.call(containerElementRef.current.children);
+    const { nextIndexOfLastVisibleChild } = childNodesArr
+      // filter out the overflow element
+      .filter(childNode => childNode !== overflowElementRef.current)
+      // sum the widths to find the last visible element's index
+      .reduce((acc, childNode, index) => {
+        // use floor to prevent rounding errors
+        acc.sumWidth += Math.floor(childNode.getBoundingClientRect().width);
+        if (acc.sumWidth <= containingRect.width) {
+          acc.nextIndexOfLastVisibleChild = index;
+        }
+        return acc;
+      }, {
+        // Include the overflow element's width to begin with. Doing this means
+        // sometimes we'll show a dropdown with one item in it when it would fit,
+        // but allowing this case dramatically simplifies the calculations we need
+        // to do above.
+        sumWidth: overflowElementRef.current ? overflowElementRef.current.getBoundingClientRect().width : 0,
+        nextIndexOfLastVisibleChild: -1,
+      });
+
+    setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
+  }, [windowSize, containerElementRef.current]);
+
+  return [indexOfLastVisibleChild, containerElementRef, invisibleStyle, overflowElementRef];
+}

src/components/PostPreviewPanel.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Icon, IconButton } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
+
+import messages from '../discussions/posts/post-editor/messages';
+import HTMLLoader from './HTMLLoader';
+
+const PostPreviewPanel = ({
+  htmlNode, intl, isPost, editExisting,
+}) => {
+  const [showPreviewPane, setShowPreviewPane] = useState(false);
+
+  return (
+    <>
+      {showPreviewPane && (
+        <div
+          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)}
+            alt={intl.formatMessage(messages.actionsAlt)}
+            src={Close}
+            iconAs={Icon}
+            size="inline"
+            className="float-right p-3"
+            iconClassNames="icon-size"
+            data-testid="hide-preview-button"
+          />
+          <HTMLLoader
+            htmlNode={htmlNode}
+            cssClassName="text-primary"
+            componentId="post-preview"
+            testId="post-preview"
+            delay={500}
+          />
+        </div>
+      )}
+      <div className="d-flex justify-content-end">
+        {!showPreviewPane && (
+          <Button
+            variant="link"
+            size="sm"
+            onClick={() => setShowPreviewPane(true)}
+            className={`text-primary-500 font-style p-0 ${editExisting && 'mb-4.5'}`}
+            style={{ lineHeight: '26px' }}
+            data-testid="show-preview-button"
+          >
+            {intl.formatMessage(messages.showPreviewButton)}
+          </Button>
+        )}
+      </div>
+    </>
+  );
+};
+
+PostPreviewPanel.propTypes = {
+  intl: intlShape.isRequired,
+  htmlNode: PropTypes.node.isRequired,
+  isPost: PropTypes.bool,
+  editExisting: PropTypes.bool,
+};
+
+PostPreviewPanel.defaultProps = {
+  isPost: false,
+  editExisting: false,
+};
+
+export default injectIntl(PostPreviewPanel);

src/components/ScrollThreshold.jsx

@@ -1,41 +0,0 @@
-import React, {
-  useEffect,
-  useRef,
-} from 'react';
-import PropTypes from 'prop-types';
-
-function ScrollThreshold({ onScroll }) {
-  const elementRef = useRef(null);
-
-  useEffect(() => {
-    if (!elementRef.current) {
-      return undefined;
-    }
-
-    // create the observer
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          onScroll();
-        }
-      },
-    );
-
-    observer.observe(elementRef.current);
-
-    // cleanup callback
-    return () => {
-      observer.disconnect();
-    };
-  }, [elementRef]);
-
-  return (
-    <div ref={elementRef} />
-  );
-}
-
-ScrollThreshold.propTypes = {
-  onScroll: PropTypes.func.isRequired,
-};
-
-export default ScrollThreshold;

src/components/Search.jsx

@@ -0,0 +1,88 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import camelCase from 'lodash/camelCase';
+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 '../discussions/common/context';
+import { setUsernameSearch } from '../discussions/learners/data';
+import { setSearchQuery } from '../discussions/posts/data';
+import postsMessages from '../discussions/posts/post-actions-bar/messages';
+import { setFilter as setTopicFilter } from '../discussions/topics/data/slices';
+
+const Search = ({ intl }) => {
+  const [previousSearchValue, setPreviousSearchValue] = useState('');
+  const dispatch = useDispatch();
+  const { page } = useContext(DiscussionContext);
+  const postSearch = useSelector(({ threads }) => threads.filters.search);
+  const topicSearch = useSelector(({ topics }) => topics.filter);
+  const learnerSearch = useSelector(({ learners }) => learners.usernameSearch);
+  const isPostSearch = ['posts', 'my-posts'].includes(page);
+  const isTopicSearch = 'topics'.includes(page);
+  let searchValue = '';
+  let currentValue = '';
+  if (isPostSearch) {
+    currentValue = postSearch;
+  } else if (isTopicSearch) {
+    currentValue = topicSearch;
+  } else {
+    currentValue = learnerSearch;
+  }
+
+  const onClear = () => {
+    dispatch(setSearchQuery(''));
+    dispatch(setTopicFilter(''));
+    dispatch(setUsernameSearch(''));
+    setPreviousSearchValue('');
+  };
+
+  const onChange = (query) => {
+    searchValue = query;
+  };
+
+  const onSubmit = (query) => {
+    if (query === '' || query === previousSearchValue) {
+      return;
+    }
+    if (isPostSearch) {
+      dispatch(setSearchQuery(query));
+    } else if (page === 'topics') {
+      dispatch(setTopicFilter(query));
+    } else if (page === 'learners') {
+      dispatch(setUsernameSearch(query));
+    }
+    setPreviousSearchValue(query);
+  };
+
+  useEffect(() => onClear(), [page]);
+  return (
+    <SearchField.Advanced
+      onClear={onClear}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      value={currentValue}
+    >
+      <SearchField.Label />
+      <SearchField.Input
+        style={{ paddingRight: '1rem' }}
+        placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
+      />
+      <span className="mt-auto mb-auto mr-2.5 pointer-cursor-hover">
+        <Icon
+          src={SearchIcon}
+          onClick={() => onSubmit(searchValue)}
+          data-testid="search-icon"
+        />
+      </span>
+    </SearchField.Advanced>
+  );
+};
+
+Search.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Search);

src/components/SearchInfo.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Icon } from '@edx/paragon';
+import { Search } from '@edx/paragon/icons';
+
+import { RequestStatus } from '../data/constants';
+import messages from '../discussions/posts/post-actions-bar/messages';
+
+const SearchInfo = ({
+  intl,
+  count,
+  text,
+  loadingStatus,
+  onClear,
+  textSearchRewrite,
+}) => (
+  <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" 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-3" onClick={onClear} style={{ minWidth: '26%' }}>
+      {intl.formatMessage(messages.clearSearch)}
+    </Button>
+  </div>
+);
+
+SearchInfo.propTypes = {
+  intl: intlShape.isRequired,
+  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);

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,6 +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';
@@ -17,12 +22,17 @@ 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';
 import 'tinymce/plugins/imagetools';
 import 'tinymce/plugins/link';
 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';
@@ -31,6 +41,7 @@ import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.c
 // eslint-disable-next-line import/no-unresolved
 import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';
 
+/* istanbul ignore next */
 const setup = (editor) => {
   editor.ui.registry.addButton('openedx_code', {
     icon: 'sourcecode',
@@ -46,17 +57,29 @@ const setup = (editor) => {
   });
 };
 
-export default function TinyMCEEditor(props) {
+/* istanbul ignore next */
+const TinyMCEEditor = (props) => {
   // note that skin and content_css is disabled to avoid the normal
   // 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();
+      const imageSize = blobInfo.blob().size / 1024;
+      if (imageSize > MAX_UPLOAD_FILE_SIZE) {
+        failure(`Images size should not exceed ${MAX_UPLOAD_FILE_SIZE} KB`);
+        return;
+      }
       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 });
@@ -72,32 +95,59 @@ 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: true,
-        plugins: 'autosave codesample link lists image imagetools code',
-        toolbar: 'formatselect | bold italic underline'
-          + ' | link blockquote openedx_code image'
-          + ' | bullist numlist outdent indent'
-          + ' | removeformat'
-          + ' | openedx_html'
-          + ' | undo redo',
-        content_css: false,
-        content_style: contentStyle,
-        body_class: 'm-2',
-        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>
+    </>
+
   );
-}
+};
+
+export default TinyMCEEditor;

src/components/TopicStats.jsx

@@ -0,0 +1,111 @@
+/* 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';
+
+const 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
+        placement="right"
+        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
+        placement="right"
+        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
+          placement="right"
+          overlay={(
+            <Tooltip>
+              <div className="d-flex flex-column align-items-start">
+                {Boolean(activeFlags) && (
+                  <span>
+                    {intl.formatMessage(messages.reported, { reported: activeFlags })}
+                  </span>
+                )}
+                {Boolean(inactiveFlags) && (
+                  <span>
+                    {intl.formatMessage(messages.previouslyReported, { previouslyReported: inactiveFlags })}
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+          )}
+        >
+          <div className="d-flex align-items-center">
+            <Icon src={Report} className="icon-size mr-2 text-danger" />
+            {activeFlags}{Boolean(inactiveFlags) && `/${inactiveFlags}`}
+          </div>
+        </OverlayTrigger>
+      )}
+    </div>
+  );
+};
+
+TopicStats.propTypes = {
+  threadCounts: PropTypes.shape({
+    discussions: PropTypes.number,
+    questions: PropTypes.number,
+  }),
+  activeFlags: PropTypes.number,
+  inactiveFlags: PropTypes.number,
+  intl: intlShape.isRequired,
+};
+
+TopicStats.defaultProps = {
+  threadCounts: {
+    discussions: 0,
+    questions: 0,
+  },
+  activeFlags: null,
+  inactiveFlags: null,
+};
+
+export default injectIntl(TopicStats);

src/components/icons/InsertLink.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const InsertLink = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default InsertLink;

src/components/icons/Issue.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Issue = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="28"
+    height="28"
+    fill="none"
+    viewBox="0 0 28 28"
+  >
+    <path
+      fill="#F2F0EF"
+      d="M0 14C0 6.268 6.268 0 14 0s14 6.268 14 14-6.268 14-14 14S0 21.732 0 14z"
+    />
+    <path
+      fill="#2D494E"
+      d="M14 2.333C7.56 2.333 2.333 7.56 2.333 14c0 6.44 5.227 11.667 11.667 11.667 6.44 0 11.667-5.227 11.667-11.667C25.667 7.56 20.44 2.334 14 2.334z"
+    />
+    <path
+      fill="#fff"
+      d="M12.833 22.167h2.334v-2.334h-2.334v2.334zM16.532 14.198l1.05-1.073a3.713 3.713 0 001.085-2.625A4.665 4.665 0 0014 5.833 4.665 4.665 0 009.333 10.5h2.334A2.34 2.34 0 0114 8.167a2.34 2.34 0 012.333 2.333c0 .642-.256 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.334c0-1.75.525-2.45 1.365-3.302z"
+    />
+  </svg>
+);
+
+export default Issue;

src/components/icons/People.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const People = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="#707070"
+      d="M11.072 7.332a1.992 1.992 0 001.993-2 1.997 1.997 0 10-3.993 0c0 1.107.893 2 2 2zm-5.334 0a1.992 1.992 0 001.994-2 1.997 1.997 0 10-3.993 0c0 1.107.893 2 2 2zm0 1.333c-1.553 0-4.666.78-4.666 2.334v1.666h9.333V11c0-1.554-3.113-2.334-4.667-2.334zm5.334 0c-.194 0-.414.014-.647.034.773.56 1.313 1.313 1.313 2.3v1.666h4V11c0-1.554-3.113-2.334-4.666-2.334z"
+    />
+  </svg>
+);
+
+export default People;

src/components/icons/PushPin.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const PushPin = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M16 9V4H18V2H6V4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default PushPin;

src/components/icons/Question.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Question = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="28"
+    height="28"
+    fill="none"
+    viewBox="0 0 28 28"
+  >
+    <path
+      fill="#fff"
+      d="M0 14.001c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14z"
+    />
+    <path
+      fill="#2D494E"
+      d="M14 2.334c-6.44 0-11.667 5.227-11.667 11.667 0 6.44 5.227 11.667 11.667 11.667 6.44 0 11.666-5.227 11.666-11.667 0-6.44-5.226-11.667-11.666-11.667z"
+    />
+    <path
+      fill="#fff"
+      d="M12.833 22.168h2.333v-2.334h-2.333v2.334zM16.531 14.2l1.05-1.074a3.712 3.712 0 001.085-2.625A4.665 4.665 0 0014 5.834a4.665 4.665 0 00-4.667 4.667h2.333A2.34 2.34 0 0114 8.168a2.34 2.34 0 012.333 2.333c0 .642-.257 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.333c0-1.75.525-2.45 1.365-3.302z"
+    />
+  </svg>
+);
+
+export default Question;

src/components/icons/QuestionAnswer.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const QuestionAnswer = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="20"
+    fill="none"
+    viewBox="0 0 21 20"
+  >
+    <path
+      fill="currentColor"
+      d="M18.737 5h-2.5v7.5H5.404V15h10l3.333 3.333V5zm-4.166 5.833V1.667H2.07v12.5l3.333-3.334h9.166z"
+    />
+  </svg>
+);
+
+export default QuestionAnswer;

src/components/icons/QuestionAnswerOutline.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const QuestionAnswerOutline = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="none"
+    viewBox="0 0 20 20"
+  >
+    <path
+      fill="currentColor"
+      d="M12.6 3.267v6.067H4.08l-.512.512-.502.502v-7.08H12.6zm.867-1.733H2.198a.87.87 0 00-.867.867v12.134L4.8 11.068h8.668a.87.87 0 00.866-.867v-7.8a.87.87 0 00-.867-.867zM17.8 5h-1.733v7.8H4.799v1.734c0 .476.39.867.867.867H15.2l3.467 3.466v-13A.87.87 0 0017.8 5z"
+    />
+  </svg>
+);
+
+export default QuestionAnswerOutline;

src/components/icons/StarFilled.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const StarFilled = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="20"
+    fill="none"
+    viewBox="0 0 21 20"
+  >
+    <path
+      fill="currentColor"
+      d="M10.404 14.392l5.15 3.108-1.367-5.858 4.55-3.942-5.991-.508-2.342-5.525-2.342 5.525L2.07 7.7l4.55 3.942L5.254 17.5l5.15-3.108z"
+    />
+  </svg>
+);
+
+export default StarFilled;

src/components/icons/StarOutline.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const StarOutline = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="none"
+    viewBox="0 0 20 20"
+  >
+    <path
+      fill="currentColor"
+      d="M18.737 7.7l-5.991-.517-2.342-5.516-2.342 5.525L2.07 7.7l4.55 3.942L5.254 17.5l5.15-3.108 5.15 3.108-1.359-5.858L18.737 7.7zm-8.333 5.133L7.27 14.725l.834-3.567-2.767-2.4 3.65-.316 1.417-3.359 1.425 3.367 3.65.317-2.767 2.4.834 3.566-3.142-1.9z"
+    />
+  </svg>
+);
+
+export default StarOutline;

src/components/icons/ThumbUpFilled.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const ThumbUpFilled = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="20"
+    fill="none"
+    viewBox="0 0 21 20"
+  >
+    <path
+      fill="currentColor"
+      d="M12.212.833L6.237 6.817V17.5h10.258l3.075-7.167V6.667h-6.925l.934-4.484-1.367-1.35zM1.237 7.5H4.57v10H1.237v-10z"
+    />
+  </svg>
+);
+
+export default ThumbUpFilled;

src/components/icons/ThumbUpOutline.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ThumbUpOutline = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="none"
+    viewBox="0 0 20 20"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M19.57 6.667v3.666L16.495 17.5H6.238V6.817L12.212.833l1.367 1.35-.934 4.484h6.925zm-11.666.841v8.325h7.492l2.508-5.841V8.333h-7.309l.925-4.45-3.616 3.625z"
+      clipRule="evenodd"
+    />
+    <path fill="currentColor" d="M4.57 17.5H1.237v-10H4.57v10z" />
+  </svg>
+);
+
+export default ThumbUpOutline;

src/components/icons/index.js

@@ -0,0 +1,11 @@
+export { default as InsertLink } from './InsertLink';
+export { default as Issue } from './Issue';
+export { default as People } from './People';
+export { default as PushPin } from './PushPin';
+export { default as Question } from './Question';
+export { default as QuestionAnswer } from './QuestionAnswer';
+export { default as QuestionAnswerOutline } from './QuestionAnswerOutline';
+export { default as StarFilled } from './StarFilled';
+export { default as StarOutline } from './StarOutline';
+export { default as ThumbUpFilled } from './ThumbUpFilled';
+export { default as ThumbUpOutline } from './ThumbUpOutline';

src/components/index.js

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

src/data/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;
 }

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.
@@ -45,6 +45,7 @@ export const ContentActions = {
   PIN: 'pinned',
   ENDORSE: 'endorsed',
   CLOSE: 'closed',
+  COPY_LINK: 'copy_link',
   REPORT: 'abuse_flagged',
   DELETE: 'delete',
   FOLLOWING: 'following',
@@ -62,6 +63,7 @@ export const ContentActions = {
  * @enum {string}
  */
 export const RequestStatus = {
+  IDLE: 'idle',
   IN_PROGRESS: 'in-progress',
   SUCCESSFUL: 'successful',
   FAILED: 'failed',
@@ -73,9 +75,9 @@ export const RequestStatus = {
  * @readonly
  * @enum {string}
  */
-export const AvatarBorderAndLabelColors = {
-  Staff: 'warning-700',
-  'Community TA': 'success-700',
+export const AvatarOutlineAndLabelColors = {
+  Staff: 'staff-color',
+  'Community TA': 'TA-color',
 };
 
 /**
@@ -89,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
@@ -110,6 +102,7 @@ export const PostsStatusFilter = {
   FOLLOWING: 'statusFollowing',
   REPORTED: 'statusReported',
   UNANSWERED: 'statusUnanswered',
+  UNRESPONDED: 'statusUnresponded',
 };
 
 /**
@@ -132,17 +125,7 @@ export const TopicOrdering = {
 export const LearnersOrdering = {
   BY_FLAG: 'flagged',
   BY_LAST_ACTIVITY: 'activity',
-};
-
-/**
- * Enum for Learner content tabs
- * @readonly
- * @enum {string}
- */
-export const LearnerTabs = {
-  POSTS: 'posts',
-  COMMENTS: 'comments',
-  RESPONSES: 'responses',
+  BY_RECENCY: 'recency',
 };
 
 /**
@@ -162,12 +145,7 @@ export const Routes = {
   },
   LEARNERS: {
     PATH: `${BASE_PATH}/learners`,
-    LEARNER: `${BASE_PATH}/learners/:learnerUsername`,
-    TABS: {
-      posts: `${BASE_PATH}/learners/:learnerUsername/${LearnerTabs.POSTS}`,
-      responses: `${BASE_PATH}/learners/:learnerUsername/${LearnerTabs.RESPONSES}`,
-      comments: `${BASE_PATH}/learners/:learnerUsername/${LearnerTabs.COMMENTS}`,
-    },
+    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts(/:postId)?`,
   },
   POSTS: {
     PATH: `${BASE_PATH}/topics/:topicId`,
@@ -183,6 +161,7 @@ export const Routes = {
       `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
       `${BASE_PATH}/posts/:postId/edit`,
       `${BASE_PATH}/my-posts/:postId/edit`,
+      `${BASE_PATH}/learners/:learnerUsername/posts/:postId/edit`,
     ],
   },
   COMMENTS: {
@@ -191,6 +170,7 @@ export const Routes = {
       `${BASE_PATH}/topics/:topicId/posts/:postId`,
       `${BASE_PATH}/posts/:postId`,
       `${BASE_PATH}/my-posts/:postId`,
+      `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
     ],
     PAGE: `${BASE_PATH}/:page`,
     PAGES: {
@@ -198,6 +178,7 @@ export const Routes = {
       topics: `${BASE_PATH}/topics/:topicId/posts/:postId`,
       posts: `${BASE_PATH}/posts/:postId`,
       'my-posts': `${BASE_PATH}/my-posts/:postId`,
+      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
     },
   },
   TOPICS: {
@@ -210,13 +191,25 @@ 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`,
   },
 };
 
+export const PostsPages = {
+  category: `${BASE_PATH}/category/:category/posts`,
+  topics: `${BASE_PATH}/topics/:topicId/posts`,
+  posts: `${BASE_PATH}/posts`,
+  'my-posts': `${BASE_PATH}/my-posts`,
+  learners: `${BASE_PATH}/learners/:learnerUsername/posts`,
+};
+
 export const ALL_ROUTES = []
   .concat([Routes.TOPICS.CATEGORY_POST, Routes.TOPICS.CATEGORY])
   .concat(Routes.COMMENTS.PATH)
   .concat(Routes.TOPICS.PATH)
   .concat([Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS])
-  .concat([Routes.LEARNERS.LEARNER, Routes.LEARNERS.PATH])
+  .concat([Routes.LEARNERS.POSTS, Routes.LEARNERS.PATH])
   .concat([Routes.DISCUSSIONS.PATH]);
+
+export const MAX_UPLOAD_FILE_SIZE = 1024;

src/data/redux.test.js

@@ -7,9 +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;
@@ -35,7 +37,7 @@ describe('Course blocks data layer tests', () => {
     axiosMock.reset();
   });
 
-  test('successfully processes block data', async () => {
+  it('successfully processes block data', async () => {
     axiosMock.onGet(blocksAPIURL)
       .reply(200, getBlocksAPIResponse());
 
@@ -77,4 +79,29 @@ describe('Course blocks data layer tests', () => {
         },
       );
   });
+
+  it('handles network error', async () => {
+    axiosMock.onGet(blocksAPIURL).networkError();
+
+    await executeThunk(fetchCourseBlocks(courseId, 'test-user'), store.dispatch, store.getState);
+
+    expect(store.getState().blocks.status)
+      .toBe(RequestStatus.FAILED);
+  });
+  it('handles network timeout', async () => {
+    axiosMock.onGet(blocksAPIURL).timeout();
+
+    await executeThunk(fetchCourseBlocks(courseId, 'test-user'), store.dispatch, store.getState);
+
+    expect(store.getState().blocks.status)
+      .toBe(RequestStatus.FAILED);
+  });
+  it('handles access denied', async () => {
+    axiosMock.onGet(blocksAPIURL).reply(403, {});
+
+    await executeThunk(fetchCourseBlocks(courseId, 'test-user'), store.dispatch, store.getState);
+
+    expect(store.getState().blocks.status)
+      .toBe(RequestStatus.DENIED);
+  });
 });

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,10 +38,10 @@ 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 || [],
+  (topics, ids) => ids.map(id => topics[id]),
 );
 
 export const selectTopicIds = () => (state) => state.blocks.chapters;

src/data/thunks.js

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

src/discussions/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 });

src/discussions/comments/CommentsView.jsx

@@ -1,162 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router';
-
-import { ensureConfig, getConfig } from '@edx/frontend-platform';
-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 { markThreadAsRead } from '../posts/data/thunks';
-import { selectThreadComments, selectThreadCurrentPage, selectThreadHasMorePages } from './data/selectors';
-import { fetchThreadComments } from './data/thunks';
-import { Comment, ResponseEditor } from './comment';
-import messages from './messages';
-
-ensureConfig(['POST_MARK_AS_READ_DELAY'], 'Comment thread view');
-
-function usePost(postId) {
-  const dispatch = useDispatch();
-  const thread = useSelector(selectThread(postId));
-  useEffect(() => {
-    const markReadTimer = setTimeout(() => {
-      if (thread && !thread.read) {
-        dispatch(markThreadAsRead(postId));
-      }
-    }, getConfig().POST_MARK_AS_READ_DELAY);
-    return () => {
-      clearTimeout(markReadTimer);
-    };
-  }, [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,
-}) {
-  const {
-    comments,
-    hasMorePages,
-    isLoading,
-    handleLoadMoreResponses,
-  } = usePostComments(postId, endorsed);
-  return (
-    <div className="m-3">
-      <div className="my-3">
-        {endorsed === EndorsementStatus.ENDORSED
-          ? intl.formatMessage(messages.endorsedResponseCount, { num: comments.length })
-          : intl.formatMessage(messages.responseCount, { num: comments.length })}
-      </div>
-      {comments.map(comment => (
-        <Comment comment={comment} key={comment.id} postType={postType} />
-      ))}
-
-      {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,
-  intl: intlShape.isRequired,
-  endorsed: PropTypes.oneOf([
-    EndorsementStatus.ENDORSED, EndorsementStatus.UNENDORSED, EndorsementStatus.DISCUSSION,
-  ]).isRequired,
-};
-
-function CommentsView({ intl }) {
-  const { postId } = useParams();
-  const thread = usePost(postId);
-  if (!thread) {
-    return (
-      <Spinner animation="border" variant="primary" data-testid="loading-indicator" />
-    );
-  }
-  return (
-    <>
-      <div className="discussion-comments d-flex flex-column mt-3 mb-0 mx-3 p-4 card">
-        <Post post={thread} />
-        <ResponseEditor postId={postId} />
-      </div>
-      {thread.type === ThreadType.DISCUSSION
-        && (
-        <DiscussionCommentsView
-          postId={postId}
-          intl={intl}
-          postType={thread.type}
-          endorsed={EndorsementStatus.DISCUSSION}
-        />
-        )}
-      {thread.type === ThreadType.QUESTION && (
-        <>
-          <DiscussionCommentsView
-            postId={postId}
-            intl={intl}
-            postType={thread.type}
-            endorsed={EndorsementStatus.ENDORSED}
-          />
-          <DiscussionCommentsView
-            postId={postId}
-            intl={intl}
-            postType={thread.type}
-            endorsed={EndorsementStatus.UNENDORSED}
-          />
-        </>
-      )}
-    </>
-  );
-}
-
-CommentsView.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CommentsView);

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useDispatch } from 'react-redux';
-import * as timeago from 'timeago.js';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-import LikeButton from '../../posts/post/LikeButton';
-import { editComment } from '../data/thunks';
-
-function CommentIcons({
-  comment,
-  intl,
-}) {
-  const dispatch = useDispatch();
-  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 mt-2" title={comment.createdAt}>
-        {timeago.format(comment.createdAt, intl.locale)}
-      </div>
-    </div>
-  );
-}
-
-CommentIcons.propTypes = {
-  comment: PropTypes.shape({
-    id: PropTypes.string,
-    voteCount: PropTypes.number,
-    following: PropTypes.bool,
-    voted: PropTypes.bool,
-    createdAt: PropTypes.string,
-  }).isRequired,
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CommentIcons);

src/discussions/comments/comment/Comment.jsx

@@ -1,141 +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 { ContentActions } from '../../../data/constants';
-import { AlertBanner, DeleteConfirmation } from '../../common';
-import { fetchThread } from '../../posts/data/thunks';
-import CommentIcons from '../comment-icons/CommentIcons';
-import { selectCommentCurrentPage, selectCommentHasMorePages, selectCommentResponses } from '../data/selectors';
-import { editComment, fetchCommentResponses, removeComment } from '../data/thunks';
-import messages from '../messages';
-import CommentEditor from './CommentEditor';
-import CommentHeader from './CommentHeader';
-import { commentShape } from './proptypes';
-import Reply from './Reply';
-
-function Comment({
-  postType,
-  comment,
-  showFullThread = true,
-  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));
-  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 }));
-      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 }))
-  );
-  const commentClasses = classNames('d-flex flex-column card', { 'my-3': showFullThread });
-
-  return (
-    <div className={commentClasses} data-testid={`comment-${comment.id}`}>
-      <DeleteConfirmation
-        isOpen={isDeleting}
-        title={intl.formatMessage(messages.deleteResponseTitle)}
-        description={intl.formatMessage(messages.deleteResponseDescription)}
-        onClose={hideDeleteConfirmation}
-        onDelete={() => {
-          dispatch(removeComment(comment.id));
-          hideDeleteConfirmation();
-        }}
-      />
-      <AlertBanner postType={postType} content={comment} />
-      <div className="d-flex flex-column p-4">
-        <CommentHeader comment={comment} actionHandlers={actionHandlers} postType={postType} />
-        {isEditing
-          ? (
-            <CommentEditor comment={comment} onCloseEditor={() => setEditing(false)} />
-          )
-          // eslint-disable-next-line react/no-danger
-          : <div className="comment-body px-2" dangerouslySetInnerHTML={{ __html: comment.renderedBody }} />}
-        <CommentIcons
-          comment={comment}
-          following={comment.following}
-          onLike={() => dispatch(editComment(comment.id, { voted: !comment.voted }))}
-          createdAt={comment.createdAt}
-        />
-        <div className="d-flex my-2 flex-column">
-          {/* 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="my-4"
-            data-testid="load-more-comments-responses"
-          >
-            {intl.formatMessage(messages.loadMoreResponses)}
-          </Button>
-        )}
-        {!isNested && showFullThread
-          && (
-            isReplying
-              ? (
-                <CommentEditor
-                  comment={{
-                    threadId: comment.threadId,
-                    parentId: comment.id,
-                  }}
-                  edit={false}
-                  onCloseEditor={() => setReplying(false)}
-                />
-              )
-              : (
-                <Button className="d-flex flex-grow " variant="outline-secondary" onClick={() => setReplying(true)}>
-                  {intl.formatMessage(messages.addComment)}
-                </Button>
-              )
-          )}
-      </div>
-    </div>
-  );
-}
-
-Comment.propTypes = {
-  postType: PropTypes.oneOf(['discussion', 'question']).isRequired,
-  comment: commentShape.isRequired,
-  showFullThread: PropTypes.bool,
-  intl: intlShape.isRequired,
-};
-
-Comment.defaultProps = {
-  showFullThread: true,
-};
-
-export default injectIntl(Comment);

src/discussions/comments/comment/CommentHeader.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-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 { AvatarBorderAndLabelColors, ThreadType } from '../../../data/constants';
-import { AuthorLabel } from '../../common';
-import ActionsDropdown from '../../common/ActionsDropdown';
-import { selectAuthorAvatars } from '../../posts/data/selectors';
-import { commentShape } from './proptypes';
-
-function CommentHeader({
-  comment,
-  postType,
-  actionHandlers,
-}) {
-  const authorAvatars = useSelector(selectAuthorAvatars(comment.author));
-  const colorClass = AvatarBorderAndLabelColors[comment.authorLabel];
-  return (
-    <div className="d-flex flex-row justify-content-between">
-      <div className="align-items-center d-flex flex-row">
-        <Avatar
-          className={`m-2 ${colorClass && `border-${colorClass}`}`}
-          style={{ borderWidth: '2px' }}
-          alt={comment.author}
-          src={authorAvatars?.imageUrlSmall}
-        />
-        <AuthorLabel author={comment.author} authorLabel={comment.authorLabel} labelColor={colorClass && `text-${colorClass}`} />
-      </div>
-      <div className="d-flex align-items-center">
-        {comment.endorsed && (postType === 'question'
-          ? <Icon src={CheckCircle} className="text-success" data-testid="check-icon" />
-          : <Icon src={Verified} data-testid="verified-icon" />)}
-        <ActionsDropdown
-          commentOrPost={{
-            ...comment,
-            postType,
-          }}
-          actionHandlers={actionHandlers}
-        />
-      </div>
-    </div>
-  );
-}
-
-CommentHeader.propTypes = {
-  comment: commentShape.isRequired,
-  actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
-  postType: PropTypes.oneOf([ThreadType.QUESTION, ThreadType.DISCUSSION]).isRequired,
-};
-
-export default injectIntl(CommentHeader);

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

@@ -1,52 +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 CommentHeader from './CommentHeader';
-
-let store;
-
-function renderComponent(comment, postType, actionHandlers) {
-  return render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <CommentHeader comment={comment} postType={postType} actionHandlers={actionHandlers} />
-      </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);
-  });
-});

src/discussions/comments/comment/Reply.jsx

@@ -1,90 +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 { AvatarBorderAndLabelColors, ContentActions } from '../../../data/constants';
-import {
-  ActionsDropdown, AlertBanner, AuthorLabel, DeleteConfirmation,
-} from '../../common';
-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,
-}) {
-  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.DELETE]: showDeleteConfirmation,
-    [ContentActions.REPORT]: () => dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged })),
-  };
-  const authorAvatars = useSelector(selectAuthorAvatars(reply.author));
-  const colorClass = AvatarBorderAndLabelColors[reply.authorLabel];
-  return (
-    <div className="d-flex my-2 flex-column" data-testid={`reply-${reply.id}`}>
-      <DeleteConfirmation
-        isOpen={isDeleting}
-        title={intl.formatMessage(messages.deleteCommentTitle)}
-        description={intl.formatMessage(messages.deleteCommentDescription)}
-        onClose={hideDeleteConfirmation}
-        onDelete={() => {
-          dispatch(removeComment(reply.id));
-          hideDeleteConfirmation();
-        }}
-      />
-      <div className="d-flex flex-fill ml-6">
-        <AlertBanner postType={null} content={reply} intl={intl} />
-      </div>
-      <div className="d-flex">
-
-        <div className="d-flex m-3">
-          <Avatar
-            className={`m-2 ${colorClass && `border-${colorClass}`}`}
-            style={{ borderWidth: '2px' }}
-            alt={reply.author}
-            src={authorAvatars?.imageUrlSmall}
-          />
-        </div>
-        <div className="rounded bg-light-300 px-4 py-2 flex-fill">
-          <div className="d-flex flex-row justify-content-between align-items-center">
-            <AuthorLabel author={reply.author} authorLabel={reply.authorLabel} labelColor={colorClass && `text-${colorClass}`} />
-            <ActionsDropdown
-              commentOrPost={{
-                ...reply,
-                postType,
-              }}
-              actionHandlers={actionHandlers}
-            />
-          </div>
-          {isEditing
-            ? <CommentEditor comment={reply} onCloseEditor={() => setEditing(false)} />
-            // eslint-disable-next-line react/no-danger
-            : <div dangerouslySetInnerHTML={{ __html: reply.renderedBody }} />}
-        </div>
-
-      </div>
-      <div className="text-gray-500 align-self-end mt-2" title={reply.createdAt}>
-        {timeago.format(reply.createdAt, intl.locale)}
-      </div>
-    </div>
-  );
-}
-Reply.propTypes = {
-  postType: PropTypes.oneOf(['discussion', 'question']).isRequired,
-  reply: commentShape.isRequired,
-  intl: intlShape.isRequired,
-};
-export default injectIntl(Reply);

src/discussions/comments/comment/ResponseEditor.jsx

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
-
-import messages from '../messages';
-import CommentEditor from './CommentEditor';
-
-function ResponseEditor({
-  postId,
-  intl,
-}) {
-  const [addingResponse, setAddingResponse] = useState(false);
-  return addingResponse
-    ? (
-      <CommentEditor
-        comment={{ threadId: postId }}
-        edit={false}
-        onCloseEditor={() => setAddingResponse(false)}
-      />
-    ) : (
-      <div className="actions d-flex">
-        <Button variant="primary" onClick={() => setAddingResponse(true)}>
-          {intl.formatMessage(messages.addResponse)}
-        </Button>
-      </div>
-    );
-}
-
-ResponseEditor.propTypes = {
-  postId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ResponseEditor);

src/discussions/comments/index.js

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

src/discussions/common/ActionsDropdown.jsx

@@ -1,91 +1,128 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
+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 { useActions } from '../utils';
+import { inBlackoutDateRange, useActions } from '../utils';
 
-function ActionsDropdown({
+const ActionsDropdown = ({
   intl,
   commentOrPost,
   disabled,
   actionHandlers,
-}) {
-  const [isOpen, setOpen] = useState(false);
-  const dropdownIconRef = React.useRef(null);
+  iconSize,
+  dropDownIconSize,
+}) => {
+  const buttonRef = useRef();
+  const [isOpen, open, close] = useToggle(false);
+  const [target, setTarget] = useState(null);
   const actions = useActions(commentOrPost);
-  const handleActions = (action) => {
+
+  const handleActions = useCallback((action) => {
     const actionFunction = actionHandlers[action];
     if (actionFunction) {
       actionFunction();
     } else {
       logError(`Unknown or unimplemented action ${action}`);
     }
-  };
+  }, [actionHandlers]);
+
+  const blackoutDateRange = useSelector(selectBlackoutDate);
+  // Find and remove edit action if in blackout date range.
+  if (inBlackoutDateRange(blackoutDateRange)) {
+    actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
+  }
+
+  const onClickButton = useCallback(() => {
+    setTarget(buttonRef.current);
+    open();
+  }, [open]);
+
+  const onCloseModal = useCallback(() => {
+    close();
+    setTarget(null);
+  }, [close]);
+
   return (
     <>
-      <span ref={dropdownIconRef}>
-        <IconButton
-          onClick={() => setOpen(!isOpen)}
-          alt={intl.formatMessage(messages.actionsAlt)}
-          src={MoreHoriz}
-          iconAs={Icon}
-          disabled={disabled}
-        />
-      </span>
-      <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"
+      <IconButton
+        onClick={onClickButton}
+        alt={intl.formatMessage(messages.actionsAlt)}
+        src={MoreHoriz}
+        iconAs={Icon}
+        disabled={disabled}
+        size={iconSize}
+        ref={buttonRef}
+        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimentions' : ''}
+      />
+      <div className="actions-dropdown">
+        <ModalPopup
+          onClose={onCloseModal}
+          positionRef={target}
+          isOpen={isOpen}
+          placement="bottom-end"
         >
-          {actions.map(action => (
-            <React.Fragment key={action.id}>
-              {action.action === ContentActions.DELETE
-              && <Dropdown.Divider />}
+          <div
+            className="bg-white 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 actions-dropdown-item"
+                >
+                  <Icon
+                    src={action.icon}
+                    className="icon-size-24"
+                  />
+                  <span className="font-weight-normal font-xl ml-2">
+                    {intl.formatMessage(action.label)}
+                  </span>
+                </Dropdown.Item>
+              </React.Fragment>
+            ))}
+          </div>
+        </ModalPopup>
+      </div>
     </>
   );
-}
+};
 
 ActionsDropdown.propTypes = {
   intl: intlShape.isRequired,
   commentOrPost: PropTypes.oneOfType([commentShape, postShape]).isRequired,
   disabled: PropTypes.bool,
   actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
+  iconSize: PropTypes.string,
+  dropDownIconSize: PropTypes.bool,
 };
 
 ActionsDropdown.defaultProps = {
   disabled: false,
+  iconSize: 'sm',
+  dropDownIconSize: false,
 };
 
 export default injectIntl(ActionsDropdown);

src/discussions/common/ActionsDropdown.test.jsx

@@ -9,11 +9,12 @@ import { camelCaseObject, initializeMockApp, snakeCaseObject } from '@edx/fronte
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { ContentActions } from '../../data/constants';
+import { initializeStore } from '../../store';
 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;
@@ -126,6 +127,7 @@ describe('ActionsDropdown', () => {
         roles: [],
       },
     });
+    store = initializeStore();
   });
 
   it.each(buildTestContent())('can open drop down if enabled', async (commentOrPost) => {
@@ -150,6 +152,36 @@ describe('ActionsDropdown', () => {
     await waitFor(() => expect(screen.queryByTestId('actions-dropdown-modal-popup')).not.toBeInTheDocument());
   });
 
+  it('copy link action should be visible on posts', async () => {
+    const commentOrPost = {
+      testFor: 'thread',
+      ...camelCaseObject(Factory.build('thread', { editable_fields: ['copy_link'] }, null)),
+    };
+    renderComponent(commentOrPost, { disabled: false });
+
+    const openButton = await findOpenActionsDropdownButton();
+    await act(async () => {
+      fireEvent.click(openButton);
+    });
+
+    await waitFor(() => expect(screen.queryByText('Copy link')).toBeInTheDocument());
+  });
+
+  it('copy link action should not be visible on a comment', async () => {
+    const commentOrPost = {
+      testFor: 'comments',
+      ...camelCaseObject(Factory.build('comment', {}, null)),
+    };
+    renderComponent(commentOrPost, { disabled: false });
+
+    const openButton = await findOpenActionsDropdownButton();
+    await act(async () => {
+      fireEvent.click(openButton);
+    });
+
+    await waitFor(() => expect(screen.queryByText('Copy link')).not.toBeInTheDocument());
+  });
+
   describe.each(canPerformActionTestData)('Actions', ({
     testFor, action, label, reason, ...commentOrPost
   }) => {

src/discussions/common/AlertBanner.jsx

@@ -2,99 +2,88 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { useSelector } from 'react-redux';
-import * as timeago from 'timeago.js';
 
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
-import { CheckCircle, Error, Verified } from '@edx/paragon/icons';
+import { Report } from '@edx/paragon/icons';
 
-import { ThreadType } from '../../data/constants';
-import { commentShape } from '../comments/comment/proptypes';
-import messages from '../comments/messages';
-import { selectModerationSettings, selectUserIsPrivileged } 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';
 
-function AlertBanner({
+const AlertBanner = ({
   intl,
   content,
-  postType,
-}) {
-  const isQuestion = postType === ThreadType.QUESTION;
-  const classes = isQuestion ? 'bg-success-500 text-white' : 'bg-dark-500 text-white';
-  const iconClass = isQuestion ? CheckCircle : Verified;
-  const userIsPrivileged = useSelector(selectUserIsPrivileged);
+}) => {
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+  const userIsGroupTa = useSelector(selectUserIsGroupTa);
+  const userIsGlobalStaff = useSelector(selectUserIsStaff);
   const { reasonCodesEnabled } = useSelector(selectModerationSettings);
+  const userIsContentAuthor = getAuthenticatedUser().username === content.author;
+  const canSeeReportedBanner = content?.abuseFlagged;
+  const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
+    || userIsGlobalStaff || userIsContentAuthor
+  );
+
   return (
     <>
-      {content.endorsed && (
-        <Alert
-          variant="plain"
-          className={`p-3 m-0 align-items-center shadow-none ${classes}`}
-          style={{ borderRadius: '0.375rem 0.375rem 0 0' }}
-          icon={iconClass}
-        >
-          <div className="d-flex justify-content-between">
-            <strong className="lead">{intl.formatMessage(
-              isQuestion
-                ? messages.answer
-                : messages.endorsed,
-            )}
-            </strong>
-            <span className="d-flex align-items-center mr-1">
-              <span className="mr-2">
-                {intl.formatMessage(
-                  isQuestion
-                    ? messages.answeredLabel
-                    : messages.endorsedLabel,
-                )}
-              </span>
-              <AuthorLabel author={content.endorsedBy} authorLabel={content.endorsedByLabel} />
-              {timeago.format(content.endorsedAt, intl.locale)}
-            </span>
-          </div>
-        </Alert>
-      )}
-      {content.abuseFlagged && (
-        <Alert icon={Error} variant="danger" className="p-3 m-0 shadow-none mb-1 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 && userIsPrivileged && content.lastEdit?.reason && (
-        <Alert variant="info" className="p-3 m-0 shadow-none mb-1 bg-light-200">
-          <div className="d-flex align-items-center">
-            {intl.formatMessage(messages.editedBy)}
-            <span className="ml-1 mr-3">
-              <AuthorLabel author={content.lastEdit.editorUsername} linkToProfile />
-            </span>
-            {intl.formatMessage(messages.reason)}:&nbsp;{content.lastEdit.reason}
-          </div>
-        </Alert>
-      )}
-      {reasonCodesEnabled && content.closed && (
-        <Alert variant="info" className="p-3 m-0 shadow-none mb-1 bg-light-200">
-          <div className="d-flex align-items-center">
-            {intl.formatMessage(messages.closedBy)}
-            <span className="ml-1 ">
-              <AuthorLabel author={content.closedBy} linkToProfile />
-            </span>
-            <span className="mx-1" />
-            {intl.formatMessage(messages.reason)}:&nbsp;{content.closeReason}
-          </div>
-        </Alert>
+      {reasonCodesEnabled && canSeeLastEditOrClosedAlert && (
+        <>
+          {content.lastEdit?.reason && (
+            <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 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-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 postOrComment />
+                </span>
+                <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>
+          )}
+        </>
       )}
     </>
   );
-}
+};
 
 AlertBanner.propTypes = {
   intl: intlShape.isRequired,
   content: PropTypes.oneOfType([commentShape.isRequired, postShape.isRequired]).isRequired,
-  postType: PropTypes.string,
-};
-
-AlertBanner.defaultProps = {
-  postType: null,
 };
 
 export default injectIntl(AlertBanner);

src/discussions/common/AlertBanner.test.jsx

@@ -7,10 +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;
@@ -22,15 +23,17 @@ function buildTestContent(type, buildParams) {
 
 function renderComponent(
   content,
-  postType,
 ) {
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <AlertBanner
-          content={content}
-          postType={postType}
-        />
+        <DiscussionContext.Provider
+          value={{ courseId: 'course-v1:edX+TestX+Test_Course' }}
+        >
+          <AlertBanner
+            content={content}
+          />
+        </DiscussionContext.Provider>
       </AppProvider>
     </IntlProvider>,
   );
@@ -44,27 +47,6 @@ describe.each([
     props: { abuseFlagged: true },
     expectText: [messages.abuseFlaggedMessage.defaultMessage],
   },
-  {
-    label: 'Staff endorsed comment in a question thread',
-    type: 'comment',
-    postType: ThreadType.QUESTION,
-    props: { endorsed: true, endorsedBy: 'test-user', endorsedByLabel: 'Staff' },
-    expectText: [messages.answer.defaultMessage, messages.answeredLabel.defaultMessage, 'test-user', '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'],
-  },
-  {
-    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'],
-  },
   {
     label: 'flagged thread',
     type: 'thread',
@@ -76,7 +58,7 @@ describe.each([
     label: 'edited content',
     type: 'thread',
     postType: null,
-    props: { last_edit: { reason: 'test-reason', editorUsername: 'editor-user' } },
+    props: { closed: false, last_edit: { reason: 'test-reason', editorUsername: 'editor-user' } },
     expectText: [messages.editedBy.defaultMessage, messages.reason.defaultMessage, 'editor-user', 'test-reason'],
   },
   {
@@ -87,7 +69,7 @@ describe.each([
     expectText: [messages.closedBy.defaultMessage, 'closing-user', 'test-close-reason'],
   },
 ])('AlertBanner', ({
-  label, type, postType, props, expectText,
+  label, type, props, expectText,
 }) => {
   beforeEach(async () => {
     initializeMockApp({
@@ -100,12 +82,12 @@ describe.each([
     });
     store = initializeStore({
       config: {
-        userIsPrivileged: true,
+        hasModerationPrivileges: true,
         reasonCodesEnabled: true,
       },
     });
     const content = buildTestContent(type, props);
-    renderComponent(content, postType);
+    renderComponent(content);
   });
 
   it(`should show correct banner for a ${label}`, async () => {

src/discussions/common/AuthorLabel.jsx

@@ -1,23 +1,38 @@
-import React from 'react';
+import React, { useContext } from 'react';
 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';
+import { useShowLearnersTab } from '../data/hooks';
 import messages from '../messages';
+import { discussionsPath } from '../utils';
+import { DiscussionContext } from './context';
+import timeLocale from './time-locale';
 
-function AuthorLabel({
+const AuthorLabel = ({
   intl,
   author,
   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;
     authorLabelMessage = intl.formatMessage(messages.authorLabelStaff);
@@ -26,43 +41,114 @@ function AuthorLabel({
     icon = School;
     authorLabelMessage = intl.formatMessage(messages.authorLabelTA);
   }
+
+  const isRetiredUser = author ? author.startsWith('retired__user') : false;
+  const showTextPrimary = !authorLabelMessage && !isRetiredUser && !alert;
+  const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
+
+  const showUserNameAsLink = useShowLearnersTab()
+    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
+
+  const authorName = (
+    <span
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
+        'text-gray-700': isRetiredUser,
+        'text-primary-500': !authorLabelMessage && !isRetiredUser,
+      })}
+      role="heading"
+      aria-level="2"
+    >
+      {isRetiredUser ? '[Deactivated]' : author}
+    </span>
+  );
   const labelContents = (
     <>
-      <span className="mr-1">{author}</span>
-      {icon && (
-        <Icon
-          style={{
-            width: '1rem',
-            height: '1rem',
-          }}
-          src={icon}
-        />
-      )}
-      {authorLabelMessage && (
-        <span className="mr-3 ml-1">
-          {authorLabelMessage}
+      <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"
+          />
+          {authorLabelMessage && (
+            <span
+              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>
+          )}
+        </div>
+      </OverlayTrigger>
+      {postCreatedAt && (
+        <span
+          title={postCreatedAt}
+          className={classNames('align-content-center', {
+            'text-white': alert,
+            'text-gray-500': !alert,
+          })}
+          style={{ lineHeight: '20px', fontSize: '12px', marginBottom: '-2.3px' }}
+        >
+          {timeago.format(postCreatedAt, 'time-locale')}
         </span>
       )}
     </>
   );
-  const className = classNames('d-flex align-items-center', labelColor);
-  return linkToProfile
-    ? React.createElement('a', { href: '#nowhere', className }, labelContents)
-    : React.createElement('div', { className }, labelContents);
-}
+
+  return showUserNameAsLink
+    ? (
+      <div className={className}>
+        <Link
+          data-testid="learner-posts-link"
+          id="learner-posts-link"
+          to={discussionsPath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })(location)}
+          className="text-decoration-none"
+          style={{ width: 'fit-content' }}
+        >
+          {!alert && authorName}
+        </Link>
+        {labelContents}
+      </div>
+    )
+    : <div className={className}>{authorName}{labelContents}</div>;
+};
 
 AuthorLabel.propTypes = {
-  intl: intlShape,
+  intl: intlShape.isRequired,
   author: PropTypes.string.isRequired,
   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);

src/discussions/common/AuthorLabel.test.jsx

@@ -0,0 +1,113 @@
+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 labelParentNode = authorElement.parentNode.parentNode;
+        const labelElement = labelParentNode.lastChild.lastChild;
+        const label = ['TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
+
+        if (linkToProfile) {
+          expect(labelParentNode).toHaveClass(labelColor);
+          expect(labelElement).toHaveTextContent(label);
+        } else {
+          expect(authorElement.parentNode.lastChild).not.toHaveTextContent(label, { exact: true });
+          expect(authorElement.parentNode).not.toHaveClass(labelColor, { exact: true });
+        }
+      },
+    );
+  });
+});

src/discussions/common/Confirmation.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { ActionRow, Button, ModalDialog } from '@edx/paragon';
+
+import messages from '../messages';
+
+const Confirmation = ({
+  intl,
+  isOpen,
+  title,
+  description,
+  onClose,
+  comfirmAction,
+  closeButtonVaraint,
+  confirmButtonVariant,
+  confirmButtonText,
+}) => (
+  <ModalDialog title={title} isOpen={isOpen} hasCloseButton={false} onClose={onClose} zIndex={5000}>
+    <ModalDialog.Header>
+      <ModalDialog.Title>
+        {title}
+      </ModalDialog.Title>
+    </ModalDialog.Header>
+    <ModalDialog.Body>
+      {description}
+    </ModalDialog.Body>
+    <ModalDialog.Footer>
+      <ActionRow>
+        <ModalDialog.CloseButton variant={closeButtonVaraint}>
+          {intl.formatMessage(messages.confirmationCancel)}
+        </ModalDialog.CloseButton>
+        <Button variant={confirmButtonVariant} onClick={comfirmAction}>
+          { confirmButtonText || intl.formatMessage(messages.confirmationConfirm)}
+        </Button>
+      </ActionRow>
+    </ModalDialog.Footer>
+  </ModalDialog>
+);
+
+Confirmation.propTypes = {
+  intl: intlShape.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  comfirmAction: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  closeButtonVaraint: PropTypes.string,
+  confirmButtonVariant: PropTypes.string,
+  confirmButtonText: PropTypes.string,
+};
+
+Confirmation.defaultProps = {
+  closeButtonVaraint: 'default',
+  confirmButtonVariant: 'primary',
+  confirmButtonText: '',
+};
+
+export default injectIntl(Confirmation);

src/discussions/common/DeleteConfirmation.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { ActionRow, Button, ModalDialog } from '@edx/paragon';
-
-import messages from '../messages';
-
-function DeleteConfirmation({
-  intl,
-  isOpen,
-  title,
-  description,
-  onClose,
-  onDelete,
-}) {
-  return (
-    <ModalDialog title={title} isOpen={isOpen} hasCloseButton={false} onClose={onClose}>
-      <ModalDialog.Header>
-        <ModalDialog.Title>
-          {title}
-        </ModalDialog.Title>
-      </ModalDialog.Header>
-      <ModalDialog.Body>
-        {description}
-      </ModalDialog.Body>
-      <ModalDialog.Footer>
-        <ActionRow>
-          <ModalDialog.CloseButton variant="tertiary">
-            {intl.formatMessage(messages.deleteConfirmationCancel)}
-          </ModalDialog.CloseButton>
-          <Button variant="primary" onClick={onDelete}>
-            {intl.formatMessage(messages.deleteConfirmationDelete)}
-          </Button>
-        </ActionRow>
-      </ModalDialog.Footer>
-    </ModalDialog>
-  );
-}
-
-DeleteConfirmation.propTypes = {
-  intl: intlShape.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-};
-
-export default injectIntl(DeleteConfirmation);

src/discussions/common/EndorsedAlertBanner.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import * as timeago from 'timeago.js';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Alert, Icon } from '@edx/paragon';
+import { CheckCircle, Verified } from '@edx/paragon/icons';
+
+import { ThreadType } from '../../data/constants';
+import { commentShape } from '../post-comments/comments/comment/proptypes';
+import messages from '../post-comments/messages';
+import AuthorLabel from './AuthorLabel';
+import timeLocale from './time-locale';
+
+const EndorsedAlertBanner = ({
+  intl,
+  content,
+  postType,
+}) => {
+  timeago.register('time-locale', timeLocale);
+  const isQuestion = postType === ThreadType.QUESTION;
+  const classes = isQuestion ? 'bg-success-500 text-white' : 'bg-dark-500 text-white';
+  const iconClass = isQuestion ? CheckCircle : Verified;
+
+  return (
+    content.endorsed && (
+      <Alert
+        variant="plain"
+        className={`px-2.5 mb-0 py-8px align-items-center shadow-none ${classes}`}
+        style={{ borderRadius: '0.375rem 0.375rem 0 0' }}
+      >
+        <div className="d-flex justify-content-between flex-wrap">
+          <div className="d-flex align-items-center">
+            <Icon
+              src={iconClass}
+              style={{
+                width: '21px',
+                height: '20px',
+              }}
+            />
+            <strong className="ml-2">
+              {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>
+    )
+  );
+};
+
+EndorsedAlertBanner.propTypes = {
+  intl: intlShape.isRequired,
+  content: PropTypes.oneOfType([commentShape.isRequired]).isRequired,
+  postType: PropTypes.string,
+};
+
+EndorsedAlertBanner.defaultProps = {
+  postType: null,
+};
+
+export default injectIntl(EndorsedAlertBanner);

src/discussions/common/EndorsedAlertBanner.test.jsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { Factory } from 'rosie';
+
+import { camelCaseObject, initializeMockApp, snakeCaseObject } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { ThreadType } from '../../data/constants';
+import { initializeStore } from '../../store';
+import messages from '../post-comments/messages';
+import { DiscussionContext } from './context';
+import EndorsedAlertBanner from './EndorsedAlertBanner';
+
+import '../post-comments/data/__factories__';
+import '../posts/data/__factories__';
+
+let store;
+
+function buildTestContent(type, buildParams) {
+  const buildParamsSnakeCase = snakeCaseObject(buildParams);
+  return camelCaseObject(Factory.build(type, { ...buildParamsSnakeCase }, null));
+}
+
+function renderComponent(content, postType) {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider
+          value={{ courseId: 'course-v1:edX+DemoX+Demo_Course' }}
+        >
+          <EndorsedAlertBanner
+            content={content}
+            postType={postType}
+          />
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+}
+
+describe.each([
+  {
+    label: 'Staff endorsed comment in a question thread',
+    type: 'comment',
+    postType: ThreadType.QUESTION,
+    props: { endorsed: true, endorsedBy: 'test-user', endorsedByLabel: '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, 'TA'],
+  },
+  {
+    label: 'endorsed comment in a discussion thread',
+    type: 'comment',
+    postType: ThreadType.DISCUSSION,
+    props: { endorsed: true, endorsedBy: 'test-user' },
+    expectText: [messages.endorsed.defaultMessage],
+  },
+])('EndorsedAlertBanner', ({
+  label, type, postType, props, expectText,
+}) => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore({
+      config: {
+        hasModerationPrivileges: true,
+        reasonCodesEnabled: true,
+      },
+    });
+    const content = buildTestContent(type, props);
+    renderComponent(content, postType);
+  });
+
+  it(`should show correct banner for a ${label}`, async () => {
+    expectText.forEach(message => {
+      expect(screen.queryAllByText(message, { exact: false }).length).toBeGreaterThan(0);
+    });
+  });
+});

src/discussions/common/HoverCard.jsx

@@ -0,0 +1,132 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Button, Icon, IconButton, OverlayTrigger, Tooltip,
+} 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';
+
+const HoverCard = ({
+  intl,
+  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">
+          <OverlayTrigger
+            overlay={(
+              <Tooltip id="endorsed-icon-tooltip">
+                {intl.formatMessage(endorseIcons.label)}
+              </Tooltip>
+            )}
+            trigger={['hover', 'focus']}
+          >
+            <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"
+            />
+          </OverlayTrigger>
+        </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 = {
+  intl: intlShape.isRequired,
+  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,
+  // eslint-disable-next-line react/forbid-prop-types
+  endorseIcons: PropTypes.objectOf(PropTypes.any),
+};
+
+HoverCard.defaultProps = {
+  onFollow: () => null,
+  endorseIcons: null,
+};
+
+export default injectIntl(HoverCard);

src/discussions/common/HoverCard.test.jsx

@@ -0,0 +1,188 @@
+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 = true;
+const enableInContextSidebar = 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,
+            enable_in_context_sidebar: enableInContextSidebar,
+          },
+        })
+        .reply(200, Factory.build('commentsResult', { can_delete: true }, {
+          threadId: postId,
+          page,
+          pageSize: 1,
+          count: 2,
+          endorsed,
+          childCount: page === 1 ? 2 : 0,
+        }));
+    });
+  });
+}
+
+function mockAxiosReturnPagedCommentsResponses() {
+  const parentId = 'comment-1';
+  const commentsResponsesApiUrl = `${commentsApiUrl}${parentId}/`;
+  const paramsTemplate = {
+    page: undefined,
+    page_size: undefined,
+    requested_fields: 'profile_image',
+  };
+
+  for (let page = 1; page <= 2; page++) {
+    axiosMock
+      .onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } })
+      .reply(200, Factory.build('commentsResult', null, {
+        parentId,
+        page,
+        pageSize: 1,
+        count: 2,
+      }));
+  }
+}
+
+function renderComponent(postId) {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider
+          value={{ courseId }}
+        >
+          <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
+            <DiscussionContent />
+            <Route
+              path="*"
+            />
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+  return container;
+}
+
+describe('HoverCard', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    Factory.resetAll();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(threadsApiUrl)
+      .reply(200, Factory.build('threadsResult'));
+    axiosMock.onPatch(new RegExp(`${commentsApiUrl}*`)).reply(({
+      url,
+      data,
+    }) => {
+      const commentId = url.match(/comments\/(?<id>[a-z1-9-]+)\//).groups.id;
+      const {
+        rawBody,
+      } = camelCaseObject(JSON.parse(data));
+      return [200, Factory.build('comment', {
+        id: commentId,
+        rendered_body: rawBody,
+        raw_body: rawBody,
+      })];
+    });
+    axiosMock.onPost(commentsApiUrl)
+      .reply(({ data }) => {
+        const {
+          rawBody,
+          threadId,
+        } = camelCaseObject(JSON.parse(data));
+        return [200, Factory.build(
+          'comment',
+          {
+            rendered_body: rawBody,
+            raw_body: rawBody,
+            thread_id: threadId,
+          },
+        )];
+      });
+
+    executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
+    mockAxiosReturnPagedComments();
+    mockAxiosReturnPagedCommentsResponses();
+  });
+
+  test('it should have hover card on post', async () => {
+    renderComponent(discussionPostId);
+    const post = screen.getByTestId('post-thread-1');
+    expect(within(post).getByTestId('hover-card-thread-1')).toBeInTheDocument();
+  });
+
+  test('it should have hover card on comment', async () => {
+    renderComponent(discussionPostId);
+    const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+    expect(within(comment).getByTestId('hover-card-comment-1')).toBeInTheDocument();
+  });
+
+  test('it should show add response, like, follow and actions menu for hovered post', async () => {
+    renderComponent(discussionPostId);
+    const post = screen.getByTestId('post-thread-1');
+    const view = within(post).getByTestId('hover-card-thread-1');
+    expect(within(view).queryByRole('button', { name: /Add response/i })).toBeInTheDocument();
+    expect(within(view).getByRole('button', { name: /like/i })).toBeInTheDocument();
+    expect(within(view).queryByRole('button', { name: /follow/i })).toBeInTheDocument();
+    expect(within(view).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
+  });
+
+  test('it should show add comment, Endorse, like and actions menu Buttons for hovered comment', async () => {
+    renderComponent(questionPostId);
+    const comment = await waitFor(() => screen.findByTestId('comment-comment-3'));
+    const view = within(comment).getByTestId('hover-card-comment-3');
+    expect(within(view).queryByRole('button', { name: /Add comment/i })).toBeInTheDocument();
+    expect(within(view).getByRole('button', { name: /Endorse/i })).toBeInTheDocument();
+    expect(within(view).queryByRole('button', { name: /like/i })).toBeInTheDocument();
+    expect(within(view).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
+  });
+});

src/discussions/common/context.js

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

src/discussions/common/index.js

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

src/discussions/common/time-locale.js

@@ -0,0 +1,19 @@
+// eslint-disable-next-line no-unused-vars
+export default function timeLocale(number, index, totalSec) {
+  return [
+    ['just now', 'right now'],
+    ['%ss', 'in %s seconds'],
+    ['1m', 'in 1 minute'],
+    ['%sm', 'in %s minutes'],
+    ['1h', 'in 1 hour'],
+    ['%sh', 'in %s hours'],
+    ['1d', 'in 1 day'],
+    ['%sd', 'in %s days'],
+    ['1w', 'in 1 week'],
+    ['%sw', 'in %s weeks'],
+    ['4w', 'in 1 month'],
+    [`${number * 4}w`, 'in %s months'],
+    ['1y', 'in 1 year'],
+    ['%sy', 'in %s years'],
+  ][index];
+}

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

@@ -4,6 +4,6 @@ Factory.define('config')
   .attrs({
     allow_anonymous: false,
     allow_anonymous_to_peers: false,
-    user_is_privileged: false,
+    has_moderation_privileges: false,
   })
-  .attr('user_roles', ['user_is_privileged'], (userIsPrivileged) => (userIsPrivileged ? ['Student', 'Moderator'] : ['Student']));
+  .attr('user_roles', ['has_moderation_privileges'], (hasModerationPrivileges) => (hasModerationPrivileges ? ['Student', 'Moderator'] : ['Student']));

src/discussions/data/api.js

@@ -7,17 +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/`;
+export const getDiscussionsConfigUrl = (courseId) => `${getCourseConfigApiUrl()}${courseId}/`;
 /**
  * Get discussions course config
  * @param {string} courseId
  */
 export async function getDiscussionsConfig(courseId) {
-  const url = `${courseConfigApiUrl}${courseId}/`;
-  const { data } = await getAuthenticatedHttpClient().get(url);
+  const { data } = await getAuthenticatedHttpClient().get(getDiscussionsConfigUrl(courseId));
   return data;
 }
 
@@ -26,7 +23,7 @@ export async function getDiscussionsConfig(courseId) {
  * @param {string} courseId
  */
 export async function getDiscussionsSettings(courseId) {
-  const url = `${courseConfigApiUrl}${courseId}/settings`;
+  const url = `${getDiscussionsConfigUrl(courseId)}settings`;
   const { data } = await getAuthenticatedHttpClient().get(url);
   return data;
 }

src/discussions/data/hooks.js

@@ -1,19 +1,43 @@
 /* eslint-disable import/prefer-default-export */
-import { useContext, useEffect, useRef } from 'react';
+import {
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation, useRouteMatch } from 'react-router';
 
+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, postMessageToParent } from '../utils';
-import { selectAreThreadsFiltered, selectPostThreadCount } from './selectors';
+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,
+  selectBlackoutDate,
+  selectEnableInContext,
+  selectIsCourseAdmin,
+  selectIsCourseStaff,
+  selectLearnersTabEnabled,
+  selectModerationSettings,
+  selectPostThreadCount,
+  selectUserHasModerationPrivileges,
+  selectUserIsGroupTa,
+  selectUserIsStaff,
+} from './selectors';
 import { fetchCourseConfig } from './thunks';
 
 export function useTotalTopicThreadCount() {
@@ -23,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) {
@@ -53,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));
     }
 
@@ -61,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,
@@ -74,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);
     }
@@ -85,59 +110,140 @@ export function useRedirectToThread(courseId) {
 
 export function useIsOnDesktop() {
   const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.large.minWidth;
+  return windowSize.width >= breakpoints.medium.minWidth;
 }
 
-/**
- * Given an element this attempts to get the height of the entire UI.
- *
- * @param element
- * @returns {number}
- */
-function getOuterHeight(element) {
-  // This is the height of the entire document body.
-  const bodyHeight = document.body.offsetHeight;
-  // This is the height of the container that will scroll.
-  const elementContainerHeight = element.parentNode.clientHeight;
-  // The difference between the body height and the container height is the size of the header footer etc.
-  // Add to that the element's own height and we get the size the UI should be to fit everything.
-  return bodyHeight - elementContainerHeight + element.scrollHeight;
+export function useIsOnXLDesktop() {
+  const windowSize = useWindowSize();
+  return windowSize.width >= breakpoints.extraLarge.minWidth;
 }
 
 /**
  * This hook posts a resize message to the parent window if running in an iframe
  * @param refContainer reference to the component whose size is to be measured
  */
-export function useContainerSizeForParent(refContainer) {
-  function postResizeMessage(height) {
-    postMessageToParent('plugin.resize', { height });
-  }
-
+export function useContainerSize(refContainer) {
   const location = useLocation();
-  const enabled = window.parent !== window;
+  const [height, setHeight] = useState();
 
   const resizeObserver = useRef(new ResizeObserver(() => {
     /* istanbul ignore if: ResizeObserver isn't available in the testing env */
-    if (refContainer.current) {
-      postResizeMessage(getOuterHeight(refContainer.current));
-    }
+    window.requestAnimationFrame(() => {
+      if (refContainer?.current) {
+        setHeight(refContainer?.current?.clientHeight);
+      }
+    });
   }));
 
   useEffect(() => {
-    const container = refContainer.current;
-    const observer = resizeObserver.current;
-    if (container && observer && enabled) {
+    const container = refContainer?.current;
+    const observer = resizeObserver?.current;
+    if (container && observer) {
       observer.observe(container);
-      postResizeMessage(getOuterHeight(container));
+      setHeight(container.clientHeight);
     }
 
     return () => {
-      if (container && observer && enabled) {
+      if (container && observer) {
         observer.unobserve(container);
-        // Send a message to reset the size so that navigating to another
-        // page doesn't cause the size to be retained
-        postResizeMessage(null);
       }
     };
   }, [refContainer, resizeObserver, location]);
+
+  return height;
 }
+
+export const useAlertBannerVisible = (content) => {
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+  const userIsGroupTa = useSelector(selectUserIsGroupTa);
+  const { reasonCodesEnabled } = useSelector(selectModerationSettings);
+  const userIsContentAuthor = getAuthenticatedUser().username === content.author;
+  const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsContentAuthor || userIsGroupTa);
+  const canSeeReportedBanner = content.abuseFlagged;
+
+  return (
+    (reasonCodesEnabled && canSeeLastEditOrClosedAlert && (content.lastEdit?.reason || content.closed))
+    || (content.abuseFlagged && canSeeReportedBanner)
+  );
+};
+
+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.enabled && tour.showTour && !enableInContextSidebar),
+      onDismiss: () => dispatch(updateTourShowStatus(tour.id)),
+      onEnd: () => dispatch(updateTourShowStatus(tour.id)),
+      checkpoints: tourCheckpoints(intl)[camelToConstant(tour.tourName)],
+    }
+  ));
+};
+
+export const useDebounce = (value, delay) => {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay], // Only re-call effect if value or delay changes
+  );
+  return debouncedValue;
+};

src/discussions/data/hooks.test.jsx

@@ -1,68 +1,175 @@
-import { useRef } from 'react';
-
-import { render, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
-import { Context as ResponsiveContext } from 'react-responsive';
-import { MemoryRouter } from 'react-router';
+import { Factory } from 'rosie';
 
-import { getConfig, initializeMockApp } from '@edx/frontend-platform';
+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 { useContainerSizeForParent } from './hooks';
+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;
-initializeMockApp();
+let axiosMock;
+
+const generateApiResponse = (blackouts = [], isCourseAdmin = false) => ({
+  blackouts,
+  hasModerationPrivileges: false,
+  isGroupTa: false,
+  isCourseAdmin,
+  isCourseStaff: false,
+  isUserAdmin: false,
+});
+
 describe('Hooks', () => {
-  function ComponentWithHook() {
-    const refContainer = useRef(null);
-    useContainerSizeForParent(refContainer);
-    return (
-      <div>
-        <div ref={refContainer} />
-      </div>
-    );
-  }
+  describe('useCurrentDiscussionTopic', () => {
+    const ComponentWithHook = () => {
+      const topic = useCurrentDiscussionTopic();
+      return (
+        <div>
+          {String(topic)}
+        </div>
+      );
+    };
 
-  function renderComponent() {
-    return render(
-      <IntlProvider locale="en">
-        <ResponsiveContext.Provider value={{ width: 1280 }}>
+    function renderComponent({ topicId, category }) {
+      return render(
+        <IntlProvider locale="en">
           <AppProvider store={store}>
-            <MemoryRouter initialEntries={['/']}>
+            <DiscussionContext.Provider
+              value={{
+                topicId,
+                category,
+              }}
+            >
               <ComponentWithHook />
-            </MemoryRouter>
+            </DiscussionContext.Provider>
           </AppProvider>
-        </ResponsiveContext.Provider>
-      </IntlProvider>,
-    );
-  }
+        </IntlProvider>,
+      );
+    }
 
-  let parent;
-  beforeEach(() => {
-    store = initializeStore();
-    parent = window.parent;
+    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();
+    });
   });
-  afterEach(() => {
-    window.parent = parent;
-  });
-  test('useContainerSizeForParent enabled', async () => {
-    delete window.parent;
-    window.parent = { ...window, postMessage: jest.fn() };
-    const { unmount } = renderComponent();
-    // Once for LMS and one for learning MFE
-    await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(2));
-    // Test that size is reset on unmount
-    unmount();
-    await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(4));
-    expect(window.parent.postMessage).toHaveBeenLastCalledWith(
-      { type: 'plugin.resize', payload: { height: null } },
-      getConfig().LMS_BASE_URL,
-    );
-  });
-  test('useContainerSizeForParent disabled', async () => {
-    window.parent.postMessage = jest.fn();
-    renderComponent();
-    await waitFor(() => expect(window.parent.postMessage).not.toHaveBeenCalled());
+
+  describe('useUserCanAddThreadInBlackoutDate', () => {
+    const ComponentWithHook = () => {
+      const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
+      return (
+        <div>
+          {String(userCanAddThreadInBlackoutDate)}
+        </div>
+      );
+    };
+
+    function renderComponent() {
+      return render(
+        <IntlProvider locale="en">
+          <AppProvider store={store}>
+            <ComponentWithHook />
+          </AppProvider>
+        </IntlProvider>,
+      );
+    }
+    describe('User can add Thread in blackoutdates ', () => {
+      beforeEach(() => {
+        initializeMockApp({
+          authenticatedUser: {
+            userId: 3,
+            username: 'abc123',
+            administrator: true,
+            roles: [],
+          },
+        });
+        axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+        Factory.resetAll();
+        store = initializeStore();
+      });
+
+      test('when blackoutdates are not active and Role is Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([], false));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are not active and Role is not Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([], true));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are active and Role is Learner return false', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([{
+            start: '2022-11-25T00:00:00Z',
+            end: '2050-11-25T23:59:00Z',
+          }], false));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('false')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are active and Role is not Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([
+            { start: '2022-11-25T00:00:00Z', end: '2050-11-25T23:59:00Z' }], true));
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+    });
   });
 });

src/discussions/data/selectors.js

@@ -6,14 +6,30 @@ export const selectAnonymousPostingConfig = state => ({
   allowAnonymousToPeers: state.config.allowAnonymousToPeers,
 });
 
-export const selectUserIsPrivileged = state => state.config.userIsPrivileged;
+export const selectUserHasModerationPrivileges = state => state.config.hasModerationPrivileges;
+
+export const selectUserIsStaff = state => state.config.isUserAdmin;
+
+export const selectUserIsGroupTa = state => state.config.isGroupTa;
 
 export const selectconfigLoadingStatus = state => state.config.status;
 
 export const selectLearnersTabEnabled = state => state.config.learnersTabEnabled;
 
+export const selectUserRoles = state => state.config.userRoles;
+
 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,
@@ -37,7 +53,7 @@ export function selectAreThreadsFiltered(state) {
 
 export function selectTopicThreadCount(topicId) {
   return state => {
-    const topic = state.topics.topics[topicId];
+    const topic = topicId && state.topics?.topics[topicId];
     if (!topic) {
       return 0;
     }

src/discussions/data/slices.js

@@ -11,7 +11,12 @@ const configSlice = createSlice({
     allowAnonymous: false,
     allowAnonymousToPeers: false,
     userRoles: [],
-    userIsPrivileged: false,
+    groupAtSubsection: false,
+    hasModerationPrivileges: false,
+    isGroupTa: false,
+    isCourseAdmin: false,
+    isCourseStaff: false,
+    isUserAdmin: false,
     learnersTabEnabled: false,
     settings: {
       divisionScheme: 'none',
@@ -22,6 +27,7 @@ const configSlice = createSlice({
     reasonCodesEnabled: false,
     editReasons: [],
     postCloseReasons: [],
+    enableInContext: false,
   },
   reducers: {
     fetchConfigRequest: (state) => {

src/discussions/data/thunks.js

@@ -2,6 +2,12 @@
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
+import {
+  DiscussionProvider, LearnersOrdering,
+  PostsStatusFilter,
+} from '../../data/constants';
+import { setSortedBy } from '../learners/data';
+import { setStatusFilter } from '../posts/data';
 import { getHttpErrorStatus } from '../utils';
 import { getDiscussionsConfig, getDiscussionsSettings } from './api';
 import {
@@ -16,13 +22,26 @@ import {
 export function fetchCourseConfig(courseId) {
   return async (dispatch) => {
     try {
+      let learnerSort = LearnersOrdering.BY_LAST_ACTIVITY;
+      const postsFilterStatus = PostsStatusFilter.ALL;
       dispatch(fetchConfigRequest());
+
       const config = await getDiscussionsConfig(courseId);
-      if (config.is_user_admin) {
+      if (config.has_moderation_privileges) {
         const settings = await getDiscussionsSettings(courseId);
         Object.assign(config, { settings });
       }
-      dispatch(fetchConfigSuccess(camelCaseObject(config)));
+
+      if ((config.has_moderation_privileges || config.is_group_ta)) {
+        learnerSort = LearnersOrdering.BY_FLAG;
+      }
+
+      dispatch(fetchConfigSuccess(camelCaseObject({
+        ...config,
+        enable_in_context: config.provider === DiscussionProvider.OPEN_EDX,
+      })));
+      dispatch(setSortedBy(learnerSort));
+      dispatch(setStatusFilter(postsFilterStatus));
     } catch (error) {
       if (getHttpErrorStatus(error) === 403) {
         dispatch(fetchConfigDenied());

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';
+
+const 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);

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();
+    }
+  });
+});

src/discussions/discussions-home/DiscussionContent.jsx

@@ -1,26 +1,20 @@
-import React, { useRef } from 'react';
+import React from 'react';
 
 import { useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router';
 
+import { injectIntl } from '@edx/frontend-platform/i18n';
+
 import { Routes } from '../../data/constants';
-import { CommentsView } from '../comments';
-import { useContainerSizeForParent } from '../data/hooks';
-import { LearnersContentView } from '../learners';
-import LearnerPageHeader from '../learners/LearnerPageHeader';
+import { PostCommentsView } from '../post-comments';
 import { PostEditor } from '../posts';
 
-export default function DiscussionContent() {
-  const refContainer = useRef(null);
+const DiscussionContent = () => {
   const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
-  useContainerSizeForParent(refContainer);
 
   return (
-    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center h-100 overflow-auto">
-      <Route path={Routes.LEARNERS.LEARNER}>
-        <LearnerPageHeader />
-      </Route>
-      <div className="d-flex flex-column w-100 mw-xl" ref={refContainer}>
+    <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">
         {postEditorVisible ? (
           <Route path={Routes.POSTS.NEW_POST}>
             <PostEditor />
@@ -31,14 +25,13 @@ export default function DiscussionContent() {
               <PostEditor editExisting />
             </Route>
             <Route path={Routes.COMMENTS.PATH}>
-              <CommentsView />
-            </Route>
-            <Route path={Routes.LEARNERS.LEARNER}>
-              <LearnersContentView />
+              <PostCommentsView />
             </Route>
           </Switch>
         )}
       </div>
     </div>
   );
-}
+};
+
+export default injectIntl(DiscussionContent);

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -1,51 +1,116 @@
-import React from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
+import { useSelector } from 'react-redux';
 import {
   Redirect, Route, Switch, useLocation,
 } from 'react-router';
 
-import { Routes } from '../../data/constants';
-import { LearnersView } from '../learners';
-import { PostsView } from '../posts';
-import { TopicsView } from '../topics';
+import { useWindowSize } from '@edx/paragon';
 
-export default function DiscussionSidebar({ displaySidebar }) {
+import { RequestStatus, Routes } from '../../data/constants';
+import { DiscussionContext } from '../common/context';
+import {
+  useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
+} from '../data/hooks';
+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 as LegacyTopicsView } from '../topics';
+
+const 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 && !enableInContextSidebar) {
+      if (isOnDesktop) {
+        sidebarRef.current.style.maxHeight = `${windowHeight - postActionBarHeight}px`;
+      }
+      sidebarRef.current.style.minHeight = `${windowHeight - postActionBarHeight}px`;
+      sidebarRef.current.style.top = `${postActionBarHeight}px`;
+    }
+  }, [sidebarRef, postActionBarHeight, enableInContextSidebar]);
 
   return (
     <div
-      className={classNames('flex-column', {
+      ref={sidebarRef}
+      className={classNames('flex-column position-sticky', {
         'd-none': !displaySidebar,
-        'd-flex w-25 w-xs-100 w-lg-25 overflow-auto h-100 pb-2': 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,
       })}
-      style={{ minWidth: '30rem' }}
       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.LEARNERS.PATH} component={LearnersView} />
-        <Redirect
-          from={Routes.DISCUSSIONS.PATH}
-          to={{
-            ...location,
-            pathname: Routes.POSTS.ALL_POSTS,
-          }}
-        />
+        <Route path={Routes.TOPICS.PATH} component={LegacyTopicsView} />
+        {redirectToLearnersTab && (
+          <Route path={Routes.LEARNERS.POSTS} component={LearnerPostsView} />
+        )}
+        {redirectToLearnersTab && (
+          <Route path={Routes.LEARNERS.PATH} component={LearnersView} />
+        )}
+        {configStatus === RequestStatus.SUCCESSFUL && (
+          <Redirect
+            from={Routes.DISCUSSIONS.PATH}
+            to={{
+              ...location,
+              pathname: Routes.POSTS.ALL_POSTS,
+            }}
+          />
+        )}
       </Switch>
     </div>
   );
-}
+};
 
 DiscussionSidebar.defaultProps = {
   displaySidebar: false,
+  postActionBarRef: null,
 };
 
 DiscussionSidebar.propTypes = {
   displaySidebar: PropTypes.bool,
+  postActionBarRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
 };
+
+export default DiscussionSidebar;