ui: extract renderUnsafeOptionsConfirmationModal() into a component

monkey/monkey_island/cc/ui/src/components/configuration-components/UnsafeOptionsConfirmationModal.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Modal, Button} from 'react-bootstrap';
+
+function UnsafeOptionsConfirmationModal(props) {
+  return (
+    <Modal show={props.show}>
+      <Modal.Body>
+        <h2>
+          <div className='text-center'>Warning</div>
+        </h2>
+        <p className='text-center' style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
+          You have selected some options which are not safe for all environments.
+          These options could cause some systems to become unstable or malfunction.
+          Are you sure you want to use the selected settings?
+        </p>
+        <div className='text-center'>
+          <Button type='button'
+                  className='btn btn-success'
+                  size='lg'
+                  style={{margin: '5px'}}
+                  onClick={() => {props.onCancelClick()}}>
+            Cancel
+          </Button>
+          <Button type='button'
+                  className='btn btn-danger'
+                  size='lg'
+                  style={{margin: '5px'}}
+                  onClick={() => {props.onContinueClick()}}>
+            I know what I'm doing.
+          </Button>
+        </div>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+export default UnsafeOptionsConfirmationModal;

monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js

@@ -11,6 +11,7 @@ import {faExclamationCircle} from '@fortawesome/free-solid-svg-icons/faExclamati
 import {formValidationFormats} from '../configuration-components/ValidationFormats';
 import transformErrors from '../configuration-components/ValidationErrorMessages';
 import InternalConfig from '../configuration-components/InternalConfig';
+import UnsafeOptionsConfirmationModal from '../configuration-components/UnsafeOptionsConfirmationModal.js';
 
 const ATTACK_URL = '/api/attack';
 const CONFIG_URL = '/api/configuration/island';
@@ -76,6 +77,17 @@ class ConfigurePageComponent extends AuthComponent {
       });
   };
 
+  onUnsafeConfirmationCancelClick = () => {
+    this.setState({showUnsafeOptionsConfirmation: false})
+  }
+
+  onUnsafeConfirmationContinueClick = () => {
+    this.setState(
+      {unsafeOptionsConfirmed: true, showUnsafeOptionsConfirmation: false},
+      () => {this.onSubmit()}
+    );
+  }
+
   updateConfig = () => {
     this.authFetch(CONFIG_URL)
       .then(res => res.json())
@@ -255,45 +267,6 @@ class ConfigurePageComponent extends AuthComponent {
     </Modal>)
   };
 
-  renderUnsafeOptionsConfirmationModal = () => {
-    return (
-      <Modal show={this.state.showUnsafeOptionsConfirmation}>
-        <Modal.Body>
-          <h2>
-            <div className='text-center'>Warning</div>
-          </h2>
-          <p className='text-center' style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
-            You have selected some options which are not safe for all environments.
-            These options could cause some systems to become unstable or malfunction.
-            Are you sure you want to use the selected settings?
-          </p>
-          <div className='text-center'>
-            <Button type='button'
-                    className='btn btn-success'
-                    size='lg'
-                    style={{margin: '5px'}}
-                    onClick={() => {
-                      this.setState({showUnsafeOptionsConfirmation: false})
-                    }}>
-              Cancel
-            </Button>
-            <Button type='button'
-                    className='btn btn-danger'
-                    size='lg'
-                    style={{margin: '5px'}}
-                    onClick={() => {
-                      this.setState(
-                        {unsafeOptionsConfirmed: true, showUnsafeOptionsConfirmation: false},
-                        () => {this.onSubmit()});
-                    }}>
-              I know what I'm doing.
-            </Button>
-          </div>
-        </Modal.Body>
-      </Modal>
-    )
-  }
-
   userChangedConfig() {
     if (JSON.stringify(this.state.configuration) === JSON.stringify(this.initialConfig)) {
       if (Object.keys(this.currentFormData).length === 0 ||
@@ -503,7 +476,11 @@ class ConfigurePageComponent extends AuthComponent {
            lg={{offset: 3, span: 8}} xl={{offset: 2, span: 8}}
            className={'main'}>
         {this.renderAttackAlertModal()}
-        {this.renderUnsafeOptionsConfirmationModal()}
+        <UnsafeOptionsConfirmationModal
+          show={this.state.showUnsafeOptionsConfirmation}
+          onCancelClick={this.onUnsafeConfirmationCancelClick}
+          onContinueClick={this.onUnsafeConfirmationContinueClick}
+        />
         <h1 className='page-title'>Monkey Configuration</h1>
         {this.renderNav()}
         {content}