Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat#38/change material-ui version to mui 5 #41

Merged
merged 10 commits into from
May 24, 2022
Merged

Feat#38/change material-ui version to mui 5 #41

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7b9dc1f
change material ui version from 4 to mui 5
MounikaReddy15 Mar 10, 2022
6b7b6fa
show org dropdown for global admin
MounikaReddy15 Mar 14, 2022
0ecc0f5
Integrate with BE - user management
MounikaReddy15 Mar 21, 2022
34fec71
resolve user management bugs
MounikaReddy15 Mar 21, 2022
e481f68
change text field arrow color
MounikaReddy15 Mar 21, 2022
c3a36d1
update node version
MounikaReddy15 Mar 21, 2022
4a44f86
change alert.js - add diff colors for notifications
MounikaReddy15 Mar 22, 2022
d3f3741
resolve linting errors
MounikaReddy15 Mar 22, 2022
bcc0fde
remove global admin filter changes
MounikaReddy15 Mar 23, 2022
f4621e2
remove extra spaces and change to single quotes
MounikaReddy15 Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .travis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ cache: yarn, pip
services:
- docker
node_js:
- "10.16.0"
- "16.14.2"
env:
global:
- DOCKER_REPO=transparent-path/react-ui
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ These instructions will get you a copy of the project up and running on your loc

The web application was tested and built with the following versions:

- node v10.16.0
- node v16.14.2
- yarn v1.17.3

### Installing
Expand Down
2 changes: 1 addition & 1 deletion docs/quickstart.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Excited to get start? This page gives a decent prologue to Buildly React Templat
you as of now have a Buildly Core instance up and running and also all the project's
prerequisites installed.

- node v10.16.0
- node v16.14.2
- yarn v1.17.3

