fix: switch to use PUBLIC_PATH for routes

2023-05-23 12:10:48 +05:00
141 changed files with 30946 additions and 10107 deletions
--- a/.env
+++ b/.env
@@ -20,5 +20,6 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
-LEARNER_FEEDBACK_URL=''
-STAFF_FEEDBACK_URL=''
+TA_FEEDBACK_FORM= ''
+STAFF_FEEDBACK_FORM= ''
+DISPLAY_FEEDBACK_BANNER='false'
--- a/.env.development
+++ b/.env.development
@@ -21,5 +21,6 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-LEARNER_FEEDBACK_URL=''
-STAFF_FEEDBACK_URL=''
+TA_FEEDBACK_FORM='https://learner-form.test'
+STAFF_FEEDBACK_FORM='https://staff-form.test'
+DISPLAY_FEEDBACK_BANNER='false'
--- a/.env.test
+++ b/.env.test
@@ -19,5 +19,6 @@ SEGMENT_KEY=''
 SITE_NAME='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-LEARNER_FEEDBACK_URL=''
-STAFF_FEEDBACK_URL=''
+TA_FEEDBACK_FORM='https://learner-form.test'
+STAFF_FEEDBACK_FORM='https://staff-form.test'
+DISPLAY_FEEDBACK_BANNER='false'
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,10 +1,9 @@
 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',
@@ -26,6 +25,7 @@ module.exports = createConfig(
        },
      ],
      'simple-import-sort/exports': 'error',
-    },
-  },
+    }
+  }
 );
+
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,17 +9,18 @@ on:
 jobs:
  tests:
    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [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: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}
    - name: Install dependencies
      run: npm ci
    - name: Validate package-lock.json changes
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
--- a/.jest/setEnvVars.js
+++ b/.jest/setEnvVars.js
@@ -0,0 +1,2 @@
+process.env.TA_FEEDBACK_FORM= 'https://learner-form.test';
+process.env.STAFF_FEEDBACK_FORM= 'https://staff-form.test';
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18
+16
--- a/20
+++ b/20
@@ -1,14 +1,13 @@
 export TRANSIFEX_RESOURCE = frontend-app-discussions
 transifex_resource = frontend-app-discussions
-transifex_langs = "ar,cs,de_DE,es_419,es_AR,es_ES,fa_IR,fr,fr_CA,fr_FR,hi,it_IT,pl,pt_PT,tr_TR,uk,ru,zh_CN"
+transifex_langs = "ar,fr,es_419,zh_CN,tr_TR,pl,fr_CA,fr_FR,de_DE,it_IT"

-intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 NPM_TESTS=build i18n_extract lint test

@@ -56,24 +55,9 @@ push_translations:
 	# Pushing comments to Transifex...
 	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh

-ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
 	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
-pull_translations:
-	rm -rf src/i18n/messages
-	mkdir src/i18n/messages
-	cd src/i18n/messages \
-	  && atlas pull --filter=$(transifex_langs) \
-	           translations/frontend-component-header/src/i18n/messages:frontend-component-header  \
-	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
-	           translations/paragon/src/i18n/messages:paragon \
-	           translations/frontend-app-discussions/src/i18n/messages:frontend-app-discussions
-
-	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-app-discussions
-endif

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -1,42 +1,15 @@
-########################
 frontend-app-discussions
-########################
+========================

-|Codecov| |license|
+|Build Status| |Codecov| |license|

-.. |Codecov| image:: https://codecov.io/gh/openedx/frontend-app-discussions/branch/master/graph/badge.svg?token=3z7XvuzTq3
-   :target: https://codecov.io/gh/openedx/frontend-app-discussions
-.. |license| image:: https://img.shields.io/badge/license-AGPL-informational
-   :target: https://github.com/openedx/frontend-app-discussions/blob/master/LICENSE
-
-********
 Purpose
-********
+-------

 This repository is a React-based micro frontend for the Open edX discussion forums.

-***************
 Getting Started
-***************
-
-Prerequisites
-=============
-
-The `devstack`_ is currently recommended as a development environment for your
-new MFE.  If you start it with ``make dev.up.lms`` that should give you
-everything you need as a companion to this frontend.
-
-Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
-to the `relevant tutor-mfe documentation`_ to get started using it.
-
-.. _Devstack: https://github.com/openedx/devstack
-
-.. _Tutor: https://github.com/overhangio/tutor
-
-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
-
-Cloning and Startup
-===================
+---------------

 1. Clone your new repo:

@@ -53,7 +26,7 @@ Cloning and Startup
 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.
@@ -66,8 +39,7 @@ 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
@@ -78,45 +50,39 @@ can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend
 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@openedx.org.
+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/openedx/frontend-app-discussions/blob/master/docs/decisions/0002-feature-based-application-organization.rst>`_.

 Build Process Notes
-===================
+-------------------

 **Production Build**

 The production build is created with ``npm run build``.

-License
-=======
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
 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/openedx/frontend-i18n/blob/master/docs/how_tos/i18n.rst>`_ has more detail.

-Reporting Security Issues
-=========================
-
-Please do not report security issues in public. Please email security@openedx.org.
+.. |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
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,9 +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.
+  // 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'],
+  setupFiles: ['<rootDir>/.jest/setEnvVars.js'],
  setupFilesAfterEnv: [
    '<rootDir>/src/setupTest.js',
  ],
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
    "snapshot": "fedx-scripts jest --updateSnapshot",
@@ -33,45 +33,45 @@
    "url": "https://github.com/openedx/frontend-app-discussions/issues"
  },
  "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.6.1",
-    "@edx/frontend-component-header": "4.10.1",
-    "@edx/frontend-platform": "5.6.1",
-    "@edx/paragon": "20.46.3",
-    "@reduxjs/toolkit": "1.9.7",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-footer": "11.2.0",
+    "@edx/frontend-component-header": "3.2.0",
+    "@edx/frontend-platform": "2.6.1",
+    "@edx/paragon": "20.15.0",
+    "@reduxjs/toolkit": "1.8.0",
    "@tinymce/tinymce-react": "3.13.1",
    "babel-polyfill": "6.26.0",
-    "classnames": "2.3.2",
+    "classnames": "2.3.1",
    "core-js": "3.21.1",
    "dompurify": "^2.4.3",
-    "formik": "2.4.5",
+    "formik": "2.2.9",
    "lodash.snakecase": "4.1.1",
    "prop-types": "15.8.1",
    "raw-loader": "4.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router": "6.18.0",
-    "react-router-dom": "6.18.0",
-    "redux": "4.2.1",
-    "regenerator-runtime": "0.14.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.6",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0",
+    "redux": "4.1.2",
+    "regenerator-runtime": "0.13.9",
    "timeago.js": "4.0.2",
-    "tinymce": "5.10.7",
+    "tinymce": "5.10.2",
    "yup": "0.31.1"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "13.0.14",
-    "@edx/reactifex": "1.1.0",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
+    "@edx/browserslist-config": "1.1.0",
+    "@edx/frontend-build": "11.0.1",
+    "@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.22.0",
+    "axios-mock-adapter": "1.20.0",
    "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",
-    "rosie": "2.1.1"
+    "rosie": "2.1.0"
  }
 }
--- a/renovate.json
+++ b/renovate.json
@@ -1,33 +1,9 @@
 {
  "extends": [
-    "config:base",
-    "schedule:weekly",
-    ":automergeLinters",
-    ":automergeMinor",
-    ":automergeTesters",
-    ":enableVulnerabilityAlerts",
-    ":rebaseStalePrs",
-    ":semanticCommits",
-    ":updateNotScheduled"
+    "config:base"
  ],
-  "packageRules": [
-    {
-      "matchDepTypes": [
-        "devDependencies"
-      ],
-      "matchUpdateTypes": [
-        "lockFileMaintenance",
-        "minor",
-        "patch",
-        "pin"
-      ],
-      "automerge": true
-    },
-    {
-      "matchPackagePatterns": ["@edx", "@openedx"],
-      "matchUpdateTypes": ["minor", "patch"],
-      "automerge": true
-    }
-  ],
-  "timezone": "America/New_York"
+  "patch": {
+    "automerge": true
+  },
+  "rebaseStalePrs": true
 }
--- a/src/components/FilterBar.jsx
+++ b/src/components/FilterBar.jsx
@@ -19,21 +19,19 @@ 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 = ({
+function FilterBar({
  intl,
  filters,
  selectedFilters,
  onFilterChange,
  showCohortsFilter,
-}) => {
+}) {
  const [isOpen, setOpen] = useState(false);
  const cohorts = useSelector(selectCourseCohorts);
  const { status } = useSelector(state => state.cohorts);
-  const selectedCohort = useMemo(
-    () => cohorts.find(cohort => (
-      toString(cohort.id) === selectedFilters.cohort)),
-    [selectedFilters.cohort],
-  );
+  const selectedCohort = useMemo(() => cohorts.find(cohort => (
+    toString(cohort.id) === selectedFilters.cohort)),
+  [selectedFilters.cohort]);

  const allFilters = [
    {
@@ -185,7 +183,7 @@ const FilterBar = ({
      </Collapsible.Body>
    </Collapsible.Advanced>
  );
-};
+}

 FilterBar.propTypes = {
  intl: intlShape.isRequired,
--- a/src/components/NavigationBar/CourseTabsNavigation.jsx
+++ b/src/components/NavigationBar/CourseTabsNavigation.jsx
@@ -24,23 +24,25 @@ const CourseTabsNavigation = ({
  }, [courseId]);

  return (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4', className)}>
-      {!!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 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>
  );
 };
--- a/src/components/NavigationBar/data/api.test.js
+++ b/src/components/NavigationBar/data/api.test.js
@@ -56,10 +56,8 @@ describe('Navigation bar api tests', () => {
  });

  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 })),
-    );
+    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');
--- a/src/components/NavigationBar/navBar.scss
+++ b/src/components/NavigationBar/navBar.scss
@@ -1,11 +1,10 @@
-@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";
+@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;

--- a/src/components/NavigationBar/tabs/Tabs.jsx
+++ b/src/components/NavigationBar/tabs/Tabs.jsx
@@ -8,7 +8,7 @@ import { Dropdown } from '@edx/paragon';

 import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';

-const Tabs = ({ children, className, ...attrs }) => {
+export default function Tabs({ children, className, ...attrs }) {
  const [
    indexOfLastVisibleChild,
    containerElementRef,
@@ -31,28 +31,25 @@ const Tabs = ({ children, className, ...attrs }) => {

    // 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>
-      ),
-    );
+    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]);

@@ -65,7 +62,7 @@ const Tabs = ({ children, className, ...attrs }) => {
      {tabChildren}
    </nav>
  );
-};
+}

 Tabs.propTypes = {
  children: PropTypes.node,
@@ -76,5 +73,3 @@ Tabs.defaultProps = {
  children: null,
  className: undefined,
 };
-
-export default Tabs;
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useContext, useEffect, useRef, useState,
+  useCallback, useContext, useEffect, useState,
 } from 'react';

 import camelCase from 'lodash/camelCase';
