Add new left sidebar, move topology controls

2 files changed, 75 insertions, 0 deletions

diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
new file mode 100644
index 00000000..d6e39ff6
--- /dev/null
+++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import Sidebar from '../Sidebar'
+import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
+
+const ProjectSidebarComponent = () => (
+        <Sidebar isRight={false}>
+            <TopologyListContainer/>
+            <h2>Portfolios</h2>
+        </Sidebar>
+    )
+
+export default ProjectSidebarComponent
diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
new file mode 100644
index 00000000..98615711
--- /dev/null
+++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../../../shapes'
+import FontAwesome from 'react-fontawesome'
+
+class TopologyListComponent extends React.Component {
+    static propTypes = {
+        show: PropTypes.bool.isRequired,
+        topologies: PropTypes.arrayOf(Shapes.Topology),
+        currentTopologyId: PropTypes.string,
+        onChooseTopology: PropTypes.func.isRequired,
+        onNewTopology: PropTypes.func.isRequired,
+        onDeleteTopology: PropTypes.func.isRequired,
+    }
+
+    onChoose(id) {
+        this.props.onChooseTopology(id)
+    }
+
+    onDuplicate() {
+        this.props.onNewTopology(
+            this.textInput.value,
+            this.originTopology.value,
+        )
+    }
+
+    onDelete(id) {
+        this.props.onDeleteTopology(id)
+    }
+
+    render() {
+        return (
+            <div className="pb-3">
+                <h2>
+                    Topologies
+                    <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}>
+                        <FontAwesome name="plus"/>
+                    </button>
+                </h2>
+
+                {this.props.topologies.map((topology, idx) => (
+                    <div key={topology._id} className="row mb-1">
+                        <div className={'col-8 align-self-center ' + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')}>
+                            {topology.name}
+                        </div>
+                        <div className="col-4 text-right">
+                            <span
+                                className="btn btn-outline-primary mr-1 fa fa-play"
+                                onClick={() => this.onChoose(topology._id)}
+                            />
+                            <span
+                                className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                                onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined}
+                            />
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+}
+
+export default TopologyListComponent