Update frontend dependencies

maubot/management/frontend/package.json

@@ -13,15 +13,15 @@
   },
   "homepage": ".",
   "dependencies": {
-    "node-sass": "^4.12.0",
+    "sass": "^1.34.1",
-    "react": "^16.8.6",
+    "react": "^17.0.2",
-    "react-ace": "^9.0.0",
+    "react-ace": "^9.4.1",
-    "react-contextmenu": "^2.11.0",
+    "react-contextmenu": "^2.14.0",
-    "react-dom": "^16.8.6",
+    "react-dom": "^17.0.2",
-    "react-json-tree": "^0.11.2",
+    "react-json-tree": "^0.15.0",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "4.0.3",
-    "react-select": "^3.0.4"
+    "react-select": "^4.3.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -30,16 +30,11 @@
     "eject": "react-scripts eject"
   },
   "browserslist": [
-    "last 5 firefox versions",
+    "last 2 firefox versions",
-    "last 3 and_ff versions",
+    "last 2 and_ff versions",
-    "last 5 chrome versions",
+    "last 2 chrome versions",
-    "last 3 and_chr versions",
+    "last 2 and_chr versions",
-    "last 2 safari versions",
+    "last 1 safari versions",
-    "last 2 ios_saf versions"
+    "last 1 ios_saf versions"
-  ],
+  ]
-  "devDependencies": {
-    "sass-lint": "^1.13.1",
-    "sass-lint-auto-fix": "^0.21.0",
-    "@babel/helper-call-delegate": "^7.10.4"
-  }
 }

maubot/management/frontend/src/api.js

@@ -244,6 +244,7 @@ export async function doClientAuth(server, type, username, password) {
     return await resp.json()
 }
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
     login, ping, setBasePath, getFeatures, remoteGetFeatures,
     openLogSocket,

maubot/management/frontend/src/components/PreferenceTable.js

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -57,7 +57,9 @@ export const PrefSwitch = ({ rowName, active, origActive, fullWidth = false, ...
     </PrefRow>
 )
 
-export const PrefSelect = ({ rowName, value, origValue, fullWidth = false, creatable = false, ...args }) => (
+export const PrefSelect = ({
+    rowName, value, origValue, fullWidth = false, creatable = false, ...args
+}) => (
     <PrefRow name={rowName} fullWidth={fullWidth} labelFor={rowName}
              changed={origValue !== undefined && value.id !== origValue}>
         {creatable

maubot/management/frontend/src/components/Switch.js

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -23,11 +23,13 @@ class Switch extends Component {
         }
     }
 
-    componentWillReceiveProps(nextProps) {
+    componentDidUpdate(prevProps) {
+        if (prevProps.active !== this.props.active) {
             this.setState({
-            active: nextProps.active,
+                active: this.props.active,
             })
         }
+    }
 
     toggle = () => {
         if (this.props.onToggle) {

maubot/management/frontend/src/pages/Main.js

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -30,7 +30,7 @@ class Main extends Component {
         }
     }
 
-    async componentWillMount() {
+    async componentDidMount() {
         await this.getBasePath()
         if (localStorage.accessToken) {
             await this.ping()
@@ -43,7 +43,7 @@ class Main extends Component {
     async getBasePath() {
         try {
             const resp = await fetch(process.env.PUBLIC_URL + "/paths.json", {
-                headers: { "Content-Type": "application/json" }
+                headers: { "Content-Type": "application/json" },
             })
             const apiPathJson = await resp.json()
             const apiPath = apiPathJson.api_path

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

@@ -1,3 +1,18 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2021 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 { Link } from "react-router-dom"
 import api from "../../api"
@@ -8,7 +23,7 @@ class BaseMainView extends Component {
         this.state = Object.assign(this.initialState, props.entry)
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         const newState = Object.assign(this.initialState, nextProps.entry)
         for (const key of this.entryKeys) {
             if (this.props.entry[key] === nextProps.entry[key]) {

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

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -116,13 +116,14 @@ class Client extends BaseMainView {
         label: serverName || serverURL,
     }
 
-    componentWillReceiveProps(nextProps) {
+    componentDidUpdate(prevProps) {
-        super.componentWillReceiveProps(nextProps)
         this.updateHomeserverOptions()
     }
 
     updateHomeserverOptions() {
-        this.homeserverOptions = Object.entries(this.props.ctx.homeserversByName).map(this.homeserverEntry)
+        this.homeserverOptions = Object
+            .entries(this.props.ctx.homeserversByName)
+            .map(this.homeserverEntry)
     }
 
     isValidHomeserver(value) {
@@ -186,7 +187,8 @@ class Client extends BaseMainView {
     }
 
     get loading() {
-        return this.state.saving || this.state.startingOrStopping || this.clearingCache || this.state.deleting
+        return this.state.saving || this.state.startingOrStopping
+            || this.clearingCache || this.state.deleting
     }
 
     renderStartedContainer = () => {
@@ -211,7 +213,8 @@ class Client extends BaseMainView {
     }
 
     get avatarMXC() {
-        return this.state.avatar_url === "disable" ? this.props.entry.remote_avatar_url : this.state.avatar_url
+        return this.state.avatar_url === "disable"
+            ? this.props.entry.remote_avatar_url : this.state.avatar_url
     }
 
     get avatarURL() {

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

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -69,8 +69,7 @@ class Instance extends BaseMainView {
         return instance
     }
 
-    componentWillReceiveProps(nextProps) {
+    componentDidUpdate(prevProps) {
-        super.componentWillReceiveProps(nextProps)
         this.updateClientOptions()
     }
 

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

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -50,7 +50,7 @@ class InstanceDatabase extends Component {
         this.order = new Map()
     }
 
-    async componentWillMount() {
+    async componentDidMount() {
         const tables = new Map(Object.entries(await api.getInstanceDatabase(this.props.instanceID)))
         for (const [name, table] of tables) {
             table.name = name

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

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -42,7 +42,7 @@ class LogEntry extends PureComponent {
             return <>
                 {req.method} {req.path}
                 <div className="content">
-                    {Object.entries(req.content).length > 0
+                    {Object.entries(req.content || {}).length > 0
                     && <JSONTree data={{ content: req.content }} hideRoot={true}/>}
                 </div>
             </>

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

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -51,7 +51,7 @@ class Dashboard extends Component {
         }
     }
 
-    async componentWillMount() {
+    async componentDidMount() {
         const [instanceList, clientList, pluginList, homeservers] = await Promise.all([
             api.getInstances(), api.getClients(), api.getPlugins(), api.getClientAuthServers(),
             api.updateDebugOpenFileEnabled()])

maubot/management/frontend/src/style/pages/log.sass

@@ -1,5 +1,5 @@
 // maubot - A plugin-based Matrix bot system.
-// Copyright (C) 2019 Tulir Asokan
+// Copyright (C) 2021 Tulir Asokan
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -18,7 +18,7 @@ div.log
     width: 100%
     overflow: auto
 
-    > div.lines
+div.log > div.lines
     text-align: left
     font-size: 12px
     max-height: 100%
@@ -26,11 +26,14 @@ div.log
     font-family: "Fira Code", monospace
     display: table
 
-        > div.row
+div.log > div.lines > div.row
     display: table-row
     white-space: pre
 
-            &.debug
+    &.trace
+        opacity: .75
+
+    &.debug, &.trace
         background-color: $background
 
         &:nth-child(odd)