From e176d933729be52e1ad964cc5f93ddc60364fe49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Tue, 11 Jul 2023 09:55:38 -0400
Subject: [PATCH] jams-react-client: run @mui/codemod
Change-Id: If63606834ec2b0f4f02de3b61a175c4f2fb93194
---
.../components/cardFooterStyle.js | 2 +-
.../components/headerLinksStyle.js | 12 +--
.../components/headerStyle.js | 2 +-
.../components/sidebarStyle.js | 4 +-
.../material-dashboard-react/dropdownStyle.js | 8 +-
.../layouts/adminStyle.js | 2 +-
.../CustomPopupState/CustomPopupState.js | 2 +-
.../src/components/Devices/Devices.js | 2 +
.../src/components/Navbars/Navbar.js | 1 +
.../PasswordDialog/PasswordDialog.js | 2 +
.../src/components/Sidebar/Sidebar.js | 2 +-
jams-react-client/src/index.js | 77 +++++++++++--------
.../Blueprint/EditBlueprintConfiguration.js | 1 +
.../src/views/Blueprints/Blueprints.js | 1 +
.../src/views/Contacts/Contacts.js | 1 +
.../src/views/Groups/EditGroup.js | 1 +
jams-react-client/src/views/Groups/Groups.js | 1 +
.../src/views/Settings/General.js | 2 +
.../views/UserProfile/DisplayUserProfile.js | 10 +--
.../UserProfile/EditCreateUserProfile.js | 13 ++--
20 files changed, 85 insertions(+), 61 deletions(-)
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardFooterStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardFooterStyle.js
index 3488ec30..b3554ac2 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardFooterStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardFooterStyle.js
@@ -11,7 +11,7 @@ const cardFooterStyle = (theme) => ({
display: "flex",
backgroundColor: "transparent",
border: "0",
- [theme.breakpoints.down("xs")]: {
+ [theme.breakpoints.down("sm")]: {
display: "flex",
flexDirection: "column",
"& div": {
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/headerLinksStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/headerLinksStyle.js
index 818cb007..d00a992d 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/headerLinksStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/headerLinksStyle.js
@@ -12,7 +12,7 @@ const headerLinksStyle = (theme) => ({
"& > div": {
marginTop: "0",
},
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
margin: "10px 15px !important",
float: "none !important",
paddingTop: "1px",
@@ -32,7 +32,7 @@ const headerLinksStyle = (theme) => ({
margin: "0px",
},
buttonLink: {
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
display: "flex",
margin: "10px 15px 0",
width: "-webkit-fill-available",
@@ -57,7 +57,7 @@ const headerLinksStyle = (theme) => ({
},
},
searchButton: {
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
top: "-50px !important",
marginRight: "22px",
float: "right",
@@ -89,20 +89,20 @@ const headerLinksStyle = (theme) => ({
verticalAlign: "middle",
display: "block",
},
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
...defaultFont,
fontSize: "14px",
marginRight: "8px",
},
},
manager: {
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
width: "100%",
},
display: "inline-block",
},
searchWrapper: {
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
width: "-webkit-fill-available",
margin: "10px 15px 0",
},
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/headerStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/headerStyle.js
index 3837478d..8b241a84 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/headerStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/headerStyle.js
@@ -19,7 +19,7 @@ const headerStyle = (theme) => ({
marginBottom: "0",
position: "absolute",
width: "50%",
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
width: "130px",
},
[theme.breakpoints.up("md")]: {
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
index 3866e6b4..c2202b68 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
@@ -29,7 +29,7 @@ const sidebarStyle = (theme) => ({
position: "fixed",
height: "100%",
},
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
width: drawerWidth,
...boxShadow,
position: "fixed",
@@ -54,7 +54,7 @@ const sidebarStyle = (theme) => ({
left: "auto !important",
right: "0 !important",
},
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
left: "0 !important",
right: "auto !important",
},
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/dropdownStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/dropdownStyle.js
index 6e614663..83edd189 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/dropdownStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/dropdownStyle.js
@@ -10,7 +10,7 @@ import {
const dropdownStyle = (theme) => ({
buttonLink: {
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
display: "flex",
marginLeft: "30px",
width: "auto",
@@ -20,7 +20,7 @@ const dropdownStyle = (theme) => ({
width: "20px",
height: "20px",
zIndex: "4",
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
display: "block",
width: "30px",
height: "30px",
@@ -37,7 +37,7 @@ const dropdownStyle = (theme) => ({
pointerEvents: "none",
},
popperResponsive: {
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
zIndex: "1640",
position: "static",
float: "none",
@@ -51,7 +51,7 @@ const dropdownStyle = (theme) => ({
},
},
popperNav: {
- [theme.breakpoints.down("sm")]: {
+ [theme.breakpoints.down("md")]: {
position: "static !important",
left: "unset !important",
top: "unset !important",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/layouts/adminStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/layouts/adminStyle.js
index 224045e9..ca56414d 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/layouts/adminStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/layouts/adminStyle.js
@@ -24,7 +24,7 @@ const appStyle = (theme) => ({
},
content: {
marginTop: "0px",
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
marginTop: "30px",
},
padding: "30px 15px",
diff --git a/jams-react-client/src/components/CustomPopupState/CustomPopupState.js b/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
index a9d3e621..214298f9 100644
--- a/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
+++ b/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
@@ -8,7 +8,7 @@ import Typography from "@mui/material/Typography";
export default function CustomPopupState(props) {
return (
- <IconButton>
+ <IconButton size="large">
<PopupState variant="popover" popupId="demo-popup-popover">
{(popupState) => (
<div>
diff --git a/jams-react-client/src/components/Devices/Devices.js b/jams-react-client/src/components/Devices/Devices.js
index ecaf88e5..381d5eb2 100755
--- a/jams-react-client/src/components/Devices/Devices.js
+++ b/jams-react-client/src/components/Devices/Devices.js
@@ -279,6 +279,7 @@ export default function Devices(props) {
aria-label="Edit"
className={classes.tableActionButton}
onClick={(e) => handleClickEdit(e, device)}
+ size="large"
>
<Edit
className={
@@ -297,6 +298,7 @@ export default function Devices(props) {
aria-label="Close"
className={classes.tableActionButton}
onClick={(e) => handleClickRevoke(e, device)}
+ size="large"
>
<Close
className={
diff --git a/jams-react-client/src/components/Navbars/Navbar.js b/jams-react-client/src/components/Navbars/Navbar.js
index ebf21761..aacd9e71 100755
--- a/jams-react-client/src/components/Navbars/Navbar.js
+++ b/jams-react-client/src/components/Navbars/Navbar.js
@@ -37,6 +37,7 @@ export default function Header(props) {
color="default"
aria-label="open drawer"
onClick={props.handleDrawerToggle}
+ size="large"
>
<Menu />
</IconButton>
diff --git a/jams-react-client/src/components/PasswordDialog/PasswordDialog.js b/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
index dd59997a..5b588f69 100644
--- a/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
+++ b/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
@@ -177,6 +177,7 @@ export default function PasswordDialog(props) {
aria-label="toggle password visibility"
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
+ size="large"
>
{passwordVisible ? (
<VisibilityIcon />
@@ -205,6 +206,7 @@ export default function PasswordDialog(props) {
aria-label="toggle password visibility"
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
+ size="large"
>
{passwordVisible ? (
<VisibilityIcon />
diff --git a/jams-react-client/src/components/Sidebar/Sidebar.js b/jams-react-client/src/components/Sidebar/Sidebar.js
index 12beefb3..146e00d0 100755
--- a/jams-react-client/src/components/Sidebar/Sidebar.js
+++ b/jams-react-client/src/components/Sidebar/Sidebar.js
@@ -193,7 +193,7 @@ export default function Sidebar(props) {
) : null}
</Drawer>
</Hidden>
- <Hidden smDown implementation="css">
+ <Hidden mdDown implementation="css">
<Drawer
anchor={props.rtlActive ? "right" : "left"}
variant="permanent"
diff --git a/jams-react-client/src/index.js b/jams-react-client/src/index.js
index 3c3063da..ba4e3798 100644
--- a/jams-react-client/src/index.js
+++ b/jams-react-client/src/index.js
@@ -23,7 +23,11 @@ import { ProtectedRoute } from "protected.route";
import { ConfiguredRoute } from "configured.route";
import auth from "./auth";
-import { ThemeProvider, createTheme } from "@mui/material";
+import {
+ ThemeProvider,
+ StyledEngineProvider,
+ createTheme,
+} from "@mui/material";
// core components
import UsersRoute from "routes/UsersRoute.js";
@@ -65,39 +69,44 @@ auth.checkServerInstalled(() => {
auth.checkLastKnownStep(() => {
ReactDOM.render(
<StrictMode>
- <ThemeProvider theme={theme}>
- <Suspense fallback={<div>Loading...</div>}>
- <Router history={hist}>
- <Switch>
- <ConfiguredRoute path="/signin" component={SignIn} />
- <ProtectedRoute path="/users" component={UsersRoute} />
- <ProtectedRoute
- path="/user/:username"
- component={UserRoute}
- />
- <ProtectedRoute
- path="/createuser"
- component={CreateUserRoute}
- />
- <ProtectedRoute path="/groups" component={GroupsRoute} />
- <ProtectedRoute
- path="/group/:groupid"
- component={GroupRoute}
- />
- <ProtectedRoute
- path="/blueprints"
- component={BlueprintsRoute}
- />
- <ProtectedRoute
- path="/blueprint/:blueprintname"
- component={BlueprintRoute}
- />
- <ProtectedRoute path="/settings" component={SettingsRoute} />
- <Redirect from="/" to="/signin" />
- </Switch>
- </Router>
- </Suspense>
- </ThemeProvider>
+ <StyledEngineProvider injectFirst>
+ <ThemeProvider theme={theme}>
+ <Suspense fallback={<div>Loading...</div>}>
+ <Router history={hist}>
+ <Switch>
+ <ConfiguredRoute path="/signin" component={SignIn} />
+ <ProtectedRoute path="/users" component={UsersRoute} />
+ <ProtectedRoute
+ path="/user/:username"
+ component={UserRoute}
+ />
+ <ProtectedRoute
+ path="/createuser"
+ component={CreateUserRoute}
+ />
+ <ProtectedRoute path="/groups" component={GroupsRoute} />
+ <ProtectedRoute
+ path="/group/:groupid"
+ component={GroupRoute}
+ />
+ <ProtectedRoute
+ path="/blueprints"
+ component={BlueprintsRoute}
+ />
+ <ProtectedRoute
+ path="/blueprint/:blueprintname"
+ component={BlueprintRoute}
+ />
+ <ProtectedRoute
+ path="/settings"
+ component={SettingsRoute}
+ />
+ <Redirect from="/" to="/signin" />
+ </Switch>
+ </Router>
+ </Suspense>
+ </ThemeProvider>
+ </StyledEngineProvider>
</StrictMode>,
document.getElementById("root")
);
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
index 6bc9896a..9aa2b6f7 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
@@ -361,6 +361,7 @@ export default function EditBlueprintConfiguration(props) {
aria-label="toggle password visibility"
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
+ size="large"
>
{turnPasswordVisible ? (
<VisibilityIcon />
diff --git a/jams-react-client/src/views/Blueprints/Blueprints.js b/jams-react-client/src/views/Blueprints/Blueprints.js
index c137d58d..f5bc0b5d 100644
--- a/jams-react-client/src/views/Blueprints/Blueprints.js
+++ b/jams-react-client/src/views/Blueprints/Blueprints.js
@@ -404,6 +404,7 @@ export default function Blueprints() {
onClick={() => {
handleRemoveBlueprint(blueprint.name);
}}
+ size="large"
>
<DeleteOutlineIcon />
</IconButton>
diff --git a/jams-react-client/src/views/Contacts/Contacts.js b/jams-react-client/src/views/Contacts/Contacts.js
index 7ed9da0a..6981934a 100644
--- a/jams-react-client/src/views/Contacts/Contacts.js
+++ b/jams-react-client/src/views/Contacts/Contacts.js
@@ -489,6 +489,7 @@ export default function Users(props) {
onClick={() => {
handleRemoveContact(contact.uri, contact.username);
}}
+ size="large"
>
<DeleteOutlineIcon />
</IconButton>
diff --git a/jams-react-client/src/views/Groups/EditGroup.js b/jams-react-client/src/views/Groups/EditGroup.js
index cf15e2f1..d49ef7d9 100644
--- a/jams-react-client/src/views/Groups/EditGroup.js
+++ b/jams-react-client/src/views/Groups/EditGroup.js
@@ -411,6 +411,7 @@ export default function EditGroup(props) {
updateGroup();
}}
disabled={groupNameExits || name === newName}
+ size="large"
>
<SaveIcon />
</IconButton>
diff --git a/jams-react-client/src/views/Groups/Groups.js b/jams-react-client/src/views/Groups/Groups.js
index 07af2979..3461d86d 100644
--- a/jams-react-client/src/views/Groups/Groups.js
+++ b/jams-react-client/src/views/Groups/Groups.js
@@ -513,6 +513,7 @@ export default function Groups() {
onClick={() => {
handleRemoveGroup(group);
}}
+ size="large"
>
<DeleteOutlineIcon />
</IconButton>
diff --git a/jams-react-client/src/views/Settings/General.js b/jams-react-client/src/views/Settings/General.js
index f7e8c528..04ebe33a 100644
--- a/jams-react-client/src/views/Settings/General.js
+++ b/jams-react-client/src/views/Settings/General.js
@@ -180,6 +180,7 @@ export default function General(props) {
aria-label="toggle password visibility"
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
+ size="large"
>
{passwordVisible ? (
<VisibilityIcon />
@@ -217,6 +218,7 @@ export default function General(props) {
aria-label="toggle password visibility"
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
+ size="large"
>
{passwordVisible ? (
<VisibilityIcon />
diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
index 62c1796b..7863a4c6 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
@@ -128,7 +128,7 @@ const styles = (theme) => ({
maxWidth: "80vh",
},
profileFooter: {
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
display: "flex",
flexDirection: "column",
},
@@ -140,7 +140,7 @@ const styles = (theme) => ({
"& button": {
marginRight: "1rem",
},
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
flexDirection: "column",
alignItems: "stretch",
"& button": {
@@ -153,7 +153,7 @@ const styles = (theme) => ({
display: "flex",
justifyContent: "flex-end",
alignItems: "end",
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
flexDirection: "column",
justifyContent: "center",
alignItems: "stretch",
@@ -166,7 +166,7 @@ const styles = (theme) => ({
userProfileHeader: {
display: "flex",
justifyContent: "space-between",
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
display: "flex",
flexDirection: "column",
textAlign: "center",
@@ -181,7 +181,7 @@ const styles = (theme) => ({
},
},
cardAvatarMobile: {
- [theme.breakpoints.down("md")]: {
+ [theme.breakpoints.down("lg")]: {
textAlign: "center",
},
},
diff --git a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
index 7c4d86c6..38917923 100644
--- a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
@@ -136,7 +136,7 @@ const styles = (theme) => ({
},
alignRight: {
float: "right",
- [theme.breakpoints.down("xs")]: {
+ [theme.breakpoints.down("sm")]: {
display: "flex",
flexDirection: "column",
"& button": {
@@ -176,7 +176,7 @@ const styles = (theme) => ({
alignItems: "center",
},
sliderLabel: {
- [theme.breakpoints.down("xs")]: {
+ [theme.breakpoints.down("sm")]: {
minWidth: 65,
},
},
@@ -191,14 +191,14 @@ const styles = (theme) => ({
},
},
profileEditHeaderMobile: {
- [theme.breakpoints.down("xs")]: {
+ [theme.breakpoints.down("sm")]: {
display: "flex",
flexDirection: "column",
alignItems: "center",
},
},
profileEditAvatarMobile: {
- [theme.breakpoints.down("xs")]: {
+ [theme.breakpoints.down("sm")]: {
display: "flex",
flexDirection: "column",
alignItems: "center",
@@ -206,7 +206,7 @@ const styles = (theme) => ({
},
},
profileEditAvatarInputMobile: {
- [theme.breakpoints.down("xs")]: {
+ [theme.breakpoints.down("sm")]: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
@@ -665,6 +665,7 @@ export default function EditCreateUserProfile(props) {
id="change-profile-picture"
aria-label="upload picture"
component="span"
+ size="large"
>
<PhotoCamera />
</IconButton>{" "}
@@ -725,6 +726,7 @@ export default function EditCreateUserProfile(props) {
aria-label="toggle password visibility"
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
+ size="large"
>
{passwordVisible ? (
<VisibilityIcon />
@@ -764,6 +766,7 @@ export default function EditCreateUserProfile(props) {
aria-label="toggle password visibility"
onMouseDown={handleMouseDownPassword}
onMouseUp={handleMouseUpPassword}
+ size="large"
>
{passwordVisible ? (
<VisibilityIcon />
--
GitLab