feat: edit Text components within content libraries [FC-0062] (#1240)

Author: bradenmacdonald

src/CourseAuthoringRoutes.jsx

@@ -88,7 +88,7 @@ const CourseAuthoringRoutes = () => {
         />
         <Route
           path="editor/:blockType/:blockId?"
-          element={<PageWrap><EditorContainer courseId={courseId} /></PageWrap>}
+          element={<PageWrap><EditorContainer learningContextId={courseId} /></PageWrap>}
         />
         <Route
           path="settings/details"

src/editors/EditorContainer.jsx

@@ -10,7 +10,7 @@ jest.mock('react-router', () => ({
   }),
 }));
 
-const props = { courseId: 'cOuRsEId' };
+const props = { learningContextId: 'cOuRsEId' };
 
 describe('Editor Container', () => {
   describe('snapshots', () => {

src/editors/EditorContainer.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+
+import EditorPage from './EditorPage';
+
+interface Props {
+  /** Course ID or Library ID */
+  learningContextId: string;
+  /** Event handler for when user cancels out of the editor page */
+  onClose?: () => void;
+  /** Event handler called after when user saves their changes using an editor */
+  afterSave?: () => (newData: Record<string, any>) => void;
+}
+
+const EditorContainer: React.FC<Props> = ({
+  learningContextId,
+  onClose,
+  afterSave,
+}) => {
+  const { blockType, blockId } = useParams();
+  if (blockType === undefined || blockId === undefined) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    return <div>Error: missing URL parameters</div>;
+  }
+  if (!!onClose !== !!afterSave) {
+    /* istanbul ignore next */
+    throw new Error('You must specify both onClose and afterSave or neither.');
+    // These parameters are a bit messy so I'm trying to help make it more
+    // consistent here. For example, if you specify onClose, then returnFunction
+    // is only called if the save is successful. But if you leave onClose
+    // undefined, then returnFunction is called in either case, and with
+    // different arguments. The underlying EditorPage should be refactored to
+    // have more clear events like onCancel and onSaveSuccess
+  }
+  return (
+    <div className="editor-page">
+      <EditorPage
+        courseId={learningContextId}
+        blockType={blockType}
+        blockId={blockId}
+        studioEndpointUrl={getConfig().STUDIO_BASE_URL}
+        lmsEndpointUrl={getConfig().LMS_BASE_URL}
+        onClose={onClose}
+        returnFunction={afterSave}
+      />
+    </div>
+  );
+};
+
+export default EditorContainer;

src/editors/EditorContainer.tsx

@@ -51,6 +51,7 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
         />
       </h2>
       <IconButton
+        alt="Exit the editor"
         iconAs="Icon"
         onClick={[MockFunction openCancelConfirmModal]}
         src={[MockFunction icons.Close]}
@@ -132,6 +133,7 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav
         />
       </h2>
       <IconButton
+        alt="Exit the editor"
         iconAs="Icon"
         onClick={[MockFunction openCancelConfirmModal]}
         src={[MockFunction icons.Close]}

src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap

@@ -63,6 +63,7 @@ const EditorContainer = ({
             src={Close}
             iconAs={Icon}
             onClick={openCancelConfirmModal}
+            alt={intl.formatMessage(messages.exitButtonAlt)}
           />
         </div>
       </ModalDialog.Header>

src/editors/containers/EditorContainer/index.jsx

@@ -12,6 +12,11 @@ const messages = defineMessages({
     defaultMessage: 'Are you sure you want to exit the editor? Any unsaved changes will be lost.',
     description: 'Description text for modal confirming cancellation',
   },
+  exitButtonAlt: {
+    id: 'authoring.editorContainer.exitButton.alt',
+    defaultMessage: 'Exit the editor',
+    description: 'Alt text for the Exit button',
+  },
   okButtonLabel: {
     id: 'authoring.editorContainer.okButton.label',
     defaultMessage: 'OK',

src/editors/containers/EditorContainer/messages.js

@@ -24,11 +24,7 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
       onClose={[MockFunction hooks.nullMethod]}
       show={true}
     >
-      <FormattedMessage
-        defaultMessage="Error: Could Not Load Text Content"
-        description="Error Message Dispayed When HTML content fails to Load"
-        id="authoring.texteditor.load.error"
-      />
+      Error: Could Not Load Text Content
     </Toast>
     <TinyMceWidget
       disabled={false}
@@ -81,11 +77,7 @@ exports[`TextEditor snapshots loaded, raw editor 1`] = `
       onClose={[MockFunction hooks.nullMethod]}
       show={false}
     >
-      <FormattedMessage
-        defaultMessage="Error: Could Not Load Text Content"
-        description="Error Message Dispayed When HTML content fails to Load"
-        id="authoring.texteditor.load.error"
-      />
+      Error: Could Not Load Text Content
     </Toast>
     <RawEditor
       content={
@@ -132,11 +124,7 @@ exports[`TextEditor snapshots not yet loaded, Spinner appears 1`] = `
       onClose={[MockFunction hooks.nullMethod]}
       show={false}
     >
-      <FormattedMessage
-        defaultMessage="Error: Could Not Load Text Content"
-        description="Error Message Dispayed When HTML content fails to Load"
-        id="authoring.texteditor.load.error"
-      />
+      Error: Could Not Load Text Content
     </Toast>
     <div
       className="text-center p-6"
@@ -175,11 +163,7 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
       onClose={[MockFunction hooks.nullMethod]}
       show={false}
     >
-      <FormattedMessage
-        defaultMessage="Error: Could Not Load Text Content"
-        description="Error Message Dispayed When HTML content fails to Load"
-        id="authoring.texteditor.load.error"
-      />
+      Error: Could Not Load Text Content
     </Toast>
     <TinyMceWidget
       disabled={false}
@@ -232,11 +216,7 @@ exports[`TextEditor snapshots renders static images with relative paths 1`] = `
       onClose={[MockFunction hooks.nullMethod]}
       show={false}
     >
-      <FormattedMessage
-        defaultMessage="Error: Could Not Load Text Content"
-        description="Error Message Dispayed When HTML content fails to Load"
-        id="authoring.texteditor.load.error"
-      />
+      Error: Could Not Load Text Content
     </Toast>
     <TinyMceWidget
       disabled={false}

src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,7 @@ import {
   Spinner,
   Toast,
 } from '@openedx/paragon';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from '../../data/redux';
 import { RequestKeys } from '../../data/constants/requests';
@@ -78,7 +78,7 @@ const TextEditor = ({
     >
       <div className="editor-body h-75 overflow-auto">
         <Toast show={blockFailed} onClose={hooks.nullMethod}>
-          <FormattedMessage {...messages.couldNotLoadTextContext} />
+          { intl.formatMessage(messages.couldNotLoadTextContext) }
         </Toast>
 
         {(!blockFinished)
@@ -111,7 +111,7 @@ TextEditor.propTypes = {
   initializeEditor: PropTypes.func.isRequired,
   showRawEditor: PropTypes.bool.isRequired,
   blockFinished: PropTypes.bool,
-  learningContextId: PropTypes.string.isRequired,
+  learningContextId: PropTypes.string, // This should be required but is NULL when the store is in initial state :/
   images: PropTypes.shape({}).isRequired,
   isLibrary: PropTypes.bool.isRequired,
   // inject

src/editors/containers/TextEditor/index.jsx

@@ -42,10 +42,9 @@ export const returnUrl = createSelector(
 
 export const isInitialized = createSelector(
   [
-    module.simpleSelectors.unitUrl,
     module.simpleSelectors.blockValue,
   ],
-  (unitUrl, blockValue) => !!(unitUrl && blockValue),
+  (blockValue) => !!(blockValue),
 );
 
 export const displayTitle = createSelector(