From 890cd3f7028bfccd77b0d04670f7bc07293ed383 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Tue, 7 Jul 2020 11:20:43 +0200
Subject: Add new left sidebar, move topology controls

---
 frontend/src/pages/App.js         | 23 ++++++--------
 frontend/src/pages/Experiments.js | 65 ---------------------------------------
 frontend/src/pages/Profile.js     |  4 +--
 frontend/src/pages/Projects.js    |  4 +--
 4 files changed, 14 insertions(+), 82 deletions(-)
 delete mode 100644 frontend/src/pages/Experiments.js

(limited to 'frontend/src/pages')

diff --git a/frontend/src/pages/App.js b/frontend/src/pages/App.js
index 5075cec0..8f99d1bd 100644
--- a/frontend/src/pages/App.js
+++ b/frontend/src/pages/App.js
@@ -8,18 +8,19 @@ import { openProjectSucceeded } from '../actions/projects'
 import { resetCurrentTopology } from '../actions/topology/building'
 import ToolPanelComponent from '../components/app/map/controls/ToolPanelComponent'
 import LoadingScreen from '../components/app/map/LoadingScreen'
-import AppNavbar from '../components/navigation/AppNavbar'
 import ScaleIndicatorContainer from '../containers/app/map/controls/ScaleIndicatorContainer'
 import MapStage from '../containers/app/map/MapStage'
-import TopologySidebar from '../containers/app/sidebars/topology/TopologySidebar'
+import TopologySidebarContainer from '../containers/app/sidebars/topology/TopologySidebarContainer'
 import DeleteMachineModal from '../containers/modals/DeleteMachineModal'
 import DeleteRackModal from '../containers/modals/DeleteRackModal'
 import DeleteRoomModal from '../containers/modals/DeleteRoomModal'
 import EditRackNameModal from '../containers/modals/EditRackNameModal'
 import EditRoomNameModal from '../containers/modals/EditRoomNameModal'
 import KeymapConfiguration from '../shortcuts/keymap'
-import ChangeTopologyModal from '../containers/modals/ChangeTopologyModal'
-import { openChangeTopologyModal } from '../actions/modals/topology'
+import NewTopologyModal from '../containers/modals/NewTopologyModal'
+import { openNewTopologyModal } from '../actions/modals/topology'
+import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
+import ProjectSidebarContainer from '../containers/app/sidebars/project/ProjectSidebarContainer'
 
 const shortcutManager = new ShortcutManager(KeymapConfiguration)
 
