From 47a6adf3453f2de227f48c03619be39d3151d2b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Tue, 27 Jun 2023 15:51:39 -0400
Subject: [PATCH] bump react to v17 and fix compilation errors
Change-Id: I7f2770b2f4fdcc1efd61bbcc4e4f8df9f0279bb8
---
jams-react-client/package.json | 6 ++--
.../components/cardHeaderStyle.js | 35 ++++++++++---------
.../components/cardIconStyle.js | 17 ++++-----
.../src/components/CaSetup/CaSetup.js | 15 ++++----
.../CustomImgDropZone/CustomImgDropZone.js | 11 ++----
.../IdentityManagement/IdentityManagement.js | 15 ++++----
.../IdentityManagement/LdapStorageForm.js | 5 +--
.../PasswordDialog/PasswordDialog.js | 2 +-
.../ServerParameters/ServerParameters.js | 20 ++++++-----
jams-react-client/src/tools.js | 6 +++-
.../Blueprint/EditBlueprintConfiguration.js | 5 ++-
.../Blueprint/EditBlueprintPermissions.js | 5 ++-
.../src/views/Blueprint/EditBlueprintUi.js | 12 ++++---
.../views/Blueprint/EditBlueprintUiForm.js | 8 +++--
.../src/views/Groups/EditGroup.js | 5 +--
.../UserProfile/EditCreateUserProfile.js | 12 +++----
16 files changed, 97 insertions(+), 82 deletions(-)
diff --git a/jams-react-client/package.json b/jams-react-client/package.json
index f098febf..361a1230 100644
--- a/jams-react-client/package.json
+++ b/jams-react-client/package.json
@@ -21,16 +21,16 @@
"material-ui-popup-state": "^1.6.1",
"perfect-scrollbar": "1.5.5",
"prop-types": "15.8.1",
- "react": "^16.13.1",
+ "react": "^17.0.0",
"react-color": "^2.19.3",
"react-copy-to-clipboard": "^5.0.2",
- "react-dom": "16.13.1",
+ "react-dom": "^17.0.0",
"react-dropzone": "^14.2.3",
"react-easy-crop": "^3.1.1",
"react-i18next": "^11.7.3",
"react-image-file-resizer": "^0.3.8",
"react-router-dom": "5.2.0",
- "react-scripts": "^3.4.3",
+ "react-scripts": "^4.0.0",
"yup": "^1.2.0"
},
"scripts": {
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardHeaderStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardHeaderStyle.js
index 7cb8f459..799fe484 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardHeaderStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardHeaderStyle.js
@@ -15,22 +15,24 @@ const cardHeaderStyle = {
borderBottom: "none",
background: "transparent",
zIndex: "3 !important",
- "&$cardHeaderPlain,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": {
- margin: "0 15px",
- padding: "0",
- position: "relative",
- color: whiteColor,
- },
+ "&$cardHeaderPlain,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader":
+ {
+ margin: "0 15px",
+ padding: "0",
+ position: "relative",
+ color: whiteColor,
+ },
"&:first-child": {
borderRadius: "calc(.25rem - 1px) calc(.25rem - 1px) 0 0",
},
- "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": {
- "&:not($cardHeaderIcon)": {
- borderRadius: "3px",
- marginTop: "-20px",
- padding: "15px",
+ "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader":
+ {
+ "&:not($cardHeaderIcon)": {
+ borderRadius: "3px",
+ marginTop: "-20px",
+ padding: "15px",
+ },
},
- },
"&$cardHeaderStats svg": {
fontSize: "36px",
lineHeight: "56px",
@@ -65,10 +67,11 @@ const cardHeaderStyle = {
},
},
cardHeaderIcon: {
- "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": {
- background: "transparent",
- boxShadow: "none",
- },
+ "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader":
+ {
+ background: "transparent",
+ boxShadow: "none",
+ },
"& i,& .material-icons": {
width: "33px",
height: "33px",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardIconStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardIconStyle.js
index 572ed2cb..b94080ca 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardIconStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardIconStyle.js
@@ -10,14 +10,15 @@ import {
const cardIconStyle = {
cardIcon: {
- "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": {
- borderRadius: "3px",
- backgroundColor: grayColor[0],
- padding: "15px",
- marginTop: "-20px",
- marginRight: "15px",
- float: "left",
- },
+ "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader":
+ {
+ borderRadius: "3px",
+ backgroundColor: grayColor[0],
+ padding: "15px",
+ marginTop: "-20px",
+ marginRight: "15px",
+ float: "left",
+ },
},
warningCardHeader,
successCardHeader,
diff --git a/jams-react-client/src/components/CaSetup/CaSetup.js b/jams-react-client/src/components/CaSetup/CaSetup.js
index 647f6895..0029e005 100644
--- a/jams-react-client/src/components/CaSetup/CaSetup.js
+++ b/jams-react-client/src/components/CaSetup/CaSetup.js
@@ -212,8 +212,9 @@ export default function CaSetup(props) {
value={certificateOpt.value}
onChange={handleCertifOptionChange}
variant="outlined"
- children={certificateOptionsItems}
- />
+ >
+ {certificateOptionsItems}
+ </Select>
<TextField
variant="outlined"
@@ -312,8 +313,9 @@ export default function CaSetup(props) {
variant="outlined"
value={validityPeriod.value}
onChange={handleValidPeriodChange}
- children={validityPeriodsItems}
- />
+ >
+ {validityPeriodsItems}
+ </Select>
<Button
type="submit"
@@ -358,8 +360,9 @@ export default function CaSetup(props) {
value={certificateOpt.value}
onChange={handleCertifOptionChange}
variant="outlined"
- children={certificateOptionsItems}
- />
+ >
+ {certificateOptionsItems}
+ </Select>
<Typography variant="subtitle1" gutterBottom>
CA file (PEM-encoded)
</Typography>
diff --git a/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js b/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
index 423eb972..988733d0 100644
--- a/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
+++ b/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
@@ -33,15 +33,8 @@ const useStyles = makeStyles({
});
function CustomImgDropZone(props) {
- const {
- onDrop,
- accept,
- maxFiles,
- label,
- file,
- handleDelete,
- ...rest
- } = props;
+ const { onDrop, accept, maxFiles, label, file, handleDelete, ...rest } =
+ props;
const classes = useStyles();
const handleDrop = (acceptedFiles) => {
diff --git a/jams-react-client/src/components/IdentityManagement/IdentityManagement.js b/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
index 4b4386a5..31e560ba 100644
--- a/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
+++ b/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
@@ -323,8 +323,9 @@ export default function IdentityManagement(props) {
value={directory.value}
onChange={handleChangeDirectoryType}
variant="outlined"
- children={directoryTypesItems}
- />
+ >
+ {directoryTypesItems}
+ </Select>
</Grid>
</Grid>
<LocalStorageForm
@@ -379,8 +380,9 @@ export default function IdentityManagement(props) {
value={directory.value}
onChange={handleChangeDirectoryType}
variant="outlined"
- children={directoryTypesItems}
- />
+ >
+ {directoryTypesItems}
+ </Select>
</Grid>
</Grid>
{returnForm(values, touched, errors, handleChange, handleBlur)}
@@ -438,8 +440,9 @@ export default function IdentityManagement(props) {
value={directory.value}
onChange={handleChangeDirectoryType}
variant="outlined"
- children={directoryTypesItems}
- />
+ >
+ {directoryTypesItems}
+ </Select>
</Grid>
</Grid>
{returnForm(values, touched, errors, handleChange, handleBlur)}
diff --git a/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js b/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
index ab6f51be..df98d525 100644
--- a/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
@@ -140,8 +140,9 @@ export default function LdapStorageForm(props) {
value={props.ldapFilter.value}
onChange={props.handleFilterIdChange}
variant="outlined"
- children={props.ldapFiltersTypesItems}
- />
+ >
+ {props.ldapFiltersTypesItems}
+ </Select>
</Grid>
</Grid>
);
diff --git a/jams-react-client/src/components/PasswordDialog/PasswordDialog.js b/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
index a9c6bcce..b3974c11 100644
--- a/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
+++ b/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
@@ -158,7 +158,7 @@ export default function PasswordDialog(props) {
<form onSubmit={handleSubmit}>
<DialogContent>
<DialogContentText id="change-password-description">
- Change <strong>{props.username}'s</strong> password{" "}
+ Change <strong>{props.username}'s</strong> password
</DialogContentText>
<FormikField
name="password"
diff --git a/jams-react-client/src/components/ServerParameters/ServerParameters.js b/jams-react-client/src/components/ServerParameters/ServerParameters.js
index 18451c0c..7cb0c143 100644
--- a/jams-react-client/src/components/ServerParameters/ServerParameters.js
+++ b/jams-react-client/src/components/ServerParameters/ServerParameters.js
@@ -74,9 +74,8 @@ export default function ServerParameters(props) {
const certificateRevocationTypesItems = tool.buildSelectMenuItems(
certificateRevocationTypes
);
- const deviceLifetimeTypesItems = tool.buildSelectMenuItems(
- deviceLifetimeTypes
- );
+ const deviceLifetimeTypesItems =
+ tool.buildSelectMenuItems(deviceLifetimeTypes);
const userAccountLifetimeTypesItems = tool.buildSelectMenuItems(
userAccountLifetimeTypes
);
@@ -244,8 +243,9 @@ export default function ServerParameters(props) {
value={certificateRevocation.value}
onChange={handleCertificateRevocationChange}
variant="outlined"
- children={certificateRevocationTypesItems}
- />
+ >
+ {certificateRevocationTypesItems}
+ </Select>
<Typography variant="subtitle1" gutterBottom>
{i18next.t("device_lifetime", "Device lifetime")}
</Typography>
@@ -255,8 +255,9 @@ export default function ServerParameters(props) {
value={deviceLifetime.value}
onChange={handleDeviceLifetimeChange}
variant="outlined"
- children={deviceLifetimeTypesItems}
- />
+ >
+ {deviceLifetimeTypesItems}
+ </Select>
<Typography variant="subtitle1" gutterBottom>
{i18next.t("user_account_lifetime", "User account lifetime")}
</Typography>
@@ -266,8 +267,9 @@ export default function ServerParameters(props) {
value={userAccountLifetime.value}
onChange={handleUserAccountLifetimeChange}
variant="outlined"
- children={userAccountLifetimeTypesItems}
- />
+ >
+ {userAccountLifetimeTypesItems}
+ </Select>
{userlifeDisabled ? (
<span className="spanError">
{i18next.t(
diff --git a/jams-react-client/src/tools.js b/jams-react-client/src/tools.js
index eb0cec13..e3df480d 100644
--- a/jams-react-client/src/tools.js
+++ b/jams-react-client/src/tools.js
@@ -2,7 +2,11 @@ import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
export function buildSelectMenuItems(elements) {
- return elements.map((d) => <MenuItem key={d.value} value={d.value}>{d.label}</MenuItem>);
+ return elements.map((d) => (
+ <MenuItem key={d.value} value={d.value}>
+ {d.label}
+ </MenuItem>
+ ));
}
// read file content
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
index 7017a89f..588e8317 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
@@ -159,9 +159,8 @@ const StyledRadio = (props) => {
export default function EditBlueprintConfiguration(props) {
const classes = useStyles();
- const { policyData, updatePolicyData, snackbar, setSnackbar } = useContext(
- PolicyDataContext
- );
+ const { policyData, updatePolicyData, snackbar, setSnackbar } =
+ useContext(PolicyDataContext);
const {
upnpEnabled,
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
index acfaecb1..3ae3e513 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
@@ -104,9 +104,8 @@ export default function EditBlueprintPermissions(props) {
const classes = useStyles();
const history = useHistory();
- const { policyData, updatePolicyData, snackbar, setSnackbar } = useContext(
- PolicyDataContext
- );
+ const { policyData, updatePolicyData, snackbar, setSnackbar } =
+ useContext(PolicyDataContext);
const [openDrawer, setOpenDrawer] = useState(false);
const [users, setUsers] = useState([]);
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
index ccd33ac7..d5be85f8 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
@@ -14,7 +14,12 @@ import GridContainer from "components/Grid/GridContainer.js";
import { hexToRgb, blackColor } from "assets/jss/material-dashboard-react.js";
-import { api_path_get_image, api_path_post_image, url_path, url_port } from "../../globalUrls";
+import {
+ api_path_get_image,
+ api_path_post_image,
+ url_path,
+ url_port,
+} from "../../globalUrls";
import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
@@ -93,9 +98,8 @@ const useStyles = makeStyles(styles);
export default function EditBlueprintUi({ blueprintName }) {
const classes = useStyles();
- const { policyData, updatePolicyData, snackbar, setSnackbar } = useContext(
- PolicyDataContext
- );
+ const { policyData, updatePolicyData, snackbar, setSnackbar } =
+ useContext(PolicyDataContext);
const { uiCustomization } = policyData;
const setUiCustomization = (ui) => {
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
index 5831a73b..33385330 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
@@ -271,7 +271,9 @@ const CustomBackgroundForm = ({
onDrop={(files) => {
handleImgDrop(files, "background");
}}
- label={i18next.t("upload_an_image", "Upload an image").toUpperCase()}
+ label={i18next
+ .t("upload_an_image", "Upload an image")
+ .toUpperCase()}
file={bgFile}
setFile={setBgFile}
handleDelete={(e) => {
@@ -330,7 +332,9 @@ const LogoForm = ({
<FormGroup row style={{ padding: "10px 0" }}>
<CustomImgDropZone
onDrop={(files) => handleImgDrop(files, "logo")}
- label={i18next.t("upload_a_logotype", "Upload a logotype").toUpperCase()}
+ label={i18next
+ .t("upload_a_logotype", "Upload a logotype")
+ .toUpperCase()}
file={logoFile}
setFile={setLogoFile}
handleDelete={(e) => {
diff --git a/jams-react-client/src/views/Groups/EditGroup.js b/jams-react-client/src/views/Groups/EditGroup.js
index dcbd5fd3..f2323c32 100644
--- a/jams-react-client/src/views/Groups/EditGroup.js
+++ b/jams-react-client/src/views/Groups/EditGroup.js
@@ -436,9 +436,10 @@ export default function EditGroup(props) {
value={selectedBlueprint.value}
onChange={handleBlueprintsChange}
variant="outlined"
- children={blueprintsOptionsItems}
disabled={blueprints.length === 0}
- />
+ >
+ {blueprintsOptionsItems}
+ </Select>
</FormControl>
</Grid>
</Grid>
diff --git a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
index 0c4ca594..45c82e1d 100644
--- a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
@@ -231,9 +231,8 @@ export default function EditCreateUserProfile(props) {
const [progress, setProgress] = useState(0);
const [profilePicture, setProfilePicture] = useState("");
- const [profilePicturePreview, setProfilePicturePreview] = useState(
- noProfilePicture
- );
+ const [profilePicturePreview, setProfilePicturePreview] =
+ useState(noProfilePicture);
const [originalUploadedImage, setOriginalUploadedImage] = useState("");
const [open, setOpen] = useState(false);
@@ -687,9 +686,7 @@ export default function EditCreateUserProfile(props) {
</InputAdornment>
}
endAdornment={
- values.username === "" ? (
- null
- ) : userExists ? (
+ values.username === "" ? null : userExists ? (
<CancelIcon style={{ color: "#cc0000" }} />
) : (
<CheckCircleIcon
@@ -801,7 +798,8 @@ export default function EditCreateUserProfile(props) {
className={classes.button}
startIcon={<RefreshIcon />}
onClick={() => {
- const newGeneratedPassword = passwordGenerator();
+ const newGeneratedPassword =
+ passwordGenerator();
setFieldValue(
"password",
newGeneratedPassword,
--
GitLab