diff --git a/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap
index f1383f015..e0418abca 100644
--- a/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap
@@ -12,6 +12,18 @@ exports[`ProblemEditor snapshots assets loaded, block and studio view not yet lo
`;
+exports[`ProblemEditor snapshots block failed, message appears 1`] = `
+
+
+
+`;
+
exports[`ProblemEditor snapshots block loaded, studio view and assets not yet loaded, Spinner appears 1`] = `
+
+
+
`;
exports[`ProblemEditor snapshots renders SelectTypeModal 1`] = `
diff --git a/src/editors/containers/ProblemEditor/index.jsx b/src/editors/containers/ProblemEditor/index.jsx
index 22f16e90b..7327f07c5 100644
--- a/src/editors/containers/ProblemEditor/index.jsx
+++ b/src/editors/containers/ProblemEditor/index.jsx
@@ -2,22 +2,30 @@ import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Spinner } from '@edx/paragon';
-import { injectIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
import SelectTypeModal from './components/SelectTypeModal';
import EditProblemView from './components/EditProblemView';
import { selectors, thunkActions } from '../../data/redux';
import { RequestKeys } from '../../data/constants/requests';
+import messages from './messages';
export const ProblemEditor = ({
onClose,
// Redux
problemType,
blockFinished,
+ blockFailed,
studioViewFinished,
blockValue,
initializeProblemEditor,
assetsFinished,
}) => {
+ React.useEffect(() => {
+ if (blockFinished && studioViewFinished && assetsFinished && !blockFailed) {
+ initializeProblemEditor(blockValue);
+ }
+ }, [blockFinished, studioViewFinished, assetsFinished, blockFailed]);
+
if (!blockFinished || !studioViewFinished || !assetsFinished) {
return (
@@ -29,9 +37,14 @@ export const ProblemEditor = ({
);
}
- // once data is loaded, init store
- React.useEffect(() => initializeProblemEditor(blockValue), []);
- // TODO: INTL MSG, Add LOAD FAILED ERROR using BLOCKFAILED
+
+ if (blockFailed) {
+ return (
+
+
+
+ );
+ }
if (problemType === null) {
return ();
@@ -47,6 +60,7 @@ ProblemEditor.propTypes = {
// redux
assetsFinished: PropTypes.bool,
blockFinished: PropTypes.bool.isRequired,
+ blockFailed: PropTypes.bool.isRequired,
studioViewFinished: PropTypes.bool.isRequired,
problemType: PropTypes.string.isRequired,
initializeProblemEditor: PropTypes.func.isRequired,
@@ -55,6 +69,7 @@ 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),
diff --git a/src/editors/containers/ProblemEditor/index.test.jsx b/src/editors/containers/ProblemEditor/index.test.jsx
index 70603a3ed..1563f2245 100644
--- a/src/editors/containers/ProblemEditor/index.test.jsx
+++ b/src/editors/containers/ProblemEditor/index.test.jsx
@@ -31,7 +31,8 @@ jest.mock('../../data/redux', () => ({
problemType: jest.fn(state => ({ problemType: state })),
},
requests: {
- isFinished: jest.fn((state, params) => ({ isFailed: { state, params } })),
+ isFinished: jest.fn((state, params) => ({ isFinished: { state, params } })),
+ isFailed: jest.fn((state, params) => ({ isFailed: { state, params } })),
},
},
}));
@@ -43,6 +44,7 @@ describe('ProblemEditor', () => {
problemType: null,
blockValue: { data: { data: 'eDiTablE Text' } },
blockFinished: false,
+ blockFailed: false,
studioViewFinished: false,
initializeProblemEditor: jest.fn().mockName('args.intializeProblemEditor'),
assetsFinished: false,
@@ -60,6 +62,15 @@ describe('ProblemEditor', () => {
test('assets loaded, block and studio view not yet loaded, Spinner appears', () => {
expect(shallow()).toMatchSnapshot();
});
+ test('block failed, message appears', () => {
+ expect(shallow()).toMatchSnapshot();
+ });
test('renders SelectTypeModal', () => {
expect(shallow()).toMatchSnapshot();
});
@@ -68,6 +79,7 @@ describe('ProblemEditor', () => {
{...props}
problemType="multiplechoiceresponse"
blockFinished
+ blockFailed
studioViewFinished
assetsFinished
/>)).toMatchSnapshot();
diff --git a/src/editors/containers/ProblemEditor/messages.js b/src/editors/containers/ProblemEditor/messages.js
new file mode 100644
index 000000000..ed4cdfd5a
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/messages.js
@@ -0,0 +1,9 @@
+export const messages = {
+ blockFailed: {
+ id: 'authoring.problemEditor.blockFailed',
+ defaultMessage: 'Problem failed to load',
+ description: 'Error message for problem block failing to load',
+ },
+};
+
+export default messages;