fix: fixed author liking its own post (#729)

* fix: fixed limited content visibility due to oversized sidebar

* refactor: changed names of constants

---------

Co-authored-by: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>

.eslintignore

@@ -2,3 +2,4 @@ coverage/*
 dist/
 node_modules/
 jest.config.js
+src/i18n/messages/

.eslintrc.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig(
   'eslint',

.github/workflows/ci.yml

@@ -11,13 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
       with:
         fetch-depth: 0
     - name: Setup Nodejs Env
       run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies

.tx/config

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

Makefile

@@ -1,7 +1,3 @@
-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"
-
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
@@ -56,26 +52,21 @@ 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) \
+	  && atlas pull $(ATLAS_OPTIONS) \
 	           translations/frontend-component-header/src/i18n/messages:frontend-component-header  \
 	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
 	           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
+	$(intl_imports) frontend-component-header frontend-component-footer frontend-platform paragon frontend-app-discussions
+# endif
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
-	git diff --exit-code package-lock.json
+	git diff --exit-code package-lock.json

README.rst

@@ -52,6 +52,12 @@ Cloning and Startup
 
 The dev server is running at `http://localhost:2002 <http://localhost:2002>`_.
 
+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Getting Help
 ============
 Please tag **@openedx/edx-infinity ** on any PRs or issues.  Thanks.

jest.config.js

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

package.json

@@ -34,14 +34,15 @@
   },
   "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",
+    "@edx/frontend-component-header": "^5.0.2",
+    "@edx/frontend-platform": "^7.1.0",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "^22.1.1",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "core-js": "3.21.1",
     "dompurify": "^2.4.3",
     "formik": "2.4.5",
@@ -50,6 +51,7 @@
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "6.18.0",
     "react-router-dom": "6.18.0",
@@ -57,15 +59,16 @@
     "regenerator-runtime": "0.14.1",
     "timeago.js": "4.0.2",
     "tinymce": "5.10.7",
-    "yup": "0.31.1"
+    "yup": "0.32.11"
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "13.0.14",
     "@edx/reactifex": "1.1.0",
+    "@openedx/frontend-build": "^13.0.28",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
+    "axios": "^0.28.0",
     "axios-mock-adapter": "1.22.0",
     "babel-plugin-react-intl": "8.2.25",
     "eslint-plugin-simple-import-sort": "7.0.0",

src/assets/ContentUnavailable.jsx

@@ -0,0 +1,14 @@
+const ContentUnavailable = () => (
+  <svg width="229" height="167" viewBox="0 0 229 167" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.9664 67.649C1.9299 88.4776 -5.31519 112.805 4.55784 135.123C22.5467 175.788 120.573 164.359 163.26 148.39C283.487 103.415 225.675 -14.6 95.6636 14.5816C59.2626 22.7519 30.003 46.8204 15.9664 67.649Z" fill="#E1DDDB" fillOpacity="0.3" />
+    <path d="M101.264 120.672L101.13 120.486H100.9H58.4969C54.0932 120.486 50.45 116.531 50.45 111.548V60.3944C50.45 55.4164 54.0937 51.45 58.4969 51.45H170.468C174.872 51.45 178.522 55.4171 178.55 60.3969V111.548C178.55 116.531 174.901 120.486 170.497 120.486H126.838H126.636L126.502 120.637L112.568 136.283L101.264 120.672Z" fill="white" stroke="#454545" strokeWidth="0.9" />
+    <path d="M99.363 99.6098L93.9175 94.6162L82.0459 107.565L87.4913 112.558L99.363 99.6098Z" fill="#002121" />
+    <path d="M87.3976 112.877C87.3486 112.862 87.3041 112.836 87.268 112.8L81.7927 107.803C81.76 107.774 81.7334 107.739 81.7145 107.7C81.6956 107.661 81.6848 107.619 81.6828 107.575C81.6807 107.532 81.6874 107.488 81.7025 107.447C81.7175 107.407 81.7407 107.369 81.7705 107.338L93.645 94.3885C93.6737 94.3558 93.7088 94.3292 93.7481 94.3106C93.7875 94.292 93.8302 94.2817 93.8737 94.2803C93.9601 94.2699 94.047 94.2939 94.1158 94.3472L99.5894 99.3501C99.6214 99.3792 99.6472 99.4144 99.6654 99.4537C99.6835 99.4929 99.6937 99.5354 99.6951 99.5786C99.6966 99.6219 99.6894 99.665 99.6739 99.7054C99.6585 99.7458 99.6351 99.7827 99.6052 99.8139L87.7445 112.787C87.6839 112.848 87.6031 112.884 87.5175 112.889C87.4771 112.894 87.4361 112.89 87.3976 112.877ZM82.5076 107.548L87.4698 112.094L98.9201 99.6383L93.966 95.0875L82.5076 107.548Z" fill="#002121" />
+    <path d="M90.5786 108.62L85.6982 104.144C85.0283 103.53 83.9874 103.575 83.3732 104.245L62.9753 126.494C62.3611 127.164 62.4062 128.205 63.076 128.819L67.9565 133.294C68.6263 133.909 69.6672 133.863 70.2814 133.193L90.6793 110.945C91.2935 110.275 91.2484 109.234 90.5786 108.62Z" fill="#03C7E8" />
+    <path d="M68.543 133.99C68.2434 133.908 67.9682 133.754 67.7412 133.542L62.8495 129.063C62.4689 128.709 62.2426 128.22 62.2195 127.7C62.1963 127.181 62.3781 126.673 62.7256 126.286L83.1283 104.037C83.4824 103.656 83.9719 103.43 84.4913 103.407C85.0107 103.384 85.5184 103.565 85.905 103.913L90.7904 108.39C91.171 108.744 91.3972 109.234 91.4204 109.753C91.4435 110.273 91.2618 110.78 90.9142 111.167L70.5243 133.42C70.2781 133.687 69.963 133.882 69.6136 133.983C69.2641 134.083 68.8938 134.086 68.543 133.99ZM84.937 104.091C84.8052 104.054 84.6678 104.039 84.5309 104.048C84.3574 104.056 84.1873 104.099 84.0304 104.173C83.8734 104.247 83.7325 104.352 83.616 104.48L63.2151 126.723C62.9827 126.981 62.8613 127.321 62.8771 127.668C62.8928 128.015 63.0444 128.341 63.2992 128.577L68.1845 133.054C68.4417 133.287 68.78 133.409 69.1265 133.395C69.473 133.38 69.7998 133.23 70.0366 132.976L90.434 110.746C90.6663 110.488 90.7878 110.149 90.772 109.802C90.7563 109.455 90.6046 109.128 90.3499 108.892L85.4645 104.415C85.3185 104.265 85.1372 104.154 84.937 104.091Z" fill="#002121" />
+    <path d="M119.367 71.6959C116.6 69.1548 113.141 67.492 109.428 66.9178C105.715 66.3436 101.916 66.8839 98.51 68.4703C95.1043 70.0567 92.2457 72.6179 90.296 75.8298C88.3463 79.0416 87.3932 82.7597 87.5572 86.5134C87.7212 90.2671 88.9951 93.8877 91.2175 96.9169C93.44 99.9461 96.5111 102.248 100.042 103.531C103.573 104.813 107.406 105.02 111.054 104.123C114.702 103.227 118.003 101.268 120.538 98.4946C123.931 94.7829 125.713 89.8768 125.494 84.8527C125.274 79.8287 123.071 75.097 119.367 71.6959ZM96.9839 96.0996C94.9233 94.2099 93.4694 91.7515 92.8059 89.0353C92.1424 86.3191 92.2992 83.467 93.2565 80.8399C94.2138 78.2127 95.9285 75.9283 98.1839 74.2757C100.439 72.6231 103.134 71.6765 105.927 71.5556C108.72 71.4346 111.487 72.1447 113.876 73.5962C116.266 75.0477 118.171 77.1752 119.352 79.7098C120.532 82.2445 120.934 85.0723 120.508 87.8357C120.081 90.5991 118.845 93.174 116.955 95.2348C114.421 97.9979 110.893 99.6412 107.148 99.8034C103.403 99.9656 99.7468 98.6333 96.9839 96.0996Z" fill="white" />
+    <path d="M101.371 104.313C96.6651 103.025 92.6175 100.01 90.0365 95.8695C87.4556 91.7285 86.5312 86.7663 87.4479 81.9735C88.3647 77.1806 91.055 72.9097 94.982 70.0134C98.9089 67.117 103.784 65.8084 108.633 66.3486C113.482 66.8888 117.949 69.2382 121.142 72.9277C124.335 76.6173 126.019 81.3755 125.858 86.2526C125.697 91.1296 123.703 95.7667 120.273 99.2381C116.844 102.709 112.232 104.76 107.358 104.98C105.34 105.074 103.319 104.848 101.371 104.313ZM111.529 67.7055C109.642 67.1867 107.687 66.9654 105.732 67.0496C101.063 67.2601 96.6449 69.2229 93.3586 72.5465C90.0724 75.8701 88.1594 80.3103 88.0012 84.9817C87.843 89.653 89.4512 94.2123 92.505 97.7502C95.5589 101.288 99.834 103.545 104.478 104.07C109.122 104.596 113.793 103.351 117.56 100.585C121.328 97.8185 123.914 93.7337 124.804 89.1451C125.694 84.5565 124.821 79.8012 122.361 75.8275C119.9 71.8538 116.033 68.9537 111.529 67.7055ZM102.661 99.6222C100.464 99.0148 98.4423 97.8945 96.7628 96.3534C94.1466 93.9593 92.5 90.6882 92.1352 87.1605C91.7704 83.6327 92.7128 80.0937 94.7836 77.2145C96.8544 74.3353 99.9096 72.3161 103.37 71.54C106.83 70.7638 110.455 71.2847 113.556 73.0037C116.658 74.7227 119.021 77.5203 120.197 80.8661C121.373 84.2118 121.281 87.873 119.937 91.1553C118.594 94.4375 116.093 97.1126 112.908 98.6733C109.724 100.234 106.077 100.572 102.661 99.6222ZM97.2188 95.8692C99.2303 97.7107 101.742 98.9152 104.437 99.3306C107.133 99.746 109.89 99.3537 112.363 98.2033C114.836 97.0529 116.912 95.1958 118.331 92.8664C119.75 90.5371 120.447 87.8397 120.334 85.1146C120.215 82.3875 119.291 79.7568 117.678 77.5551C116.064 75.3534 113.835 73.6794 111.27 72.7447C108.706 71.81 105.922 71.6565 103.27 72.3037C100.618 72.9509 98.2181 74.3696 96.3723 76.3807C93.9071 79.0806 92.612 82.6474 92.7707 86.3C92.9294 89.9527 94.5288 93.3936 97.2188 95.8692Z" fill="#002121" />
+  </svg>
+);
+
+export default ContentUnavailable;

src/components/FilterBar.jsx

@@ -1,21 +1,20 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Collapsible, Form, Icon, Spinner,
+} from '@openedx/paragon';
+import { Tune } from '@openedx/paragon/icons';
 import { capitalize, toString } from 'lodash';
 import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Collapsible, Form, Icon, Spinner,
-} from '@edx/paragon';
-import { Tune } from '@edx/paragon/icons';
 
 import {
   PostsStatusFilter, RequestStatus,
   ThreadOrdering, ThreadType,
 } from '../data/constants';
-import { selectCourseCohorts } from '../discussions/cohorts/data/selectors';
+import selectCourseCohorts from '../discussions/cohorts/data/selectors';
 import messages from '../discussions/posts/post-filter-bar/messages';
 import { ActionItem } from '../discussions/posts/post-filter-bar/PostFilterBar';
 
@@ -93,10 +92,15 @@ const FilterBar = ({
     },
   ];
 
+  const handleFilterToggle = useCallback((event) => {
+    onFilterChange(event);
+    setOpen(false);
+  }, [onFilterChange]);
+
   return (
     <Collapsible.Advanced
       open={isOpen}
-      onToggle={() => setOpen(!isOpen)}
+      onToggle={setOpen}
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
@@ -126,7 +130,7 @@ const FilterBar = ({
                 name={value.name}
                 className="d-flex flex-column list-group list-group-flush"
                 value={selectedFilters[value.name]}
-                onChange={onFilterChange}
+                onChange={handleFilterToggle}
               >
                 {value.filters.map(filterName => {
                   const element = allFilters.find(obj => obj.id === filterName);
@@ -159,7 +163,7 @@ const FilterBar = ({
                     name="cohort"
                     className="d-flex flex-column list-group list-group-flush w-100"
                     value={selectedFilters.cohort}
-                    onChange={onFilterChange}
+                    onChange={handleFilterToggle}
                   >
                     <ActionItem
                       id="all-groups"
@@ -189,8 +193,16 @@ const FilterBar = ({
 
 FilterBar.propTypes = {
   intl: intlShape.isRequired,
-  filters: PropTypes.array.isRequired,
-  selectedFilters: PropTypes.object.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    filters: PropTypes.arrayOf(PropTypes.string),
+  })).isRequired,
+  selectedFilters: PropTypes.shape({
+    postType: ThreadType,
+    status: PostsStatusFilter,
+    orderBy: ThreadOrdering,
+    cohort: PropTypes.string,
+  }).isRequired,
   onFilterChange: PropTypes.func.isRequired,
   showCohortsFilter: PropTypes.bool,
 };

src/components/FormikErrorFeedback.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Form, TransitionReplace } from '@openedx/paragon';
 import { getIn, useFormikContext } from 'formik';
 
-import { Form, TransitionReplace } from '@edx/paragon';
-
 const FormikErrorFeedback = ({ name }) => {
   const { touched, errors } = useFormikContext();
   const fieldTouched = getIn(touched, name);

src/components/Head/Head.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Helmet } from 'react-helmet';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['discussions.page.title'], { siteName: getConfig().SITE_NAME })}
+    </title>
+    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  </Helmet>
+);
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Head);

src/components/Head/Head.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import { Helmet } from 'react-helmet';
+
+import { getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Discussions | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});

src/components/Head/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'discussions.page.title': {
+    id: 'discussions.page.title',
+    defaultMessage: 'Discussions | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;

src/components/NavigationBar/CourseTabsNavigation.jsx

@@ -1,30 +1,21 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { fetchTab } from './data/thunks';
 import Tabs from './tabs/Tabs';
 import messages from './messages';
 
 import './navBar.scss';
 
-const CourseTabsNavigation = ({
-  activeTab, className, courseId, rootSlug,
-}) => {
-  const dispatch = useDispatch();
+const CourseTabsNavigation = () => {
   const intl = useIntl();
   const tabs = useSelector(state => state.courseTabs.tabs);
 
-  useEffect(() => {
-    dispatch(fetchTab(courseId, rootSlug));
-  }, [courseId]);
-
   return (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4', className)}>
+    <div id="courseTabsNavigation" className="course-tabs-navigation px-4 bg-white">
       {!!tabs.length && (
         <Tabs
           className="nav-underline-tabs"
@@ -33,7 +24,7 @@ const CourseTabsNavigation = ({
           {tabs.map(({ url, title, slug }) => (
             <a
               key={slug}
-              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
+              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === 'discussion' })}
               href={url}
             >
               {title}
@@ -45,17 +36,4 @@ const CourseTabsNavigation = ({
   );
 };
 
-CourseTabsNavigation.propTypes = {
-  activeTab: PropTypes.string,
-  className: PropTypes.string,
-  rootSlug: PropTypes.string,
-  courseId: PropTypes.string.isRequired,
-};
-
-CourseTabsNavigation.defaultProps = {
-  activeTab: undefined,
-  className: null,
-  rootSlug: 'outline',
-};
-
 export default React.memo(CourseTabsNavigation);

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

@@ -19,7 +19,7 @@ Factory.define('navigationBar')
     user_message: null,
   }))
   .option('course_id', null, 'course-v1:edX+DemoX+Demo_Course')
-  .attr('is_enrolled', null, false)
+  .sequence('is_enrolled', ['isEnrolled'], (idx, isEnrolled) => isEnrolled)
   .attr('is_self_paced', null, false)
   .attr('is_staff', null, true)
   .attr('number', null, 'DemoX')

src/components/NavigationBar/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -6,15 +5,12 @@ import { getApiBaseUrl } from '../../../data/constants';
 
 export const getCourseMetadataApiUrl = (courseId) => `${getApiBaseUrl()}/api/course_home/course_metadata/${courseId}`;
 
-function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
+function normalizeCourseHomeCourseMetadata(metadata) {
   const data = camelCaseObject(metadata);
   return {
     ...data,
     tabs: data.tabs.map(tab => ({
-      // The API uses "courseware" as a slug for both courseware and the outline tab.
-      // If needed, we switch it to "outline" here for
-      // use within the MFE to differentiate between course home and courseware.
-      slug: tab.tabId === 'courseware' ? rootSlug : tab.tabId,
+      slug: tab.tabId === 'courseware' ? 'outline' : tab.tabId,
       title: tab.title,
       url: tab.url,
     })),
@@ -22,10 +18,9 @@ function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
   };
 }
 
-export async function getCourseHomeCourseMetadata(courseId, rootSlug) {
+export async function getCourseHomeCourseMetadata(courseId) {
   const url = getCourseMetadataApiUrl(courseId);
-  // don't know the context of adding timezone in url. hence omitting it
-  // url = appendBrowserTimezoneToUrl(url);
   const { data } = await getAuthenticatedHttpClient().get(url);
-  return normalizeCourseHomeCourseMetadata(data, rootSlug);
+
+  return normalizeCourseHomeCourseMetadata(data);
 }

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

@@ -5,9 +5,9 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 
 import { initializeStore } from '../../../store';
-import { executeThunk } from '../../../test-utils';
+import executeThunk from '../../../test-utils';
 import { getCourseMetadataApiUrl } from './api';
-import { fetchTab } from './thunks';
+import fetchTab from './thunks';
 
 import './__factories__';
 
@@ -34,7 +34,7 @@ describe('Navigation bar api tests', () => {
   });
 
   it('Successfully get navigation tabs', async () => {
-    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1)));
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: true })));
     await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
 
     expect(store.getState().courseTabs.tabs).toHaveLength(4);
@@ -58,7 +58,7 @@ 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 })),
+      (Factory.build('navigationBar', 1, { hasCourseAccess: false, isEnrolled: true })),
     );
     await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
 

src/components/NavigationBar/data/selectors.js

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

src/components/NavigationBar/data/slice.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
 export const LOADING = 'loading';
@@ -14,30 +13,44 @@ const slice = createSlice({
     tabs: [],
     courseTitle: null,
     courseNumber: null,
+    isEnrolled: false,
     org: null,
   },
   reducers: {
-    fetchTabDenied: (state, { payload }) => {
-      state.courseId = payload.courseId;
-      state.courseStatus = DENIED;
-    },
-    fetchTabFailure: (state, { payload }) => {
-      state.courseId = payload.courseId;
-      state.courseStatus = FAILED;
-    },
-    fetchTabRequest: (state, { payload }) => {
-      state.courseId = payload.courseId;
-      state.courseStatus = LOADING;
-    },
-    fetchTabSuccess: (state, { payload }) => {
-      state.courseId = payload.courseId;
-      state.targetUserId = payload.targetUserId;
-      state.tabs = payload.tabs;
-      state.courseStatus = LOADED;
-      state.courseTitle = payload.courseTitle;
-      state.courseNumber = payload.courseNumber;
-      state.org = payload.org;
-    },
+    fetchTabDenied: (state, { payload }) => (
+      {
+        ...state,
+        courseId: payload.courseId,
+        courseStatus: DENIED,
+      }
+    ),
+    fetchTabFailure: (state, { payload }) => (
+      {
+        ...state,
+        courseId: payload.courseId,
+        courseStatus: FAILED,
+      }
+    ),
+    fetchTabRequest: (state, { payload }) => (
+      {
+        ...state,
+        courseId: payload.courseId,
+        courseStatus: LOADING,
+      }
+    ),
+    fetchTabSuccess: (state, { payload }) => (
+      {
+        ...state,
+        courseId: payload.courseId,
+        targetUserId: payload.targetUserId,
+        tabs: payload.tabs,
+        courseStatus: LOADED,
+        courseTitle: payload.courseTitle,
+        courseNumber: payload.courseNumber,
+        org: payload.org,
+        isEnrolled: payload.isEnrolled,
+      }
+    ),
   },
 });
 

src/components/NavigationBar/data/thunks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export, no-unused-expressions */
 import { logError } from '@edx/frontend-platform/logging';
 
 import { getHttpErrorStatus } from '../../../discussions/utils';
@@ -10,11 +9,11 @@ import {
   fetchTabSuccess,
 } from './slice';
 
-export function fetchTab(courseId, rootSlug) {
+export default function fetchTab(courseId) {
   return async (dispatch) => {
     dispatch(fetchTabRequest({ courseId }));
     try {
-      const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId, rootSlug);
+      const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId);
       if (!courseHomeCourseMetadata.courseAccess.hasAccess) {
         dispatch(fetchTabDenied({ courseId }));
       } else {
@@ -24,6 +23,7 @@ export function fetchTab(courseId, rootSlug) {
           org: courseHomeCourseMetadata.org,
           courseNumber: courseHomeCourseMetadata.number,
           courseTitle: courseHomeCourseMetadata.title,
+          isEnrolled: courseHomeCourseMetadata.isEnrolled,
         }));
       }
     } catch (e) {

src/components/NavigationBar/index.js

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

src/components/NavigationBar/navBar.scss

@@ -1,6 +1,6 @@
 @import "~@edx/brand/paragon/fonts.scss";
 @import "~@edx/brand/paragon/variables.scss";
-@import "~@edx/paragon/scss/core/core.scss";
+@import "~@openedx/paragon/scss/core/core.scss";
 @import "~@edx/brand/paragon/overrides.scss";
 
 $fa-font-path: "~font-awesome/fonts";

src/components/NavigationBar/tabs/Tabs.jsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
+import { Dropdown } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Dropdown } from '@edx/paragon';
 
 import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
 

