feat: bump frontend-lib-content-components to 2.5.1 (#1174)

The primary purpose of this version bump backport is to remove the 2U feedback form
link from the editors (openedx/frontend-lib-content-components#476),
but several other improvements will also be pulled in:

* Fix the Text editor so that when an image is added, it is added at the cursor,
  instead of the beginning of the component.
* Improve editor load time by reducing API calls and switching some calls to be lazy.
* Align controls better in the group feedback component.
* Add validation for start & stop date fields.
* Fix image handling bugs in both the raw & visual text editors.

Full changelog: openedx/frontend-lib-content-components@v2.1.11...v2.5.1

Co-authored-by: Kyle McCormick <[email protected]>

package.json

@@ -45,7 +45,7 @@
     "@edx/frontend-component-footer": "^13.0.2",
     "@edx/frontend-component-header": "^5.1.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "^2.1.11",
+    "@edx/frontend-lib-content-components": "^2.5.1",
     "@edx/frontend-platform": "7.0.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",

src/course-updates/update-form/UpdateForm.test.jsx

@@ -5,14 +5,18 @@ import {
   waitFor,
   act,
 } from '@testing-library/react';
+import { AppProvider } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
 import moment from 'moment/moment';
 
+import initializeStore from '../../store';
 import { REQUEST_TYPES } from '../constants';
 import { courseHandoutsMock, courseUpdatesMock } from '../__mocks__';
 import UpdateForm from './UpdateForm';
 import messages from './messages';
 
+let store;
 const closeMock = jest.fn();
 const onSubmitMock = jest.fn();
 const addNewUpdateMock = { id: 0, date: moment().utc().toDate(), content: 'Some content' };
@@ -48,18 +52,32 @@ const courseUpdatesInitialValues = (requestType) => {
 };
 
 const renderComponent = ({ requestType }) => render(
-  <IntlProvider locale="en">
-    <UpdateForm
-      isOpen
-      close={closeMock}
-      requestType={requestType}
-      onSubmit={onSubmitMock}
-      courseUpdatesInitialValues={courseUpdatesInitialValues(requestType)}
-    />
-  </IntlProvider>,
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <UpdateForm
+        isOpen
+        close={closeMock}
+        requestType={requestType}
+        onSubmit={onSubmitMock}
+        courseUpdatesInitialValues={courseUpdatesInitialValues(requestType)}
+      />
+    </IntlProvider>
+  </AppProvider>,
 );
 
 describe('<UpdateForm />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
   it('render Add new update form correctly', async () => {
     const { getByText, getByDisplayValue, getByRole } = renderComponent({ requestType: REQUEST_TYPES.add_new_update });
     const { date } = courseUpdatesInitialValues(REQUEST_TYPES.add_new_update);

src/generic/WysiwygEditor.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect, Provider } from 'react-redux';
+import { connect, Provider, useSelector } from 'react-redux';
 import { createStore } from 'redux';
 import { getConfig } from '@edx/frontend-platform';
 import {
@@ -18,20 +18,19 @@ export const SUPPORTED_TEXT_EDITORS = {
 };
 
 const mapStateToProps = () => ({
-  assets: {},
+  images: {},
   lmsEndpointUrl: getConfig().LMS_BASE_URL,
   studioEndpointUrl: getConfig().STUDIO_BASE_URL,
   isLibrary: true,
   onEditorChange: () => ({}),
 });
-
 const Editor = connect(mapStateToProps)(TinyMceWidget);
 
 export const WysiwygEditor = ({
   initialValue, editorType, onChange, minHeight,
 }) => {
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
-
+  const { courseId } = useSelector((state) => state.courseDetail);
   const isEquivalentCodeExtraSpaces = (first, second) => {
     // Utils allows to compare code extra spaces
     const removeWhitespace = (str) => str.replace(/\s/g, '');
@@ -75,6 +74,7 @@ export const WysiwygEditor = ({
         setEditorRef={setEditorRef}
         onChange={handleUpdate}
         initializeEditor={() => ({})}
+        learningContextId={courseId}
       />
     </Provider>
   );