@@ -25,7 +25,6 @@ const Search = () => {
  const isPostSearch = ['posts', 'my-posts'].includes(page);
  const isTopicSearch = 'topics'.includes(page);
  const [searchValue, setSearchValue] = useState('');
-  const previousSearchValueRef = useRef('');
  let currentValue = '';

  if (isPostSearch) {
@@ -40,15 +39,14 @@ const Search = () => {
    dispatch(setSearchQuery(''));
    dispatch(setTopicFilter(''));
    dispatch(setUsernameSearch(''));
-    previousSearchValueRef.current = '';
-  }, [previousSearchValueRef]);
+  }, []);

  const onChange = useCallback((query) => {
    setSearchValue(query);
  }, []);

  const onSubmit = useCallback((query) => {
-    if (query === '' || query === previousSearchValueRef.current) {
+    if (query === '') {
      return;
    }

@@ -59,8 +57,7 @@ const Search = () => {
    } else if (page === 'learners') {
      dispatch(setUsernameSearch(query));
    }
-    previousSearchValueRef.current = query;
-  }, [page, searchValue, previousSearchValueRef]);
+  }, [page, searchValue]);

  const handleIconClick = useCallback((e) => {
    e.preventDefault();
--- a/src/components/TinyMCEEditor.jsx
+++ b/src/components/TinyMCEEditor.jsx
@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';

 import { Editor } from '@tinymce/tinymce-react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 // TinyMCE so the global var exists
 // eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
 import tinymce from 'tinymce/tinymce';
@@ -42,14 +42,13 @@ import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.c
 import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';

 /* istanbul ignore next */
-const TinyMCEEditor = (props) => {
+function 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 locationObj = useLocation();
+
  const { courseId, postId } = useParams();
  const [showImageWarning, setShowImageWarning] = useState(false);
  const intl = useIntl();
-  const enableInContextSidebar = Boolean(new URLSearchParams(locationObj.search).get('inContextSidebar') !== null);

  /* istanbul ignore next */
  const setup = useCallback((editor) => {
@@ -100,29 +99,6 @@ const TinyMCEEditor = (props) => {
    contentStyle = '';
  }

-  // eslint-disable-next-line consistent-return
-  useEffect(() => {
-    if (enableInContextSidebar) {
-      const checkToxDialogVisibility = () => {
-        const toxDialog = document.querySelector('.tox-dialog');
-        if (toxDialog) {
-          toxDialog.style.alignSelf = 'start';
-          toxDialog.style.marginTop = '50px';
-        }
-      };
-
-      const observer = new MutationObserver(checkToxDialogVisibility);
-
-      // Observe changes to the entire document
-      observer.observe(document, { childList: true, subtree: true });
-
-      // Clean up the observer when the component unmounts
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, [enableInContextSidebar]);
-
  return (
    <>
      <Editor
@@ -176,6 +152,6 @@ const TinyMCEEditor = (props) => {
      </AlertModal>
    </>
  );
-};
+}

 export default React.memo(TinyMCEEditor);
--- a/src/components/icons/InsertLink.jsx
+++ b/src/components/icons/InsertLink.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function InsertLink() {
  return (
    <svg
--- a/src/components/icons/Issue.jsx
+++ b/src/components/icons/Issue.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function Issue() {
  return (
    <svg
--- a/src/components/icons/People.jsx
+++ b/src/components/icons/People.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function People() {
  return (
    <svg
--- a/src/components/icons/PushPin.jsx
+++ b/src/components/icons/PushPin.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function PushPin() {
  return (
    <svg
--- a/src/components/icons/Question.jsx
+++ b/src/components/icons/Question.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function Question() {
  return (
    <svg
--- a/src/components/icons/QuestionAnswer.jsx
+++ b/src/components/icons/QuestionAnswer.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function QuestionAnswer() {
  return (
    <svg
--- a/src/components/icons/QuestionAnswerOutline.jsx
+++ b/src/components/icons/QuestionAnswerOutline.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function QuestionAnswerOutline() {
  return (
    <svg
--- a/src/components/icons/StarFilled.jsx
+++ b/src/components/icons/StarFilled.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function StarFilled() {
  return (
    <svg
--- a/src/components/icons/StarOutline.jsx
+++ b/src/components/icons/StarOutline.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function StarOutline() {
  return (
    <svg
--- a/src/components/icons/ThumbUpFilled.jsx
+++ b/src/components/icons/ThumbUpFilled.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function ThumbUpFilled() {
  return (
    <svg
--- a/src/components/icons/ThumbUpOutline.jsx
+++ b/src/components/icons/ThumbUpOutline.jsx
@@ -1,6 +1,5 @@
 import React from 'react';

-// eslint-disable-next-line react/function-component-definition
 export default function ThumbUpOutline() {
  return (
    <svg
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -1,9 +1,6 @@
 import { getConfig } from '@edx/frontend-platform';

 export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
-export const getFullUrl = (path) => (
-  new URL(`${getConfig().PUBLIC_PATH.replace(/\/$/, '')}/${path}`, window.location.origin).href
-);

 /**
 * Enum for thread types.
@@ -140,24 +137,25 @@ export const DiscussionProvider = {
  OPEN_EDX: 'openedx',
 };

-const BASE_PATH = '/:courseId';
+const BASE_PATH = `${getConfig().PUBLIC_PATH}:courseId`;

 export const Routes = {
  DISCUSSIONS: {
    PATH: BASE_PATH,
  },
  LEARNERS: {
-    PATH: `${BASE_PATH}/learners/:learnerUsername?`,
-    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
-    POSTS_EDIT: `${BASE_PATH}/learners/:learnerUsername/posts/:postId/edit`,
+    PATH: `${BASE_PATH}/learners`,
+    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts(/:postId)?`,
  },
  POSTS: {
    PATH: `${BASE_PATH}/topics/:topicId`,
-    MY_POSTS: `${BASE_PATH}/my-posts/:postId?`,
-    ALL_POSTS: `${BASE_PATH}/posts/:postId?`,
-    EDIT_MY_POSTS: `${BASE_PATH}/my-posts/:postId/edit`,
-    EDIT_ALL_POSTS: `${BASE_PATH}/posts/:postId/edit`,
-    NEW_POST: `${BASE_PATH}/*`,
+    MY_POSTS: `${BASE_PATH}/my-posts(/:postId)?`,
+    ALL_POSTS: `${BASE_PATH}/posts(/:postId)?`,
+    NEW_POST: [
+      `${BASE_PATH}/topics/:topicId/posts/:postId`,
+      `${BASE_PATH}/topics/:topicId`,
+      `${BASE_PATH}`,
+    ],
    EDIT_POST: [
      `${BASE_PATH}/category/:category/posts/:postId/edit`,
      `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
@@ -168,19 +166,19 @@ export const Routes = {
  },
  COMMENTS: {
    PATH: [
-      `${BASE_PATH}/category/:category/posts/:postId?`,
-      `${BASE_PATH}/topics/:topicId/posts/:postId?`,
+      `${BASE_PATH}/category/:category/posts/:postId`,
+      `${BASE_PATH}/topics/:topicId/posts/:postId`,
      `${BASE_PATH}/posts/:postId`,
      `${BASE_PATH}/my-posts/:postId`,
-      `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
+      `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
    ],
-    PAGE: `${BASE_PATH}/:page/*`,
+    PAGE: `${BASE_PATH}/:page`,
    PAGES: {
-      category: `${BASE_PATH}/category/:category/posts/:postId?`,
-      topics: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
+      category: `${BASE_PATH}/category/:category/posts/:postId`,
+      topics: `${BASE_PATH}/topics/:topicId/posts/:postId`,
      posts: `${BASE_PATH}/posts/:postId`,
      'my-posts': `${BASE_PATH}/my-posts/:postId`,
-      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
+      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
    },
  },
  TOPICS: {
@@ -191,10 +189,9 @@ export const Routes = {
    ],
    ALL: `${BASE_PATH}/topics`,
    CATEGORY: `${BASE_PATH}/category/:category`,
-    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId?`,
-    CATEGORY_POST_EDIT: `${BASE_PATH}/category/:category/posts/:postId/edit`,
+    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId`,
    TOPIC: `${BASE_PATH}/topics/:topicId`,
-    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
+    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId`,
    TOPIC_POST_EDIT: `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
  },
 };
@@ -208,12 +205,11 @@ export const PostsPages = {
 };

 export const ALL_ROUTES = []
-  .concat([Routes.TOPICS.CATEGORY_POST, `${Routes.TOPICS.CATEGORY}?`])
+  .concat([Routes.TOPICS.CATEGORY_POST, Routes.TOPICS.CATEGORY])
  .concat(Routes.COMMENTS.PATH)
  .concat(Routes.TOPICS.PATH)
-  .concat(Routes.POSTS.EDIT_POST)
  .concat([Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS])
  .concat([Routes.LEARNERS.POSTS, Routes.LEARNERS.PATH])
-  .concat([`${Routes.DISCUSSIONS.PATH}/*`]);
+  .concat([Routes.DISCUSSIONS.PATH]);

 export const MAX_UPLOAD_FILE_SIZE = 1024;
--- a/src/discussions/common/ActionsDropdown.jsx
+++ b/src/discussions/common/ActionsDropdown.jsx
@@ -13,23 +13,23 @@ import {
 import { MoreHoriz } from '@edx/paragon/icons';

 import { ContentActions } from '../../data/constants';
-import { selectIsPostingEnabled } from '../data/selectors';
+import { selectBlackoutDate } from '../data/selectors';
 import messages from '../messages';
-import { useActions } from '../utils';
+import { inBlackoutDateRange, useActions } from '../utils';

-const ActionsDropdown = ({
+function ActionsDropdown({
  actionHandlers,
  contentType,
  disabled,
  dropDownIconSize,
  iconSize,
  id,
-}) => {
+}) {
  const buttonRef = useRef();
  const intl = useIntl();
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = useState(null);
-  const isPostingEnabled = useSelector(selectIsPostingEnabled);
+  const blackoutDateRange = useSelector(selectBlackoutDate);
  const actions = useActions(contentType, id);

  const handleActions = useCallback((action) => {
@@ -41,12 +41,12 @@ const ActionsDropdown = ({
    }
  }, [actionHandlers]);

-  // Find and remove edit action if in Posting is disabled.
+  // Find and remove edit action if in blackout date range.
  useMemo(() => {
-    if (!isPostingEnabled) {
+    if (inBlackoutDateRange(blackoutDateRange)) {
      actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
    }
-  }, [actions, isPostingEnabled]);
+  }, [actions, blackoutDateRange]);

  const onClickButton = useCallback(() => {
    setTarget(buttonRef.current);
@@ -68,7 +68,7 @@ const ActionsDropdown = ({
        disabled={disabled}
        size={iconSize}
        ref={buttonRef}
-        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimensions' : ''}
+        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimentions' : ''}
      />
      <div className="actions-dropdown">
        <ModalPopup
@@ -109,7 +109,7 @@ const ActionsDropdown = ({
      </div>
    </>
  );
-};
+}

 ActionsDropdown.propTypes = {
  id: PropTypes.string.isRequired,
--- a/src/discussions/common/ActionsDropdown.test.jsx
+++ b/src/discussions/common/ActionsDropdown.test.jsx
@@ -13,8 +13,6 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { ContentActions } from '../../data/constants';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
-import { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
 import messages from '../messages';
 import { getCommentsApiUrl } from '../post-comments/data/api';
 import { addComment, fetchThreadComments } from '../post-comments/data/thunks';
@@ -31,7 +29,6 @@ let store;
 let axiosMock;
 const commentsApiUrl = getCommentsApiUrl();
 const threadsApiUrl = getThreadsApiUrl();
-const courseId = 'course-v1:edX+TestX+Test_Course';
 const discussionThreadId = 'thread-1';
 const questionThreadId = 'thread-2';
 const commentContent = 'This is a comment for thread-1';
@@ -173,7 +170,7 @@ const findOpenActionsDropdownButton = async () => (
 );

 describe('ActionsDropdown', () => {
-  beforeEach(async () => {
+  beforeEach(() => {
    initializeMockApp({
      authenticatedUser: {
        userId: 3,
@@ -185,11 +182,6 @@ describe('ActionsDropdown', () => {
    store = initializeStore();
    Factory.resetAll();
    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-    axiosMock.onGet(`${getCourseConfigApiUrl()}${courseId}/`)
-      .reply(200, { isPostingEnabled: true });
-
-    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
  });

  it.each(Object.values(buildTestContent()))('can open drop down if enabled', async (commentOrPost) => {
--- a/src/discussions/common/AlertBanner.jsx
+++ b/src/discussions/common/AlertBanner.jsx
@@ -10,7 +10,7 @@ import { Report } from '@edx/paragon/icons';

 import { AvatarOutlineAndLabelColors } from '../../data/constants';
 import {
-  selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
+  selectModerationSettings, selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
 } from '../data/selectors';
 import messages from '../post-comments/messages';
 import AlertBar from './AlertBar';
@@ -29,6 +29,7 @@ const AlertBanner = ({
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
  const userIsGroupTa = useSelector(selectUserIsGroupTa);
  const userIsGlobalStaff = useSelector(selectUserIsStaff);
+  const { reasonCodesEnabled } = useSelector(selectModerationSettings);
  const userIsContentAuthor = getAuthenticatedUser().username === author;
  const canSeeReportedBanner = abuseFlagged;
  const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
@@ -44,7 +45,7 @@ const AlertBanner = ({
          {intl.formatMessage(messages.abuseFlaggedMessage)}
        </Alert>
      )}
-      { canSeeLastEditOrClosedAlert && (
+      {reasonCodesEnabled && canSeeLastEditOrClosedAlert && (
        <>
          {lastEdit?.reason && (
            <AlertBar
--- a/src/discussions/common/AlertBanner.test.jsx
+++ b/src/discussions/common/AlertBanner.test.jsx
@@ -90,6 +90,7 @@ describe.each([
    store = initializeStore({
      config: {
        hasModerationPrivileges: true,
+        reasonCodesEnabled: true,
      },
    });
    const content = buildTestContent(type, props);
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/src/discussions/common/AuthorLabel.jsx
@@ -2,7 +2,8 @@ import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';

 import classNames from 'classnames';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';

 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -10,6 +11,7 @@ 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 { DiscussionContext } from './context';
 import timeLocale from './time-locale';
@@ -44,11 +46,12 @@ const AuthorLabel = ({
  const showTextPrimary = !authorLabelMessage && !isRetiredUser && !alert;
  const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);

-  const showUserNameAsLink = linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
+  const showUserNameAsLink = useShowLearnersTab()
+    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);

  const authorName = useMemo(() => (
    <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
        'text-gray-700': isRetiredUser,
        'text-primary-500': !authorLabelMessage && !isRetiredUser,
      })}
@@ -97,7 +100,7 @@ const AuthorLabel = ({
      {postCreatedAt && (
        <span
          title={postCreatedAt}
-          className={classNames('align-content-center', {
+          className={classNames('font-family-inter align-content-center', {
            'text-white': alert,
            'text-gray-500': !alert,
          })}
--- a/src/discussions/common/AuthorLabel.test.jsx
+++ b/src/discussions/common/AuthorLabel.test.jsx
@@ -53,6 +53,7 @@ describe('Author label', () => {
    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, {});
@@ -65,20 +66,19 @@ describe('Author label', () => {
    ['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',
+  ])('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}`,
+    it(`it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
      async () => {
        renderComponent(author, authorLabel, linkToProfile, labelColor);

@@ -87,11 +87,9 @@ describe('Author label', () => {
        } else {
          expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
        }
-      },
-    );
+      });

-    it(
-      `it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
+    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]');
@@ -106,7 +104,6 @@ describe('Author label', () => {
          expect(authorElement.parentNode.lastChild).not.toHaveTextContent(label, { exact: true });
          expect(authorElement.parentNode).not.toHaveClass(labelColor, { exact: true });
        }
-      },
-    );
+      });
  });
 });
--- a/src/discussions/common/Confirmation.jsx
+++ b/src/discussions/common/Confirmation.jsx
@@ -6,16 +6,16 @@ import { ActionRow, Button, ModalDialog } from '@edx/paragon';

 import messages from '../messages';

-const Confirmation = ({
+function Confirmation({
  isOpen,
  title,
  description,
  onClose,
-  confirmAction,
-  closeButtonVariant,
+  comfirmAction,
+  closeButtonVaraint,
  confirmButtonVariant,
  confirmButtonText,
-}) => {
+}) {
  const intl = useIntl();

  return (
@@ -30,31 +30,31 @@ const Confirmation = ({
      </ModalDialog.Body>
      <ModalDialog.Footer>
        <ActionRow>
-          <ModalDialog.CloseButton variant={closeButtonVariant}>
+          <ModalDialog.CloseButton variant={closeButtonVaraint}>
            {intl.formatMessage(messages.confirmationCancel)}
          </ModalDialog.CloseButton>
-          <Button variant={confirmButtonVariant} onClick={confirmAction}>
+          <Button variant={confirmButtonVariant} onClick={comfirmAction}>
            { confirmButtonText || intl.formatMessage(messages.confirmationConfirm)}
          </Button>
        </ActionRow>
      </ModalDialog.Footer>
    </ModalDialog>
  );
-};
+}

 Confirmation.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
-  confirmAction: PropTypes.func.isRequired,
+  comfirmAction: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
-  closeButtonVariant: PropTypes.string,
+  closeButtonVaraint: PropTypes.string,
  confirmButtonVariant: PropTypes.string,
  confirmButtonText: PropTypes.string,
 };

 Confirmation.defaultProps = {
-  closeButtonVariant: 'default',
+  closeButtonVaraint: 'default',
  confirmButtonVariant: 'primary',
  confirmButtonText: '',
 };
--- a/src/discussions/common/EndorsedAlertBanner.jsx
+++ b/src/discussions/common/EndorsedAlertBanner.jsx
@@ -13,12 +13,12 @@ import { PostCommentsContext } from '../post-comments/postCommentsContext';
 import AuthorLabel from './AuthorLabel';
 import timeLocale from './time-locale';

-const EndorsedAlertBanner = ({
+function EndorsedAlertBanner({
  endorsed,
  endorsedAt,
  endorsedBy,
  endorsedByLabel,
-}) => {
+}) {
  timeago.register('time-locale', timeLocale);

  const intl = useIntl();
@@ -43,7 +43,7 @@ const EndorsedAlertBanner = ({
                height: '20px',
              }}
            />
-            <strong className="ml-2">
+            <strong className="ml-2 font-family-inter">
              {intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
            </strong>
          </div>
@@ -62,7 +62,7 @@ const EndorsedAlertBanner = ({
      </Alert>
    )
  );
-};
+}

 EndorsedAlertBanner.propTypes = {
  endorsed: PropTypes.bool.isRequired,
--- a/src/discussions/common/EndorsedAlertBanner.test.jsx
+++ b/src/discussions/common/EndorsedAlertBanner.test.jsx
@@ -22,7 +22,9 @@ function buildTestContent(type, buildParams) {
  return camelCaseObject(Factory.build(type, { ...buildParamsSnakeCase }, null));
 }

-const renderComponent = (content, postType) => {
+function renderComponent(
+  content, postType,
+) {
  render(
    <IntlProvider locale="en">
      <AppProvider store={store}>
@@ -45,7 +47,7 @@ const renderComponent = (content, postType) => {
      </AppProvider>
    </IntlProvider>,
  );
-};
+}

 describe.each([
  {
@@ -84,6 +86,7 @@ describe.each([
    store = initializeStore({
      config: {
        hasModerationPrivileges: true,
+        reasonCodesEnabled: true,
      },
    });
    const content = buildTestContent(type, props);
--- a/src/discussions/common/HoverCard.jsx
+++ b/src/discussions/common/HoverCard.jsx
@@ -11,7 +11,7 @@ import {
 import {
  StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
 } from '../../components/icons';
-import { useUserPostingEnabled } from '../data/hooks';
+import { useUserCanAddThreadInBlackoutDate } from '../data/hooks';
 import { PostCommentsContext } from '../post-comments/postCommentsContext';
 import ActionsDropdown from './ActionsDropdown';
 import { DiscussionContext } from './context';
@@ -31,7 +31,7 @@ const HoverCard = ({
  const intl = useIntl();
  const { enableInContextSidebar } = useContext(DiscussionContext);
  const { isClosed } = useContext(PostCommentsContext);
-  const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
+  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();

  return (
    <div
@@ -39,14 +39,12 @@ const HoverCard = ({
      data-testid={`hover-card-${id}`}
      id={`hover-card-${id}`}
    >
-      {isUserPrivilegedInPostingRestriction && (
+      {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 },
-            )}
+            className={classNames('px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
+              { 'w-100': enableInContextSidebar })}
            onClick={() => handleResponseCommentButton()}
            disabled={isClosed}
            style={{ lineHeight: '20px' }}
@@ -85,7 +83,7 @@ const HoverCard = ({
          iconAs={Icon}
          size="sm"
          alt="Like"
-          iconClassNames="like-icon-dimensions"
+          iconClassNames="like-icon-dimentions"
          onClick={(e) => {
            e.preventDefault();
            onLike();
@@ -99,7 +97,7 @@ const HoverCard = ({
            iconAs={Icon}
            size="sm"
            alt="Follow"
-            iconClassNames="follow-icon-dimensions"
+            iconClassNames="follow-icon-dimentions"
            onClick={(e) => {
              e.preventDefault();
              onFollow();
@@ -127,7 +125,6 @@ HoverCard.propTypes = {
  addResponseCommentButtonMessage: PropTypes.string.isRequired,
  onLike: PropTypes.func.isRequired,
  voted: PropTypes.bool.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
  endorseIcons: PropTypes.objectOf(PropTypes.any),
  onFollow: PropTypes.func,
  following: PropTypes.bool,
--- a/src/discussions/common/HoverCard.test.jsx
+++ b/src/discussions/common/HoverCard.test.jsx
@@ -3,20 +3,18 @@ import {
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Route } from 'react-router';
 import { Factory } from 'rosie';

-import { initializeMockApp } from '@edx/frontend-platform';
+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 { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
 import { getCommentsApiUrl } from '../post-comments/data/api';
-import { fetchCommentResponses } from '../post-comments/data/thunks';
+import { fetchCommentResponses, fetchThreadComments } from '../post-comments/data/thunks';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
 import { DiscussionContext } from './context';
@@ -27,11 +25,45 @@ 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;

+async function mockAxiosReturnPagedComments() {
+  const endorsedArray = [null, false, true];
+  const pageArray = [1, 2];
+
+  endorsedArray.forEach(async (endorsed) => {
+    const postId = endorsed === null ? discussionPostId : questionPostId;
+    pageArray.forEach(async (page) => {
+      const params = {
+        thread_id: postId,
+        page,
+        page_size: undefined,
+        requested_fields: 'profile_image',
+        endorsed,
+        reverse_order: reverseOrder,
+        enable_in_context_sidebar: enableInContextSidebar,
+        signal: {},
+      };
+      axiosMock.onGet(commentsApiUrl, { ...params }).reply(200, Factory.build('commentsResult', { can_delete: true }, {
+        threadId: postId,
+        page,
+        pageSize: 1,
+        count: 2,
+        endorsed,
+        childCount: page === 1 ? 2 : 0,
+      }));
+
+      await executeThunk(fetchThreadComments(postId, { ...params }), store.dispatch, store.getState);
+    });
+  });
+}
+
 async function mockAxiosReturnPagedCommentsResponses() {
  const parentId = 'comment-1';
  const commentsResponsesApiUrl = `${commentsApiUrl}${parentId}/`;
@@ -43,15 +75,13 @@ async function mockAxiosReturnPagedCommentsResponses() {
  };

  [1, 2].forEach(async (page) => {
-    axiosMock.onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } }).reply(
-      200,
+    axiosMock.onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } }).reply(200,
      Factory.build('commentsResult', null, {
        parentId,
        page,
        pageSize: 1,
        count: 2,
-      }),
-    );
+      }));

    await executeThunk(fetchCommentResponses(parentId), store.dispatch, store.getState);
  });
@@ -60,12 +90,15 @@ async function mockAxiosReturnPagedCommentsResponses() {
 function renderComponent(postId) {
  const wrapper = render(
    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
+      <AppProvider store={store}>
        <DiscussionContext.Provider
-          value={{ courseId, postId, page: 'posts' }}
+          value={{ courseId, postId }}
        >
          <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
            <DiscussionContent />
+            <Route
+              path="*"
+            />
          </MemoryRouter>
        </DiscussionContext.Provider>
      </AppProvider>
@@ -83,7 +116,6 @@ describe('HoverCard', () => {
        username: 'abc123',
        administrator: true,
        roles: [],
-        isPostingEnabled: true,
      },
    });

@@ -91,17 +123,26 @@ describe('HoverCard', () => {
    Factory.resetAll();
    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
    axiosMock.onGet(threadsApiUrl).reply(200, Factory.build('threadsResult'));
-    axiosMock.onGet(`${getCourseConfigApiUrl()}${courseId}/`).reply(200, { isPostingEnabled: true });
-    axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult', { can_delete: true }, {
-      threadId: discussionPostId,
-      endorsed: false,
-      pageSize: 1,
-      count: 2,
-      childCount: 2,
-    }));
+    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,
+      })];
+    });

-    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
    await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
+    await mockAxiosReturnPagedComments();
    await mockAxiosReturnPagedCommentsResponses();
  });

--- a/src/discussions/data/hooks.js
+++ b/src/discussions/data/hooks.js
@@ -4,9 +4,7 @@ import {
 } from 'react';

 import { useDispatch, useSelector } from 'react-redux';
-import {
-  matchPath, useLocation, useMatch, useNavigate,
-} from 'react-router-dom';
+import { useHistory, useLocation, useRouteMatch } from 'react-router';

 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -24,13 +22,15 @@ import tourCheckpoints from '../tours/constants';
 import { selectTours } from '../tours/data/selectors';
 import { updateTourShowStatus } from '../tours/data/thunks';
 import messages from '../tours/messages';
-import { discussionsPath } from '../utils';
+import { discussionsPath, inBlackoutDateRange } from '../utils';
 import {
  selectAreThreadsFiltered,
+  selectBlackoutDate,
  selectEnableInContext,
  selectIsCourseAdmin,
  selectIsCourseStaff,
-  selectIsPostingEnabled,
+  selectLearnersTabEnabled,
+  selectModerationSettings,
  selectPostThreadCount,
  selectUserHasModerationPrivileges,
  selectUserIsGroupTa,
@@ -40,31 +40,27 @@ import { fetchCourseConfig } from './thunks';

 export function useTotalTopicThreadCount() {
  const topics = useSelector(selectTopics);
-  const count = useMemo(
-    () => (
-      Object.keys(topics)?.reduce((total, topicId) => {
-        const topic = topics[topicId];
-        return total + topic.threadCounts.discussion + topic.threadCounts.question;
-      }, 0)),
-    [],
-  );
+  const count = useMemo(() => (
+    Object.keys(topics)?.reduce((total, topicId) => {
+      const topic = topics[topicId];
+      return total + topic.threadCounts.discussion + topic.threadCounts.question;
+    }, 0)),
+  []);

  return count;
 }

 export const useSidebarVisible = () => {
-  const location = useLocation();
  const enableInContext = useSelector(selectEnableInContext);
-  const isViewingTopics = useMatch(Routes.TOPICS.ALL);
-  const isViewingLearners = useMatch(`${Routes.LEARNERS.PATH}/*`);
+  const isViewingTopics = useRouteMatch(Routes.TOPICS.ALL);
+  const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
  const isFiltered = useSelector(selectAreThreadsFiltered);
  const totalThreads = useSelector(selectPostThreadCount);
  const isThreadsEmpty = Boolean(useSelector(threadsLoadingStatus()) === RequestStatus.SUCCESSFUL && !totalThreads);
-  const matchInContextTopicView = Routes.TOPICS.PATH.find((route) => matchPath({ path: `${route}/*` }, location.pathname));
-  const isInContextTopicsView = Boolean(matchInContextTopicView && enableInContext);
-  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics || isViewingLearners));
+  const isIncontextTopicsView = Boolean(useRouteMatch(Routes.TOPICS.PATH) && enableInContext);
+  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics?.isExact || isViewingLearners));

-  if (isInContextTopicsView) {
+  if (isIncontextTopicsView) {
    return true;
  }

@@ -87,7 +83,7 @@ export function useCourseDiscussionData(courseId) {

 export function useRedirectToThread(courseId, enableInContextSidebar) {
  const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const history = useHistory();
  const location = useLocation();

  const redirectToThread = useSelector(
@@ -104,7 +100,7 @@ export function useRedirectToThread(courseId, enableInContextSidebar) {
        postId: redirectToThread.threadId,
        topicId: redirectToThread.topicId,
      })(location);
-      navigate({ ...newLocation });
+      history.push(newLocation);
    }
  }, [redirectToThread]);
 }
@@ -161,15 +157,18 @@ export const useAlertBannerVisible = (
 ) => {
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
  const userIsGroupTa = useSelector(selectUserIsGroupTa);
+  const { reasonCodesEnabled } = useSelector(selectModerationSettings);
  const userIsContentAuthor = getAuthenticatedUser().username === author;
  const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsContentAuthor || userIsGroupTa);
  const canSeeReportedBanner = abuseFlagged;

  return (
-    (canSeeLastEditOrClosedAlert && (lastEdit?.reason || closed)) || (canSeeReportedBanner)
+    (reasonCodesEnabled && canSeeLastEditOrClosedAlert && (lastEdit?.reason || closed)) || (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.
@@ -191,16 +190,17 @@ export const useCurrentDiscussionTopic = () => {
  return null;
 };

-export const useUserPostingEnabled = () => {
-  const isPostingEnabled = useSelector(selectIsPostingEnabled);
+export const useUserCanAddThreadInBlackoutDate = () => {
+  const blackoutDateRange = useSelector(selectBlackoutDate);
  const isUserAdmin = useSelector(selectUserIsStaff);
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
  const isUserGroupTA = useSelector(selectUserIsGroupTa);
  const isCourseAdmin = useSelector(selectIsCourseAdmin);
  const isCourseStaff = useSelector(selectIsCourseStaff);
  const isPrivileged = isUserAdmin || userHasModerationPrivileges || isUserGroupTA || isCourseAdmin || isCourseStaff;
+  const isInBlackoutDateRange = useMemo(() => inBlackoutDateRange(blackoutDateRange), [blackoutDateRange]);

-  return (isPostingEnabled || isPrivileged);
+  return (!(isInBlackoutDateRange) || (isPrivileged));
 };

 function camelToConstant(string) {
@@ -222,7 +222,7 @@ export const useTourConfiguration = () => {
  ), []);

  const toursConfig = useMemo(() => (
-    tours?.map((tour) => Object.keys(tourCheckpoints(intl)).includes(tour.tourName) && (
+    tours?.map((tour) => (
      {
        tourId: tour.tourName,
        advanceButtonText: intl.formatMessage(messages.advanceButtonText),
--- a/src/discussions/data/hooks.test.jsx
+++ b/src/discussions/data/hooks.test.jsx
@@ -11,7 +11,7 @@ import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { DiscussionContext } from '../common/context';
 import { getCourseConfigApiUrl } from './api';
-import { useCurrentDiscussionTopic, useUserPostingEnabled } from './hooks';
+import { useCurrentDiscussionTopic, useUserCanAddThreadInBlackoutDate } from './hooks';
 import { fetchCourseConfig } from './thunks';

 const courseId = 'course-v1:edX+TestX+Test_Course';
@@ -19,8 +19,8 @@ const courseConfigApiUrl = getCourseConfigApiUrl();
 let store;
 let axiosMock;

-const generateApiResponse = (isPostingEnabled, isCourseAdmin = false) => ({
-  isPostingEnabled,
+const generateApiResponse = (blackouts = [], isCourseAdmin = false) => ({
+  blackouts,
  hasModerationPrivileges: false,
  isGroupTa: false,
  isCourseAdmin,
@@ -30,14 +30,14 @@ const generateApiResponse = (isPostingEnabled, isCourseAdmin = false) => ({

 describe('Hooks', () => {
  describe('useCurrentDiscussionTopic', () => {
-    const ComponentWithHook = () => {
+    function ComponentWithHook() {
      const topic = useCurrentDiscussionTopic();
      return (
        <div>
          {String(topic)}
        </div>
      );
-    };
+    }

    function renderComponent({ topicId, category }) {
      return render(
@@ -102,15 +102,15 @@ describe('Hooks', () => {
    });
  });

-  describe('useUserPostingEnabled', () => {
-    const ComponentWithHook = () => {
-      const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
+  describe('useUserCanAddThreadInBlackoutDate', () => {
+    function ComponentWithHook() {
+      const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
      return (
        <div>
-          {String(isUserPrivilegedInPostingRestriction)}
+          {String(userCanAddThreadInBlackoutDate)}
        </div>
      );
-    };
+    }

    function renderComponent() {
      return render(
@@ -121,7 +121,7 @@ describe('Hooks', () => {
        </IntlProvider>,
      );
    }
-    describe('User can add Thread in Posting Restrictions ', () => {
+    describe('User can add Thread in blackoutdates ', () => {
      beforeEach(() => {
        initializeMockApp({
          authenticatedUser: {
@@ -136,34 +136,37 @@ describe('Hooks', () => {
        store = initializeStore();
      });

-      test('when posting is not disabled and Role is Learner return true', async () => {
+      test('when blackoutdates are not active and Role is Learner return true', async () => {
        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
-          .reply(200, generateApiResponse(true, false));
+          .reply(200, generateApiResponse([], false));
        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
        const { queryByText } = renderComponent();
        expect(queryByText('true')).toBeInTheDocument();
      });

-      test('when posting is not disabled and Role is not Learner return true', async () => {
+      test('when blackoutdates are not active and Role is not Learner return true', async () => {
        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
-          .reply(200, generateApiResponse(true, true));
+          .reply(200, generateApiResponse([], true));
        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
        const { queryByText } = renderComponent();
        expect(queryByText('true')).toBeInTheDocument();
      });

-      test('when posting is disabled and Role is Learner return false', async () => {
+      test('when blackoutdates are active and Role is Learner return false', async () => {
        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
-          .reply(200, generateApiResponse(false, false));
+          .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 posting is not disabled and Role is not Learner return true', async () => {
+      test('when blackoutdates are active and Role is not Learner return true', async () => {
        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
-          .reply(200, generateApiResponse(false, true));
-        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+          .reply(200, generateApiResponse([
+            { start: '2022-11-25T00:00:00Z', end: '2050-11-25T23:59:00Z' }], true));
        const { queryByText } = renderComponent();
        expect(queryByText('true')).toBeInTheDocument();
      });
--- a/src/discussions/data/selectors.js
+++ b/src/discussions/data/selectors.js
@@ -12,12 +12,16 @@ export const selectUserIsStaff = state => state.config.isUserAdmin;

 export const selectUserIsGroupTa = state => state.config.isGroupTa;

-export const selectConfigLoadingStatus = state => state.config.status;
+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;
@@ -26,11 +30,10 @@ export const selectIsCourseStaff = state => state.config.isCourseStaff;

 export const selectEnableInContext = state => state.config.enableInContext;

-export const selectIsPostingEnabled = state => state.config.isPostingEnabled;
-
 export const selectModerationSettings = state => ({
  postCloseReasons: state.config.postCloseReasons,
  editReasons: state.config.editReasons,
+  reasonCodesEnabled: state.config.reasonCodesEnabled,
 });

 export const selectDiscussionProvider = state => state.config.provider;
--- a/src/discussions/data/slices.js
+++ b/src/discussions/data/slices.js
@@ -7,6 +7,7 @@ const configSlice = createSlice({
  name: 'config',
  initialState: {
    status: RequestStatus.IN_PROGRESS,
+    blackouts: [],
    allowAnonymous: false,
    allowAnonymousToPeers: false,
    userRoles: [],
@@ -16,13 +17,14 @@ const configSlice = createSlice({
    isCourseAdmin: false,
    isCourseStaff: false,
    isUserAdmin: false,
-    isPostingEnabled: false,
+    learnersTabEnabled: false,
    settings: {
      divisionScheme: 'none',
      alwaysDivideInlineDiscussions: false,
      dividedInlineDiscussions: [],
      dividedCourseWideDiscussions: [],
    },
+    reasonCodesEnabled: false,
    editReasons: [],
    postCloseReasons: [],
    enableInContext: false,
--- a/src/discussions/discussions-home/DiscussionsRestrictionBanner.jsx
+++ b/src/discussions/discussions-home/DiscussionsRestrictionBanner.jsx
@@ -1,20 +1,23 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';

 import { useSelector } from 'react-redux';

 import { useIntl } from '@edx/frontend-platform/i18n';
 import { PageBanner } from '@edx/paragon';

-import { RequestStatus } from '../../data/constants';
-import { selectConfigLoadingStatus, selectIsPostingEnabled } from '../data/selectors';
+import { selectBlackoutDate } from '../data/selectors';
 import messages from '../messages';
+import { inBlackoutDateRange } from '../utils';

-const DiscussionsRestrictionBanner = () => {
+const BlackoutInformationBanner = () => {
  const intl = useIntl();
-  const isPostingEnabled = useSelector(selectIsPostingEnabled);
-  const configLoadingStatus = useSelector(selectConfigLoadingStatus);
+  const blackoutDate = useSelector(selectBlackoutDate);
  const [showBanner, setShowBanner] = useState(true);

+  const isDiscussionsBlackout = useMemo(() => (
+    inBlackoutDateRange(blackoutDate)
+  ), [blackoutDate]);
+
  const handleDismiss = useCallback(() => {
    setShowBanner(false);
  }, []);
@@ -22,7 +25,7 @@ const DiscussionsRestrictionBanner = () => {
  return (
    <PageBanner
      variant="accentB"
-      show={!isPostingEnabled && showBanner && configLoadingStatus === RequestStatus.SUCCESSFUL}
+      show={isDiscussionsBlackout && showBanner}
      dismissible
      onDismiss={handleDismiss}
    >
@@ -33,4 +36,4 @@ const DiscussionsRestrictionBanner = () => {
  );
 };

-export default DiscussionsRestrictionBanner;
+export default BlackoutInformationBanner;
--- a/src/discussions/discussions-home/DiscussionsRestrictionBanner.test.jsx
+++ b/src/discussions/discussions-home/DiscussionsRestrictionBanner.test.jsx
@@ -8,7 +8,7 @@ import { initializeStore } from '../../store';
 import { DiscussionContext } from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
 import messages from '../messages';
-import DiscussionsRestrictionBanner from './DiscussionsRestrictionBanner';
+import BlackoutInformationBanner from './BlackoutInformationBanner';

 let store;
 let container;
@@ -20,13 +20,13 @@ activeEndDate.setDate(activeEndDate.getDate() + 2);
 activeStartDate = activeStartDate.toISOString();
 activeEndDate = activeEndDate.toISOString();

-const getConfigData = (isPostingEnabled) => ({
+const getConfigData = (blackouts = []) => ({
  id: 'course-v1:edX+DemoX+Demo_Course',
  userRoles: ['Admin', 'Student'],
  hasModerationPrivileges: false,
  isGroupTa: false,
  isUserAdmin: false,
-  isPostingEnabled,
+  blackouts,
 });

 function renderComponent() {
@@ -34,7 +34,7 @@ function renderComponent() {
    <IntlProvider locale="en">
      <AppProvider store={store}>
        <DiscussionContext.Provider value={{ courseId }}>
-          <DiscussionsRestrictionBanner />
+          <BlackoutInformationBanner />
        </DiscussionContext.Provider>
      </AppProvider>
    </IntlProvider>,
@@ -43,7 +43,7 @@ function renderComponent() {
  return container;
 }

-describe('Discussions Restriction Banner', () => {
+describe('Blackout Information Banner', () => {
  beforeEach(async () => {
    initializeMockApp({
      authenticatedUser: {
@@ -56,11 +56,13 @@ describe('Discussions Restriction Banner', () => {
  });

  test.each([
-    { isPostingEnabled: false, visibility: true },
-    { isPostingEnabled: true, visibility: false },
-  ])('Test Discussions Restriction is visible on app load if posting is disabled', async ({ isPostingEnabled, visibility }) => {
+    { 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(isPostingEnabled)));
+    await store.dispatch(fetchConfigSuccess(getConfigData(blackouts)));
    renderComponent();
    if (visibility) {
      const element = await screen.findByRole('alert');
--- a/src/discussions/discussions-home/DiscussionContent.jsx
+++ b/src/discussions/discussions-home/DiscussionContent.jsx
@@ -1,10 +1,10 @@
 import React, { lazy, Suspense } from 'react';

 import { useSelector } from 'react-redux';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Switch } from 'react-router';

 import Spinner from '../../components/Spinner';
-import { Routes as ROUTES } from '../../data/constants';
+import { Routes } from '../../data/constants';

 const PostEditor = lazy(() => import('../posts/post-editor/PostEditor'));
 const PostCommentsView = lazy(() => import('../post-comments/PostCommentsView'));
@@ -16,20 +16,20 @@ const DiscussionContent = () => {
    <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">
        <Suspense fallback={(<Spinner />)}>
-          <Routes>
-            {postEditorVisible ? (
-              <Route path={ROUTES.POSTS.NEW_POST} element={<PostEditor />} />
-            ) : (
-              <>
-                {ROUTES.POSTS.EDIT_POST.map(route => (
-                  <Route key={route} path={route} element={<PostEditor editExisting />} />
-                ))}
-                {ROUTES.COMMENTS.PATH.map(route => (
-                  <Route key={route} path={route} element={<PostCommentsView />} />
-                ))}
-              </>
-            )}
-          </Routes>
+          {postEditorVisible ? (
+            <Route path={Routes.POSTS.NEW_POST}>
+              <PostEditor />
+            </Route>
+          ) : (
+            <Switch>
+              <Route path={Routes.POSTS.EDIT_POST}>
+                <PostEditor editExisting />
+              </Route>
+              <Route path={Routes.COMMENTS.PATH}>
+                <PostCommentsView />
+              </Route>
+            </Switch>
+          )}
        </Suspense>
      </div>
    </div>
--- a/src/discussions/discussions-home/DiscussionSidebar.jsx
+++ b/src/discussions/discussions-home/DiscussionSidebar.jsx
@@ -6,16 +6,18 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
-  Navigate, Route, Routes,
-} from 'react-router-dom';
+  Redirect, Route, Switch, useLocation,
+} from 'react-router';

 import { useWindowSize } from '@edx/paragon';

 import Spinner from '../../components/Spinner';
-import { RequestStatus, Routes as ROUTES } from '../../data/constants';
+import { RequestStatus, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
-import { useContainerSize, useIsOnDesktop, useIsOnXLDesktop } from '../data/hooks';
-import { selectConfigLoadingStatus, selectEnableInContext } from '../data/selectors';
+import {
+  useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
+} from '../data/hooks';
+import { selectconfigLoadingStatus, selectEnableInContext } from '../data/selectors';

 const TopicPostsView = lazy(() => import('../in-context-topics/TopicPostsView'));
 const InContextTopicsView = lazy(() => import('../in-context-topics/TopicsView'));
@@ -25,11 +27,13 @@ const PostsView = lazy(() => import('../posts/PostsView'));
 const LegacyTopicsView = lazy(() => import('../topics/TopicsView'));

 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 configStatus = useSelector(selectconfigLoadingStatus);
+  const redirectToLearnersTab = useShowLearnersTab();
  const sidebarRef = useRef(null);
  const postActionBarHeight = useContainerSize(postActionBarRef);
  const { height: windowHeight } = useWindowSize();
@@ -58,58 +62,47 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
      data-testid="sidebar"
    >
      <Suspense fallback={(<Spinner />)}>
-        <Routes>
+        <Switch>
          {enableInContext && !enableInContextSidebar && (
-            <Route
-              path={ROUTES.TOPICS.ALL}
-              element={<InContextTopicsView />}
-            />
+          <Route
+            path={Routes.TOPICS.ALL}
+            component={InContextTopicsView}
+            exact
+          />
          )}
          {enableInContext && !enableInContextSidebar && (
-            [
-              ROUTES.TOPICS.TOPIC,
-              ROUTES.TOPICS.CATEGORY,
-              ROUTES.TOPICS.TOPIC_POST,
-              ROUTES.TOPICS.TOPIC_POST_EDIT,
-            ].map((route) => (
-              <Route
-                key={route}
-                path={route}
-                element={<TopicPostsView />}
-              />
-            ))
+          <Route
+            path={[
+              Routes.TOPICS.TOPIC,
+              Routes.TOPICS.CATEGORY,
+              Routes.TOPICS.TOPIC_POST,
+              Routes.TOPICS.TOPIC_POST_EDIT,
+            ]}
+            component={TopicPostsView}
+            exact
+          />
+          )}
+          <Route
+            path={[Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS, Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
+            component={PostsView}
+          />
+          <Route path={Routes.TOPICS.PATH} component={LegacyTopicsView} />
+          {redirectToLearnersTab && (
+          <Route path={Routes.LEARNERS.POSTS} component={LearnerPostsView} />
+          )}
+          {redirectToLearnersTab && (
+          <Route path={Routes.LEARNERS.PATH} component={LearnersView} />
          )}
-          {[
-            ROUTES.POSTS.ALL_POSTS,
-            ROUTES.POSTS.EDIT_ALL_POSTS,
-            ROUTES.POSTS.MY_POSTS,
-            ROUTES.POSTS.EDIT_MY_POSTS,
-            ROUTES.TOPICS.CATEGORY,
-            ROUTES.TOPICS.CATEGORY_POST,
-            ROUTES.TOPICS.CATEGORY_POST_EDIT,
-            ROUTES.TOPICS.TOPIC,
-            ROUTES.TOPICS.TOPIC_POST,
-            ROUTES.TOPICS.TOPIC_POST_EDIT,
-          ].map((route) => (
-            <Route
-              key={route}
-              path={route}
-              element={<PostsView />}
-            />
-          ))}
-          {ROUTES.TOPICS.PATH.map(path => (
-            <Route key={path} path={path} element={<LegacyTopicsView />} />
-          ))}
-          {
-            [ROUTES.LEARNERS.POSTS, ROUTES.LEARNERS.POSTS_EDIT].map((route) => (
-              <Route key={route} path={route} element={<LearnerPostsView />} />
-            ))
-          }
-          <Route path={ROUTES.LEARNERS.PATH} element={<LearnersView />} />
          {configStatus === RequestStatus.SUCCESSFUL && (
-            <Route path={`${ROUTES.DISCUSSIONS.PATH}/*`} element={<Navigate to="posts" />} />
+          <Redirect
+            from={Routes.DISCUSSIONS.PATH}
+            to={{
+              ...location,
+              pathname: Routes.POSTS.ALL_POSTS,
+            }}
+          />
          )}
-        </Routes>
+        </Switch>
      </Suspense>
    </div>
  );
--- a/src/discussions/discussions-home/DiscussionSidebar.test.jsx
+++ b/src/discussions/discussions-home/DiscussionSidebar.test.jsx
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 import { Context as ResponsiveContext } from 'react-responsive';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
@@ -28,8 +28,8 @@ function renderComponent(displaySidebar = true, location = `/${courseId}/`) {
  const wrapper = render(
    <IntlProvider locale="en">
      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <AppProvider store={store} wrapWithRouter={false}>
-          <DiscussionContext.Provider value={{ courseId, page: 'posts' }}>
+        <AppProvider store={store}>
+          <DiscussionContext.Provider value={{ courseId }}>
            <MemoryRouter initialEntries={[location]}>
              <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={null} />
            </MemoryRouter>
--- a/src/discussions/discussions-home/DiscussionsHome.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -1,20 +1,20 @@
-/* eslint-disable react/jsx-no-constructed-context-values */
 import React, { lazy, Suspense, useRef } from 'react';

 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
-  matchPath, Route, Routes, useLocation, useMatch,
-} from 'react-router-dom';
+  Route, Switch, useLocation, useRouteMatch,
+} from 'react-router';

 import { LearningHeader as Header } from '@edx/frontend-component-header';
+import { getConfig } from '@edx/frontend-platform';

 import { Spinner } from '../../components';
 import { selectCourseTabs } from '../../components/NavigationBar/data/selectors';
-import { ALL_ROUTES, DiscussionProvider, Routes as ROUTES } from '../../data/constants';
+import { ALL_ROUTES, DiscussionProvider, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
 import {
-  useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useSidebarVisible,
+  useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useShowLearnersTab, useSidebarVisible,
 } from '../data/hooks';
 import { selectDiscussionProvider, selectEnableInContext } from '../data/selectors';
 import { EmptyLearners, EmptyPosts, EmptyTopics } from '../empty-posts';
@@ -29,9 +29,10 @@ const CourseTabsNavigation = lazy(() => import('../../components/NavigationBar/C
 const LegacyBreadcrumbMenu = lazy(() => import('../navigation/breadcrumb-menu/LegacyBreadcrumbMenu'));
 const NavigationBar = lazy(() => import('../navigation/navigation-bar/NavigationBar'));
 const DiscussionsProductTour = lazy(() => import('../tours/DiscussionsProductTour'));
-const DiscussionsRestrictionBanner = lazy(() => import('./DiscussionsRestrictionBanner'));
+const BlackoutInformationBanner = lazy(() => import('./BlackoutInformationBanner'));
 const DiscussionContent = lazy(() => import('./DiscussionContent'));
 const DiscussionSidebar = lazy(() => import('./DiscussionSidebar'));
+const InformationBanner = lazy(() => import('./InformationBanner'));

 const DiscussionsHome = () => {
  const location = useLocation();
@@ -40,13 +41,13 @@ const DiscussionsHome = () => {
  const provider = useSelector(selectDiscussionProvider);
  const enableInContext = useSelector(selectEnableInContext);
  const { courseNumber, courseTitle, org } = useSelector(selectCourseTabs);
-  const pageParams = useMatch(ROUTES.COMMENTS.PAGE)?.params;
-  const page = pageParams?.page || null;
-  const matchPattern = ALL_ROUTES.find((route) => matchPath({ path: route }, location.pathname));
-  const { params } = useMatch(matchPattern);
+  const { params: { page } } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`);
+  const { params } = useRouteMatch(ALL_ROUTES);
+  const isRedirectToLearners = useShowLearnersTab();
  const isOnDesktop = useIsOnDesktop();
  let displaySidebar = useSidebarVisible();
  const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
+  const isFeedbackBannerVisible = getConfig().DISPLAY_FEEDBACK_BANNER === 'true';
  const {
    courseId, postId, topicId, category, learnerUsername,
  } = params;
@@ -56,7 +57,7 @@ const DiscussionsHome = () => {
  useFeedbackWrapper();
  /*  Display the content area if we are currently viewing/editing a post or creating one.
  If the window is larger than a particular size, show the sidebar for navigating between posts/topics.
-  However, for smaller screens or embeds, only show the sidebar if the content area isn't displayed. */
+  However, for smaller screens or embeds, onlyshow the sidebar if the content area isn't displayed. */
  const displayContentArea = (postId || postEditorVisible || (learnerUsername && postId));
  if (displayContentArea) { displaySidebar = isOnDesktop; }

@@ -85,7 +86,7 @@ const DiscussionsHome = () => {
          >
            <div
              className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
-                'pl-4 pr-2 py-0': enableInContextSidebar,
+                'pl-4 pr-3 py-0': enableInContextSidebar,
              })}
            >
              {!enableInContextSidebar && (
@@ -93,27 +94,16 @@ const DiscussionsHome = () => {
              )}
              <PostActionsBar />
            </div>
-            <DiscussionsRestrictionBanner />
+            {isFeedbackBannerVisible && <InformationBanner />}
+            <BlackoutInformationBanner />
          </div>
          {provider === DiscussionProvider.LEGACY && (
-            <Suspense fallback={(<Spinner />)}>
-              <Routes>
-                {[
-                  ROUTES.TOPICS.CATEGORY,
-                  ROUTES.TOPICS.CATEGORY_POST,
-                  ROUTES.TOPICS.CATEGORY_POST_EDIT,
-                  ROUTES.TOPICS.TOPIC,
-                  ROUTES.TOPICS.TOPIC_POST,
-                  ROUTES.TOPICS.TOPIC_POST_EDIT,
-                ].map((route) => (
-                  <Route
-                    key={route}
-                    path={route}
-                    element={<LegacyBreadcrumbMenu />}
-                  />
-                ))}
-              </Routes>
-            </Suspense>
+          <Suspense fallback={(<Spinner />)}>
+            <Route
+              path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
+              component={LegacyBreadcrumbMenu}
+            />
+          </Suspense>
          )}
          <div className="d-flex flex-row position-relative">
            <Suspense fallback={(<Spinner />)}>
@@ -125,29 +115,21 @@ const DiscussionsHome = () => {
              </Suspense>
            )}
            {!displayContentArea && (
-              <Routes>
-                <>
-                  {ROUTES.TOPICS.PATH.map(route => (
-                    <Route
-                      key={route}
-                      path={`${route}/*`}
-                      element={(enableInContext || enableInContextSidebar) ? <InContextEmptyTopics /> : <EmptyTopics />}
-                    />
-                  ))}
-                  <Route
-                    path={ROUTES.POSTS.MY_POSTS}
-                    element={<EmptyPosts subTitleMessage={messages.emptyMyPosts} />}
-                  />
-                  {[`${ROUTES.POSTS.PATH}/*`, ROUTES.POSTS.ALL_POSTS, ROUTES.LEARNERS.POSTS].map((route) => (
-                    <Route
-                      key={route}
-                      path={route}
-                      element={<EmptyPosts subTitleMessage={messages.emptyAllPosts} />}
-                    />
-                  ))}
-                  <Route path={ROUTES.LEARNERS.PATH} element={<EmptyLearners />} />
-                </>
-              </Routes>
+            <Switch>
+              <Route
+                path={Routes.TOPICS.PATH}
+                component={(enableInContext || enableInContextSidebar) ? InContextEmptyTopics : EmptyTopics}
+              />
+              <Route
+                path={Routes.POSTS.MY_POSTS}
+                render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyMyPosts} />}
+              />
+              <Route
+                path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.LEARNERS.POSTS]}
+                render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyAllPosts} />}
+              />
+              {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} />}
+            </Switch>
            )}
          </div>
          {!enableInContextSidebar && (
--- a/src/discussions/discussions-home/DiscussionsHome.test.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.test.jsx
@@ -5,7 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 import { Context as ResponsiveContext } from 'react-responsive';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
@@ -42,7 +42,7 @@ function renderComponent(location = `/${courseId}/`) {
  const wrapper = render(
    <IntlProvider locale="en">
      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <AppProvider store={store} wrapWithRouter={false}>
+        <AppProvider store={store}>
          <MemoryRouter initialEntries={[location]}>
            <DiscussionsHome />
          </MemoryRouter>
@@ -127,7 +127,7 @@ describe('DiscussionsHome', () => {

  test('header, course navigation bar and footer are only visible in Discussions MFE', async () => {
    renderComponent();
-    waitFor(() => expect(screen.queryByRole('banner')).toBeInTheDocument());
+    expect(screen.queryByRole('banner')).toBeInTheDocument();
    expect(document.getElementById('courseTabsNavigation')).toBeInTheDocument();
    expect(screen.queryByRole('contentinfo')).toBeInTheDocument();
  });
@@ -172,8 +172,7 @@ describe('DiscussionsHome', () => {
  it.each([
    { searchByEndPoint: 'category/section-topic-1' },
    { searchByEndPoint: 'topics' },
-  ])(
-    'should display No Topic selected message on inContext topic pages when user has yet to select a topic %s',
+  ])('should display No Topic selected message on inContext topic pages when user has yet to select a topic %s',
    async ({ searchByEndPoint }) => {
      axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
        enableInContext: true, provider: 'openedx', hasModerationPrivileges: true,
@@ -194,11 +193,12 @@ describe('DiscussionsHome', () => {
      await renderComponent(`/${courseId}/${searchByEndPoint}`);

      expect(screen.queryByText('No topic selected')).toBeInTheDocument();
-    },
-  );
+    });

  it('should display empty page message for empty learners list', async () => {
-    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {});
+    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
+      learners_tab_enabled: true,
+    });
    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
    await renderComponent(`/${courseId}/learners`);

--- a/src/discussions/discussions-home/FeedbackWrapper.jsx
+++ b/src/discussions/discussions-home/FeedbackWrapper.jsx
@@ -2,12 +2,11 @@ import { useEffect } from 'react';

 import { useSelector } from 'react-redux';

-import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';

 import { RequestStatus } from '../../data/constants';
 import {
-  selectConfigLoadingStatus,
+  selectconfigLoadingStatus,
  selectIsCourseAdmin,
  selectIsCourseStaff,
  selectUserIsGroupTa,
@@ -19,13 +18,13 @@ export default function useFeedbackWrapper() {
  const isUserGroupTA = useSelector(selectUserIsGroupTa);
  const isCourseAdmin = useSelector(selectIsCourseAdmin);
  const isCourseStaff = useSelector(selectIsCourseStaff);
-  const configStatus = useSelector(selectConfigLoadingStatus);
+  const configStatus = useSelector(selectconfigLoadingStatus);

  useEffect(() => {
    if (configStatus === RequestStatus.SUCCESSFUL) {
-      let url = getConfig().LEARNER_FEEDBACK_URL;
+      let url = '//w.usabilla.com/9e6036348fa1.js';
      if (isStaff || isUserGroupTA || isCourseAdmin || isCourseStaff) {
-        url = getConfig().STAFF_FEEDBACK_URL;
+        url = '//w.usabilla.com/767740a06856.js';
      }
      try {
        // eslint-disable-next-line no-undef
--- a/src/discussions/discussions-home/InformationBanner.jsx
+++ b/src/discussions/discussions-home/InformationBanner.jsx
@@ -0,0 +1,63 @@
+import React, { useCallback, useState } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, PageBanner } from '@edx/paragon';
+
+import { selectUserIsStaff, selectUserRoles } from '../data/selectors';
+import messages from '../messages';
+
+const InformationBanner = () => {
+  const intl = useIntl();
+  const [showBanner, setShowBanner] = useState(true);
+  const userRoles = useSelector(selectUserRoles);
+  const isAdmin = useSelector(selectUserIsStaff);
+  const learnMoreLink = 'https://openedx.atlassian.net/wiki/spaces/COMM/pages/3509551260/Overview+New+discussions+experience';
+  const TAFeedbackLink = process.env.TA_FEEDBACK_FORM;
+  const staffFeedbackLink = process.env.STAFF_FEEDBACK_FORM;
+  const hideLearnMoreButton = ((userRoles.includes('Student') && userRoles.length === 1) || !userRoles.length) && !isAdmin;
+  const showStaffLink = isAdmin || userRoles.includes('Moderator') || userRoles.includes('Administrator');
+
+  const handleDismiss = useCallback(() => {
+    setShowBanner(false);
+  }, []);
+
+  return (
+    <PageBanner
+      variant="light"
+      show={showBanner}
+      dismissible
+      onDismiss={handleDismiss}
+    >
+      <div className="font-weight-500">
+        {intl.formatMessage(messages.bannerMessage)}
+        {!hideLearnMoreButton
+          && (
+            <Hyperlink
+              destination={learnMoreLink}
+              target="_blank"
+              showLaunchIcon={false}
+              className="pl-2.5"
+              variant="muted"
+              isInline
+            >
+              {intl.formatMessage(messages.learnMoreBannerLink)}
+            </Hyperlink>
+          )}
+        <Hyperlink
+          destination={showStaffLink ? staffFeedbackLink : TAFeedbackLink}
+          target="_blank"
+          showLaunchIcon={false}
+          variant="muted"
+          className="pl-2.5"
+          isInline
+        >
+          {intl.formatMessage(messages.shareFeedback)}
+        </Hyperlink>
+      </div>
+    </PageBanner>
+  );
+};
+
+export default InformationBanner;
--- a/src/discussions/discussions-home/InformationBanner.test.jsx
+++ b/src/discussions/discussions-home/InformationBanner.test.jsx
@@ -0,0 +1,136 @@
+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 InformationBanner from './InformationBanner';
+
+import '../posts/data/__factories__';
+
+let store;
+let container;
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+const getConfigData = (isAdmin = true, roles = []) => ({
+  id: 'course-v1:edX+DemoX+Demo_Course',
+  userRoles: roles,
+  hasModerationPrivileges: false,
+  isGroupTa: false,
+  isUserAdmin: isAdmin,
+});
+
+function renderComponent() {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider value={{ courseId }}>
+          <InformationBanner />
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+  return container;
+}
+
+describe('Information Banner learner view', () => {
+  let element;
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: ['Student'],
+      },
+    });
+    store = initializeStore();
+    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student'])));
+    renderComponent(true);
+    element = await screen.findByRole('alert');
+  });
+
+  test('Test Banner is visible on app load', async () => {
+    expect(element).toHaveTextContent(messages.bannerMessage.defaultMessage);
+  });
+
+  test('Test Banner do not have learn more button', async () => {
+    expect(element).not.toHaveTextContent(messages.learnMoreBannerLink.defaultMessage);
+  });
+  test('Test Banner has share feedback button', async () => {
+    expect(element).toHaveTextContent(messages.shareFeedback.defaultMessage);
+  });
+});
+
+describe('Information Banner moderators/staff/admin view', () => {
+  let element;
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    store.dispatch(fetchConfigSuccess(getConfigData(true, ['Student', 'Moderator'])));
+    renderComponent(true);
+    element = await screen.findByRole('alert');
+  });
+
+  test('Test Banner is visible on app load', async () => {
+    expect(element).toHaveTextContent(messages.bannerMessage.defaultMessage);
+  });
+
+  test('Test Banner has learn more button', async () => {
+    expect(element).toHaveTextContent(messages.learnMoreBannerLink.defaultMessage);
+  });
+  test('Test Banner has share feedback button', async () => {
+    expect(element).toHaveTextContent(messages.shareFeedback.defaultMessage);
+  });
+});
+
+describe('User is redirected according to url according to role', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  test('TAs are redirected to learners feedback form', async () => {
+    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student', 'Community TA'])));
+    renderComponent(true);
+    expect(screen.getByText(messages.shareFeedback.defaultMessage)
+      .closest('a'))
+      .toHaveAttribute('href', process.env.TA_FEEDBACK_FORM);
+  });
+
+  test('moderators/administrators are redirected to moderators feedback form', async () => {
+    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student', 'Moderator', 'Administrator'])));
+    renderComponent(true);
+    expect(screen.getByText(messages.shareFeedback.defaultMessage)
+      .closest('a'))
+      .toHaveAttribute('href', process.env.STAFF_FEEDBACK_FORM);
+  });
+
+  test('user with only isAdmin true are redirected to moderators feedback form', async () => {
+    store.dispatch(fetchConfigSuccess(getConfigData(true, ['Student'])));
+    renderComponent(true);
+    expect(screen.getByText(messages.shareFeedback.defaultMessage)
+      .closest('a'))
+      .toHaveAttribute('href', process.env.STAFF_FEEDBACK_FORM);
+  });
+});
--- a/src/discussions/empty-posts/EmptyPosts.jsx
+++ b/src/discussions/empty-posts/EmptyPosts.jsx
@@ -8,7 +8,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useIsOnDesktop } from '../data/hooks';
 import { selectAreThreadsFiltered, selectPostThreadCount } from '../data/selectors';
 import messages from '../messages';
-// eslint-disable-next-line import/no-cycle
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';

--- a/src/discussions/empty-posts/EmptyPosts.test.jsx
+++ b/src/discussions/empty-posts/EmptyPosts.test.jsx
@@ -26,7 +26,7 @@ function renderComponent(location = `/${courseId}/`) {
  return render(
    <IntlProvider locale="en">
      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <AppProvider store={store} wrapWithRouter={false}>
+        <AppProvider store={store}>
          <MemoryRouter initialEntries={[location]}>
            <EmptyPosts subTitleMessage={messages.emptyMyPosts} />
          </MemoryRouter>
@@ -57,7 +57,7 @@ describe('EmptyPage', () => {
    store = initializeStore();
  });

-  test('"posts you\'ve interacted with" message shown when no posts in system', async () => {
+  test('"posts youve interacted with" message shown when no posts in system', async () => {
    renderComponent(`/${courseId}/my-posts/`);
    expect(
      screen.queryByText(messages.emptyMyPosts.defaultMessage),
--- a/src/discussions/empty-posts/EmptyTopics.jsx
+++ b/src/discussions/empty-posts/EmptyTopics.jsx
@@ -1,24 +1,24 @@
 import React, { useCallback } from 'react';

 import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useRouteMatch } from 'react-router';

 import { useIntl } from '@edx/frontend-platform/i18n';

+import { ALL_ROUTES } from '../../data/constants';
 import { useIsOnDesktop, useTotalTopicThreadCount } from '../data/hooks';
 import { selectTopicThreadCount } from '../data/selectors';
 import messages from '../messages';
-// eslint-disable-next-line import/no-cycle
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';

 const EmptyTopics = () => {
  const intl = useIntl();
-  const { topicId } = useParams();
+  const match = useRouteMatch(ALL_ROUTES);
  const dispatch = useDispatch();
  const isOnDesktop = useIsOnDesktop();
  const hasGlobalThreads = useTotalTopicThreadCount() > 0;
-  const topicThreadCount = useSelector(selectTopicThreadCount(topicId));
+  const topicThreadCount = useSelector(selectTopicThreadCount(match.params.topicId));

  const addPost = useCallback(() => (
    dispatch(showPostEditor())
@@ -34,7 +34,7 @@ const EmptyTopics = () => {
    return null;
  }

-  if (topicId) {
+  if (match.params.topicId) {
    if (topicThreadCount > 0) {
      title = messages.noPostSelected;
    } else {
--- a/src/discussions/empty-posts/EmptyTopics.test.jsx
+++ b/src/discussions/empty-posts/EmptyTopics.test.jsx
@@ -2,14 +2,14 @@ import { render, screen } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
 import { Context as ResponsiveContext } from 'react-responsive';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

-import { getApiBaseUrl, Routes as ROUTES } from '../../data/constants';
+import { getApiBaseUrl } from '../../data/constants';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import messages from '../messages';
@@ -26,12 +26,9 @@ function renderComponent(location = `/${courseId}/topics/`) {
  return render(
    <IntlProvider locale="en">
      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <AppProvider store={store} wrapWithRouter={false}>
+        <AppProvider store={store}>
          <MemoryRouter initialEntries={[location]}>
-            <Routes>
-              <Route path={ROUTES.TOPICS.ALL} element={<EmptyTopics />} />
-              <Route path={ROUTES.TOPICS.TOPIC} element={<EmptyTopics />} />
-            </Routes>
+            <EmptyTopics />
          </MemoryRouter>
        </AppProvider>
      </ResponsiveContext.Provider>
--- a/src/discussions/empty-posts/index.js
+++ b/src/discussions/empty-posts/index.js
@@ -1,5 +1,4 @@
 export { default as EmptyLearners } from './EmptyLearners';
 export { default as EmptyPage } from './EmptyPage';
-// eslint-disable-next-line import/no-cycle
 export { default as EmptyPosts } from './EmptyPosts';
 export { default as EmptyTopics } from './EmptyTopics';
--- a/src/discussions/in-context-topics/TopicPostsView.test.jsx
+++ b/src/discussions/in-context-topics/TopicPostsView.test.jsx
@@ -4,9 +4,7 @@ import {
 import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
-import {
-  generatePath, MemoryRouter, Route, Routes, useLocation,
-} from 'react-router-dom';
+import { generatePath, MemoryRouter, Route } from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
@@ -14,7 +12,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

 import { PostActionsBar } from '../../components';
-import { Routes as ROUTES } from '../../data/constants';
+import { Routes } from '../../data/constants';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { DiscussionContext } from '../common/context';
@@ -37,21 +35,16 @@ let axiosMock;
 let lastLocation;
 let container;

-const LocationComponent = () => {
-  lastLocation = useLocation();
-  return null;
-};
-
 async function renderComponent({ topicId, category } = { }) {
  let path = `/${courseId}/topics`;
  if (topicId) {
-    path = generatePath(ROUTES.POSTS.PATH, { courseId, topicId });
+    path = generatePath(Routes.POSTS.PATH, { courseId, topicId });
  } else if (category) {
-    path = generatePath(ROUTES.TOPICS.CATEGORY, { courseId, category });
+    path = generatePath(Routes.TOPICS.CATEGORY, { courseId, category });
  }
  const wrapper = await render(
    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
+      <AppProvider store={store}>
        <DiscussionContext.Provider value={{
          courseId,
          topicId,
@@ -60,35 +53,19 @@ async function renderComponent({ topicId, category } = { }) {
        }}
        >
          <MemoryRouter initialEntries={[path]}>
-            <Routes>
-              {
-                [
-                  ROUTES.POSTS.PATH,
-                  ROUTES.TOPICS.CATEGORY,
-                ].map((route) => (
-                  <Route
-                    key={route}
-                    path={route}
-                    element={(
-                      <>
-                        <TopicPostsView />
-                        <LocationComponent />
-                      </>
-                    )}
-                  />
-                ))
-              }
-              <Route
-                path={ROUTES.TOPICS.ALL}
-                element={(
-                  <>
-                    <PostActionsBar />
-                    <TopicsView />
-                    <LocationComponent />
-                  </>
-                )}
-              />
-            </Routes>
+            <Route exact path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}>
+              <TopicPostsView />
+            </Route>
+            <Route exact path={[Routes.TOPICS.ALL]}>
+              <PostActionsBar />
+              <TopicsView />
+            </Route>
+            <Route
+              render={({ location }) => {
+                lastLocation = location;
+                return null;
+              }}
+            />
          </MemoryRouter>
        </DiscussionContext.Provider>
      </AppProvider>
@@ -115,6 +92,7 @@ describe('InContext Topic Posts View', () => {
        enableInContext: true,
        provider: 'openedx',
        hasModerationPrivileges: true,
+        blackouts: [],
      },
    });
    Factory.resetAll();
@@ -228,8 +206,7 @@ describe('InContext Topic Posts View', () => {
  test.each([
    { searchText: 'hello world', output: 'Showing 0 results for', resultCount: 0 },
    { searchText: 'introduction', output: 'Showing 8 results for', resultCount: 8 },
-  ])(
-    'It should have a search bar with a clear button and \'$output\' results found text.',
+  ])('It should have a search bar with a clear button and \'$output\' results found text.',
    async ({ searchText, output, resultCount }) => {
      await setupTopicsMockResponse();
      await renderComponent();
@@ -249,8 +226,7 @@ describe('InContext Topic Posts View', () => {
        expect(clearButton).toBeInTheDocument();
        expect(units).toHaveLength(resultCount);
      });
-    },
-  );
+    });

  it('When click on the clear button it should move to main topics pages.', async () => {
    await setupTopicsMockResponse();
@@ -277,8 +253,7 @@ describe('InContext Topic Posts View', () => {
    });
  });

-  it(
-    'should display Nothing here yet and No topic exists message when topics and selectedSubsectionUnits are empty',
+  it('should display Nothing here yet and No topic exists message when topics and selectedSubsectionUnits are empty',
    async () => {
      await setupTopicsMockResponse(0, 0, 0);
      await renderComponent({ topicId: 'test-topic', category: 'test-category' });
@@ -286,8 +261,7 @@ describe('InContext Topic Posts View', () => {
      await waitFor(() => expect(within(container).queryByText('Nothing here yet')).toBeInTheDocument());
      expect(within(container).queryByText('No topic exists')).toBeInTheDocument();
      expect(within(container).queryByText('Unnamed Topic')).toBeInTheDocument();
-    },
-  );
+    });

  it('should display all topics when search by an empty search string', async () => {
    await setupTopicsMockResponse();
--- a/src/discussions/in-context-topics/TopicsView.test.jsx
+++ b/src/discussions/in-context-topics/TopicsView.test.jsx
@@ -5,9 +5,7 @@ import {
 import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
-import {
-  MemoryRouter, Route, Routes, useLocation,
-} from 'react-router-dom';
+import { MemoryRouter, Route } from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
@@ -34,21 +32,24 @@ let axiosMock;
 let lastLocation;
 let container;

-const LocationComponent = () => {
-  lastLocation = useLocation();
-  return null;
-};
-
 function renderComponent() {
  const wrapper = render(
    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
+      <AppProvider store={store}>
        <DiscussionContext.Provider value={{ courseId, category }}>
          <MemoryRouter initialEntries={[`/${courseId}/topics/`]}>
-            <Routes>
-              <Route path="/:courseId/topics/*" element={<><TopicsView /><LocationComponent /></>} />
-              <Route path="/:courseId/category/:category" element={<><TopicPostsView /><LocationComponent /></>} />
-            </Routes>
+            <Route path="/:courseId/topics/">
+              <TopicsView />
+            </Route>
+            <Route path="/:courseId/category/:category">
+              <TopicPostsView />
+            </Route>
+            <Route
+              render={({ location }) => {
+                lastLocation = location;
+                return null;
+              }}
+            />
          </MemoryRouter>
        </DiscussionContext.Provider>
      </AppProvider>
--- a/src/discussions/in-context-topics/components/BackButton.jsx
+++ b/src/discussions/in-context-topics/components/BackButton.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useNavigate } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';

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

 import messages from '../messages';

-const BackButton = ({
+function BackButton({
  intl, path, title, loading,
-}) => {
-  const navigate = useNavigate();
+}) {
+  const history = useHistory();

  return (
    <>
@@ -22,7 +22,7 @@ const BackButton = ({
          iconAs={Icon}
          style={{ padding: '18px' }}
          size="inline"
-          onClick={() => navigate(path)}
+          onClick={() => history.push(path)}
          alt={intl.formatMessage(messages.backAlt)}
        />
        <div className="d-flex flex-fill justify-content-center align-items-center mr-4.5">
@@ -32,7 +32,7 @@ const BackButton = ({
      <div className="border-bottom border-light-400" />
    </>
  );
-};
+}

 BackButton.propTypes = {
  intl: intlShape.isRequired,
--- a/src/discussions/in-context-topics/components/EmptyTopics.jsx
+++ b/src/discussions/in-context-topics/components/EmptyTopics.jsx
@@ -1,10 +1,11 @@
 import React, { useCallback, useContext } from 'react';

 import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useRouteMatch } from 'react-router';

 import { useIntl } from '@edx/frontend-platform/i18n';

+import { ALL_ROUTES } from '../../../data/constants';
 import { DiscussionContext } from '../../common/context';
 import { useIsOnDesktop } from '../../data/hooks';
 import { selectPostThreadCount } from '../../data/selectors';
@@ -15,11 +16,11 @@ import { selectCourseWareThreadsCount, selectTotalTopicsThreadsCount } from '../

 const EmptyTopics = () => {
  const intl = useIntl();
-  const { category, topicId } = useParams();
+  const match = useRouteMatch(ALL_ROUTES);
  const dispatch = useDispatch();
  const isOnDesktop = useIsOnDesktop();
  const { enableInContextSidebar } = useContext(DiscussionContext);
-  const courseWareThreadsCount = useSelector(selectCourseWareThreadsCount(category));
+  const courseWareThreadsCount = useSelector(selectCourseWareThreadsCount(match.params.category));
  const topicThreadsCount = useSelector(selectPostThreadCount);
  // hasGlobalThreads is used to determine if there are any post available in courseware and non-courseware topics
  const hasGlobalThreads = useSelector(selectTotalTopicsThreadsCount) > 0;
@@ -38,7 +39,7 @@ const EmptyTopics = () => {
    return null;
  }

-  if (topicId) {
+  if (match.params.topicId) {
    if (topicThreadsCount > 0) {
      title = messages.noPostSelected;
    } else {
@@ -47,7 +48,7 @@ const EmptyTopics = () => {
      subTitle = messages.emptyTopic;
      fullWidth = true;
    }
-  } else if (category) {
+  } else if (match.params.category) {
    if (enableInContextSidebar && topicThreadsCount > 0) {
      title = messages.noPostSelected;
    } else if (courseWareThreadsCount > 0) {
--- a/src/discussions/in-context-topics/data/factories/inContextTopics.factory.js
+++ b/src/discussions/in-context-topics/data/factories/inContextTopics.factory.js
@@ -20,21 +20,12 @@ Factory.define('sub-section')
  .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}-topic-${idx}`)
  .sequence('display-name', ['sectionPrefix'], (idx, sectionPrefix) => `Introduction ${sectionPrefix + idx}`)
  .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
-  .sequence(
-    'legacy_web_url',
-    ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}?experience=legacy`,
-  )
-  .sequence(
-    'lms_web_url',
-    ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}`,
-  )
-  .sequence(
-    'student_view_url',
-    ['id', 'courseId'],
-    (idx, id) => `${getApiBaseUrl}/xblock/block-v1:${id}`,
-  )
+  .sequence('legacy_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}?experience=legacy`)
+  .sequence('lms_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}`)
+  .sequence('student_view_url', ['id', 'courseId'],
+    (idx, id) => `${getApiBaseUrl}/xblock/block-v1:${id}`)
  .attr('type', null, 'sequential')
  .attr('activeFlags', null, true)
  .attr('thread_counts', ['discussionCount', 'questionCount'], (discCount, questCount) => {
@@ -60,21 +51,12 @@ Factory.define('section')
  .attr('courseware', null, true)
  .sequence('display-name', (idx) => `Introduction ${idx}`)
  .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
-  .sequence(
-    'legacy_web_url',
-    ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}?experience=legacy`,
-  )
-  .sequence(
-    'lms_web_url',
-    ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`,
-  )
-  .sequence(
-    'student_view_url',
-    ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/xblock/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`,
-  )
+  .sequence('legacy_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}?experience=legacy`)
+  .sequence('lms_web_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`)
+  .sequence('student_view_url', ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/xblock/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`)
  .attr('type', null, 'chapter')
  .attr('children', ['id', 'display-name'], (id, name) => {
    Factory.reset('sub-section');
--- a/src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx
+++ b/src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx
@@ -8,7 +8,7 @@ import { SearchField } from '@edx/paragon';
 import { setFilter } from '../data';
 import messages from '../messages';

-const TopicSearchResultBar = ({ intl }) => {
+function TopicSearchResultBar({ intl }) {
  const dispatch = useDispatch();

  return (
@@ -21,7 +21,7 @@ const TopicSearchResultBar = ({ intl }) => {
      />
    </div>
  );
-};
+}

 TopicSearchResultBar.propTypes = {
  intl: intlShape.isRequired,
--- a/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx
+++ b/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx
@@ -2,7 +2,8 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';

 import classNames from 'classnames';
-import { Link, useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';

 import { useIntl } from '@edx/frontend-platform/i18n';

@@ -40,7 +41,7 @@ const SectionBaseGroup = ({
        role="option"
        data-subsection-id={subsection.id}
        data-testid="subsection-group"
-        to={sectionUrl(subsection.id)()}
+        to={sectionUrl(subsection.id)}
        onClick={() => isSelected(subsection.id)}
        aria-current={isSelected(section.id) ? 'page' : undefined}
        tabIndex={(isSelected(subsection.id) || index === 0) ? 0 : -1}
--- a/src/discussions/in-context-topics/topic/Topic.jsx
+++ b/src/discussions/in-context-topics/topic/Topic.jsx
@@ -1,11 +1,11 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars, react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';

 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
-import { Link, useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';

 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
@@ -41,7 +41,7 @@ const Topic = ({
          'border-light-400 border-bottom': showDivider,
        })}
        data-topic-id={topic.id}
-        to={topicUrl()}
+        to={topicUrl}
        onClick={() => isSelected(topic.id)}
        aria-current={isSelected(topic.id) ? 'page' : undefined}
        role="option"
--- a/src/discussions/learners/LearnerPostsView.jsx
+++ b/src/discussions/learners/LearnerPostsView.jsx
@@ -4,7 +4,7 @@ import React, {

 import capitalize from 'lodash/capitalize';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';

 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -35,7 +35,7 @@ import messages from './messages';
 const LearnerPostsView = () => {
  const intl = useIntl();
  const location = useLocation();
-  const navigate = useNavigate();
+  const history = useHistory();
  const dispatch = useDispatch();

  const postsIds = useSelector(selectAllThreadsIds);
@@ -83,7 +83,7 @@ const LearnerPostsView = () => {
          iconAs={Icon}
          style={{ padding: '18px' }}
          size="inline"
-          onClick={() => navigate({ ...discussionsPath(Routes.LEARNERS.PATH, { courseId })(location) })}
+          onClick={() => history.push(discussionsPath(Routes.LEARNERS.PATH, { courseId })(location))}
          alt={intl.formatMessage(messages.back)}
        />
        <div className="text-primary-500 font-style font-weight-bold py-2.5">
--- a/src/discussions/learners/LearnerPostsView.test.jsx
+++ b/src/discussions/learners/LearnerPostsView.test.jsx
@@ -6,9 +6,7 @@ import {
 import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
-import {
-  MemoryRouter, Route, Routes, useLocation,
-} from 'react-router-dom';
+import { MemoryRouter, Route } from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
@@ -35,26 +33,26 @@ const username = 'abc123';
 let container;
 let lastLocation;

-const LocationComponent = () => {
-  lastLocation = useLocation();
-  return null;
-};
-
 async function renderComponent() {
  const wrapper = render(
    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
+      <AppProvider store={store}>
        <DiscussionContext.Provider
          value={{
            learnerUsername: username,
            courseId,
-            page: 'learners',
          }}
        >
          <MemoryRouter initialEntries={[`/${courseId}/learners/${username}/posts`]}>
-            <Routes>
-              <Route path="/:courseId/learners/:learnerUsername?/posts?" element={<><LearnerPostsView /><LocationComponent /></>} />
-            </Routes>
+            <Route path="/:courseId/learners/:learnerUsername/posts">
+              <LearnerPostsView />
+            </Route>
+            <Route
+              render={({ location }) => {
+                lastLocation = location;
+                return null;
+              }}
+            />
          </MemoryRouter>
        </DiscussionContext.Provider>
      </AppProvider>
@@ -112,8 +110,7 @@ describe('Learner Posts View', () => {
    expect(backButton).toBeInTheDocument();
  });

-  test(
-    'Learner title bar should redirect to the learners list when clicking on the back button',
+  test('Learner title bar should redirect to the learners list when clicking on the back button',
    async () => {
      await renderComponent();

@@ -125,8 +122,7 @@ describe('Learner Posts View', () => {
      await waitFor(() => {
        expect(lastLocation.pathname.endsWith('/learners')).toBeTruthy();
      });
-    },
-  );
+    });

  it('should display a post-filter bar and All posts sorted by recent activity text.', async () => {
    await renderComponent();
--- a/src/discussions/learners/LearnersView.jsx
+++ b/src/discussions/learners/LearnersView.jsx
@@ -1,14 +1,16 @@
 import React, { useCallback, useEffect, useMemo } from 'react';

 import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import {
+  Redirect, useLocation, useParams,
+} from 'react-router';

 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Spinner } from '@edx/paragon';

 import SearchInfo from '../../components/SearchInfo';
-import { RequestStatus } from '../../data/constants';
-import { selectConfigLoadingStatus } from '../data/selectors';
+import { RequestStatus, Routes } from '../../data/constants';
+import { selectconfigLoadingStatus, selectLearnersTabEnabled } from '../data/selectors';
 import NoResults from '../posts/NoResults';
 import {
  learnersLoadingStatus,
@@ -25,21 +27,25 @@ import messages from './messages';
 const LearnersView = () => {
  const intl = useIntl();
  const { courseId } = useParams();
+  const location = useLocation();
  const dispatch = useDispatch();
  const orderBy = useSelector(selectLearnerSorting());
  const nextPage = useSelector(selectLearnerNextPage());
  const loadingStatus = useSelector(learnersLoadingStatus());
  const usernameSearch = useSelector(selectUsernameSearch());
-  const courseConfigLoadingStatus = useSelector(selectConfigLoadingStatus);
+  const courseConfigLoadingStatus = useSelector(selectconfigLoadingStatus);
+  const learnersTabEnabled = useSelector(selectLearnersTabEnabled);
  const learners = useSelector(selectAllLearners);

  useEffect(() => {
-    if (usernameSearch) {
-      dispatch(fetchLearners(courseId, { orderBy, usernameSearch }));
-    } else {
-      dispatch(fetchLearners(courseId, { orderBy }));
+    if (learnersTabEnabled) {
+      if (usernameSearch) {
+        dispatch(fetchLearners(courseId, { orderBy, usernameSearch }));
+      } else {
+        dispatch(fetchLearners(courseId, { orderBy }));
+      }
    }
-  }, [courseId, orderBy, usernameSearch]);
+  }, [courseId, orderBy, learnersTabEnabled, usernameSearch]);

  const loadPage = useCallback(async () => {
    if (nextPage) {
@@ -57,12 +63,11 @@ const LearnersView = () => {

  const renderLearnersList = useMemo(() => (
    (
-      courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && learners.map((learner) => (
+      courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && learnersTabEnabled && learners.map((learner) => (
        <LearnerCard learner={learner} key={learner.username} />
      ))
-    // eslint-disable-next-line react/jsx-no-useless-fragment
    ) || <></>
-  ), [courseConfigLoadingStatus, learners]);
+  ), [courseConfigLoadingStatus, learnersTabEnabled, learners]);

  return (
    <div className="d-flex flex-column border-right border-light-400">
@@ -77,6 +82,14 @@ const LearnersView = () => {
        />
      )}
      <div className="list-group list-group-flush learner" role="list">
+        {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && !learnersTabEnabled && (
+        <Redirect
+          to={{
+            ...location,
+            pathname: Routes.DISCUSSIONS.PATH,
+          }}
+        />
+        )}
        {renderLearnersList}
        {loadingStatus === RequestStatus.IN_PROGRESS ? (
          <div className="d-flex justify-content-center p-4">
--- a/src/discussions/learners/LearnersView.test.jsx
+++ b/src/discussions/learners/LearnersView.test.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable default-param-last */
 import React from 'react';

 import {
@@ -7,7 +6,7 @@ import {
 import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route } from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
@@ -34,7 +33,7 @@ let container;
 function renderComponent() {
  const wrapper = render(
    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
+      <AppProvider store={store}>
        <DiscussionContext.Provider value={{
          page: 'learners',
          learnerUsername: 'learner-1',
@@ -42,17 +41,10 @@ function renderComponent() {
        }}
        >
          <MemoryRouter initialEntries={[`/${courseId}/`]}>
-            <Routes>
-              <Route
-                path="/:courseId/"
-                element={(
-                  <>
-                    <PostActionsBar />
-                    <LearnersView />
-                  </>
-                )}
-              />
-            </Routes>
+            <Route path="/:courseId/">
+              <PostActionsBar />
+              <LearnersView />
+            </Route>
          </MemoryRouter>
        </DiscussionContext.Provider>
      </AppProvider>
@@ -69,6 +61,7 @@ describe('LearnersView', () => {
        username: 'test_user',
        administrator: true,
        roles: [],
+        learnersTabEnabled: false,
      },
    });
    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
@@ -105,6 +98,7 @@ describe('LearnersView', () => {

  async function assignPrivilages(hasModerationPrivileges = false) {
    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
+      learners_tab_enabled: true,
      user_is_privileged: true,
      hasModerationPrivileges,
    });
@@ -112,6 +106,13 @@ describe('LearnersView', () => {
    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
  }

+  test('Learners tab is disabled by default', async () => {
+    await setUpLearnerMockResponse();
+    await renderComponent();
+
+    expect(screen.queryByText('learner-1')).not.toBeInTheDocument();
+  });
+
  test('Learners tab is enabled', async () => {
    await setUpLearnerMockResponse();
    await assignPrivilages();
@@ -200,8 +201,7 @@ describe('LearnersView', () => {
      username:
        ['learner-1', 'learner-2'],
    },
-  ])(
-    'should have a search bar with a clear button and \'$output\' results found text.',
+  ])('should have a search bar with a clear button and \'$output\' results found text.',
    async ({
      searchText, output, learnersCount, username,
    }) => {
@@ -227,8 +227,7 @@ describe('LearnersView', () => {
        expect(clearButton).toBeInTheDocument();
        expect(leaners).toHaveLength(learnersCount);
      });
-    },
-  );
+    });

  test('When click on the clear button it should move to a list of all learners.', async () => {
    await setUpLearnerMockResponse();
@@ -258,8 +257,7 @@ describe('LearnersView', () => {
    expect(learners).toHaveLength(3);
  });

-  it(
-    'should display reported and previously reported message by passing activeFlags or inactiveFlags',
+  it('should display reported and previously reported message by passing activeFlags or inactiveFlags',
    async () => {
      await setUpLearnerMockResponse(2, 2, 1, ['learner-1', 'learner-2'], '', 1, 1);
      await assignPrivilages(true);
@@ -276,8 +274,7 @@ describe('LearnersView', () => {
      expect(reportedIcon).toBeInTheDocument();
      expect(reported).toBeInTheDocument();
      expect(previouslyReported).toBeInTheDocument();
-    },
-  );
+    });

  it('should display load more button and display more learners by clicking on button.', async () => {
    await setUpLearnerMockResponse();
--- a/src/discussions/learners/data/api.test.jsx
+++ b/src/discussions/learners/data/api.test.jsx
@@ -29,8 +29,7 @@ describe('Learner api test cases', () => {
    axiosMock.reset();
  });

-  it(
-    'Successfully get and store API response for the learner\'s list and learners posts in redux',
+  it('Successfully get and store API response for the learner\'s list and learners posts in redux',
    async () => {
      const learners = await setupLearnerMockResponse();
      const threads = await setupPostsMockResponse();
@@ -39,23 +38,20 @@ describe('Learner api test cases', () => {
      expect(Object.values(learners.learnerProfiles)).toHaveLength(3);
      expect(threads.status).toEqual('successful');
      expect(Object.values(threads.threadsById)).toHaveLength(2);
-    },
-  );
+    });

  it.each([
    { status: 'statusUnread', search: 'Title', cohort: 'post' },
    { status: 'statusUnanswered', search: 'Title', cohort: 'post' },
    { status: 'statusReported', search: 'Title', cohort: 'post' },
    { status: 'statusUnresponded', search: 'Title', cohort: 'post' },
-  ])(
-    'Successfully fetch user posts based on %s filters',
+  ])('Successfully fetch user posts based on %s filters',
    async ({ status, search, cohort }) => {
      const threads = await setupPostsMockResponse({ filters: { status, search, cohort } });

      expect(threads.status).toEqual('successful');
      expect(Object.values(threads.threadsById)).toHaveLength(2);
-    },
-  );
+    });

  it('Failed to fetch learners', async () => {
    const learners = await setupLearnerMockResponse({ learnerCourseId: courseId2 });
--- a/src/discussions/learners/data/redux.test.jsx
+++ b/src/discussions/learners/data/redux.test.jsx
@@ -37,8 +37,7 @@ describe('Learner redux test cases', () => {
  test('Successfully load initial states in redux', async () => {
    executeThunk(
      fetchLearners('course-v1:edX+DemoX+Demo_Course', { usernameSearch: 'learner-1' }),
-      store.dispatch,
-      store.getState,
+      store.dispatch, store.getState,
    );
    const { learners } = store.getState();

@@ -56,8 +55,7 @@ describe('Learner redux test cases', () => {
    expect(learners.postFilter.cohort).toEqual('');
  });

-  test(
-    'Successfully store a learner posts stats data as pages object in redux',
+  test('Successfully store a learner posts stats data as pages object in redux',
    async () => {
      const learners = await setupLearnerMockResponse();
      const page = learners.pages[0];
@@ -67,11 +65,9 @@ describe('Learner redux test cases', () => {
      expect(statsObject.responses).toEqual(3);
      expect(statsObject.threads).toEqual(1);
      expect(statsObject.replies).toEqual(0);
-    },
-  );
+    });

-  test(
-    'Successfully store the nextPage, totalPages, totalLearners, and sortedBy data in redux',
+  test('Successfully store the nextPage, totalPages, totalLearners, and sortedBy data in redux',
    async () => {
      const learners = await setupLearnerMockResponse();

@@ -79,8 +75,7 @@ describe('Learner redux test cases', () => {
      expect(learners.totalPages).toEqual(2);
      expect(learners.totalLearners).toEqual(3);
      expect(learners.sortedBy).toEqual('activity');
-    },
-  );
+    });

  test('Successfully updated the learner\'s sort data in redux', async () => {
    const learners = await setupLearnerMockResponse();
@@ -111,8 +106,7 @@ describe('Learner redux test cases', () => {
    expect(updatedLearners.pages).toHaveLength(0);
  });

-  test(
-    'Successfully update the learner\'s search query in redux when searching for a learner',
+  test('Successfully update the learner\'s search query in redux when searching for a learner',
    async () => {
      const learners = await setupLearnerMockResponse();

@@ -122,6 +116,5 @@ describe('Learner redux test cases', () => {
      const updatedLearners = store.getState().learners;

      expect(updatedLearners.usernameSearch).toEqual('learner-2');
-    },
-  );
+    });
 });
--- a/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx
+++ b/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx
@@ -12,7 +12,7 @@ import { fetchCourseCohorts } from '../../cohorts/data/thunks';
 import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
 import { setPostFilter } from '../data/slices';

-const LearnerPostFilterBar = () => {
+function LearnerPostFilterBar() {
  const dispatch = useDispatch();
  const { courseId } = useParams();
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
@@ -98,6 +98,6 @@ const LearnerPostFilterBar = () => {
      showCohortsFilter={userHasModerationPrivileges || userIsGroupTa}
    />
  );
-};
+}

 export default LearnerPostFilterBar;
--- a/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.test.jsx
+++ b/src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.test.jsx
@@ -5,10 +5,12 @@ import {
  waitFor,
 } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
+import { generatePath, MemoryRouter, Route } from 'react-router';

 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';

+import { Routes } from '../../../data/constants';
 import { initializeStore } from '../../../store';
 import { DiscussionContext } from '../../common/context';
 import LearnerPostFilterBar from './LearnerPostFilterBar';
@@ -16,22 +18,33 @@ import LearnerPostFilterBar from './LearnerPostFilterBar';
 let store;
 const username = 'abc123';
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
-
-const renderComponent = () => render(
-  <IntlProvider locale="en">
-    <AppProvider store={store}>
-      <DiscussionContext.Provider
-        value={{
-          learnerUsername: username,
-          courseId,
-        }}
-      >
-        <LearnerPostFilterBar />
-      </DiscussionContext.Provider>
-    </AppProvider>
-  </IntlProvider>,
+const path = generatePath(
+  Routes.LEARNERS.POSTS,
+  { courseId, learnerUsername: username },
 );

+function renderComponent() {
+  return render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <DiscussionContext.Provider
+          value={{
+            learnerUsername: username,
+            courseId,
+          }}
+        >
+          <MemoryRouter initialEntries={[path]}>
+            <Route
+              path={Routes.LEARNERS.POSTS}
+              component={LearnerPostFilterBar}
+            />
+          </MemoryRouter>
+        </DiscussionContext.Provider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+}
+
 describe('LearnerPostFilterBar', () => {
  beforeEach(async () => {
    initializeMockApp({
--- a/src/discussions/learners/learner/LearnerCard.jsx
+++ b/src/discussions/learners/learner/LearnerCard.jsx
@@ -18,7 +18,7 @@ const LearnerCard = ({ learner }) => {
    0: enableInContextSidebar ? 'in-context' : undefined,
    learnerUsername: learner.username,
    courseId,
-  })();
+  });

  return (
    <Link
--- a/src/discussions/messages.js
+++ b/src/discussions/messages.js
@@ -168,9 +168,24 @@ const messages = defineMessages({
    defaultMessage: 'anonymous',
    description: 'Author name displayed when a post is anonymous',
  },
+  bannerMessage: {
+    id: 'discussion.banner.welcomeMessage',
+    defaultMessage: '🎉 Welcome to the new and improved discussions experience!',
+    description: 'Information banner welcome text',
+  },
+  learnMoreBannerLink: {
+    id: 'discussion.banner.learnMore',
+    defaultMessage: 'Learn more',
+    description: 'learn more button to redirect users to know more about new discussion experience ',
+  },
+  shareFeedback: {
+    id: 'discussion.banner.shareFeedback',
+    defaultMessage: 'Share feedback',
+    description: 'Share feedback button to open feedback forms',
+  },
  blackoutDiscussionInformation: {
    id: 'discussion.blackoutBanner.information',
-    defaultMessage: 'Posting in discussions is disabled by the course team',
+    defaultMessage: 'Posting in discussions is temporarily disabled by the course team',
    description: 'Informative text when discussion posting is disabled',
  },
  imageWarningMessage: {
--- a/src/discussions/navigation/breadcrumb-menu/BreadcrumbDropdown.jsx
+++ b/src/discussions/navigation/breadcrumb-menu/BreadcrumbDropdown.jsx
@@ -29,7 +29,7 @@ const BreadcrumbDropdown = ({
        key="null"
        active={!currentItem}
        as={Link}
-        to={showAllPath()}
+        to={showAllPath}
      >
        {showAllMsg}
      </Dropdown.Item>
@@ -39,7 +39,7 @@ const BreadcrumbDropdown = ({
          key={itemLabelFunc(item)}
          active={itemActiveFunc(item)}
          as={Link}
-          to={itemPathFunc(item)()}
+          to={itemPathFunc(item)}
        >
          {itemLabelFunc(item)}
        </Dropdown.Item>
--- a/src/discussions/navigation/breadcrumb-menu/LegacyBreadcrumbMenu.jsx
+++ b/src/discussions/navigation/breadcrumb-menu/LegacyBreadcrumbMenu.jsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';

 import { useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useRouteMatch } from 'react-router';

 import { Routes } from '../../../data/constants';
 import {
@@ -15,10 +15,12 @@ import BreadcrumbDropdown from './BreadcrumbDropdown';

 const LegacyBreadcrumbMenu = () => {
  const {
-    courseId,
-    category,
-    topicId: currentTopicId,
-  } = useParams();
+    params: {
+      courseId,
+      category,
+      topicId: currentTopicId,
+    },
+  } = useRouteMatch([Routes.TOPICS.CATEGORY, Routes.TOPICS.TOPIC]);
  const currentTopic = useSelector(selectTopic(currentTopicId));
  const currentCategory = category || currentTopic?.categoryId;
  const decodedCurrentCategory = String(currentCategory).replace('%23', '#');
--- a/src/discussions/navigation/breadcrumb-menu/LegacyBreadcrumbMenu.test.jsx
+++ b/src/discussions/navigation/breadcrumb-menu/LegacyBreadcrumbMenu.test.jsx
@@ -5,14 +5,14 @@ import {
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route } from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

-import { getApiBaseUrl, Routes as ROUTES } from '../../../data/constants';
+import { getApiBaseUrl, Routes } from '../../../data/constants';
 import { initializeStore } from '../../../store';
 import { executeThunk } from '../../../test-utils';
 import { fetchCourseTopics } from '../../topics/data/thunks';
@@ -28,22 +28,15 @@ let axiosMock;
 function renderComponent(path) {
  render(
    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
+      <AppProvider store={store}>
        <MemoryRouter initialEntries={[path]}>
-          <Routes>
-            {
-              [
-                ROUTES.POSTS.PATH,
-                ROUTES.TOPICS.CATEGORY,
-              ].map((route) => (
-                <Route
-                  key={route}
-                  path={route}
-                  element={<LegacyBreadcrumbMenu />}
-                />
-              ))
-            }
-          </Routes>
+          <Route
+            path={[
+              Routes.POSTS.PATH,
+              Routes.TOPICS.CATEGORY,
+            ]}
+            component={LegacyBreadcrumbMenu}
+          />
        </MemoryRouter>
      </AppProvider>
    </IntlProvider>,
--- a/src/discussions/navigation/navigation-bar/NavigationBar.jsx
+++ b/src/discussions/navigation/navigation-bar/NavigationBar.jsx
@@ -1,20 +1,21 @@
 import React, { useContext, useMemo } from 'react';

-import { matchPath, NavLink, useLocation } from 'react-router-dom';
+import { matchPath } from 'react-router';
+import { NavLink } from 'react-router-dom';

 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Nav } from '@edx/paragon';

 import { Routes } from '../../../data/constants';
 import { DiscussionContext } from '../../common/context';
+import { useShowLearnersTab } from '../../data/hooks';
 import { discussionsPath } from '../../utils';
 import messages from './messages';

 const NavigationBar = () => {
  const intl = useIntl();
  const { courseId } = useContext(DiscussionContext);
-  const location = useLocation();
-  const isTopicsNavActive = Boolean(matchPath({ path: `${Routes.TOPICS.CATEGORY}/*` }, location.pathname));
+  const showLearnersTab = useShowLearnersTab();

  const navLinks = useMemo(() => ([
    {
@@ -27,15 +28,20 @@ const NavigationBar = () => {
    },
    {
      route: Routes.TOPICS.ALL,
+      isActive: (match, location) => Boolean(matchPath(location.pathname, { path: Routes.TOPICS.PATH })),
      labelMessage: messages.allTopics,
    },
-    {
-      route: Routes.LEARNERS.PATH,
-      labelMessage: messages.learners,
-    },
-
  ]), []);

+  useMemo(() => {
+    if (showLearnersTab) {
+      navLinks.push({
+        route: Routes.LEARNERS.PATH,
+        labelMessage: messages.learners,
+      });
+    }
+  }, [showLearnersTab]);
+
  return (
    <Nav variant="pills" className="py-2 nav-button-group">
      {navLinks.map(link => (
@@ -43,8 +49,8 @@ const NavigationBar = () => {
          <Nav.Link
            key={link.route}
            as={NavLink}
-            to={discussionsPath(link.route, { courseId })()}
-            className={isTopicsNavActive && link.route === Routes.TOPICS.ALL && 'active'}
+            to={discussionsPath(link.route, { courseId })}
+            isActive={link.isActive}
          >
            {intl.formatMessage(link.labelMessage)}
          </Nav.Link>
--- a/src/discussions/post-comments/PostCommentsView.jsx
+++ b/src/discussions/post-comments/PostCommentsView.jsx
@@ -2,16 +2,14 @@ import React, {
  Suspense, useCallback, useContext, useEffect, useState,
 } from 'react';

-import { useLocation, useNavigate } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';

 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Icon, IconButton } from '@edx/paragon';
 import { ArrowBack } from '@edx/paragon/icons';

 import Spinner from '../../components/Spinner';
-import {
-  EndorsementStatus, PostsPages, ThreadType,
-} from '../../data/constants';
+import { EndorsementStatus, PostsPages, ThreadType } from '../../data/constants';
 import { useDispatchWithState } from '../../data/hooks';
 import { DiscussionContext } from '../common/context';
 import { useIsOnDesktop } from '../data/hooks';
@@ -29,7 +27,7 @@ const CommentsView = React.lazy(() => import('./comments/CommentsView'));

 const PostCommentsView = () => {
  const intl = useIntl();
-  const navigate = useNavigate();
+  const history = useHistory();
  const location = useLocation();
  const isOnDesktop = useIsOnDesktop();
  const [addingResponse, setAddingResponse] = useState(false);
@@ -39,9 +37,6 @@ const PostCommentsView = () => {
  } = useContext(DiscussionContext);
  const commentsCount = useCommentsCount(postId);
  const { closed, id: threadId, type } = usePost(postId);
-  const redirectUrl = discussionsPath(PostsPages[page], {
-    courseId, learnerUsername, category, topicId,
-  })(location);

  useEffect(() => {
    if (!threadId) {
@@ -79,7 +74,6 @@ const PostCommentsView = () => {
  }

  return (
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
    <PostCommentsContext.Provider value={{
      isClosed: closed,
      postType: type,
@@ -94,7 +88,9 @@ const PostCommentsView = () => {
                variant="plain"
                className="px-0 line-height-24 py-0 my-1.5 border-0 font-weight-normal font-style text-primary-500"
                iconBefore={ArrowBack}
-                onClick={() => navigate({ ...redirectUrl })}
+                onClick={() => history.push(discussionsPath(PostsPages[page], {
+                  courseId, learnerUsername, category, topicId,
+                })(location))}
                size="sm"
              >
                {intl.formatMessage(messages.backAlt)}
@@ -109,7 +105,9 @@ const PostCommentsView = () => {
            style={{ padding: '18px' }}
            size="inline"
            className="ml-4 mt-4"
-            onClick={() => navigate({ ...redirectUrl })}
+            onClick={() => history.push(discussionsPath(PostsPages[page], {
+              courseId, learnerUsername, category, topicId,
+            })(location))}
            alt={intl.formatMessage(messages.backAlt)}
          />
        )
--- a/src/discussions/post-comments/PostCommentsView.test.jsx
+++ b/src/discussions/post-comments/PostCommentsView.test.jsx
@@ -3,16 +3,13 @@ import {
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
-import {
-  MemoryRouter, Route, Routes, useLocation,
-} from 'react-router-dom';
+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 { getApiBaseUrl } from '../../data/constants';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { getCohortsApiUrl } from '../cohorts/data/api';
@@ -23,13 +20,12 @@ import { fetchCourseConfig } from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThread, fetchThreads } from '../posts/data/thunks';
-import { fetchCourseTopics } from '../topics/data/thunks';
 import { getDiscussionTourUrl } from '../tours/data/api';
 import { selectTours } from '../tours/data/selectors';
 import { fetchDiscussionTours } from '../tours/data/thunks';
 import discussionTourFactory from '../tours/data/tours.factory';
 import { getCommentsApiUrl } from './data/api';
-import { fetchCommentResponses, removeComment } from './data/thunks';
+import { fetchCommentResponses, fetchThreadComments, removeComment } from './data/thunks';

 import '../posts/data/__factories__';
 import './data/__factories__';
@@ -43,21 +39,44 @@ const discussionPostId = 'thread-1';
 const questionPostId = 'thread-2';
 const closedPostId = 'thread-2';
 const courseId = 'course-v1:edX+TestX+Test_Course';
-const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;
+const reverseOrder = true;
+const enableInContextSidebar = false;
 let store;
 let axiosMock;
 let testLocation;
 let container;
 let unmount;

-async function mockAxiosReturnPagedComments(threadId, endorsed = false, page = 1, count = 2) {
-  axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult', { can_delete: true }, {
-    threadId,
-    endorsed,
-    pageSize: 1,
-    count,
-    childCount: page === 1 ? 2 : 0,
-  }));
+async function mockAxiosReturnPagedComments() {
+  const endorsedArray = [null, false, true];
+  const pageArray = [1, 2];
+
+  endorsedArray.forEach(async (endorsed) => {
+    const postId = endorsed === null ? discussionPostId : questionPostId;
+
+    pageArray.forEach(async (page) => {
+      const params = {
+        thread_id: postId,
+        page,
+        page_size: undefined,
+        requested_fields: 'profile_image',
+        endorsed,
+        reverse_order: reverseOrder,
+        enable_in_context_sidebar: enableInContextSidebar,
+        signal: {},
+      };
+      axiosMock.onGet(commentsApiUrl, { ...params }).reply(200, Factory.build('commentsResult', { can_delete: true }, {
+        threadId: postId,
+        page,
+        pageSize: 1,
+        count: 2,
+        endorsed,
+        childCount: page === 1 ? 2 : 0,
+      }));
+
+      await executeThunk(fetchThreadComments(postId, { ...params }), store.dispatch, store.getState);
+    });
+  });
 }

 async function mockAxiosReturnPagedCommentsResponses() {
@@ -71,16 +90,13 @@ async function mockAxiosReturnPagedCommentsResponses() {
  };

  [1, 2].forEach(async (page) => {
-    axiosMock.onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } }).reply(
-      200,
+    axiosMock.onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } }).reply(200,
      Factory.build('commentsResult', null, {
-        threadId: discussionPostId,
        parentId,
        page,
        pageSize: 1,
        count: 2,
-      }),
-    );
+      }));

    await executeThunk(fetchCommentResponses(parentId), store.dispatch, store.getState);
  });
@@ -91,45 +107,22 @@ async function getThreadAPIResponse(attr = null) {
  await executeThunk(fetchThread(discussionPostId), store.dispatch, store.getState);
 }

-async function setupCourseConfig() {
-  axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
-    has_moderation_privileges: true,
-    isPostingEnabled: true,
-    editReasons: [
-      { code: 'reason-1', label: 'reason 1' },
-      { code: 'reason-2', label: 'reason 2' },
-    ],
-    postCloseReasons: [
-      { code: 'reason-1', label: 'reason 1' },
-      { code: 'reason-2', label: 'reason 2' },
-    ],
-  });
-  axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
-  await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
-}
-
-const LocationComponent = () => {
-  testLocation = useLocation();
-  return null;
-};
-
-function renderComponent(postId, isClosed = false, page = 'posts', path = `/${courseId}/posts/${postId}`) {
+function renderComponent(postId) {
  const wrapper = render(
    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
+      <AppProvider store={store}>
        <DiscussionContext.Provider
-          value={{
-            courseId, postId, page, isClosed, topicId: 'topic-id',
-          }}
+          value={{ courseId, postId }}
        >
-          <MemoryRouter initialEntries={[path]}>
+          <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
            <DiscussionContent />
-            <Routes>
-              <Route
-                path="*"
-                element={<LocationComponent />}
-              />
-            </Routes>
+            <Route
+              path="*"
+              render={({ location }) => {
+                testLocation = location;
+                return null;
+              }}
+            />
          </MemoryRouter>
        </DiscussionContext.Provider>
      </AppProvider>
@@ -139,45 +132,6 @@ function renderComponent(postId, isClosed = false, page = 'posts', path = `/${co
  unmount = wrapper.unmount;
 }

-describe('PostView', () => {
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
-    Factory.resetAll();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-    axiosMock.onGet(topicsApiUrl)
-      .reply(200, {
-        non_courseware_topics: Factory.buildList('topic', 1, {}, { topicPrefix: 'non-courseware-' }),
-        courseware_topics: Factory.buildList('category', 1, {}, { name: 'courseware' }),
-      });
-    executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
-  });
-
-  it('should show Topic Info for non-courseware topics', async () => {
-    await getThreadAPIResponse({ id: 'thread-1', topic_id: 'non-courseware-topic-1' });
-    await waitFor(() => renderComponent(discussionPostId));
-    expect(await screen.findByText('Related to')).toBeInTheDocument();
-    expect(await screen.findByText('non-courseware-topic 1')).toBeInTheDocument();
-  });
-
-  it('should show Topic Info for courseware topics with category', async () => {
-    await getThreadAPIResponse({ id: 'thread-2', topic_id: 'courseware-topic-2' });
-
-    await waitFor(() => renderComponent('thread-2'));
-    expect(await screen.findByText('Related to')).toBeInTheDocument();
-    expect(await screen.findByText('category-1 / courseware-topic 2')).toBeInTheDocument();
-  });
-});
-
 describe('ThreadView', () => {
  beforeEach(async () => {
    initializeMockApp({
@@ -211,12 +165,10 @@ describe('ThreadView', () => {
        thread_id: threadId,
      })];
    });
-    axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { isPostingEnabled: true });

-    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
    await executeThunk(fetchCourseCohorts(courseId), store.dispatch, store.getState);
-    await mockAxiosReturnPagedComments(discussionPostId);
    await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
+    await mockAxiosReturnPagedComments();
    await mockAxiosReturnPagedCommentsResponses();
  });

@@ -229,16 +181,6 @@ describe('ThreadView', () => {
      expect(JSON.parse(axiosMock.history.patch[axiosMock.history.patch.length - 1].data)).toMatchObject(data);
    }

-    it('should not allow posting a comment on a closed post', async () => {
-      axiosMock.reset();
-      await mockAxiosReturnPagedComments(closedPostId, true);
-      await waitFor(() => renderComponent(closedPostId, true));
-      const comments = await waitFor(() => screen.findAllByTestId('comment-comment-4'));
-      const hoverCard = within(comments[0]).getByTestId('hover-card-comment-4');
-
-      expect(within(hoverCard).getByRole('button', { name: /Add comment/i })).toBeDisabled();
-    });
-
    it('should display post content', async () => {
      await waitFor(() => renderComponent(discussionPostId));
      const post = await waitFor(() => screen.getByTestId('post-thread-1'));
@@ -319,7 +261,7 @@ describe('ThreadView', () => {
      await act(async () => { fireEvent.click(screen.getByText(/submit/i)); });

      expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
-      await waitFor(async () => expect(await screen.findByTestId('reply-comment-2')).toBeInTheDocument());
+      await waitFor(async () => expect(await screen.findByTestId('reply-comment-7')).toBeInTheDocument());
    });

    it('should allow editing an existing comment', async () => {
@@ -337,6 +279,23 @@ describe('ThreadView', () => {
      });
    });

+    async function setupCourseConfig(reasonCodesEnabled = true) {
+      axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
+        has_moderation_privileges: true,
+        reason_codes_enabled: reasonCodesEnabled,
+        editReasons: [
+          { code: 'reason-1', label: 'reason 1' },
+          { code: 'reason-2', label: 'reason 2' },
+        ],
+        postCloseReasons: [
+          { code: 'reason-1', label: 'reason 1' },
+          { code: 'reason-2', label: 'reason 2' },
+        ],
+      });
+      axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
+      await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+    }
+
    it('should show reason codes when closing a post', async () => {
      await setupCourseConfig();
      await waitFor(() => renderComponent(discussionPostId));
@@ -366,45 +325,12 @@ describe('ThreadView', () => {
      assertLastUpdateData({ closed: true, close_reason_code: 'reason-1' });
    });

-    it('should show reason codes when editing an existing comment', async () => {
-      setupCourseConfig();
-      renderComponent(discussionPostId);
-      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
-      const hoverCard = within(comment).getByTestId('hover-card-comment-1');
-      await act(async () => {
-        fireEvent.click(
-          within(hoverCard).getByRole('button', { name: /actions menu/i }),
-        );
-      });
-      await act(async () => {
-        fireEvent.click(screen.getByRole('button', { name: /edit/i }));
-      });
-      expect(screen.queryByRole('combobox', { name: /reason for editing/i })).toBeInTheDocument();
-      expect(screen.getAllByRole('option', { name: /reason \d/i })).toHaveLength(2);
-      await act(async () => {
-        fireEvent.change(
-          screen.queryByRole('combobox', { name: /reason for editing/i }),
-          { target: { value: null } },
-        );
-      });
-      await act(async () => {
-        fireEvent.change(screen.queryByRole('combobox', { name: /reason for editing/i }), { target: { value: 'reason-1' } });
-      });
-      await act(async () => {
-        fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
-      });
-      await act(async () => {
-        fireEvent.click(screen.getByRole('button', { name: /submit/i }));
-      });
-      assertLastUpdateData({ edit_reason_code: 'reason-1' });
-    });
+    it('should close the post directly if reason codes are not enabled', async () => {
+      await setupCourseConfig(false);
+      await waitFor(() => renderComponent(discussionPostId));

-    it('should reopen the post', async () => {
-      await setupCourseConfig();
-      renderComponent(closedPostId);
-
-      const post = screen.getByTestId('post-thread-2');
-      const hoverCard = within(post).getByTestId('hover-card-thread-2');
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
      await act(async () => {
        fireEvent.click(
          within(hoverCard).getByRole('button', { name: /actions menu/i }),
@@ -412,12 +338,34 @@ describe('ThreadView', () => {
      });
      expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
      await act(async () => {
-        fireEvent.click(screen.getByRole('button', { name: /reopen/i }));
+        fireEvent.click(screen.getByRole('button', { name: /close/i }));
      });
      expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
-      assertLastUpdateData({ closed: false });
+      assertLastUpdateData({ closed: true });
    });

+    it.each([true, false])(
+      'should reopen the post directly when reason codes enabled=%s',
+      async (reasonCodesEnabled) => {
+        await setupCourseConfig(reasonCodesEnabled);
+        renderComponent(closedPostId);
+
+        const post = screen.getByTestId('post-thread-2');
+        const hoverCard = within(post).getByTestId('hover-card-thread-2');
+        await act(async () => {
+          fireEvent.click(
+            within(hoverCard).getByRole('button', { name: /actions menu/i }),
+          );
+        });
+        expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
+        await act(async () => {
+          fireEvent.click(screen.getByRole('button', { name: /reopen/i }));
+        });
+        expect(screen.queryByRole('dialog', { name: /close post/i })).not.toBeInTheDocument();
+        assertLastUpdateData({ closed: false });
+      },
+    );
+
    it('should show the editor if the post is edited', async () => {
      await setupCourseConfig(false);
      await waitFor(() => renderComponent(discussionPostId));
@@ -435,28 +383,6 @@ describe('ThreadView', () => {
      expect(testLocation.pathname).toBe(`/${courseId}/posts/${discussionPostId}/edit`);
    });

-    it('should show the editor if the post is edited on topics page', async () => {
-      await setupCourseConfig(false);
-      await waitFor(() => renderComponent(
-        discussionPostId,
-        false,
-        'topics',
-        `/${courseId}/topics/topic-id/posts/${discussionPostId}`,
-      ));
-
-      const post = await screen.findByTestId('post-thread-1');
-      const hoverCard = within(post).getByTestId('hover-card-thread-1');
-      await act(async () => {
-        fireEvent.click(
-          within(hoverCard).getByRole('button', { name: /actions menu/i }),
-        );
-      });
-      await act(async () => {
-        fireEvent.click(screen.getByRole('button', { name: /edit/i }));
-      });
-      expect(testLocation.pathname).toBe(`/${courseId}/topics/topic-id/posts/${discussionPostId}/edit`);
-    });
-
    it('should allow pinning the post', async () => {
      await waitFor(() => renderComponent(discussionPostId));
      const post = await screen.findByTestId('post-thread-1');
@@ -472,20 +398,6 @@ describe('ThreadView', () => {
      assertLastUpdateData({ pinned: false });
    });

-    it('should allow copying a link to the post', async () => {
-      await waitFor(() => renderComponent(discussionPostId));
-      const post = await screen.findByTestId('post-thread-1');
-      const hoverCard = within(post).getByTestId('hover-card-thread-1');
-      Object.assign(navigator, { clipboard: { writeText: jest.fn() } });
-      await act(async () => {
-        fireEvent.click(within(hoverCard).getByRole('button', { name: /actions menu/i }));
-      });
-      await act(async () => {
-        fireEvent.click(within(hoverCard).getByRole('button', { name: /copy link/i }));
-      });
-      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(`http://localhost/${courseId}/posts/${discussionPostId}`);
-    });
-
    it('should allow reporting the post', async () => {
      await waitFor(() => renderComponent(discussionPostId));
      const post = await screen.findByTestId('post-thread-1');
@@ -571,10 +483,8 @@ describe('ThreadView', () => {
  });

  describe('for discussion thread', () => {
-    const findLoadMoreCommentsButton = () => screen.findByTestId('load-more-comments');
-
    it('shown post not found when post id does not belong to course', async () => {
-      await waitFor(() => renderComponent('unloaded-id'));
+      renderComponent('unloaded-id');
      expect(await screen.findByText('Thread not found', { exact: true }))
        .toBeInTheDocument();
    });
@@ -587,70 +497,6 @@ describe('ThreadView', () => {
        .not
        .toBeInTheDocument();
    });
-
-    it('pressing load more button will load next page of comments', async () => {
-      await waitFor(() => renderComponent(discussionPostId));
-      await mockAxiosReturnPagedComments(discussionPostId, false, 2);
-
-      const loadMoreButton = await findLoadMoreCommentsButton();
-      await act(async () => {
-        fireEvent.click(loadMoreButton);
-      });
-
-      await screen.findByTestId('comment-comment-1');
-      await screen.findByTestId('comment-comment-4');
-    });
-
-    it('newly loaded comments are appended to the old ones', async () => {
-      await waitFor(() => renderComponent(discussionPostId));
-      await mockAxiosReturnPagedComments(discussionPostId, false, 2);
-
-      const loadMoreButton = await findLoadMoreCommentsButton();
-      await act(async () => {
-        fireEvent.click(loadMoreButton);
-      });
-
-      await screen.findByTestId('comment-comment-1');
-      // check that comments from the first page are also displayed
-      expect(screen.queryByTestId('comment-comment-4'))
-        .toBeInTheDocument();
-    });
-  });
-
-  describe('for question thread', () => {
-    const findLoadMoreCommentsButtons = () => screen.findByTestId('load-more-comments');
-
-    it('initially loads only the first page', async () => {
-      await mockAxiosReturnPagedComments(questionPostId);
-      act(() => renderComponent(questionPostId));
-
-      expect(await screen.findByTestId('comment-comment-4'))
-        .toBeInTheDocument();
-      expect(screen.queryByTestId('comment-comment-5'))
-        .not
-        .toBeInTheDocument();
-    });
-
-    it('pressing load more button will load next page of comments', async () => {
-      await mockAxiosReturnPagedComments(questionPostId);
-      await waitFor(() => renderComponent(questionPostId));
-
-      const loadMoreButton = await findLoadMoreCommentsButtons();
-
-      expect(await screen.findByTestId('comment-comment-4'))
-        .toBeInTheDocument();
-      // Comments from next page should not be loaded yet.
-      expect(await screen.queryByTestId('comment-comment-5'))
-        .not
-        .toBeInTheDocument();
-      await mockAxiosReturnPagedComments(questionPostId, false, 2, 1);
-      await act(async () => {
-        fireEvent.click(loadMoreButton);
-      });
-      // Endorsed comment from next page should be loaded now.
-      await waitFor(() => expect(screen.queryByTestId('comment-comment-5'))
-        .toBeInTheDocument());
-    });
  });

  describe('for comments replies', () => {
@@ -659,8 +505,8 @@ describe('ThreadView', () => {
    it('initially loads only the first page', async () => {
      await waitFor(() => renderComponent(discussionPostId));

-      await waitFor(() => screen.findByTestId('reply-comment-2'));
-      expect(screen.queryByTestId('reply-comment-3')).not.toBeInTheDocument();
+      await waitFor(() => screen.findByTestId('reply-comment-7'));
+      expect(screen.queryByTestId('reply-comment-8')).not.toBeInTheDocument();
    });

    it('pressing load more button will load next page of responses', async () => {
@@ -670,7 +516,8 @@ describe('ThreadView', () => {
      await act(async () => {
        fireEvent.click(loadMoreButton);
      });
-      await screen.findByTestId('reply-comment-3');
+
+      await screen.findByTestId('reply-comment-8');
    });

    it('newly loaded responses are appended to the old ones', async () => {
@@ -681,9 +528,9 @@ describe('ThreadView', () => {
        fireEvent.click(loadMoreButton);
      });

-      await screen.findByTestId('reply-comment-3');
+      await screen.findByTestId('reply-comment-8');
      // check that comments from the first page are also displayed
-      expect(screen.queryByTestId('reply-comment-2')).toBeInTheDocument();
+      expect(screen.queryByTestId('reply-comment-7')).toBeInTheDocument();
    });

    it('load more button is hidden when no more responses pages to load', async () => {
@@ -694,7 +541,8 @@ describe('ThreadView', () => {
        fireEvent.click(loadMoreButton);
      });

-      await screen.findByTestId('reply-comment-3');
+      await screen.findByTestId('reply-comment-8');
+      await expect(findLoadMoreCommentsResponsesButton()).rejects.toThrow();
    });
  });

@@ -728,21 +576,21 @@ describe('ThreadView', () => {
    it('shows action dropdown for replies', async () => {
      await waitFor(() => renderComponent(discussionPostId));

-      const reply = await waitFor(() => screen.findByTestId('reply-comment-2'));
+      const reply = await waitFor(() => screen.findByTestId('reply-comment-7'));
      expect(within(reply).getByRole('button', { name: /actions menu/i })).toBeInTheDocument();
    });

    it('should display reply content', async () => {
      await waitFor(() => renderComponent(discussionPostId));

-      const reply = await waitFor(() => screen.findByTestId('reply-comment-2'));
-      expect(within(reply).queryByTestId('comment-2')).toBeInTheDocument();
+      const reply = await waitFor(() => screen.findByTestId('reply-comment-7'));
+      expect(within(reply).queryByTestId('comment-7')).toBeInTheDocument();
    });

    it('shows delete confirmation modal', async () => {
      await waitFor(() => renderComponent(discussionPostId));

-      const reply = await waitFor(() => screen.findByTestId('reply-comment-2'));
+      const reply = await waitFor(() => screen.findByTestId('reply-comment-7'));
      await act(async () => { fireEvent.click(within(reply).getByRole('button', { name: /actions menu/i })); });
      await act(async () => { fireEvent.click(screen.queryByRole('button', { name: /Delete/i })); });

--- a/src/discussions/post-comments/comments/CommentsView.jsx
+++ b/src/discussions/post-comments/comments/CommentsView.jsx
@@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Spinner } from '@edx/paragon';

 import { EndorsementStatus } from '../../../data/constants';
-import { useUserPostingEnabled } from '../../data/hooks';
+import { useUserCanAddThreadInBlackoutDate } from '../../data/hooks';
 import { isLastElementOfList } from '../../utils';
 import { usePostComments } from '../data/hooks';
 import messages from '../messages';
@@ -16,8 +16,7 @@ const CommentsView = ({ endorsed }) => {
  const intl = useIntl();
  const [addingResponse, setAddingResponse] = useState(false);
  const { isClosed } = useContext(PostCommentsContext);
-  const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
-
+  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
  const {
    endorsedCommentsIds,
    unEndorsedCommentsIds,
@@ -36,7 +35,7 @@ const CommentsView = ({ endorsed }) => {

  const handleDefinition = useCallback((message, commentsLength) => (
    <div
-      className="comment-line mx-4 my-14px text-gray-700 font-style"
+      className="mx-4 my-14px text-gray-700 font-style"
      role="heading"
      aria-level="2"
    >
@@ -66,14 +65,13 @@ const CommentsView = ({ endorsed }) => {
      )}
      {isLoading && !showLoadMoreResponses && (
        <div className="mb-2 mt-3 d-flex justify-content-center">
-          <Spinner animation="border" variant="primary" className="spinner-dimensions" />
+          <Spinner animation="border" variant="primary" className="spinner-dimentions" />
        </div>
      )}
    </div>
  ), [hasMorePages, isLoading, handleLoadMoreResponses]);

  return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
    <>
      {((hasMorePages && isLoading) || !isLoading) && (
        <>
@@ -90,7 +88,7 @@ const CommentsView = ({ endorsed }) => {
              {handleDefinition(messages.responseCount, unEndorsedCommentsIds.length)}
              {unEndorsedCommentsIds.length === 0 && <br />}
              {handleComments(unEndorsedCommentsIds, false)}
-              {(isUserPrivilegedInPostingRestriction && !!unEndorsedCommentsIds.length && !isClosed) && (
+              {(userCanAddThreadInBlackoutDate && !!unEndorsedCommentsIds.length && !isClosed) && (
                <div className="mx-4">
                  {!addingResponse && (
                    <Button
--- a/src/discussions/post-comments/comments/comment/Comment.jsx
+++ b/src/discussions/post-comments/comments/comment/Comment.jsx
@@ -15,7 +15,7 @@ import { AlertBanner, Confirmation, EndorsedAlertBanner } from '../../../common'
 import { DiscussionContext } from '../../../common/context';
 import HoverCard from '../../../common/HoverCard';
 import { ContentTypes } from '../../../data/constants';
-import { useUserPostingEnabled } from '../../../data/hooks';
+import { useUserCanAddThreadInBlackoutDate } from '../../../data/hooks';
 import { fetchThread } from '../../../posts/data/thunks';
 import LikeButton from '../../../posts/post/LikeButton';
 import { useActions } from '../../../utils';
@@ -61,7 +61,7 @@ const Comment = ({
  const currentPage = useSelector(selectCommentCurrentPage(id));
  const sortedOrder = useSelector(selectCommentSortOrder);
  const actions = useActions(ContentTypes.COMMENT, id);
-  const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
+  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();

  useEffect(() => {
    // If the comment has a parent comment, it won't have any children, so don't fetch them.
@@ -119,10 +119,10 @@ const Comment = ({
  ), [id, currentPage, sortedOrder]);

  const handleAddCommentButton = useCallback(() => {
-    if (isUserPrivilegedInPostingRestriction) {
+    if (userCanAddThreadInBlackoutDate) {
      setReplying(true);
    }
-  }, [isUserPrivilegedInPostingRestriction]);
+  }, [userCanAddThreadInBlackoutDate]);

  const handleCommentLike = useCallback(async () => {
    await dispatch(editComment(id, { voted: !voted }));
@@ -154,8 +154,8 @@ const Comment = ({
          title={intl.formatMessage(messages.deleteResponseTitle)}
          description={intl.formatMessage(messages.deleteResponseDescription)}
          onClose={hideDeleteConfirmation}
-          confirmAction={handleDeleteConfirmation}
-          closeButtonVariant="tertiary"
+          comfirmAction={handleDeleteConfirmation}
+          closeButtonVaraint="tertiary"
          confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)}
        />
        {!abuseFlagged && (
@@ -164,7 +164,7 @@ const Comment = ({
            title={intl.formatMessage(messages.reportResponseTitle)}
            description={intl.formatMessage(messages.reportResponseDescription)}
            onClose={hideReportConfirmation}
-            confirmAction={handleReportConfirmation}
+            comfirmAction={handleReportConfirmation}
            confirmButtonVariant="danger"
          />
        )}
@@ -265,7 +265,7 @@ const Comment = ({
                />
              </div>
            ) : (
-              !isClosed && isUserPrivilegedInPostingRestriction && (inlineReplies.length >= 5) && (
+              !isClosed && userCanAddThreadInBlackoutDate && (inlineReplies.length >= 5) && (
                <Button
                  className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500"
                  variant="plain"
--- a/src/discussions/post-comments/comments/comment/CommentEditor.jsx
+++ b/src/discussions/post-comments/comments/comment/CommentEditor.jsx
@@ -24,12 +24,12 @@ import { formikCompatibleHandler, isFormikFieldInvalid } from '../../../utils';
 import { addComment, editComment } from '../../data/thunks';
 import messages from '../../messages';

-const CommentEditor = ({
+function CommentEditor({
  comment,
  edit,
  formClasses,
  onCloseEditor,
-}) => {
+}) {
  const {
    id, threadId, parentId, rawBody, author, lastEdit,
  } = comment;
@@ -40,10 +40,10 @@ const CommentEditor = ({
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
  const userIsGroupTa = useSelector(selectUserIsGroupTa);
  const userIsStaff = useSelector(selectUserIsStaff);
-  const { editReasons } = useSelector(selectModerationSettings);
+  const { reasonCodesEnabled, editReasons } = useSelector(selectModerationSettings);
  const [submitting, dispatch] = useDispatchWithState();

-  const canDisplayEditReason = (edit
+  const canDisplayEditReason = (reasonCodesEnabled && edit
    && (userHasModerationPrivileges || userIsGroupTa || userIsStaff)
    && author !== authenticatedUser.username
  );
@@ -60,8 +60,7 @@ const CommentEditor = ({

  const initialValues = {
    comment: rawBody,
-    // eslint-disable-next-line react/prop-types
-    editReasonCode: lastEdit?.reasonCode || (userIsStaff && canDisplayEditReason ? 'violates-guidelines' : undefined),
+    editReasonCode: lastEdit?.reasonCode || (userIsStaff ? 'violates-guidelines' : ''),
  };

  const handleCloseEditor = useCallback((resetForm) => {
@@ -177,13 +176,13 @@ const CommentEditor = ({
      )}
    </Formik>
  );
-};
+}

 CommentEditor.propTypes = {
  comment: PropTypes.shape({
    author: PropTypes.string,
    id: PropTypes.string,
-    lastEdit: PropTypes.shape({}),
+    lastEdit: PropTypes.object,
    parentId: PropTypes.string,
    rawBody: PropTypes.string,
    threadId: PropTypes.string.isRequired,
--- a/src/discussions/post-comments/comments/comment/Reply.jsx
+++ b/src/discussions/post-comments/comments/comment/Reply.jsx
@@ -83,8 +83,8 @@ const Reply = ({ responseId }) => {
        title={intl.formatMessage(messages.deleteCommentTitle)}
        description={intl.formatMessage(messages.deleteCommentDescription)}
        onClose={hideDeleteConfirmation}
-        confirmAction={handleDeleteConfirmation}
-        closeButtonVariant="tertiary"
+        comfirmAction={handleDeleteConfirmation}
+        closeButtonVaraint="tertiary"
        confirmButtonText={intl.formatMessage(messages.deleteConfirmationDelete)}
      />
      {!abuseFlagged && (
@@ -93,7 +93,7 @@ const Reply = ({ responseId }) => {
          title={intl.formatMessage(messages.reportCommentTitle)}
          description={intl.formatMessage(messages.reportCommentDescription)}
          onClose={hideReportConfirmation}
-          confirmAction={handleReportConfirmation}
+          comfirmAction={handleReportConfirmation}
          confirmButtonVariant="danger"
        />
      )}
--- a/src/discussions/post-comments/data/factories/comments.factory.js
+++ b/src/discussions/post-comments/data/factories/comments.factory.js
@@ -59,7 +59,6 @@ Factory.define('commentsResult')
      return Factory.buildList('comment', len, {
        thread_id: threadId,
        parent_id: parentId,
-        endorsed,
      }, {
        endorsedBy: endorsed ? 'staff' : null,
        childCount,
--- a/src/discussions/post-comments/data/api.js
+++ b/src/discussions/post-comments/data/api.js
@@ -20,14 +20,16 @@ export const getCommentsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussi
 * @param enableInContextSidebar
 * @returns {Promise<{}>}
 */
-export const getThreadComments = async (threadId, {
-  endorsed,
-  page,
-  pageSize,
-  reverseOrder,
-  enableInContextSidebar = false,
-  signal,
-} = {}) => {
+export async function getThreadComments(
+  threadId, {
+    endorsed,
+    page,
+    pageSize,
+    reverseOrder,
+    enableInContextSidebar = false,
+    signal,
+  } = {},
+) {
  const params = snakeCaseObject({
    threadId,
    endorsed: EndorsementValue[endorsed],
@@ -40,7 +42,7 @@ export const getThreadComments = async (threadId, {

  const { data } = await getAuthenticatedHttpClient().get(getCommentsApiUrl(), { params: { ...params, signal } });
  return data;
-};
+}

 /**
 * Fetches a responses to a comment.
@@ -49,11 +51,13 @@ export const getThreadComments = async (threadId, {
 * @param {number=} pageSize
 * @returns {Promise<{}>}
 */
-export const getCommentResponses = async (commentId, {
-  page,
-  pageSize,
-  reverseOrder,
-} = {}) => {
+export async function getCommentResponses(
+  commentId, {
+    page,
+    pageSize,
+    reverseOrder,
+  } = {},
+) {
  const url = `${getCommentsApiUrl()}${commentId}/`;
  const params = snakeCaseObject({
    page,
@@ -64,7 +68,7 @@ export const getCommentResponses = async (commentId, {
  const { data } = await getAuthenticatedHttpClient()
    .get(url, { params });
  return data;
-};
+}

 /**
 * Posts a comment.
@@ -74,13 +78,13 @@ export const getCommentResponses = async (commentId, {
 * @param {boolean} enableInContextSidebar
 * @returns {Promise<{}>}
 */
-export const postComment = async (comment, threadId, parentId = null, enableInContextSidebar = false) => {
+export async function postComment(comment, threadId, parentId = null, enableInContextSidebar = false) {
  const { data } = await getAuthenticatedHttpClient()
    .post(getCommentsApiUrl(), snakeCaseObject({
      threadId, raw_body: comment, parentId, enableInContextSidebar,
    }));
  return data;
-};
+}

 /**
 * Updates existing comment.
@@ -92,13 +96,13 @@ export const postComment = async (comment, threadId, parentId = null, enableInCo
 * @param {string=} editReasonCode The moderation reason code for editing.
 * @returns {Promise<{}>}
 */
-export const updateComment = async (commentId, {
+export async function updateComment(commentId, {
  comment,
  voted,
  flagged,
  endorsed,
  editReasonCode,
-}) => {
+}) {
  const url = `${getCommentsApiUrl()}${commentId}/`;
  const postData = snakeCaseObject({
    raw_body: comment,
@@ -111,14 +115,14 @@ export const updateComment = async (commentId, {
  const { data } = await getAuthenticatedHttpClient()
    .patch(url, postData, { headers: { 'Content-Type': 'application/merge-patch+json' } });
  return data;
-};
+}

 /**
 * Deletes existing comment.
 * @param {string} commentId ID of comment to delete
 */
-export const deleteComment = async (commentId) => {
+export async function deleteComment(commentId) {
  const url = `${getCommentsApiUrl()}${commentId}/`;
  await getAuthenticatedHttpClient()
    .delete(url);
-};
+}
--- a/src/discussions/post-comments/data/slices.js
+++ b/src/discussions/post-comments/data/slices.js
@@ -141,7 +141,7 @@ const commentsSlice = createSlice({
      const commentRemoveListType = !endorsed ? EndorsementStatus.ENDORSED : EndorsementStatus.UNENDORSED;

      state.commentsInThreads[threadId][commentRemoveListType] = (
-        state.commentsInThreads[threadId]?.[commentRemoveListType]?.filter(item => item !== commentId)
+          state.commentsInThreads[threadId]?.[commentRemoveListType]?.filter(item => item !== commentId)
      );
      state.commentsInThreads[threadId][commentAddListtype] = [
        ...state.commentsInThreads[threadId][commentAddListtype], payload.id,
--- a/src/discussions/posts/NoResults.test.jsx
+++ b/src/discussions/posts/NoResults.test.jsx
@@ -21,7 +21,7 @@ function renderComponent(location = `/${courseId}/`) {
  return render(
    <IntlProvider locale="en">
      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <AppProvider store={store} wrapWithRouter={false}>
+        <AppProvider store={store}>
          <MemoryRouter initialEntries={[location]}>
            <NoResults />
          </MemoryRouter>
--- a/src/discussions/posts/PostsList.jsx
+++ b/src/discussions/posts/PostsList.jsx
@@ -11,7 +11,7 @@ import { Button, Spinner } from '@edx/paragon';

 import { RequestStatus } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
-import { selectConfigLoadingStatus, selectUserHasModerationPrivileges, selectUserIsStaff } from '../data/selectors';
+import { selectconfigLoadingStatus, selectUserHasModerationPrivileges, selectUserIsStaff } from '../data/selectors';
 import { fetchUserPosts } from '../learners/data/thunks';
 import messages from '../messages';
 import { usePostList } from './data/hooks';
@@ -35,7 +35,7 @@ const PostsList = ({
  const nextPage = useSelector(selectThreadNextPage());
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
  const userIsStaff = useSelector(selectUserIsStaff);
-  const configStatus = useSelector(selectConfigLoadingStatus);
+  const configStatus = useSelector(selectconfigLoadingStatus);
  const sortedPostsIds = usePostList(postsIds);
  const showOwnPosts = page === 'my-posts';

--- a/src/discussions/posts/PostsView.test.jsx
+++ b/src/discussions/posts/PostsView.test.jsx
@@ -5,15 +5,15 @@ import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 import {
-  generatePath, MemoryRouter, Route, Routes,
-} from 'react-router-dom';
+  generatePath, MemoryRouter, Route, Switch,
+} from 'react-router';
 import { Factory } from 'rosie';

 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

-import { getApiBaseUrl, Routes as ROUTES, ThreadType } from '../../data/constants';
+import { getApiBaseUrl, Routes, ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { getCohortsApiUrl } from '../cohorts/data/api';
@@ -39,24 +39,24 @@ const username = 'abc123';
 async function renderComponent({
  postId, topicId, category, myPosts, enableInContextSidebar = false,
 } = { myPosts: false }) {
-  let path = generatePath(ROUTES.POSTS.ALL_POSTS, { courseId });
-  let page = 'posts';
+  let path = generatePath(Routes.POSTS.ALL_POSTS, { courseId });
+  let page;
  if (postId) {
-    path = generatePath(ROUTES.POSTS.ALL_POSTS, { courseId, postId });
+    path = generatePath(Routes.POSTS.ALL_POSTS, { courseId, postId });
    page = 'posts';
  } else if (topicId) {
-    path = generatePath(ROUTES.POSTS.PATH, { courseId, topicId });
-    page = 'topics';
+    path = generatePath(Routes.POSTS.PATH, { courseId, topicId });
+    page = 'posts';
  } else if (category) {
-    path = generatePath(ROUTES.TOPICS.CATEGORY, { courseId, category });
+    path = generatePath(Routes.TOPICS.CATEGORY, { courseId, category });
    page = 'category';
  } else if (myPosts) {
-    path = generatePath(ROUTES.POSTS.MY_POSTS, { courseId });
+    path = generatePath(Routes.POSTS.MY_POSTS, { courseId });
    page = 'my-posts';
  }
  await render(
    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
+      <AppProvider store={store}>
        <MemoryRouter initialEntries={[path]}>
          <DiscussionContext.Provider value={{
            courseId,
@@ -67,18 +67,15 @@ async function renderComponent({
            enableInContextSidebar,
          }}
          >
-            <Routes>
-              {
-                [
-                  ROUTES.POSTS.PATH,
-                  ROUTES.POSTS.MY_POSTS,
-                  ROUTES.POSTS.ALL_POSTS,
-                  ROUTES.TOPICS.CATEGORY,
-                ].map((route) => (
-                  <Route key={route} path={route} element={<PostsView />} />
-                ))
-              }
-            </Routes>
+            <Switch>
+              <Route path={Routes.POSTS.MY_POSTS}>
+                <PostsView />
+              </Route>
+              <Route
+                path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.TOPICS.CATEGORY]}
+                component={PostsView}
+              />
+            </Switch>
          </DiscussionContext.Provider>
        </MemoryRouter>
      </AppProvider>
--- a/src/discussions/posts/data/factories/threads.factory.js
+++ b/src/discussions/posts/data/factories/threads.factory.js
@@ -26,7 +26,6 @@ Factory.define('thread')
      'type',
      'voted',
      'pinned',
-      'copy_link',
    ],
    author: 'test_user',
    author_label: 'Staff',
--- a/src/discussions/posts/data/api.js
+++ b/src/discussions/posts/data/api.js
@@ -28,20 +28,22 @@ export const getCoursesApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussio
 * @param {number} cohort
 * @returns {Promise<{}>}
 */
-export const getThreads = async (courseId, {
-  topicIds,
-  page,
-  pageSize,
-  textSearch,
-  orderBy,
-  following,
-  view,
-  author,
-  flagged,
-  threadType,
-  countFlagged,
-  cohort,
-} = {}) => {
+export async function getThreads(
+  courseId, {
+    topicIds,
+    page,
+    pageSize,
+    textSearch,
+    orderBy,
+    following,
+    view,
+    author,
+    flagged,
+    threadType,
+    countFlagged,
+    cohort,
+  } = {},
+) {
  const params = snakeCaseObject({
    courseId,
    page,
@@ -60,19 +62,19 @@ export const getThreads = async (courseId, {
  });
  const { data } = await getAuthenticatedHttpClient().get(getThreadsApiUrl(), { params });
  return data;
-};
+}

 /**
 * Fetches a single thread.
 * @param {string} threadId
 * @returns {Promise<{}>}
 */
-export const getThread = async (threadId, courseId) => {
+export async function getThread(threadId, courseId) {
  const params = { requested_fields: 'profile_image', course_id: courseId };
  const url = `${getThreadsApiUrl()}${threadId}/`;
  const { data } = await getAuthenticatedHttpClient().get(url, { params });
  return data;
-};
+}

 /**
 * Posts a new thread.
@@ -88,7 +90,7 @@ export const getThread = async (threadId, courseId) => {
 * @param {boolean} enableInContextSidebar
 * @returns {Promise<{}>}
 */
-export const postThread = async (
+export async function postThread(
  courseId,
  topicId,
  type,
@@ -101,7 +103,7 @@ export const postThread = async (
    anonymousToPeers,
  } = {},
  enableInContextSidebar = false,
-) => {
+) {
  const postData = snakeCaseObject({
    courseId,
    topicId,
@@ -117,7 +119,7 @@ export const postThread = async (
  const { data } = await getAuthenticatedHttpClient()
    .post(getThreadsApiUrl(), postData);
  return data;
-};
+}

 /**
 * Updates an existing thread.
@@ -136,7 +138,7 @@ export const postThread = async (
 * @param {string} closeReasonCode
 * @returns {Promise<{}>}
 */
-export const updateThread = async (threadId, {
+export async function updateThread(threadId, {
  flagged,
  voted,
  read,
@@ -149,7 +151,7 @@ export const updateThread = async (threadId, {
  pinned,
  editReasonCode,
  closeReasonCode,
-} = {}) => {
+} = {}) {
  const url = `${getThreadsApiUrl()}${threadId}/`;
  const patchData = snakeCaseObject({
    topicId,
@@ -168,17 +170,17 @@ export const updateThread = async (threadId, {
  const { data } = await getAuthenticatedHttpClient()
    .patch(url, patchData, { headers: { 'Content-Type': 'application/merge-patch+json' } });
  return data;
-};
+}

 /**
 * Deletes a thread.
 * @param {string} threadId
 */
-export const deleteThread = async (threadId) => {
+export async function deleteThread(threadId) {
  const url = `${getThreadsApiUrl()}${threadId}/`;
  await getAuthenticatedHttpClient()
    .delete(url);
-};
+}

 /**
 * Upload a file.
@@ -188,7 +190,7 @@ export const deleteThread = async (threadId) => {
 * @param {string} threadKey
 * @returns {Promise<{ location: string }>}
 */
-export const uploadFile = async (blob, filename, courseId, threadKey) => {
+export async function uploadFile(blob, filename, courseId, threadKey) {
  const uploadUrl = `${getCoursesApiUrl()}${courseId}/upload`;
  const formData = new FormData();
  formData.append('thread_key', threadKey);
@@ -198,4 +200,4 @@ export const uploadFile = async (blob, filename, courseId, threadKey) => {
    throw new Error(data.developer_message);
  }
  return data;
-};
+}
--- a/src/discussions/posts/index.js
+++ b/src/discussions/posts/index.js
@@ -2,6 +2,5 @@
 export { showPostEditor } from './data';
 export { default as Post } from './post/Post';
 export { default as messages } from './post-actions-bar/messages';
-// eslint-disable-next-line import/no-cycle
 export { default as PostEditor } from './post-editor/PostEditor';
 export { default as PostsView } from './PostsView';
--- a/Show More
+++ b/Show More