From 230e8e905d7876bfee0aa5956cf9109bb6cf40b3 Mon Sep 17 00:00:00 2001
From: Tyler Hallada <thallada@edx.org>
Date: Wed, 9 May 2018 18:16:50 -0400
Subject: [PATCH] fix(paragon): upgrade to paragon 3.0.5

Fix broken models.
---
 package-lock.json                             | 39 +------------
 package.json                                  |  7 ++-
 src/SFE.scss                                  | 58 +++++++++++++++++++
 src/components/AssetsDropZone/index.jsx       |  5 +-
 src/components/AssetsTable/AssetsTable.scss   | 15 -----
 .../AssetsTable/AssetsTable.test.jsx          | 15 ++++-
 src/components/AssetsTable/index.jsx          | 52 ++++++++---------
 .../EditImageModal/EditImageModal.scss        | 13 -----
 .../EditImageModal/EditImageModal.test.jsx    | 16 ++++-
 .../EditImageModal/displayMessages.jsx        |  5 ++
 src/components/EditImageModal/index.jsx       | 10 +++-
 src/data/i18n/default/transifex_input.json    |  1 +
 src/utils/i18n/enzymeHelper.jsx               |  7 ++-
 src/utils/mockModalPortal.js                  | 30 ++++++++++
 src/utils/mockQuerySelector.js                | 21 +++++++
 15 files changed, 192 insertions(+), 102 deletions(-)
 create mode 100644 src/utils/mockModalPortal.js
 create mode 100644 src/utils/mockQuerySelector.js

diff --git a/package-lock.json b/package-lock.json
index 5b2e2c69..076c2c85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -232,9 +232,9 @@
       }
     },
     "@edx/paragon": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-2.7.0.tgz",
-      "integrity": "sha512-YbZpn8/84ddsAsh/vWP63Zi9uRTXrvDLVP4ZJqLuQjJhts6OVetXvfWFHON/3fHK4Yvp090xaAWzbpxwJJ88Uw==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-3.0.5.tgz",
+      "integrity": "sha512-iuwNYgpjmzYxIuN78LSCZyBRUZw1jHKvV+daQGxbMWQfEBi/GIGevvD31yb72mai+DUw1AudnxP1/cWcrcWsUw==",
       "requires": {
         "@edx/edx-bootstrap": "1.0.0",
         "babel-polyfill": "6.26.0",
@@ -10044,16 +10044,6 @@
       "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
       "dev": true
     },
-    "lodash.isfunction": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
-      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw=="
-    },
-    "lodash.isobject": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
-      "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
-    },
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -10145,11 +10135,6 @@
       "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
       "dev": true
     },
-    "lodash.tonumber": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz",
-      "integrity": "sha1-C5azGzVnJ5Prf1pj7nkfG56QJdk="
-    },
     "lodash.topairs": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.topairs/-/lodash.topairs-4.3.0.tgz",
@@ -14846,24 +14831,6 @@
       "integrity": "sha512-HH2N/b5tRxh7ypIgCRsiBl/CTxRkTEPf9DhIstaM6hne4WiwM5/bBbWuvVlRZc/i3FdqZED3pZ//6n4mtxma4w==",
       "dev": true
     },
-    "reactstrap": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-4.8.0.tgz",
-      "integrity": "sha1-6zUGQqYoLHnH4b2Nb3XGJxMaQvY=",
-      "requires": {
-        "classnames": "2.2.5",
-        "lodash.isfunction": "3.0.9",
-        "lodash.isobject": "3.0.2",
-        "lodash.tonumber": "4.0.3",
-        "prop-types": "15.6.1",
-        "reactstrap-tether": "1.3.4"
-      }
-    },
-    "reactstrap-tether": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/reactstrap-tether/-/reactstrap-tether-1.3.4.tgz",
-      "integrity": "sha1-htlNMCFv+jTOssYm9LmRLA0ZOJQ="
-    },
     "read-chunk": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-2.1.0.tgz",
diff --git a/package.json b/package.json
index 6a04d2fc..3ca0406d 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@edx/edx-bootstrap": "^1.0.0",
-    "@edx/paragon": "2.7.0",
+    "@edx/paragon": "3.0.5",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.5",
     "copy-to-clipboard": "^3.0.8",
@@ -32,7 +32,6 @@
     "react-paginate": "^5.0.0",
     "react-redux": "^5.0.6",
     "react-transition-group": "^2.2.1",
