ui: Update frontend dependencies

This pull request updates the React dependencies used in the OpenDC frontend.

* Actualize React, react-konva and react-scripts
* Actualize Bootstrap and Reactstrap
* Migrate to Redux hooks to reduce clutter

10 files changed, 229 insertions, 277 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js
index f30febdb..33b2612f 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js
@@ -1,35 +1,26 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { closeDeleteMachineModal } from '../../actions/modals/topology'
 import { deleteMachine } from '../../actions/topology/machine'
 import ConfirmationModal from '../../components/modals/ConfirmationModal'
 
-const DeleteMachineModalComponent = ({ visible, callback }) => (
-    <ConfirmationModal
-        title="Delete this machine"
-        message="Are you sure you want to delete this machine?"
-        show={visible}
-        callback={callback}
-    />
-)
-
-const mapStateToProps = (state) => {
-    return {
-        visible: state.modals.deleteMachineModalVisible,
+const DeleteMachineModal = () => {
+    const dispatch = useDispatch()
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteMachine())
+        }
+        dispatch(closeDeleteMachineModal())
     }
+    const visible = useSelector((state) => state.modals.deleteMachineModalVisible)
+    return (
+        <ConfirmationModal
+            title="Delete this machine"
+            message="Are you sure you want to delete this machine?"
+            show={visible}
+            callback={callback}
+        />
+    )
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (isConfirmed) => {
-            if (isConfirmed) {
-                dispatch(deleteMachine())
-            }
-            dispatch(closeDeleteMachineModal())
-        },
-    }
-}
-
-const DeleteMachineModal = connect(mapStateToProps, mapDispatchToProps)(DeleteMachineModalComponent)
-
 export default DeleteMachineModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
index e7c4014d..93a38642 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
@@ -1,35 +1,27 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { closeDeleteProfileModal } from '../../actions/modals/profile'
 import { deleteCurrentUser } from '../../actions/users'
 import ConfirmationModal from '../../components/modals/ConfirmationModal'
 
-const DeleteProfileModalComponent = ({ visible, callback }) => (
-    <ConfirmationModal
-        title="Delete my account"
-        message="Are you sure you want to delete your OpenDC account?"
-        show={visible}
-        callback={callback}
-    />
-)
+const DeleteProfileModal = () => {
+    const visible = useSelector((state) => state.modals.deleteProfileModalVisible)
 
-const mapStateToProps = (state) => {
-    return {
-        visible: state.modals.deleteProfileModalVisible,
+    const dispatch = useDispatch()
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteCurrentUser())
+        }
+        dispatch(closeDeleteProfileModal())
     }
+    return (
+        <ConfirmationModal
+            title="Delete my account"
+            message="Are you sure you want to delete your OpenDC account?"
+            show={visible}
+            callback={callback}
+        />
+    )
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (isConfirmed) => {
-            if (isConfirmed) {
-                dispatch(deleteCurrentUser())
-            }
-            dispatch(closeDeleteProfileModal())
-        },
-    }
-}
-
-const DeleteProfileModal = connect(mapStateToProps, mapDispatchToProps)(DeleteProfileModalComponent)
-
 export default DeleteProfileModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js
index 0cb22a7e..ca76fd04 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js
@@ -1,35 +1,27 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { closeDeleteRackModal } from '../../actions/modals/topology'
 import { deleteRack } from '../../actions/topology/rack'
 import ConfirmationModal from '../../components/modals/ConfirmationModal'
 
-const DeleteRackModalComponent = ({ visible, callback }) => (
-    <ConfirmationModal
-        title="Delete this rack"
-        message="Are you sure you want to delete this rack?"
-        show={visible}
-        callback={callback}
-    />
-)
-
-const mapStateToProps = (state) => {
-    return {
-        visible: state.modals.deleteRackModalVisible,
+const DeleteRackModal = (props) => {
+    const visible = useSelector((state) => state.modals.deleteRackModalVisible)
+    const dispatch = useDispatch()
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRack())
+        }
+        dispatch(closeDeleteRackModal())
     }
+    return (
+        <ConfirmationModal
+            title="Delete this rack"
+            message="Are you sure you want to delete this rack?"
+            show={visible}
+            callback={callback}
+            {...props}
+        />
+    )
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (isConfirmed) => {
-            if (isConfirmed) {
-                dispatch(deleteRack())
-            }
-            dispatch(closeDeleteRackModal())
-        },
-    }
-}
-
-const DeleteRackModal = connect(mapStateToProps, mapDispatchToProps)(DeleteRackModalComponent)
-
 export default DeleteRackModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js
