Merge branch 'master' into keblysh/feat/user-avatar-master

package.json

@@ -34,34 +34,34 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.5.1",
-    "@edx/frontend-component-header": "4.9.1",
-    "@edx/frontend-platform": "4.6.3",
-    "@edx/paragon": "20.44.0",
-    "@reduxjs/toolkit": "1.8.0",
+    "@edx/frontend-component-footer": "12.6.1",
+    "@edx/frontend-component-header": "4.10.1",
+    "@edx/frontend-platform": "5.6.1",
+    "@edx/paragon": "20.46.3",
+    "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
     "classnames": "2.3.2",
     "core-js": "3.21.1",
     "dompurify": "^2.4.3",
-    "formik": "2.2.9",
+    "formik": "2.4.5",
     "lodash.snakecase": "4.1.1",
     "prop-types": "15.8.1",
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
-    "redux": "4.1.2",
-    "regenerator-runtime": "0.13.9",
+    "react-router": "6.18.0",
+    "react-router-dom": "6.18.0",
+    "redux": "4.2.1",
+    "regenerator-runtime": "0.14.1",
     "timeago.js": "4.0.2",
     "tinymce": "5.10.7",
     "yup": "0.31.1"
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "13.0.5",
+    "@edx/frontend-build": "13.0.14",
     "@edx/reactifex": "1.1.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
@@ -72,6 +72,6 @@
     "glob": "7.2.0",
     "husky": "7.0.4",
     "jest": "27.5.1",
-    "rosie": "2.1.0"
+    "rosie": "2.1.1"
   }
 }

src/components/TinyMCEEditor.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { Editor } from '@tinymce/tinymce-react';
-import { useLocation, useParams } from 'react-router';
+import { useLocation, useParams } from 'react-router-dom';
 // TinyMCE so the global var exists
 // eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
 import tinymce from 'tinymce/tinymce';

src/data/constants.js

@@ -1,6 +1,9 @@
 import { getConfig } from '@edx/frontend-platform';
 
 export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
