Merge remote-tracking branch 'upstream/master' into snyk-upgrade-45ad…

…40baf6707653e57fd9c32ab92630
freifunkMUC · Sep 20, 2023 · f640acf · f640acf
2 parents c4bc9f7 + cc3af3e
commit f640acf
Show file tree

Hide file tree

Showing 7 changed files with 246 additions and 272 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -13,8 +13,8 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.5",
+    "@mui/icons-material": "^5.14.6",
+    "@mui/material": "^5.14.6",
     "common-tags": "^1.8.2",
     "date-fns": "^2.30.0",
     "google-protobuf": "^4.0.0-rc.1",
@@ -23,26 +23,29 @@
     "mobx-utils": "^6.0.7",
     "numeral": "^2.0.6",
     "qrcode": "^1.5.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "^5.0.1",
     "tweetnacl-ts": "^1.0.3"
   },
   "devDependencies": {
     "@types/common-tags": "^1.8.1",
     "@types/numeral": "^2.0.2",
     "@types/qrcode": "^1.5.2",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^18.0.3",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
     "grpc-ts-web": "^0.2.0",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
     "fork-ts-checker-webpack-plugin": "^6.5.3"
   },
   "overrides": {
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "@types/react": "^18.2.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "proxy": "http://localhost:8000/api",
   "browserslist": {

diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Box from '@material-ui/core/Box';
 import Navigation from './components/Navigation';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import { grpc } from './Api';
 import { AppState } from './AppState';
@@ -23,14 +23,14 @@ export const App = observer(class App extends React.Component {
         <CssBaseline />
         <Navigation />
         <Box component="div" m={2}>
-          <Switch>
-            <Route exact path="/" component={YourDevices} />
+          <Routes>
+            <Route path="/" element={<YourDevices />} />
             {AppState.info.isAdmin && (
               <>
-                <Route exact path="/admin/all-devices" component={AllDevices} />
+                <Route path="/admin/all-devices" element={<AllDevices />} />
               </>
             )}
-          </Switch>
+          </Routes>
         </Box>
       </Router>
     );

diff --git a/website/src/components/AddDevice.tsx b/website/src/components/AddDevice.tsx
@@ -141,6 +141,19 @@ export const AddDevice = observer(class AddDevice extends React.Component<Props>
   }
 
   render() {
+
+    const handleClose = (event: any, reason: string) => {
+      if (reason === "backdropClick") {
+        return false;
+      }
+
+      if (reason === "escapeKeyDown") {
+        return false;
+      }
+
+      return true
+    };
+
     return (
       <>
         <Card>
@@ -206,7 +219,7 @@ export const AddDevice = observer(class AddDevice extends React.Component<Props>
             </form>
           </CardContent>
         </Card>
-        <Dialog disableBackdropClick disableEscapeKeyDown maxWidth="xl" open={this.dialogOpen}>
+        <Dialog disableEscapeKeyDown maxWidth="xl" open={this.dialogOpen} onClose={handleClose}>
           <DialogTitle>
             Get Connected
             <Info>

diff --git a/website/src/components/Devices.tsx b/website/src/components/Devices.tsx
@@ -29,7 +29,7 @@ export const Devices = observer(class Devices extends React.Component {
       return <p>loading...</p>;
     }
     return (
-      <Grid container spacing={3} justify="center">
+      <Grid container spacing={3} justifyContent="center">
         <Grid item xs={12}>
           <Grid container spacing={3}>
             {this.devices.current.map((device, i) => (

diff --git a/website/src/components/GetConnected.tsx b/website/src/components/GetConnected.tsx
@@ -10,7 +10,7 @@ import Tabs from '@material-ui/core/Tabs';
 import { GetApp } from '@material-ui/icons';
 import Laptop from '@material-ui/icons/Laptop';
 import PhoneIphone from '@material-ui/icons/PhoneIphone';
-import React from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 import { AppState } from '../AppState';
 import { isMobile } from '../Platform';
 import { download } from '../Util';
@@ -23,7 +23,7 @@ interface Props {
   showMobile: boolean;
 }
 
-export class GetConnected extends React.Component<Props> {
+export class GetConnected extends Component<PropsWithChildren<Props>, any> {
   state = {
     currentTab: isMobile() && this.props.showMobile ? 'mobile' : 'desktop',
   };
@@ -63,7 +63,7 @@ export class GetConnected extends React.Component<Props> {
         </Paper>
 
         <TabPanel for="desktop" value={this.state.currentTab}>
-          <Grid container direction="row" justify="space-around" alignItems="center">
+          <Grid container direction="row" justifyContent="space-around" alignItems="center">
             <List>
               <ListItem>
                 <ListItemText style={{ width: 300 }} primary="1. Install the WireGuard App" />
@@ -96,7 +96,7 @@ export class GetConnected extends React.Component<Props> {
 
         {this.props.showMobile && 
         <TabPanel for="mobile" value={this.state.currentTab}>
-          <Grid container direction="row" justify="space-around" alignItems="center">
+          <Grid container direction="row" justifyContent="space-around" alignItems="center">
             <Grid item>
               <List>
                 <ListItem>

diff --git a/website/src/components/TabPanel.tsx b/website/src/components/TabPanel.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 
 interface Props {
   for: any;
   value: any;
 }
 
-export class TabPanel extends React.Component<Props> {
+export class TabPanel extends Component<PropsWithChildren<Props>, any> {
   render() {
     return (
       <div style={{ padding: '1.5rem 1rem' }} hidden={this.props.for !== this.props.value}>