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

.github/workflows/ci.yml

@@ -9,19 +9,17 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
-
     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: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -35,7 +33,4 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+      uses: codecov/codecov-action@v3

.github/workflows/lockfileversion-check.yml

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

.nvmrc

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

package.json

@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.0.0",
+    "@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",
@@ -64,7 +64,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "14.0.3",
+    "@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",
@@ -74,7 +74,7 @@
     "eslint-plugin-simple-import-sort": "7.0.0",
     "glob": "7.2.0",
     "husky": "7.0.4",
-    "jest": "29.7.0",
+    "jest": "27.5.1",
     "rosie": "2.1.1"
   }
 }

src/components/HTMLLoader.jsx

@@ -9,7 +9,7 @@ import { useDebounce } from '../discussions/data/hooks';
 
 const defaultSanitizeOptions = {
   USE_PROFILES: { html: true },
-  ADD_ATTR: ['columnalign', 'target'],
+  ADD_ATTR: ['columnalign'],
 };
 
 const HTMLLoader = ({

src/components/PostHelpPanel.jsx

@@ -1,74 +0,0 @@
-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

@@ -79,7 +79,7 @@ const ActionsDropdown = ({
           placement="bottom-end"
         >
           <div
-            className="bg-white shadow d-flex flex-column mt-1"
+            className="bg-white shadow d-flex flex-column"
             data-testid="actions-dropdown-modal-popup"
           >
             {actions.map(action => (
@@ -94,13 +94,12 @@ const ActionsDropdown = ({
                     handleActions(action.action);
                   }}
                   className="d-flex justify-content-start actions-dropdown-item"
-                  data-testId={action.id}
                 >
                   <Icon
                     src={action.icon}
                     className="icon-size-24"
                   />
-                  <span className="font-weight-normal ml-2">
+                  <span className="font-weight-normal font-xl ml-2">
                     {intl.formatMessage(action.label)}
                   </span>
                 </Dropdown.Item>

src/discussions/common/AuthorLabel.jsx

@@ -38,7 +38,7 @@ const AuthorLabel = ({
 
   const authorName = useMemo(() => (
     <span
-      className={classNames('mr-1.5 font-style font-weight-500 author-name', {
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}
@@ -71,7 +71,7 @@ const AuthorLabel = ({
           />
           {authorLabelMessage && (
             <span
-              className={classNames('mr-1.5 font-style font-weight-500', {
+              className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
                 'text-primary-500': showTextPrimary,
                 'text-gray-700': isRetiredUser,
               })}
@@ -85,7 +85,7 @@ const AuthorLabel = ({
       {postCreatedAt && (
         <span
           title={postCreatedAt}
-          className={classNames('align-content-center post-summary-timestamp', {
+          className={classNames('align-content-center', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}

src/discussions/common/HoverCard.jsx

@@ -46,7 +46,7 @@ const HoverCard = ({
           <Button
             variant="tertiary"
             className={classNames(
-              'px-2.5 py-2 border-0 font-style text-gray-700',
+              'px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
               { 'w-100': enableInContextSidebar },
             )}
             onClick={() => handleResponseCommentButton()}

src/discussions/content-unavailable/ContentUnavailable.jsx

@@ -35,7 +35,7 @@ const ContentUnavailable = ({ subTitleMessage }) => {
           {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="py-2 px-2.5">
+        <Button onClick={redirectToDashboard} variant="outline-dark" className="font-size-14 py-2 px-2.5">
           {intl.formatMessage(messages.contentUnavailableAction)}
         </Button>
       </div>

src/discussions/data/api.js

@@ -5,10 +5,8 @@ ensureConfig([
   'LMS_BASE_URL',
 ], 'Posts API service');
 
-export const getCourseConfigApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v2/courses/`;
-export const getCourseSettingsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
+export const getCourseConfigApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
 export const getDiscussionsConfigUrl = (courseId) => `${getCourseConfigApiUrl()}${courseId}/`;
-export const getDiscussionsSettingsUrl = (courseId) => `${getCourseSettingsApiUrl()}${courseId}/settings`;
 /**
  * Get discussions course config
  * @param {string} courseId
@@ -23,7 +21,7 @@ export async function getDiscussionsConfig(courseId) {
  * @param {string} courseId
  */
 export async function getDiscussionsSettings(courseId) {
-  const url = `${getDiscussionsSettingsUrl(courseId)}`;
+  const url = `${getDiscussionsConfigUrl(courseId)}settings`;
   const { data } = await getAuthenticatedHttpClient().get(url);
   return data;
 }

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -82,7 +82,7 @@ const DiscussionsHome = () => {
     <Suspense fallback={(<Spinner />)}>
       <DiscussionContext.Provider value={discussionContextValue}>
         {!enableInContextSidebar && (<Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />)}
-        <main className="container-fluid d-flex flex-column p-0 w-100 font-size" id="main" tabIndex="-1">
+        <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
           {!enableInContextSidebar && <CourseTabsNavigation />}
           {(isEnrolled || !isUserLearner) && (
             <div

src/discussions/learners/learner/LearnerCard.jsx

@@ -37,7 +37,7 @@ const LearnerCard = ({ learner }) => {
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
             <div className="d-flex align-items-center flex-fill">
               <div
-                className="text-truncate font-weight-500 text-primary-500 font-style"
+                className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style"
               >
                 {username}
               </div>

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

@@ -18,7 +18,7 @@ import executeThunk from '../../test-utils';
 import { getCohortsApiUrl } from '../cohorts/data/api';
 import fetchCourseCohorts from '../cohorts/data/thunks';
 import DiscussionContext from '../common/context';
-import { getCourseConfigApiUrl, getCourseSettingsApiUrl } from '../data/api';
+import { getCourseConfigApiUrl } from '../data/api';
 import fetchCourseConfig from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
 import { getThreadsApiUrl } from '../posts/data/api';
@@ -37,7 +37,6 @@ import '../topics/data/__factories__';
 import '../cohorts/data/__factories__';
 
 const courseConfigApiUrl = getCourseConfigApiUrl();
-const courseSettingsApiUrl = getCourseSettingsApiUrl();
 const commentsApiUrl = getCommentsApiUrl();
 const threadsApiUrl = getThreadsApiUrl();
 const discussionPostId = 'thread-1';
@@ -106,7 +105,7 @@ async function setupCourseConfig() {
       { code: 'reason-2', label: 'reason 2' },
     ],
   });
-  axiosMock.onGet(`${courseSettingsApiUrl}${courseId}/settings`).reply(200, {});
+  axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
   await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
 }
 
@@ -671,151 +670,6 @@ 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/CommentsView.jsx

@@ -73,7 +73,7 @@ const CommentsView = ({ threadType }) => {
         onClick={handleLoadMoreResponses}
         variant="link"
         block="true"
-        className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500"
+        className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500 font-size-14"
         data-testid="load-more-comments"
       >
         {intl.formatMessage(messages.loadMoreResponses)}
@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
              variant="plain"
              block="true"
              className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
-                    line-height-24 text-primary-500"
+                    line-height-24 font-size-14 text-primary-500"
              onClick={handleAddResponse}
              data-testid="add-response"
            >

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

@@ -104,10 +104,6 @@ const Comment = ({
     hideReportConfirmation();
   }, [abuseFlagged, id, hideReportConfirmation]);
 
-  const handleCommentLike = useCallback(async () => {
-    await dispatch(editComment(id, { voted: !voted }));
-  }, [id, voted]);
-
   const actionHandlers = useMemo(() => ({
     [ContentActions.EDIT_CONTENT]: handleEditContent,
     [ContentActions.ENDORSE]: handleCommentEndorse,
@@ -128,6 +124,10 @@ const Comment = ({
     }
   }, [isUserPrivilegedInPostingRestriction]);
 
+  const handleCommentLike = useCallback(async () => {
+    await dispatch(editComment(id, { voted: !voted }));
+  }, [id, voted]);
+
   const handleCloseEditor = useCallback(() => {
     setEditing(false);
   }, []);
@@ -249,7 +249,7 @@ const Comment = ({
               onClick={handleLoadMoreComments}
               variant="link"
               block="true"
-              className="line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
+              className="font-size-14 line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
               data-testid="load-more-comments-responses"
             >
               {intl.formatMessage(messages.loadMoreComments)}
@@ -267,7 +267,7 @@ const Comment = ({
             ) : (
               !isClosed && isUserPrivilegedInPostingRestriction && (inlineReplies.length >= 5) && (
                 <Button
-                  className="d-flex flex-grow mt-2 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
+                  className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
                   variant="plain"
                   style={{ height: '36px' }}
                   onClick={handleAddCommentReply}

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

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useContext, useEffect, useRef, useState,
+  useCallback, useContext, useEffect, useRef,
 } from 'react';
 import PropTypes from 'prop-types';
 
@@ -22,9 +22,7 @@ import {
   selectUserIsGroupTa,
   selectUserIsStaff,
 } from '../../../data/selectors';
-import { extractContent, formikCompatibleHandler, isFormikFieldInvalid } from '../../../utils';
-import { useDraftContent } from '../../data/hooks';
-import { setDraftComments, setDraftResponses } from '../../data/slices';
+import { formikCompatibleHandler, isFormikFieldInvalid } from '../../../utils';
 import { addComment, editComment } from '../../data/thunks';
 import messages from '../../messages';
 
@@ -47,8 +45,6 @@ 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)
@@ -66,7 +62,7 @@ const CommentEditor = ({
   });
 
   const initialValues = {
-    comment: editorContent,
+    comment: rawBody,
     editReasonCode: lastEdit?.reasonCode || (userIsStaff && canDisplayEditReason ? 'violates-guidelines' : undefined),
   };
 
@@ -75,15 +71,6 @@ 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 = {
@@ -99,7 +86,6 @@ 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.
@@ -111,33 +97,11 @@ 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,
@@ -187,10 +151,7 @@ const CommentEditor = ({
             id={editorId}
             value={values.comment}
             onEditorChange={formikCompatibleHandler(handleChange, 'comment')}
-            onBlur={(content) => {
-              formikCompatibleHandler(handleChange, 'comment');
-              saveDraftContent(content);
-            }}
+            onBlur={formikCompatibleHandler(handleBlur, 'comment')}
           />
           {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,7 +3,6 @@ import {
 } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { v4 as uuidv4 } from 'uuid';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 
@@ -14,8 +13,7 @@ import { selectThread } from '../../posts/data/selectors';
 import { markThreadAsRead } from '../../posts/data/thunks';
 import { filterPosts } from '../../utils';
 import {
-  selectCommentSortOrder, selectDraftComments, selectDraftResponses,
-  selectThreadComments, selectThreadCurrentPage, selectThreadHasMorePages,
+  selectCommentSortOrder, selectThreadComments, selectThreadCurrentPage, selectThreadHasMorePages,
 } from './selectors';
 import { fetchThreadComments } from './thunks';
 
@@ -104,73 +102,3 @@ 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,7 +47,3 @@ 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,8 +22,6 @@ const commentsSlice = createSlice({
     pagination: {},
     responsesPagination: {},
     sortOrder: true,
-    draftResponses: {},
-    draftComments: {},
   },
   reducers: {
     fetchCommentsRequest: (state) => (
@@ -259,18 +257,6 @@ const commentsSlice = createSlice({
         sortOrder: payload,
       }
     ),
-    setDraftComments: (state, { payload }) => (
-      {
-        ...state,
-        draftComments: payload,
-      }
-    ),
-    setDraftResponses: (state, { payload }) => (
-      {
-        ...state,
-        draftResponses: payload,
-      }
-    ),
   },
 });
 
@@ -296,8 +282,6 @@ export const {
   deleteCommentRequest,
   deleteCommentSuccess,
   setCommentSortOrder,
-  setDraftComments,
-  setDraftResponses,
 } = commentsSlice.actions;
 
 export const commentsReducer = commentsSlice.reducer;

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

@@ -18,7 +18,6 @@ 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';
@@ -242,7 +241,7 @@ const PostEditor = ({
       resetForm,
     }) => (
       <Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
-        <h4 className="mb-4 font-style" style={{ lineHeight: '16px' }}>
+        <h4 className="mb-4 font-style font-size-16" style={{ lineHeight: '16px' }}>
           {editExisting
             ? intl.formatMessage(messages.editPostHeading)
             : intl.formatMessage(messages.addPostHeading)}
@@ -410,7 +409,6 @@ const PostEditor = ({
             onEditorChange={formikCompatibleHandler(handleChange, 'comment')}
             onBlur={formikCompatibleHandler(handleBlur, 'comment')}
           />
-          <PostHelpPanel />
           <FormikErrorFeedback name="comment" />
         </div>
         <PostPreviewPanel htmlNode={values.comment} isPost editExisting={editExisting} />
@@ -425,7 +423,7 @@ const PostEditor = ({
                 onBlur={handleBlur}
                 className="mr-4.5"
               >
-                <span>
+                <span className="font-size-14">
                   {intl.formatMessage(messages.followPost)}
                 </span>
               </Form.Checkbox>
@@ -438,7 +436,7 @@ const PostEditor = ({
                 onChange={handleChange}
                 onBlur={handleBlur}
               >
-                <span>
+                <span className="font-size-14">
                   {intl.formatMessage(messages.anonymousToPeersPost)}
                 </span>
               </Form.Checkbox>

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

@@ -368,34 +368,5 @@ 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,36 +116,6 @@ 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/posts/post-filter-bar/PostFilterBar.jsx

@@ -44,7 +44,7 @@ export const ActionItem = React.memo(({
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex={value === selected ? '0' : '-1'}
   >
-    <Icon src={Check} className={classNames('text-success dropdown-icon-dimensions', { invisible: value !== selected })} />
+    <Icon src={Check} className={classNames('text-success mr-2', { invisible: value !== selected })} />
     <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">
       {label}
     </Form.Radio>

src/discussions/posts/post/Post.jsx

@@ -85,10 +85,6 @@ const Post = ({ handleAddResponseButton }) => {
     updateExistingThread(postId, { pinned: !pinned }),
   ), [postId, pinned]);
 
-  const handlePostLike = useCallback(() => {
-    dispatch(updateExistingThread(postId, { voted: !voted }));
-  }, [postId, voted]);
-
   const handlePostReport = useCallback(() => {
     if (abuseFlagged) {
       dispatch(updateExistingThread(postId, { flagged: !abuseFlagged }));
@@ -113,6 +109,10 @@ const Post = ({ handleAddResponseButton }) => {
     hideClosePostModal();
   }, [postId, hideClosePostModal]);
 
+  const handlePostLike = useCallback(() => {
+    dispatch(updateExistingThread(postId, { voted: !voted }));
+  }, [postId, voted]);
+
   const handlePostFollow = useCallback(() => {
     dispatch(updateExistingThread(postId, { following: !following }));
   }, [postId, following]);
@@ -188,7 +188,10 @@ const Post = ({ handleAddResponseButton }) => {
       </div>
       {(topicContext || topic) && (
         <div
-          className={classNames('mt-14px font-style', { 'w-100': enableInContextSidebar, 'mb-1': !displayPostFooter })}
+          className={classNames(
+            'mt-14px font-style font-size-12',
+            { 'w-100': enableInContextSidebar, 'mb-1': !displayPostFooter },
+          )}
           style={{ lineHeight: '20px' }}
         >
           <span className="text-gray-500" style={{ lineHeight: '20px' }}>
@@ -203,9 +206,13 @@ const Post = ({ handleAddResponseButton }) => {
             )}
           >
             {(topicContext && !topic) ? (
-              <span>
-                {topicContext.chapterName} / {topicContext.verticalName} / {topicContext.unitName}
-              </span>
+              <>
+                <span className="w-auto">{topicContext.chapterName}</span>
+                <span className="mx-1">/</span>
+                <span className="w-auto">{topicContext.verticalName}</span>
+                <span className="mx-1">/</span>
+                <span className="w-auto">{topicContext.unitName}</span>
+              </>
             ) : (
               getTopicInfo(topic)
             )}

src/discussions/posts/post/PostLink.jsx

@@ -89,13 +89,13 @@ const PostLink = ({
             <div className="d-flex align-items-center pb-0 mb-0 flex-fill">
               <div className="text-truncate mr-1">
                 <span className={classNames(
-                  'font-weight-500 text-primary-500 font-style align-bottom mr-1',
+                  'font-weight-500 font-size-14 text-primary-500 font-style align-bottom mr-1',
                   { 'font-weight-bolder': !read },
                 )}
                 >
                   {title}
                 </span>
-                <span className="text-gray-700 font-weight-normal  font-style align-bottom">
+                <span className="text-gray-700 font-weight-normal font-size-14 font-style align-bottom">
                   {isPostPreviewAvailable(previewBody) ? previewBody : intl.formatMessage(messages.postWithoutPreview)}
                 </span>
               </div>

src/discussions/posts/post/PostSummaryFooter.jsx

@@ -68,7 +68,7 @@ const PostSummaryFooter = ({
       </OverlayTrigger>
 
       {preview && commentCount > 1 && (
-        <div className="d-flex align-items-center ml-4.5 text-gray-700 font-style">
+        <div className="d-flex align-items-center ml-4.5 text-gray-700 font-style font-size-12">
           <OverlayTrigger
             overlay={(
               <Tooltip id={`follow-${postId}-tooltip`}>

src/discussions/utils.js

@@ -316,10 +316,3 @@ 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.scss

@@ -9,25 +9,6 @@
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-body,
-#main
-{
-  font-size: 14px ;
-}
-
-.btn,
-.form-control,
-.dropdown-menu,
-.pgn__modal,
-.pgn__form-control-floating-label-content,
-.pgn__form-label {
-  font-size: 14px !important;
-}
-
-.btn-md {
-  font-size: 16px !important;
-}
-
 #post,
 #comment,
 #reply,
@@ -60,6 +41,18 @@ body,
   outline: $light-400 solid 2px;
 }
 
+.font-size-16 {
+  font-size: 16px !important;
+}
+
+.font-size-14 {
+  font-size: 14px !important;
+}
+
+.font-size-12 {
+  font-size: 12px !important;
+}
+
 .font-size-8 {
   font-size: 8px !important;
 }
@@ -240,11 +233,11 @@ header {
 }
 
 .sidebar-tablet-width {
-  max-width: 21rem !important;
+  max-width: 20rem !important;
 }
 
 .sidebar-XL-width {
-  min-width: 29rem !important;
+  min-width: 35rem !important;
 }
 
 .filter-menu:focus-visible {
@@ -266,9 +259,6 @@ header {
     width: 18px !important;
     height: 18px !important;
   }
-  h4 {
-    font-size: 16px !important;
-  }
 }
 
 .pointer-cursor-hover :hover {
@@ -400,7 +390,6 @@ header {
 
 .badge {
   padding: 1px 5px !important;
-  font-size: 12px !important;
 }
 
 .pgn__checkpoint {
@@ -553,7 +542,7 @@ code {
 .actions-dropdown-item {
   padding: 12px 16px;
   height: 48px !important;
-  width: 195px !important
+  width: 304px !important;
 }
 
 .font-xl {
@@ -592,102 +581,3 @@ th, td {
   padding: 0.4rem;
   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,
-  .btn,
-  .alert-message-content,
-  .pgn__form-control-floating-label-content,
-  .form-control,
-  .pgn__modal,
-  .pgn__form-label,
-  .dropdown-menu,
-  .tox-tbtn, 
-  .tooltip {
-    font-size: 10px !important;
-  }
-
-  .badge,
-  .post-summary-timestamp,
-  .hover-card button {
-    font-size: 8px !important;
-  }
-
-  .header-action-bar button {
-    height: 42px;
-    text-wrap: nowrap;
-    ;
-  }
-
-  .nav-item a {
-    padding-left: 14px !important;
-    padding-right: 14px !important;
-  }
-
-  .post-form h4,
-  .discussion-posts .btn-md {
-    font-size: 12px !important;
-  }
-}
-
-@media only screen and (min-width: 367px) and (max-width: 768px) {
-
-  .discussion-comments h5,
-  .btn,
-  .alert-message-content,
-  .pgn__form-control-floating-label-content,
-  .form-control,
-  .pgn__form-label,
-  .pgn__modal,
-  .dropdown-menu,
-  .tox-tbtn,
-  .tooltip {
-    font-size: 12px !important;
-  }
-
-  .badge,
-  .post-summary-timestamp,
-  .hover-card.btn-tertiary {
-    font-size: 10px !important;
-  }
-
-  .post-form h4,
-  .discussion-posts .btn-md {
-    font-size: 14px !important;
-  }
-}
-
-@media only screen and (min-width: 769px) {
-
-  body,
-  #main,
-  .tooltip {
-    font-size: 14px;
-  }
-}
-
-@media only screen and (max-width: 768px) {
-
-  body,
-  #main {
-    font-size: 12px;
-  }
-}
-
-@media only screen and (max-width: 366px) {
-
-  body,
-  #main {
-    font-size: 10px;
-  }
-}

src/setupTest.jsx

@@ -19,35 +19,25 @@ 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');