Merge pull request #1225 from coralproject/portal-dialog

Use Portal to put dialogs at the end of the document

client/coral-ui/components/Dialog.css

@@ -1,4 +1,13 @@
 
 .dialog {
-  position: fixed;
+}
+
+:global(.backdrop) {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: black;
+  opacity: 0.1;
 }

client/coral-ui/components/Dialog.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import dialogPolyfill from 'dialog-polyfill';
 import 'dialog-polyfill/dialog-polyfill.css';
 import styles from './Dialog.css';
+import {Portal} from 'react-portal';
 
 export default class Dialog extends Component {
   static propTypes = {
@@ -53,13 +54,15 @@ export default class Dialog extends Component {
     const {children, className = '', onClose, onCancel, open, ...rest} = this.props; // eslint-disable-line
 
     return (
-      <dialog
-        ref={(el) => { this.dialog = el; }}
-        className={`mdl-dialog ${className} ${styles.dialog}`}
-        {...rest}
-      >
-        {children}
-      </dialog>
+      <Portal>
+        <dialog
+          ref={(el) => { this.dialog = el; }}
+          className={`mdl-dialog ${className} ${styles.dialog}`}
+          {...rest}
+        >
+          {children}
+        </dialog>
+      </Portal>
     );
   }
 }

package.json

@@ -160,6 +160,7 @@
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",
     "react-paginate": "^5.0.0",
+    "react-portal": "^4.1.2",
     "react-recaptcha": "^2.2.6",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",

test/e2e/page_objects/admin.js

@@ -57,6 +57,10 @@ module.exports = {
     suspendUserDialog: '.talk-admin-suspend-user-dialog',
     suspendUserConfirmButton: '.talk-admin-suspend-user-dialog-confirm',
     supendUserSendButton: '.talk-admin-suspend-user-dialog-send',
+    usernameDialog: '.talk-reject-username-dialog',
+    usernameDialogButtons: '.talk-reject-username-dialog-buttons',
+    usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
+    usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message',
     toast: '.toastify',
     toastClose: '.toastify__close',
   },
@@ -97,10 +101,6 @@ module.exports = {
         flaggedUser:'.talk-admin-community-flagged-user',
         flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
         flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
-        usernameDialog: '.talk-reject-username-dialog',
-        usernameDialogButtons: '.talk-reject-username-dialog-buttons',
-        usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
-        usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
       },
       sections: {
         people: {

test/e2e/specs/04_userStatus.js

@@ -64,15 +64,18 @@ module.exports = {
       .click('@flaggedUserRejectButton');
   },
   'admin suspends the user': (client) => {
+    const adminPage = client.page.admin();
     const community = client.page.admin().section.community;
 
-    community
+    adminPage
       .waitForElementVisible('@usernameDialog')
       .waitForElementVisible('@usernameDialogButtons')
       .waitForElementVisible('@usernameDialogSuspend')
       .click('@usernameDialogSuspend')
       .waitForElementVisible('@usernameDialogSuspensionMessage')
-      .click('@usernameDialogSuspend')
+      .click('@usernameDialogSuspend'),
+
+    community
       .waitForElementNotPresent('@flaggedUser');
   },
   'admin logs out': (client) => {

yarn.lock

@@ -7473,6 +7473,12 @@ react-paginate@^5.0.0:
     prop-types "^15.6.0"
     react-addons-create-fragment "^15.0.0"
 
+react-portal@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-recaptcha@^2.2.6:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-recaptcha/-/react-recaptcha-2.3.5.tgz#a5db337125bb00fb13c2fa2e4ebfbe8b0cd06bb7"