perf: update redwood branch with upstream (#7)

* feat: import `FooterSlot` from `frontend-slot-footer` package * fix: block overflow when editing comment (openedx#710) * fix: fixed author liking its own post (openedx#729) * perf: update redwood branch with upstream * refactor: generate package-lock with conflicts solved * fix: tests failed because axios and react-markdown lib errors --------- Co-authored-by: Brian Smith <bsmith@axim.org> Co-authored-by: Ihor Romaniuk <ihor.romaniuk@raccoongang.com> Co-authored-by: ayesha waris <73840786+ayesha-waris@users.noreply.github.com>
eduNEXT · Jul 29, 2024 · 43d658f · 43d658f
1 parent 265a2bc
commit 43d658f
Show file tree

Hide file tree

Showing 15 changed files with 11,136 additions and 5,535 deletions.
diff --git a/README.rst b/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.

diff --git a/jest.config.js b/jest.config.js
@@ -11,4 +11,12 @@ module.exports = createConfig('jest', {
     'src/setupTest.jsx',
     'src/i18n',
   ],
+  // see https://github.com/axios/axios/issues/5026
+  moduleNameMapper: {
+    "^axios$": "axios/dist/axios.js",
+    // See https://stackoverflow.com/questions/72382316/jest-encountered-an-unexpected-token-react-markdown
+    'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
+  },
+  testTimeout: 30000,
+  testEnvironment: 'jsdom'
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,10 +35,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@13.0.4-alpha.1",
     "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.0.2-alpha.1",
     "@edx/frontend-platform": "npm:@edunext/frontend-platform@7.1.2-alpha.1",
     "@edx/openedx-atlas": "^0.6.0",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "23.0.0-alpha.1",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "3.13.1",
@@ -64,8 +64,8 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@openedx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables-13.1.4",
     "@edx/reactifex": "1.1.0",
+    "@openedx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables-13.1.4",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",

diff --git a/src/components/NavigationBar/navBar.scss b/src/components/NavigationBar/navBar.scss
@@ -1,7 +1,3 @@
-@import "~@edx/brand/paragon/fonts.scss";
-@import "~@edx/brand/paragon/variables.scss";
-@import "~@edx/brand/paragon/overrides.scss";
-
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 

diff --git a/src/discussions/common/HoverCard.jsx b/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
@@ -86,6 +87,7 @@ const HoverCard = ({
           iconAs={Icon}
           size="sm"
           alt="Like"
+          disabled={!userHasLikePermission}
           iconClassNames="like-icon-dimensions"
           onClick={(e) => {
             e.preventDefault();

diff --git a/src/discussions/data/hooks.js b/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);
+};
diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/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'));
@@ -175,7 +175,7 @@ const DiscussionsHome = () => {
           )}
           {!enableInContextSidebar && isEnrolled && (<DiscussionsProductTour />)}
         </main>
-        {!enableInContextSidebar && <Footer />}
+        {!enableInContextSidebar && <FooterSlot />}
       </DiscussionContext.Provider>
     </Suspense>
   );

diff --git a/src/discussions/post-comments/comments/comment/Reply.jsx b/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

diff --git a/src/index.scss b/src/index.scss
@@ -1,7 +1,3 @@
-@import "~@edx/brand/paragon/fonts.scss";
-@import "~@edx/brand/paragon/variables.scss";
-@import "~@edx/brand/paragon/overrides.scss";
-
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
 

diff --git a/src/plugin-slots/FooterSlot/README.md b/src/plugin-slots/FooterSlot/README.md
@@ -0,0 +1,50 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Description
+
+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/).
+
+## Example
+
+The following `env.config.jsx` will replace the default footer.
+
+![Screenshot of Default Footer](./images/default_footer.png)
+
+with a simple custom footer
+
+![Screenshot of Custom Footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    footer_slot: {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/FooterSlot/images/custom_footer.png b/src/plugin-slots/FooterSlot/images/custom_footer.png
diff --git a/src/plugin-slots/FooterSlot/images/default_footer.png b/src/plugin-slots/FooterSlot/images/default_footer.png
diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md
@@ -0,0 +1,3 @@
+# `frontend-app-discussions` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)
diff --git a/webpack.dev-tutor.config.js b/webpack.dev-tutor.config.js