From 5200897e1b594482769ea063299880ea57d86601 Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Tue, 19 Apr 2022 08:25:01 -0700
Subject: [PATCH] Fix  change to go back to 'fake' modal (#62)

* fix: rebase

* fix: tests

* fix: remove broken code button

* fix: test case with iff
---
 .../__snapshots__/index.test.jsx.snap         | 143 +++++++++---------
 .../__snapshots__/index.test.jsx.snap         |  18 +++
 .../components/EditorFooter/index.jsx         |   2 +-
 .../containers/EditorContainer/index.jsx      |  42 ++---
 .../containers/EditorContainer/index.scss     |   3 -
 .../containers/EditorContainer/index.test.jsx |  11 +-
 .../containers/TextEditor/pluginConfig.js     |   2 +-
 src/editors/data/redux/app/selectors.js       |   3 +-
 src/editors/data/redux/app/selectors.test.js  |   9 +-
 9 files changed, 122 insertions(+), 111 deletions(-)

diff --git a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
index ddbecf8ef..7cff64690 100644
--- 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/src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap
index c97d0adf7..5011cdcd7 100644
--- a/src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap
+++ b/src/editors/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
index 31013d966..cd2c7a8b4 100644
--- 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
index 357f9d98f..c3b209bcd 100644
--- 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
index 096eca72b..e69de29bb 100644
--- 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
index f27a75bac..beacc55ae 100644
--- 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
index dcbe8d2b7..851202cd7 100644
--- 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
index 966cbef5b..4cff5b422 100644
--- 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
index 8372598fa..903586e0f 100644
--- 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));
     });
   });