diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.jsx index bc77182506..c39ac9a9ce 100644 --- a/src/courseware/course/sequence/Unit/ContentIFrame.jsx +++ b/src/courseware/course/sequence/Unit/ContentIFrame.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; -import { ErrorPage } from '@edx/frontend-platform/react'; import { ModalDialog } from '@openedx/paragon'; import { ContentIFrameLoaderSlot } from '../../../../plugin-slots/ContentIFrameLoaderSlot'; +import { ContentIFrameErrorSlot } from '../../../../plugin-slots/ContentIFrameErrorSlot'; import * as hooks from './hooks'; @@ -66,7 +66,11 @@ const ContentIFrame = ({ return ( <> {(shouldShowContent && !hasLoaded) && ( - showError ? : + showError ? ( + + ) : ( + + ) )} {shouldShowContent && (
diff --git a/src/plugin-slots/ContentIFrameErrorSlot/README.md b/src/plugin-slots/ContentIFrameErrorSlot/README.md new file mode 100644 index 0000000000..e3bd0b4236 --- /dev/null +++ b/src/plugin-slots/ContentIFrameErrorSlot/README.md @@ -0,0 +1,39 @@ +# Content iFrame Error Slot + +### Slot ID: `org.openedx.frontend.learning.content_iframe_error.v1` + +### Parameters: `courseId` + +## Description + +This slot is used to replace/modify the content iframe error page. + +## Example + +The following `env.config.jsx` will replace the error page with emojis. + +```js +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + 'org.openedx.frontend.learning.content_iframe_error.v1': { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_error_page', + type: DIRECT_PLUGIN, + RenderWidget: ({courseId}) => ( +

🚨🤖💥

+ ), + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/ContentIFrameErrorSlot/index.tsx b/src/plugin-slots/ContentIFrameErrorSlot/index.tsx new file mode 100644 index 0000000000..1202e4a333 --- /dev/null +++ b/src/plugin-slots/ContentIFrameErrorSlot/index.tsx @@ -0,0 +1,15 @@ +import { PluginSlot } from '@openedx/frontend-plugin-framework'; +import { ErrorPage } from '@edx/frontend-platform/react'; + +interface Props { + courseId: string; +} + +export const ContentIFrameErrorSlot : React.FC = ({ courseId }: Props) => ( + + + +);