Implement instance view

2018-11-10 16:33:12 +02:00 · 2018-11-10 16:33:12 +02:00 · b0d782906b
commit b0d782906b
parent 0a406ac071
13 changed files with 478 additions and 99 deletions
--- a/maubot/instance.py
+++ b/maubot/instance.py
@ -186,10 +186,27 @@ class PluginInstance:
        self.db_instance.primary_user = client.id
        self.client.references.remove(self)
        self.client = client
+        self.client.references.add(self)
        await self.start()
        self.log.debug(f"Primary user switched to {self.client.id}")
        return True

+    async def update_type(self, type: str) -> bool:
+        if not type or type == self.type:
+            return True
+        try:
+            loader = PluginLoader.find(type)
+        except KeyError:
+            return False
+        await self.stop()
+        self.db_instance.type = loader.id
+        self.loader.references.remove(self)
+        self.loader = loader
+        self.loader.references.add(self)
+        await self.start()
+        self.log.debug(f"Type switched to {self.loader.id}")
+        return True
+
    async def update_started(self, started: bool) -> None:
        if started is not None and started != self.started:
            await (self.start() if started else self.stop())
--- a/maubot/management/api/instance.py
+++ b/maubot/management/api/instance.py
@ -70,6 +70,7 @@ async def _update_instance(instance: PluginInstance, data: dict) -> web.Response
    instance.update_enabled(data.get("enabled", None))
    instance.update_config(data.get("config", None))
    await instance.update_started(data.get("started", None))
+    await instance.update_type(data.get("type", None))
    instance.db.commit()
    return resp.updated(instance.to_dict())

--- a/maubot/management/frontend/package.json
+++ b/maubot/management/frontend/package.json
@ -7,7 +7,8 @@
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-router-dom": "^4.3.1",
-    "react-scripts": "2.0.5"
+    "react-scripts": "2.0.5",
+    "react-select": "^2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/maubot/management/frontend/src/api.js
+++ b/maubot/management/frontend/src/api.js
@ -16,6 +16,40 @@

 export const BASE_PATH = "/_matrix/maubot/v1"

