fix(deps): update dependency @edx/frontend-platform to v8.3.7 (#768)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -9,17 +9,16 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
+
     steps:
     - name: Checkout
       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@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.gitignore

@@ -6,6 +6,7 @@ node_modules
 npm-debug.log
 coverage
 module.config.js
+env.config.*
 
 dist/
 src/i18n/transifex_input.json

.nvmrc

@@ -1 +1 @@
-18
+20

README.rst

@@ -76,7 +76,7 @@ How to Contribute
 
 Details about how to become a contributor to the Open edX project may be found in the wiki at `How to contribute`_
 
-.. _How to contribute: https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/process/index.html
+.. _How to contribute: https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html
 
 PR description template should be automatically applied if you are sending PR from github interface; otherwise you
 can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend-app-discussions/blob/master/.github/pull_request_template.md>`_
@@ -125,4 +125,4 @@ Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-
 Reporting Security Issues
 =========================
 
-Please do not report security issues in public. Please email security@openedx.org.
+Please do not report security issues in public. Please email security@openedx.org.

catalog-info.yaml

@@ -12,6 +12,7 @@ metadata:
       icon: "Web"
   annotations:
     openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
 spec:
   owner: group:edx-infinity
   type: 'website'

openedx.yaml

@@ -1,11 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-nick: tmpa
-oeps: {}
-owner: edx/arch-team
-openedx-release:
-  # The openedx-release key is described in OEP-10:
-  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
-  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
-  ref: master

package.json

@@ -16,13 +16,9 @@
     "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/discussions/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-discussions#readme",
@@ -34,13 +30,13 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.0.2",
-    "@edx/frontend-platform": "^7.1.0",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-platform": "^8.3.3",
     "@edx/openedx-atlas": "^0.6.0",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.1.1",
+    "@openedx/paragon": "^22.16.0",
     "@reduxjs/toolkit": "1.9.7",
-    "@tinymce/tinymce-react": "3.13.1",
+    "@tinymce/tinymce-react": "5.1.1",
     "babel-polyfill": "6.26.0",
     "classnames": "2.5.1",
     "core-js": "3.21.1",
@@ -49,8 +45,8 @@
     "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": "18.3.1",
+    "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "6.18.0",
@@ -64,17 +60,16 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^13.0.28",
+    "@openedx/frontend-build": "^14.3.3",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "14.3.1",
     "@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",
     "glob": "7.2.0",
-    "husky": "7.0.4",
-    "jest": "27.5.1",
+    "jest": "29.7.0",
     "rosie": "2.1.1"
   }
 }

src/components/PostHelpPanel.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+import {
+  Hyperlink, Icon, IconButton, IconButtonWithTooltip,
+} from '@openedx/paragon';
+import { Close, HelpOutline } from '@openedx/paragon/icons';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../discussions/posts/post-editor/messages';
+
+const PostHelpPanel = () => {
+  const intl = useIntl();
+  const [showHelpPane, setShowHelpPane] = useState(false);
+
+  return (
+    <>
+      <div className="d-flex justify-content-end">
+        <IconButtonWithTooltip
+          onClick={() => setShowHelpPane(true)}
+          alt={intl.formatMessage(messages.showHelpIcon)}
+          tooltipContent={<div>{intl.formatMessage(messages.discussionHelpTooltip)}</div>}
+          src={HelpOutline}
+          iconAs={Icon}
+          size="inline"
+          className="float-right p-3 help-icon"
+          iconClassNames="help-icon-size"
+          data-testid="help-button"
+          invertColors
+          isActive
+        />
+      </div>
+      {showHelpPane && (
+        <div
+          className="w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview overflow-auto my-3"
+          style={{ minHeight: '200px', wordBreak: 'break-word' }}
+        >
+          <IconButton
+            onClick={() => setShowHelpPane(false)}
+            alt={intl.formatMessage(messages.actionsAlt)}
+            src={Close}
+            iconAs={Icon}
+            size="inline"
+            className="float-right p-3"
+            iconClassNames="icon-size"
+            data-testid="hide-help-button"
+          />
+          <div className="pt-2 px-3">
+            <h4 className="font-weight-bold">{intl.formatMessage(messages.discussionHelpHeader)}</h4>
+            <p className="pt-2">{intl.formatMessage(messages.discussionHelpDescription)}</p>
+            <Hyperlink
+              target="_blank"
+              className="w-100"
+              destination="https://support.edx.org/hc/en-us/sections/115004169687-Participating-in-Course-Discussions"
+              showLaunchIcon={false}
+            >
+              {intl.formatMessage(messages.discussionHelpCourseParticipation)}
+            </Hyperlink>
+            <Hyperlink
+              target="_blank"
+              className="w-100"
+              destination="https://support.edx.org/hc/en-us/articles/360000035267-Entering-math-expressions-in-course-discussions"
+              showLaunchIcon={false}
+            >
+              {intl.formatMessage(messages.discussionHelpMathExpressions)}
+            </Hyperlink>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default React.memo(PostHelpPanel);

src/discussions/common/ActionsDropdown.jsx

@@ -94,6 +94,7 @@ const ActionsDropdown = ({
                     handleActions(action.action);
                   }}
                   className="d-flex justify-content-start actions-dropdown-item"
+                  data-testId={action.id}
                 >
                   <Icon
                     src={action.icon}

src/discussions/common/HoverCard.test.jsx

@@ -106,8 +106,8 @@ describe('HoverCard', () => {
   });
 
   test('it should have hover card on post', async () => {
-    await waitFor(() => renderComponent(discussionPostId));
-    const post = screen.getByTestId('post-thread-1');
+    renderComponent(discussionPostId);
+    const post = await screen.findByTestId('post-thread-1');
     expect(within(post).getByTestId('hover-card-thread-1')).toBeInTheDocument();
   });
 

src/discussions/data/hooks.js

@@ -33,14 +33,11 @@ import { ContentSelectors } from './constants';
 import {
   selectAreThreadsFiltered,
   selectEnableInContext,
-  selectIsCourseAdmin,
-  selectIsCourseStaff,
   selectIsPostingEnabled,
   selectIsUserLearner,
   selectPostThreadCount,
   selectUserHasModerationPrivileges,
   selectUserIsGroupTa,
-  selectUserIsStaff,
 } from './selectors';
 import fetchCourseConfig from './thunks';
 
@@ -220,12 +217,9 @@ export const useCurrentDiscussionTopic = () => {
 
 export const useUserPostingEnabled = () => {
   const isPostingEnabled = useSelector(selectIsPostingEnabled);
-  const isUserAdmin = useSelector(selectUserIsStaff);
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const isUserGroupTA = useSelector(selectUserIsGroupTa);
-  const isCourseAdmin = useSelector(selectIsCourseAdmin);
-  const isCourseStaff = useSelector(selectIsCourseStaff);
-  const isPrivileged = isUserAdmin || userHasModerationPrivileges || isUserGroupTA || isCourseAdmin || isCourseStaff;
+  const isPrivileged = userHasModerationPrivileges || isUserGroupTA;
 
   return (isPostingEnabled || isPrivileged);
 };

src/discussions/data/hooks.test.jsx

@@ -19,11 +19,11 @@ const courseConfigApiUrl = getCourseConfigApiUrl();
 let store;
 let axiosMock;
 
-const generateApiResponse = (isPostingEnabled, isCourseAdmin = false) => ({
+const generateApiResponse = (isPostingEnabled, hasModerationPrivileges = false) => ({
   isPostingEnabled,
-  hasModerationPrivileges: false,
+  hasModerationPrivileges,
   isGroupTa: false,
-  isCourseAdmin,
+  isCourseAdmin: false,
   isCourseStaff: false,
   isUserAdmin: false,
 });
@@ -160,7 +160,7 @@ describe('Hooks', () => {
         expect(queryByText('false')).toBeInTheDocument();
       });
 
-      test('when posting is not disabled and Role is not Learner return true', async () => {
+      test('when posting is disabled and Role is not Learner return true', async () => {
         axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
           .reply(200, generateApiResponse(false, true));
         await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);

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

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
-import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 import { Context as ResponsiveContext } from 'react-responsive';
 import { MemoryRouter } from 'react-router-dom';
@@ -85,7 +84,7 @@ describe('DiscussionSidebar', () => {
         },
       })]);
     renderComponent();
-    await act(async () => expect(await screen.findAllByText('Thread by other users')).toBeTruthy());
+    await screen.findAllByText('Thread by other users');
     expect(screen.queryByText('Thread by abc123')).not.toBeInTheDocument();
   });
 
@@ -100,7 +99,7 @@ describe('DiscussionSidebar', () => {
         },
       })]);
     renderComponent();
-    await act(async () => expect(await screen.findAllByText('Thread by other users')).toBeTruthy());
+    await screen.findAllByText('Thread by other users');
     expect(screen.queryByText('Thread by abc123')).not.toBeInTheDocument();
     expect(container.querySelectorAll('.discussion-post')).toHaveLength(postCount);
   });

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -27,7 +27,7 @@ import { selectPostEditorVisible } from '../posts/data/selectors';
 import { isCourseStatusValid } from '../utils';
 import useFeedbackWrapper from './FeedbackWrapper';
 
-const FooterSlot = lazy(() => import('@openedx/frontend-slot-footer'));
+const FooterSlot = lazy(() => import('@edx/frontend-component-footer').then(module => ({ default: module.FooterSlot })));
 const PostActionsBar = lazy(() => import('../posts/post-actions-bar/PostActionsBar'));
 const CourseTabsNavigation = lazy(() => import('../../components/NavigationBar/CourseTabsNavigation'));
 const LegacyBreadcrumbMenu = lazy(() => import('../navigation/breadcrumb-menu/LegacyBreadcrumbMenu'));

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

@@ -90,8 +90,7 @@ describe('DiscussionsHome', () => {
 
   test('full view should hide close button', async () => {
     renderComponent(`/${courseId}/topics`);
-    expect(screen.queryByText(navigationBarMessages.allTopics.defaultMessage))
-      .toBeInTheDocument();
+    await screen.findByText(navigationBarMessages.allTopics.defaultMessage);
     expect(screen.queryByRole('button', { name: 'Close' }))
       .not
       .toBeInTheDocument();
@@ -144,9 +143,7 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-    waitFor(() => {
-      expect(screen.queryByText('Add a post')).toBeInTheDocument();
-    });
+    await screen.findByText('Add a post');
   });
 
   it.each([
@@ -170,9 +167,7 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-    waitFor(() => {
-      expect(screen.queryByText(result)).toBeInTheDocument();
-    });
+    await screen.findByText(result);
   });
 
   it.each([
@@ -199,9 +194,7 @@ describe('DiscussionsHome', () => {
       await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
       await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-      waitFor(() => {
-        expect(screen.queryByText('No topic selected')).toBeInTheDocument();
-      });
+      await screen.findByText('No topic selected');
     },
   );
 
@@ -210,9 +203,7 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/learners`);
 
