github/zero-ui
1
0
Fork 0
mirror of https://github.com/dec0dOS/zero-ui.git synced 2025-08-20 13:24:03 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: first PoC - migrate to mui v5

Browse source
This commit is contained in:
dec0dOS 2022-08-26 19:31:13 +03:00
commit 7fa8cdcc5f
29 changed files with 427 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/package.json
View file

@ -2,10 +2,12 @@
"name": "frontend",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@fontsource/roboto": "^4.5.8",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/styles": "^4.11.5",
"@mui/icons-material": "^5.10.2",
"@mui/material": "^5.10.2",
"@mui/styles": "^5.10.2",
"@uiw/react-codemirror": "^3.1.0",
"axios": "^0.27.2",
"codemirror": "^5.62.3",

2
frontend/src/App.jsx
View file

@ -1,5 +1,6 @@
import "@fontsource/roboto";
import CssBaseline from "@mui/material/CssBaseline";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Theme from "./components/Theme";
@ -12,6 +13,7 @@ import Network from "./routes/Network/Network";
function App() {
return (
<Theme>
<CssBaseline />
<BrowserRouter basename="/app">
<Bar />
<Switch>

4
frontend/src/components/Bar/Bar.jsx
View file

@ -14,8 +14,8 @@ import {
Menu,
MenuItem,
Link,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import LogIn from "components/LogIn";

2
frontend/src/components/HomeLoggedIn/HomeLoggedIn.jsx
View file

@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { Divider, Button, Grid, Typography, Box } from "@material-ui/core";
import { Divider, Button, Grid, Typography, Box } from "@mui/material";
import useStyles from "./HomeLoggedIn.styles";
import NetworkButton from "./components/NetworkButton";

2
frontend/src/components/HomeLoggedIn/HomeLoggedIn.styles.jsx
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import makeStyles from "@mui/styles/makeStyles";
const useStyles = makeStyles((theme) => ({
root: {

4
frontend/src/components/HomeLoggedIn/components/NetworkButton/NetworkButton.jsx
View file

@ -1,7 +1,7 @@
import "./NetworkButton.css";
import { Link } from "react-router-dom";
import { List, ListItem, Hidden } from "@material-ui/core";
import { List, ListItem, Hidden } from "@mui/material";
import useStyles from "./NetworkButton.styles";
import { getCIDRAddress } from "utils/IP";
@ -17,7 +17,7 @@ function NetworkButton({ network }) {
<ListItem className={classes.name}>
{network["config"]["name"]}
</ListItem>
<Hidden mdDown>
<Hidden lgDown>
<ListItem className={classes.cidr}>
{network["config"]["ipAssignmentPools"] &&
network["config"]["ipAssignmentPools"][0] &&

2
frontend/src/components/HomeLoggedIn/components/NetworkButton/NetworkButton.styles.jsx
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import makeStyles from "@mui/styles/makeStyles";
const useStyles = makeStyles((theme) => ({
link: {

4
frontend/src/components/HomeLoggedOut/HomeLoggedOut.jsx
View file

@ -1,5 +1,5 @@
import { useEffect } from "react";
import { Grid, Typography } from "@material-ui/core";
import { Grid, Typography } from "@mui/material";
import { useLocalStorage } from "react-use";
import { useHistory } from "react-router-dom";
@ -35,7 +35,7 @@ function HomeLoggedOut() {
spacing={0}
direction="column"
alignItems="center"
justify="center"
justifyContent="center"
style={{
minHeight: "50vh",
}}

2
frontend/src/components/LogIn/LogIn.jsx
View file

@ -1,4 +1,4 @@
import { Divider } from "@material-ui/core";
import { Divider } from "@mui/material";
import LogInUser from "./components/LogInUser";
import LogInToken from "./components/LogInToken";

2
frontend/src/components/LogIn/components/LogInToken/LogInToken.jsx
View file

@ -10,7 +10,7 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
} from "@material-ui/core";
} from "@mui/material";
function LogInToken() {
const [open, setOpen] = useState(false);

2
frontend/src/components/LogIn/components/LogInUser/LogInUser.jsx
View file

@ -9,7 +9,7 @@ import {
DialogContent,
DialogTitle,
Snackbar,
} from "@material-ui/core";
} from "@mui/material";
import axios from "axios";

2
frontend/src/components/NetworkHeader/NetworkHeader.jsx
View file

@ -1,4 +1,4 @@
import { Grid, Typography } from "@material-ui/core";
import { Grid, Typography } from "@mui/material";
function NetworkHeader({ network }) {
return (

6
frontend/src/components/NetworkManagement/NetworkManagement.jsx
View file

@ -12,9 +12,9 @@ import {
DialogTitle,
DialogActions,
Typography,
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import DeleteIcon from "@material-ui/icons/Delete";
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import DeleteIcon from "@mui/icons-material/Delete";
import API from "utils/API";

8
frontend/src/components/NetworkMembers/NetworkMembers.jsx
View file

@ -6,9 +6,9 @@ import {
Grid,
IconButton,
Typography,
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import RefreshIcon from "@material-ui/icons/Refresh";
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import RefreshIcon from "@mui/icons-material/Refresh";
import { useCallback, useEffect, useState } from "react";
import DataTable from "react-data-table-component";
import { useParams } from "react-router-dom";
@ -166,7 +166,7 @@ function NetworkMembers({ network }) {
</AccordionSummary>
<AccordionDetails>
<Grid container direction="column" spacing={3}>
<IconButton color="primary" onClick={fetchData}>
<IconButton color="primary" onClick={fetchData} size="large">
<RefreshIcon />
</IconButton>
<Grid container>

4
frontend/src/components/NetworkMembers/components/AddMember/AddMember.jsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import { List, Typography, IconButton, TextField } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import { List, Typography, IconButton, TextField } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import API from "utils/API";

6
frontend/src/components/NetworkMembers/components/DeleteMember/DeleteMember.jsx
View file

@ -8,8 +8,8 @@ import {
DialogContentText,
DialogActions,
IconButton,
} from "@material-ui/core";
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
} from "@mui/material";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import API from "utils/API";
@ -33,7 +33,7 @@ function DeleteMember({ nwid, mid, callback }) {
return (
<>
<IconButton color="primary" onClick={handleClickOpen}>
<IconButton color="primary" onClick={handleClickOpen} size="large">
<DeleteOutlineIcon color="secondary" style={{ fontSize: 20 }} />
</IconButton>
<Dialog open={open} onClose={handleClose}>

6
frontend/src/components/NetworkMembers/components/ManagedIP/ManagedIP.jsx
View file

@ -1,8 +1,8 @@
import { useState } from "react";
import { Grid, List, TextField, IconButton } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
import { Grid, List, TextField, IconButton } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import { validateIP, normilizeIP } from "utils/IP";

2
frontend/src/components/NetworkMembers/components/MemberName/MemberName.jsx
View file

@ -1,4 +1,4 @@
import { Grid, TextField } from "@material-ui/core";
import { Grid, TextField } from "@mui/material";
function MemberName({ member, handleChange }) {
return (

6
frontend/src/components/NetworkMembers/components/MemberSettings/MemberSettings.jsx
View file

@ -8,8 +8,8 @@ import {
IconButton,
Paper,
Typography,
} from "@material-ui/core";
import BuildIcon from "@material-ui/icons/Build";
} from "@mui/material";
import BuildIcon from "@mui/icons-material/Build";
import { useState } from "react";
import Tag from "./components/Tag";
@ -26,7 +26,7 @@ function MemberSettings({ member, network, handleChange }) {
return (
<>
<IconButton color="primary" onClick={handleClickOpen}>
<IconButton color="primary" onClick={handleClickOpen} size="large">
<BuildIcon style={{ fontSize: 20 }} />
</IconButton>
<Dialog open={open} onClose={handleClose}>

6
frontend/src/components/NetworkMembers/components/MemberSettings/components/Tag/Tag.jsx
View file

@ -7,8 +7,8 @@ import {
Paper,
Select,
Typography,
} from "@material-ui/core";
import DeleteIcon from "@material-ui/icons/Delete";
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import { useEffect, useState } from "react";
import { useDebounce } from "react-use";
@ -100,7 +100,7 @@ function Tag({ member, tagName, tagDetail, handleChange }) {
{tagValue === "" ? (
""
) : (
<IconButton aria-label="delete" onClick={clearTag}>
<IconButton aria-label="delete" onClick={clearTag} size="large">
<DeleteIcon />
</IconButton>
)}

6
frontend/src/components/NetworkRules/NetworkRules.jsx
View file

@ -8,8 +8,8 @@ import {
Hidden,
Snackbar,
Typography,
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import CodeMirror from "@uiw/react-codemirror";
import "codemirror/theme/3024-day.css";
import { compile } from "external/RuleCompiler";
@ -99,7 +99,7 @@ function NetworkRules({ network, callback }) {
onChange={onChange}
options={{ tabSize: 2, lineWrapping: true }}
/>
<Hidden mdDown>
<Hidden lgDown>
<div>
<CodeMirror
value={JSON.stringify(flowData, null, 2)}

4
frontend/src/components/NetworkSettings/NetworkSettings.jsx
View file

@ -8,8 +8,8 @@ import {
Typography,
TextField,
Select,
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ManagedRoutes from "./components/ManagedRoutes";
import IPv4AutoAssign from "./components/IPv4AutoAssign";

6
frontend/src/components/NetworkSettings/components/IPv4AutoAssign/IPv4AutoAssign.jsx
View file

@ -9,9 +9,9 @@ import {
Typography,
TextField,
IconButton,
} from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import DataTable from "react-data-table-component";

6
frontend/src/components/NetworkSettings/components/ManagedRoutes/ManagedRoutes.jsx
View file

@ -8,9 +8,9 @@ import {
Typography,
TextField,
IconButton,
} from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import DataTable from "react-data-table-component";

17
frontend/src/components/Theme/Theme.jsx
View file

@ -1,6 +1,9 @@
import { ThemeProvider } from "@material-ui/styles";
import { createTheme } from "@material-ui/core/styles";
import { red, amber } from "@material-ui/core/colors";
import {
ThemeProvider,
createTheme,
StyledEngineProvider,
} from "@mui/material/styles";
import { red, amber } from "@mui/material/colors";
const theme = createTheme({
palette: {
@ -10,12 +13,16 @@ const theme = createTheme({
secondary: {
main: red[500],
},
type: "light",
mode: "light",
},
});
function Theme({ children }) {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</StyledEngineProvider>
);
}
export default Theme;

6
frontend/src/routes/Network/Network.jsx
View file

@ -1,5 +1,5 @@
import { Grid, Link, Typography } from "@material-ui/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import { Grid, Link, Typography } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import NetworkHeader from "components/NetworkHeader";
import NetworkManagement from "components/NetworkManagement";
import NetworkMembers from "components/NetworkMembers";
@ -65,7 +65,7 @@ function Network() {
spacing={0}
direction="column"
alignItems="center"
justify="center"
justifyContent="center"
style={{
minHeight: "50vh",
}}

2
frontend/src/routes/Network/Network.styles.jsx
View file

@ -1,4 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import makeStyles from "@mui/styles/makeStyles";
const useStyles = makeStyles((theme) => ({
backIcon: {

4
frontend/src/routes/NotFound/NotFound.jsx
View file

@ -1,4 +1,4 @@
import { Grid, Typography } from "@material-ui/core";
import { Grid, Typography } from "@mui/material";
function NotFound() {
return (
@ -7,7 +7,7 @@ function NotFound() {
spacing={0}
direction="column"
alignItems="center"
justify="center"
justifyContent="center"
style={{
minHeight: "50vh",
}}