+function getHeaders(contentType = "application/json") {
+    return {
+        "Content-Type": contentType,
+        "Authorization": `Bearer ${localStorage.accessToken}`,
+    }
+}
+
+async function defaultDelete(type, id) {
+    const resp = await fetch(`${BASE_PATH}/${type}/${id}`, {
+        headers: getHeaders(),
+        method: "DELETE",
+    })
+    if (resp.status === 204) {
+        return {
+            "success": true,
+        }
+    }
+    return await resp.json()
+}
+
+async function defaultPut(type, entry, id = undefined) {
+    const resp = await fetch(`${BASE_PATH}/${type}/${id || entry.id}`, {
+        headers: getHeaders(),
+        body: JSON.stringify(entry),
+        method: "PUT",
+    })
+    return await resp.json()
+}
+
+async function defaultGet(url) {
+    const resp = await fetch(`${BASE_PATH}/${url}`, { headers: getHeaders() })
+    return await resp.json()
+}
+
 export async function login(username, password) {
    const resp = await fetch(`${BASE_PATH}/auth/login`, {
        method: "POST",
@ -27,13 +61,6 @@ export async function login(username, password) {
    return await resp.json()
 }

-function getHeaders(contentType = "application/json") {
-    return {
-        "Content-Type": contentType,
-        "Authorization": `Bearer ${localStorage.accessToken}`,
-    }
-}
-
 export async function ping() {
    const response = await fetch(`${BASE_PATH}/auth/ping`, {
        method: "POST",
@ -48,25 +75,13 @@ export async function ping() {
    throw json
 }

-export async function getInstances() {
-    const resp = await fetch(`${BASE_PATH}/instances`, { headers: getHeaders() })
-    return await resp.json()
-}
+export const getInstances = () => defaultGet("/instances")
+export const getInstance = id => defaultGet(`/instance/${id}`)
+export const putInstance = (instance, id) => defaultPut("instance", instance, id)
+export const deleteInstance = id => defaultDelete("instance", id)

-export async function getInstance(id) {
-    const resp = await fetch(`${BASE_PATH}/instance/${id}`, { headers: getHeaders() })
-    return await resp.json()
-}
-
-export async function getPlugins() {
-    const resp = await fetch(`${BASE_PATH}/plugins`, { headers: getHeaders() })
-    return await resp.json()
-}
-
-export async function getPlugin(id) {
-    const resp = await fetch(`${BASE_PATH}/plugin/${id}`, { headers: getHeaders() })
-    return await resp.json()
-}
+export const getPlugins = () => defaultGet("/plugins")
+export const getPlugin = id => defaultGet(`/plugin/${id}`)

 export async function uploadPlugin(data, id) {
    let resp
@ -86,15 +101,8 @@ export async function uploadPlugin(data, id) {
    return await resp.json()
 }

-export async function getClients() {
-    const resp = await fetch(`${BASE_PATH}/clients`, { headers: getHeaders() })
-    return await resp.json()
-}
-
-export async function getClient(id) {
-    const resp = await fetch(`${BASE_PATH}/client/${id}`, { headers: getHeaders() })
-    return await resp.json()
-}
+export const getClients = () => defaultGet("/clients")
+export const getClient = id => defaultGet(`/clients/${id}`)

 export async function uploadAvatar(id, data, mime) {
    const resp = await fetch(`${BASE_PATH}/client/${id}/avatar`, {
@ -109,32 +117,13 @@ export function getAvatarURL(id) {
    return `${BASE_PATH}/client/${id}/avatar?access_token=${localStorage.accessToken}`
 }

-export async function putClient(client) {
-    const resp = await fetch(`${BASE_PATH}/client/${client.id}`, {
-        headers: getHeaders(),
-        body: JSON.stringify(client),
-        method: "PUT",
-    })
-    return await resp.json()
-}
-
-export async function deleteClient(id) {
-    const resp = await fetch(`${BASE_PATH}/client/${id}`, {
-        headers: getHeaders(),
-        method: "DELETE",
-    })
-    if (resp.status === 204) {
-        return {
-            "success": true,
-        }
-    }
-    return await resp.json()
-}
+export const putClient = client => defaultPut("client", client)
+export const deleteClient = id => defaultDelete("client", id)

 export default {
    BASE_PATH,
    login, ping,
-    getInstances, getInstance,
+    getInstances, getInstance, putInstance, deleteInstance,
    getPlugins, getPlugin, uploadPlugin,
    getClients, getClient, uploadAvatar, getAvatarURL, putClient, deleteClient,
 }
--- a/maubot/management/frontend/src/components/PreferenceTable.js
+++ b/maubot/management/frontend/src/components/PreferenceTable.js
@ -14,6 +14,7 @@
 // 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 from "react"
+import Select from "react-select"
 import Switch from "./Switch"

 export const PrefTable = ({ children, wrapperClass }) => {
@ -52,4 +53,10 @@ export const PrefSwitch = ({ rowName, ...args }) => (
    </PrefRow>
 )

+export const PrefSelect = ({ rowName, ...args }) => (
+    <PrefRow name={rowName}>
+        <Select className="select" {...args}/>
+    </PrefRow>
+)
+
 export default PrefTable
--- a/maubot/management/frontend/src/pages/dashboard/Client.js
+++ b/maubot/management/frontend/src/pages/dashboard/Client.js
@ -63,7 +63,6 @@ class Client extends Component {
            saving: false,
            deleting: false,
            startingOrStopping: false,
-            deleted: false,
            error: "",
        }
    }
@ -74,7 +73,6 @@ class Client extends Component {
        delete client.saving
        delete client.deleting
        delete client.startingOrStopping
-        delete client.deleted
        delete client.error
        delete client.instances
        return client
@ -117,12 +115,12 @@ class Client extends Component {
        this.setState({ saving: true })
        const resp = await api.putClient(this.clientInState)
        if (resp.id) {
-            this.props.onChange(resp)
            if (this.isNew) {
                this.props.history.push(`/client/${resp.id}`)
            } else {
                this.setState({ saving: false, error: "" })
            }
+            this.props.onChange(resp)
        } else {
            this.setState({ saving: false, error: resp.error })
        }
@ -135,8 +133,8 @@ class Client extends Component {
        this.setState({ deleting: true })
        const resp = await api.deleteClient(this.state.id)
        if (resp.success) {
-            this.props.onDelete()
            this.props.history.push("/")
+            this.props.onDelete()
        } else {
            this.setState({ deleting: false, error: resp.error })
        }
@ -196,7 +194,7 @@ class Client extends Component {
    renderPreferences = () => (
        <PrefTable>
            <PrefInput rowName="User ID" type="text" disabled={!this.isNew}
-                       name={!this.isNew ? "" : "id"} value={this.state.id}
+                       name={!this.isNew ? "id" : ""} value={this.state.id}
                       placeholder="@fancybot:example.com" onChange={this.inputChange}/>
            <PrefInput rowName="Display name" type="text" name="displayname"
                       value={this.state.displayname} placeholder="My fancy bot"
--- a/maubot/management/frontend/src/pages/dashboard/Instance.js
+++ b/maubot/management/frontend/src/pages/dashboard/Instance.js
@ -14,8 +14,11 @@
 // 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 { NavLink } from "react-router-dom"
+import { NavLink, withRouter } from "react-router-dom"
 import { ReactComponent as ChevronRight } from "../../res/chevron-right.svg"
+import PrefTable, { PrefInput, PrefSelect, PrefSwitch } from "../../components/PreferenceTable"
+import api from "../../api"
+import Spinner from "../../components/Spinner"

 const InstanceListEntry = ({ instance }) => (
    <NavLink className="instance entry" to={`/instance/${instance.id}`}>
@ -27,9 +30,157 @@ const InstanceListEntry = ({ instance }) => (
 class Instance extends Component {
    static ListEntry = InstanceListEntry

-    render() {
-        return <div>{this.props.id}</div>
+    constructor(props) {
+        super(props)
+        this.state = Object.assign(this.initialState, props.instance)
+        this.updateClientOptions()
+    }
+
+    get initialState() {
+        return {
+            id: "",
+            primary_user: "",
+            enabled: true,
+            started: true,
+            type: "",
+
+            saving: false,
+            deleting: false,
+            error: "",
        }
    }

-export default Instance
+    get instanceInState() {
+        const instance = Object.assign({}, this.state)
+        delete instance.saving
+        delete instance.deleting
+        delete instance.error
+        return instance
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState(Object.assign(this.initialState, nextProps.instance), () =>
+            this.updateClientOptions())
+    }
+
+    clientSelectEntry = client => client && {
+        id: client.id,
+        value: client.id,
+        label: (
+            <div className="select-client">
+                <img className="avatar" src={api.getAvatarURL(client.id)} alt=""/>
+                <span className="displayname">{client.displayname || client.id}</span>
+            </div>
+        ),
+    }
+
+    updateClientOptions() {
+        this.clientOptions = Object.values(this.props.ctx.clients).map(this.clientSelectEntry)
+    }
+
+    inputChange = event => {
+        if (!event.target.name) {
+            return
+        }
+        this.setState({ [event.target.name]: event.target.value })
+    }
+
+    save = async () => {
+        this.setState({ saving: true })
+        const resp = await api.putInstance(this.instanceInState, this.props.instance
+            ? this.props.instance.id : undefined)
+        if (resp.id) {
+            if (this.isNew) {
+                this.props.history.push(`/instance/${resp.id}`)
+            } else {
+                if (resp.id !== this.props.instance.id) {
+                    this.props.history.replace(`/instance/${resp.id}`)
+                }
+                this.setState({ saving: false, error: "" })
+            }
+            this.props.onChange(resp)
+        } else {
+            this.setState({ saving: false, error: resp.error })
+        }
+    }
+
+    delete = async () => {
+        if (!window.confirm(`Are you sure you want to delete ${this.state.id}?`)) {
+            return
+        }
+        this.setState({ deleting: true })
+        const resp = await api.deleteInstance(this.state.id)
+        if (resp.success) {
+            this.props.history.push("/")
+            this.props.onDelete()
+        } else {
+            this.setState({ deleting: false, error: resp.error })
+        }
+    }
+
+    get isNew() {
+        return !Boolean(this.props.instance)
+    }
+
+    get selectedClientEntry() {
+        return this.clientSelectEntry(this.props.ctx.clients[this.state.primary_user])
+    }
+
+    get selectedPluginEntry() {
+        return {
+            id: this.state.type,
+            value: this.state.type,
+            label: this.state.type,
+        }
+    }
+
+    get typeOptions() {
+        return Object.values(this.props.ctx.plugins).map(plugin => plugin && {
+            id: plugin.id,
+            value: plugin.id,
+            label: plugin.id,
+        })
+    }
+
+    get loading() {
+        return this.state.deleting || this.state.saving
+    }
+
+    get isValid() {
+        return this.state.id && this.state.primary_user && this.state.type
+    }
+
+    render() {
+        return <div className="instance">
+            <PrefTable>
+                <PrefInput rowName="ID" type="text" name={"id"} value={this.state.id}
+                           placeholder="fancybotinstance" onChange={this.inputChange}
+                           disabled={!this.isNew}/>
+                <PrefSwitch rowName="Enabled" active={this.state.enabled}
+                            onToggle={enabled => this.setState({ enabled })}/>
+                <PrefSwitch rowName="Running" active={this.state.started}
+                            onToggle={started => this.setState({ started })}/>
+                <PrefSelect rowName="Primary user" options={this.clientOptions}
+                            isSearchable={false} value={this.selectedClientEntry}
+                            onChange={({ id }) => this.setState({ primary_user: id })}/>
+                <PrefSelect rowName="Type" options={this.typeOptions}
+                            value={this.selectedPluginEntry}
+                            onChange={({ id }) => this.setState({ type: id })}/>
+            </PrefTable>
+            <div className="buttons">
+                {!this.isNew && (
+                    <button className="delete" onClick={this.delete} disabled={this.loading}>
+                        {this.state.deleting ? <Spinner/> : "Delete"}
+                    </button>
+                )}
+                <button className={`save ${this.isValid ? "" : "disabled-bg"}`}
+                        onClick={this.save} disabled={this.loading || !this.isValid}>
+                    {this.state.saving ? <Spinner/> : (this.isNew ? "Create" : "Save")}
+                </button>
+            </div>
+            <div className="error">{this.state.error}</div>
+        </div>
+    }
+}
+
+export default withRouter(Instance)
--- a/maubot/management/frontend/src/pages/dashboard/index.js
+++ b/maubot/management/frontend/src/pages/dashboard/index.js
@ -61,8 +61,11 @@ class Dashboard extends Component {
        this.setState({ [stateField]: data })
    }

-    add(stateField, entry) {
+    add(stateField, entry, oldID = undefined) {
        const data = Object.assign({}, this.state[stateField])
+        if (oldID && oldID !== entry.id) {
+            delete data[oldID]
+        }
        data[entry.id] = entry
        this.setState({ [stateField]: data })
    }
@ -76,7 +79,8 @@ class Dashboard extends Component {
        return React.createElement(type, {
            [field]: entry,
            onDelete: () => this.delete(stateField, id),
-            onChange: newEntry => this.add(stateField, newEntry),
+            onChange: newEntry => this.add(stateField, newEntry, id),
+            ctx: this.state,
        })
    }

@ -117,8 +121,9 @@ class Dashboard extends Component {
            <main className="view">
                <Switch>
                    <Route path="/" exact render={() => "Hello, World!"}/>
-                    <Route path="/new/instance" render={() => <Instance
-                        onChange={newEntry => this.add("instances", newEntry)}/>}/>
+                    <Route path="/new/instance" render={() =>
+                        <Instance onChange={newEntry => this.add("instances", newEntry)}
+                                  ctx={this.state}/>}/>
                    <Route path="/new/client" render={() => <Client
                        onChange={newEntry => this.add("clients", newEntry)}/>}/>
                    <Route path="/new/plugin" render={() => <Plugin
--- a/maubot/management/frontend/src/style/lib/preferencetable.sass
+++ b/maubot/management/frontend/src/style/lib/preferencetable.sass
@ -36,6 +36,10 @@
                width: auto
                height: 2rem

+            > .select
+                height: 2.5rem
+                box-sizing: border-box
+
            > input
                border: none
                height: 2rem
--- a/maubot/management/frontend/src/style/pages/client/index.sass
+++ b/maubot/management/frontend/src/style/pages/client/index.sass
@ -36,26 +36,3 @@
        flex: 1

        @import instances
-
-        > .buttons
-            display: flex
-            +button-group
-
-        > .error
-            margin-top: 1rem
-            +notification($error)
-
-            &:empty
-                display: none
-
-    button.save, button.delete
-        +button
-        +main-color-button
-        width: 100%
-        height: 2.5rem
-        padding: 0
-
-        > .spinner
-            +thick-spinner
-            +white-spinner
-            width: 2rem
--- a/maubot/management/frontend/src/style/pages/dashboard.sass
+++ b/maubot/management/frontend/src/style/pages/dashboard.sass
@ -70,3 +70,26 @@
        @import client/index
        @import instance
        @import plugin
+
+        div.buttons
+            +button-group
+            display: flex
+
+        div.error
+            +notification($error)
+            margin-top: 1rem
+
+            &:empty
+                display: none
+
+        button.save, button.delete
+            +button
+            +main-color-button
+            width: 100%
+            height: 2.5rem
+            padding: 0
+
+            > .spinner
+                +thick-spinner
+                +white-spinner
+                width: 2rem
--- a/maubot/management/frontend/src/style/pages/instance.sass
+++ b/maubot/management/frontend/src/style/pages/instance.sass
@ -14,5 +14,15 @@
 // 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/>.

-> .instance
-    margin: 1rem
+> div.instance
+    margin: 2rem
+
+    > div.preference-table
+        .select-client
+            display: flex
+            align-items: center
+
+            img.avatar
+                max-height: 1.375rem
+                border-radius: 50%
+                margin-right: .5rem
--- a/maubot/management/frontend/yarn.lock
+++ b/maubot/management/frontend/yarn.lock
@ -751,6 +751,13 @@
  dependencies:
    regenerator-runtime "^0.12.0"

+"@babel/runtime@^7.1.2":
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.1.5.tgz#4170907641cf1f61508f563ece3725150cc6fe39"
+  integrity sha512-xKnPpXG/pvK1B90JkwwxSGii90rQGKtzcMt2gI5G6+M0REXaq6rOHsGC2ay6/d0Uje7zzvSzjEzfR3ENhFlrfA==
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
 "@babel/template@7.0.0-beta.44":
  version "7.0.0-beta.44"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@ -824,6 +831,53 @@
  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==

+"@emotion/babel-utils@^0.6.4":
+  version "0.6.10"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.6.10.tgz#83dbf3dfa933fae9fc566e54fbb45f14674c6ccc"
+  integrity sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==
+  dependencies:
+    "@emotion/hash" "^0.6.6"
+    "@emotion/memoize" "^0.6.6"
+    "@emotion/serialize" "^0.9.1"
+    convert-source-map "^1.5.1"
+    find-root "^1.1.0"
+    source-map "^0.7.2"
+
+"@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6":
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
+  integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
+
+"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
+  integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
+
+"@emotion/serialize@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
+  integrity sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==
+  dependencies:
+    "@emotion/hash" "^0.6.6"
+    "@emotion/memoize" "^0.6.6"
+    "@emotion/unitless" "^0.6.7"
+    "@emotion/utils" "^0.8.2"
+
+"@emotion/stylis@^0.7.0":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
+  integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==
+
+"@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.7":
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
+  integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==
+
+"@emotion/utils@^0.8.2":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
+  integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==
+
 "@sentry/core@4.3.0":
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-4.3.0.tgz#f51f86b380637b5f2348cd35fdb96c224023c103"
@ -1603,6 +1657,24 @@ babel-plugin-dynamic-import-node@2.2.0:
  dependencies:
    object.assign "^4.1.0"

+babel-plugin-emotion@^9.2.11:
+  version "9.2.11"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728"
+  integrity sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/babel-utils" "^0.6.4"
+    "@emotion/hash" "^0.6.2"
+    "@emotion/memoize" "^0.6.1"
+    "@emotion/stylis" "^0.7.0"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    find-root "^1.1.0"
+    mkdirp "^0.5.1"
+    source-map "^0.5.7"
+    touch "^2.0.1"
+
 babel-plugin-istanbul@^4.1.6:
  version "4.1.6"
  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
@ -1618,7 +1690,7 @@ babel-plugin-jest-hoist@^23.2.0:
  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167"
  integrity sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=

-babel-plugin-macros@2.4.2:
+babel-plugin-macros@2.4.2, babel-plugin-macros@^2.0.0:
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.4.2.tgz#21b1a2e82e2130403c5ff785cba6548e9b644b28"
  integrity sha512-NBVpEWN4OQ/bHnu1fyDaAaTPAjnhXCEPqr1RwqxrU7b6tZ2hypp+zX4hlNfmVGfClD5c3Sl6Hfj5TJNF5VG5aA==
@ -1631,6 +1703,11 @@ babel-plugin-named-asset-import@^0.2.2:
  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.2.2.tgz#af1290f77e073411ef1a12f17fc458f1111122eb"
  integrity sha512-NtESBqk8LZuNhBd1BMLxDOh0JPytMs88LwAZFmHg1ZyuGrIAO40dw7p624w+flj0uuhfKTNY8tYKsUEAZGRRFA==

+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
  version "6.13.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@ -2259,6 +2336,11 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

+classnames@^2.2.5:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@ -2508,7 +2590,7 @@ content-type@~1.0.4:
  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==

-convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.1:
+convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
@ -2579,6 +2661,19 @@ create-ecdh@^4.0.0:
    bn.js "^4.1.0"
    elliptic "^6.0.0"

+create-emotion@^9.2.12:
+  version "9.2.12"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.12.tgz#0fc8e7f92c4f8bb924b0fef6781f66b1d07cb26f"
+  integrity sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==
+  dependencies:
+    "@emotion/hash" "^0.6.2"
+    "@emotion/memoize" "^0.6.1"
+    "@emotion/stylis" "^0.7.0"
+    "@emotion/unitless" "^0.6.2"
+    csstype "^2.5.2"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+
 create-hash@^1.1.0, create-hash@^1.1.2:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@ -2850,6 +2945,11 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
  dependencies:
    cssom "0.3.x"

+csstype@^2.5.2:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff"
+  integrity sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw==
+
 currently-unhandled@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@ -3131,6 +3231,13 @@ dom-converter@~0.2:
  dependencies:
    utila "~0.4"

+dom-helpers@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-serializer@0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@ -3264,6 +3371,14 @@ emojis-list@^2.0.0:
  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=

+emotion@^9.1.2:
+  version "9.2.12"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
+  integrity sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==
+  dependencies:
+    babel-plugin-emotion "^9.2.11"
+    create-emotion "^9.2.12"
+
 encodeurl@~1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@ -4048,6 +4163,11 @@ find-cache-dir@^2.0.0:
    make-dir "^1.0.0"
    pkg-dir "^3.0.0"

+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@3.0.0, find-up@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@ -4418,7 +4538,7 @@ gonzales-pe-sl@^4.2.3:
  dependencies:
    minimist "1.1.x"

-"gonzales-pe-sl@github:srowhani/gonzales-pe#dev":
+gonzales-pe-sl@srowhani/gonzales-pe#dev:
  version "4.2.3"
  resolved "https://codeload.github.com/srowhani/gonzales-pe/tar.gz/3b052416074edc280f7d04bbe40b2e410693c4a3"
  dependencies:
@ -6233,7 +6353,7 @@ loglevel@^1.4.1:
  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
  integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=

-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@ -6358,6 +6478,11 @@ mem@^4.0.0:
    mimic-fn "^1.0.0"
    p-is-promise "^1.1.0"

+memoize-one@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.0.3.tgz#cdfdd942853f1a1b4c71c5336b8c49da0bf0273c"
+  integrity sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==
+
 memory-fs@^0.4.0, memory-fs@~0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@ -6840,6 +6965,13 @@ nopt@^4.0.1:
    abbrev "1"
    osenv "^0.1.4"

+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
@ -8131,7 +8263,7 @@ prompts@^0.1.9:
    kleur "^2.0.1"
    sisteransi "^0.1.1"

-prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@ -8246,6 +8378,13 @@ raf@3.4.0:
  dependencies:
    performance-now "^2.1.0"

+raf@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randomatic@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.0.tgz#36f2ca708e9e567f5ed2ec01949026d50aa10116"
@ -8349,6 +8488,18 @@ react-error-overlay@^5.0.5:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.0.5.tgz#716ff1a92fda76bb89a39adf9ce046a5d740e71a"
  integrity sha512-ab0HWBgxdIsngHtMGU8+8gYFdTBXpUGd4AE4lN2VZvOIlBmWx9dtaWEViihuGSIGosCKPeHCnzFoRWB42UtnLg==

+react-input-autosize@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
+  integrity sha512-3+K4CD13iE4lQQ2WlF8PuV5htfmTRLH6MDnfndHM6LuBRszuXnuyIfE7nhSKt8AzRBZ50bu0sAhkNMeS5pxQQA==
+  dependencies:
+    prop-types "^15.5.8"
+
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-router-dom@^4.3.1:
  version "4.3.1"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
@ -8428,6 +8579,29 @@ react-scripts@2.0.5:
  optionalDependencies:
    fsevents "1.2.4"

+react-select@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.1.1.tgz#762d0babd8c7c46a944db51cbb72e4ee117253f9"
+  integrity sha512-ukie2LJStNfJEJ7wtqA+crAfzYpkpPr86urvmJGisECwsWJob9boCM4zjmKCi5QR7G8uY9+v7ZoliJpeCz/4xw==
+  dependencies:
+    classnames "^2.2.5"
+    emotion "^9.1.2"
+    memoize-one "^4.0.0"
+    prop-types "^15.6.0"
+    raf "^3.4.0"
+    react-input-autosize "^2.2.1"
+    react-transition-group "^2.2.1"
+
+react-transition-group@^2.2.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.0.tgz#70bca0e3546102c4dc5cf3f5f57f73447cce6874"
+  integrity sha512-qYB3JBF+9Y4sE4/Mg/9O6WFpdoYjeeYqx0AFb64PTazVy8RPMiE3A47CG9QmM4WJ/mzDiZYslV+Uly6O1Erlgw==
+  dependencies:
+    dom-helpers "^3.3.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react@^16.6.0:
  version "16.6.0"
  resolved "https://registry.yarnpkg.com/react/-/react-16.6.0.tgz#b34761cfaf3e30f5508bc732fb4736730b7da246"
@ -9309,6 +9483,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

+source-map@^0.7.2:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 spdx-correct@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.2.tgz#19bb409e91b47b1ad54159243f7312a858db3c2e"
@ -9597,6 +9776,16 @@ stylehacks@^4.0.0:
    postcss "^7.0.0"
    postcss-selector-parser "^3.0.0"

+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
+
+stylis@^3.5.0:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@ -9825,6 +10014,13 @@ topo@2.x.x:
  dependencies:
    hoek "4.x.x"

+touch@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164"
+  integrity sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==
+  dependencies:
+    nopt "~1.0.10"
+
 tough-cookie@>=2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.4.3, tough-cookie@~2.4.3:
  version "2.4.3"
  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"