Migrate to Auth0 as Identity Provider

This pull request removes the hard dependency on Google for 
authenticating users and migrates to Auth0 as Identity Provider for OpenDC. 
This has as benefit that we can authenticate users without having to manage 
user data ourselves and do not have a dependency on Google accounts anymore. 

- Frontend cleanup:
   - Use CSS modules everywhere to encapsulate the styling of React components.
   - Perform all communication in the frontend via the REST API (as opposed to WebSockets).
      The original approach was aimed at collaborative editing, but made normal operations 
      harder to implement and debug. If we want to implement collaborative editing in the 
      future, we can expose only a small WebSocket API specifically for collaborative editing.
   - Move to FontAwesome 5 (using the official React libraries)
   - Use Reactstrap where possible. Previously, we mixed raw Bootstrap classes with 
      Reactstrap, which is confusing.
   - Reduce the scope of the Redux state. Some state in the frontend application can be 
      kept locally and does not need to be managed by Redux.
   - Migrate from Create React App (CRA) to Next.js since it allows us to pre-render
      multiple pages as well as opt-in to Server Side Rendering.
   - Remove the Google login and use Auth0 for authentication now.
   - Use Node 16
- Backend cleanup:
   - Remove Socket.IO endpoint from backend, since it is not needed by the frontend 
      anymore. Removing it reduces the attack surface of OpenDC as well as the maintenance efforts.
   - Use Auth0 JWT token for authorizing API accesses
   - Refactor API endpoints to use Flask Restful as opposed to our custom in-house 
      routing logic. Previously, this was needed to support the Socket.IO endpoint, 
      but increases maintenance effort.
   - Expose Swagger UI from API
   - Use Python 3.9 and uwsgi to host Flask application
- Actualize OpenAPI schema and update to version 3.0.

**Breaking API Changes**

* This pull request removes the users collection from the database table. Instead, we now use the user identifier passed by Auth0 to identify the data that belongs to a user.

32 files changed, 433 insertions, 158 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/App.js b/opendc-web/opendc-web-ui/src/containers/app/App.js
new file mode 100644
index 00000000..ec9714ce
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/containers/app/App.js
@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import Head from 'next/head'
+import { HotKeys } from 'react-hotkeys'
+import { useDispatch, useSelector } from 'react-redux'
+import { openPortfolioSucceeded } from '../../redux/actions/portfolios'
+import { openProjectSucceeded } from '../../redux/actions/projects'
+import ToolPanelComponent from '../../components/app/map/controls/ToolPanelComponent'
+import LoadingScreen from '../../components/app/map/LoadingScreen'
+import ScaleIndicatorContainer from '../../containers/app/map/controls/ScaleIndicatorContainer'
+import MapStage from '../../containers/app/map/MapStage'
+import TopologySidebarContainer from '../../containers/app/sidebars/topology/TopologySidebarContainer'
+import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
+import ProjectSidebarContainer from '../../containers/app/sidebars/project/ProjectSidebarContainer'
+import { openScenarioSucceeded } from '../../redux/actions/scenarios'
+import PortfolioResultsContainer from '../../containers/app/results/PortfolioResultsContainer'
+import { KeymapConfiguration } from '../../hotkeys'
+import { useRequireAuth } from '../../auth'
+import { useActiveProject } from '../../data/project'
+
+const App = ({ projectId, portfolioId, scenarioId }) => {
+    useRequireAuth()
+
+    const projectName = useActiveProject()?.name
+    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
+
+    const dispatch = useDispatch()
+    useEffect(() => {
+        if (scenarioId) {
+            dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId))
+        } else if (portfolioId) {
+            dispatch(openPortfolioSucceeded(projectId, portfolioId))
+        } else {
+            dispatch(openProjectSucceeded(projectId))
+        }
+    }, [projectId, portfolioId, scenarioId, dispatch])
+
+    const constructionElements = topologyIsLoading ? (
+        <div className="full-height d-flex align-items-center justify-content-center">
+            <LoadingScreen />
+        </div>
+    ) : (
+        <div className="full-height">
+            <MapStage />
+            <ScaleIndicatorContainer />
+            <ToolPanelComponent />
+            <ProjectSidebarContainer />
+            <TopologySidebarContainer />
+        </div>
+    )
+
+    const portfolioElements = (
+        <div className="full-height app-page-container">
+            <ProjectSidebarContainer />
+            <div className="container-fluid full-height">
+                <PortfolioResultsContainer />
+            </div>
+        </div>
+    )
+
+    const scenarioElements = (
+        <div className="full-height app-page-container">
+            <ProjectSidebarContainer />
+            <div className="container-fluid full-height">
+                <h2>Scenario loading</h2>
+            </div>
+        </div>
+    )
+
+    const title = projectName ? projectName + ' - OpenDC' : 'Simulation - OpenDC'
+
+    return (
+        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="page-container full-height">
+            <Head>
+                <title>{title}</title>
+            </Head>
+            <AppNavbarContainer fullWidth={true} />
+            {scenarioId ? scenarioElements : portfolioId ? portfolioElements : constructionElements}
+        </HotKeys>
+    )
+}
+
+App.propTypes = {
+    projectId: PropTypes.string.isRequired,
+    portfolioId: PropTypes.string,
+    scenarioId: PropTypes.string,
+}
+
+export default App
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
index 651b3459..bac24c8b 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../actions/interaction-level'
+import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
 import GrayLayer from '../../../components/app/map/elements/GrayLayer'
 
 const GrayContainer = () => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
index 61d123e8..91ceb35d 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
@@ -1,14 +1,17 @@
 import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../actions/map'
+import { useDispatch } from 'react-redux'
+import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../redux/actions/map'
 import MapStageComponent from '../../../components/app/map/MapStageComponent'
+import { useMapDimensions, useMapPosition } from '../../../data/map'
 
 const MapStage = () => {
-    const { position, dimensions } = useSelector((state) => state.map)
+    const position = useMapPosition()
+    const dimensions = useMapDimensions()
     const dispatch = useDispatch()
     const zoomInOnPositionA = (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y))
     const setMapPositionWithBoundsCheckA = (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y))
     const setMapDimensionsA = (width, height) => dispatch(setMapDimensions(width, height))
+
     return (
         <MapStageComponent
             mapPosition={position}
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
index 877233fc..52d48317 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { goFromBuildingToRoom } from '../../../actions/interaction-level'
+import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
 import RoomGroup from '../../../components/app/map/groups/RoomGroup'
 
 const RoomContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
index ad7301a7..f97e89a1 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { goFromRoomToRack } from '../../../actions/interaction-level'
+import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
 import TileGroup from '../../../components/app/map/groups/TileGroup'
 
 const TileContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
index 612ca41c..e7ab3c72 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
@@ -1,11 +1,10 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
+import { useActiveTopology } from '../../../data/topology'
 
 const TopologyContainer = () => {
-    const topology = useSelector(
-        (state) => state.currentTopologyId !== '-1' && state.objects.topology[state.currentTopologyId]
-    )
+    const topology = useActiveTopology()
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
index e9d58b9f..a10eea22 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
 import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent'
+import { useMapScale } from '../../../../data/map'
 
 const ScaleIndicatorContainer = (props) => {
-    const scale = useSelector((state) => state.map.scale)
+    const scale = useMapScale()
     return <ScaleIndicatorComponent {...props} scale={scale} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
index a18dfd5b..a39c6077 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
@@ -1,11 +1,12 @@
 import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { zoomInOnCenter } from '../../../../actions/map'
+import { useDispatch } from 'react-redux'
+import { zoomInOnCenter } from '../../../../redux/actions/map'
 import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent'
+import { useMapScale } from '../../../../data/map'
 
 const ZoomControlContainer = () => {
     const dispatch = useDispatch()
-    const scale = useSelector((state) => state.map.scale)
+    const scale = useMapScale()
     return <ZoomControlComponent mapScale={scale} zoomInOnCenter={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
index 5f701b4b..633ebcc7 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
@@ -1,9 +1,10 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
 import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent'
+import { useMapPosition, useMapScale } from '../../../../data/map'
 
 const MapLayer = (props) => {
-    const { position, scale } = useSelector((state) => state.map)
+    const position = useMapPosition()
+    const scale = useMapScale()
     return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
index cefdf35c..8e934a01 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { addRackToTile } from '../../../../actions/topology/room'
+import { addRackToTile } from '../../../../redux/actions/topology/room'
 import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent'
 import { findTileWithPosition } from '../../../../util/tile-calculations'
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
index 2717d890..1bfadb6d 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { toggleTileAtLocation } from '../../../../actions/topology/building'
+import { toggleTileAtLocation } from '../../../../redux/actions/topology/building'
 import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent'
 import {
     deriveValidNextTilePositions,
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
index 86f465b6..a36997ff 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
@@ -1,34 +1,23 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
 import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent'
-import { deletePortfolio, setCurrentPortfolio } from '../../../../actions/portfolios'
-import { openNewPortfolioModal } from '../../../../actions/modals/portfolios'
+import { addPortfolio, deletePortfolio, setCurrentPortfolio } from '../../../../redux/actions/portfolios'
 import { getState } from '../../../../util/state-utils'
-import { setCurrentTopology } from '../../../../actions/topology/building'
+import { setCurrentTopology } from '../../../../redux/actions/topology/building'
+import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent'
+import { useActivePortfolio, useActiveProject, usePortfolios } from '../../../../data/project'
 
-const PortfolioListContainer = (props) => {
-    const state = useSelector((state) => {
-        let portfolios = state.objects.project[state.currentProjectId]
-            ? state.objects.project[state.currentProjectId].portfolioIds.map((t) => state.objects.portfolio[t])
-            : []
-        if (portfolios.filter((t) => !t).length > 0) {
-            portfolios = []
-        }
-
-        return {
-            currentProjectId: state.currentProjectId,
-            currentPortfolioId: state.currentPortfolioId,
-            portfolios,
-        }
-    })
+const PortfolioListContainer = () => {
+    const currentProjectId = useActiveProject()?._id
+    const currentPortfolioId = useActivePortfolio()?._id
+    const portfolios = usePortfolios(currentProjectId)
 
     const dispatch = useDispatch()
-    const history = useHistory()
+    const [isVisible, setVisible] = useState(false)
+    const router = useRouter()
     const actions = {
-        onNewPortfolio: () => {
-            dispatch(openNewPortfolioModal())
-        },
+        onNewPortfolio: () => setVisible(true),
         onChoosePortfolio: (portfolioId) => {
             dispatch(setCurrentPortfolio(portfolioId))
         },
@@ -37,11 +26,32 @@ const PortfolioListContainer = (props) => {
                 const state = await getState(dispatch)
                 dispatch(deletePortfolio(id))
                 dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0]))
-                history.push(`/projects/${state.currentProjectId}`)
+                router.push(`/projects/${state.currentProjectId}`)
             }
         },
     }
-    return <PortfolioListComponent {...props} {...state} {...actions} />
+    const callback = (name, targets) => {
+        if (name) {
+            dispatch(
+                addPortfolio({
+                    name,
+                    targets,
+                })
+            )
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <PortfolioListComponent
+                currentProjectId={currentProjectId}
+                currentPortfolioId={currentPortfolioId}
+                portfolios={portfolios}
+                {...actions}
+            />
+            <NewPortfolioModalComponent callback={callback} show={isVisible} />
+        </>
+    )
 }
 
 export default PortfolioListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js
index 35e6c52b..06c7f0f7 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { useLocation } from 'react-router-dom'
+import { useRouter } from 'next/router'
 import ProjectSidebarComponent from '../../../../components/app/sidebars/project/ProjectSidebarComponent'
 import { isCollapsible } from '../../../../util/sidebar-space'
 
 const ProjectSidebarContainer = (props) => {
-    const location = useLocation()
-    return <ProjectSidebarComponent collapsible={isCollapsible(location)} {...props} />
+    const router = useRouter()
+    return <ProjectSidebarComponent collapsible={isCollapsible(router)} {...props} />
 }
 
 export default ProjectSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
index 18d0735e..e1be51dc 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
@@ -1,28 +1,27 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
 import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent'
-import { openNewScenarioModal } from '../../../../actions/modals/scenarios'
-import { deleteScenario, setCurrentScenario } from '../../../../actions/scenarios'
-import { setCurrentPortfolio } from '../../../../actions/portfolios'
+import { addScenario, deleteScenario, setCurrentScenario } from '../../../../redux/actions/scenarios'
+import { setCurrentPortfolio } from '../../../../redux/actions/portfolios'
+import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent'
+import { useProjectTopologies } from '../../../../data/topology'
+import { useActiveScenario, useActiveProject, useScenarios } from '../../../../data/project'
+import { useSchedulers, useTraces } from '../../../../data/experiments'
 
-const ScenarioListContainer = ({ portfolioId, children }) => {
-    const currentProjectId = useSelector((state) => state.currentProjectId)
-    const currentScenarioId = useSelector((state) => state.currentScenarioId)
-    const scenarios = useSelector((state) => {
-        let scenarios = state.objects.portfolio[portfolioId]
-            ? state.objects.portfolio[portfolioId].scenarioIds.map((t) => state.objects.scenario[t])
-            : []
-        if (scenarios.filter((t) => !t).length > 0) {
-            scenarios = []
-        }
-
-        return scenarios
-    })
+const ScenarioListContainer = ({ portfolioId }) => {
+    const currentProjectId = useActiveProject()?._id
+    const currentScenarioId = useActiveScenario()?._id
+    const scenarios = useScenarios(portfolioId)
+    const topologies = useProjectTopologies()
+    const traces = useTraces()
+    const schedulers = useSchedulers()
 
     const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+
     const onNewScenario = (currentPortfolioId) => {
         dispatch(setCurrentPortfolio(currentPortfolioId))
-        dispatch(openNewScenarioModal())
+        setVisible(true)
     }
     const onChooseScenario = (portfolioId, scenarioId) => {
         dispatch(setCurrentScenario(portfolioId, scenarioId))
@@ -32,17 +31,43 @@ const ScenarioListContainer = ({ portfolioId, children }) => {
             dispatch(deleteScenario(id))
         }
     }
+    const callback = (name, portfolioId, trace, topology, operational) => {
+        if (name) {
+            dispatch(
+                addScenario({
+                    portfolioId,
+                    name,
+                    trace,
+                    topology,
+                    operational,
+                })
+            )
+        }
+
+        setVisible(false)
+    }
 
     return (
-        <ScenarioListComponent
-            portfolioId={portfolioId}
-            currentProjectId={currentProjectId}
-            currentScenarioId={currentScenarioId}
-            scenarios={scenarios}
-            onNewScenario={onNewScenario}
-            onChooseScenario={onChooseScenario}
-            onDeleteScenario={onDeleteScenario}
-        />
+        <>
+            <ScenarioListComponent
+                portfolioId={portfolioId}
+                currentProjectId={currentProjectId}
+                currentScenarioId={currentScenarioId}
+                scenarios={scenarios}
+                onNewScenario={onNewScenario}
+                onChooseScenario={onChooseScenario}
+                onDeleteScenario={onDeleteScenario}
+            />
+            <NewScenarioModalComponent
+                show={isVisible}
+                currentPortfolioId={portfolioId}
+                currentPortfolioScenarioIds={scenarios.map((s) => s._id)}
+                traces={traces}
+                schedulers={schedulers}
+                topologies={topologies}
+                callback={callback}
+            />
+        </>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
index 954284a6..266ca495 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
@@ -1,53 +1,64 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
 import TopologyListComponent from '../../../../components/app/sidebars/project/TopologyListComponent'
-import { setCurrentTopology } from '../../../../actions/topology/building'
-import { openNewTopologyModal } from '../../../../actions/modals/topology'
-import { useHistory } from 'react-router-dom'
+import { setCurrentTopology } from '../../../../redux/actions/topology/building'
+import { useRouter } from 'next/router'
 import { getState } from '../../../../util/state-utils'
-import { deleteTopology } from '../../../../actions/topologies'
+import { addTopology, deleteTopology } from '../../../../redux/actions/topologies'
+import NewTopologyModalComponent from '../../../../components/modals/custom-components/NewTopologyModalComponent'
+import { useActiveTopology, useProjectTopologies } from '../../../../data/topology'
 
 const TopologyListContainer = () => {
     const dispatch = useDispatch()
-    const history = useHistory()
-
-    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 topologies
-    })
-    const currentTopologyId = useSelector((state) => state.currentTopologyId)
+    const router = useRouter()
+    const topologies = useProjectTopologies()
+    const currentTopologyId = useActiveTopology()?._id
+    const [isVisible, setVisible] = useState(false)
 
     const onChooseTopology = async (id) => {
         dispatch(setCurrentTopology(id))
         const state = await getState(dispatch)
-        history.push(`/projects/${state.currentProjectId}`)
-    }
-    const onNewTopology = () => {
-        dispatch(openNewTopologyModal())
+        router.push(`/projects/${state.currentProjectId}`)
     }
     const onDeleteTopology = async (id) => {
         if (id) {
             const state = await getState(dispatch)
             dispatch(deleteTopology(id))
             dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0]))
-            history.push(`/projects/${state.currentProjectId}`)
+            router.push(`/projects/${state.currentProjectId}`)
+        }
+    }
+    const onCreateTopology = (name) => {
+        if (name) {
+            dispatch(addTopology(name, undefined))
+        }
+        setVisible(false)
+    }
+    const onDuplicateTopology = (name, id) => {
+        if (name) {
+            dispatch(addTopology(name, id))
         }
+        setVisible(false)
     }
+    const onCancel = () => setVisible(false)
 
     return (
-        <TopologyListComponent
-            topologies={topologies}
-            currentTopologyId={currentTopologyId}
-            onChooseTopology={onChooseTopology}
-            onNewTopology={onNewTopology}
-            onDeleteTopology={onDeleteTopology}
-        />
+        <>
+            <TopologyListComponent
+                topologies={topologies}
+                currentTopologyId={currentTopologyId}
+                onChooseTopology={onChooseTopology}
+                onNewTopology={() => setVisible(true)}
+                onDeleteTopology={onDeleteTopology}
+            />
+            <NewTopologyModalComponent
+                show={isVisible}
+                topologies={topologies}
+                onCreateTopology={onCreateTopology}
+                onDuplicateTopology={onDuplicateTopology}
+                onCancel={onCancel}
+            />
+        </>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js
index ea36539c..96f42a44 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js
@@ -4,7 +4,7 @@ import {
     cancelNewRoomConstruction,
     finishNewRoomConstruction,
     startNewRoomConstruction,
-} from '../../../../../actions/topology/building'
+} from '../../../../../redux/actions/topology/building'
 import StartNewRoomConstructionComponent from '../../../../../components/app/sidebars/topology/building/NewRoomConstructionComponent'
 
 const NewRoomConstructionButton = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js
index 46862472..ea250767 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level'
+import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level'
 import BackToRackComponent from '../../../../../components/app/sidebars/topology/machine/BackToRackComponent'
 
 const BackToRackContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js
index 1510a436..54e406f4 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js
@@ -1,11 +1,34 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { openDeleteMachineModal } from '../../../../../actions/modals/topology'
-import DeleteMachineComponent from '../../../../../components/app/sidebars/topology/machine/DeleteMachineComponent'
+import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
+import { deleteMachine } from '../../../../../redux/actions/topology/machine'
+import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
 
-const DeleteMachineContainer = (props) => {
+const DeleteMachineContainer = () => {
     const dispatch = useDispatch()
-    return <DeleteMachineComponent {...props} onClick={() => dispatch(openDeleteMachineModal())} />
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteMachine())
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button color="danger" outline block onClick={() => setVisible(true)}>
+                <FontAwesomeIcon icon={faTrash} className="mr-2" />
+                Delete this machine
+            </Button>
+            <ConfirmationModal
+                title="Delete this machine"
+                message="Are you sure you want to delete this machine?"
+                show={isVisible}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default DeleteMachineContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js
index 6f4285b2..9cbb32c5 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js
@@ -1,10 +1,9 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import MachineNameComponent from '../../../../../components/app/sidebars/topology/machine/MachineNameComponent'
 
-const MachineNameContainer = (props) => {
+const MachineNameContainer = () => {
     const position = useSelector((state) => state.interactionLevel.position)
-    return <MachineNameComponent {...props} position={position} />
+    return <h2>Machine at slot {position}</h2>
 }
 
 export default MachineNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js
index 3795cdff..0f85aa76 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { addUnit } from '../../../../../actions/topology/machine'
+import { addUnit } from '../../../../../redux/actions/topology/machine'
 import UnitAddComponent from '../../../../../components/app/sidebars/topology/machine/UnitAddComponent'
 
 const UnitAddContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js
index 3d24859e..acb16a21 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { deleteUnit } from '../../../../../actions/topology/machine'
+import { deleteUnit } from '../../../../../redux/actions/topology/machine'
 import UnitComponent from '../../../../../components/app/sidebars/topology/machine/UnitComponent'
 
 const UnitContainer = ({ unitId, unitType }) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
index 3708e33e..c2a0fc48 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { addPrefab } from '../../../../../actions/prefabs'
+import { addPrefab } from '../../../../../redux/actions/prefabs'
 import AddPrefabComponent from '../../../../../components/app/sidebars/topology/rack/AddPrefabComponent'
 
 const AddPrefabContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
index 93bb749f..a98728a6 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level'
+import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level'
 import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent'
 
 const BackToRoomContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
index de46e491..4463530e 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -1,11 +1,34 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { openDeleteRackModal } from '../../../../../actions/modals/topology'
-import DeleteRackComponent from '../../../../../components/app/sidebars/topology/rack/DeleteRackComponent'
+import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
+import { deleteRack } from '../../../../../redux/actions/topology/rack'
+import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
 
-const DeleteRackContainer = (props) => {
+const DeleteRackContainer = () => {
     const dispatch = useDispatch()
-    return <DeleteRackComponent {...props} onClick={() => dispatch(openDeleteRackModal())} />
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRack())
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button color="danger" outline block onClick={() => setVisible(true)}>
+                <FontAwesomeIcon icon={faTrash} className="mr-2" />
+                Delete this rack
+            </Button>
+            <ConfirmationModal
+                title="Delete this rack"
+                message="Are you sure you want to delete this rack?"
+                show={isVisible}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
index 5bb2c784..2134e411 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { addMachine } from '../../../../../actions/topology/rack'
+import { addMachine } from '../../../../../redux/actions/topology/rack'
 import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent'
 
 const EmptySlotContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
index 149b4d18..7d8e32c1 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { goFromRackToMachine } from '../../../../../actions/interaction-level'
+import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
 import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent'
 
 const MachineContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
index 7dfdb473..eaa1e78e 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
@@ -1,14 +1,33 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { openEditRackNameModal } from '../../../../../actions/modals/topology'
-import RackNameComponent from '../../../../../components/app/sidebars/topology/rack/RackNameComponent'
+import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
+import TextInputModal from '../../../../../components/modals/TextInputModal'
+import { editRackName } from '../../../../../redux/actions/topology/rack'
 
-const RackNameContainer = (props) => {
+const RackNameContainer = () => {
+    const [isVisible, setVisible] = useState(false)
     const rackName = useSelector(
         (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
     )
     const dispatch = useDispatch()
-    return <RackNameComponent {...props} rackName={rackName} onEdit={() => dispatch(openEditRackNameModal())} />
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRackName(name))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <NameComponent name={rackName} onEdit={() => setVisible(true)} />
+            <TextInputModal
+                title="Edit rack name"
+                label="Rack name"
+                show={isVisible}
+                initialValue={rackName}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
index a48bf0a7..9fa1e95f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level'
+import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level'
 import BackToBuildingComponent from '../../../../../components/app/sidebars/topology/room/BackToBuildingComponent'
 
 const BackToBuildingContainer = () => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
index 6a80e9b0..0fbbb036 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
@@ -1,12 +1,34 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { openDeleteRoomModal } from '../../../../../actions/modals/topology'
-import DeleteRoomComponent from '../../../../../components/app/sidebars/topology/room/DeleteRoomComponent'
+import { Button } from 'reactstrap'
+import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
+import { deleteRoom } from '../../../../../redux/actions/topology/room'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
 
-const DeleteRoomContainer = (props) => {
+const DeleteRoomContainer = () => {
     const dispatch = useDispatch()
-    const onClick = () => dispatch(openDeleteRoomModal())
-    return <DeleteRoomComponent {...props} onClick={onClick} />
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRoom())
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button color="danger" outline block onClick={() => setVisible(true)}>
+                <FontAwesomeIcon icon={faTrash} className="mr-2" />
+                Delete this room
+            </Button>
+            <ConfirmationModal
+                title="Delete this room"
+                message="Are you sure you want to delete this room?"
+                show={isVisible}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
index 37027fc5..ec4f586b 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
@@ -1,9 +1,11 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { finishRoomEdit, startRoomEdit } from '../../../../../actions/topology/building'
-import EditRoomComponent from '../../../../../components/app/sidebars/topology/room/EditRoomComponent'
+import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
+import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck, faPencilAlt } from '@fortawesome/free-solid-svg-icons'
 
-const EditRoomContainer = (props) => {
+const EditRoomContainer = () => {
     const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
     const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
 
@@ -11,14 +13,22 @@ const EditRoomContainer = (props) => {
     const onEdit = () => dispatch(startRoomEdit())
     const onFinish = () => dispatch(finishRoomEdit())
 
-    return (
-        <EditRoomComponent
-            {...props}
-            onEdit={onEdit}
-            onFinish={onFinish}
-            isEditing={isEditing}
-            isInRackConstructionMode={isInRackConstructionMode}
-        />
+    return isEditing ? (
+        <Button color="info" outline block onClick={onFinish}>
+            <FontAwesomeIcon icon={faCheck} className="mr-2" />
+            Finish editing room
+        </Button>
+    ) : (
+        <Button
+            color="info"
+            outline
+            block
+            disabled={isInRackConstructionMode}
+            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
+        >
+            <FontAwesomeIcon icon={faPencilAlt} className="mr-2" />
+            Edit the tiles of this room
+        </Button>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
index 726e9d37..79584e98 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { startRackConstruction, stopRackConstruction } from '../../../../../actions/topology/room'
+import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room'
 import RackConstructionComponent from '../../../../../components/app/sidebars/topology/room/RackConstructionComponent'
 
 const RackConstructionContainer = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
index 1f53aeb6..3b35a849 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
@@ -1,13 +1,31 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { openEditRoomNameModal } from '../../../../../actions/modals/topology'
-import RoomNameComponent from '../../../../../components/app/sidebars/topology/room/RoomNameComponent'
+import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
+import TextInputModal from '../../../../../components/modals/TextInputModal'
+import { editRoomName } from '../../../../../redux/actions/topology/room'
 
-const RoomNameContainer = (props) => {
+const RoomNameContainer = () => {
+    const [isVisible, setVisible] = useState(false)
     const roomName = useSelector((state) => state.objects.room[state.interactionLevel.roomId].name)
     const dispatch = useDispatch()
-    const onEdit = () => dispatch(openEditRoomNameModal())
-    return <RoomNameComponent {...props} onEdit={onEdit} roomName={roomName} />
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRoomName(name))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <NameComponent name={roomName} onEdit={() => setVisible(true)} />
+            <TextInputModal
+                title="Edit room name"
+                label="Room name"
+                show={isVisible}
+                initialValue={roomName}
+                callback={callback}
+            />
+        </>
+    )
 }
 
 export default RoomNameContainer