Installing
Expand Down
20 changes: 11 additions & 9 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,23 @@
],
"dependencies": {
"@babel/plugin-transform-runtime": "^7.4.4",
"@material-ui/core": "^4.10.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.55",
"@material-ui/pickers": "^3.2.10",
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.5.0",
"@mui/lab": "^5.0.0-alpha.72",
"@mui/material": "^5.5.0",
"@mui/styles": "^5.5.0",
"@types/node": "^14.10.3",
"@types/react": "^16.8.18",
"@types/react-dom": "^16.8.4",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.13",
"i18next": "^15.1.3",
"i18next-browser-languagedetector": "^3.0.1",
"midgard-core": "^0.1.4",
"npm": "^6.9.0",
"path": "^0.12.7",
"polished": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.7.0",
"react": "^17.0.2",
"react-dom": "^16.7.0",
"react-hot-loader": "^4.6.3",
"react-i18next": "^10.11.0",
Expand Down Expand Up @@ -68,11 +70,11 @@
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.6.0",
"jest": "^23.6.0",
"node-sass": "^4.11.0",
"node-sass": "^6.0.1",
"react-docgen": "^4.1.1",
"react-docgen-typescript": "^1.12.4",
"redux-mock-store": "^1.5.3",
"sass-loader": "^7.1.0",
"sass-loader": "^10.2.0",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"ts-jest": "^24.0.2",
Expand Down
46 changes: 24 additions & 22 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import * as React from 'react';
import 'react-notifications/lib/notifications.css';
import { hot } from 'react-hot-loader';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need StyledEngineProvider?

Copy link
Collaborator Author

@MounikaReddy15 MounikaReddy15 Mar 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It gives custom styles precedence over MUI

import { PrivateRoute } from './routes/Private.route';
import { oauthService } from './modules/oauth/oauth.service';
import ContainerDashboard from './layout/Container/Container';
Expand All @@ -18,26 +18,28 @@ import { routes } from './routes/routesConstants';
function App() {
return (
<Router>
<ThemeProvider theme={theme}>
<div className="app">
<CssBaseline />
<Route
exact
path="/"
render={() => (oauthService.hasValidAccessToken() ? (
<Redirect to={routes.DASHBOARD} />
) : (
<Redirect to={routes.LOGIN} />
))}
/>
<Route path={routes.LOGIN} component={Login} />
<Route path={routes.REGISTER} component={Register} />
<Route path={routes.FORGOT_PASSWORD} component={ForgotPassword} />
<Route path={routes.RESET_PASSWORD} component={ResetPassword} />
<PrivateRoute path={routes.APP} component={ContainerDashboard} />
</div>
<Alert />
</ThemeProvider>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<div className="app">
<CssBaseline />
<Route
exact
path="/"
render={() => (oauthService.hasValidAccessToken() ? (
<Redirect to={routes.DASHBOARD} />
) : (
<Redirect to={routes.LOGIN} />
))}
/>
<Route path={routes.LOGIN} component={Login} />
<Route path={routes.REGISTER} component={Register} />
<Route path={routes.FORGOT_PASSWORD} component={ForgotPassword} />
<Route path={routes.RESET_PASSWORD} component={ResetPassword} />
<PrivateRoute path={routes.APP} component={ContainerDashboard} />
</div>
<Alert />
</ThemeProvider>
</StyledEngineProvider>
</Router>
);
}
Expand Down
14 changes: 8 additions & 6 deletions src/components/Alert/Alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { connect } from 'react-redux';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import { makeStyles } from '@material-ui/core/styles';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert from '@mui/material/Alert';
import makeStyles from '@mui/styles/makeStyles';
import { hideAlert } from '@redux/alert/alert.actions';

function AlertData(props) {
Expand Down Expand Up @@ -35,9 +35,11 @@ function Alert({ data, dispatch }) {
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
{data && (
<AlertData onClose={handleClose} severity={data.type}>
{data.message}
</AlertData>
<div>
MounikaReddy15 marked this conversation as resolved.
Show resolved Hide resolved
<AlertData onClose={handleClose} severity={data.type}>
{data.message}
</AlertData>
</div>
)}
</Snackbar>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Copyright/Copyright.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { AppContext } from '@context/App.context';

function Copyright() {
Expand Down
12 changes: 6 additions & 6 deletions src/components/InlineEditor/InlineEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useState, useEffect, useRef } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import EditIcon from '@material-ui/icons/Edit';
import TextField from '@material-ui/core/TextField';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import makeStyles from '@mui/styles/makeStyles';
import Typography from '@mui/material/Typography';
import EditIcon from '@mui/icons-material/Edit';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';

const useStyles = makeStyles((theme) => ({
nonEditMode: {
Expand Down
14 changes: 7 additions & 7 deletions src/components/StyledTable/StyledTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import Box from '@material-ui/core/Box';
import withStyles from '@mui/styles/withStyles';
import Table from '@mui/material/Table';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import Box from '@mui/material/Box';

const StyledContainer = withStyles((theme) => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions src/layout/Container/Container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { UserContext, getUser } from '@context/User.context';
import TopBar from '@layout/TopBar/TopBar';
import Profile from '@pages/Profile/Profile';
import UserManagement from '@pages/UserManagement/UserManagement';
import MatContainer from '@material-ui/core/Container';
import { makeStyles } from '@material-ui/core/styles';
import MatContainer from '@mui/material/Container';
import makeStyles from '@mui/styles/makeStyles';
import { routes } from '@routes/routesConstants';

const useStyles = makeStyles((theme) => ({
Expand Down
83 changes: 70 additions & 13 deletions src/layout/TopBar/TopBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import React from 'react';
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import GroupIcon from '@material-ui/icons/Group';
import makeStyles from '@mui/styles/makeStyles';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import { TextField, MenuItem } from '@mui/material';
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
import GroupIcon from '@mui/icons-material/Group';
import logo from '@assets/topbar-logo.png';
import { logout } from '@redux/authuser/authuser.actions';
import { routes } from '@routes/routesConstants';
import { UserContext } from '@context/User.context';
import { hasGlobalAdminRights, hasAdminRights } from '@utils/permissions';

const useStyles = makeStyles((theme) => ({
appBar: {
Expand All @@ -29,6 +32,35 @@ const useStyles = makeStyles((theme) => ({
paper: {
border: '1px solid',
},
globalFilter: {
width: theme.spacing(24),
marginTop: theme.spacing(1.5),
'& .MuiOutlinedInput-input': {
padding: theme.spacing(1, 3.5, 1, 2),
},
'& label.MuiInputLabel-outlined': {
color: '#fff',
},
'& label.Mui-focused': {
color: '#fff',
},
'&:hover': {
'&& fieldset': {
borderColor: '#fff',
},
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#fff',
},
'&.Mui-focused fieldset': {
borderColor: '#fff',
},
'& .MuiSelect-icon': {
color: '#fff',
},
},
},
}));

/**
Expand All @@ -41,6 +73,10 @@ function TopBar({
}) {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const user = useContext(UserContext);
let isSuperAdmin = false;
const isAdmin = hasAdminRights(user) || hasGlobalAdminRights(user);
isSuperAdmin = hasGlobalAdminRights(user);

const handleLogoutClick = () => {
dispatch(logout());
Expand All @@ -55,12 +91,33 @@ function TopBar({
</Link>

<div className={classes.menuRight}>
<Link to={routes.USER_MANAGEMENT}>
<IconButton aria-label="user-management" color="inherit">
<GroupIcon fontSize="large" className={classes.menuIcon} />
</IconButton>
</Link>
<IconButton aria-label="logout" color="inherit" onClick={handleLogoutClick}>
{isSuperAdmin && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check the placement as well. It is all disturbed.

image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Radhika can you tell me screen resolution, for me all medium and large screens placement is proper

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1320 x 1000

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

<TextField
className={classes.globalFilter}
variant="outlined"
fullWidth
id="org"
label="Organization"
select
>
<MenuItem>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is only None option hard coded here for Super Admin?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we don't have any api to fetch all org names

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be an API that we already use in TP as well as Insights code. So it should be similar here as well.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried and it was throwing 404 confirmed with BE as well that there's no API in buildly.io to fetch all orgs

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want a global admin filter we need to have a list of organizations. Without it, you cannot create a dropdown for global admin.

None
</MenuItem>
</TextField>
)}
{isAdmin && (
<Link to={routes.USER_MANAGEMENT}>
<IconButton aria-label="user-management" color="inherit" size="large">
<GroupIcon fontSize="large" className={classes.menuIcon} />
</IconButton>
</Link>
)}
<IconButton
aria-label="logout"
color="inherit"
onClick={handleLogoutClick}
size="large"
>
<ExitToAppIcon fontSize="large" className={classes.menuIcon} />
</IconButton>
</div>
Expand Down
24 changes: 12 additions & 12 deletions src/pages/ForgotPassword/ForgotPassword.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import React, { useState } from 'react';
import { connect } from 'react-redux';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import Box from '@material-ui/core/Box';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Card from '@mui/material/Card';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import makeStyles from '@mui/styles/makeStyles';
import Container from '@mui/material/Container';
import { useInput } from '@hooks/useInput';
import {
sendPasswordResetLink,
Expand Down
24 changes: 12 additions & 12 deletions src/pages/Login/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Card from '@material-ui/core/Card';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CircularProgress from '@mui/material/CircularProgress';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import makeStyles from '@mui/styles/makeStyles';
import Container from '@mui/material/Container';
import { useInput } from '@hooks/useInput';
import { login, validateResetPasswordToken } from '@redux/authuser/authuser.actions';
import { validators } from '@utils/validators';
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Profile/Profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Typography } from '@material-ui/core';
import { Typography } from '@mui/material';
import React from 'react';

function Profile() {
Expand Down
Loading