Migrate to Reactstrap for Modal implementation

5 files changed, 72 insertions, 137 deletions

diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js
index 40656dc1..36bb498e 100644
--- a/frontend/src/components/modals/Modal.js
+++ b/frontend/src/components/modals/Modal.js
@@ -1,124 +1,51 @@
-import classNames from 'classnames'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import React from 'react'
-import jQuery from '../../util/jquery'
-
-class Modal extends React.Component {
-    static propTypes = {
-        title: PropTypes.string.isRequired,
-        show: PropTypes.bool.isRequired,
-        onSubmit: PropTypes.func.isRequired,
-        onCancel: PropTypes.func.isRequired,
-        submitButtonType: PropTypes.string,
-        submitButtonText: PropTypes.string,
-    }
-    static defaultProps = {
-        submitButtonType: 'primary',
-        submitButtonText: 'Save',
-    }
-    static idCounter = 0
-
-    // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate
-    // 'close' triggers)
-    visible = false
-
-    constructor(props) {
-        super(props)
-        this.id = 'modal-' + Modal.idCounter++
-    }
-
-    componentDidMount() {
-        this.visible = this.props.show
-        this.openOrCloseModal()
-
-        // Trigger auto-focus
-        jQuery('#' + this.id)
-            .on('shown.bs.modal', function () {
-                jQuery(this).find('input').first().focus()
-            })
-            .on('hide.bs.modal', () => {
-                if (this.visible) {
-                    this.props.onCancel()
-                }
-            })
-            .on('keydown', (e) => {
-                e.stopPropagation()
-            })
-    }
-
-    componentDidUpdate() {
-        if (this.visible !== this.props.show) {
-            this.visible = this.props.show
-            this.openOrCloseModal()
-        }
-    }
-
-    onSubmit() {
-        if (this.visible) {
-            this.props.onSubmit()
-            this.visible = false
-            this.closeModal()
-        }
-    }
-
-    onCancel() {
-        if (this.visible) {
-            this.props.onCancel()
-            this.visible = false
-            this.closeModal()
-        }
-    }
-
-    openModal() {
-        jQuery('#' + this.id).modal('show')
-    }
-
-    closeModal() {
-        jQuery('#' + this.id).modal('hide')
-    }
+import { Modal as RModal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'
+
+function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, submitButtonText }) {
+    const [modal, setModal] = useState(show)
+
+    useEffect(() => setModal(show), [show])
+
+    const toggle = () => setModal(!modal)
+    const cancel = () => {
+        toggle()
+        onCancel()
+    }
+    const submit = () => {
+        toggle()
+        onSubmit()
+    }
+
+    return (
+        <RModal isOpen={modal} toggle={toggle}>
+            <ModalHeader toggle={toggle}>{title}</ModalHeader>
+            <ModalBody>{children}</ModalBody>
+            <ModalFooter>
+                <Button color="secondary" onClick={cancel}>
+                    Close
+                </Button>
+                <Button color={submitButtonType} onClick={submit}>
+                    {submitButtonText}
+                </Button>
+            </ModalFooter>
+        </RModal>
+    )
+}
 
-    openOrCloseModal() {
-        if (this.visible) {
-            this.openModal()
-        } else {
-            this.closeModal()
-        }
-    }
+Modal.propTypes = {
+    title: PropTypes.string.isRequired,
+    show: PropTypes.bool.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    submitButtonType: PropTypes.string,
+    submitButtonText: PropTypes.string,
+}
 
-    render() {
-        return (
-            <div className="modal fade" id={this.id} role="dialog">
-                <div className="modal-dialog" role="document">
-                    <div className="modal-content">
-                        <div className="modal-header">
-                            <h5 className="modal-title">{this.props.title}</h5>
-                            <button
-                                type="button"
-                                className="close"
-                                onClick={this.onCancel.bind(this)}
-                                aria-label="Close"
-                            >
-                                <span>&times;</span>
-                            </button>
-                        </div>
-                        <div className="modal-body">{this.props.children}</div>
-                        <div className="modal-footer">
-                            <button type="button" className="btn btn-secondary" onClick={this.onCancel.bind(this)}>
-                                Close
-                            </button>
-                            <button
-                                type="button"
-                                className={classNames('btn', 'btn-' + this.props.submitButtonType)}
-                                onClick={this.onSubmit.bind(this)}
-                            >
-                                {this.props.submitButtonText}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-    }
+Modal.defaultProps = {
+    submitButtonType: 'primary',
+    submitButtonText: 'Save',
+    show: false,
 }
 
 export default Modal
diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js
index d5edb60b..d0918c7e 100644
--- a/frontend/src/components/modals/TextInputModal.js
+++ b/frontend/src/components/modals/TextInputModal.js
@@ -12,7 +12,7 @@ class TextInputModal extends React.Component {
     }
 
     componentDidUpdate() {
-        if (this.props.initialValue) {
+        if (this.props.initialValue && this.textInput) {
             this.textInput.value = this.props.initialValue
         }
     }
diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
index 2d001302..19049931 100644
--- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
@@ -19,11 +19,13 @@ class NewPortfolioModalComponent extends React.Component {
     }
 
     reset() {
-        this.textInput.value = ''
-        AVAILABLE_METRICS.forEach((metric) => {
-            this.metricCheckboxes[metric].checked = true
-        })
-        this.repeatsInput.value = 1
+        if (this.textInput) {
+            this.textInput.value = ''
+            AVAILABLE_METRICS.forEach((metric) => {
+                this.metricCheckboxes[metric].checked = true
+            })
+            this.repeatsInput.value = 1
+        }
     }
 
     onSubmit() {
diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
index d7d99982..5ba74b0f 100644
--- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -19,21 +19,25 @@ class NewScenarioModalComponent extends React.Component {
     }
 
     componentDidUpdate() {
-        if (this.props.currentPortfolioScenarioIds.length === 0) {
-            this.textInput.value = 'Base scenario'
-        } else if (this.textInput.value === 'Base scenario') {
-            this.textInput.value = ''
+        if (this.textInput) {
+            if (this.props.currentPortfolioScenarioIds.length === 0) {
+                this.textInput.value = 'Base scenario'
+            } else if (this.textInput.value === 'Base scenario') {
+                this.textInput.value = ''
+            }
         }
     }
 
     reset() {
-        this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''
-        this.traceSelect.selectedIndex = 0
-        this.traceLoadInput.value = 1.0
-        this.topologySelect.selectedIndex = 0
-        this.failuresCheckbox.checked = false
-        this.performanceInterferenceCheckbox.checked = false
-        this.schedulerSelect.selectedIndex = 0
+        if (this.textInput) {
+            this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''
+            this.traceSelect.selectedIndex = 0
+            this.traceLoadInput.value = 1.0
+            this.topologySelect.selectedIndex = 0
+            this.failuresCheckbox.checked = false
+            this.performanceInterferenceCheckbox.checked = false
+            this.schedulerSelect.selectedIndex = 0
+        }
     }
 
     onSubmit() {
diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
index d8262baa..8a625b13 100644
--- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -13,8 +13,10 @@ class NewTopologyModalComponent extends React.Component {
     }
 
     reset() {
-        this.textInput.value = ''
-        this.originTopology.selectedIndex = 0
+        if (this.textInput) {
+            this.textInput.value = ''
+            this.originTopology.selectedIndex = 0
+        }
     }
 
     onSubmit() {