Merge pull request #211 from edx/thallada/upgrade-paragon

fix(paragon): upgrade to paragon 3.0.5
openedx · May 15, 2018 · b168618 · b168618
2 parents 1442e4f + 230e8e9
commit b168618
Show file tree

Hide file tree

Showing 15 changed files with 192 additions and 102 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,13 +470,19 @@ describe('Lock Asset', () => {
   const getLockingButtons = () => wrapper.find('button > .fa-spinner');
 
   beforeEach(() => {
+    mockQuerySelector.init();
+
     wrapper = mountWithIntl(
       <AssetsTable
         {...defaultProps}
       />,
     );
   });
 
+  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
@@ -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
@@ -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
@@ -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,23 +74,33 @@ 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', () => {
         editImageModal.setState({ open: true });
         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
@@ -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',