@@ -50,12 +51,7 @@ class AppComponent extends React.Component {
                 title={this.props.projectName ? this.props.projectName + ' - OpenDC' : 'Simulation - OpenDC'}
             >
                 <div className="page-container full-height">
-                    <AppNavbar
-                        projectId={this.props.projectId}
-                        inProject={true}
-                        fullWidth={true}
-                        onViewTopologies={this.props.onViewTopologies}
-                    />
+                    <AppNavbarContainer fullWidth={true} />
                     {this.props.topologyIsLoading ? (
                         <div className="full-height d-flex align-items-center justify-content-center">
                             <LoadingScreen/>
@@ -65,10 +61,11 @@ class AppComponent extends React.Component {
                             <MapStage/>
                             <ScaleIndicatorContainer/>
                             <ToolPanelComponent/>
-                            <TopologySidebar/>
+                            <ProjectSidebarContainer/>
+                            <TopologySidebarContainer/>
                         </div>
                     )}
-                    <ChangeTopologyModal/>
+                    <NewTopologyModal/>
                     <EditRoomNameModal/>
                     <DeleteRoomModal/>
                     <EditRackNameModal/>
@@ -96,7 +93,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         resetCurrentTopology: () => dispatch(resetCurrentTopology()),
         openProjectSucceeded: (id) => dispatch(openProjectSucceeded(id)),
-        onViewTopologies: () => dispatch(openChangeTopologyModal()),
+        onViewTopologies: () => dispatch(openNewTopologyModal()),
         openExperimentSucceeded: (projectId, experimentId) =>
             dispatch(openExperimentSucceeded(projectId, experimentId)),
     }
diff --git a/frontend/src/pages/Experiments.js b/frontend/src/pages/Experiments.js
deleted file mode 100644
index 66362299..00000000
--- a/frontend/src/pages/Experiments.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import DocumentTitle from 'react-document-title'
-import { connect } from 'react-redux'
-import { fetchExperimentsOfProject } from '../actions/experiments'
-import { openProjectSucceeded } from '../actions/projects'
-import AppNavbar from '../components/navigation/AppNavbar'
-import ExperimentListContainer from '../containers/experiments/ExperimentListContainer'
-import NewExperimentButtonContainer from '../containers/experiments/NewExperimentButtonContainer'
-import NewExperimentModal from '../containers/modals/NewExperimentModal'
-
-class ExperimentsComponent extends React.Component {
-    static propTypes = {
-        projectId: PropTypes.string.isRequired,
-        projectName: PropTypes.string,
-    }
-
-    componentDidMount() {
-        this.props.storeProjectId(this.props.projectId)
-        this.props.fetchExperimentsOfProject(this.props.projectId)
-    }
-
-    render() {
-        return (
-            <DocumentTitle
-                title={
-                    this.props.projectName
-                        ? 'Experiments - ' + this.props.projectName + ' - OpenDC'
-                        : 'Experiments - OpenDC'
-                }
-            >
-                <div className="full-height">
-                    <AppNavbar projectId={this.props.projectId} inProject={true} fullWidth={true}/>
-                    <div className="container text-page-container full-height">
-                        <ExperimentListContainer/>
-                        <NewExperimentButtonContainer/>
-                    </div>
-                    <NewExperimentModal/>
-                </div>
-            </DocumentTitle>
-        )
-    }
-}
-
-const mapStateToProps = (state) => {
-    let projectName = undefined
-    if (state.currentProjectId !== '-1' && state.objects.project[state.currentProjectId]) {
-        projectName = state.objects.project[state.currentProjectId].name
-    }
-
-    return {
-        projectName,
-    }
-}
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        storeProjectId: (id) => dispatch(openProjectSucceeded(id)),
-        fetchExperimentsOfProject: (id) => dispatch(fetchExperimentsOfProject(id)),
-    }
-}
-
-const Experiments = connect(mapStateToProps, mapDispatchToProps)(ExperimentsComponent)
-
-export default Experiments
diff --git a/frontend/src/pages/Profile.js b/frontend/src/pages/Profile.js
index 00bf903e..527dc721 100644
--- a/frontend/src/pages/Profile.js
+++ b/frontend/src/pages/Profile.js
@@ -2,13 +2,13 @@ import React from 'react'
 import DocumentTitle from 'react-document-title'
 import { connect } from 'react-redux'
 import { openDeleteProfileModal } from '../actions/modals/profile'
-import AppNavbar from '../components/navigation/AppNavbar'
 import DeleteProfileModal from '../containers/modals/DeleteProfileModal'
+import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
 
 const ProfileContainer = ({ onDelete }) => (
     <DocumentTitle title="My Profile - OpenDC">
         <div className="full-height">
-            <AppNavbar inProject={false} fullWidth={false}/>
+            <AppNavbarContainer fullWidth={false}/>
             <div className="container text-page-container full-height">
                 <button className="btn btn-danger mb-2 ml-auto mr-auto" style={{ maxWidth: 300 }} onClick={onDelete}>
                     Delete my account on OpenDC
diff --git a/frontend/src/pages/Projects.js b/frontend/src/pages/Projects.js
index 450ff695..f4af10c3 100644
--- a/frontend/src/pages/Projects.js
+++ b/frontend/src/pages/Projects.js
@@ -3,11 +3,11 @@ import DocumentTitle from 'react-document-title'
 import { connect } from 'react-redux'
 import { openNewProjectModal } from '../actions/modals/projects'
 import { fetchAuthorizationsOfCurrentUser } from '../actions/users'
-import AppNavbar from '../components/navigation/AppNavbar'
 import ProjectFilterPanel from '../components/projects/FilterPanel'
 import NewProjectModal from '../containers/modals/NewProjectModal'
 import NewProjectButtonContainer from '../containers/projects/NewProjectButtonContainer'
 import VisibleProjectList from '../containers/projects/VisibleProjectAuthList'
+import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
 
 class ProjectsContainer extends React.Component {
     componentDidMount() {
@@ -18,7 +18,7 @@ class ProjectsContainer extends React.Component {
         return (
             <DocumentTitle title="My Projects - OpenDC">
                 <div className="full-height">
-                    <AppNavbar inProject={false} fullWidth={false}/>
+                    <AppNavbarContainer fullWidth={false}/>
                     <div className="container text-page-container full-height">
                         <ProjectFilterPanel/>
                         <VisibleProjectList/>
-- 
cgit v1.2.3