+export const getFullUrl = (path) => (
+  new URL(`${getConfig().PUBLIC_PATH.replace(/\/$/, '')}/${path}`, window.location.origin).href
+);
 
 /**
  * Enum for thread types.
@@ -137,25 +140,24 @@ export const DiscussionProvider = {
   OPEN_EDX: 'openedx',
 };
 
-const BASE_PATH = `${getConfig().PUBLIC_PATH}:courseId`;
+const BASE_PATH = '/:courseId';
 
 export const Routes = {
   DISCUSSIONS: {
     PATH: BASE_PATH,
   },
   LEARNERS: {
-    PATH: `${BASE_PATH}/learners`,
-    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts(/:postId)?`,
+    PATH: `${BASE_PATH}/learners/:learnerUsername?`,
+    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
+    POSTS_EDIT: `${BASE_PATH}/learners/:learnerUsername/posts/:postId/edit`,
   },
   POSTS: {
     PATH: `${BASE_PATH}/topics/:topicId`,
-    MY_POSTS: `${BASE_PATH}/my-posts(/:postId)?`,
-    ALL_POSTS: `${BASE_PATH}/posts(/:postId)?`,
-    NEW_POST: [
-      `${BASE_PATH}/topics/:topicId/posts/:postId`,
-      `${BASE_PATH}/topics/:topicId`,
-      `${BASE_PATH}`,
-    ],
+    MY_POSTS: `${BASE_PATH}/my-posts/:postId?`,
+    ALL_POSTS: `${BASE_PATH}/posts/:postId?`,
+    EDIT_MY_POSTS: `${BASE_PATH}/my-posts/:postId/edit`,
+    EDIT_ALL_POSTS: `${BASE_PATH}/posts/:postId/edit`,
+    NEW_POST: `${BASE_PATH}/*`,
     EDIT_POST: [
       `${BASE_PATH}/category/:category/posts/:postId/edit`,
       `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
@@ -166,19 +168,19 @@ export const Routes = {
   },
   COMMENTS: {
     PATH: [
-      `${BASE_PATH}/category/:category/posts/:postId`,
-      `${BASE_PATH}/topics/:topicId/posts/:postId`,
+      `${BASE_PATH}/category/:category/posts/:postId?`,
+      `${BASE_PATH}/topics/:topicId/posts/:postId?`,
       `${BASE_PATH}/posts/:postId`,
       `${BASE_PATH}/my-posts/:postId`,
-      `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
+      `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
     ],
-    PAGE: `${BASE_PATH}/:page`,
+    PAGE: `${BASE_PATH}/:page/*`,
     PAGES: {
-      category: `${BASE_PATH}/category/:category/posts/:postId`,
-      topics: `${BASE_PATH}/topics/:topicId/posts/:postId`,
+      category: `${BASE_PATH}/category/:category/posts/:postId?`,
+      topics: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
       posts: `${BASE_PATH}/posts/:postId`,
       'my-posts': `${BASE_PATH}/my-posts/:postId`,
-      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
+      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
     },
   },
   TOPICS: {
@@ -189,9 +191,10 @@ export const Routes = {
     ],
     ALL: `${BASE_PATH}/topics`,
     CATEGORY: `${BASE_PATH}/category/:category`,
-    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId`,
+    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId?`,
+    CATEGORY_POST_EDIT: `${BASE_PATH}/category/:category/posts/:postId/edit`,
     TOPIC: `${BASE_PATH}/topics/:topicId`,
-    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId`,
+    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
     TOPIC_POST_EDIT: `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
   },
 };
@@ -205,11 +208,12 @@ export const PostsPages = {
 };
 
 export const ALL_ROUTES = []
-  .concat([Routes.TOPICS.CATEGORY_POST, Routes.TOPICS.CATEGORY])
+  .concat([Routes.TOPICS.CATEGORY_POST, `${Routes.TOPICS.CATEGORY}?`])
   .concat(Routes.COMMENTS.PATH)
   .concat(Routes.TOPICS.PATH)
+  .concat(Routes.POSTS.EDIT_POST)
   .concat([Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS])
   .concat([Routes.LEARNERS.POSTS, Routes.LEARNERS.PATH])
-  .concat([Routes.DISCUSSIONS.PATH]);
+  .concat([`${Routes.DISCUSSIONS.PATH}/*`]);
 
 export const MAX_UPLOAD_FILE_SIZE = 1024;

src/discussions/common/AlertBanner.jsx

@@ -10,7 +10,7 @@ import { Report } from '@edx/paragon/icons';
 
 import { AvatarOutlineAndLabelColors } from '../../data/constants';
 import {
-  selectModerationSettings, selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
+  selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
 } from '../data/selectors';
 import messages from '../post-comments/messages';
 import AlertBar from './AlertBar';
@@ -29,7 +29,6 @@ const AlertBanner = ({
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const userIsGlobalStaff = useSelector(selectUserIsStaff);
-  const { reasonCodesEnabled } = useSelector(selectModerationSettings);
   const userIsContentAuthor = getAuthenticatedUser().username === author;
   const canSeeReportedBanner = abuseFlagged;
   const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
@@ -45,7 +44,7 @@ const AlertBanner = ({
           {intl.formatMessage(messages.abuseFlaggedMessage)}
         </Alert>
       )}
-      {reasonCodesEnabled && canSeeLastEditOrClosedAlert && (
+      { canSeeLastEditOrClosedAlert && (
         <>
           {lastEdit?.reason && (
             <AlertBar

src/discussions/common/AlertBanner.test.jsx

@@ -90,7 +90,6 @@ describe.each([
     store = initializeStore({
       config: {
         hasModerationPrivileges: true,
-        reasonCodesEnabled: true,
       },
     });
     const content = buildTestContent(type, props);

src/discussions/common/AuthorLabel.jsx

@@ -2,8 +2,7 @@ import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
-import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -51,7 +50,7 @@ const AuthorLabel = ({
 
   const authorName = useMemo(() => (
     <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}

src/discussions/common/EndorsedAlertBanner.test.jsx

@@ -84,7 +84,6 @@ describe.each([
     store = initializeStore({
       config: {
         hasModerationPrivileges: true,
-        reasonCodesEnabled: true,
       },
     });
     const content = buildTestContent(type, props);

src/discussions/common/HoverCard.test.jsx

@@ -3,7 +3,7 @@ import {
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Factory } from 'rosie';
 
 import { initializeMockApp } from '@edx/frontend-platform';
@@ -60,15 +60,12 @@ async function mockAxiosReturnPagedCommentsResponses() {
 function renderComponent(postId) {
   const wrapper = render(
     <IntlProvider locale="en">
-      <AppProvider store={store}>
+      <AppProvider store={store} wrapWithRouter={false}>
         <DiscussionContext.Provider
-          value={{ courseId, postId }}
+          value={{ courseId, postId, page: 'posts' }}
         >
           <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
             <DiscussionContent />
-            <Route
-              path="*"
-            />
           </MemoryRouter>
         </DiscussionContext.Provider>
       </AppProvider>

src/discussions/data/hooks.js

@@ -4,7 +4,9 @@ import {
 } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation, useRouteMatch } from 'react-router';
+import {
+  matchPath, useLocation, useMatch, useNavigate,
+} from 'react-router-dom';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -30,7 +32,6 @@ import {
   selectIsCourseStaff,
   selectIsPostingEnabled,
   selectLearnersTabEnabled,
-  selectModerationSettings,
   selectPostThreadCount,
   selectUserHasModerationPrivileges,
   selectUserIsGroupTa,
@@ -53,16 +54,18 @@ export function useTotalTopicThreadCount() {
 }
 
 export const useSidebarVisible = () => {
+  const location = useLocation();
   const enableInContext = useSelector(selectEnableInContext);
-  const isViewingTopics = useRouteMatch(Routes.TOPICS.ALL);
-  const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
+  const isViewingTopics = useMatch(Routes.TOPICS.ALL);
+  const isViewingLearners = useMatch(`${Routes.LEARNERS.PATH}/*`);
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
   const isThreadsEmpty = Boolean(useSelector(threadsLoadingStatus()) === RequestStatus.SUCCESSFUL && !totalThreads);
-  const isIncontextTopicsView = Boolean(useRouteMatch(Routes.TOPICS.PATH) && enableInContext);
-  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics?.isExact || isViewingLearners));
+  const matchInContextTopicView = Routes.TOPICS.PATH.find((route) => matchPath({ path: `${route}/*` }, location.pathname));
+  const isInContextTopicsView = Boolean(matchInContextTopicView && enableInContext);
+  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics || isViewingLearners));
 
-  if (isIncontextTopicsView) {
+  if (isInContextTopicsView) {
     return true;
   }
 
@@ -85,7 +88,7 @@ export function useCourseDiscussionData(courseId) {
 
 export function useRedirectToThread(courseId, enableInContextSidebar) {
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   const redirectToThread = useSelector(
@@ -102,7 +105,7 @@ export function useRedirectToThread(courseId, enableInContextSidebar) {
         postId: redirectToThread.threadId,
         topicId: redirectToThread.topicId,
       })(location);
-      history.push(newLocation);
+      navigate({ ...newLocation });
     }
   }, [redirectToThread]);
 }
@@ -159,13 +162,12 @@ export const useAlertBannerVisible = (
 ) => {
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
-  const { reasonCodesEnabled } = useSelector(selectModerationSettings);
   const userIsContentAuthor = getAuthenticatedUser().username === author;
   const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsContentAuthor || userIsGroupTa);
   const canSeeReportedBanner = abuseFlagged;
 
   return (
-    (reasonCodesEnabled && canSeeLastEditOrClosedAlert && (lastEdit?.reason || closed)) || (canSeeReportedBanner)
+    (canSeeLastEditOrClosedAlert && (lastEdit?.reason || closed)) || (canSeeReportedBanner)
   );
 };
 

src/discussions/data/selectors.js

@@ -33,7 +33,6 @@ export const selectIsPostingEnabled = state => state.config.isPostingEnabled;
 export const selectModerationSettings = state => ({
   postCloseReasons: state.config.postCloseReasons,
   editReasons: state.config.editReasons,
-  reasonCodesEnabled: state.config.reasonCodesEnabled,
 });
 
 export const selectDiscussionProvider = state => state.config.provider;

src/discussions/data/slices.js

@@ -24,7 +24,6 @@ const configSlice = createSlice({
       dividedInlineDiscussions: [],
       dividedCourseWideDiscussions: [],
     },
-    reasonCodesEnabled: false,
     editReasons: [],
     postCloseReasons: [],
     enableInContext: false,

src/discussions/discussions-home/DiscussionContent.jsx

@@ -1,10 +1,10 @@
 import React, { lazy, Suspense } from 'react';
 
 import { useSelector } from 'react-redux';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 
 import Spinner from '../../components/Spinner';
-import { Routes } from '../../data/constants';
+import { Routes as ROUTES } from '../../data/constants';
 
 const PostEditor = lazy(() => import('../posts/post-editor/PostEditor'));
 const PostCommentsView = lazy(() => import('../post-comments/PostCommentsView'));
@@ -16,20 +16,20 @@ const DiscussionContent = () => {
     <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center">
       <div className="d-flex flex-column w-100">
         <Suspense fallback={(<Spinner />)}>
-          {postEditorVisible ? (
-            <Route path={Routes.POSTS.NEW_POST}>
-              <PostEditor />
-            </Route>
-          ) : (
-            <Switch>
-              <Route path={Routes.POSTS.EDIT_POST}>
-                <PostEditor editExisting />
-              </Route>
-              <Route path={Routes.COMMENTS.PATH}>
-                <PostCommentsView />
-              </Route>
-            </Switch>
-          )}
+          <Routes>
+            {postEditorVisible ? (
+              <Route path={ROUTES.POSTS.NEW_POST} element={<PostEditor />} />
+            ) : (
+              <>
+                {ROUTES.POSTS.EDIT_POST.map(route => (
+                  <Route key={route} path={route} element={<PostEditor editExisting />} />
+                ))}
+                {ROUTES.COMMENTS.PATH.map(route => (
+                  <Route key={route} path={route} element={<PostCommentsView />} />
+                ))}
+              </>
+            )}
+          </Routes>
         </Suspense>
       </div>
     </div>