Fix change to go back to 'fake' modal (#62)

* fix: rebase * fix: tests * fix: remove broken code button * fix: test case with iff
openedx · Apr 19, 2022 · 5200897 · 5200897
1 parent be12d11
commit 5200897
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 111 deletions.
diff --git a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
@@ -1,87 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EditorContainer component render snapshot: initialized. enable save and pass to header 1`] = `
-<FullscreenModal
-  footerNode={
-    <InjectIntl(ShimmedIntlComponent)
-      disableSave={false}
-      onCancel={
-        Object {
-          "handleCancelClicked": Object {
-            "onClose": [MockFunction props.onClose],
-          },
-        }
-      }
-      onSave={
-        Object {
-          "handleSaveClicked": Object {
-            "dispatch": [MockFunction react-redux.dispatch],
-            "getContent": [MockFunction props.getContent],
-          },
-        }
-      }
-    />
-  }
-  isOpen={true}
-  onClose={
-    Object {
-      "handleCancelClicked": Object {
-        "onClose": [MockFunction props.onClose],
-      },
-    }
-  }
-  title={
-    <InjectIntl(ShimmedIntlComponent)
-      isInitialized={true}
-    />
-  }
-  variant="primary"
->
+<div>
+  <ModalDialog.Header>
+    <ModalDialog.Title>
+      <InjectIntl(ShimmedIntlComponent)
+        isInitialized={true}
+      />
+      <div
+        className="pgn__modal-close-container"
+      >
+        <IconButton
+          iconAs="Icon"
+          onClick={[MockFunction props.onClose]}
+          src={[MockFunction icons.Close]}
+        />
+      </div>
+    </ModalDialog.Title>
+  </ModalDialog.Header>
   <h1>
     My test content
   </h1>
-</FullscreenModal>
+  <InjectIntl(ShimmedIntlComponent)
+    disableSave={false}
+    onCancel={
+      Object {
+        "handleCancelClicked": Object {
+          "onClose": [MockFunction props.onClose],
+        },
+      }
+    }
+    onSave={
+      Object {
+        "handleSaveClicked": Object {
+          "dispatch": [MockFunction react-redux.dispatch],
+          "getContent": [MockFunction props.getContent],
+        },
+      }
+    }
+  />
+</div>
 `;
 
 exports[`EditorContainer component render snapshot: not initialized. disable save and pass to header 1`] = `
-<FullscreenModal
-  footerNode={
-    <InjectIntl(ShimmedIntlComponent)
-      disableSave={true}
-      onCancel={
-        Object {
-          "handleCancelClicked": Object {
-            "onClose": [MockFunction props.onClose],
-          },
-        }
+<div>
+  <ModalDialog.Header>
+    <ModalDialog.Title>
+      <InjectIntl(ShimmedIntlComponent)
+        isInitialized={false}
+      />
+      <div
+        className="pgn__modal-close-container"
+      >
+        <IconButton
+          iconAs="Icon"
+          onClick={[MockFunction props.onClose]}
+          src={[MockFunction icons.Close]}
+        />
+      </div>
+    </ModalDialog.Title>
+  </ModalDialog.Header>
+  <InjectIntl(ShimmedIntlComponent)
+    disableSave={true}
+    onCancel={
+      Object {
+        "handleCancelClicked": Object {
+          "onClose": [MockFunction props.onClose],
+        },
       }
-      onSave={
-        Object {
-          "handleSaveClicked": Object {
-            "dispatch": [MockFunction react-redux.dispatch],
-            "getContent": [MockFunction props.getContent],
-          },
-        }
+    }
+    onSave={
+      Object {
+        "handleSaveClicked": Object {
+          "dispatch": [MockFunction react-redux.dispatch],
+          "getContent": [MockFunction props.getContent],
+        },
       }
-    />
-  }
-  isOpen={true}
-  onClose={
-    Object {
-      "handleCancelClicked": Object {
-        "onClose": [MockFunction props.onClose],
-      },
     }
-  }
-  title={
-    <InjectIntl(ShimmedIntlComponent)
-      isInitialized={false}
-    />
-  }
-  variant="primary"
->
-  <h1>
-    My test content
-  </h1>
-</FullscreenModal>
+  />
+</div>
 `;
diff --git a/...tors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap b/...tors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap
@@ -3,6 +3,12 @@
 exports[`EditorFooter render snapshot: default args (disableSave: false, saveFailed: false) 1`] = `
 <div
   className="editor-footer"
+  style={
+    Object {
+      "bottom": 0,
+      "position": "sticky",
+    }
+  }
 >
   <ModalDialog.Footer
     className="border-top-0"
@@ -39,6 +45,12 @@ exports[`EditorFooter render snapshot: default args (disableSave: false, saveFai
 exports[`EditorFooter render snapshot: save disabled. Show button spinner 1`] = `
 <div
   className="editor-footer"
+  style={
+    Object {
+      "bottom": 0,
+      "position": "sticky",
+    }
+  }
 >
   <ModalDialog.Footer
     className="border-top-0"
@@ -74,6 +86,12 @@ exports[`EditorFooter render snapshot: save disabled. Show button spinner 1`] =
 exports[`EditorFooter render snapshot: save failed.  Show error message 1`] = `
 <div
   className="editor-footer"
+  style={
+    Object {
+      "bottom": 0,
+      "position": "sticky",
+    }
+  }
 >
   <Toast
     onClose={[MockFunction hooks.nullMethod]}

diff --git a/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx b/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx
@@ -21,7 +21,7 @@ export const EditorFooter = ({
   // injected
   intl,
 }) => (
-  <div className="editor-footer">
+  <div className="editor-footer" style={{ position: 'sticky', bottom: 0 }}>
     {saveFailed && (
       <Toast show onClose={nullMethod}>
         <FormattedMessage {...messages.contentSaveFailed} />

diff --git a/src/editors/containers/EditorContainer/index.jsx b/src/editors/containers/EditorContainer/index.jsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { FullscreenModal } from '@edx/paragon';
+import { Icon, ModalDialog, IconButton } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
 
 import EditorFooter from './components/EditorFooter';
 import TitleHeader from './components/TitleHeader';
@@ -18,24 +19,27 @@ export const EditorContainer = ({
   const isInitialized = hooks.isInitialized();
   const handleCancelClicked = hooks.handleCancelClicked({ onClose });
   return (
-    <FullscreenModal
-      isOpen
-      onClose={handleCancelClicked}
-      variant="primary"
-      footerNode={(
-        <EditorFooter
-          onCancel={handleCancelClicked}
-          onSave={hooks.handleSaveClicked({ getContent, dispatch })}
-          disableSave={!isInitialized}
-          saveFailed={hooks.saveFailed()}
-        />
-      )}
-      title={(
-        <TitleHeader isInitialized={isInitialized} />
-      )}
-    >
-      {children}
-    </FullscreenModal>
+    <div>
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          <TitleHeader isInitialized={isInitialized} />
+          <div className="pgn__modal-close-container">
+            <IconButton
+              src={Close}
+              iconAs={Icon}
+              onClick={onClose}
+            />
+          </div>
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      {isInitialized && children}
+      <EditorFooter
+        onCancel={handleCancelClicked}
+        onSave={hooks.handleSaveClicked({ getContent, dispatch })}
+        disableSave={!isInitialized}
+        saveFailed={hooks.saveFailed()}
+      />
+    </div>
   );
 };
 EditorContainer.defaultProps = {

diff --git a/src/editors/containers/EditorContainer/index.scss b/src/editors/containers/EditorContainer/index.scss
@@ -1,3 +0,0 @@
-.pgn__modal-layer {
-  z-index: 0;
-}

diff --git a/src/editors/containers/EditorContainer/index.test.jsx b/src/editors/containers/EditorContainer/index.test.jsx
@@ -38,13 +38,14 @@ describe('EditorContainer component', () => {
       });
       test('close behavior is linked to modal onClose and footer onCancel', () => {
         const expected = hooks.handleCancelClicked({ onClose: props.onClose });
-        expect(el.at(0).props().onClose).toEqual(expected);
-        expect(el.at(0).props().footerNode.props.onCancel).toEqual(expected);
+        expect(el.children().at(2).props().onCancel).toEqual(expected);
       });
       test('save behavior is linked to footer onSave', () => {
-        expect(el.at(0).props().footerNode.props.onSave).toEqual(
-          hooks.handleSaveClicked({ dispatch: useDispatch(), getContent: props.getContent }),
-        );
+        const expected = hooks.handleSaveClicked({
+          getContent: props.getContent,
+          dispatch: useDispatch(),
+        });
+        expect(el.children().at(2).props().onSave).toEqual(expected);
       });
     });
   });

diff --git a/src/editors/containers/TextEditor/pluginConfig.js b/src/editors/containers/TextEditor/pluginConfig.js
@@ -36,7 +36,7 @@ export default StrictDict({
     ],
     [buttons.imageUploadButton, buttons.link, buttons.unlink, buttons.codesample, buttons.table],
     [buttons.emoticons, buttons.charmap, buttons.hr],
-    [buttons.removeFormat, buttons.code],
+    [buttons.removeFormat],
   ]),
   imageToolbar: mapToolbars([
     // [buttons.rotate.left, buttons.rotate.right],

diff --git a/src/editors/data/redux/app/selectors.js b/src/editors/data/redux/app/selectors.js
@@ -31,10 +31,9 @@ export const returnUrl = createSelector(
 export const isInitialized = createSelector(
   [
     module.simpleSelectors.unitUrl,
-    module.simpleSelectors.editorInitialized,
     module.simpleSelectors.blockValue,
   ],
-  (unitUrl, editorInitialized, blockValue) => !!(unitUrl && blockValue && editorInitialized),
+  (unitUrl, blockValue) => !!(unitUrl && blockValue),
 );
 
 export const displayTitle = createSelector(

diff --git a/src/editors/data/redux/app/selectors.test.js b/src/editors/data/redux/app/selectors.test.js
@@ -67,7 +67,6 @@ describe('app selectors unit tests', () => {
     it('is memoized based on unitUrl, editorInitialized, and blockValue', () => {
       expect(selectors.isInitialized.preSelectors).toEqual([
         simpleSelectors.unitUrl,
-        simpleSelectors.editorInitialized,
         simpleSelectors.blockValue,
       ]);
     });
@@ -76,14 +75,12 @@ describe('app selectors unit tests', () => {
       const truthy = {
         url: { url: 'data' },
         blockValue: { block: 'value' },
-        editorInitialized: true,
       };
 
       [
-        [[truthy.url, truthy.blockValue, false], false],
-        [[null, truthy.blockValue, true], false],
-        [[truthy.url, null, true], false],
-        [[truthy.url, truthy.blockValue, true], true],
+        [[null, truthy.blockValue], false],
+        [[truthy.url, null], false],
+        [[truthy.url, truthy.blockValue], true],
       ].map(([args, expected]) => expect(cb(...args)).toEqual(expected));
     });
   });