index 1f6eef92..9a7be6a6 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js
@@ -1,35 +1,28 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { closeDeleteRoomModal } from '../../actions/modals/topology'
 import { deleteRoom } from '../../actions/topology/room'
 import ConfirmationModal from '../../components/modals/ConfirmationModal'
 
-const DeleteRoomModalComponent = ({ visible, callback }) => (
-    <ConfirmationModal
-        title="Delete this room"
-        message="Are you sure you want to delete this room?"
-        show={visible}
-        callback={callback}
-    />
-)
+const DeleteRoomModal = (props) => {
+    const visible = useSelector((state) => state.modals.deleteRoomModalVisible)
 
-const mapStateToProps = (state) => {
-    return {
-        visible: state.modals.deleteRoomModalVisible,
+    const dispatch = useDispatch()
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRoom())
+        }
+        dispatch(closeDeleteRoomModal())
     }
+    return (
+        <ConfirmationModal
+            title="Delete this room"
+            message="Are you sure you want to delete this room?"
+            show={visible}
+            callback={callback}
+            {...props}
+        />
+    )
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (isConfirmed) => {
-            if (isConfirmed) {
-                dispatch(deleteRoom())
-            }
-            dispatch(closeDeleteRoomModal())
-        },
-    }
-}
-
-const DeleteRoomModal = connect(mapStateToProps, mapDispatchToProps)(DeleteRoomModalComponent)
-
 export default DeleteRoomModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js b/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js
index 9128f449..edb57217 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js
@@ -1,40 +1,37 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { closeEditRackNameModal } from '../../actions/modals/topology'
 import { editRackName } from '../../actions/topology/rack'
 import TextInputModal from '../../components/modals/TextInputModal'
 
-const EditRackNameModalComponent = ({ visible, previousName, callback }) => (
-    <TextInputModal
-        title="Edit rack name"
-        label="Rack name"
-        show={visible}
-        initialValue={previousName}
-        callback={callback}
-    />
-)
+const EditRackNameModal = (props) => {
+    const { visible, previousName } = useSelector((state) => {
+        return {
+            visible: state.modals.editRackNameModalVisible,
+            previousName:
+                state.interactionLevel.mode === 'RACK'
+                    ? state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
+                    : '',
+        }
+    })
 
-const mapStateToProps = (state) => {
-    return {
-        visible: state.modals.editRackNameModalVisible,
-        previousName:
-            state.interactionLevel.mode === 'RACK'
-                ? state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
-                : '',
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRackName(name))
+        }
+        dispatch(closeEditRackNameModal())
     }
+    return (
+        <TextInputModal
+            title="Edit rack name"
+            label="Rack name"
+            show={visible}
+            initialValue={previousName}
+            callback={callback}
+            {...props}
+        />
+    )
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (name) => {
-            if (name) {
-                dispatch(editRackName(name))
-            }
-            dispatch(closeEditRackNameModal())
-        },
-    }
-}
-
-const EditRackNameModal = connect(mapStateToProps, mapDispatchToProps)(EditRackNameModalComponent)
-
 export default EditRackNameModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js b/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js
index 8032a5d1..a804c0b0 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js
@@ -1,38 +1,31 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { closeEditRoomNameModal } from '../../actions/modals/topology'
 import { editRoomName } from '../../actions/topology/room'
 import TextInputModal from '../../components/modals/TextInputModal'
 
-const EditRoomNameModalComponent = ({ visible, previousName, callback }) => (
-    <TextInputModal
-        title="Edit room name"
-        label="Room name"
-        show={visible}
-        initialValue={previousName}
-        callback={callback}
-    />
-)
+const EditRoomNameModal = (props) => {
+    const visible = useSelector((state) => state.modals.editRoomNameModalVisible)
+    const previousName = useSelector((state) =>
+        state.interactionLevel.mode === 'ROOM' ? state.objects.room[state.interactionLevel.roomId].name : ''
+    )
 
-const mapStateToProps = (state) => {
-    return {
-        visible: state.modals.editRoomNameModalVisible,
-        previousName:
-            state.interactionLevel.mode === 'ROOM' ? state.objects.room[state.interactionLevel.roomId].name : '',
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRoomName(name))
+        }
+        dispatch(closeEditRoomNameModal())
     }
