Merge pull request #488 from openedx/revert-484-KristinAoki/improve-asset-loading

Revert "feat: improve asset loading"

Author: bszabo

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js

@@ -39,23 +39,19 @@ export const setAnswerTitle = ({
 };
 
 export const setSelectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (e) => {
-  if (e.target) {
-    dispatch(actions.problem.updateAnswer({
-      id: answer.id,
-      hasSingleAnswer,
-      selectedFeedback: e.target.value,
-    }));
-  }
+  dispatch(actions.problem.updateAnswer({
+    id: answer.id,
+    hasSingleAnswer,
+    selectedFeedback: e.target.value,
+  }));
 };
 
 export const setUnselectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (e) => {
-  if (e.target) {
-    dispatch(actions.problem.updateAnswer({
-      id: answer.id,
-      hasSingleAnswer,
-      unselectedFeedback: e.target.value,
-    }));
-  }
+  dispatch(actions.problem.updateAnswer({
+    id: answer.id,
+    hasSingleAnswer,
+    unselectedFeedback: e.target.value,
+  }));
 };
 
 export const useFeedback = (answer) => {

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

@@ -23,7 +23,7 @@ exports[`SolutionWidget render snapshot: renders correct default 1`] = `
     />
   </div>
   <[object Object]
-    editorContentHtml="This is my solution"
+    editorContentHtml="This is my question"
     editorType="solution"
     id="solution"
     minHeight={150}

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx

@@ -6,20 +6,15 @@ import { selectors } from '../../../../../data/redux';
 import messages from './messages';
 
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
-import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
+import { prepareEditorRef } from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
 export const ExplanationWidget = ({
   // redux
   settings,
-  learningContextId,
   // injected
   intl,
 }) => {
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
-  const solutionContent = replaceStaticWithAsset({
-    initialContent: settings?.solutionExplanation,
-    learningContextId,
-  });
   if (!refReady) { return null; }
   return (
     <div className="tinyMceWidget mt-4 text-primary-500">
@@ -33,7 +28,7 @@ export const ExplanationWidget = ({
         id="solution"
         editorType="solution"
         editorRef={editorRef}
-        editorContentHtml={solutionContent}
+        editorContentHtml={settings?.solutionExplanation}
         setEditorRef={setEditorRef}
         minHeight={150}
         placeholder={intl.formatMessage(messages.placeholder)}
@@ -46,13 +41,11 @@ ExplanationWidget.propTypes = {
   // redux
   // eslint-disable-next-line
   settings: PropTypes.any.isRequired,
-  learningContextId: PropTypes.string.isRequired,
   // injected
   intl: intlShape.isRequired,
 };
 export const mapStateToProps = (state) => ({
   settings: selectors.problem.settings(state),
-  learningContextId: selectors.app.learningContextId(state),
 });
 
 export default injectIntl(connect(mapStateToProps)(ExplanationWidget));

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

@@ -12,9 +12,6 @@ jest.mock('../../../../../data/redux', () => ({
     problem: {
       settings: jest.fn(state => ({ question: state })),
     },
-    app: {
-      learningContextId: jest.fn(state => ({ learningContextId: state })),
-    },
   },
   thunkActions: {
     video: {
@@ -28,13 +25,11 @@ jest.mock('../../../../../sharedComponents/TinyMceWidget/hooks', () => ({
     refReady: true,
     setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
   })),
-  replaceStaticWithAsset: jest.fn(() => 'This is my solution'),
 }));
 
 describe('SolutionWidget', () => {
   const props = {
-    settings: { solutionExplanation: 'This is my solution' },
-    learningContextId: 'course+org+run',
+    settings: { solutionExplanation: 'This is my question' },
     // injected
     intl: { formatMessage },
   };
@@ -45,11 +40,8 @@ describe('SolutionWidget', () => {
   });
   describe('mapStateToProps', () => {
     const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
-    test('settings from problem.settings', () => {
+    test('question from problem.question', () => {
       expect(mapStateToProps(testState).settings).toEqual(selectors.problem.settings(testState));
     });
-    test('learningContextId from app.learningContextId', () => {
-      expect(mapStateToProps(testState).learningContextId).toEqual(selectors.app.learningContextId(testState));
-    });
   });
 });

src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx

@@ -6,20 +6,15 @@ import { selectors } from '../../../../../data/redux';
 import messages from './messages';
 
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
-import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
+import { prepareEditorRef } from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
 export const QuestionWidget = ({
   // redux
   question,
-  learningContextId,
   // injected
   intl,
 }) => {
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
-  const questionContent = replaceStaticWithAsset({
-    initialContent: question,
-    learningContextId,
-  });
   if (!refReady) { return null; }
   return (
     <div className="tinyMceWidget">
@@ -30,7 +25,7 @@ export const QuestionWidget = ({
         id="question"
         editorType="question"
         editorRef={editorRef}
-        editorContentHtml={questionContent}
+        editorContentHtml={question}
         setEditorRef={setEditorRef}
         minHeight={150}
         placeholder={intl.formatMessage(messages.placeholder)}
@@ -42,13 +37,11 @@ export const QuestionWidget = ({
 QuestionWidget.propTypes = {
   // redux
   question: PropTypes.string.isRequired,
-  learningContextId: PropTypes.string.isRequired,
   // injected
   intl: intlShape.isRequired,
 };
 export const mapStateToProps = (state) => ({
   question: selectors.problem.question(state),
-  learningContextId: selectors.app.learningContextId(state),
 });
 
 export default injectIntl(connect(mapStateToProps)(QuestionWidget));

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

@@ -15,7 +15,9 @@ jest.mock('../../../../../data/redux', () => ({
   },
   selectors: {
     app: {
-      learningContextId: jest.fn(state => ({ learningContextId: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+      lmsEndpointUrl: jest.fn(state => ({ lmsEndpointUrl: state })),
+      studioEndpointUrl: jest.fn(state => ({ studioEndpointUrl: state })),
     },
     problem: {
       question: jest.fn(state => ({ question: state })),
@@ -33,14 +35,13 @@ jest.mock('../../../../../sharedComponents/TinyMceWidget/hooks', () => ({
     refReady: true,
     setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
   })),
-  replaceStaticWithAsset: jest.fn(() => 'This is my question'),
+  // problemEditorConfig: jest.fn(args => ({ problemEditorConfig: args })),
 }));
 
 describe('QuestionWidget', () => {
   const props = {
     question: 'This is my question',
     updateQuestion: jest.fn(),
-    learningContextId: 'course+org+run',
     // injected
     intl: { formatMessage },
   };
@@ -54,8 +55,5 @@ describe('QuestionWidget', () => {
     test('question from problem.question', () => {
       expect(mapStateToProps(testState).question).toEqual(selectors.problem.question(testState));
     });
-    test('learningContextId from app.learningContextId', () => {
-      expect(mapStateToProps(testState).learningContextId).toEqual(selectors.app.learningContextId(testState));
-    });
   });
 });

src/editors/containers/ProblemEditor/components/EditProblemView/hooks.js

@@ -56,13 +56,14 @@ export const parseState = ({
   problem,
   isAdvanced,
   ref,
+  assets,
   lmsEndpointUrl,
 }) => () => {
   const rawOLX = ref?.current?.state.doc.toString();
   const editorObject = fetchEditorContent({ format: '' });
   const reactOLXParser = new ReactStateOLXParser({ problem, editorObject });
   const reactSettingsParser = new ReactStateSettingsParser({ problem, rawOLX });
-  const reactBuiltOlx = setAssetToStaticUrl({ editorValue: reactOLXParser.buildOLX(), lmsEndpointUrl });
+  const reactBuiltOlx = setAssetToStaticUrl({ editorValue: reactOLXParser.buildOLX(), assets, lmsEndpointUrl });
   return {
     settings: isAdvanced ? reactSettingsParser.parseRawOlxSettings() : reactSettingsParser.getSettings(),
     olx: isAdvanced ? rawOLX : reactBuiltOlx,
@@ -142,6 +143,7 @@ export const getContent = ({
   openSaveWarningModal,
   isAdvancedProblemType,
   editorRef,
+  assets,
   lmsEndpointUrl,
 }) => {
   const problem = problemState;
@@ -159,6 +161,7 @@ export const getContent = ({
       isAdvanced: isAdvancedProblemType,
       ref: editorRef,
       problem,
+      assets,
       lmsEndpointUrl,
     })();
     return data;

src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx

@@ -29,6 +29,7 @@ export const EditProblemView = ({
   // redux
   problemType,
   problemState,
+  assets,
   lmsEndpointUrl,
   returnUrl,
   analytics,
@@ -47,6 +48,7 @@ export const EditProblemView = ({
         openSaveWarningModal,
         isAdvancedProblemType,
         editorRef,
+        assets,
         lmsEndpointUrl,
       })}
       returnFunction={returnFunction}
@@ -68,6 +70,7 @@ export const EditProblemView = ({
                   problem: problemState,
                   isAdvanced: isAdvancedProblemType,
                   ref: editorRef,
+                  assets,
                   lmsEndpointUrl,
                 })(),
                 returnFunction,
@@ -115,6 +118,7 @@ export const EditProblemView = ({
 };
 
 EditProblemView.defaultProps = {
+  assets: null,
   lmsEndpointUrl: null,
   returnFunction: null,
 };
@@ -124,6 +128,7 @@ EditProblemView.propTypes = {
   returnFunction: PropTypes.func,
   // eslint-disable-next-line
   problemState: PropTypes.any.isRequired,
+  assets: PropTypes.shape({}),
   analytics: PropTypes.shape({}).isRequired,
   lmsEndpointUrl: PropTypes.string,
   returnUrl: PropTypes.string.isRequired,
@@ -132,6 +137,7 @@ EditProblemView.propTypes = {
 };
 
 export const mapStateToProps = (state) => ({
+  assets: selectors.app.assets(state),
   analytics: selectors.app.analytics(state),
   lmsEndpointUrl: selectors.app.lmsEndpointUrl(state),
   returnUrl: selectors.app.returnUrl(state),

src/editors/containers/ProblemEditor/index.jsx

@@ -16,17 +16,19 @@ export const ProblemEditor = ({
   problemType,
   blockFinished,
   blockFailed,
+  studioViewFinished,
   blockValue,
   initializeProblemEditor,
+  assetsFinished,
   advancedSettingsFinished,
 }) => {
   React.useEffect(() => {
-    if (blockFinished && !blockFailed) {
+    if (blockFinished && studioViewFinished && assetsFinished && !blockFailed) {
       initializeProblemEditor(blockValue);
     }
-  }, [blockFinished, blockFailed]);
+  }, [blockFinished, studioViewFinished, assetsFinished, blockFailed]);
 
-  if (!blockFinished || !advancedSettingsFinished) {
+  if (!blockFinished || !studioViewFinished || !assetsFinished || !advancedSettingsFinished) {
     return (
       <div className="text-center p-6">
         <Spinner
@@ -53,15 +55,18 @@ export const ProblemEditor = ({
 };
 
 ProblemEditor.defaultProps = {
+  assetsFinished: null,
   returnFunction: null,
 };
 ProblemEditor.propTypes = {
   onClose: PropTypes.func.isRequired,
   returnFunction: PropTypes.func,
   // redux
+  assetsFinished: PropTypes.bool,
   advancedSettingsFinished: PropTypes.bool.isRequired,
   blockFinished: PropTypes.bool.isRequired,
   blockFailed: PropTypes.bool.isRequired,
+  studioViewFinished: PropTypes.bool.isRequired,
   problemType: PropTypes.string.isRequired,
   initializeProblemEditor: PropTypes.func.isRequired,
   blockValue: PropTypes.objectOf(PropTypes.shape({})).isRequired,
@@ -70,8 +75,10 @@ ProblemEditor.propTypes = {
 export const mapStateToProps = (state) => ({
   blockFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
   blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
+  studioViewFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchStudioView }),
   problemType: selectors.problem.problemType(state),
   blockValue: selectors.app.blockValue(state),
+  assetsFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAssets }),
   advancedSettingsFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAdvancedSettings }),
 });