src/components/NavigationBar/tabs/useIndexOfLastVisibleChild.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 
-import { useWindowSize } from '@edx/paragon';
+import { useWindowSize } from '@openedx/paragon';
 
 const invisibleStyle = {
   position: 'absolute',

src/components/PostPreviewPanel.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
+import { Button, Icon, IconButton } from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon, IconButton } from '@edx/paragon';
-import { Close } from '@edx/paragon/icons';
 
 import messages from '../discussions/posts/post-editor/messages';
 import HTMLLoader from './HTMLLoader';
@@ -18,7 +19,7 @@ const PostPreviewPanel = ({
     <>
       {showPreviewPane && (
         <div
-          className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
+          className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview overflow-auto ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
           style={{ minHeight: '200px', wordBreak: 'break-word' }}
         >
           <IconButton

src/components/Search.jsx

@@ -2,14 +2,14 @@ import React, {
   useCallback, useContext, useEffect, useRef, useState,
 } from 'react';
 
+import { Icon, SearchField } from '@openedx/paragon';
+import { Search as SearchIcon } from '@openedx/paragon/icons';
 import camelCase from 'lodash/camelCase';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, SearchField } from '@edx/paragon';
-import { Search as SearchIcon } from '@edx/paragon/icons';
 
-import { DiscussionContext } from '../discussions/common/context';
+import DiscussionContext from '../discussions/common/context';
 import { setUsernameSearch } from '../discussions/learners/data';
 import { setSearchQuery } from '../discussions/posts/data';
 import postsMessages from '../discussions/posts/post-actions-bar/messages';

src/components/SearchInfo.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Button, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@edx/paragon';
-import { Search } from '@edx/paragon/icons';
 
 import { RequestStatus } from '../data/constants';
 import messages from '../discussions/posts/post-actions-bar/messages';

src/components/Spinner.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Spinner as ParagonSpinner } from '@edx/paragon';
+import { Spinner as ParagonSpinner } from '@openedx/paragon';
 
 const Spinner = () => (
   <div className="spinner-container" data-testid="spinner">

src/components/TinyMCEEditor.jsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { ActionRow, AlertModal, Button } from '@openedx/paragon';
 import { Editor } from '@tinymce/tinymce-react';
 import { useLocation, useParams } from 'react-router-dom';
 // TinyMCE so the global var exists
@@ -7,7 +8,6 @@ import { useLocation, useParams } from 'react-router-dom';
 import tinymce from 'tinymce/tinymce';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, AlertModal, Button } from '@edx/paragon';
 
 import { MAX_UPLOAD_FILE_SIZE } from '../data/constants';
 import messages from '../discussions/messages';

src/components/TopicStats.jsx

@@ -2,11 +2,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { HelpOutline, PostOutline, Report } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
-import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
 
 import {
   selectUserHasModerationPrivileges,

src/components/icons/InsertLink.jsx

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

src/components/icons/Issue.jsx

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

src/components/icons/People.jsx

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

src/components/icons/PushPin.jsx

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

src/components/icons/Question.jsx

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

src/components/icons/QuestionAnswer.jsx

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

src/components/icons/QuestionAnswerOutline.jsx

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

src/components/icons/StarFilled.jsx

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

src/components/icons/StarOutline.jsx

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

src/components/icons/ThumbUpFilled.jsx

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

src/components/icons/ThumbUpOutline.jsx

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

src/components/icons/index.js

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

src/data/__factories__/blocks.js

@@ -1,7 +1,5 @@
-/* eslint-disable import/prefer-default-export */
-
 // Course Blocks API response for the demo course.
-export const getBlocksAPIResponse = (newProvider = false) => {
+const getBlocksAPIResponse = (newProvider = false) => {
   const response = {
     root: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
     blocks: {
@@ -936,3 +934,5 @@ export const getBlocksAPIResponse = (newProvider = false) => {
   }
   return response;
 };
+
+export default getBlocksAPIResponse;

src/data/__factories__/index.js

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

src/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 import { getApiBaseUrl } from './constants';

src/data/constants.js

@@ -80,6 +80,7 @@ export const RequestStatus = {
  */
 export const AvatarOutlineAndLabelColors = {
   Staff: 'staff-color',
+  Moderator: 'TA-color',
   'Community TA': 'TA-color',
 };
 

src/data/hooks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { useState } from 'react';
 
 import { useDispatch } from 'react-redux';
@@ -15,7 +14,7 @@ import { useDispatch } from 'react-redux';
  *
  * @return {(boolean|(function(*=): Promise<void>)|*)[]}
  */
-export function useDispatchWithState() {
+export default function useDispatchWithState() {
   const dispatch = useDispatch();
   const [isDispatching, setDispatching] = useState(false);
 

src/data/redux.test.js

@@ -5,11 +5,11 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 
 import { initializeStore } from '../store';
-import { executeThunk } from '../test-utils';
-import { getBlocksAPIResponse } from './__factories__';
+import executeThunk from '../test-utils';
+import getBlocksAPIResponse from './__factories__/blocks';
 import { getBlocksAPIURL } from './api';
 import { RequestStatus } from './constants';
-import { fetchCourseBlocks } from './thunks';
+import fetchCourseBlocks from './thunks';
 
 const blocksAPIURL = getBlocksAPIURL();
 const courseId = 'course-v1:edX+DemoX+Demo_Course';

src/data/selectors.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 import { createSelector } from '@reduxjs/toolkit';
 
 import { selectDiscussionProvider, selectGroupAtSubsection } from '../discussions/data/selectors';

src/data/slices.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign,import/prefer-default-export */
 import { createSlice } from '@reduxjs/toolkit';
 
 import { RequestStatus } from './constants';
@@ -16,19 +15,33 @@ const blocksSlice = createSlice({
     blocks: {},
   },
   reducers: {
-    fetchCourseBlocksRequest: (state) => {
-      state.status = RequestStatus.IN_PROGRESS;
-    },
-    fetchCourseBlocksSuccess: (state, { payload }) => {
-      state.status = RequestStatus.SUCCESSFUL;
-      Object.assign(state, payload);
-    },
-    fetchCourseBlocksFailed: (state) => {
-      state.status = RequestStatus.FAILED;
-    },
-    fetchCourseBlocksDenied: (state) => {
-      state.status = RequestStatus.DENIED;
-    },
+    fetchCourseBlocksRequest: (state) => (
+      {
+        ...state,
+        status: RequestStatus.IN_PROGRESS,
+      }
+    ),
+    fetchCourseBlocksSuccess: (state, { payload }) => (
+      {
+        ...state,
+        status: RequestStatus.SUCCESSFUL,
+        topics: payload.topics,
+        chapters: payload.chapters,
+        blocks: payload.blocks,
+      }
+    ),
+    fetchCourseBlocksFailed: (state) => (
+      {
+        ...state,
+        status: RequestStatus.FAILED,
+      }
+    ),
+    fetchCourseBlocksDenied: (state) => (
+      {
+        ...state,
+        status: RequestStatus.DENIED,
+      }
+    ),
   },
 });
 

src/data/thunks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export, no-unused-expressions */
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
@@ -88,7 +87,7 @@ function normaliseCourseBlocks({
   };
 }
 
-export function fetchCourseBlocks(courseId, username) {
+export default function fetchCourseBlocks(courseId, username) {
   return async (dispatch) => {
     try {
       dispatch(fetchCourseBlocksRequest({ courseId }));

src/discussions/cohorts/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { ensureConfig, getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 

src/discussions/cohorts/data/redux.test.js

@@ -5,9 +5,9 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 
 import { initializeStore } from '../../../store';
-import { executeThunk } from '../../../test-utils';
+import executeThunk from '../../../test-utils';
 import { getCohortsApiUrl } from './api';
-import { fetchCourseCohorts } from './thunks';
+import fetchCourseCohorts from './thunks';
 
 import './__factories__';
 

src/discussions/cohorts/data/selectors.js

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

src/discussions/cohorts/data/slices.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign,import/prefer-default-export */
 import { createSlice } from '@reduxjs/toolkit';
 
 import { RequestStatus } from '../../../data/constants';
@@ -10,17 +9,26 @@ const cohortsSlice = createSlice({
     cohorts: [],
   },
   reducers: {
-    fetchCohortsRequest: (state) => {
-      state.status = RequestStatus.IN_PROGRESS;
-      state.cohorts = [];
-    },
-    fetchCohortsSuccess: (state, { payload }) => {
-      state.status = RequestStatus.SUCCESSFUL;
-      state.cohorts = payload;
-    },
-    fetchCohortsFailed: (state) => {
-      state.status = RequestStatus.FAILED;
-    },
+    fetchCohortsRequest: (state) => (
+      {
+        ...state,
+        status: RequestStatus.IN_PROGRESS,
+        cohorts: [],
+      }
+    ),
+    fetchCohortsSuccess: (state, { payload }) => (
+      {
+        ...state,
+        status: RequestStatus.SUCCESSFUL,
+        cohorts: payload,
+      }
+    ),
+    fetchCohortsFailed: (state) => (
+      {
+        ...state,
+        status: RequestStatus.FAILED,
+      }
+    ),
   },
 });
 

src/discussions/cohorts/data/thunks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
@@ -11,7 +10,7 @@ import {
   fetchCohortsSuccess,
 } from './slices';
 
-export function fetchCourseCohorts(courseId) {
+export default function fetchCourseCohorts(courseId) {
   return async (dispatch) => {
     try {
       dispatch(fetchCohortsRequest());

src/discussions/common/ActionsDropdown.jsx

@@ -3,14 +3,14 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
+} from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
-import {
-  Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
-} from '@edx/paragon';
-import { MoreHoriz } from '@edx/paragon/icons';
 
 import { ContentActions } from '../../data/constants';
 import { selectIsPostingEnabled } from '../data/selectors';
@@ -48,7 +48,8 @@ const ActionsDropdown = ({
     }
   }, [actions, isPostingEnabled]);
 
-  const onClickButton = useCallback(() => {
+  const onClickButton = useCallback((event) => {
+    event.preventDefault();
     setTarget(buttonRef.current);
     open();
   }, [open]);

src/discussions/common/ActionsDropdown.test.jsx

@@ -12,13 +12,13 @@ import { AppProvider } from '@edx/frontend-platform/react';
 
 import { ContentActions } from '../../data/constants';
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
+import fetchCourseConfig from '../data/thunks';
 import messages from '../messages';
 import { getCommentsApiUrl } from '../post-comments/data/api';
 import { addComment, fetchThreadComments } from '../post-comments/data/thunks';
-import { PostCommentsContext } from '../post-comments/postCommentsContext';
+import PostCommentsContext from '../post-comments/postCommentsContext';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThread } from '../posts/data/thunks';
 import { ACTIONS_LIST } from '../utils';

src/discussions/common/AlertBanner.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert } from '@openedx/paragon';
+import { Report } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Report } from '@edx/paragon/icons';
 
 import { AvatarOutlineAndLabelColors } from '../../data/constants';
 import {

src/discussions/common/AlertBanner.test.jsx

@@ -9,7 +9,7 @@ import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
 import messages from '../post-comments/messages';
 import AlertBanner from './AlertBanner';
-import { DiscussionContext } from './context';
+import DiscussionContext from './context';
 
 import '../post-comments/data/__factories__';
 import '../posts/data/__factories__';

src/discussions/common/AlertBar.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert } from '@openedx/paragon';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
 
 import messages from '../post-comments/messages';
 import AuthorLabel from './AuthorLabel';

src/discussions/common/AuthorLabel.jsx

@@ -1,18 +1,17 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import classNames from 'classnames';
 import { generatePath, Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-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 { getAuthorLabel } from '../utils';
+import DiscussionContext from './context';
 import timeLocale from './time-locale';
 
 const AuthorLabel = ({
@@ -27,26 +26,15 @@ const AuthorLabel = ({
 }) => {
   timeago.register('time-locale', timeLocale);
   const intl = useIntl();
-  const { courseId } = useContext(DiscussionContext);
-  let icon = null;
-  let authorLabelMessage = null;
-
-  if (authorLabel === 'Staff') {
-    icon = Institution;
-    authorLabelMessage = intl.formatMessage(messages.authorLabelStaff);
-  }
-
-  if (authorLabel === 'Community TA') {
-    icon = School;
-    authorLabelMessage = intl.formatMessage(messages.authorLabelTA);
-  }
+  const { courseId, enableInContextSidebar } = useContext(DiscussionContext);
+  const { icon, authorLabelMessage } = useMemo(() => getAuthorLabel(intl, authorLabel), [authorLabel]);
 
   const isRetiredUser = author ? author.startsWith('retired__user') : false;
   const showTextPrimary = !authorLabelMessage && !isRetiredUser && !alert;
   const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
 
-  const showUserNameAsLink = useShowLearnersTab()
-    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
+  const showUserNameAsLink = linkToProfile && author && author !== intl.formatMessage(messages.anonymous)
+                             && !enableInContextSidebar;
 
   const authorName = useMemo(() => (
     <span
@@ -64,17 +52,15 @@ const AuthorLabel = ({
   const labelContents = useMemo(() => (
     <>
       <OverlayTrigger
+        placement={authorToolTip ? 'top' : 'right'}
         overlay={(
-          <Tooltip id={`endorsed-by-${author}-tooltip`}>
-            {author}
+          <Tooltip id={authorToolTip ? `endorsed-by-${author}-tooltip` : `${authorLabel}-label-tooltip`}>
+            {authorToolTip ? author : authorLabel}
           </Tooltip>
         )}
         trigger={['hover', 'focus']}
       >
-        <div className={classNames('d-flex flex-row align-items-center', {
-          'disable-div': !authorToolTip,
-        })}
-        >
+        <div className={classNames('d-flex flex-row align-items-center')}>
           <Icon
             style={{
               width: '1rem',
@@ -113,12 +99,12 @@ const AuthorLabel = ({
 
   return showUserNameAsLink
     ? (
-      <div className={className}>
+      <div className={`${className} flex-wrap`}>
         <Link
           data-testid="learner-posts-link"
           id="learner-posts-link"
           to={generatePath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })}
-          className="text-decoration-none"
+          className="text-decoration-none text-reset"
           style={{ width: 'fit-content' }}
         >
           {!alert && authorName}
@@ -126,7 +112,7 @@ const AuthorLabel = ({
         {labelContents}
       </div>
     )
-    : <div className={className}>{authorName}{labelContents}</div>;
+    : <div className={`${className} flex-wrap`}>{authorName}{labelContents}</div>;
 };
 
 AuthorLabel.propTypes = {

src/discussions/common/AuthorLabel.test.jsx

@@ -9,11 +9,11 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
+import fetchCourseConfig from '../data/thunks';
 import AuthorLabel from './AuthorLabel';
-import { DiscussionContext } from './context';
+import DiscussionContext from './context';
 
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
 const courseConfigApiUrl = getCourseConfigApiUrl();
@@ -21,11 +21,11 @@ let store;
 let axiosMock;
 let container;
 
-function renderComponent(author, authorLabel, linkToProfile, labelColor) {
+function renderComponent(author, authorLabel, linkToProfile, labelColor, enableInContextSidebar) {
   const wrapper = render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <DiscussionContext.Provider value={{ courseId }}>
+        <DiscussionContext.Provider value={{ courseId, enableInContextSidebar }}>
           <AuthorLabel
             author={author}
             authorLabel={authorLabel}
@@ -53,7 +53,6 @@ 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, {});
@@ -63,6 +62,7 @@ describe('Author label', () => {
   describe.each([
     ['anonymous', null, false, ''],
     ['ta_user', 'Community TA', true, 'text-TA-color'],
+    ['moderator_user', 'Moderator', true, 'text-TA-color'],
     ['retired__user', null, false, ''],
     ['staff_user', 'Staff', true, 'text-staff-color'],
     ['learner_user', null, false, ''],
@@ -79,9 +79,9 @@ describe('Author label', () => {
     );
 
     it(
-      `it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
+      `it is "${(!linkToProfile) && 'not'}" clickable when linkToProfile is ${!!linkToProfile} and enableInContextSidebar is false`,
       async () => {
-        renderComponent(author, authorLabel, linkToProfile, labelColor);
+        renderComponent(author, authorLabel, linkToProfile, labelColor, false);
 
         if (linkToProfile) {
           expect(screen.queryByTestId('learner-posts-link')).toBeInTheDocument();
@@ -91,6 +91,15 @@ describe('Author label', () => {
       },
     );
 
+    it(
+      'it is not clickable when enableInContextSidebar is true',
+      async () => {
+        renderComponent(author, authorLabel, linkToProfile, labelColor, true);
+
+        expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
+      },
+    );
+
     it(
       `it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
       async () => {
@@ -98,7 +107,7 @@ describe('Author label', () => {
         const authorElement = container.querySelector('[role=heading]');
         const labelParentNode = authorElement.parentNode.parentNode;
         const labelElement = labelParentNode.lastChild.lastChild;
-        const label = ['TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
+        const label = ['CTA', 'TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
 
         if (linkToProfile) {
           expect(labelParentNode).toHaveClass(labelColor);

src/discussions/common/Confirmation.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 
 import messages from '../messages';
 

src/discussions/common/EndorsedAlertBanner.jsx

@@ -1,15 +1,15 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert, Icon } from '@openedx/paragon';
+import { CheckCircle, Verified } from '@openedx/paragon/icons';
 import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert, Icon } from '@edx/paragon';
-import { CheckCircle, Verified } from '@edx/paragon/icons';
 
 import { ThreadType } from '../../data/constants';
 import messages from '../post-comments/messages';
-import { PostCommentsContext } from '../post-comments/postCommentsContext';
+import PostCommentsContext from '../post-comments/postCommentsContext';
 import AuthorLabel from './AuthorLabel';
 import timeLocale from './time-locale';
 

src/discussions/common/EndorsedAlertBanner.test.jsx

@@ -8,8 +8,8 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
 import messages from '../post-comments/messages';
-import { PostCommentsContext } from '../post-comments/postCommentsContext';
-import { DiscussionContext } from './context';
+import PostCommentsContext from '../post-comments/postCommentsContext';
+import DiscussionContext from './context';
 import EndorsedAlertBanner from './EndorsedAlertBanner';
 
 import '../post-comments/data/__factories__';

src/discussions/common/HoverCard.jsx

@@ -1,20 +1,21 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Button, Icon, IconButton, OverlayTrigger, Tooltip,
+} from '@openedx/paragon';
+import {
+  StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
+} from '@openedx/paragon/icons';
 import classNames from 'classnames';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Button, Icon, IconButton, OverlayTrigger, Tooltip,
-} from '@edx/paragon';
 
-import {
-  StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
-} from '../../components/icons';
-import { useUserPostingEnabled } from '../data/hooks';
-import { PostCommentsContext } from '../post-comments/postCommentsContext';
+import { ThreadType } from '../../data/constants';
+import { useHasLikePermission, useUserPostingEnabled } from '../data/hooks';
+import PostCommentsContext from '../post-comments/postCommentsContext';
 import ActionsDropdown from './ActionsDropdown';
-import { DiscussionContext } from './context';
+import DiscussionContext from './context';
 
 const HoverCard = ({
   id,
@@ -32,10 +33,11 @@ const HoverCard = ({
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const { isClosed } = useContext(PostCommentsContext);
   const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
+  const userHasLikePermission = useHasLikePermission(contentType, id);
 
   return (
     <div
-      className="flex-fill justify-content-end align-items-center hover-card mr-n4 position-absolute"
+      className="flex-fill justify-content-end align-items-center hover-card bg-white mr-n4 position-absolute"
       data-testid={`hover-card-${id}`}
       id={`hover-card-${id}`}
     >
@@ -85,6 +87,7 @@ const HoverCard = ({
           iconAs={Icon}
           size="sm"
           alt="Like"
+          disabled={!userHasLikePermission}
           iconClassNames="like-icon-dimensions"
           onClick={(e) => {
             e.preventDefault();
@@ -127,8 +130,22 @@ 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),
+  endorseIcons: PropTypes.objectOf(PropTypes.shape(
+    {
+      id: PropTypes.string,
+      action: PropTypes.string,
+      icon: PropTypes.element,
+      label: {
+        id: PropTypes.string,
+        defaultMessage: PropTypes.string,
+        description: PropTypes.string,
+      },
+      conditions: {
+        endorsed: PropTypes.bool,
+        postType: ThreadType,
+      },
+    },
+  )),
   onFollow: PropTypes.func,
   following: PropTypes.bool,
 };

src/discussions/common/HoverCard.test.jsx

@@ -11,15 +11,15 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
+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 { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
-import { DiscussionContext } from './context';
+import DiscussionContext from './context';
 
 import '../posts/data/__factories__';
 import '../post-comments/data/__factories__';

src/discussions/common/context.js

@@ -1,7 +1,6 @@
-/* eslint-disable import/prefer-default-export */
 import React from 'react';
 
-export const DiscussionContext = React.createContext({
+const DiscussionContext = React.createContext({
   page: null,
   courseId: null,
   postId: null,
@@ -10,3 +9,5 @@ export const DiscussionContext = React.createContext({
   category: null,
   learnerUsername: null,
 });
+
+export default DiscussionContext;

src/discussions/content-unavailable/ContentUnavailable.jsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import propTypes from 'prop-types';
+
+import { Button } from '@openedx/paragon';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import ContentUnavailableIcon from '../../assets/ContentUnavailable';
+import selectCourseTabs from '../../components/NavigationBar/data/selectors';
+import { useIsOnTablet, useIsOnXLDesktop } from '../data/hooks';
+import messages from '../messages';
+
+const ContentUnavailable = ({ subTitleMessage }) => {
+  const intl = useIntl();
+  const isOnTabletorDesktop = useIsOnTablet();
+  const isOnXLDesktop = useIsOnXLDesktop();
+  const { courseId } = useSelector(selectCourseTabs);
+
+  const redirectToDashboard = useCallback(() => {
+    window.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/about`);
+  }, [courseId]);
+
+  return (
+    <div className="min-content-height justify-content-center align-items-center d-flex w-100 flex-column bg-white">
+      <div className={classNames('d-flex flex-column align-items-center', {
+        'content-unavailable-desktop': isOnTabletorDesktop || isOnXLDesktop,
+        'py-0 px-3': !isOnTabletorDesktop && !isOnXLDesktop,
+      })}
+      >
+        <ContentUnavailableIcon />
+        <h3 className="pt-3 font-weight-bold text-primary-500 text-center">
+          {intl.formatMessage(messages.contentUnavailableTitle)}
+        </h3>
+        <p className="pb-2 text-gray-500 text-center">{intl.formatMessage(subTitleMessage)}</p>
+        <Button onClick={redirectToDashboard} variant="outline-dark" className="font-size-14 py-2 px-2.5">
+          {intl.formatMessage(messages.contentUnavailableAction)}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+ContentUnavailable.propTypes = {
+  subTitleMessage: propTypes.shape({
+    id: propTypes.string,
+    defaultMessage: propTypes.string,
+    description: propTypes.string,
+  }).isRequired,
+};
+
+export default React.memo(ContentUnavailable);

src/discussions/data/api.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 

src/discussions/data/hooks.js

@@ -3,6 +3,7 @@ import {
   useContext, useEffect, useMemo, useRef, useState,
 } from 'react';
 
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   matchPath, useLocation, useMatch, useNavigate,
@@ -11,33 +12,37 @@ import {
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
-import { breakpoints, useWindowSize } from '@edx/paragon';
 
-import { RequestStatus, Routes } from '../../data/constants';
+import selectCourseTabs from '../../components/NavigationBar/data/selectors';
+import { LOADED } from '../../components/NavigationBar/data/slice';
+import fetchTab from '../../components/NavigationBar/data/thunks';
+import { ContentActions, RequestStatus, Routes } from '../../data/constants';
 import { selectTopicsUnderCategory } from '../../data/selectors';
-import { fetchCourseBlocks } from '../../data/thunks';
-import { DiscussionContext } from '../common/context';
+import fetchCourseBlocks from '../../data/thunks';
+import DiscussionContext from '../common/context';
+import PostCommentsContext from '../post-comments/postCommentsContext';
 import { clearRedirect } from '../posts/data';
 import { threadsLoadingStatus } from '../posts/data/selectors';
 import { selectTopics } from '../topics/data/selectors';
 import tourCheckpoints from '../tours/constants';
-import { selectTours } from '../tours/data/selectors';
+import selectTours from '../tours/data/selectors';
 import { updateTourShowStatus } from '../tours/data/thunks';
 import messages from '../tours/messages';
-import { discussionsPath } from '../utils';
+import { checkPermissions, discussionsPath } from '../utils';
+import { ContentSelectors } from './constants';
 import {
   selectAreThreadsFiltered,
   selectEnableInContext,
   selectIsCourseAdmin,
   selectIsCourseStaff,
   selectIsPostingEnabled,
-  selectLearnersTabEnabled,
+  selectIsUserLearner,
   selectPostThreadCount,
   selectUserHasModerationPrivileges,
   selectUserIsGroupTa,
   selectUserIsStaff,
 } from './selectors';
-import { fetchCourseConfig } from './thunks';
+import fetchCourseConfig from './thunks';
 
 export function useTotalTopicThreadCount() {
   const topics = useSelector(selectTopics);
@@ -74,18 +79,34 @@ export const useSidebarVisible = () => {
 
 export function useCourseDiscussionData(courseId) {
   const dispatch = useDispatch();
-  const { authenticatedUser } = useContext(AppContext);
 
   useEffect(() => {
     async function fetchBaseData() {
       await dispatch(fetchCourseConfig(courseId));
-      await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
+      await dispatch(fetchTab(courseId));
     }
 
     fetchBaseData();
   }, [courseId]);
 }
 
+export function useCourseBlockData(courseId) {
+  const dispatch = useDispatch();
+  const { authenticatedUser } = useContext(AppContext);
+  const { isEnrolled, courseStatus } = useSelector(selectCourseTabs);
+  const isUserLearner = useSelector(selectIsUserLearner);
+
+  useEffect(() => {
+    async function fetchBaseData() {
+      if (courseStatus === LOADED && (!isUserLearner || isEnrolled)) {
+        await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
+      }
+    }
+
+    fetchBaseData();
+  }, [courseId, isEnrolled, courseStatus, isUserLearner]);
+}
+
 export function useRedirectToThread(courseId, enableInContextSidebar) {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -112,12 +133,17 @@ export function useRedirectToThread(courseId, enableInContextSidebar) {
 
 export function useIsOnDesktop() {
   const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.medium.minWidth;
+  return windowSize.width >= breakpoints.medium.maxWidth;
+}
+
+export function useIsOnTablet() {
+  const windowSize = useWindowSize();
+  return windowSize.width >= breakpoints.small.maxWidth;
 }
 
 export function useIsOnXLDesktop() {
   const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.extraLarge.minWidth;
+  return windowSize.width >= breakpoints.extraLarge.maxWidth;
 }
 
 /**
@@ -171,8 +197,6 @@ export const useAlertBannerVisible = (
   );
 };
 
-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.
@@ -262,3 +286,10 @@ export const useDebounce = (value, delay) => {
   );
   return debouncedValue;
 };
+
+export const useHasLikePermission = (contentType, id) => {
+  const { postType } = useContext(PostCommentsContext);
+  const content = { ...useSelector(ContentSelectors[contentType](id)), postType };
+
+  return checkPermissions(content, ContentActions.VOTE);
+};

src/discussions/data/hooks.test.jsx

@@ -8,11 +8,11 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
-import { DiscussionContext } from '../common/context';
+import executeThunk from '../../test-utils';
+import DiscussionContext from '../common/context';
 import { getCourseConfigApiUrl } from './api';
 import { useCurrentDiscussionTopic, useUserPostingEnabled } from './hooks';
-import { fetchCourseConfig } from './thunks';
+import fetchCourseConfig from './thunks';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const courseConfigApiUrl = getCourseConfigApiUrl();

src/discussions/data/selectors.js

@@ -1,5 +1,8 @@
-/* eslint-disable import/prefer-default-export */
+import { createSelector } from '@reduxjs/toolkit';
+
+import selectCourseTabs from '../../components/NavigationBar/data/selectors';
 import { PostsStatusFilter, ThreadType } from '../../data/constants';
+import { isCourseStatusValid } from '../utils';
 
 export const selectAnonymousPostingConfig = state => ({
   allowAnonymous: state.config.allowAnonymous,
@@ -14,8 +17,6 @@ export const selectUserIsGroupTa = state => state.config.isGroupTa;
 
 export const selectConfigLoadingStatus = state => state.config.status;
 
-export const selectLearnersTabEnabled = state => state.config.learnersTabEnabled;
-
 export const selectUserRoles = state => state.config.userRoles;
 
 export const selectDivisionSettings = state => state.config.settings;
@@ -63,3 +64,29 @@ export function selectTopicThreadCount(topicId) {
 export function selectPostThreadCount(state) {
   return state.threads.totalThreads;
 }
+
+export const selectIsUserLearner = createSelector(
+  selectUserHasModerationPrivileges,
+  selectUserIsGroupTa,
+  selectUserIsStaff,
+  selectIsCourseAdmin,
+  selectIsCourseStaff,
+  selectCourseTabs,
+  (
+    userHasModerationPrivileges,
+    userIsGroupTa,
+    userIsStaff,
+    userIsCourseAdmin,
+    userIsCourseStaff,
+    { courseStatus },
+  ) => (
+    (
+      !userHasModerationPrivileges
+      && !userIsGroupTa
+      && !userIsStaff
+      && !userIsCourseAdmin
+      && !userIsCourseStaff
+      && isCourseStatusValid(courseStatus)
+    ) || false
+  ),
+);

src/discussions/data/slices.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign,import/prefer-default-export */
 import { createSlice } from '@reduxjs/toolkit';
 
 import { RequestStatus } from '../../data/constants';
@@ -16,7 +15,6 @@ const configSlice = createSlice({
     isCourseAdmin: false,
     isCourseStaff: false,
     isUserAdmin: false,
-    learnersTabEnabled: false,
     isPostingEnabled: false,
     settings: {
       divisionScheme: 'none',
@@ -29,19 +27,29 @@ const configSlice = createSlice({
     enableInContext: false,
   },
   reducers: {
-    fetchConfigRequest: (state) => {
-      state.status = RequestStatus.IN_PROGRESS;
-    },
+    fetchConfigRequest: (state) => (
+      {
+        ...state,
+        status: RequestStatus.IN_PROGRESS,
+      }
+    ),
     fetchConfigSuccess: (state, { payload }) => {
-      state.status = RequestStatus.SUCCESSFUL;
-      Object.assign(state, payload);
-    },
-    fetchConfigFailed: (state) => {
-      state.status = RequestStatus.FAILED;
-    },
-    fetchConfigDenied: (state) => {
-      state.status = RequestStatus.DENIED;
+      const newState = Object.assign(state, payload);
+      newState.status = RequestStatus.SUCCESSFUL;
+      return newState;
     },
+    fetchConfigFailed: (state) => (
+      {
+        ...state,
+        status: RequestStatus.FAILED,
+      }
+    ),
+    fetchConfigDenied: (state) => (
+      {
+        ...state,
+        status: RequestStatus.DENIED,
+      }
+    ),
   },
 });
 

src/discussions/data/thunks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
@@ -19,7 +18,7 @@ import {
  * @param {string} courseId The course ID for the course to fetch config for.
  * @returns {(function(*): Promise<void>)|*}
  */
-export function fetchCourseConfig(courseId) {
+export default function fetchCourseConfig(courseId) {
   return async (dispatch) => {
     try {
       let learnerSort = LearnersOrdering.BY_LAST_ACTIVITY;

src/discussions/discussions-home/DiscussionContent.jsx

@@ -13,7 +13,7 @@ const DiscussionContent = () => {
   const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
 
   return (
-    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center">
+    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center overflow-auto">
       <div className="d-flex flex-column w-100">
         <Suspense fallback={(<Spinner />)}>
           <Routes>

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -3,19 +3,18 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
+import { useWindowSize } from '@openedx/paragon';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
   Navigate, Route, Routes,
 } from 'react-router-dom';
 
-import { useWindowSize } from '@edx/paragon';
-
 import Spinner from '../../components/Spinner';
 import { RequestStatus, Routes as ROUTES } from '../../data/constants';
-import { DiscussionContext } from '../common/context';
+import DiscussionContext from '../common/context';
 import {
-  useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
+  useContainerSize, useIsOnDesktop, useIsOnTablet, useIsOnXLDesktop,
 } from '../data/hooks';
 import { selectConfigLoadingStatus, selectEnableInContext } from '../data/selectors';
 
@@ -29,10 +28,10 @@ const LegacyTopicsView = lazy(() => import('../topics/TopicsView'));
 const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
   const isOnDesktop = useIsOnDesktop();
   const isOnXLDesktop = useIsOnXLDesktop();
+  const isOnTablet = useIsOnTablet();
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const enableInContext = useSelector(selectEnableInContext);
   const configStatus = useSelector(selectConfigLoadingStatus);
-  const redirectToLearnersTab = useShowLearnersTab();
   const sidebarRef = useRef(null);
   const postActionBarHeight = useContainerSize(postActionBarRef);
   const { height: windowHeight } = useWindowSize();
@@ -55,6 +54,7 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
         'd-flex overflow-auto box-shadow-centered-1': displaySidebar,
         'w-100': !isOnDesktop,
         'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
+        'sidebar-tablet-width': isOnTablet && !isOnDesktop,
         'w-25 sidebar-XL-width': isOnXLDesktop,
         'min-content-height': !enableInContextSidebar,
       })}
@@ -103,14 +103,12 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
           {ROUTES.TOPICS.PATH.map(path => (
             <Route key={path} path={path} element={<LegacyTopicsView />} />
           ))}
-          {redirectToLearnersTab && (
+          {
             [ROUTES.LEARNERS.POSTS, ROUTES.LEARNERS.POSTS_EDIT].map((route) => (
               <Route key={route} path={route} element={<LearnerPostsView />} />
             ))
-          )}
-          {redirectToLearnersTab && (
-            <Route path={ROUTES.LEARNERS.PATH} element={<LearnersView />} />
-          )}
+          }
+          <Route path={ROUTES.LEARNERS.PATH} element={<LearnersView />} />
           {configStatus === RequestStatus.SUCCESSFUL && (
             <Route path={`${ROUTES.DISCUSSIONS.PATH}/*`} element={<Navigate to="posts" />} />
           )}

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

@@ -11,7 +11,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { DiscussionContext } from '../common/context';
+import DiscussionContext from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
 import { getThreadsApiUrl } from '../posts/data/api';
 import DiscussionSidebar from './DiscussionSidebar';

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -1,5 +1,6 @@
-/* eslint-disable react/jsx-no-constructed-context-values */
-import React, { lazy, Suspense, useRef } from 'react';
+import React, {
+  lazy, Suspense, useMemo, useRef,
+} from 'react';
 
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
@@ -10,20 +11,23 @@ import {
 import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { Spinner } from '../../components';
-import { selectCourseTabs } from '../../components/NavigationBar/data/selectors';
+import selectCourseTabs from '../../components/NavigationBar/data/selectors';
 import { ALL_ROUTES, DiscussionProvider, Routes as ROUTES } from '../../data/constants';
-import { DiscussionContext } from '../common/context';
+import DiscussionContext from '../common/context';
+import ContentUnavailable from '../content-unavailable/ContentUnavailable';
 import {
-  useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useShowLearnersTab, useSidebarVisible,
+  useCourseBlockData, useCourseDiscussionData, useIsOnTablet, useRedirectToThread, useSidebarVisible,
 } from '../data/hooks';
-import { selectDiscussionProvider, selectEnableInContext } from '../data/selectors';
-import { EmptyLearners, EmptyPosts, EmptyTopics } from '../empty-posts';
+import { selectDiscussionProvider, selectEnableInContext, selectIsUserLearner } from '../data/selectors';
+import { EmptyLearners, EmptyTopics } from '../empty-posts';
+import EmptyPosts from '../empty-posts/EmptyPosts';
 import { EmptyTopic as InContextEmptyTopics } from '../in-context-topics/components';
 import messages from '../messages';
 import { selectPostEditorVisible } from '../posts/data/selectors';
+import { isCourseStatusValid } from '../utils';
 import useFeedbackWrapper from './FeedbackWrapper';
 
-const Footer = lazy(() => import('@edx/frontend-component-footer'));
+const FooterSlot = lazy(() => import('@openedx/frontend-slot-footer'));
 const PostActionsBar = lazy(() => import('../posts/post-actions-bar/PostActionsBar'));
 const CourseTabsNavigation = lazy(() => import('../../components/NavigationBar/CourseTabsNavigation'));
 const LegacyBreadcrumbMenu = lazy(() => import('../navigation/breadcrumb-menu/LegacyBreadcrumbMenu'));
@@ -39,13 +43,15 @@ const DiscussionsHome = () => {
   const postEditorVisible = useSelector(selectPostEditorVisible);
   const provider = useSelector(selectDiscussionProvider);
   const enableInContext = useSelector(selectEnableInContext);
-  const { courseNumber, courseTitle, org } = useSelector(selectCourseTabs);
+  const {
+    courseNumber, courseTitle, org, courseStatus, isEnrolled,
+  } = useSelector(selectCourseTabs);
+  const isUserLearner = useSelector(selectIsUserLearner);
   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 isRedirectToLearners = useShowLearnersTab();
-  const isOnDesktop = useIsOnDesktop();
+  const isOnTabletorDesktop = useIsOnTablet();
   let displaySidebar = useSidebarVisible();
   const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
   const {
@@ -54,48 +60,47 @@ const DiscussionsHome = () => {
 
   useCourseDiscussionData(courseId);
   useRedirectToThread(courseId, enableInContextSidebar);
+  useCourseBlockData(courseId);
   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. */
   const displayContentArea = (postId || postEditorVisible || (learnerUsername && postId));
-  if (displayContentArea) { displaySidebar = isOnDesktop; }
+  if (displayContentArea) { displaySidebar = isOnTabletorDesktop; }
+
+  const discussionContextValue = useMemo(() => ({
+    page,
+    courseId,
+    postId,
+    topicId,
+    enableInContextSidebar,
+    category,
+    learnerUsername,
+  }));
 
   return (
     <Suspense fallback={(<Spinner />)}>
-      <DiscussionContext.Provider value={{
-        page,
-        courseId,
-        postId,
-        topicId,
-        enableInContextSidebar,
-        category,
-        learnerUsername,
-      }}
-      >
-        {!enableInContextSidebar && (
-          <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />
-        )}
+      <DiscussionContext.Provider value={discussionContextValue}>
+        {!enableInContextSidebar && (<Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />)}
         <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
-          {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
-          <div
-            className={classNames('header-action-bar', {
-              'shadow-none border-light-300 border-bottom': enableInContextSidebar,
-            })}
-            ref={postActionBarRef}
-          >
+          {!enableInContextSidebar && <CourseTabsNavigation />}
+          {(isEnrolled || !isUserLearner) && (
             <div
-              className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
+              className={classNames('header-action-bar bg-white position-sticky', {
+                'shadow-none border-light-300 border-bottom': enableInContextSidebar,
+              })}
+              ref={postActionBarRef}
+            >
+              <div className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
                 'pl-4 pr-2 py-0': enableInContextSidebar,
               })}
-            >
-              {!enableInContextSidebar && (
-                <NavigationBar />
-              )}
-              <PostActionsBar />
+              >
+                {!enableInContextSidebar && (<NavigationBar />)}
+                <PostActionsBar />
+              </div>
+              <DiscussionsRestrictionBanner />
             </div>
-            <DiscussionsRestrictionBanner />
-          </div>
+          )}
           {provider === DiscussionProvider.LEGACY && (
             <Suspense fallback={(<Spinner />)}>
               <Routes>
@@ -116,46 +121,61 @@ const DiscussionsHome = () => {
               </Routes>
             </Suspense>
           )}
-          <div className="d-flex flex-row position-relative">
-            <Suspense fallback={(<Spinner />)}>
-              <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
-            </Suspense>
-            {displayContentArea && (
+          {isCourseStatusValid(courseStatus) && (
+            !isEnrolled && isUserLearner ? (
               <Suspense fallback={(<Spinner />)}>
-                <DiscussionContent />
-              </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) => (
+                <Routes>
+                  {ALL_ROUTES.map((route) => (
                     <Route
                       key={route}
                       path={route}
-                      element={<EmptyPosts subTitleMessage={messages.emptyAllPosts} />}
+                      element={(<ContentUnavailable subTitleMessage={messages.contentUnavailableSubTitle} />)}
                     />
                   ))}
-                  {isRedirectToLearners && <Route path={ROUTES.LEARNERS.PATH} element={<EmptyLearners />} />}
-                </>
-              </Routes>
-            )}
-          </div>
-          {!enableInContextSidebar && (
-            <DiscussionsProductTour />
+                </Routes>
+              </Suspense>
+            ) : (
+              <div className="d-flex flex-row position-relative">
+                <Suspense fallback={(<Spinner />)}>
+                  <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
+                </Suspense>
+                {displayContentArea && (
+                  <Suspense fallback={(<Spinner />)}>
+                    <DiscussionContent />
+                  </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>
+                )}
+              </div>
+            )
           )}
+          {!enableInContextSidebar && isEnrolled && (<DiscussionsProductTour />)}
         </main>
-        {!enableInContextSidebar && <Footer />}
+        {!enableInContextSidebar && <FooterSlot />}
       </DiscussionContext.Provider>
     </Suspense>
   );

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

@@ -13,18 +13,18 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { getCourseMetadataApiUrl } from '../../components/NavigationBar/data/api';
-import { fetchTab } from '../../components/NavigationBar/data/thunks';
+import fetchTab from '../../components/NavigationBar/data/thunks';
 import { getApiBaseUrl } from '../../data/constants';
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import { getCourseConfigApiUrl, getDiscussionsConfigUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
+import fetchCourseConfig from '../data/thunks';
 import { getCourseTopicsApiUrl } from '../in-context-topics/data/api';
-import { fetchCourseTopicsV3 } from '../in-context-topics/data/thunks';
+import fetchCourseTopicsV3 from '../in-context-topics/data/thunks';
 import navigationBarMessages from '../navigation/navigation-bar/messages';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
-import { fetchCourseTopics } from '../topics/data/thunks';
+import fetchCourseTopics from '../topics/data/thunks';
 import DiscussionsHome from './DiscussionsHome';
 
 import '../posts/data/__factories__/threads.factory';
@@ -65,6 +65,8 @@ describe('DiscussionsHome', () => {
     });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     store = initializeStore();
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: true })));
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
   });
 
   async function setUpV1TopicsMockResponse() {
@@ -142,7 +144,9 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-    expect(screen.queryByText('Add a post')).toBeInTheDocument();
+    waitFor(() => {
+      expect(screen.queryByText('Add a post')).toBeInTheDocument();
+    });
   });
 
   it.each([
@@ -166,7 +170,9 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-    expect(screen.queryByText(result)).toBeInTheDocument();
+    waitFor(() => {
+      expect(screen.queryByText(result)).toBeInTheDocument();
+    });
   });
 
   it.each([
@@ -193,25 +199,30 @@ describe('DiscussionsHome', () => {
       await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
       await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-      expect(screen.queryByText('No topic selected')).toBeInTheDocument();
+      waitFor(() => {
+        expect(screen.queryByText('No topic selected')).toBeInTheDocument();
+      });
     },
   );
 
   it('should display empty page message for empty learners list', async () => {
-    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
-      learners_tab_enabled: true,
-    });
+    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {});
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/learners`);
 
-    expect(screen.queryByText('Nothing here yet')).toBeInTheDocument();
+    waitFor(() => {
+      expect(screen.queryByText('Nothing here yet')).toBeInTheDocument();
+    });
   });
 
   it('should display post editor form when click on add a post button for posts', async () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/my-posts`);
+
+    const addPost = await screen.findByText('Add a post');
+
     await act(async () => {
-      fireEvent.click(screen.queryByText('Add a post'));
+      fireEvent.click(addPost);
     });
 
     await waitFor(() => expect(container.querySelector('.post-form')).toBeInTheDocument());
@@ -219,12 +230,12 @@ describe('DiscussionsHome', () => {
 
   it('should display post editor form when click on add a post button in legacy topics view', async () => {
     axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
-      enable_in_context: false,
+      enable_in_context: false, hasModerationPrivileges: true,
     });
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/topics`);
 
-    expect(screen.queryByText('Nothing here yet')).toBeInTheDocument();
+    await waitFor(() => expect(screen.queryByText('Nothing here yet')).toBeInTheDocument());
 
     await act(async () => {
       fireEvent.click(screen.queryByText('Add a post'));
@@ -236,28 +247,56 @@ describe('DiscussionsHome', () => {
   it('should display Add a post button for legacy topics view', async () => {
     await renderComponent(`/${courseId}/topics/topic-1`);
 
-    expect(screen.queryByText('Add a post')).toBeInTheDocument();
+    await waitFor(() => expect(screen.queryByText('Add a post')).toBeInTheDocument());
   });
 
   it('should display No post selected for legacy topics view', async () => {
     await setUpV1TopicsMockResponse();
     await renderComponent(`/${courseId}/topics/category-1-topic-1`);
 
-    expect(screen.queryByText('No post selected')).toBeInTheDocument();
+    await waitFor(() => expect(screen.queryByText('No post selected')).toBeInTheDocument());
   });
 
   it('should display No topic selected for legacy topics view', async () => {
     await setUpV1TopicsMockResponse();
     await renderComponent(`/${courseId}/topics`);
 
-    expect(screen.queryByText('No topic selected')).toBeInTheDocument();
+    await waitFor(() => expect(screen.queryByText('No topic selected')).toBeInTheDocument());
   });
 
   it('should display navigation tabs', async () => {
-    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1)));
-    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
     renderComponent(`/${courseId}/topics`);
 
-    expect(screen.queryByText('Discussion')).toBeInTheDocument();
+    await waitFor(() => expect(screen.queryByText('Discussion')).toBeInTheDocument());
+  });
+
+  it('should display content unavailable message when the user is not enrolled in the course.', async () => {
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: false })));
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
+
+    renderComponent();
+
+    await waitFor(() => expect(screen.queryByText('Content unavailable')).toBeInTheDocument());
+  });
+
+  it('should redirect to dashboard when the user clicks on the Enroll button.', async () => {
+    const replaceMock = jest.fn();
+    delete window.location;
+    window.location = { replace: replaceMock };
+
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: false })));
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
+
+    renderComponent();
+
+    const enrollButton = await screen.findByText('Enroll');
+
+    await act(async () => {
+      fireEvent.click(enrollButton);
+    });
+
+    await waitFor(() => {
+      expect(window.location.replace).toHaveBeenCalledWith(expect.stringContaining('about'));
+    });
   });
 });

src/discussions/discussions-home/DiscussionsRestrictionBanner.jsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useState } from 'react';
 
+import { PageBanner } from '@openedx/paragon';
 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';

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

@@ -5,7 +5,7 @@ import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { DiscussionContext } from '../common/context';
+import DiscussionContext from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
 import messages from '../messages';
 import DiscussionsRestrictionBanner from './DiscussionsRestrictionBanner';

src/discussions/discussions-home/index.js

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

src/discussions/empty-posts/EmptyLearners.jsx

@@ -2,15 +2,15 @@ import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { useIsOnDesktop } from '../data/hooks';
+import { useIsOnTablet } from '../data/hooks';
 import messages from '../messages';
 import EmptyPage from './EmptyPage';
 
 const EmptyLearners = () => {
   const intl = useIntl();
-  const isOnDesktop = useIsOnDesktop();
+  const isOnTabletorDesktop = useIsOnTablet();
 
-  if (!isOnDesktop) {
+  if (!isOnTabletorDesktop) {
     return null;
   }
 

src/discussions/empty-posts/EmptyPage.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import propTypes from 'prop-types';
 
+import { Button } from '@openedx/paragon';
 import classNames from 'classnames';
 
-import { Button } from '@edx/paragon';
-
 import EmptyIcon from '../../assets/Empty';
 
 const EmptyPage = ({

src/discussions/empty-posts/EmptyPosts.jsx

@@ -5,17 +5,17 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { useIsOnDesktop } from '../data/hooks';
+import { useIsOnTablet } 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 { showPostEditor } from '../posts/data';
+import postMessages from '../posts/post-actions-bar/messages';
 import EmptyPage from './EmptyPage';
 
 const EmptyPosts = ({ subTitleMessage }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
-  const isOnDesktop = useIsOnDesktop();
+  const isOnTabletorDesktop = useIsOnTablet();
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
 
@@ -31,7 +31,7 @@ const EmptyPosts = ({ subTitleMessage }) => {
 
   const isEmpty = [0, null].includes(totalThreads) && !isFiltered;
 
-  if (!(isOnDesktop || isEmpty)) {
+  if (!(isOnTabletorDesktop || isEmpty)) {
     return null;
   } if (isEmpty) {
     subTitle = subTitleMessage;

src/discussions/empty-posts/EmptyPosts.test.jsx

@@ -10,7 +10,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import messages from '../messages';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';

src/discussions/empty-posts/EmptyTopics.jsx

@@ -5,18 +5,18 @@ import { useParams } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { useIsOnDesktop, useTotalTopicThreadCount } from '../data/hooks';
+import { useIsOnTablet, 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 { showPostEditor } from '../posts/data';
+import postMessages from '../posts/post-actions-bar/messages';
 import EmptyPage from './EmptyPage';
 
 const EmptyTopics = () => {
   const intl = useIntl();
   const { topicId } = useParams();
   const dispatch = useDispatch();
-  const isOnDesktop = useIsOnDesktop();
+  const isOnTabletorDesktop = useIsOnTablet();
   const hasGlobalThreads = useTotalTopicThreadCount() > 0;
   const topicThreadCount = useSelector(selectTopicThreadCount(topicId));
 
@@ -30,7 +30,7 @@ const EmptyTopics = () => {
   let action;
   let actionText;
 
-  if (!isOnDesktop) {
+  if (!isOnTabletorDesktop) {
     return null;
   }
 

src/discussions/empty-posts/EmptyTopics.test.jsx

@@ -11,9 +11,9 @@ import { AppProvider } from '@edx/frontend-platform/react';
 
 import { getApiBaseUrl, Routes as ROUTES } from '../../data/constants';
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import messages from '../messages';
-import { fetchCourseTopics } from '../topics/data/thunks';
+import fetchCourseTopics from '../topics/data/thunks';
 import EmptyTopics from './EmptyTopics';
 
 import '../topics/data/__factories__';

src/discussions/empty-posts/index.js

@@ -1,5 +1,3 @@
 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';

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

@@ -2,14 +2,14 @@ import React, {
   useCallback, useContext, useEffect, useMemo,
 } from 'react';
 
+import { Spinner } from '@openedx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Spinner } from '@edx/paragon';
 
 import { RequestStatus, Routes } from '../../data/constants';
-import { DiscussionContext } from '../common/context';
+import DiscussionContext from '../common/context';
 import { selectDiscussionProvider } from '../data/selectors';
 import { selectTopicThreadsIds } from '../posts/data/selectors';
 import PostsList from '../posts/PostsList';
@@ -18,7 +18,7 @@ import {
   selectArchivedTopic, selectLoadingStatus, selectNonCoursewareTopics,
   selectSubsection, selectSubsectionUnits, selectUnits,
 } from './data/selectors';
-import { fetchCourseTopicsV3 } from './data/thunks';
+import fetchCourseTopicsV3 from './data/thunks';
 import { BackButton, NoResults } from './components';
 import messages from './messages';
 import { Topic } from './topic';

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

@@ -16,13 +16,13 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { PostActionsBar } from '../../components';
 import { Routes as ROUTES } from '../../data/constants';
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
-import { DiscussionContext } from '../common/context';
+import executeThunk from '../../test-utils';
+import DiscussionContext from '../common/context';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
 import { getCourseTopicsApiUrl } from './data/api';
 import { selectCoursewareTopics } from './data/selectors';
-import { fetchCourseTopicsV3 } from './data/thunks';
+import fetchCourseTopicsV3 from './data/thunks';
 import TopicPostsView from './TopicPostsView';
 import TopicsView from './TopicsView';
 

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

@@ -2,15 +2,14 @@ import React, {
   useCallback, useContext, useEffect, useMemo,
 } from 'react';
 
+import { Spinner } from '@openedx/paragon';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { Spinner } from '@edx/paragon';
-
 import SearchInfo from '../../components/SearchInfo';
 import { RequestStatus } from '../../data/constants';
-import { DiscussionContext } from '../common/context';
+import DiscussionContext from '../common/context';
 import { selectAreThreadsFiltered, selectDiscussionProvider } from '../data/selectors';
 import { clearFilter, clearSort } from '../posts/data/slices';
 import NoResults from '../posts/NoResults';
@@ -20,7 +19,7 @@ import {
   selectNonCoursewareTopics, selectTopicFilter, selectTopics,
 } from './data/selectors';
 import { setFilter } from './data/slices';
-import { fetchCourseTopicsV3 } from './data/thunks';
+import fetchCourseTopicsV3 from './data/thunks';
 import { ArchivedBaseGroup, SectionBaseGroup, Topic } from './topic';
 
 const TopicsList = () => {

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

@@ -15,11 +15,11 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
-import { DiscussionContext } from '../common/context';
+import executeThunk from '../../test-utils';
+import DiscussionContext from '../common/context';
 import { getCourseTopicsApiUrl } from './data/api';
 import { selectCoursewareTopics, selectNonCoursewareTopics } from './data/selectors';
-import { fetchCourseTopicsV3 } from './data/thunks';
+import fetchCourseTopicsV3 from './data/thunks';
 import TopicPostsView from './TopicPostsView';
 import TopicsView from './TopicsView';
 
@@ -151,12 +151,14 @@ describe('InContext Topics View', () => {
     const sectionGroups = await screen.getAllByTestId('section-group');
 
     coursewareTopics.forEach(async (topic, index) => {
-      const stats = await sectionGroups[index].querySelectorAll('.icon-size:not([data-testid="subsection-group"].icon-size)');
-      const subsectionGroups = await within(sectionGroups[index]).getAllByTestId('subsection-group');
+      await waitFor(async () => {
+        const stats = await sectionGroups[index].querySelectorAll('.icon-size:not([data-testid="subsection-group"].icon-size)');
+        const subsectionGroups = await within(sectionGroups[index]).getAllByTestId('subsection-group');
 
-      expect(within(sectionGroups[index]).queryByText(topic.displayName)).toBeInTheDocument();
-      expect(stats).toHaveLength(0);
-      expect(subsectionGroups).toHaveLength(2);
+        expect(within(sectionGroups[index]).queryByText(topic.displayName)).toBeInTheDocument();
+        expect(stats).toHaveLength(0);
+        expect(subsectionGroups).toHaveLength(2);
+      });
     });
   });
 

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, IconButton, Spinner } from '@openedx/paragon';
+import { ArrowBack } from '@openedx/paragon/icons';
 import { useNavigate } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon, IconButton, Spinner } from '@edx/paragon';
-import { ArrowBack } from '@edx/paragon/icons';
 
 import messages from '../messages';
 

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

@@ -5,8 +5,8 @@ import { useParams } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { DiscussionContext } from '../../common/context';
-import { useIsOnDesktop } from '../../data/hooks';
+import DiscussionContext from '../../common/context';
+import { useIsOnTablet } from '../../data/hooks';
 import { selectPostThreadCount } from '../../data/selectors';
 import EmptyPage from '../../empty-posts/EmptyPage';
 import messages from '../../messages';
@@ -17,7 +17,7 @@ const EmptyTopics = () => {
   const intl = useIntl();
   const { category, topicId } = useParams();
   const dispatch = useDispatch();
-  const isOnDesktop = useIsOnDesktop();
+  const isOnTabletorDesktop = useIsOnTablet();
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const courseWareThreadsCount = useSelector(selectCourseWareThreadsCount(category));
   const topicThreadsCount = useSelector(selectPostThreadCount);
@@ -34,7 +34,7 @@ const EmptyTopics = () => {
   let action;
   let actionText;
 
-  if (!isOnDesktop) {
+  if (!isOnTabletorDesktop) {
     return null;
   }
 

src/discussions/in-context-topics/components/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export { default as BackButton } from './BackButton';
 export { default as EmptyTopic } from './EmptyTopics';
 export { default as NoResults } from './NoResults';