+    return (
+        <TextInputModal
+            title="Edit room name"
+            label="Room name"
+            show={visible}
+            initialValue={previousName}
+            callback={callback}
+            {...props}
+        />
+    )
 }
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (name) => {
-            if (name) {
-                dispatch(editRoomName(name))
-            }
-            dispatch(closeEditRoomNameModal())
-        },
-    }
-}
-
-const EditRoomNameModal = connect(mapStateToProps, mapDispatchToProps)(EditRoomNameModalComponent)
-
 export default EditRoomNameModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
index 6cf12d8e..b364ed4c 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
@@ -1,30 +1,24 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { closeNewPortfolioModal } from '../../actions/modals/portfolios'
 import NewPortfolioModalComponent from '../../components/modals/custom-components/NewPortfolioModalComponent'
 import { addPortfolio } from '../../actions/portfolios'
-import { closeNewPortfolioModal } from '../../actions/modals/portfolios'
-
-const mapStateToProps = (state) => {
-    return {
-        show: state.modals.newPortfolioModalVisible,
-    }
-}
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (name, targets) => {
-            if (name) {
-                dispatch(
-                    addPortfolio({
-                        name,
-                        targets,
-                    })
-                )
-            }
-            dispatch(closeNewPortfolioModal())
-        },
+const NewPortfolioModal = (props) => {
+    const show = useSelector((state) => state.modals.newPortfolioModalVisible)
+    const dispatch = useDispatch()
+    const callback = (name, targets) => {
+        if (name) {
+            dispatch(
+                addPortfolio({
+                    name,
+                    targets,
+                })
+            )
+        }
+        dispatch(closeNewPortfolioModal())
     }
+    return <NewPortfolioModalComponent {...props} callback={callback} show={show} />
 }
 
-const NewPortfolioModal = connect(mapStateToProps, mapDispatchToProps)(NewPortfolioModalComponent)
-
 export default NewPortfolioModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js
index d306dc45..e63ba76b 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js
@@ -1,30 +1,19 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { closeNewProjectModal } from '../../actions/modals/projects'
 import { addProject } from '../../actions/projects'
 import TextInputModal from '../../components/modals/TextInputModal'
 
-const NewProjectModalComponent = ({ visible, callback }) => (
-    <TextInputModal title="New Project" label="Project title" show={visible} callback={callback} />
-)
-
-const mapStateToProps = (state) => {
-    return {
-        visible: state.modals.newProjectModalVisible,
+const NewProjectModal = (props) => {
+    const visible = useSelector((state) => state.modals.newProjectModalVisible)
+    const dispatch = useDispatch()
+    const callback = (text) => {
+        if (text) {
+            dispatch(addProject(text))
+        }
+        dispatch(closeNewProjectModal())
     }
+    return <TextInputModal title="New Project" label="Project title" show={visible} callback={callback} {...props} />
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (text) => {
-            if (text) {
-                dispatch(addProject(text))
-            }
-            dispatch(closeNewProjectModal())
-        },
-    }
-}
-
-const NewProjectModal = connect(mapStateToProps, mapDispatchToProps)(NewProjectModalComponent)
-
 export default NewProjectModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
index 7d774fa4..b588b4bc 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
@@ -1,50 +1,55 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import NewScenarioModalComponent from '../../components/modals/custom-components/NewScenarioModalComponent'
 import { addScenario } from '../../actions/scenarios'
 import { closeNewScenarioModal } from '../../actions/modals/scenarios'
 
-const mapStateToProps = (state) => {
-    let topologies =
-        state.currentProjectId !== '-1'
-            ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t])
-            : []
-    if (topologies.filter((t) => !t).length > 0) {
-        topologies = []
-    }
+const NewScenarioModal = (props) => {
+    const topologies = useSelector(({ currentProjectId, objects }) => {
+        console.log(currentProjectId, objects)
 
-    return {
-        show: state.modals.newScenarioModalVisible,
-        currentPortfolioId: state.currentPortfolioId,
-        currentPortfolioScenarioIds:
-            state.currentPortfolioId !== '-1' && state.objects.portfolio[state.currentPortfolioId]
-                ? state.objects.portfolio[state.currentPortfolioId].scenarioIds
-                : [],
-        traces: Object.values(state.objects.trace),
-        topologies,
-        schedulers: Object.values(state.objects.scheduler),
-    }
-}
+        if (currentProjectId === '-1' || !objects.project[currentProjectId]) {
+            return []
+        }
+
+        const topologies = objects.project[currentProjectId].topologyIds.map((t) => objects.topology[t])
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        callback: (name, portfolioId, trace, topology, operational) => {
-            if (name) {
-                dispatch(
-                    addScenario({
-                        portfolioId,
-                        name,
-                        trace,
-                        topology,
-                        operational,
-                    })
-                )
-            }
-
-            dispatch(closeNewScenarioModal())
-        },
+        if (topologies.filter((t) => !t).length > 0) {
+            return []
+        }
+
+        return topologies
+    })
+    const state = useSelector((state) => {
+        return {
+            show: state.modals.newScenarioModalVisible,
+            currentPortfolioId: state.currentPortfolioId,
+            currentPortfolioScenarioIds:
+                state.currentPortfolioId !== '-1' && state.objects.portfolio[state.currentPortfolioId]
+                    ? state.objects.portfolio[state.currentPortfolioId].scenarioIds
+                    : [],
+            traces: Object.values(state.objects.trace),
+            schedulers: Object.values(state.objects.scheduler),
+        }
+    })
+
+    const dispatch = useDispatch()
+    const callback = (name, portfolioId, trace, topology, operational) => {
+        if (name) {
+            dispatch(
+                addScenario({
+                    portfolioId,
+                    name,
+                    trace,
+                    topology,
+                    operational,
+                })
+            )
+        }
+        dispatch(closeNewScenarioModal())
     }
