Fix bugs and improve minor UI things

maubot/management/frontend/src/pages/dashboard/Client.js

@@ -157,7 +157,7 @@ class Client extends BaseMainView {
     renderPreferences = () => (
         <PrefTable>
             <PrefInput rowName="User ID" type="text" disabled={!this.isNew} fullWidth={true}
-                       name={!this.isNew ? "id" : ""} value={this.state.id}
+                       name={!this.isNew ? "id" : ""} value={this.state.id} className="id"
                        placeholder="@fancybot:example.com" onChange={this.inputChange}/>
             <PrefInput rowName="Homeserver" type="text" name="homeserver"
                        value={this.state.homeserver} placeholder="https://example.com"

maubot/management/frontend/src/pages/dashboard/Instance.js

@@ -135,9 +135,9 @@ class Instance extends BaseMainView {
     render() {
         return <div className="instance">
             <PrefTable>
-                <PrefInput rowName="ID" type="text" name={"id"} value={this.state.id}
+                <PrefInput rowName="ID" type="text" name="id" value={this.state.id}
                            placeholder="fancybotinstance" onChange={this.inputChange}
-                           disabled={!this.isNew} fullWidth={true}/>
+                           disabled={!this.isNew} fullWidth={true} className="id"/>
                 <PrefSwitch rowName="Enabled" active={this.state.enabled}
                             onToggle={enabled => this.setState({ enabled })}/>
                 <PrefSwitch rowName="Running" active={this.state.started}

maubot/management/frontend/src/pages/dashboard/Plugin.js

@@ -67,6 +67,12 @@ class Plugin extends BaseMainView {
 
     render() {
         return <div className="plugin">
+            {!this.isNew && <PrefTable>
+                <PrefInput rowName="ID" type="text" value={this.state.id} disabled={true}
+                           className="id"/>
+                <PrefInput rowName="Version" type="text" value={this.state.version}
+                           disabled={true}/>
+            </PrefTable>}
             <div className={`upload-box ${this.state.uploading ? "uploading" : ""}`}>
                 <UploadButton className="upload"/>
                 <input className="file-selector" type="file" accept="application/zip"
@@ -75,20 +81,13 @@ class Plugin extends BaseMainView {
                        onDragLeave={evt => evt.target.parentElement.classList.remove("drag")}/>
                 {this.state.uploading && <Spinner/>}
             </div>
-            {!this.isNew && <>
-                <PrefTable>
-                    <PrefInput rowName="ID" type="text" value={this.state.id} disabled={true}/>
-                    <PrefInput rowName="Version" type="text" value={this.state.version}
-                               disabled={true}/>
-                </PrefTable>
-                <div className="buttons">
-                    <button className={`delete ${this.hasInstances ? "disabled-bg" : ""}`}
-                            onClick={this.delete} disabled={this.loading || this.hasInstances}
-                            title={this.hasInstances ? "Can't delete plugin that is in use" : ""}>
-                        {this.state.deleting ? <Spinner/> : "Delete"}
-                    </button>
-                </div>
-            </>}
+            {!this.isNew && <div className="buttons">
+                <button className={`delete ${this.hasInstances ? "disabled-bg" : ""}`}
+                        onClick={this.delete} disabled={this.loading || this.hasInstances}
+                        title={this.hasInstances ? "Can't delete plugin that is in use" : ""}>
+                    {this.state.deleting ? <Spinner/> : "Delete"}
+                </button>
+            </div>}
             <div className="error">{this.state.error}</div>
             {!this.isNew && this.renderInstances()}
         </div>

maubot/management/frontend/src/pages/dashboard/index.js

@@ -137,7 +137,7 @@ class Dashboard extends Component {
                     <Route path="/client/:id" render={({ match }) =>
                         this.renderView("clients", Client, match.params.id)}/>
                     <Route path="/plugin/:id" render={({ match }) =>
-                        this.renderView("plugin", Plugin, match.params.id)}/>
+                        this.renderView("plugins", Plugin, match.params.id)}/>
                     <Route render={() => this.renderNotFound()}/>
                 </Switch>
             </main>

maubot/management/frontend/src/style/lib/preferencetable.sass

@@ -62,6 +62,10 @@
 
                 border-bottom: 1px solid $background
 
+                &.id:disabled
+                    font-family: "Fira Code", monospace
+                    font-weight: bold
+
                 &:not(:disabled)
                     border-bottom: 1px dotted $primary