Open Editors in a Modal (library components only) [FC-0062]

src/editors/EditorContext.tsx

@@ -23,6 +23,7 @@ const context = React.createContext<EditorContext | undefined>(undefined);
 export function useEditorContext() {
  const ctx = React.useContext(context);
  if (ctx === undefined) {
+ /* istanbul ignore next */
  throw new Error('This component needs to be wrapped in <EditorContextProvider>');
  }
  return ctx;

src/editors/EditorPage.tsx

@@ -14,6 +14,7 @@ interface Props extends EditorComponent {
  lmsEndpointUrl?: string;
  studioEndpointUrl?: string;
  fullScreen?: boolean;
+ children?: never;
 }
 
 /**

src/editors/containers/EditorContainer/hooks.test.jsx

@@ -118,6 +118,7 @@ describe('EditorContainer hooks', () => {
  destination: reactRedux.useSelector(selectors.app.returnUrl),
  analyticsEvent: analyticsEvt.editorCancelClick,
  analytics: reactRedux.useSelector(selectors.app.analytics),
+ returnFunction: null,
  }),
  );
  });

src/editors/containers/EditorContainer/hooks.ts

@@ -50,7 +50,13 @@ export const cancelConfirmModalToggle = () => {
  };
 };
 
-export const handleCancel = ({ onClose, returnFunction }) => {
+export const handleCancel = ({
+ onClose = null,
+ returnFunction = null,
+}: {
+ onClose?: (() => void) | null;
+ returnFunction?: (() => (result: any) => void) | null;
+}): ((result?: any) => void) => {
  if (onClose) {
  return onClose;
  }

src/editors/containers/EditorContainer/index.test.tsx

@@ -68,6 +68,12 @@ describe('EditorContainer', () => {
  fireEvent.click(closeButton);
  // Now we should see the confirmation message:
  expect(await screen.findByText(confirmMessage)).toBeInTheDocument();
+
+ expect(defaultPropsHtml.onClose).not.toHaveBeenCalled();
+ // And can confirm the cancelation:
+ const confirmButton = await screen.findByRole('button', { name: 'OK' });
+ fireEvent.click(confirmButton);
+ expect(defaultPropsHtml.onClose).toHaveBeenCalled();
  });
 
  test('it disables the save button until the fields have been loaded', async () => {

src/editors/containers/EditorContainer/index.tsx

@@ -22,11 +22,11 @@
 import './index.scss';
 
 interface WrapperProps {
- fullScreen: boolean;
  children: React.ReactNode;
 }
 
-const OuterWrapper: React.FC<WrapperProps> = ({ fullScreen, children }) => {
+export const EditorModalWrapper: React.FC<WrapperProps> = ({ children }) => {
+ const { fullScreen } = useEditorContext();
  if (fullScreen) {
  return (
  <div
@@ -42,7 +42,13 @@
  );
 };
 
-const FooterWrapper: React.FC<WrapperProps> = ({ fullScreen, children }) => {
+export const EditorModalBody: React.FC<WrapperProps> = ({ children }) => {
+ const { fullScreen } = useEditorContext();
+ return <ModalDialog.Body className={fullScreen ? 'pb-6' : 'pb-0'}>{ children }</ModalDialog.Body>;
+};
+
+export const FooterWrapper: React.FC<WrapperProps> = ({ children }) => {
+ const { fullScreen } = useEditorContext();
  if (fullScreen) {
  return <div className="editor-footer fixed-bottom">{children}</div>;
  }
@@ -65,7 +71,6 @@
 }) => {
  const intl = useIntl();
  const dispatch = useDispatch();
- const { fullScreen } = useEditorContext();
  const isInitialized = hooks.isInitialized();
  const { isCancelConfirmOpen, openCancelConfirmModal, closeCancelConfirmModal } = hooks.cancelConfirmModalToggle();
  const handleCancel = hooks.handleCancel({ onClose, returnFunction });
@@ -79,9 +84,9 @@
  returnFunction,
  });
  return (
- <OuterWrapper fullScreen={fullScreen}>
+ <EditorModalWrapper>
  {saveFailed && (
  <Toast show onClose={clearSaveFailed}>
  <FormattedMessage {...messages.contentSaveFailed} />
  </Toast>
  )}
@@ -93,7 +98,7 @@
  onClick={() => {
  handleCancel();
  if (returnFunction) {
  closeCancelConfirmModal();
  }
  }}
  >
@@ -119,10 +124,10 @@
  />
  </div>
  </ModalDialog.Header>
- <ModalDialog.Body className={`pb-0 ${fullScreen ? 'mb-6' : ''}`}>
+ <EditorModalBody>
  {isInitialized && children}
- </ModalDialog.Body>
- <FooterWrapper fullScreen={fullScreen}>
+ </EditorModalBody>
+ <FooterWrapper>
  <ModalDialog.Footer className="shadow-sm">
  <ActionRow>
  <Button
@@ -144,7 +149,7 @@
  </ActionRow>
  </ModalDialog.Footer>
  </FooterWrapper>
- </OuterWrapper>
+ </EditorModalWrapper>
  );
 };
 

src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectTypeWrapper snapshot 1`] = `
+<EditorModalWrapper>
+ <ModalDialog.Header
+ className="shadow-sm zindex-10"
+ >
+ <ModalDialog.Title>
+ <FormattedMessage
+ defaultMessage="Select problem type"
+ description="Title for select problem type modal"
+ id="authoring.problemEditor.selectType.title"
+ />
+ <div
+ className="pgn__modal-close-container"
+ >
+ <IconButton
+ alt="Exit the editor"
+ iconAs="Icon"
+ src={[MockFunction icons.Close]}
+ />
+ </div>
+ </ModalDialog.Title>
+ </ModalDialog.Header>
+ <EditorModalBody>
+ <h1>
+ test child
+ </h1>
+ </EditorModalBody>
+ <FooterWrapper>
+ <ModalDialog.Footer
+ className="border-top-0"
+ >
+ <ActionRow>
+ <ActionRow.Spacer />
+ <Button
+ aria-label="Cancel"
+ variant="tertiary"
+ >
+ <FormattedMessage
+ defaultMessage="Cancel"
+ description="Label for cancel button."
+ id="authoring.problemeditor.selecttype.cancelButton.label"
+ />
+ </Button>
+ <Button
+ aria-label="Select"
+ disabled={false}
+ onClick={[Function]}
+ >
+ <FormattedMessage
+ defaultMessage="Select"
+ description="Label for select button."
+ id="authoring.problemeditor.selecttype.selectButton.label"
+ />
+ </Button>
+ </ActionRow>
+ </ModalDialog.Footer>
+ </FooterWrapper>
+</EditorModalWrapper>
+`;