-}
 
-const NewScenarioModal = connect(mapStateToProps, mapDispatchToProps)(NewScenarioModalComponent)
+    return <NewScenarioModalComponent {...props} {...state} topologies={topologies} callback={callback} />
+}
 
 export default NewScenarioModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
index 0acf6cf2..2f81706e 100644
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
+++ b/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
@@ -1,42 +1,48 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import NewTopologyModalComponent from '../../components/modals/custom-components/NewTopologyModalComponent'
 import { closeNewTopologyModal } from '../../actions/modals/topology'
 import { addTopology } from '../../actions/topologies'
 
-const mapStateToProps = (state) => {
-    let topologies = state.objects.project[state.currentProjectId]
-        ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t])
-        : []
-    if (topologies.filter((t) => !t).length > 0) {
-        topologies = []
-    }
+const NewTopologyModal = () => {
+    const show = useSelector((state) => state.modals.changeTopologyModalVisible)
+    const topologies = useSelector((state) => {
+        let topologies = state.objects.project[state.currentProjectId]
+            ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t])
+            : []
+        if (topologies.filter((t) => !t).length > 0) {
+            topologies = []
+        }
 
-    return {
-        show: state.modals.changeTopologyModalVisible,
-        topologies,
-    }
-}
+        return topologies
+    })
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onCreateTopology: (name) => {
-            if (name) {
-                dispatch(addTopology(name, undefined))
-            }
-            dispatch(closeNewTopologyModal())
-        },
-        onDuplicateTopology: (name, id) => {
-            if (name) {
-                dispatch(addTopology(name, id))
-            }
-            dispatch(closeNewTopologyModal())
-        },
-        onCancel: () => {
-            dispatch(closeNewTopologyModal())
-        },
+    const dispatch = useDispatch()
+    const onCreateTopology = (name) => {
+        if (name) {
+            dispatch(addTopology(name, undefined))
+        }
+        dispatch(closeNewTopologyModal())
+    }
+    const onDuplicateTopology = (name, id) => {
+        if (name) {
+            dispatch(addTopology(name, id))
+        }
+        dispatch(closeNewTopologyModal())
+    }
+    const onCancel = () => {
+        dispatch(closeNewTopologyModal())
     }
-}
 
-const NewTopologyModal = connect(mapStateToProps, mapDispatchToProps)(NewTopologyModalComponent)
+    return (
+        <NewTopologyModalComponent
+            show={show}
+            topologies={topologies}
+            onCreateTopology={onCreateTopology}
+            onDuplicateTopology={onDuplicateTopology}
+            onCancel={onCancel}
+        />
+    )
+}
 
 export default NewTopologyModal