Comunic
/
comunicconsole
mirror of https://gitlab.com/comunic/comunicconsole
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Start React & Material UI update

This commit is contained in:
Pierre Hubert 2022-06-12 18:50:22 +02:00
parent cd086f2a4c
commit a8f1354a43
22 changed files with 27339 additions and 17143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44143
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

93
package.json
View File

@ -1,48 +1,49 @@
{
"name": "comunic-console",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.4",
"@material-ui/data-grid": "^4.0.0-alpha.26",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.23",
"@types/node": "^12.20.11",
"@types/react": "^17.0.4",
"@types/react-dom": "^17.0.3",
"@types/react-router-dom": "^5.1.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.2.4",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
"name": "comunic-console",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.3",
"@mui/material": "^5.8.3",
"@mui/x-data-grid": "^5.12.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.39",
"@types/react": "^18.0.12",
"@types/react-dom": "^18.0.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

8
src/App.tsx
View File

@ -1,14 +1,14 @@
import { createTheme, ThemeProvider } from "@mui/material";
import { lightBlue, pink } from "@mui/material/colors";
import React from "react";
import "./App.css";
import { createMuiTheme, ThemeProvider } from "@material-ui/core";
import { ApplicationDialogsProvider } from "./ui/widgets/DialogsProvider";
import { lightBlue, pink } from "@material-ui/core/colors";
import { InitWidget } from "./ui/widgets/InitWidget";
function App() {
const darkTheme = createMuiTheme({
const darkTheme = createTheme({
palette: {
type: "dark",
mode: "dark",
primary: lightBlue,
secondary: pink,
},

2
src/ui/accountSettings/GeneralSettings.tsx
View File

@ -4,7 +4,7 @@
* @author Pierre Hubert
*/
import { TextField, Button } from "@material-ui/core";
import { TextField, Button } from "@mui/material";
import React from "react";
import { AdminAccount, AccountHelper } from "../../helpers/AccountHelper";
import { snackbar, matAlert } from "../widgets/DialogsProvider";

6
src/ui/accountSettings/KeySettingsSection.tsx
View File

@ -8,9 +8,9 @@ import {
TableHead,
TableRow,
Tooltip,
} from "@material-ui/core";
import { Delete } from "@material-ui/icons";
import LockIcon from "@material-ui/icons/Lock";
} from "@mui/material";
import { Delete } from "@mui/icons-material";
import LockIcon from "@mui/icons-material/Lock";
import React from "react";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
import { AdminAccountKey, AdminKeyHelper } from "../../helpers/AdminKeyHelper";

2
src/ui/accountSettings/RoleSettingsSection.tsx
View File

@ -4,7 +4,7 @@
* @author Pierre Hubert
*/
import { Checkbox, FormControlLabel, Tooltip } from "@material-ui/core";
import { Checkbox, FormControlLabel, Tooltip } from "@mui/material";
import React from "react";
import { AdminAccount } from "../../helpers/AccountHelper";
import {

2
src/ui/accountSettings/SettingsSection.tsx
View File

@ -1,4 +1,4 @@
import { Grid } from "@material-ui/core";
import { Grid } from "@mui/material";
import React from "react";
import { CustomCard } from "../widgets/CustomCard";

2
src/ui/routes/AccountLogsRoute.tsx
View File

@ -6,7 +6,7 @@ import {
TableContainer,
TableHead,
TableRow,
} from "@material-ui/core";
} from "@mui/material";
import React from "react";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
import {

2
src/ui/routes/AccountSettingsRoute.tsx
View File

@ -4,7 +4,7 @@
* @author Pierre Hubert
*/
import { Grid } from "@material-ui/core";
import { Grid } from "@mui/material";
import React from "react";
import { useParams } from "react-router-dom";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";

6
src/ui/routes/AccountsListRoute.tsx
View File

@ -13,9 +13,9 @@ import {
TableContainer,
TableHead,
TableRow,
} from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import SettingsIcon from "@material-ui/icons/Settings";
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import SettingsIcon from "@mui/icons-material/Settings";
import React from "react";
import { Link } from "react-router-dom";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";

10
src/ui/routes/ComunicUserRoute.tsx
View File

@ -6,8 +6,8 @@ import {
TableBody,
TableCell,
TableRow,
} from "@material-ui/core";
import EmailIcon from "@material-ui/icons/Email";
} from "@mui/material";
import EmailIcon from "@mui/icons-material/Email";
import React from "react";
import {
ComunicUser,
@ -24,7 +24,7 @@ import {
} from "../widgets/DialogsProvider";
import { PageTitle } from "../widgets/PageTitle";
import { TimestampWidget } from "../widgets/TimestampWidget";
import LinkIcon from "@material-ui/icons/Link";
import LinkIcon from "@mui/icons-material/Link";
import { CopyToClipboard } from "../../utils/ClipboardUtils";
interface UserProperty {
name: string;
@ -254,7 +254,7 @@ export class ComunicUserRoute extends React.Component<
>
<Button
variant="outlined"
color="default"
color="secondary"
startIcon={<EmailIcon />}
style={{
width: "100%",
@ -268,7 +268,7 @@ export class ComunicUserRoute extends React.Component<
<Button
variant="outlined"
color="default"
color="secondary"
startIcon={<LinkIcon />}
style={{ width: "100%" }}
onClick={this.createPasswordResetLink}

6
src/ui/routes/LoginRoute.tsx
View File

@ -17,9 +17,9 @@ import {
Paper,
TextField,
Typography,
} from "@material-ui/core";
import { ErrorOutline, Lock, VpnKey } from "@material-ui/icons";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
} from "@mui/material";
import { ErrorOutline, Lock, VpnKey } from "@mui/icons-material";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import React from "react";
import { AccountHelper, AuthOptions } from "../../helpers/AccountHelper";
import { AdminKeyHelper, AuthKey } from "../../helpers/AdminKeyHelper";

97
src/ui/routes/MainRoute.tsx
View File

@ -16,19 +16,19 @@ import {
Paper,
Toolbar,
Typography,
} from "@material-ui/core";
import { Home, Person } from "@material-ui/icons";
import CloseSharpIcon from "@material-ui/icons/CloseSharp";
import GroupIcon from "@material-ui/icons/Group";
import HistoryIcon from "@material-ui/icons/History";
} from "@mui/material";
import { Home, Person } from "@mui/icons-material";
import CloseSharpIcon from "@mui/icons-material/CloseSharp";
import GroupIcon from "@mui/icons-material/Group";
import HistoryIcon from "@mui/icons-material/History";
import React from "react";
import {
BrowserRouter as Router,
Route,
Switch,
useHistory,
Routes,
useNavigate,
useParams,
useRouteMatch,
useMatch,
} from "react-router-dom";
import { AccountHelper, AdminAccountRole } from "../../helpers/AccountHelper";
import { AccountLogsRoute } from "./AccountLogsRoute";
@ -39,55 +39,6 @@ import { HomeRoute } from "./HomeRoute";
import { NotFoundRoute } from "./NotFoundRoute";
import { SearchComunicUsersRoute } from "./SearchComunicUsersRoute";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
...theme.mixins.toolbar,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
width: `100%`,
color: "white",
},
menuButton: {
marginRight: 36,
},
menuButtonHidden: {
display: "none",
},
title: {
flexGrow: 1,
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
height: "100vh",
overflow: "auto",
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
paper: {
padding: theme.spacing(2),
display: "flex",
overflow: "auto",
flexDirection: "column",
},
fixedHeight: {
height: 240,
},
}));
function Menu() {
return (
<div>
@ -126,14 +77,10 @@ function MainMenuItem(p: {
uri: string;
needsRole?: AdminAccountRole;
}) {
const history = useHistory();
const openMyAccount = () => history.push(p.uri);
const n = useNavigate();
const openMyAccount = () => n(p.uri);
const selected =
useRouteMatch({
path: p.uri,
exact: true,
}) != null;
const selected = useMatch(p.uri) != null;
// Check if roles are filtered
if (p.needsRole) {
@ -150,8 +97,6 @@ function MainMenuItem(p: {
}
export function MainRoute() {
const classes = useStyles();
const signOut = () => {
AccountHelper.signOut();
};
@ -169,16 +114,20 @@ export function MainRoute() {
<AppBar
position="fixed"
className={classes.appBar}
style={{
zIndex: 1,
width: `100%`,
color: "white",
}}
color="primary"
>
<Toolbar className={classes.toolbar}>
<Toolbar style={{ padding: 24 }}>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
style={{ flexGrow: 1 }}
>
Comunic Console
</Typography>
@ -214,12 +163,12 @@ export function MainRoute() {
maxWidth: "1280px",
}}
>
<Switch>
<Route exact path="/">
<Routes>
<Route path="/">
<HomeRoute></HomeRoute>
</Route>
<Route exact path="/users">
<Route path="/users">
<SearchComunicUsersRoute />
</Route>
@ -227,7 +176,7 @@ export function MainRoute() {
<ComunicUserRouteProxy />
</Route>
<Route exact path="/accounts">
<Route path="/accounts">
<AccountsListRoute />
</Route>
@ -242,7 +191,7 @@ export function MainRoute() {
<Route path="*">
<NotFoundRoute />
</Route>
</Switch>
</Routes>
</div>
</div>
</div>

2
src/ui/routes/NotFoundRoute.tsx
View File

@ -4,7 +4,7 @@
* @author Pierre Hubert
*/
import { Typography } from "@material-ui/core";
import { Typography } from "@mui/material";
export function NotFoundRoute() {
return (

11
src/ui/routes/SearchComunicUsersRoute.tsx
View File

@ -11,9 +11,9 @@ import {
Paper,
TextField,
Typography,
} from "@material-ui/core";
} from "@mui/material";
import React from "react";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import {
ComunicUsersHelper,
SearchResult,
@ -134,11 +134,8 @@ export class SearchComunicUsersRoute extends React.Component<
}
function ResultItem(p: { user: SearchResult }) {
const history = useHistory();
const openButton = () => {
history.push("/user/" + p.user.id);
};
const n = useNavigate();
const openButton = () => n("/user/" + p.user.id);
return (
<ListItem button onClick={openButton}>
<Grid container wrap="nowrap" spacing={2}>

2
src/ui/widgets/AsyncWidget.tsx
View File

@ -4,7 +4,7 @@
* @author Pierre Hubert
*/
import { Button, Paper } from "@material-ui/core";
import { Button, Paper } from "@mui/material";
import React, { ReactNode } from "react";
import { CenterCircularProgress } from "./CenterCircularProgress";

24
src/ui/widgets/CenterCircularProgress.tsx
View File

@ -1,12 +1,16 @@
import { CircularProgress } from "@material-ui/core";
import { CircularProgress } from "@mui/material";
export function CenterCircularProgress() {
return <div style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%"
}}>
<CircularProgress></CircularProgress>
</div>
}
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
}}
>
<CircularProgress></CircularProgress>
</div>
);
}

2
src/ui/widgets/CustomCard.tsx
View File

@ -1,4 +1,4 @@
import { Divider, Paper, Typography } from "@material-ui/core";
import { Divider, Paper, Typography } from "@mui/material";
import React from "react";
export function CustomCard(p: { title: string; children?: React.ReactNode }) {

16
src/ui/widgets/DialogsProvider.tsx
View File

@ -14,8 +14,8 @@ import {
TextField,
Snackbar,
IconButton,
} from "@material-ui/core";
import { Close } from "@material-ui/icons";
} from "@mui/material";
import { Close } from "@mui/icons-material";
import React, { FormEvent } from "react";
let cache: ApplicationDialogsProvider;
@ -116,7 +116,7 @@ export class ApplicationDialogsProvider extends React.Component<
}
handleCloseSnackbar(
_event: React.SyntheticEvent | React.MouseEvent,
_event: React.SyntheticEvent | React.MouseEvent | Event,
reason?: string
) {
if (reason === "clickaway") {
@ -216,7 +216,7 @@ export class ApplicationDialogsProvider extends React.Component<
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleCloseAlert} color="default">
<Button onClick={this.handleCloseAlert} color="primary">
OK
</Button>
</DialogActions>
@ -265,10 +265,10 @@ export class ApplicationDialogsProvider extends React.Component<
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.rejectConfirm} color="default">
<Button onClick={this.rejectConfirm} color="secondary">
Cancel
</Button>
<Button onClick={this.acceptConfirm} color="default">
<Button onClick={this.acceptConfirm} color="secondary">
Confirm
</Button>
</DialogActions>
@ -305,12 +305,12 @@ export class ApplicationDialogsProvider extends React.Component<
</form>
</DialogContent>
<DialogActions>
<Button onClick={this.cancelInput} color="default">
<Button onClick={this.cancelInput} color="secondary">
Cancel
</Button>
<Button
onClick={this.confirmInput}
color="default"
color="secondary"
disabled={!this.isInputValid}
>
OK

2
src/ui/widgets/PageTitle.tsx
View File

@ -1,4 +1,4 @@
import { Typography } from "@material-ui/core";
import { Typography } from "@mui/material";
/**
* Page title widget

2
src/ui/widgets/TimestampWidget.tsx
View File

@ -1,4 +1,4 @@
import { Tooltip } from "@material-ui/core";
import { Tooltip } from "@mui/material";
import React from "react";
/**

42
tsconfig.json
View File

@ -1,26 +1,20 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}