-    "reactstrap": "^4.8.0",
     "redux": "^3.7.2",
     "redux-devtools-extension": "^2.13.2",
     "redux-thunk": "^2.2.0",
@@ -108,7 +107,9 @@
       "<rootDir>/src/components/BackendStatusBanner/",
       "<rootDir>/src/.*/container.jsx",
       "<rootDir>/src/data/i18n/locales/",
-      "<rootDir>/src/utils/matches-prefixer.js"
+      "<rootDir>/src/utils/matches-prefixer.js",
+      "<rootDir>/src/utils/mockPortals.js",
+      "<rootDir>/src/utils/mockQuerySelector.js"
     ],
     "transformIgnorePatterns": [
       "/node_modules/(?!(@edx/paragon)/).*/"
diff --git a/src/SFE.scss b/src/SFE.scss
index 63fd90be..3153aca9 100644
--- a/src/SFE.scss
+++ b/src/SFE.scss
@@ -79,3 +79,61 @@ input[type="search"] {
 .list {
   margin-left: $spacer * 2;
 }
+
+.modal.show {
+  position: fixed;
+  background-color: transparent;
+  max-height: 100%;
+  width: 100%;
+
+  &:focus {
+    .modal-dialog {
+      box-shadow: $btn-focus-box-shadow;
+    }
+  }
+}
+
+.modal.is-ie11 {
+  // fix browser that likes to do things its own way
+  overflow-y: scroll;
+  height: auto;
+
+  .modal-dialog {
+    height: auto;
+    max-height: none;
+  }
+}
+
+.modal.modal-backdrop {
+  background-color: rgba(0,0,0,0.3);
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: 1; }
+}
+
+.modal-dialog {
+  height: 100%;
+  margin: auto;
+  padding: $spacer / 2;
+
+  @media(min-width: map-get($grid-breakpoints, 'sm')) {
+    padding: $spacer;
+  }
+}
+
+.modal-content {
+  max-height: 100%;
+}
+
+.modal-header {
+  flex: 0 0 auto;
+}
+
+.modal-body {
+  overflow: auto;
+}
+
+.modal-footer {
+  flex: 0 0 auto;
+}
diff --git a/src/components/AssetsDropZone/index.jsx b/src/components/AssetsDropZone/index.jsx
index 066cdc5a..3aa88a9d 100644
--- a/src/components/AssetsDropZone/index.jsx
+++ b/src/components/AssetsDropZone/index.jsx
@@ -49,7 +49,10 @@ export default class AssetsDropZone extends React.Component {
               <Dropzone
                 accept={this.props.acceptedFileTypes}
                 activeClassName={styles['drop-active']}
-                className={this.props.compactStyle ? styles['drop-zone-compact'] : styles['drop-zone']}
+                className={classNames([
+                  this.props.compactStyle ? styles['drop-zone-compact'] : styles['drop-zone'],
+                  styles['center-text'],
+                ])}
                 data-identifier="asset-drop-zone"
                 disableClick
                 maxSize={this.dropZoneMaxFileSizeBytes}
diff --git a/src/components/AssetsTable/AssetsTable.scss b/src/components/AssetsTable/AssetsTable.scss
index 5588679f..30de04eb 100644
--- a/src/components/AssetsTable/AssetsTable.scss
+++ b/src/components/AssetsTable/AssetsTable.scss
@@ -53,18 +53,3 @@
 .table thead th:nth-child(5) {
   min-width: $spacer * 12;
 }
-
-// TODO: figure out how to receive these styles from Paragon instead of this copy-and-paste
-// (from: https://github.com/edx/paragon/blob/master/src/Modal/Modal.scss)
-
-.modal-open {
-  display: block;
-}
-
-.modal-backdrop {
-  background-color: rgba(0,0,0,0.3);
-
-  // Fade for backdrop
-  &.fade { opacity: 0; }
-  &.show { opacity: 1; }
-}
diff --git a/src/components/AssetsTable/AssetsTable.test.jsx b/src/components/AssetsTable/AssetsTable.test.jsx
index 289762ea..8018e7d8 100644
--- a/src/components/AssetsTable/AssetsTable.test.jsx
+++ b/src/components/AssetsTable/AssetsTable.test.jsx
@@ -4,6 +4,7 @@ import AssetsTable from './index';
 import courseDetails, { testAssetsList } from '../../utils/testConstants';
 import { assetActions } from '../../data/constants/actionTypes';
 import { assetLoading } from '../../data/constants/loadingTypes';
+import mockQuerySelector from '../../utils/mockQuerySelector';
 import { mountWithIntl } from '../../utils/i18n/enzymeHelper';
 import AssetsStatusAlert from '../AssetsStatusAlert/index';
 
@@ -84,6 +85,12 @@ const numberOfWebButtons = defaultProps.assetsList.filter(asset => asset.externa
 let wrapper;
 
 describe('<AssetsTable />', () => {
+  beforeEach(() => {
+    mockQuerySelector.init();
+  });
+  afterEach(() => {
+    mockQuerySelector.reset();
+  });
   describe('renders', () => {
     beforeEach(() => {
       wrapper = mountWithIntl(
@@ -301,7 +308,7 @@ describe('<AssetsTable />', () => {
       trashButtons.at(0).simulate('click');
 
       modal = wrapper.find('[role="dialog"]');
-      expect(modal.hasClass('modal-open')).toEqual(true);
+      expect(modal.hasClass('show')).toEqual(true);
       expect(wrapper.state('modalOpen')).toEqual(true);
     });
     it('closes when Cancel button clicked; modalOpen state is false', () => {
@@ -463,6 +470,8 @@ describe('Lock Asset', () => {
   const getLockingButtons = () => wrapper.find('button > .fa-spinner');
 
   beforeEach(() => {
+    mockQuerySelector.init();
+
     wrapper = mountWithIntl(
       <AssetsTable
         {...defaultProps}
@@ -470,6 +479,10 @@ describe('Lock Asset', () => {
     );
   });
 
+  afterEach(() => {
+    mockQuerySelector.reset();
+  });
+
   it('renders icons and buttons', () => {
     const lockedButtons = getLockedButtons();
     expect(lockedButtons).toHaveLength(1);
diff --git a/src/components/AssetsTable/index.jsx b/src/components/AssetsTable/index.jsx
index 021ce95c..a25cab31 100644
--- a/src/components/AssetsTable/index.jsx
+++ b/src/components/AssetsTable/index.jsx
@@ -11,6 +11,7 @@ import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
 import messages from './displayMessages';
 
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+const modalWrapperID = 'modalWrapper';
 
 export default class AssetsTable extends React.Component {
   constructor(props) {
@@ -355,33 +356,30 @@ export default class AssetsTable extends React.Component {
 
   renderModal() {
     return (
-      <WrappedMessage message={messages.assetsTableCancel} >
-        {
-          displayText => (
-            <Modal
-              open={this.state.modalOpen}
-              title={(<WrappedMessage
-                message={messages.assetsTableDeleteObject}
-                values={{
-                  displayName: this.props.assetToDelete.display_name,
-                }}
-              />)}
-              body={this.renderModalBody()}
-              closeText={displayText}
-              onClose={this.closeModal}
-              buttons={[
-                <Button
-                  label={<WrappedMessage message={messages.assetsTablePermaDelete} />}
-                  buttonType="primary"
-                  onClick={this.deleteAsset}
-                  data-identifier="asset-confirm-delete-button"
-                />,
-              ]}
-              variant={{ status: Variant.status.WARNING }}
-            />
-          )
-        }
-      </WrappedMessage>
+      <div id={modalWrapperID}>
+        <Modal
+          open={this.state.modalOpen}
+          title={(<WrappedMessage
+            message={messages.assetsTableDeleteObject}
+            values={{
+              displayName: this.props.assetToDelete.display_name,
+            }}
+          />)}
+          body={this.renderModalBody()}
+          closeText={<WrappedMessage message={messages.assetsTableCancel} />}
+          onClose={this.closeModal}
+          buttons={[
+            <Button
+              label={<WrappedMessage message={messages.assetsTablePermaDelete} />}
+              buttonType="primary"
+              onClick={this.deleteAsset}
+              data-identifier="asset-confirm-delete-button"
+            />,
+          ]}
+          variant={{ status: Variant.status.WARNING }}
+          parentSelector={`#${modalWrapperID}`}
+        />
+      </div>
     );
   }
 
diff --git a/src/components/EditImageModal/EditImageModal.scss b/src/components/EditImageModal/EditImageModal.scss
index fdb3f884..0e333170 100644
--- a/src/components/EditImageModal/EditImageModal.scss
+++ b/src/components/EditImageModal/EditImageModal.scss
@@ -1,18 +1,5 @@
 @import 'edx-bootstrap';
 
-.modal.modal-open {
-  display: block;
-  overflow: scroll;
-}
-
-.modal.modal-backdrop {
-  background-color: rgba(0,0,0,0.3);
-
-  // Fade for backdrop
-  &.fade { opacity: 0; }
-  &.show { opacity: 1; }
-}
-
 // Remove negative margins in Bootstrap v4.0.0 so the body does not extend outside the modal
 .modal-body .row {
   margin: 0;
diff --git a/src/components/EditImageModal/EditImageModal.test.jsx b/src/components/EditImageModal/EditImageModal.test.jsx
index 61fd03f9..45c2db22 100644
--- a/src/components/EditImageModal/EditImageModal.test.jsx
+++ b/src/components/EditImageModal/EditImageModal.test.jsx
@@ -6,6 +6,8 @@ import React from 'react';
 import EditImageModal from './index';
 import { getMockStore } from '../../utils/testConstants';
 import messages from './displayMessages';
+import mockModalPortal from '../../utils/mockModalPortal';
+import mockQuerySelector from '../../utils/mockQuerySelector';
 import rewriteStaticLinks from '../../utils/rewriteStaticLinks';
 import { shallowWithIntl } from '../../utils/i18n/enzymeHelper';
 import WrappedEditImageModal from './container';
@@ -72,15 +74,24 @@ let editImageModal;
 
 describe('EditImageModal', () => {
   beforeEach(() => {
+    mockQuerySelector.init();
+    mockModalPortal.init();
+
     editImageModal = getEditImageModal(wrapper);
   });
 
+  afterEach(() => {
+    mockModalPortal.reset();
+    mockQuerySelector.reset();
+  });
+
   describe('page 1 renders', () => {
     describe('a modal with', () => {
       it('a closed modal by default', () => {
         const modal = getModal(editImageModal);
         expect(modal.find('.modal')).toHaveLength(1);
-        expect(modal.find('.modal-open .modal-backdrop .show')).toHaveLength(0);
+        expect(modal.find('.modal.show')).toHaveLength(0);
+        expect(modal.find('.modal-backdrop.show')).toHaveLength(0);
       });
 
       it('an open modal when this.state.open is true', () => {
@@ -88,7 +99,8 @@ describe('EditImageModal', () => {
         const modal = getModal(editImageModal);
 
         expect(modal.find('.modal')).toHaveLength(1);
-        expect(modal.find('.modal .modal-open .modal-backdrop .show')).toHaveLength(1);
+        expect(modal.find('.modal.show')).toHaveLength(1);
+        expect(modal.find('.modal-backdrop.show')).toHaveLength(1);
       });
 
       it('modal title text', () => {
diff --git a/src/components/EditImageModal/displayMessages.jsx b/src/components/EditImageModal/displayMessages.jsx
index 9fcd7eb7..60911ceb 100644
--- a/src/components/EditImageModal/displayMessages.jsx
+++ b/src/components/EditImageModal/displayMessages.jsx
@@ -136,6 +136,11 @@ const messages = defineMessages({
     defaultMessage: 'Loading...',
     description: 'Text displayed with a loading spinner icon indicating that an image is loading',
   },
+  editImageModalCancelButton: {
+    id: 'editImageModalCancelButton',
+    defaultMessage: 'Cancel',
+    description: 'Button text to close the modal',
+  },
   editImageModalNextPageButton: {
     id: 'editImageModalNextPageButton',
     defaultMessage: 'Next',
diff --git a/src/components/EditImageModal/index.jsx b/src/components/EditImageModal/index.jsx
index e6196945..d9b8180a 100644
--- a/src/components/EditImageModal/index.jsx
+++ b/src/components/EditImageModal/index.jsx
@@ -37,6 +37,7 @@ const imageDescriptionFieldsetID = 'imageDescriptionFieldset';
 const imageDimensionsFieldsetID = 'imageDimensionsFieldset';
 const imageHeightID = 'imageHeight';
 const imageWidthID = 'imageWidth';
+const modalWrapperID = 'modalWrapper';
 
 const initialEditImageModalState = {
   areProportionsLocked: true,
@@ -147,6 +148,11 @@ export default class EditImageModal extends React.Component {
 
     this.props.clearSearch(this.props.courseDetails);
     this.resetImageSelection();
+    this.modalWrapperRef.dispatchEvent(new CustomEvent('closeModal',
+      {
+        bubbles: true,
+      },
+    ));
   }
 
   onImageIsDecorativeClick = (checked) => {
@@ -818,14 +824,16 @@ export default class EditImageModal extends React.Component {
   render = () => (
     <div
       ref={this.setModalWrapperRef}
+      id={modalWrapperID}
     >
       <Modal
         open={this.state.open}
         title={this.getModalHeader()}
         body={this.getModalBody()}
-        closeText="Cancel"
+        closeText={<WrappedMessage message={messages.editImageModalCancelButton} />}
         onClose={this.onEditImageModalClose}
         buttons={[this.getModalButtons()]}
+        parentSelector={`#${modalWrapperID}`}
       />
     </div>
   );
diff --git a/src/data/i18n/default/transifex_input.json b/src/data/i18n/default/transifex_input.json
index 4370dba2..4f4d22cb 100644
--- a/src/data/i18n/default/transifex_input.json
+++ b/src/data/i18n/default/transifex_input.json
@@ -118,6 +118,7 @@
   "editImageModalImageOrFields": "or",
   "editImageModalImageNotFoundError": "Make sure the image source is correct.",
   "editImageModalImageLoadingIcon": "Loading...",
+  "editImageModalCancelButton": "Cancel",
   "editImageModalNextPageButton": "Next",
   "editImageModalPreviousPageButton": "Back",
   "paginationAriaLabel": "Content pagination",
diff --git a/src/utils/i18n/enzymeHelper.jsx b/src/utils/i18n/enzymeHelper.jsx
index 17aee041..4deacaf4 100644
--- a/src/utils/i18n/enzymeHelper.jsx
+++ b/src/utils/i18n/enzymeHelper.jsx
@@ -22,20 +22,21 @@ function nodeWithIntlProp(node) {
   return React.cloneElement(node, { intl });
 }
 
-export function shallowWithIntl(node, { context, disableLifecycleMethods } = {}) {
+export function shallowWithIntl(node, { context, ...otherOptions } = {}) {
   return shallow(
     nodeWithIntlProp(node),
     {
+      ...otherOptions,
       context: Object.assign({}, context, { intl }),
-      disableLifecycleMethods,
     },
   );
 }
 
-export function mountWithIntl(node, { context, childContextTypes } = {}) {
+export function mountWithIntl(node, { context, childContextTypes, ...otherOptions } = {}) {
   return mount(
     nodeWithIntlProp(node),
     {
+      ...otherOptions,
       context: Object.assign({}, context, { intl }),
       childContextTypes: Object.assign({}, { intl: intlShape }, childContextTypes),
     },
diff --git a/src/utils/mockModalPortal.js b/src/utils/mockModalPortal.js
new file mode 100644
index 00000000..7341fef8
--- /dev/null
+++ b/src/utils/mockModalPortal.js
@@ -0,0 +1,30 @@
+/* eslint-disable func-names */
+
+// Dirty work-around until Enzyme fully supports React Portals rendered with shallow()
+// See: https://github.com/airbnb/enzyme/issues/1507
+// Idea for this taken from:
+// https://github.com/mui-org/material-ui/commit/aa10940b584239dce62ae5fd1d6c379ddf66b663
+
+// mockPortal.init() mocks the render() function of Paragon's Modal so that it renders directly
+// without a Portal.
+// mockPortal.reset() returns the render() function back to normal.
+
+import { Modal } from '@edx/paragon';
+
+const modalOrigin = {};
+
+const mockModalPortal = {
+  init: () => {
+    modalOrigin.render = Modal.prototype.render;
+    Modal.prototype.render = function () {
+      return this.renderModal();
+    };
+  },
+  reset: () => {
+    if (modalOrigin.render) {
+      Modal.prototype.render = modalOrigin.render;
+    }
+  },
+};
+
+export default mockModalPortal;
diff --git a/src/utils/mockQuerySelector.js b/src/utils/mockQuerySelector.js
new file mode 100644
index 00000000..3ba73e47
--- /dev/null
+++ b/src/utils/mockQuerySelector.js
@@ -0,0 +1,21 @@
+// document.querySelector does not work with Enzyme. It will always return null.
+// init() mocks the function for the duration of the test by returning a div created on the <body>.
+// reset() deletes the div from the body and unmocks the document.querySelector back to normal.
+
+let parentElement;
+let querySelector;
+
+const mockQuerySelector = {
+  init: () => {
+    querySelector = document.querySelector;
+    parentElement = document.createElement('div');
+    document.body.appendChild(parentElement);
+    document.querySelector = () => parentElement;
+  },
+  reset: () => {
+    parentElement.remove();
+    document.querySelector = querySelector;
+  },
+};
+
+export default mockQuerySelector;