feat: allowing studio asides for course-authoring MFE

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

@@ -36,6 +36,8 @@
   updateField,
   updateAnswer,
   defaultSettings,
+  asidesURL,
+  asidesEnabled,
 }) => {
   const { isAdvancedCardsVisible, showAdvancedCards } = showAdvancedSettingsCards();
 
@@ -88,6 +90,17 @@
         <HintsCard problemType={problemType} hints={settings.hints} updateSettings={updateSettings} />
       </div>
       {feedbackCard()}
+      {asidesEnabled && (
+      <div>
+        <iframe
+          title="asides-iframe"
+          src={asidesURL}
+          allowFullScreen
+          frameBorder="0"
+          width={500}
+        />
+      </div>
+      )}
       <div>
         <Collapsible.Advanced open={!isAdvancedCardsVisible}>
           <Collapsible.Body className="collapsible-body small">
@@ -174,6 +187,8 @@
   }).isRequired,
   // eslint-disable-next-line
   settings: PropTypes.any.isRequired,
+  asidesURL: PropTypes.string.isRequired,
+  asidesEnabled: PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = (state) => ({
@@ -183,6 +198,10 @@
   blockTitle: selectors.app.blockTitle(state),
   correctAnswerCount: selectors.problem.correctAnswerCount(state),
   defaultSettings: selectors.problem.defaultSettings(state),
+  asidesURL: `${selectors.app.studioEndpointUrl(state)
+  }/asides/${
+    selectors.app.blockId(state)}`,
+  asidesEnabled: selectors.problem.hasAsides(state),
 });
 
 export const mapDispatchToProps = {

src/editors/data/redux/problem/selectors.js

@@ -12,6 +12,7 @@
   settings: mkSimpleSelector(problemData => problemData.settings),
   question: mkSimpleSelector(problemData => problemData.question),
   defaultSettings: mkSimpleSelector(problemData => problemData.defaultSettings),
+  hasAsides: mkSimpleSelector(problemData => problemData.hasAsides),
   completeState: mkSimpleSelector(problemData => problemData),
 };
 

src/editors/data/redux/thunkActions/problem.js

@@ -47,15 +47,22 @@ export const getDataFromOlx = ({ rawOLX, rawSettings, defaultSettings }) => {
   return { settings: parsedSettings };
 };
 
-export const loadProblem = ({ rawOLX, rawSettings, defaultSettings }) => (dispatch) => {
+export const loadProblem = ({
+  rawOLX, rawSettings, hasAsides, defaultSettings,
+}) => (dispatch) => {
   if (isBlankProblem({ rawOLX })) {
     dispatch(actions.problem.setEnableTypeSelection(camelizeKeys(defaultSettings)));
   } else {
-    dispatch(actions.problem.load(getDataFromOlx({ rawOLX, rawSettings, defaultSettings })));
+    dispatch(actions.problem.load({
+      ...getDataFromOlx({
+        rawOLX, rawSettings, hasAsides, defaultSettings,
+      }),
+      hasAsides,
+    }));
   }
 };
 
-export const fetchAdvancedSettings = ({ rawOLX, rawSettings }) => (dispatch) => {
+export const fetchAdvancedSettings = ({ rawOLX, rawSettings, hasAsides }) => (dispatch) => {
   const advancedProblemSettingKeys = ['max_attempts', 'showanswer', 'show_reset_button', 'rerandomize'];
   dispatch(requests.fetchAdvancedSettings({
     onSuccess: (response) => {
@@ -66,16 +73,23 @@ export const fetchAdvancedSettings = ({ rawOLX, rawSettings }) => (dispatch) =>
         }
       });
       dispatch(actions.problem.updateField({ defaultSettings: camelizeKeys(defaultSettings) }));
-      loadProblem({ rawOLX, rawSettings, defaultSettings })(dispatch);
+      loadProblem({
+        rawOLX, rawSettings, hasAsides, defaultSettings,
+      })(dispatch);
+    },
+    onFailure: () => {
+      loadProblem({
+        rawOLX, rawSettings, hasAsides, defaultSettings: {},
+      })(dispatch);
     },
-    onFailure: () => { loadProblem({ rawOLX, rawSettings, defaultSettings: {} })(dispatch); },
   }));
 };
 
 export const initializeProblem = (blockValue) => (dispatch) => {
   const rawOLX = _.get(blockValue, 'data.data', {});
   const rawSettings = _.get(blockValue, 'data.metadata', {});
-  dispatch(fetchAdvancedSettings({ rawOLX, rawSettings }));
+  const hasAsides = _.get(blockValue, 'data.has_cms_asides', false);
+  dispatch(fetchAdvancedSettings({ rawOLX, rawSettings, hasAsides }));
 };
 
 export default { initializeProblem, switchToAdvancedEditor, fetchAdvancedSettings };