upgrade to @material-ui 5.0 alphas

(and various other lockfile upgrades. "npm audit" is clean.)

The date picker to use with 4.0 is unmaintained, and the new one is
apparently quite different.

Given that 5.0 is expected to be released this quarter, I prefer to
jump straight to the new one and get things working with it, even if
it means using an alpha in the short-term.

ui/package.json

@@ -3,14 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
+    "@material-ui/core": "^5.0.0-alpha.25",
+    "@material-ui/icons": "^5.0.0-alpha.24",
+    "@material-ui/lab": "^5.0.0-alpha.25",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.22",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "fontsource-roboto": "^4.0.0",
+    "@fontsource/roboto": "^4.2.1",
     "gzipper": "^4.4.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

ui/src/Login.tsx

@@ -3,14 +3,15 @@
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
 import Avatar from "@material-ui/core/Avatar";
-import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogTitle from "@material-ui/core/DialogTitle";
+import FormControl from "@material-ui/core/FormControl";
+import FormHelperText from "@material-ui/core/FormHelperText";
 import { makeStyles, Theme } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
-import Alert from "@material-ui/lab/Alert";
+import LoadingButton from "@material-ui/lab/LoadingButton";
 import React, { useEffect } from "react";
 import * as api from "./api";
 import { useSnackbars } from "./snackbars";
@@ -19,9 +20,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   avatar: {
     backgroundColor: theme.palette.secondary.main,
   },
-  noError: {
-    visibility: "hidden",
-  },
 }));
 
 interface Props {
@@ -102,8 +100,6 @@ const Login = ({ open, onSuccess, handleClose }: Props) => {
     e.preventDefault();
 
     // Suppress duplicate login attempts when latency is high.
-    // It'd be nice to also provide a visual indication, but we might
-    // just wait for LoadingButton in material-ui 5 rather than reinventing it.
     if (pending !== null) {
       return;
     }
@@ -129,39 +125,41 @@ const Login = ({ open, onSuccess, handleClose }: Props) => {
       </DialogTitle>
 
       <form onSubmit={onSubmit}>
-        <TextField
-          id="username"
-          label="Username"
-          variant="filled"
-          required
-          autoComplete="username"
-          fullWidth
-          inputRef={usernameRef}
-        />
-        <TextField
-          id="password"
-          label="Password"
-          variant="filled"
-          type="password"
-          required
-          autoComplete="current-password"
-          fullWidth
-          inputRef={passwordRef}
-        />
+        <FormControl error={error != null} fullWidth>
+          <TextField
+            id="username"
+            label="Username"
+            variant="filled"
+            required
+            autoComplete="username"
+            fullWidth
+            inputRef={usernameRef}
+          />
+          <TextField
+            id="password"
+            label="Password"
+            variant="filled"
+            type="password"
+            required
+            autoComplete="current-password"
+            fullWidth
+            inputRef={passwordRef}
+          />
 
-        {/* reserve space for an error; show when there's something to see */}
-        <Alert
-          severity="error"
-          className={error === null ? classes.noError : undefined}
-        >
-          {error}
-        </Alert>
+          {/* reserve space for an error; show when there's something to see */}
+          <FormHelperText>{error == null ? " " : error}</FormHelperText>
 
-        <DialogActions>
-          <Button type="submit" variant="contained" color="secondary">
-            Log in
-          </Button>
-        </DialogActions>
+          <DialogActions>
+            <LoadingButton
+              type="submit"
+              variant="contained"
+              color="secondary"
+              pending={pending !== null}
+            >
+              Log in
+            </LoadingButton>
+          </DialogActions>
+        </FormControl>
       </form>
     </Dialog>
   );

ui/src/index.tsx

@@ -3,11 +3,9 @@
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
 import CssBaseline from "@material-ui/core/CssBaseline";
-import {
-  ThemeProvider,
-  unstable_createMuiStrictModeTheme as createMuiTheme,
-} from "@material-ui/core/styles";
-import "fontsource-roboto";
+import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+import StyledEngineProvider from "@material-ui/core/StyledEngineProvider";
+import "@fontsource/roboto";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
@@ -27,14 +25,16 @@ const theme = createMuiTheme({
 
 ReactDOM.render(
   <React.StrictMode>
-    <CssBaseline />
-    <ThemeProvider theme={theme}>
-      <ErrorBoundary>
-        <SnackbarProvider autoHideDuration={5000}>
-          <App />
-        </SnackbarProvider>
-      </ErrorBoundary>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <CssBaseline />
+      <ThemeProvider theme={theme}>
+        <ErrorBoundary>
+          <SnackbarProvider autoHideDuration={5000}>
+            <App />
+          </SnackbarProvider>
+        </ErrorBoundary>
+      </ThemeProvider>
+    </StyledEngineProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );