From 3e661aa88716b670e5cca754ef2349b19ed81140 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 8 Nov 2018 17:25:22 +0200
Subject: [PATCH] New <thing> buttons in sidebar

---
 maubot/management/frontend/src/api.js         | 20 ++++++--
 .../frontend/src/dashboard/client/View.js     |  2 +-
 .../frontend/src/dashboard/index.js           | 47 ++++++++++++-------
 .../frontend/src/dashboard/instance/View.js   |  2 +-
 .../frontend/src/dashboard/plugin/View.js     |  2 +-
 maubot/management/frontend/src/res/plus.svg   |  5 ++
 .../frontend/src/style/pages/dashboard.sass   |  7 +--
 .../frontend/src/style/pages/sidebar.sass     | 12 ++++-
 8 files changed, 68 insertions(+), 29 deletions(-)
 create mode 100644 maubot/management/frontend/src/res/plus.svg

diff --git a/maubot/management/frontend/src/api.js b/maubot/management/frontend/src/api.js
index 7e1ef7f..d0acbb6 100644
--- a/maubot/management/frontend/src/api.js
+++ b/maubot/management/frontend/src/api.js
@@ -68,11 +68,21 @@ export async function getPlugin(id) {
     return await resp.json()
 }
 
-export async function uploadPlugin(data) {
-    const resp = await fetch(`${BASE_PATH}/plugins/upload`, {
-        headers: getHeaders("application/zip"),
-        body: data,
-    })
+export async function uploadPlugin(data, id) {
+    let resp
+    if (id) {
+        resp = await fetch(`${BASE_PATH}/plugin/${id}`, {
+            headers: getHeaders("applcation/zip"),
+            body: data,
+            method: "PUT",
+        })
+    } else {
+        resp = await fetch(`${BASE_PATH}/plugins/upload`, {
+            headers: getHeaders("application/zip"),
+            body: data,
+            method: "POST",
+        })
+    }
     return await resp.json()
 }
 
diff --git a/maubot/management/frontend/src/dashboard/client/View.js b/maubot/management/frontend/src/dashboard/client/View.js
index 5256549..b63d58f 100644
--- a/maubot/management/frontend/src/dashboard/client/View.js
+++ b/maubot/management/frontend/src/dashboard/client/View.js
@@ -17,7 +17,7 @@ import React, { Component } from "react"
 
 class ClientView extends Component {
     render() {
-        return <div>{this.props.client.displayname}</div>
+        return <div>{this.props.displayname}</div>
     }
 }
 
diff --git a/maubot/management/frontend/src/dashboard/index.js b/maubot/management/frontend/src/dashboard/index.js
index 6e40a8f..77ea69b 100644
--- a/maubot/management/frontend/src/dashboard/index.js
+++ b/maubot/management/frontend/src/dashboard/index.js
@@ -14,8 +14,9 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React, { Component } from "react"
-import { Route, Redirect } from "react-router-dom"
+import { Route, Switch, Link } from "react-router-dom"
 import api from "../api"
+import { ReactComponent as Plus } from "../res/plus.svg"
 import InstanceListEntry from "./instance/ListEntry"
 import InstanceView from "./instance/View"
 import ClientListEntry from "./client/ListEntry"
@@ -62,41 +63,55 @@ class Dashboard extends Component {
         if (!entry) {
             return "Not found :("
         }
-        return React.createElement(type, { [field]: entry })
+        return React.createElement(type, entry)
     }
 
     render() {
         return <div className="dashboard">
-            <div className="title">
+            <Link to="/" className="title">
                 <img src="/favicon.png" alt=""/>
                 Maubot Manager
-            </div>
+            </Link>
             <div className="topbar">
                 {localStorage.username}
             </div>
             <nav className="sidebar">
                 <div className="instances list">
-                    <h3 className="title">Instances</h3>
+                    <div className="title">
+                        <h2>Instances</h2>
+                        <Link to="/new/instance"><Plus/></Link>
+                    </div>
                     {this.renderList("instance", InstanceListEntry)}
                 </div>
                 <div className="clients list">
-                    <h3 className="title">Clients</h3>
+                    <div className="title">
+                        <h2>Clients</h2>
+                        <Link to="/new/client"><Plus/></Link>
+                    </div>
                     {this.renderList("client", ClientListEntry)}
                 </div>
                 <div className="plugins list">
-                    <h3 className="title">Plugins</h3>
+                    <div className="title">
+                        <h2>Plugins</h2>
+                        <Link to="/new/plugin"><Plus/></Link>
+                    </div>
                     {this.renderList("plugin", PluginListEntry)}
                 </div>
             </nav>
-            <main>
-                <Route path="/" exact render={() => "Hello, World!"}/>
-                <Route path="/instance/:id" render={({ match }) =>
-                    this.renderView("instance", InstanceView, match.params.id)}/>
-                <Route path="/client/:id" render={({ match }) =>
-                    this.renderView("client", ClientView, match.params.id)}/>
-                <Route path="/plugin/:id" render={({ match }) =>
-                    this.renderView("plugin", PluginView, match.params.id)}/>
-                <Route render={() => <Redirect to={{ pathname: "/" }}/>}/>
+            <main className="dashboard">
+                <Switch>
+                    <Route path="/" exact render={() => "Hello, World!"}/>
+                    <Route path="/new/instance" render={() => <InstanceView/>}/>
+                    <Route path="/new/client" render={() => <ClientView/>}/>
+                    <Route path="/new/plugin" render={() => <PluginView/>}/>
+                    <Route path="/instance/:id" render={({ match }) =>
+                        this.renderView("instance", InstanceView, match.params.id)}/>
+                    <Route path="/client/:id" render={({ match }) =>
+                        this.renderView("client", ClientView, match.params.id)}/>
+                    <Route path="/plugin/:id" render={({ match }) =>
+                        this.renderView("plugin", PluginView, match.params.id)}/>
+                    <Route render={() => "Not found :("}/>
+                </Switch>
             </main>
         </div>
     }
diff --git a/maubot/management/frontend/src/dashboard/instance/View.js b/maubot/management/frontend/src/dashboard/instance/View.js
index 69bdf9f..9a82cba 100644
--- a/maubot/management/frontend/src/dashboard/instance/View.js
+++ b/maubot/management/frontend/src/dashboard/instance/View.js
@@ -17,7 +17,7 @@ import React, { Component } from "react"
 
 class InstanceView extends Component {
     render() {
-        return <div>{this.props.instance.id}</div>
+        return <div>{this.props.id}</div>
     }
 }
 
diff --git a/maubot/management/frontend/src/dashboard/plugin/View.js b/maubot/management/frontend/src/dashboard/plugin/View.js
index 5b8ccbc..fbcf2c3 100644
--- a/maubot/management/frontend/src/dashboard/plugin/View.js
+++ b/maubot/management/frontend/src/dashboard/plugin/View.js
@@ -17,7 +17,7 @@ import React, { Component } from "react"
 
 class PluginView extends Component {
     render() {
-        return <div>{this.props.plugin.id}</div>
+        return <div>{this.props.id}</div>
     }
 }
 
diff --git a/maubot/management/frontend/src/res/plus.svg b/maubot/management/frontend/src/res/plus.svg
new file mode 100644
index 0000000..8030204
--- /dev/null
+++ b/maubot/management/frontend/src/res/plus.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
+   <path fill="#000000" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
+</svg>
diff --git a/maubot/management/frontend/src/style/pages/dashboard.sass b/maubot/management/frontend/src/style/pages/dashboard.sass
index 4be4111..dd001a0 100644
--- a/maubot/management/frontend/src/style/pages/dashboard.sass
+++ b/maubot/management/frontend/src/style/pages/dashboard.sass
@@ -19,7 +19,7 @@
     display: grid
     height: 100%
 
-    > .title
+    > a.title
         grid-area: title
         display: flex
         align-items: center
@@ -29,6 +29,7 @@
         font-weight: bold
 
         color: $text-color
+        text-decoration: none
 
         z-index: 1
 
@@ -40,7 +41,7 @@
             max-width: 2rem
             margin-right: .5rem
 
-    > .topbar
+    > div.topbar
         grid-area: topbar
         display: flex
         align-items: center
@@ -53,5 +54,5 @@
 
     @import "sidebar"
 
-    > .dashboard
+    > main.dashboard
         grid-area: main
diff --git a/maubot/management/frontend/src/style/pages/sidebar.sass b/maubot/management/frontend/src/style/pages/sidebar.sass
index a96a2cd..47bbfd7 100644
--- a/maubot/management/frontend/src/style/pages/sidebar.sass
+++ b/maubot/management/frontend/src/style/pages/sidebar.sass
@@ -24,8 +24,16 @@
     div.list
         margin-bottom: 1.5rem
 
-        h3.title
-            margin: 0
+        div.title
+            h2
+                margin: 0
+                display: inline-block
+
+                font-size: 1.25rem
+
+            a
+                display: inline-block
+                float: right
 
         a.entry
             display: block