Replace deprecated modal component

monkey_island/cc/ui/package-lock.json

@@ -506,22 +506,6 @@
         "acorn": "5.7.1"
       }
     },
-    "active-event-stack": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/active-event-stack/-/active-event-stack-1.0.0.tgz",
-      "integrity": "sha1-a1uS661xmvrpgs1R9Jw4xbaADFA=",
-      "requires": {
-        "immutable": "3.8.2",
-        "lodash": "3.10.1"
-      },
-      "dependencies": {
-        "lodash": {
-          "version": "3.10.1",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y="
-        }
-      }
-    },
     "after": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@@ -2336,11 +2320,6 @@
         "q": "1.5.0"
       }
     },
-    "bowser": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.2.tgz",
-      "integrity": "sha512-fuiANC1Bqbqa/S4gmvfCt7bGBmNELMsGZj4Wg3PrP6esP66Ttoj1JSlzFlXtHyduMv07kDNmDsX6VsMWT/MLGg=="
-    },
     "brace-expansion": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
@@ -3294,14 +3273,6 @@
         "randomfill": "1.0.4"
       }
     },
-    "css-in-js-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz",
-      "integrity": "sha512-yuWmPMD9FLi50Xf3k8W8oO3WM1eVnxEGCldCLyfusQ+CgivFk0s23yst4ooW6tfxMuSa03S6uUEga9UhX6GRrA==",
-      "requires": {
-        "hyphenate-style-name": "1.0.2"
-      }
-    },
     "css-loader": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz",
@@ -3818,11 +3789,6 @@
         }
       }
     },
-    "dynamics.js": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/dynamics.js/-/dynamics.js-1.1.5.tgz",
-      "integrity": "sha1-uQvcM2Bc7+ZSuEFucB95v27vzjI="
-    },
     "ecc-jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
@@ -7037,11 +7003,6 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
-    "hyphenate-style-name": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
-      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
-    },
     "iconv-lite": {
       "version": "0.4.18",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.18.tgz",
@@ -7080,11 +7041,6 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
-    "immutable": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
-      "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
-    },
     "import-local": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz",
@@ -7132,15 +7088,6 @@
       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
       "dev": true
     },
-    "inline-style-prefixer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-4.0.0.tgz",
-      "integrity": "sha1-MKA98bNGumsfuKgSvDydq+9IAi0=",
-      "requires": {
-        "bowser": "1.9.2",
-        "css-in-js-utils": "2.0.0"
-      }
-    },
     "inquirer": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-5.2.0.tgz",
@@ -9569,14 +9516,6 @@
         }
       }
     },
-    "narcissus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/narcissus/-/narcissus-1.0.0.tgz",
-      "integrity": "sha1-JGKgfEWYzpBl60Gyq72zDQ4w9G4=",
-      "requires": {
-        "inline-style-prefixer": "4.0.0"
-      }
-    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -13571,14 +13510,6 @@
         "warning": "3.0.0"
       }
     },
-    "react-center-component": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/react-center-component/-/react-center-component-3.0.0.tgz",
-      "integrity": "sha1-0omGv0NOD46/9jyRJ38b9q0YnHI=",
-      "requires": {
-        "lodash": "4.17.10"
-      }
-    },
     "react-copy-to-clipboard": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
@@ -13716,28 +13647,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-modal-dialog": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/react-modal-dialog/-/react-modal-dialog-4.0.7.tgz",
-      "integrity": "sha1-OSbaLfqR/wny0xSVSejW7ly62bU=",
-      "requires": {
-        "active-event-stack": "1.0.0",
-        "classnames": "2.2.5",
-        "dynamics.js": "1.1.5",
-        "immutable": "3.8.2",
-        "keycode": "2.1.9",
-        "lodash": "3.10.1",
-        "narcissus": "1.0.0",
-        "react-center-component": "3.0.0"
-      },
-      "dependencies": {
-        "lodash": {
-          "version": "3.10.1",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y="
-        }
-      }
-    },
     "react-overlays": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz",

monkey_island/cc/ui/package.json

@@ -86,7 +86,6 @@
     "react-graph-vis": "^1.0.2",
     "react-json-tree": "^0.11.0",
     "react-jsonschema-form": "^1.0.4",
-    "react-modal-dialog": "^4.0.7",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "react-table": "^6.8.6",

monkey_island/cc/ui/src/components/pages/MapPage.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import {Col} from 'react-bootstrap';
+import {Col, Modal} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import {Icon} from 'react-fa';
 import PreviewPane from 'components/map/preview-pane/PreviewPane';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
-// import {ModalContainer, ModalDialog} from 'react-modal-dialog';
 import {options, edgeGroupToColor} from 'components/map/MapOptions';
 import AuthComponent from '../AuthComponent';
 
@@ -98,17 +97,10 @@ class MapPageComponent extends AuthComponent {
   };
 
   renderKillDialogModal = () => {
-    if (!this.state.showKillDialog) {
-      return <div />
-    }
-
-    // TODO: uncomment
-    return <div/>
-/*
     return (
-      <ModalContainer onClose={() => this.setState({showKillDialog: false})}>
+      <Modal show={this.state.showKillDialog} onHide={() => this.setState({showKillDialog: false})}>
-        <ModalDialog onClose={() => this.setState({showKillDialog: false})}>
+        <Modal.Body>
-          <h2>Are you sure you want to kill all monkeys?</h2>
+          <h2><div className="text-center">Are you sure you want to kill all monkeys?</div></h2>
           <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
             This might take a few moments...
           </p>
@@ -125,10 +117,10 @@ class MapPageComponent extends AuthComponent {
               Cancel
             </button>
           </div>
-        </ModalDialog>
+        </Modal.Body>
-      </ModalContainer>
+      </Modal>
     )
-    */
+
   };
 
   renderTelemetryEntry(telemetry) {

monkey_island/cc/ui/src/components/pages/StartOverPage.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import {Col} from 'react-bootstrap';
+import {Col, Modal} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
-//import {ModalContainer, ModalDialog} from 'react-modal-dialog';
 import AuthComponent from '../AuthComponent';
 
 class StartOverPageComponent extends AuthComponent {
@@ -27,17 +26,10 @@ class StartOverPageComponent extends AuthComponent {
   };
 
   renderCleanDialogModal = () => {
-    if (!this.state.showCleanDialog) {
-      return <div />
-    }
-
-    // TODO: uncomment
-    return <div />
-    /*
     return (
-      <ModalContainer onClose={() => this.setState({showCleanDialog: false})}>
+      <Modal show={this.state.showCleanDialog} onHide={() => this.setState({showCleanDialog: false})}>
-        <ModalDialog onClose={() => this.setState({showCleanDialog: false})}>
+        <Modal.Body>
-          <h2>Reset environment</h2>
+          <h2><div className="text-center">Reset environment</div></h2>
           <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
             Are you sure you want to reset the environment?
           </p>
@@ -63,10 +55,10 @@ class StartOverPageComponent extends AuthComponent {
               Cancel
             </button>
           </div>
-        </ModalDialog>
+        </Modal.Body>
-      </ModalContainer>
+      </Modal>
     )
-    */
+
   };
 
   render() {

monkey_island/cc/ui/src/styles/App.css

@@ -406,6 +406,10 @@ body {
   padding: 0em;
 }
 
+.modal-dialog {
+  top: 30%;
+}
+
 /* Print report styling */
 
 @media print {