fix: Schedule and Details page was not loading (#1527)

The page relied on obscure behavior of setting "isLibrary" to disable image uploads even in a course context. This commit refactors to use an explicit enableImageUpload prop in TinyMceWidget.

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/__snapshots__/index.test.jsx.snap

@@ -27,6 +27,7 @@ exports[`SolutionWidget render snapshot: renders correct default 1`] = `
     editorContentHtml="This is my solution"
     editorRef={null}
     editorType="solution"
+    enableImageUpload={true}
     id="solution"
     images={{}}
     isLibrary={false}

src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap

@@ -18,6 +18,7 @@ exports[`QuestionWidget render snapshot: renders correct default 1`] = `
     editorContentHtml="This is my question"
     editorRef={null}
     editorType="question"
+    enableImageUpload={true}
     id="question"
     images={{}}
     isLibrary={false}

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

@@ -49,6 +49,7 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
         }
       }
       editorType="text"
+      enableImageUpload={true}
       height="100%"
       id={null}
       images={{}}
@@ -224,6 +225,7 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
         }
       }
       editorType="text"
+      enableImageUpload={true}
       height="100%"
       id={null}
       images={{}}
@@ -289,6 +291,7 @@ exports[`TextEditor snapshots renders static images with relative paths 1`] = `
         }
       }
       editorType="text"
+      enableImageUpload={true}
       height="100%"
       id={null}
       images={{}}

src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap

@@ -26,6 +26,7 @@ exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
           },
         },
         "editorType": "text",
+        "enableImageUpload": false,
         "images": {
           "current": [
             {
@@ -34,8 +35,7 @@ exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
           ],
         },
         "initializeEditor": undefined,
-        "isLibrary": false,
-        "learningContextId": "library-v1:org+t01",
+        "learningContextId": "course+org+run",
         "lmsEndpointUrl": "sOmEvaLue.cOm",
         "minHeight": undefined,
         "openImgModal": [MockFunction modal.openModal],
@@ -96,6 +96,7 @@ exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
           },
         },
         "editorType": "problem",
+        "enableImageUpload": true,
         "images": {
           "current": [
             {
@@ -104,7 +105,6 @@ exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
           ],
         },
         "initializeEditor": undefined,
-        "isLibrary": false,
         "learningContextId": "course+org+run",
         "lmsEndpointUrl": "sOmEvaLue.cOm",
         "minHeight": undefined,
@@ -177,6 +177,7 @@ exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] =
           },
         },
         "editorType": "text",
+        "enableImageUpload": true,
         "images": {
           "current": [
             {
@@ -185,7 +186,6 @@ exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] =
           ],
         },
         "initializeEditor": undefined,
-        "isLibrary": false,
         "learningContextId": "course+org+run",
         "lmsEndpointUrl": "sOmEvaLue.cOm",
         "minHeight": undefined,

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -280,6 +280,7 @@ export const editorConfig = ({
   minHeight,
   learningContextId,
   staticRootUrl,
+  enableImageUpload,
 }) => {
   const lmsEndpointUrl = getConfig().LMS_BASE_URL;
   const studioEndpointUrl = getConfig().STUDIO_BASE_URL;
@@ -292,7 +293,7 @@ export const editorConfig = ({
     imageToolbar,
     quickbarsInsertToolbar,
     quickbarsSelectionToolbar,
-  } = pluginConfig({ learningContextId, placeholder, editorType });
+  } = pluginConfig({ placeholder, editorType, enableImageUpload });
   const isLocaleRtl = isRtl(getLocale());
   return {
     onInit: (evt, editor) => {

src/editors/sharedComponents/TinyMceWidget/index.jsx

@@ -43,6 +43,7 @@ const TinyMceWidget = ({
   editorContentHtml, // editorContent in html form
   learningContextId,
   images,
+  enableImageUpload,
   isLibrary,
   onChange,
   staticRootUrl,
@@ -55,7 +56,7 @@ const TinyMceWidget = ({
 
   return (
     <>
-      {!isLibraryV1Key(learningContextId) && (
+      {enableImageUpload && (
         <ImageUploadModal
           isOpen={isImgOpen}
           close={closeImgModal}
@@ -84,7 +85,7 @@ const TinyMceWidget = ({
             openSourceCodeModal,
             editorType,
             editorRef,
-            isLibrary,
+            enableImageUpload: isLibraryV1Key(learningContextId) ? false : enableImageUpload,
             learningContextId,
             images: imagesRef,
             editorContentHtml,
@@ -108,6 +109,7 @@ TinyMceWidget.defaultProps = {
   disabled: false,
   editorContentHtml: undefined,
   updateContent: undefined,
+  enableImageUpload: true,
   onChange: () => ({}),
   ...editorConfigDefaultProps,
 };
@@ -123,6 +125,7 @@ TinyMceWidget.propTypes = {
   disabled: PropTypes.bool,
   editorContentHtml: PropTypes.string,
   updateContent: PropTypes.func,
+  enableImageUpload: PropTypes.bool,
   onChange: PropTypes.func,
   ...editorConfigPropTypes,
 };

src/editors/sharedComponents/TinyMceWidget/index.test.jsx

@@ -74,7 +74,7 @@ describe('TinyMceWidget', () => {
       expect(wrapper.instance.findByType(SourceCodeModal).length).toBe(0);
     });
     test('ImageUploadModal is not rendered', () => {
-      const wrapper = shallow(<TinyMceWidget {...props} learningContextId="library-v1:org+t01" />);
+      const wrapper = shallow(<TinyMceWidget {...props} enableImageUpload={false} />);
       expect(wrapper.snapshot).toMatchSnapshot();
       expect(wrapper.instance.findByType(ImageUploadModal).length).toBe(0);
     });

src/editors/sharedComponents/TinyMceWidget/pluginConfig.js

@@ -1,14 +1,13 @@
-import { isLibraryV1Key } from '../../../generic/key-utils';
 import { StrictDict } from '../../utils';
 import { buttons, plugins } from '../../data/constants/tinyMCE';
 
 const mapToolbars = toolbars => toolbars.map(toolbar => toolbar.join(' ')).join(' | ');
 
-const pluginConfig = ({ learningContextId, placeholder, editorType }) => {
-  const image = isLibraryV1Key(learningContextId) ? '' : plugins.image;
-  const imageTools = isLibraryV1Key(learningContextId) ? '' : plugins.imagetools;
-  const imageUploadButton = isLibraryV1Key(learningContextId) ? '' : buttons.imageUploadButton;
-  const editImageSettings = isLibraryV1Key(learningContextId) ? '' : buttons.editImageSettings;
+const pluginConfig = ({ placeholder, editorType, enableImageUpload }) => {
+  const image = enableImageUpload ? plugins.image : '';
+  const imageTools = enableImageUpload ? plugins.imagetools : '';
+  const imageUploadButton = enableImageUpload ? buttons.imageUploadButton : '';
+  const editImageSettings = enableImageUpload ? buttons.editImageSettings : '';
   const codePlugin = editorType === 'text' ? plugins.code : '';
   const codeButton = editorType === 'text' ? buttons.code : '';
   const labelButton = editorType === 'question' ? buttons.customLabelButton : '';

src/generic/WysiwygEditor.jsx

@@ -59,7 +59,7 @@ export const WysiwygEditor = ({
       initializeEditor={() => ({})}
       learningContextId={courseId}
       images={{}}
-      isLibrary
+      enableImageUpload={false}
       onEditorChange={() => ({})}
     />
   );