fix: fixed author liking its own post

.github/workflows/ci.yml

@@ -33,4 +33,7 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

README.rst

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

package.json

@@ -34,10 +34,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^13.0.2",
     "@edx/frontend-component-header": "^5.0.2",
     "@edx/frontend-platform": "^7.1.0",
     "@edx/openedx-atlas": "^0.6.0",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "^22.1.1",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "3.13.1",
@@ -63,8 +63,8 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@openedx/frontend-build": "^13.0.28",
     "@edx/reactifex": "1.1.0",
+    "@openedx/frontend-build": "^13.0.28",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",

src/components/HTMLLoader.jsx

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

src/discussions/common/ActionsDropdown.jsx

@@ -79,7 +79,7 @@ const ActionsDropdown = ({
           placement="bottom-end"
         >
           <div
-            className="bg-white shadow d-flex flex-column"
+            className="bg-white shadow d-flex flex-column mt-1"
             data-testid="actions-dropdown-modal-popup"
           >
             {actions.map(action => (
@@ -99,7 +99,7 @@ const ActionsDropdown = ({
                     src={action.icon}
                     className="icon-size-24"
                   />
-                  <span className="font-weight-normal font-xl ml-2">
+                  <span className="font-weight-normal 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-size-14 font-style font-weight-500 author-name', {
+      className={classNames('mr-1.5 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-size-14 font-style font-weight-500', {
+              className={classNames('mr-1.5 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', {
+          className={classNames('align-content-center post-summary-timestamp', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}

src/discussions/common/HoverCard.jsx

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { ThreadType } from '../../data/constants';
-import { useUserPostingEnabled } from '../data/hooks';
+import { useHasLikePermission, useUserPostingEnabled } from '../data/hooks';
 import PostCommentsContext from '../post-comments/postCommentsContext';
 import ActionsDropdown from './ActionsDropdown';
 import DiscussionContext from './context';
@@ -33,6 +33,7 @@ const HoverCard = ({
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const { isClosed } = useContext(PostCommentsContext);
   const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
+  const userHasLikePermission = useHasLikePermission(contentType, id);
 
   return (
     <div
@@ -45,7 +46,7 @@ const HoverCard = ({
           <Button
             variant="tertiary"
             className={classNames(
-              'px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
+              'px-2.5 py-2 border-0 font-style text-gray-700',
               { 'w-100': enableInContextSidebar },
             )}
             onClick={() => handleResponseCommentButton()}
@@ -86,6 +87,7 @@ const HoverCard = ({
           iconAs={Icon}
           size="sm"
           alt="Like"
+          disabled={!userHasLikePermission}
           iconClassNames="like-icon-dimensions"
           onClick={(e) => {
             e.preventDefault();

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

src/discussions/data/api.js

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

src/discussions/data/hooks.js

@@ -16,18 +16,20 @@ import { AppContext } from '@edx/frontend-platform/react';
 import selectCourseTabs from '../../components/NavigationBar/data/selectors';
 import { LOADED } from '../../components/NavigationBar/data/slice';
 import fetchTab from '../../components/NavigationBar/data/thunks';
-import { RequestStatus, Routes } from '../../data/constants';
+import { ContentActions, RequestStatus, Routes } from '../../data/constants';
 import { selectTopicsUnderCategory } from '../../data/selectors';
 import fetchCourseBlocks from '../../data/thunks';
 import DiscussionContext from '../common/context';
+import PostCommentsContext from '../post-comments/postCommentsContext';
 import { clearRedirect } from '../posts/data';
 import { threadsLoadingStatus } from '../posts/data/selectors';
 import { selectTopics } from '../topics/data/selectors';
 import tourCheckpoints from '../tours/constants';
 import selectTours from '../tours/data/selectors';
 import { updateTourShowStatus } from '../tours/data/thunks';
 import messages from '../tours/messages';
-import { discussionsPath } from '../utils';
+import { checkPermissions, discussionsPath } from '../utils';
+import { ContentSelectors } from './constants';
 import {
   selectAreThreadsFiltered,
   selectEnableInContext,
@@ -284,3 +286,10 @@ export const useDebounce = (value, delay) => {
   );
   return debouncedValue;
 };
+
+export const useHasLikePermission = (contentType, id) => {
+  const { postType } = useContext(PostCommentsContext);
+  const content = { ...useSelector(ContentSelectors[contentType](id)), postType };
+
+  return checkPermissions(content, ContentActions.VOTE);
+};

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -27,7 +27,7 @@ import { selectPostEditorVisible } from '../posts/data/selectors';
 import { isCourseStatusValid } from '../utils';
 import useFeedbackWrapper from './FeedbackWrapper';
 
-const Footer = lazy(() => import('@edx/frontend-component-footer'));
+const FooterSlot = lazy(() => import('@openedx/frontend-slot-footer'));
 const PostActionsBar = lazy(() => import('../posts/post-actions-bar/PostActionsBar'));
 const CourseTabsNavigation = lazy(() => import('../../components/NavigationBar/CourseTabsNavigation'));
 const LegacyBreadcrumbMenu = lazy(() => import('../navigation/breadcrumb-menu/LegacyBreadcrumbMenu'));
@@ -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" id="main" tabIndex="-1">
+        <main className="container-fluid d-flex flex-column p-0 w-100 font-size" id="main" tabIndex="-1">
           {!enableInContextSidebar && <CourseTabsNavigation />}
           {(isEnrolled || !isUserLearner) && (
             <div
@@ -175,7 +175,7 @@ const DiscussionsHome = () => {
           )}
           {!enableInContextSidebar && isEnrolled && (<DiscussionsProductTour />)}
         </main>
-        {!enableInContextSidebar && <Footer />}
+        {!enableInContextSidebar && <FooterSlot />}
       </DiscussionContext.Provider>
     </Suspense>
   );

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 font-size-14 text-primary-500 font-style"
+                className="text-truncate font-weight-500 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 } from '../data/api';
+import { getCourseConfigApiUrl, getCourseSettingsApiUrl } from '../data/api';
 import fetchCourseConfig from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
 import { getThreadsApiUrl } from '../posts/data/api';
@@ -37,6 +37,7 @@ import '../topics/data/__factories__';
 import '../cohorts/data/__factories__';
 
 const courseConfigApiUrl = getCourseConfigApiUrl();
+const courseSettingsApiUrl = getCourseSettingsApiUrl();
 const commentsApiUrl = getCommentsApiUrl();
 const threadsApiUrl = getThreadsApiUrl();
 const discussionPostId = 'thread-1';
@@ -105,7 +106,7 @@ async function setupCourseConfig() {
       { code: 'reason-2', label: 'reason 2' },
     ],
   });
-  axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
+  axiosMock.onGet(`${courseSettingsApiUrl}${courseId}/settings`).reply(200, {});
   await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
 }
 

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 font-size-14"
+        className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500"
         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 font-size-14 text-primary-500"
+                    line-height-24 text-primary-500"
              onClick={handleAddResponse}
              data-testid="add-response"
            >

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

@@ -104,6 +104,10 @@ 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,
@@ -124,10 +128,6 @@ 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="font-size-14 line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
+              className="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-size-14 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
+                  className="d-flex flex-grow mt-2 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
                   variant="plain"
                   style={{ height: '36px' }}
                   onClick={handleAddCommentReply}

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

@@ -241,7 +241,7 @@ const PostEditor = ({
       resetForm,
     }) => (
       <Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
-        <h4 className="mb-4 font-style font-size-16" style={{ lineHeight: '16px' }}>
+        <h4 className="mb-4 font-style" style={{ lineHeight: '16px' }}>
           {editExisting
             ? intl.formatMessage(messages.editPostHeading)
             : intl.formatMessage(messages.addPostHeading)}
@@ -423,7 +423,7 @@ const PostEditor = ({
                 onBlur={handleBlur}
                 className="mr-4.5"
               >
-                <span className="font-size-14">
+                <span>
                   {intl.formatMessage(messages.followPost)}
                 </span>
               </Form.Checkbox>
@@ -436,7 +436,7 @@ const PostEditor = ({
                 onChange={handleChange}
                 onBlur={handleBlur}
               >
-                <span className="font-size-14">
+                <span>
                   {intl.formatMessage(messages.anonymousToPeersPost)}
                 </span>
               </Form.Checkbox>

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 mr-2', { invisible: value !== selected })} />
+    <Icon src={Check} className={classNames('text-success dropdown-icon-dimensions', { invisible: value !== selected })} />
     <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">
       {label}
     </Form.Radio>