-    waitFor(() => {
-      expect(screen.queryByText('Nothing here yet')).toBeInTheDocument();
-    });
+    await screen.findByText('Nothing here yet');
   });
 
   it('should display post editor form when click on add a post button for posts', async () => {
@@ -235,10 +226,10 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/topics`);
 
-    await waitFor(() => expect(screen.queryByText('Nothing here yet')).toBeInTheDocument());
+    await screen.findByText('Nothing here yet');
 
     await act(async () => {
-      fireEvent.click(screen.queryByText('Add a post'));
+      fireEvent.click((await screen.findAllByText('Add a post'))[0]);
     });
 
     await waitFor(() => expect(container.querySelector('.post-form')).toBeInTheDocument());
@@ -247,27 +238,27 @@ describe('DiscussionsHome', () => {
   it('should display Add a post button for legacy topics view', async () => {
     await renderComponent(`/${courseId}/topics/topic-1`);
 
-    await waitFor(() => expect(screen.queryByText('Add a post')).toBeInTheDocument());
+    await screen.findByText('Add a post');
   });
 
   it('should display No post selected for legacy topics view', async () => {
     await setUpV1TopicsMockResponse();
     await renderComponent(`/${courseId}/topics/category-1-topic-1`);
 
-    await waitFor(() => expect(screen.queryByText('No post selected')).toBeInTheDocument());
+    await screen.findByText('No post selected');
   });
 
   it('should display No topic selected for legacy topics view', async () => {
     await setUpV1TopicsMockResponse();
     await renderComponent(`/${courseId}/topics`);
 
-    await waitFor(() => expect(screen.queryByText('No topic selected')).toBeInTheDocument());
+    await screen.findByText('No topic selected');
   });
 
   it('should display navigation tabs', async () => {
     renderComponent(`/${courseId}/topics`);
 
-    await waitFor(() => expect(screen.queryByText('Discussion')).toBeInTheDocument());
+    await screen.findByText('Discussion');
   });
 
   it('should display content unavailable message when the user is not enrolled in the course.', async () => {
@@ -276,7 +267,7 @@ describe('DiscussionsHome', () => {
 
     renderComponent();
 
-    await waitFor(() => expect(screen.queryByText('Content unavailable')).toBeInTheDocument());
+    await screen.findByText('Content unavailable');
   });
 
   it('should redirect to dashboard when the user clicks on the Enroll button.', async () => {

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

@@ -66,15 +66,13 @@ describe('EmptyTopics', () => {
 
   test('"no topic selected" text shown when viewing topics page', async () => {
     renderComponent(`/${courseId}/topics/`);
-    expect(screen.queryByText(messages.emptyTitle.defaultMessage))
-      .toBeInTheDocument();
+    await screen.findByText(messages.emptyTitle.defaultMessage);
   });
 
   test('"no post selected" text shown when viewing a specific topic', async () => {
     await setupMockResponse();
     renderComponent(`/${courseId}/topics/ncwtopic-3/`);
 
-    expect(screen.queryByText(messages.noPostSelected.defaultMessage))
-      .toBeInTheDocument();
+    await screen.findByText(messages.noPostSelected.defaultMessage);
   });
 });

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

@@ -283,9 +283,9 @@ describe('InContext Topic Posts View', () => {
       await setupTopicsMockResponse(0, 0, 0);
       await renderComponent({ topicId: 'test-topic', category: 'test-category' });
 
-      await waitFor(() => expect(within(container).queryByText('Nothing here yet')).toBeInTheDocument());
-      expect(within(container).queryByText('No topic exists')).toBeInTheDocument();
-      expect(within(container).queryByText('Unnamed Topic')).toBeInTheDocument();
+      await within(container).findByText('Nothing here yet');
+      await within(container).findByText('No topic exists');
+      await within(container).findByText('Unnamed Topic');
     },
   );
 

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

@@ -2,6 +2,7 @@ import {
   fireEvent, render, screen, waitFor,
   within,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
@@ -165,9 +166,10 @@ describe('InContext Topics View', () => {
   it('The subsection should have a title name, be clickable, and have the stats', async () => {
     await setupMockResponse();
     renderComponent();
+    await screen.findByTestId('redux-provider');
     const subsectionObject = coursewareTopics[0].children[0];
     const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
-    const subSectionTitle = await within(subSection).queryByText(subsectionObject.displayName);
+    const subSectionTitle = await within(subSection).findByText(subsectionObject.displayName);
     const statsList = await subSection.querySelectorAll('.icon-size');
 
     expect(subSectionTitle).toBeInTheDocument();
@@ -177,11 +179,12 @@ describe('InContext Topics View', () => {
   it('Subsection names should be clickable and redirected to the units lists', async () => {
     await setupMockResponse();
     renderComponent();
+    await screen.findByTestId('redux-provider');
 
     const subsectionObject = coursewareTopics[0].children[0];
     const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
 
-    await act(async () => { fireEvent.click(subSection); });
+    await userEvent.click(subSection);
     await waitFor(async () => {
       const backButton = await screen.getByLabelText('Back to topics list');
       const topicsList = await screen.getByRole('list');
@@ -198,9 +201,11 @@ describe('InContext Topics View', () => {
   it('The number of units should be matched with the actual unit length.', async () => {
     await setupMockResponse();
     renderComponent();
+    await screen.findByTestId('redux-provider');
+
     const subSection = await container.querySelector(`[data-subsection-id=${coursewareTopics[0].children[0].id}]`);
 
-    await act(async () => { fireEvent.click(subSection); });
+    await userEvent.click(subSection);
     await waitFor(async () => {
       const units = await container.querySelectorAll('.discussion-topic');
 
@@ -211,12 +216,14 @@ describe('InContext Topics View', () => {
   it('A unit should have a title and should be clickable', async () => {
     await setupMockResponse();
     renderComponent();
+    await screen.findByTestId('redux-provider');
+
     const subSectionObject = coursewareTopics[0].children[0];
     const unitObject = subSectionObject.children[0];
 
     const subSection = await container.querySelector(`[data-subsection-id=${subSectionObject.id}]`);
 
-    await act(async () => { fireEvent.click(subSection); });
+    await userEvent.click(subSection);
     await waitFor(async () => {
       const unitElement = await screen.findByText(unitObject.name);
       const unitContainer = await container.querySelector(`[data-topic-id=${unitObject.id}]`);

src/discussions/post-comments/PostCommentsView.test.jsx

@@ -671,6 +671,151 @@ describe('ThreadView', () => {
       expect(screen.queryByTestId('reply-comment-3')).not.toBeInTheDocument();
     });
 
+    it('successfully added comment in the draft.', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add comment'));
+      });
+
+      await waitFor(() => {
+        fireEvent.change(screen.queryByTestId('tinymce-editor'), { target: { value: 'Draft comment!' } });
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Cancel'));
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add comment'));
+      });
+
+      expect(screen.queryByText('Draft comment!')).toBeInTheDocument();
+    });
+
+    it('successfully updated comment in the draft.', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+
+      const comment = screen.queryByTestId('reply-comment-2');
+      const actionBtn = comment.querySelector('button[aria-label="Actions menu"]');
+
+      await act(async () => {
+        fireEvent.click(actionBtn);
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByTestId('edit'));
+      });
+
+      await waitFor(() => {
+        fireEvent.change(screen.queryByTestId('tinymce-editor'), { target: { value: 'Draft comment!' } });
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Cancel'));
+      });
+
+      await act(async () => {
+        fireEvent.click(actionBtn);
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByTestId('edit'));
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Submit'));
+      });
+
+      await waitFor(() => expect(screen.queryByText('Draft comment!')).toBeInTheDocument());
+    });
+
+    it('successfully removed comment from the draft.', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add comment'));
+      });
+
+      await waitFor(() => {
+        fireEvent.change(screen.queryByTestId('tinymce-editor'), { target: { value: 'Draft comment 123!' } });
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Submit'));
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryAllByText('Add comment')[0]);
+      });
+
+      expect(screen.queryByTestId('tinymce-editor').value).toBe('');
+    });
+
+    it('successfully added response in the draft.', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add response'));
+      });
+
+      await waitFor(() => {
+        fireEvent.change(screen.queryByTestId('tinymce-editor'), { target: { value: 'Draft Response!' } });
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Cancel'));
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add response'));
+      });
+
+      expect(screen.queryByText('Draft Response!')).toBeInTheDocument();
+    });
+
+    it('successfully removed response from the draft.', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add response'));
+      });
+
+      await waitFor(() => {
+        fireEvent.change(screen.queryByTestId('tinymce-editor'), { target: { value: 'Draft Response!' } });
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Submit'));
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add response'));
+      });
+
+      expect(screen.queryByTestId('tinymce-editor').value).toBe('');
+    });
+
+    it('successfully maintain response for the specific post in the draft.', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add response'));
+      });
+
+      await waitFor(() => {
+        fireEvent.change(screen.queryByTestId('tinymce-editor'), { target: { value: 'Hello, world!' } });
+      });
+
+      await waitFor(() => renderComponent('thread-2'));
+
+      await act(async () => {
+        fireEvent.click(screen.queryAllByText('Add response')[0]);
+      });
+
+      expect(screen.queryByText('Hello, world!')).toBeInTheDocument();
+    });
+
     it('pressing load more button will load next page of replies', async () => {
       await waitFor(() => renderComponent(discussionPostId));
 

src/discussions/post-comments/comments/comment/CommentEditor.jsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useContext, useEffect, useRef,
+  useCallback, useContext, useEffect, useRef, useState,
 } from 'react';
 import PropTypes from 'prop-types';
 
@@ -22,7 +22,9 @@ import {
   selectUserIsGroupTa,
   selectUserIsStaff,
 } from '../../../data/selectors';
-import { formikCompatibleHandler, isFormikFieldInvalid } from '../../../utils';
+import { extractContent, formikCompatibleHandler, isFormikFieldInvalid } from '../../../utils';
+import { useDraftContent } from '../../data/hooks';
+import { setDraftComments, setDraftResponses } from '../../data/slices';
 import { addComment, editComment } from '../../data/thunks';
 import messages from '../../messages';
 
@@ -45,6 +47,8 @@ const CommentEditor = ({
   const userIsStaff = useSelector(selectUserIsStaff);
   const { editReasons } = useSelector(selectModerationSettings);
   const [submitting, dispatch] = useDispatchWithState();
+  const [editorContent, setEditorContent] = useState();
+  const { addDraftContent, getDraftContent, removeDraftContent } = useDraftContent();
 
   const canDisplayEditReason = (edit
     && (userHasModerationPrivileges || userIsGroupTa || userIsStaff)
@@ -62,7 +66,7 @@ const CommentEditor = ({
   });
 
   const initialValues = {
-    comment: rawBody,
+    comment: editorContent,
     editReasonCode: lastEdit?.reasonCode || (userIsStaff && canDisplayEditReason ? 'violates-guidelines' : undefined),
   };
 
@@ -71,6 +75,15 @@ const CommentEditor = ({
     onCloseEditor();
   }, [onCloseEditor, initialValues]);
 
+  const deleteEditorContent = useCallback(async () => {
+    const { updatedResponses, updatedComments } = removeDraftContent(parentId, id, threadId);
+    if (parentId) {
+      await dispatch(setDraftComments(updatedComments));
+    } else {
+      await dispatch(setDraftResponses(updatedResponses));
+    }
+  }, [parentId, id, threadId, setDraftComments, setDraftResponses]);
+
   const saveUpdatedComment = useCallback(async (values, { resetForm }) => {
     if (id) {
       const payload = {
@@ -86,6 +99,7 @@ const CommentEditor = ({
       editorRef.current.plugins.autosave.removeDraft();
     }
     handleCloseEditor(resetForm);
+    deleteEditorContent();
   }, [id, threadId, parentId, enableInContextSidebar, handleCloseEditor]);
   // The editorId is used to autosave contents to localstorage. This format means that the autosave is scoped to
   // the current comment id, or the current comment parent or the curren thread.
@@ -97,11 +111,33 @@ const CommentEditor = ({
     }
   }, [formRef]);
 
+  useEffect(() => {
+    const draftHtml = getDraftContent(parentId, threadId, id) || rawBody;
+    setEditorContent(draftHtml);
+  }, [parentId, threadId, id]);
+
+  const saveDraftContent = async (content) => {
+    const draftDataContent = extractContent(content);
+
+    const { updatedResponses, updatedComments } = addDraftContent(
+      draftDataContent,
+      parentId,
+      id,
+      threadId,
+    );
+    if (parentId) {
+      await dispatch(setDraftComments(updatedComments));
+    } else {
+      await dispatch(setDraftResponses(updatedResponses));
+    }
+  };
+
   return (
     <Formik
       initialValues={initialValues}
       validationSchema={validationSchema}
       onSubmit={saveUpdatedComment}
+      enableReinitialize
     >
       {({
         values,
@@ -151,7 +187,10 @@ const CommentEditor = ({
             id={editorId}
             value={values.comment}
             onEditorChange={formikCompatibleHandler(handleChange, 'comment')}
-            onBlur={formikCompatibleHandler(handleBlur, 'comment')}
+            onBlur={(content) => {
+              formikCompatibleHandler(handleChange, 'comment');
+              saveDraftContent(content);
+            }}
           />
           {isFormikFieldInvalid('comment', {
             errors,

src/discussions/post-comments/comments/comment/Reply.jsx

@@ -129,7 +129,7 @@ const Reply = ({ responseId }) => {
         </div>
         <div
           className="bg-light-300 pl-4 pt-2.5 pr-2.5 pb-10px flex-fill"
-          style={{ borderRadius: '0rem 0.375rem 0.375rem' }}
+          style={{ borderRadius: '0rem 0.375rem 0.375rem', maxWidth: 'calc(100% - 50px)' }}
         >
           <div className="d-flex flex-row justify-content-between">
             <AuthorLabel

src/discussions/post-comments/data/hooks.js

@@ -3,6 +3,7 @@ import {
 } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
+import { v4 as uuidv4 } from 'uuid';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 
@@ -13,7 +14,8 @@ import { selectThread } from '../../posts/data/selectors';
 import { markThreadAsRead } from '../../posts/data/thunks';
 import { filterPosts } from '../../utils';
 import {
-  selectCommentSortOrder, selectThreadComments, selectThreadCurrentPage, selectThreadHasMorePages,
+  selectCommentSortOrder, selectDraftComments, selectDraftResponses,
+  selectThreadComments, selectThreadCurrentPage, selectThreadHasMorePages,
 } from './selectors';
 import { fetchThreadComments } from './thunks';
 
@@ -102,3 +104,73 @@ export function useCommentsCount(postId) {
 
   return commentsLength;
 }
+
+export const useDraftContent = () => {
+  const comments = useSelector(selectDraftComments);
+  const responses = useSelector(selectDraftResponses);
+
+  const getObjectByParentId = (data, parentId, isComment, id) => Object.values(data)
+    .find(draft => (isComment ? draft.parentId === parentId && (id ? draft.id === id : draft.isNewContent === true)
+      : draft.threadId === parentId && (id ? draft.id === id : draft.isNewContent === true)));
+
+  const updateDraftData = (draftData, newDraftObject) => ({
+    ...draftData,
+    [newDraftObject.id]: newDraftObject,
+  });
+
+  const addDraftContent = (content, parentId, id, threadId) => {
+    const data = parentId ? comments : responses;
+    const draftParentId = parentId || threadId;
+    const isComment = !!parentId;
+    const existingObj = getObjectByParentId(data, draftParentId, isComment, id);
+    const newObject = existingObj
+      ? { ...existingObj, content }
+      : {
+        threadId,
+        content,
+        parentId,
+        id: id || uuidv4(),
+        isNewContent: !id,
+      };
+
+    const updatedComments = parentId ? updateDraftData(comments, newObject) : comments;
+    const updatedResponses = !parentId ? updateDraftData(responses, newObject) : responses;
+
+    return { updatedComments, updatedResponses };
+  };
+
+  const getDraftContent = (parentId, threadId, id) => {
+    if (id) {
+      return parentId ? comments?.[id]?.content : responses?.[id]?.content;
+    }
+
+    const data = parentId ? comments : responses;
+    const draftParentId = parentId || threadId;
+    const isComment = !!parentId;
+
+    return getObjectByParentId(data, draftParentId, isComment, id)?.content;
+  };
+
+  const removeItem = (draftData, objId) => {
+    const { [objId]: _, ...newDraftData } = draftData;
+    return newDraftData;
+  };
+
+  const updateContent = (items, itemId, parentId, isComment) => {
+    const itemObj = itemId ? items[itemId] : getObjectByParentId(items, parentId, isComment, itemId);
+    return itemObj ? removeItem(items, itemObj.id) : items;
+  };
+
+  const removeDraftContent = (parentId, id, threadId) => {
+    const updatedResponses = !parentId ? updateContent(responses, id, threadId, false) : responses;
+    const updatedComments = parentId ? updateContent(comments, id, parentId, true) : comments;
+
+    return { updatedResponses, updatedComments };
+  };
+
+  return {
+    addDraftContent,
+    getDraftContent,
+    removeDraftContent,
+  };
+};

src/discussions/post-comments/data/selectors.js

@@ -47,3 +47,7 @@ export const selectCommentCurrentPage = commentId => (
 export const selectCommentsStatus = state => state.comments.status;
 
 export const selectCommentSortOrder = state => state.comments.sortOrder;
+
+export const selectDraftComments = state => state.comments.draftComments;
+
+export const selectDraftResponses = state => state.comments.draftResponses;

src/discussions/post-comments/data/slices.js

@@ -22,6 +22,8 @@ const commentsSlice = createSlice({
     pagination: {},
     responsesPagination: {},
     sortOrder: true,
+    draftResponses: {},
+    draftComments: {},
   },
   reducers: {
     fetchCommentsRequest: (state) => (
@@ -257,6 +259,18 @@ const commentsSlice = createSlice({
         sortOrder: payload,
       }
     ),
+    setDraftComments: (state, { payload }) => (
+      {
+        ...state,
+        draftComments: payload,
+      }
+    ),
+    setDraftResponses: (state, { payload }) => (
+      {
+        ...state,
+        draftResponses: payload,
+      }
+    ),
   },
 });
 
@@ -282,6 +296,8 @@ export const {
   deleteCommentRequest,
   deleteCommentSuccess,
   setCommentSortOrder,
+  setDraftComments,
+  setDraftResponses,
 } = commentsSlice.actions;
 
 export const commentsReducer = commentsSlice.reducer;

src/discussions/posts/data/hooks.js

@@ -11,9 +11,9 @@ const usePostList = (ids) => {
 
   const sortedIds = useMemo(() => {
     posts.forEach((post) => {
-      if (post.pinned) {
+      if (post && post.pinned) {
         pinnedPostsIds.push(post.id);
-      } else {
+      } else if (post) {
         unpinnedPostsIds.push(post.id);
       }
     });

src/discussions/posts/post-editor/PostEditor.jsx

@@ -18,6 +18,7 @@ import { AppContext } from '@edx/frontend-platform/react';
 
 import { TinyMCEEditor } from '../../../components';
 import FormikErrorFeedback from '../../../components/FormikErrorFeedback';
+import PostHelpPanel from '../../../components/PostHelpPanel';
 import PostPreviewPanel from '../../../components/PostPreviewPanel';
 import useDispatchWithState from '../../../data/hooks';
 import selectCourseCohorts from '../../cohorts/data/selectors';
@@ -409,6 +410,7 @@ const PostEditor = ({
             onEditorChange={formikCompatibleHandler(handleChange, 'comment')}
             onBlur={formikCompatibleHandler(handleBlur, 'comment')}
           />
+          <PostHelpPanel />
           <FormikErrorFeedback name="comment" />
         </div>
         <PostPreviewPanel htmlNode={values.comment} isPost editExisting={editExisting} />

src/discussions/posts/post-editor/PostEditor.test.jsx

@@ -368,5 +368,34 @@ describe('PostEditor', () => {
         expect(container.querySelector('[data-testid="hide-preview-button"]')).not.toBeInTheDocument();
       });
     });
+
+    it('should show Help Panel', async () => {
+      await renderComponent(true, `/${courseId}/posts/${threadId}/edit`);
+
+      await act(async () => {
+        fireEvent.click(container.querySelector('[data-testid="help-button"]'));
+      });
+
+      await waitFor(() => {
+        expect(container.querySelector('[data-testid="hide-help-button"]')).toBeInTheDocument();
+      });
+    });
+
+    it('should hide Help Panel', async () => {
+      await renderComponent(true, `/${courseId}/posts/${threadId}/edit`);
+
+      await act(async () => {
+        fireEvent.click(container.querySelector('[data-testid="help-button"]'));
+      });
+
+      await act(async () => {
+        fireEvent.click(container.querySelector('[data-testid="hide-help-button"]'));
+      });
+
+      await waitFor(() => {
+        expect(container.querySelector('[data-testid="help-button"]')).toBeInTheDocument();
+        expect(container.querySelector('[data-testid="hide-help-button"]')).not.toBeInTheDocument();
+      });
+    });
   });
 });

src/discussions/posts/post-editor/messages.js

@@ -116,6 +116,36 @@ const messages = defineMessages({
     defaultMessage: 'Show preview',
     description: 'show preview button text to allow user to see their post content.',
   },
+  showHelpIcon: {
+    id: 'discussions.editor.posts.showHelp.icon',
+    defaultMessage: 'Show Help',
+    description: 'show help icon to allow user to see important documentation.',
+  },
+  discussionHelpHeader: {
+    id: 'discussions.editor.posts.discussionHelpHeader',
+    defaultMessage: 'Discussions help',
+    description: 'header text for post help section.',
+  },
+  discussionHelpDescription: {
+    id: 'discussions.editor.posts.discussionHelpDescription',
+    defaultMessage: 'Course discussions give you the opportunity to start conversations, ask questions, and interact with other learners. See the links below to learn more:',
+    description: 'description message for post help section.',
+  },
+  discussionHelpCourseParticipation: {
+    id: 'discussions.editor.posts.discussionHelpCourseParticipation',
+    defaultMessage: 'Participating in course discussions',
+    description: 'Documentation link title for participating in course discussions.',
+  },
+  discussionHelpMathExpressions: {
+    id: 'discussions.editor.posts.discussionHelpMathExpressions',
+    defaultMessage: 'Entering math expressions in course discussions',
+    description: 'Documentation link title for entering math expressions in course discussions.',
+  },
+  discussionHelpTooltip: {
+    id: 'discussions.editor.posts.discussionHelpTooltip',
+    defaultMessage: 'Learn more about MathJax & LaTeX',
+    description: 'Tooltip help message for documentation help.',
+  },
   actionsAlt: {
     id: 'discussions.actions.label',
     defaultMessage: 'Actions menu',

src/discussions/utils.js

@@ -316,3 +316,10 @@ export function getAuthorLabel(intl, authorLabel) {
 }
 
 export const isCourseStatusValid = (courseStatus) => [DENIED, LOADED].includes(courseStatus);
+
+export const extractContent = (content) => {
+  if (typeof content === 'object') {
+    return content.target.getContent();
+  }
+  return content;
+};

src/index.jsx

@@ -1,8 +1,10 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+
+// eslint-disable-next-line import/no-unresolved
+import { createRoot } from 'react-dom/client';
 
 import {
   APP_INIT_ERROR, APP_READY, initialize, mergeConfig,
@@ -17,18 +19,20 @@ import store from './store';
 
 import './index.scss';
 
+const rootNode = createRoot(document.getElementById('root'));
 subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider store={store}>
-      <Head />
-      <DiscussionsHome />
-    </AppProvider>,
-    document.getElementById('root'),
+  rootNode.render(
+    <StrictMode>
+      <AppProvider store={store}>
+        <Head />
+        <DiscussionsHome />
+      </AppProvider>
+    </StrictMode>,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  rootNode.render(<ErrorPage message={error.message} />);
 });
 
 initialize({

src/index.scss

@@ -593,6 +593,15 @@ th, td {
   white-space: nowrap;
 }
 
+.help-icon {
+  margin: -47px -3px 0px 0px;
+}
+
+.help-icon-size {
+  height: 16px !important;
+  width: 16px !important;
+}
+
 @media only screen and (max-width: 367px) {
 
   .discussion-comments h5,
@@ -603,7 +612,8 @@ th, td {
   .pgn__modal,
   .pgn__form-label,
   .dropdown-menu,
-  .tox-tbtn {
+  .tox-tbtn, 
+  .tooltip {
     font-size: 10px !important;
   }
 
@@ -640,7 +650,8 @@ th, td {
   .pgn__form-label,
   .pgn__modal,
   .dropdown-menu,
-  .tox-tbtn {
+  .tox-tbtn,
+  .tooltip {
     font-size: 12px !important;
   }
 
@@ -659,7 +670,8 @@ th, td {
 @media only screen and (min-width: 769px) {
 
   body,
-  #main {
+  #main,
+  .tooltip {
     font-size: 14px;
   }
 }

src/plugin-slots/FooterSlot/README.md

@@ -1,12 +1,13 @@
 # Footer Slot
 
-### Slot ID: `footer_slot`
+### Slot ID: `org.openedx.frontend.layout.footer.v1`
 
-## Description
+### Slot ID Aliases
+* `footer_slot`
 
 This slot is used to replace/modify/hide the footer.
 
-The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
+The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
 
 ## Example
 
@@ -23,7 +24,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    footer_slot: {
+    'org.openedx.frontend.layout.footer.v1': {
       plugins: [
         {
           // Hide the default footer

src/plugin-slots/README.md

@@ -1,3 +1,3 @@
 # `frontend-app-discussions` Plugin Slots
 
-* [`footer_slot`](./FooterSlot/)
+* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)

src/setupTest.jsx

@@ -19,25 +19,35 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
+global.MathJax = {
+  typeset: jest.fn(callback => {
+    if (callback) { callback(); }
+  }),
+  startup: {
+    defaultPageReady: jest.fn(() => Promise.resolve()),
+  },
+};
+
 // Provides a mock editor component that functions like tinyMCE without the overhead
 const MockEditor = ({
   onBlur,
   onEditorChange,
+  value,
 }) => (
   <textarea
     data-testid="tinymce-editor"
+    value={value}
     onChange={(event) => {
       onEditorChange(event.currentTarget.value);
-    }}
-    onBlur={event => {
       onBlur(event.currentTarget.value);
     }}
+    onBlur={onBlur}
   />
 );
-
 MockEditor.propTypes = {
   onBlur: PropTypes.func.isRequired,
   onEditorChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
 };
 jest.mock('@tinymce/tinymce-react', () => {
   const originalModule = jest.requireActual('@tinymce/tinymce-react');