From eb457dc4f8adb7d4eb70823309f536e597113479 Mon Sep 17 00:00:00 2001
From: Christina Jenks <christina.jenks@ess.eu>
Date: Fri, 28 Jul 2023 09:13:18 +0000
Subject: [PATCH] CE-1915: Migrate to emotion
---
package-lock.json | 376 ------------------
package.json | 2 -
.../AdministerUndeployment.js | 26 +-
.../IOC/AlertMessages/AlertMessages.js | 21 +-
.../IOC/IOCCreateDialog/IOCCreateDialog.js | 17 +-
src/components/IOC/IOCDelete/IOCDelete.js | 26 +-
.../IOC/IOCDeployDialog/IOCDeployDialog.js | 21 +-
.../IOC/IOCDetailAdmin/IOCDetailAdmin.js | 114 +++---
src/components/IOC/IOCIcons/IOCIcons.js | 2 +-
.../IOC/IOCLiveStatus/IOCLiveStatus.js | 110 ++---
src/components/IOC/IOCService/IOCService.js | 32 +-
.../IOCUndeployDialog/IOCUndeployDialog.js | 20 +-
src/components/Job/JobDetails.js | 19 +-
.../auth/AccessDenied/AccessDenied.js | 17 +-
src/components/auth/Login/Login.js | 20 +-
.../common/Console/ConsoleOutput.js | 37 +-
src/components/common/Console/LogDialog.js | 17 +-
src/components/common/Loki/LokiPanel.js | 95 +++--
src/components/common/Popover/Popover.js | 25 +-
.../common/SearchBoxFilter/SearchBoxFilter.js | 37 +-
.../common/SimpleModal/SimpleModal.js | 16 +-
src/components/common/snackbar/Snackbar.js | 18 +-
.../common/stepper/StepperWithStyle.js | 163 ++++----
.../deployments/DeploymentDetails.js | 27 +-
src/components/dialog/ConfirmationDialog.js | 18 +-
.../navigation/GlobalAppBar/GlobalAppBar.js | 184 ++++-----
src/components/navigation/Menu/MenuDrawer.js | 35 +-
src/components/navigation/NotFound.js | 17 +-
src/views/IOC/IOCListView.js | 17 +-
src/views/help/HelpView.js | 21 +-
src/views/home/HomeView.js | 20 +-
src/views/host/HostDetailsView.js | 21 +-
src/views/host/HostListView.js | 17 +-
src/views/jobs/JobListView.js | 25 +-
src/views/statistics/StatisticsView.js | 18 +-
35 files changed, 704 insertions(+), 947 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index ee4ec5cc..82cca1fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,9 +13,7 @@
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
- "@mui/lab": "^5.0.0-alpha.137",
"@mui/material": "^5.14.1",
- "@mui/styles": "^5.14.1",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.0",
@@ -4128,52 +4126,6 @@
}
}
},
- "node_modules/@mui/lab": {
- "version": "5.0.0-alpha.137",
- "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.137.tgz",
- "integrity": "sha512-bHfcfti9/GnB657QpTdlK1fc9gjkP3SC+NrXyb9NCr0rT5Cq7TEkBGXyY5wGUSCyHR3CrMvchkIsfG5sH/NJ9A==",
- "dependencies": {
- "@babel/runtime": "^7.22.6",
- "@mui/base": "5.0.0-beta.8",
- "@mui/system": "^5.14.1",
- "@mui/types": "^7.2.4",
- "@mui/utils": "^5.14.1",
- "clsx": "^1.2.1",
- "prop-types": "^15.8.1",
- "react-is": "^18.2.0"
- },
- "engines": {
- "node": ">=12.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui"
- },
- "peerDependencies": {
- "@emotion/react": "^11.5.0",
- "@emotion/styled": "^11.3.0",
- "@mui/material": "^5.0.0",
- "@types/react": "^17.0.0 || ^18.0.0",
- "react": "^17.0.0 || ^18.0.0",
- "react-dom": "^17.0.0 || ^18.0.0"
- },
- "peerDependenciesMeta": {
- "@emotion/react": {
- "optional": true
- },
- "@emotion/styled": {
- "optional": true
- },
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/@mui/lab/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
- },
"node_modules/@mui/material": {
"version": "5.14.1",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.1.tgz",
@@ -4290,56 +4242,6 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
- "node_modules/@mui/styles": {
- "version": "5.14.1",
- "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.14.1.tgz",
- "integrity": "sha512-+oF3diiAbfnD5TFVyiwSe2rl+aNInBKpkam88oF2XrLtC3Ult9BNatn4tzH55U+s/KWL2zjEItdciaRIg0fAAg==",
- "dependencies": {
- "@babel/runtime": "^7.22.6",
- "@emotion/hash": "^0.9.1",
- "@mui/private-theming": "^5.13.7",
- "@mui/types": "^7.2.4",
- "@mui/utils": "^5.14.1",
- "clsx": "^1.2.1",
- "csstype": "^3.1.2",
- "hoist-non-react-statics": "^3.3.2",
- "jss": "^10.10.0",
- "jss-plugin-camel-case": "^10.10.0",
- "jss-plugin-default-unit": "^10.10.0",
- "jss-plugin-global": "^10.10.0",
- "jss-plugin-nested": "^10.10.0",
- "jss-plugin-props-sort": "^10.10.0",
- "jss-plugin-rule-value-function": "^10.10.0",
- "jss-plugin-vendor-prefixer": "^10.10.0",
- "prop-types": "^15.8.1"
- },
- "engines": {
- "node": ">=12.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui"
- },
- "peerDependencies": {
- "@types/react": "^17.0.0 || ^18.0.0",
- "react": "^17.0.0"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/@mui/styles/node_modules/@emotion/hash": {
- "version": "0.9.1",
- "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
- "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
- },
- "node_modules/@mui/styles/node_modules/csstype": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
- "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
- },
"node_modules/@mui/system": {
"version": "5.14.1",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz",
@@ -13296,15 +13198,6 @@
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
},
- "node_modules/css-vendor": {
- "version": "2.0.8",
- "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
- "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
- "dependencies": {
- "@babel/runtime": "^7.8.3",
- "is-in-browser": "^1.0.2"
- }
- },
"node_modules/css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -19031,11 +18924,6 @@
"node": ">=8.12.0"
}
},
- "node_modules/hyphenate-style-name": {
- "version": "1.0.4",
- "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
- "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
- },
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -19878,11 +19766,6 @@
"url": "https://github.com/sponsors/wooorm"
}
},
- "node_modules/is-in-browser": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
- "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
- },
"node_modules/is-installed-globally": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -23469,93 +23352,6 @@
"extsprintf": "^1.2.0"
}
},
- "node_modules/jss": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
- "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "csstype": "^3.0.2",
- "is-in-browser": "^1.1.3",
- "tiny-warning": "^1.0.2"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/jss"
- }
- },
- "node_modules/jss-plugin-camel-case": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
- "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "hyphenate-style-name": "^1.0.3",
- "jss": "10.10.0"
- }
- },
- "node_modules/jss-plugin-default-unit": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
- "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0"
- }
- },
- "node_modules/jss-plugin-global": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
- "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0"
- }
- },
- "node_modules/jss-plugin-nested": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
- "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0",
- "tiny-warning": "^1.0.2"
- }
- },
- "node_modules/jss-plugin-props-sort": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
- "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0"
- }
- },
- "node_modules/jss-plugin-rule-value-function": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
- "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0",
- "tiny-warning": "^1.0.2"
- }
- },
- "node_modules/jss-plugin-vendor-prefixer": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
- "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
- "dependencies": {
- "@babel/runtime": "^7.3.1",
- "css-vendor": "^2.0.8",
- "jss": "10.10.0"
- }
- },
- "node_modules/jss/node_modules/csstype": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
- "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
- },
"node_modules/jsx-ast-utils": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -36062,11 +35858,6 @@
"integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
"dev": true
},
- "node_modules/tiny-warning": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
- "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
- },
"node_modules/title-case": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz",
@@ -42823,28 +42614,6 @@
"@babel/runtime": "^7.22.6"
}
},
- "@mui/lab": {
- "version": "5.0.0-alpha.137",
- "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.137.tgz",
- "integrity": "sha512-bHfcfti9/GnB657QpTdlK1fc9gjkP3SC+NrXyb9NCr0rT5Cq7TEkBGXyY5wGUSCyHR3CrMvchkIsfG5sH/NJ9A==",
- "requires": {
- "@babel/runtime": "^7.22.6",
- "@mui/base": "5.0.0-beta.8",
- "@mui/system": "^5.14.1",
- "@mui/types": "^7.2.4",
- "@mui/utils": "^5.14.1",
- "clsx": "^1.2.1",
- "prop-types": "^15.8.1",
- "react-is": "^18.2.0"
- },
- "dependencies": {
- "react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
- }
- }
- },
"@mui/material": {
"version": "5.14.1",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.1.tgz",
@@ -42904,42 +42673,6 @@
}
}
},
- "@mui/styles": {
- "version": "5.14.1",
- "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.14.1.tgz",
- "integrity": "sha512-+oF3diiAbfnD5TFVyiwSe2rl+aNInBKpkam88oF2XrLtC3Ult9BNatn4tzH55U+s/KWL2zjEItdciaRIg0fAAg==",
- "requires": {
- "@babel/runtime": "^7.22.6",
- "@emotion/hash": "^0.9.1",
- "@mui/private-theming": "^5.13.7",
- "@mui/types": "^7.2.4",
- "@mui/utils": "^5.14.1",
- "clsx": "^1.2.1",
- "csstype": "^3.1.2",
- "hoist-non-react-statics": "^3.3.2",
- "jss": "^10.10.0",
- "jss-plugin-camel-case": "^10.10.0",
- "jss-plugin-default-unit": "^10.10.0",
- "jss-plugin-global": "^10.10.0",
- "jss-plugin-nested": "^10.10.0",
- "jss-plugin-props-sort": "^10.10.0",
- "jss-plugin-rule-value-function": "^10.10.0",
- "jss-plugin-vendor-prefixer": "^10.10.0",
- "prop-types": "^15.8.1"
- },
- "dependencies": {
- "@emotion/hash": {
- "version": "0.9.1",
- "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
- "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
- },
- "csstype": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
- "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
- }
- }
- },
"@mui/system": {
"version": "5.14.1",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz",
@@ -49739,15 +49472,6 @@
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
},
- "css-vendor": {
- "version": "2.0.8",
- "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
- "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
- "requires": {
- "@babel/runtime": "^7.8.3",
- "is-in-browser": "^1.0.2"
- }
- },
"css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -54215,11 +53939,6 @@
"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
"dev": true
},
- "hyphenate-style-name": {
- "version": "1.0.4",
- "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
- "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
- },
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -54834,11 +54553,6 @@
"integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
"dev": true
},
- "is-in-browser": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
- "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
- },
"is-installed-globally": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -57550,91 +57264,6 @@
}
}
},
- "jss": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
- "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
- "requires": {
- "@babel/runtime": "^7.3.1",
- "csstype": "^3.0.2",
- "is-in-browser": "^1.1.3",
- "tiny-warning": "^1.0.2"
- },
- "dependencies": {
- "csstype": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
- "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
- }
- }
- },
- "jss-plugin-camel-case": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
- "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
- "requires": {
- "@babel/runtime": "^7.3.1",
- "hyphenate-style-name": "^1.0.3",
- "jss": "10.10.0"
- }
- },
- "jss-plugin-default-unit": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
- "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
- "requires": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0"
- }
- },
- "jss-plugin-global": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
- "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
- "requires": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0"
- }
- },
- "jss-plugin-nested": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
- "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
- "requires": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0",
- "tiny-warning": "^1.0.2"
- }
- },
- "jss-plugin-props-sort": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
- "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
- "requires": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0"
- }
- },
- "jss-plugin-rule-value-function": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
- "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
- "requires": {
- "@babel/runtime": "^7.3.1",
- "jss": "10.10.0",
- "tiny-warning": "^1.0.2"
- }
- },
- "jss-plugin-vendor-prefixer": {
- "version": "10.10.0",
- "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
- "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
- "requires": {
- "@babel/runtime": "^7.3.1",
- "css-vendor": "^2.0.8",
- "jss": "10.10.0"
- }
- },
"jsx-ast-utils": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -67311,11 +66940,6 @@
"integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
"dev": true
},
- "tiny-warning": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
- "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
- },
"title-case": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz",
diff --git a/package.json b/package.json
index b9c41090..25881af8 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,7 @@
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
- "@mui/lab": "^5.0.0-alpha.137",
"@mui/material": "^5.14.1",
- "@mui/styles": "^5.14.1",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.0",
diff --git a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
index 9135eb4a..3d005259 100644
--- a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
+++ b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
@@ -1,18 +1,24 @@
import React, { useState, useRef, useEffect } from "react";
+import { styled } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
-import { makeStyles } from "@mui/styles";
import { Button, Typography, Grid, Tooltip } from "@mui/material";
-import { theme } from "../../../style/Theme";
import { useUndeployInDb } from "../../../api/SwaggerApi";
import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
import { ConfirmationDialog } from "../../dialog/ConfirmationDialog";
import { SimpleModal } from "../../common/SimpleModal/SimpleModal";
-import { Alert } from "@mui/lab";
+import Alert from "@mui/material/Alert";
import AccessControl from "../../auth/AccessControl";
import { IocActiveDeployment } from "../../../api/DataTypes";
-const useStyles = makeStyles({
- undeployButton: {
+const PREFIX = "AdministerUndeployment";
+
+const classes = {
+ undeployButton: `${PREFIX}-undeployButton`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")({
+ [`& .${classes.undeployButton}`]: {
backgroundColor: "#aa2e25",
color: "#FFFFFF",
"&:disabled": {
@@ -27,8 +33,6 @@ const useStyles = makeStyles({
});
export default function AdministerUndeployment({ ioc, buttonDisabled }) {
- const classes = useStyles(theme);
-
const navigate = useNavigate();
function onError(message) {
@@ -48,7 +52,7 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
const openUndeployModal = () => {
setAdHocDiatlogTitle("Administratively 'undeploy' IOC");
setAdHocDialogDescription(
- <>
+ <Root>
<Typography style={{ display: "inline-block" }}>
Are you sure want to administer IOC as undeployed
</Typography>
@@ -58,7 +62,7 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
{" "}
{ioc.namingName}?{" "}
</Typography>
- </>
+ </Root>
);
callbackRef.current = undeployIoc;
setAdHocDialogOpen(true);
@@ -91,7 +95,7 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
}
return (
- <>
+ <Root>
<AccessControl
allowedRoles={["DeploymentToolAdmin"]}
renderNoAccess={() => <></>}
@@ -152,6 +156,6 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
</SimpleAccordion>
</>
</AccessControl>
- </>
+ </Root>
);
}
diff --git a/src/components/IOC/AlertMessages/AlertMessages.js b/src/components/IOC/AlertMessages/AlertMessages.js
index e749f95b..9496d633 100644
--- a/src/components/IOC/AlertMessages/AlertMessages.js
+++ b/src/components/IOC/AlertMessages/AlertMessages.js
@@ -1,18 +1,21 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { Button, Grid } from "@mui/material";
-import { Alert } from "@mui/lab";
-import { theme } from "../../../style/Theme";
-import { makeStyles } from "@mui/styles";
+import Alert from "@mui/material/Alert";
-const useStyles = makeStyles((theme) => ({
- infoBadge: {
+const PREFIX = "AlertMessages";
+
+const classes = {
+ infoBadge: `${PREFIX}-infoBadge`
+};
+
+const StyledGrid = styled(Grid)(({ theme }) => ({
+ [`& .${classes.infoBadge}`]: {
backgroundColor: theme.infoBadge.bgColor
}
}));
export default function AlertMessages({ alerts }) {
- const classes = useStyles(theme);
-
function determineSeverity(alarmType) {
return ["error", "warning", "success"].includes(alarmType?.toLowerCase())
? alarmType?.toLowerCase()
@@ -26,7 +29,7 @@ export default function AlertMessages({ alerts }) {
}
return (
- <Grid
+ <StyledGrid
id="ioc-alerts"
container
spacing={1}
@@ -57,6 +60,6 @@ export default function AlertMessages({ alerts }) {
</Alert>
</Grid>
))}
- </Grid>
+ </StyledGrid>
);
}
diff --git a/src/components/IOC/IOCCreateDialog/IOCCreateDialog.js b/src/components/IOC/IOCCreateDialog/IOCCreateDialog.js
index 31247fd8..f5e0d994 100644
--- a/src/components/IOC/IOCCreateDialog/IOCCreateDialog.js
+++ b/src/components/IOC/IOCCreateDialog/IOCCreateDialog.js
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react";
+import { styled } from "@mui/material/styles";
import {
Button,
TextField,
@@ -10,12 +11,17 @@ import {
Autocomplete,
Alert
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { useNamingNames, useAllowedGitProjects } from "../../../api/SwaggerApi";
import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
-const useStyles = makeStyles((theme) => ({
- textField: {
+const PREFIX = "IOCCreateDialog";
+
+const classes = {
+ textField: `${PREFIX}-textField`
+};
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+ [`& .${classes.textField}`]: {
marginBottom: theme.spacing(1)
}
}));
@@ -27,7 +33,6 @@ export function IOCCreateDialog({
error,
resetError
}) {
- const classes = useStyles();
const [names, getNames, , loadingNames] = useNamingNames();
const [name, setName] = useState();
const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
@@ -59,7 +64,7 @@ export function IOCCreateDialog({
};
return (
- <Dialog
+ <StyledDialog
open={open}
onClose={handleClose}
fullWidth
@@ -189,6 +194,6 @@ export function IOCCreateDialog({
</Button>
</DialogActions>
</form>
- </Dialog>
+ </StyledDialog>
);
}
diff --git a/src/components/IOC/IOCDelete/IOCDelete.js b/src/components/IOC/IOCDelete/IOCDelete.js
index 94157044..ec15dd0c 100644
--- a/src/components/IOC/IOCDelete/IOCDelete.js
+++ b/src/components/IOC/IOCDelete/IOCDelete.js
@@ -1,17 +1,23 @@
import React, { useState, useRef, useEffect } from "react";
+import { styled } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
-import { makeStyles } from "@mui/styles";
import { Button, Typography, Grid, Tooltip } from "@mui/material";
-import { theme } from "../../../style/Theme";
import { useDeleteIOC } from "../../../api/SwaggerApi";
import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
import { ConfirmationDialog } from "../../dialog/ConfirmationDialog";
import { SimpleModal } from "../../common/SimpleModal/SimpleModal";
-import { Alert } from "@mui/lab";
+import Alert from "@mui/material/Alert";
import AccessControl from "../../auth/AccessControl";
-const useStyles = makeStyles({
- deleteButton: {
+const PREFIX = "IOCDelete";
+
+const classes = {
+ deleteButton: `${PREFIX}-deleteButton`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")({
+ [`& .${classes.deleteButton}`]: {
backgroundColor: "#aa2e25",
color: "#FFFFFF",
"&:disabled": {
@@ -26,8 +32,6 @@ const useStyles = makeStyles({
});
export default function IOCDelete({ ioc, buttonDisabled }) {
- const classes = useStyles(theme);
-
const navigate = useNavigate();
function onError(message) {
@@ -47,7 +51,7 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
const openDeleteModal = () => {
setAdHocDiatlogTitle("Deleting IOC");
setAdHocDialogDescription(
- <>
+ <Root>
<Typography style={{ display: "inline-block" }}>
Are you sure want to delete
</Typography>
@@ -57,7 +61,7 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
{" "}
{ioc.namingName}?{" "}
</Typography>
- </>
+ </Root>
);
callbackRef.current = deleteIoc;
setAdHocDialogOpen(true);
@@ -85,7 +89,7 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
"Only mainainer of the IOC can delete the IOC";
return (
- <>
+ <Root>
<SimpleModal
open={adHocDialogOpen}
setOpen={setAdHocDialogOpen}
@@ -158,6 +162,6 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
</Grid>
</Grid>
</SimpleAccordion>
- </>
+ </Root>
);
}
diff --git a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
index b8f554b0..0a2f0dd1 100644
--- a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
+++ b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react";
+import { styled } from "@mui/material/styles";
import {
Button,
TextField,
@@ -12,16 +13,23 @@ import {
Autocomplete,
Alert
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { useCSEntrySearch, useTagsAndCommitIds } from "../../../api/SwaggerApi";
import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
import { formatDate, transformHostQuery } from "../../common/Helper";
-const useStyles = makeStyles((theme) => ({
- textField: {
+const PREFIX = "IOCDeployDialog";
+
+const classes = {
+ textField: `${PREFIX}-textField`,
+ alert: `${PREFIX}-alert`
+};
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+ [`& .${classes.textField}`]: {
marginBottom: theme.spacing(1)
},
- alert: {
+
+ [`& .${classes.alert}`]: {
marginTop: theme.spacing(1)
}
}));
@@ -39,7 +47,6 @@ export function IOCDeployDialog({
console.error(message);
}
- const classes = useStyles();
const [hosts, getHosts, , loadingHosts] = useCSEntrySearch();
const [host, setHost] = useState(init);
const [query, onHostKeyUp] = useTypingTimer({ interval: 500 });
@@ -114,7 +121,7 @@ export function IOCDeployDialog({
}
return (
- <Dialog
+ <StyledDialog
open={open}
onClose={handleClose}
>
@@ -297,6 +304,6 @@ export function IOCDeployDialog({
</Button>
</DialogActions>
</form>
- </Dialog>
+ </StyledDialog>
);
}
diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
index 6637235c..c149f97e 100644
--- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
+++ b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
+import { styled } from "@mui/material/styles";
import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
import {
Button,
@@ -9,7 +10,6 @@ import {
Autocomplete,
Alert
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
import {
useAllowedGitProjects,
useNamingNames,
@@ -21,8 +21,15 @@ import { ConfirmationDialog } from "../../dialog/ConfirmationDialog";
import { SimpleModal } from "../../common/SimpleModal/SimpleModal";
import AccessControl from "../../auth/AccessControl";
-const useStyles = makeStyles((theme) => ({
- textField: {
+const PREFIX = "IOCDetailAdmin";
+
+const classes = {
+ textField: `${PREFIX}-textField`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(({ theme }) => ({
+ [`& .${classes.textField}`]: {
marginBottom: theme.spacing(1)
}
}));
@@ -33,8 +40,6 @@ export default function IOCDetailAdmin({
resetTab,
buttonDisabled
}) {
- const classes = useStyles();
-
const [gitId, setGitId] = useState(ioc.gitProjectId);
const [
allowedGitProjects,
@@ -100,7 +105,7 @@ export default function IOCDetailAdmin({
const openModifyModal = () => {
setAdHocDiatlogTitle("Modifying IOC");
setAdHocDialogDescription(
- <>
+ <Root>
<Typography style={{ display: "inline-block" }}>
Are you sure want to modify
</Typography>
@@ -110,7 +115,7 @@ export default function IOCDetailAdmin({
{" "}
{ioc.namingName}?{" "}
</Typography>
- </>
+ </Root>
);
callbackRef.current = modifyIoc;
setAdHocDialogOpen(true);
@@ -145,51 +150,49 @@ export default function IOCDetailAdmin({
const loading = loadingNames && !isDisabled;
return (
<Tooltip title={nameDisabledTitle}>
- <span>
- <Autocomplete
- className={classes.textField}
- autoHighlight
- id="namingName"
- options={names}
- loading={loading}
- clearOnBlur={false}
- defaultValue={name}
- getOptionLabel={(option) => {
- return option?.name;
- }}
- renderInput={(params) => (
- <TextField
- {...params}
- label="IOC name"
- variant="outlined"
- required
- InputProps={{
- ...params.InputProps,
- endAdornment: (
- <React.Fragment>
- {loading ? (
- <CircularProgress
- color="inherit"
- size={20}
- />
- ) : null}
- {params.InputProps.endAdornment}
- </React.Fragment>
- )
- }}
- />
- )}
- onChange={(event, value, reason) => {
- setName(value);
- setError(null);
- }}
- onInputChange={(event, value, reason) => {
- event && onNameKeyUp(event.nativeEvent);
- }}
- disabled={isDisabled}
- autoSelect
- />
- </span>
+ <Autocomplete
+ className={classes.textField}
+ autoHighlight
+ id="namingName"
+ options={names}
+ loading={loading}
+ clearOnBlur={false}
+ defaultValue={name}
+ getOptionLabel={(option) => {
+ return option?.name;
+ }}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ label="IOC name"
+ variant="outlined"
+ required
+ InputProps={{
+ ...params.InputProps,
+ endAdornment: (
+ <React.Fragment>
+ {loading ? (
+ <CircularProgress
+ color="inherit"
+ size={20}
+ />
+ ) : null}
+ {params.InputProps.endAdornment}
+ </React.Fragment>
+ )
+ }}
+ />
+ )}
+ onChange={(event, value, reason) => {
+ setName(value);
+ setError(null);
+ }}
+ onInputChange={(event, value, reason) => {
+ event && onNameKeyUp(event.nativeEvent);
+ }}
+ disabled={isDisabled}
+ autoSelect
+ />
</Tooltip>
);
}
@@ -319,7 +322,12 @@ export default function IOCDetailAdmin({
>
<form
onSubmit={onSubmit}
- style={{ width: "100%" }}
+ style={{
+ width: "100%",
+ display: "flex",
+ flexDirection: "column",
+ gap: "0.5rem"
+ }}
>
<AccessControl
allowedRoles={["DeploymentToolAdmin"]}
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index d193b646..a4e0f35f 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -22,7 +22,7 @@ function AlertMessagesPopoverContents({ title, alerts }) {
}));
return (
- <div>
+ <div style={{ maxWidth: "75vw" }}>
<Typography
style={{
fontWeight: alertsWithoutLinks.length > 0 ? "bold" : "normal"
diff --git a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
index 46baa9fc..6733a0fe 100644
--- a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
+++ b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
@@ -1,6 +1,6 @@
import React, { useCallback } from "react";
+import { styled } from "@mui/material/styles";
import { Typography, Link as MuiLink } from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
import { IOCDetails } from "../IOCDetails";
import { Link as ReactRouterLink } from "react-router-dom";
@@ -10,18 +10,23 @@ import GitRefLink from "../GitRefLink";
import AlertMessages from "../AlertMessages";
import AccessControl from "../../auth/AccessControl";
import { IocActiveDeployment } from "../../../api/DataTypes";
-import { theme } from "../../../style/Theme";
import useUrlState from "@ahooksjs/use-url-state";
import { serialize, deserialize } from "../../common/URLState/URLState";
-const useStyles = makeStyles((theme) => ({
- iocNotDeployed: {
+const PREFIX = "IOCLiveStatus";
+
+const classes = {
+ iocNotDeployed: `${PREFIX}-iocNotDeployed`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(({ theme }) => ({
+ [`& .${classes.iocNotDeployed}`]: {
color: theme.iocNotDeployed.color
}
}));
export function IOCLiveStatus({ ioc }) {
- const classes = useStyles(theme);
const [state, setState] = useUrlState(
{
procserv_log_open: "true",
@@ -33,62 +38,59 @@ export function IOCLiveStatus({ ioc }) {
const liveIOC = { ...ioc };
liveIOC.name = ioc.namingName;
- const getSubset = useCallback(
- (ioc) => {
- const iocHasDeployment = new IocActiveDeployment(
- ioc.activeDeployment
- ).hasDeployment();
+ const getSubset = useCallback((ioc) => {
+ const iocHasDeployment = new IocActiveDeployment(
+ ioc.activeDeployment
+ ).hasDeployment();
- // if IOC is not deployed some fields has to show '---' value
- const grayOutNoText = {
- shownValue: "---",
- shownClass: classes.iocNotDeployed
- };
+ // if IOC is not deployed some fields has to show '---' value
+ const grayOutNoText = {
+ shownValue: "---",
+ shownClass: classes.iocNotDeployed
+ };
- let subset = {
- Description: ioc.description,
- Revision: iocHasDeployment ? (
- <GitRefLink
- url={ioc.activeDeployment?.sourceUrl}
- revision={ioc.activeDeployment?.sourceVersion}
- />
+ let subset = {
+ Description: ioc.description,
+ Revision: iocHasDeployment ? (
+ <GitRefLink
+ url={ioc.activeDeployment?.sourceUrl}
+ revision={ioc.activeDeployment?.sourceVersion}
+ />
+ ) : (
+ grayOutNoText
+ ),
+ "Deployment comment": grayOutNoText,
+ "Deployed on":
+ iocHasDeployment && ioc.activeDeployment?.host.csEntryIdValid ? (
+ <Typography>
+ {ioc.activeDeployment?.host.csEntryId ? (
+ <MuiLink
+ component={ReactRouterLink}
+ to={`/hosts/${ioc.activeDeployment?.host.csEntryId}`}
+ underline="hover"
+ >
+ {ioc.activeDeployment?.host.fqdn}
+ </MuiLink>
+ ) : (
+ <Root>{ioc.activeDeployment?.host.fqdn}</Root>
+ )}
+ </Typography>
) : (
grayOutNoText
),
- "Deployment comment": grayOutNoText,
- "Deployed on":
- iocHasDeployment && ioc.activeDeployment?.host.csEntryIdValid ? (
- <Typography>
- {ioc.activeDeployment?.host.csEntryId ? (
- <MuiLink
- component={ReactRouterLink}
- to={`/hosts/${ioc.activeDeployment?.host.csEntryId}`}
- underline="hover"
- >
- {ioc.activeDeployment?.host.fqdn}
- </MuiLink>
- ) : (
- <>{ioc.activeDeployment?.host.fqdn}</>
- )}
- </Typography>
- ) : (
- grayOutNoText
- ),
- Maintainer: ioc.owner
- };
+ Maintainer: ioc.owner
+ };
- // show comment only for deployments and where comment field is filled
- if (ioc.activeDeployment && !ioc.activeDeployment.isUndeployment) {
- subset["Deployment comment"] =
- ioc.activeDeployment?.comment?.length > 0
- ? ioc.activeDeployment?.comment
- : grayOutNoText;
- }
+ // show comment only for deployments and where comment field is filled
+ if (ioc.activeDeployment && !ioc.activeDeployment.isUndeployment) {
+ subset["Deployment comment"] =
+ ioc.activeDeployment?.comment?.length > 0
+ ? ioc.activeDeployment?.comment
+ : grayOutNoText;
+ }
- return subset;
- },
- [classes.iocNotDeployed]
- );
+ return subset;
+ }, []);
function isIocDeployed(ioc) {
return Boolean(ioc.activeDeployment);
diff --git a/src/components/IOC/IOCService/IOCService.js b/src/components/IOC/IOCService/IOCService.js
index 6f909119..a37a4cdc 100644
--- a/src/components/IOC/IOCService/IOCService.js
+++ b/src/components/IOC/IOCService/IOCService.js
@@ -5,21 +5,28 @@ import {
Typography,
Tooltip
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
+import { styled } from "@mui/material/styles";
import React, { useState, useEffect, useRef, useContext } from "react";
import { useStartIOC, useStopIOC } from "../../../api/SwaggerApi";
import { SimpleModal } from "../../common/SimpleModal/SimpleModal";
import { ConfirmationDialog } from "../../dialog/ConfirmationDialog";
import { notificationContext } from "../../common/notification/Notifications";
-import { Alert } from "@mui/lab";
-import { theme } from "../../../style/Theme";
+import Alert from "@mui/material/Alert";
import { initRequestParams } from "../../common/Helper";
import AccessControl from "../../auth/AccessControl";
import { essColors } from "../../../style/Palette";
import { useNavigate } from "react-router-dom";
-const useStyles = makeStyles({
- startButton: {
+const PREFIX = "IOCService";
+
+const classes = {
+ startButton: `${PREFIX}-startButton`,
+ stopButton: `${PREFIX}-stopButton`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")({
+ [`& .${classes.startButton}`]: {
backgroundColor: essColors.grass,
color: "#FFFFFF",
"&:disabled": {
@@ -31,7 +38,7 @@ const useStyles = makeStyles({
color: "#FFFFFF"
}
},
- stopButton: {
+ [`& .${classes.stopButton}`]: {
backgroundColor: essColors.navy,
color: "#FFFFFF",
"&:disabled": {
@@ -53,7 +60,6 @@ export function IOCService({
setButtonDisabled,
jobLazyParams
}) {
- const classes = useStyles(theme);
const [error, setError] = useState();
const navigate = useNavigate();
@@ -118,7 +124,7 @@ export function IOCService({
const openStartModal = () => {
setAdHocDiatlogTitle("Starting IOC");
setAdHocDialogDescription(
- <>
+ <Root>
<Typography style={{ display: "inline-block" }}>
Are you sure want to start
</Typography>
@@ -128,7 +134,7 @@ export function IOCService({
{" "}
{ioc.namingName}?{" "}
</Typography>
- </>
+ </Root>
);
callbackRef.current = start;
setAdHocDialogOpen(true);
@@ -137,7 +143,7 @@ export function IOCService({
const openStopModal = () => {
setAdHocDiatlogTitle("Stopping IOC");
setAdHocDialogDescription(
- <>
+ <Root>
<Typography style={{ display: "inline-block" }}>
Are you sure want to stop
</Typography>
@@ -147,7 +153,7 @@ export function IOCService({
{" "}
{ioc.namingName}?{" "}
</Typography>
- </>
+ </Root>
);
callbackRef.current = stop;
setAdHocDialogOpen(true);
@@ -166,7 +172,7 @@ export function IOCService({
}
return (
- <>
+ <Root>
<AccessControl
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => "You are not authorized to control this IOC"}
@@ -235,6 +241,6 @@ export function IOCService({
</Grid>
</Grid>
</AccessControl>
- </>
+ </Root>
);
}
diff --git a/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js b/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js
index 16b638de..5cbde483 100644
--- a/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js
+++ b/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js
@@ -1,4 +1,5 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import {
Button,
TextField,
@@ -8,11 +9,16 @@ import {
DialogTitle,
DialogContentText
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
-import { Alert } from "@mui/lab";
+import Alert from "@mui/material/Alert";
-const useStyles = makeStyles((theme) => ({
- textField: {
+const PREFIX = "IOCUndeployDialog";
+
+const classes = {
+ textField: `${PREFIX}-textField`
+};
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+ [`& .${classes.textField}`]: {
marginBottom: theme.spacing(1)
}
}));
@@ -24,8 +30,6 @@ export function IOCUndeployDialog({
ioc,
error
}) {
- const classes = useStyles();
-
const handleClose = () => {
setOpen(false);
};
@@ -41,7 +45,7 @@ export function IOCUndeployDialog({
};
return (
- <Dialog
+ <StyledDialog
open={open}
onClose={handleClose}
>
@@ -87,6 +91,6 @@ export function IOCUndeployDialog({
</Button>
</DialogActions>
</form>
- </Dialog>
+ </StyledDialog>
);
}
diff --git a/src/components/Job/JobDetails.js b/src/components/Job/JobDetails.js
index 67cb21b0..b5e2c70d 100644
--- a/src/components/Job/JobDetails.js
+++ b/src/components/Job/JobDetails.js
@@ -1,4 +1,5 @@
import React, { useEffect, useState, useMemo } from "react";
+import { styled } from "@mui/material/styles";
import {
Grid,
Typography,
@@ -7,7 +8,6 @@ import {
Container,
Link as MuiLink
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { DeploymentStepper } from "../deployments/DeploymentStepper";
import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
@@ -17,12 +17,17 @@ import { Link as ReactRouterLink } from "react-router-dom";
import { formatDate } from "../common/Helper";
import GitRefLink from "../IOC/GitRefLink";
import AccessControl from "../auth/AccessControl";
-import { theme } from "../../style/Theme";
import { AWXJobDetails } from "../../api/DataTypes";
import AlertMessages from "../IOC/AlertMessages";
-const useStyles = makeStyles((theme) => ({
- csentryIdInvalid: {
+const PREFIX = "JobDetails";
+
+const classes = {
+ csentryIdInvalid: `${PREFIX}-csentryIdInvalid`
+};
+
+const StyledGrid = styled(Grid)(({ theme }) => ({
+ [`& .${classes.csentryIdInvalid}`]: {
color: theme.csentryIdInvalid.color
}
}));
@@ -38,8 +43,6 @@ function createAlert(operation, job) {
}
export function JobDetails({ operation, job }) {
- const classes = useStyles(theme);
-
let jobAlert = useMemo(() => operation.alerts ?? [], [operation]);
const finishedJob = useMemo(
@@ -124,7 +127,7 @@ export function JobDetails({ operation, job }) {
};
return (
- <Grid
+ <StyledGrid
container
spacing={1}
>
@@ -204,6 +207,6 @@ export function JobDetails({ operation, job }) {
)}
</Grid>
</AccessControl>
- </Grid>
+ </StyledGrid>
);
}
diff --git a/src/components/auth/AccessDenied/AccessDenied.js b/src/components/auth/AccessDenied/AccessDenied.js
index 57306057..2c317aa3 100644
--- a/src/components/auth/AccessDenied/AccessDenied.js
+++ b/src/components/auth/AccessDenied/AccessDenied.js
@@ -1,18 +1,23 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { Paper, Typography, Box, Button } from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { RootContainer } from "../../common/Container/RootContainer";
import { useRedirect } from "../../../hooks/Redirect";
-const useStyles = makeStyles((theme) => ({
- paper: {
+const PREFIX = "AccessDenied";
+
+const classes = {
+ paper: `${PREFIX}-paper`
+};
+
+const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
+ [`& .${classes.paper}`]: {
maxWidth: "80%",
padding: theme.spacing(4)
}
}));
export default function AccessDenied() {
- const classes = useStyles();
const redirect = useRedirect();
const goHome = () => {
@@ -20,7 +25,7 @@ export default function AccessDenied() {
};
return (
- <RootContainer>
+ <StyledRootContainer>
<Paper className={classes.paper}>
<Box
display="flex"
@@ -54,6 +59,6 @@ export default function AccessDenied() {
</Button>
</Box>
</Paper>
- </RootContainer>
+ </StyledRootContainer>
);
}
diff --git a/src/components/auth/Login/Login.js b/src/components/auth/Login/Login.js
index d3f35d1a..08466f5c 100644
--- a/src/components/auth/Login/Login.js
+++ b/src/components/auth/Login/Login.js
@@ -1,4 +1,5 @@
import React, { useCallback, useEffect, useState } from "react";
+import { styled } from "@mui/material/styles";
import {
TextField,
Button,
@@ -7,18 +8,21 @@ import {
Box,
LinearProgress
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
-import { Alert } from "@mui/lab";
+import Alert from "@mui/material/Alert";
-const useStyles = makeStyles((theme) => ({
- textField: {
+const PREFIX = "Login";
+
+const classes = {
+ textField: `${PREFIX}-textField`
+};
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+ [`& .${classes.textField}`]: {
marginBottom: theme.spacing(1)
}
}));
export function LoginForm({ login, error, resetError, onSubmitCallback }) {
- const classes = useStyles();
-
const [loading, setLoading] = useState(false);
const onSubmit = useCallback(
@@ -87,7 +91,7 @@ export function LoginDialog({
onSubmitCallback
}) {
return (
- <Dialog
+ <StyledDialog
fullWidth
open={open}
onClose={handleClose}
@@ -103,6 +107,6 @@ export function LoginDialog({
/>
</Box>
</DialogContent>
- </Dialog>
+ </StyledDialog>
);
}
diff --git a/src/components/common/Console/ConsoleOutput.js b/src/components/common/Console/ConsoleOutput.js
index 48a09642..7f4a0724 100644
--- a/src/components/common/Console/ConsoleOutput.js
+++ b/src/components/common/Console/ConsoleOutput.js
@@ -1,10 +1,17 @@
import React, { useState, useRef, useEffect } from "react";
-import { makeStyles } from "@mui/styles";
+import { styled } from "@mui/material/styles";
import clsx from "clsx";
import { useWindowDimensions } from "../../common/Helper";
-const useStyles = makeStyles((theme) => ({
- consoleOutput: {
+const PREFIX = "ConsoleOutput";
+
+const classes = {
+ consoleOutput: `${PREFIX}-consoleOutput`,
+ dialogOutput: `${PREFIX}-dialogOutput`
+};
+
+const Root = styled("div")(({ theme }) => ({
+ [`& .${classes.consoleOutput}`]: {
backgroundColor: "black",
paddingLeft: theme.spacing(4),
paddingRight: theme.spacing(4),
@@ -15,7 +22,8 @@ const useStyles = makeStyles((theme) => ({
color: "white",
fontSize: "0.8rem"
},
- dialogOutput: {
+
+ [`& .${classes.dialogOutput}`]: {
backgroundColor: "black",
paddingLeft: theme.spacing(4),
paddingRight: theme.spacing(4),
@@ -26,7 +34,6 @@ const useStyles = makeStyles((theme) => ({
}));
export function ConsoleOutput({ html, dataReady, extraClass, shownInDialog }) {
- const classes = useStyles();
const stdoutRef = useRef(null);
const [firstTime, setFirstTime] = useState(true);
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
@@ -34,7 +41,7 @@ export function ConsoleOutput({ html, dataReady, extraClass, shownInDialog }) {
const [y, setY] = useState(0);
- var styleClass;
+ let styleClass;
useEffect(() => {
function scrollDown() {
@@ -70,13 +77,15 @@ export function ConsoleOutput({ html, dataReady, extraClass, shownInDialog }) {
}
return (
- <div
- onScroll={handleScroll}
- ref={stdoutRef}
- className={clsx(styleClass, extraClass)}
- style={{ maxHeight: shownInDialog ? height - 220 : 500 }}
- // eslint-disable-next-line react/no-danger
- dangerouslySetInnerHTML={{ __html: html }}
- />
+ <Root>
+ <div
+ onScroll={handleScroll}
+ ref={stdoutRef}
+ className={clsx(styleClass, extraClass)}
+ style={{ maxHeight: shownInDialog ? height - 220 : 500 }}
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{ __html: html }}
+ />
+ </Root>
);
}
diff --git a/src/components/common/Console/LogDialog.js b/src/components/common/Console/LogDialog.js
index 15e589cc..6c2bf9e1 100644
--- a/src/components/common/Console/LogDialog.js
+++ b/src/components/common/Console/LogDialog.js
@@ -1,23 +1,26 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { Dialog, DialogContent, DialogTitle } from "@mui/material";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "LogDialog";
-const useStyles = makeStyles(() => ({
- title: {
+const classes = {
+ title: `${PREFIX}-title`
+};
+
+const StyledDialog = styled(Dialog)(() => ({
+ [`& .${classes.title}`]: {
backgroundColor: "#0099dc",
color: "#FFFFFF"
}
}));
export function LogDialog({ open, setOpen, title, content }) {
- const classes = useStyles();
-
const handleClose = () => {
setOpen(false);
};
return (
- <Dialog
+ <StyledDialog
open={open}
onClose={handleClose}
fullWidth
@@ -30,6 +33,6 @@ export function LogDialog({ open, setOpen, title, content }) {
{title}
</DialogTitle>
<DialogContent>{content}</DialogContent>
- </Dialog>
+ </StyledDialog>
);
}
diff --git a/src/components/common/Loki/LokiPanel.js b/src/components/common/Loki/LokiPanel.js
index 21c15364..04500461 100644
--- a/src/components/common/Loki/LokiPanel.js
+++ b/src/components/common/Loki/LokiPanel.js
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from "react";
-import { makeStyles } from "@mui/styles";
+import { styled } from "@mui/material/styles";
import { useLokiSysLog, useLokiProcServLog } from "../../../api/SwaggerApi";
import {
Grid,
@@ -16,21 +16,33 @@ import { useSafePolling } from "../../../hooks/Polling";
import { useCustomSnackbar } from "../snackbar/Snackbar";
import { closeSnackbar } from "notistack";
-const useStyles = makeStyles((theme) => ({
- formControl: {
+const PREFIX = "LokiPanel";
+
+const classes = {
+ formControl: `${PREFIX}-formControl`,
+ selectEmpty: `${PREFIX}-selectEmpty`,
+ deployed: `${PREFIX}-deployed`,
+ undeployed: `${PREFIX}-undeployed`
+};
+
+const Root = styled("html")(({ theme }) => ({
+ [`& .${classes.formControl}`]: {
margin: theme.spacing(0),
minWidth: 120
},
- selectEmpty: {
+
+ [`& .${classes.selectEmpty}`]: {
marginTop: theme.spacing(2)
},
- deployed: {
+
+ [`& .${classes.deployed}`]: {
backgroundColor: "black",
msUserSelect: "text",
MozUserSelect: "text",
WebkitUserSelect: "text"
},
- undeployed: {
+
+ [`& .${classes.undeployed}`]: {
backgroundColor: "gray",
msUserSelect: "none",
MozUserSelect: "none",
@@ -53,7 +65,6 @@ export function LokiPanel({ host, iocName, isSyslog, isDeployed }) {
showWarning(message, "warning");
}
- const classes = useStyles();
const hostName = host.csEntryHost.name;
const [logData, getLogData /* reset*/, , logDataLoading] =
useLokiSysLog(onError);
@@ -136,43 +147,45 @@ export function LokiPanel({ host, iocName, isSyslog, isDeployed }) {
);
return (
- <Container maxWidth="xl">
- {logData || procServLog || !isDeployed ? (
- <Grid
- container
- spacing={1}
- justifyContent="flex-start"
- >
+ <Root>
+ <Container maxWidth="xl">
+ {logData || procServLog || !isDeployed ? (
<Grid
- item
- xs={12}
- md={12}
+ container
+ spacing={1}
+ justifyContent="flex-start"
>
- <Console
- html={logsToPreprocess(
- isSyslog,
- logData,
- procServLog,
- isDeployed,
- showWarning,
- timeRangeText,
- alertIds,
- setAlertIds
- )}
- dataReady={dataReady}
- extraClass={isDeployed ? classes.deployed : classes.undeployed}
- title={isSyslog ? "Syslog" : "ProcServ log"}
- dialogHeader={header}
- loading={periodChange}
- />
+ <Grid
+ item
+ xs={12}
+ md={12}
+ >
+ <Console
+ html={logsToPreprocess(
+ isSyslog,
+ logData,
+ procServLog,
+ isDeployed,
+ showWarning,
+ timeRangeText,
+ alertIds,
+ setAlertIds
+ )}
+ dataReady={dataReady}
+ extraClass={isDeployed ? classes.deployed : classes.undeployed}
+ title={isSyslog ? "Syslog" : "ProcServ log"}
+ dialogHeader={header}
+ loading={periodChange}
+ />
+ </Grid>
</Grid>
- </Grid>
- ) : (
- <div style={{ width: "100%" }}>
- <LinearProgress color="primary" />
- </div>
- )}
- </Container>
+ ) : (
+ <div style={{ width: "100%" }}>
+ <LinearProgress color="primary" />
+ </div>
+ )}
+ </Container>
+ </Root>
);
}
diff --git a/src/components/common/Popover/Popover.js b/src/components/common/Popover/Popover.js
index 8f498d62..5555f2a8 100644
--- a/src/components/common/Popover/Popover.js
+++ b/src/components/common/Popover/Popover.js
@@ -1,12 +1,12 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { Popover as MuiPopover } from "@mui/material";
-import { makeStyles } from "@mui/styles";
-const useStyles = makeStyles((theme) => ({
- popover: {
+const StyledMuiPopover = styled(MuiPopover)(({ theme }) => ({
+ "&": {
pointerEvents: "none"
},
- paper: {
+ "& .MuiPopover-paper": {
padding: theme.spacing(1)
}
}));
@@ -35,7 +35,6 @@ export const Popover = ({
id,
...popoverProps
}) => {
- const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handlePopoverOpen = (event) => {
@@ -58,28 +57,16 @@ export const Popover = ({
handlePopoverOpen,
handlePopoverClose
})}
- <MuiPopover
+ <StyledMuiPopover
id={elemId}
- className={classes.popover}
- classes={{
- paper: classes.paper
- }}
open={open}
anchorEl={anchorEl}
- anchorOrigin={{
- vertical: "bottom",
- horizontal: "left"
- }}
- transformOrigin={{
- vertical: "top",
- horizontal: "left"
- }}
onClose={handlePopoverClose}
disableRestoreFocus
{...popoverProps}
>
{popoverContents}
- </MuiPopover>
+ </StyledMuiPopover>
</>
);
};
diff --git a/src/components/common/SearchBoxFilter/SearchBoxFilter.js b/src/components/common/SearchBoxFilter/SearchBoxFilter.js
index 5ae724a1..cedc5e30 100644
--- a/src/components/common/SearchBoxFilter/SearchBoxFilter.js
+++ b/src/components/common/SearchBoxFilter/SearchBoxFilter.js
@@ -1,16 +1,21 @@
import React, { useState, useEffect } from "react";
+import { styled } from "@mui/material/styles";
import { Container, List, ListItem, Paper, TextField } from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { useTypingTimer } from "./TypingTimer";
-const useStyles = makeStyles((theme) => ({
- searchText: {
+const PREFIX = "SearchBoxFilter";
+
+const classes = {
+ searchText: `${PREFIX}-searchText`
+};
+
+const StyledSearchBoxFilter = styled(SearchBoxFilter)(({ theme }) => ({
+ [`& .${classes.searchText}`]: {
fontFamily: "Segoe UI"
}
}));
export function SearchBoxFilter({ items, filter, render }) {
- const classes = useStyles();
const [filteredItems, setFilteredItems] = useState(items);
const [search, searchKeyPress] = useTypingTimer();
@@ -23,17 +28,19 @@ export function SearchBoxFilter({ items, filter, render }) {
useEffect(filterItems, [items, search, filter]);
return (
- <Container>
- <TextField
- className={classes.searchText}
- fullWidth
- variant="outlined"
- label="Search"
- onKeyUp={searchKeyPress}
- />
- <div> </div>
- {render(filteredItems)}
- </Container>
+ <StyledSearchBoxFilter>
+ <Container>
+ <TextField
+ className={classes.searchText}
+ fullWidth
+ variant="outlined"
+ label="Search"
+ onKeyUp={searchKeyPress}
+ />
+ <div> </div>
+ {render(filteredItems)}
+ </Container>
+ </StyledSearchBoxFilter>
);
}
diff --git a/src/components/common/SimpleModal/SimpleModal.js b/src/components/common/SimpleModal/SimpleModal.js
index e696279b..87b475c8 100644
--- a/src/components/common/SimpleModal/SimpleModal.js
+++ b/src/components/common/SimpleModal/SimpleModal.js
@@ -1,9 +1,14 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { Dialog } from "@mui/material";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "SimpleModal";
-const useStyles = makeStyles((theme) => ({
- paper: {
+const classes = {
+ paper: `${PREFIX}-paper`
+};
+
+const Root = styled("div")(({ theme }) => ({
+ [`& .${classes.paper}`]: {
position: "absolute",
width: 400,
backgroundColor: theme.palette.background.paper,
@@ -25,7 +30,6 @@ function getModalStyle() {
}
export function SimpleModal({ open, setOpen, children }) {
- const classes = useStyles();
// getModalStyle is not a pure function, we roll the style only on the first render
const [modalStyle] = React.useState(getModalStyle);
@@ -34,7 +38,7 @@ export function SimpleModal({ open, setOpen, children }) {
};
return (
- <div>
+ <Root>
<Dialog
open={open}
onClose={handleClose}
@@ -48,6 +52,6 @@ export function SimpleModal({ open, setOpen, children }) {
{children}
</div>
</Dialog>
- </div>
+ </Root>
);
}
diff --git a/src/components/common/snackbar/Snackbar.js b/src/components/common/snackbar/Snackbar.js
index 8ba7481f..fc1ea1c5 100644
--- a/src/components/common/snackbar/Snackbar.js
+++ b/src/components/common/snackbar/Snackbar.js
@@ -1,10 +1,15 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { useSnackbar } from "notistack";
import { Button } from "@mui/material";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "Snackbar";
-const useStyles = makeStyles((theme) => ({
- text: {
+const classes = {
+ text: `${PREFIX}-text`
+};
+
+const StyledButton = styled(Button)(({ theme }) => ({
+ [`&.${classes.text}`]: {
color: "#f0f0f0",
borderColor: "#f0f0f0",
"&:hover": {
@@ -17,20 +22,19 @@ const useStyles = makeStyles((theme) => ({
export function useCustomSnackbar() {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
- const classes = useStyles();
function showError(errorMessage, severity = "error") {
console.error("Snackbar: " + errorMessage);
const action = (key) => (
- <Button
+ <StyledButton
variant="text"
- classes={classes}
+ className={classes.text}
onClick={() => {
closeSnackbar(key);
}}
>
Dismiss
- </Button>
+ </StyledButton>
);
enqueueSnackbar(errorMessage, {
variant: severity,
diff --git a/src/components/common/stepper/StepperWithStyle.js b/src/components/common/stepper/StepperWithStyle.js
index e416f3ba..d4267587 100644
--- a/src/components/common/stepper/StepperWithStyle.js
+++ b/src/components/common/stepper/StepperWithStyle.js
@@ -1,121 +1,113 @@
import React from "react";
-import { makeStyles, withStyles } from "@mui/styles";
-import clsx from "clsx";
+import { styled } from "@mui/material/styles";
import {
Stepper,
Step,
StepLabel,
StepConnector,
- useMediaQuery
+ useMediaQuery,
+ stepConnectorClasses
} from "@mui/material";
import { theme } from "../../../style/Theme";
-const useStyles = makeStyles({
- stepper: {
+const PREFIX = "StepperWithStyle";
+
+const classes = {
+ alternativeLabel: `${PREFIX}-alternativeLabel`,
+ active: `${PREFIX}-active`,
+ completed: `${PREFIX}-completed`,
+ line: `${PREFIX}-line`,
+ alternativeLabel2: `${PREFIX}-alternativeLabel2`,
+ active2: `${PREFIX}-active2`,
+ completed2: `${PREFIX}-completed2`,
+ line2: `${PREFIX}-line2`,
+ stepper: `${PREFIX}-stepper`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")({
+ [`& .${classes.stepper}`]: {
minWidth: 500,
width: "100%"
+ },
+ [`& .${stepConnectorClasses.alternativeLabel}`]: {
+ top: 22
+ },
+ [`& .${stepConnectorClasses.line}`]: {
+ borderWidth: 4,
+ [`&.${stepConnectorClasses.lineHorizontal}`]: {
+ // Pull in the left and right so that the dashed
+ // lines in disabled state don't interfere with
+ // dashed border of (disabled) step icon
+ marginLeft: 6,
+ marginRight: 6
+ },
+ [`&.${stepConnectorClasses.lineVertical}`]: {
+ marginLeft: 11
+ }
}
});
-const useColorlibStepIconStyles = makeStyles({
- root: {
- backgroundColor: "#ccc",
- zIndex: 1,
- color: "#fff",
- width: 50,
- height: 50,
- display: "flex",
- borderRadius: "50%",
- justifyContent: "center",
- alignItems: "center"
- },
- active: {
+const ColorlibStepIconRoot = styled("div")(({ active, completed, error }) => ({
+ backgroundColor: "#ccc",
+ zIndex: 1,
+ color: "#fff",
+ width: 50,
+ height: 50,
+ display: "flex",
+ borderRadius: "50%",
+ justifyContent: "center",
+ alignItems: "center",
+ ...(active && {
background: theme.palette.status.progress,
boxShadow: "0 4px 10px 0 rgba(0,0,0,.25)"
- },
- completed: {
+ }),
+ ...(completed && {
background: theme.palette.status.ok
- },
- error: {
+ }),
+ ...(error && {
background: theme.palette.status.fail
- }
-});
+ })
+}));
-const ColorlibConnectorHorizontal = withStyles({
- alternativeLabel: {
- top: 22
- },
- active: {
- "& .MuiStepConnector-line": {
- background: theme.palette.status.progress
- }
- },
- completed: {
- "& .MuiStepConnector-line": {
- background: theme.palette.status.ok
- }
- },
- line: {
- height: 3,
- border: 0,
- backgroundColor: "#eaeaf0",
- borderRadius: 1
- }
-})(StepConnector);
+const ColorlibConnectorHorizontal = StepConnector;
-const ColorlibConnectorVertical = withStyles({
- alternativeLabel: {
- top: 22
- },
- active: {
- "& .MuiStepConnector-line": {
- background: theme.palette.status.progress
- }
- },
- completed: {
- "& .MuiStepConnector-line": {
- background: theme.palette.status.ok
- }
- },
- line: {
- width: 4,
- border: 0,
- marginLeft: 11,
- backgroundColor: "#eaeaf0",
- borderRadius: 1
- }
-})(StepConnector);
+const ColorlibConnectorVertical = StepConnector;
export function StepperWithStyle({ steps, activeStep, isStepFailed, icons }) {
const smUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
const smDown = useMediaQuery((theme) => theme.breakpoints.down("sm"));
- const classes = useStyles(theme);
function ColorlibStepIcon(props) {
- const classes = useColorlibStepIconStyles();
- const { active, completed, error } = props;
+ const { active, completed, error, className } = props;
return (
- <div
- className={clsx(classes.root, {
- [classes.active]: active,
- [classes.completed]: completed,
- [classes.error]: error
- })}
+ <ColorlibStepIconRoot
+ {...{ active, completed, error }}
+ className={className}
>
{icons[String(props.icon)]}
- </div>
+ </ColorlibStepIconRoot>
);
}
return (
- <>
+ <Root>
{smDown ? (
<Stepper
className={classes.stepper}
activeStep={activeStep}
orientation="vertical"
- connector={<ColorlibConnectorVertical />}
+ connector={
+ <ColorlibConnectorVertical
+ classes={{
+ alternativeLabel: classes.alternativeLabel2,
+ active: classes.active2,
+ completed: classes.completed2,
+ line: classes.line2
+ }}
+ />
+ }
style={{ padding: 24 }}
>
{steps.map((label, index) => {
@@ -144,7 +136,16 @@ export function StepperWithStyle({ steps, activeStep, isStepFailed, icons }) {
className={classes.stepper}
alternativeLabel
activeStep={activeStep}
- connector={<ColorlibConnectorHorizontal />}
+ connector={
+ <ColorlibConnectorHorizontal
+ classes={{
+ alternativeLabel: classes.alternativeLabel,
+ active: classes.active,
+ completed: classes.completed,
+ line: classes.line
+ }}
+ />
+ }
>
{steps.map((label, index) => {
const labelProps = {};
@@ -170,6 +171,6 @@ export function StepperWithStyle({ steps, activeStep, isStepFailed, icons }) {
})}
</Stepper>
) : null}
- </>
+ </Root>
);
}
diff --git a/src/components/deployments/DeploymentDetails.js b/src/components/deployments/DeploymentDetails.js
index b4e86498..8b3d3b29 100644
--- a/src/components/deployments/DeploymentDetails.js
+++ b/src/components/deployments/DeploymentDetails.js
@@ -1,4 +1,5 @@
import React, { useEffect, useMemo, useState } from "react";
+import { styled } from "@mui/material/styles";
import {
Grid,
Typography,
@@ -7,7 +8,6 @@ import {
Container,
Link as MuiLink
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { DeploymentStepper } from "./DeploymentStepper";
import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
@@ -18,9 +18,20 @@ import { formatDate } from "../common/Helper";
import GitRefLink from "../IOC/GitRefLink";
import AccessControl from "../auth/AccessControl";
import { AWXJobDetails, DeploymentStatus } from "../../api/DataTypes";
-import { theme } from "../../style/Theme";
import AlertMessages from "../IOC/AlertMessages";
+const PREFIX = "DeploymentDetails";
+
+const classes = {
+ csentryIdInvalid: `${PREFIX}-csentryIdInvalid`
+};
+
+const StyledGrid = styled(Grid)(({ theme }) => ({
+ [`& .${classes.csentryIdInvalid}`]: {
+ color: theme.csentryIdInvalid.color
+ }
+}));
+
function createAlert(deployment, deploymentJob) {
const deploymentStatus = new DeploymentStatus(deployment, deploymentJob);
const message = deploymentStatus.message();
@@ -31,15 +42,7 @@ function createAlert(deployment, deploymentJob) {
};
}
-const useStyles = makeStyles((theme) => ({
- csentryIdInvalid: {
- color: theme.csentryIdInvalid.color
- }
-}));
-
export function DeploymentDetails({ deployment, deploymentJob }) {
- const classes = useStyles(theme);
-
let deplAlert = deployment.alerts;
const finishedJob = useMemo(
@@ -130,7 +133,7 @@ export function DeploymentDetails({ deployment, deploymentJob }) {
};
return (
- <Grid
+ <StyledGrid
container
spacing={1}
>
@@ -210,6 +213,6 @@ export function DeploymentDetails({ deployment, deploymentJob }) {
)}
</Grid>
</AccessControl>
- </Grid>
+ </StyledGrid>
);
}
diff --git a/src/components/dialog/ConfirmationDialog.js b/src/components/dialog/ConfirmationDialog.js
index 5b27216a..699d7e8a 100644
--- a/src/components/dialog/ConfirmationDialog.js
+++ b/src/components/dialog/ConfirmationDialog.js
@@ -1,4 +1,5 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import {
Button,
Dialog,
@@ -7,10 +8,15 @@ import {
DialogTitle,
DialogContentText
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "ConfirmationDialog";
-const useStyles = makeStyles((theme) => ({
- title: {
+const classes = {
+ title: `${PREFIX}-title`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(({ theme }) => ({
+ [`& .${classes.title}`]: {
backgroundColor: "#0099dc",
color: "#FFFFFF"
}
@@ -23,8 +29,6 @@ export function ConfirmationDialog({
description,
callback
}) {
- const classes = useStyles();
-
const handleClose = () => {
setOpen(false);
};
@@ -35,7 +39,7 @@ export function ConfirmationDialog({
};
return (
- <>
+ <Root>
<Dialog
open={open}
onClose={handleClose}
@@ -70,6 +74,6 @@ export function ConfirmationDialog({
</Button>
</DialogActions>
</Dialog>
- </>
+ </Root>
);
}
diff --git a/src/components/navigation/GlobalAppBar/GlobalAppBar.js b/src/components/navigation/GlobalAppBar/GlobalAppBar.js
index 95946b2f..1799fd83 100644
--- a/src/components/navigation/GlobalAppBar/GlobalAppBar.js
+++ b/src/components/navigation/GlobalAppBar/GlobalAppBar.js
@@ -27,9 +27,9 @@ import {
Box,
Divider,
useTheme,
- ListItemButton
+ ListItemButton,
+ styled
} from "@mui/material";
-import { makeStyles, withStyles } from "@mui/styles";
import {
LockOpen,
Home,
@@ -52,55 +52,62 @@ import { applicationSubTitle } from "../../common/Helper";
import { LoginDialog } from "../../auth/Login";
import { useRedirect } from "../../../hooks/Redirect";
-const useStyles = makeStyles((theme) => ({
- root: {
- flexGrow: 1,
- paddingBottom: theme.spacing(2)
- },
- appBar: {
- zIndex: 1250 // fixme: a hack to make the appBar stay on top of the drawer, should be between 1201 - 1299
- },
- menuButton: {
- marginRight: theme.spacing(2)
- },
- helpDivider: {
- marginTop: theme.spacing(5)
- },
- title: {
- flexGrow: 1
- },
- menuIcon: {
- marginLeft: theme.spacing(1)
- },
- typography: {
- padding: theme.spacing(2)
- },
- notificationButton: {
- marginRight: theme.spacing(2)
- },
- content: {
- marginTop: theme.spacing(1)
- },
- notificationList: {
- overflow: "auto",
- maxHeight: 360
- },
- shiftContentLeft: {
- marginLeft: theme.drawer.widthClose
- },
- shiftContentRight: {
- marginLeft: theme.drawer.widthOpen
- }
+const DivRoot = styled("div")(({ theme }) => ({
+ flexGrow: 1,
+ paddingBottom: theme.spacing(2)
+}));
+
+const StyledAppBar = styled(AppBar)(({ theme }) => ({
+ // fixme: a hack to make the appBar stay on top of the drawer, should be between 1201 - 1299
+ zIndex: 1250
+}));
+
+const IconButtonMenuButton = styled(IconButton)(({ theme }) => ({
+ marginRight: theme.spacing(2)
}));
-const StyledMenu = withStyles({
- paper: {
+const TypographyTitle = styled(Typography)(({ theme }) => ({
+ flexGrow: 1
+}));
+
+const DividerHelpDivider = styled(Divider)(({ theme }) => ({
+ marginTop: theme.spacing(5)
+}));
+
+const ListItemIconMenuIcon = styled(ListItemIcon)(({ theme }) => ({
+ marginLeft: theme.spacing(1)
+}));
+
+const ListNotificationList = styled(List)(({ theme }) => ({
+ overflow: "auto",
+ maxHeight: 360
+}));
+
+const IconButtonNotificationButton = styled(IconButton)(({ theme }) => ({
+ marginRight: theme.spacing(2)
+}));
+
+const DivContent = styled("div")(({ theme }) => ({
+ marginTop: theme.spacing(1)
+}));
+
+const ShiftContentLeft = styled("div")(({ theme }) => ({
+ marginLeft: theme.drawer.widthClose
+}));
+
+const ShiftContentRight = styled("div")(({ theme }) => ({
+ marginLeft: theme.drawer.widthOpen
+}));
+
+const InternalStyledMenu = styled(Menu)({
+ "& .MuiPaper-root": {
border: "1px solid #d3d4d5"
}
-})((props) => (
+});
+const StyledMenu = (props) => (
<>
<div style={{ ...props.theme.mixins.toolbar }} />
- <Menu
+ <InternalStyledMenu
elevation={0}
anchorOrigin={{
vertical: "bottom",
@@ -113,7 +120,7 @@ const StyledMenu = withStyles({
{...props}
/>
</>
-));
+);
function InfoMenuItem({ children }) {
return (
@@ -190,38 +197,31 @@ export function LoginControls() {
}
export function ButtonAppBar({ homeUrl, homeClick, title, button }) {
- const classes = useStyles();
-
return (
- <div className={classes.root}>
- <AppBar
- position="fixed"
- className={classes.appBar}
- >
+ <DivRoot>
+ <StyledAppBar position="fixed">
<Toolbar>
- <IconButton
+ <IconButtonMenuButton
edge="start"
component={Link}
to={homeUrl}
onClick={homeClick}
- className={classes.menuButton}
color="inherit"
aria-label="menu"
size="large"
>
<Home />
- </IconButton>
- <Typography
+ </IconButtonMenuButton>
+ <TypographyTitle
variant="h1"
- className={classes.title}
noWrap
>
{title}
- </Typography>
+ </TypographyTitle>
{button}
</Toolbar>
- </AppBar>
- </div>
+ </StyledAppBar>
+ </DivRoot>
);
}
@@ -237,15 +237,10 @@ export const GlobalAppBarContext = createContext({
});
function MenuListItem({ url, icon, text, tooltip }) {
- const classes = useStyles();
const currentUrl = `${window.location}`;
return (
<>
- {url.includes("help") ? (
- <Divider className={classes.helpDivider} />
- ) : (
- <></>
- )}
+ {url.includes("help") ? <DividerHelpDivider /> : <></>}
<Tooltip
title={tooltip ? text : ""}
placement="right"
@@ -256,7 +251,7 @@ function MenuListItem({ url, icon, text, tooltip }) {
to={url}
selected={currentUrl.split("?")[0].endsWith(url)}
>
- <ListItemIcon className={classes.menuIcon}>{icon}</ListItemIcon>
+ <ListItemIconMenuIcon>{icon}</ListItemIconMenuIcon>
<ListItemText
primary={text}
primaryTypographyProps={{ variant: "h5" }}
@@ -357,24 +352,23 @@ export function ProfileMenu() {
);
}
-const StyledListItemButton = withStyles(() => ({
- root: {
+const StyledListItemButton = styled(ListItemButton)({
+ "& .MuiListItemButton-root": {
margin: 0,
paddingLeft: 10
}
-}))(ListItemButton);
+});
-const StyledListItemIcon = withStyles(() => ({
- root: {
+const StyledListItemIcon = styled(ListItemIcon)({
+ "& .MuiListItemIcon-root": {
minWidth: 0,
marginRight: 12
}
-}))(ListItemIcon);
+});
export function NotificationMenu() {
const [anchorEl, setAnchorEl] = useState(null);
const { user } = useContext(userContext);
- const classes = useStyles();
const { notifications, clearNotifications } = useContext(notificationContext);
const handleClick = (event) => {
@@ -392,7 +386,7 @@ export function NotificationMenu() {
item
xs={12}
>
- <List className={classes.notificationList}>
+ <ListNotificationList>
{notifications.map((notification) => {
return (
<>
@@ -404,27 +398,23 @@ export function NotificationMenu() {
handleClose();
}}
>
- <StyledListItemIcon className={classes.notificationItem}>
+ <StyledListItemIcon>
<DeploymentStatusIcon status={notification.status} />
</StyledListItemIcon>
- <Typography className={classes.notificationItem}>
- {notification.message}
- </Typography>
+ <Typography>{notification.message}</Typography>
</StyledListItemButton>
) : (
<StyledListItemButton key={notification.message}>
- <StyledListItemIcon className={classes.notificationItem}>
+ <StyledListItemIcon>
<DeploymentStatusIcon status={notification.status} />
</StyledListItemIcon>
- <Typography className={classes.notificationItem}>
- {notification.message}
- </Typography>
+ <Typography>{notification.message}</Typography>
</StyledListItemButton>
)}
</>
);
})}
- </List>
+ </ListNotificationList>
</Grid>
<Grid
item
@@ -470,10 +460,9 @@ export function NotificationMenu() {
<>
{user ? (
<>
- <IconButton
+ <IconButtonNotificationButton
color="inherit"
onClick={handleClick}
- className={classes.notificationButton}
size="large"
>
<Badge
@@ -482,7 +471,7 @@ export function NotificationMenu() {
>
<NotificationsIcon />
</Badge>
- </IconButton>
+ </IconButtonNotificationButton>
<Popover
open={Boolean(anchorEl)}
anchorEl={anchorEl}
@@ -518,7 +507,6 @@ const defaultButton = <LoginControls />;
export function GlobalAppBar({ children }) {
const theme = useTheme();
- const classes = useStyles();
const [button, setButton] = useState(defaultButton);
const [title, setTitle] = useState(defaultTitle);
const [value] = useState({ setButton, setTitle });
@@ -575,17 +563,13 @@ export function GlobalAppBar({ children }) {
<div>
<GlobalAppBarContext.Provider value={value}>
<div style={{ ...theme.mixins.toolbar }} />
- <div className={classes.content}>
- <div
- className={
- drawerOpen
- ? classes.shiftContentRight
- : classes.shiftContentLeft
- }
- >
- {children}
- </div>
- </div>
+ <DivContent>
+ {drawerOpen ? (
+ <ShiftContentRight>{children}</ShiftContentRight>
+ ) : (
+ <ShiftContentLeft>{children}</ShiftContentLeft>
+ )}
+ </DivContent>
</GlobalAppBarContext.Provider>
</div>
</>
diff --git a/src/components/navigation/Menu/MenuDrawer.js b/src/components/navigation/Menu/MenuDrawer.js
index 09ec55a9..f9ac2e29 100644
--- a/src/components/navigation/Menu/MenuDrawer.js
+++ b/src/components/navigation/Menu/MenuDrawer.js
@@ -1,4 +1,5 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import clsx from "clsx";
import {
Container,
@@ -10,27 +11,39 @@ import {
} from "@mui/material";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "MenuDrawer";
-const useStyles = makeStyles((theme) => ({
- footer: {
+const classes = {
+ footer: `${PREFIX}-footer`,
+ drawer: `${PREFIX}-drawer`,
+ drawerOpen: `${PREFIX}-drawerOpen`,
+ drawerClose: `${PREFIX}-drawerClose`,
+ toggleButton: `${PREFIX}-toggleButton`
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled("div")(({ theme }) => ({
+ [`& .${classes.footer}`]: {
position: "fixed",
bottom: 0,
paddingBottom: theme.spacing(2)
},
- drawer: {
+
+ [`& .${classes.drawer}`]: {
width: theme.drawer.widthOpen,
flexShrink: 0,
whiteSpace: "nowrap"
},
- drawerOpen: {
+
+ [`& .${classes.drawerOpen}`]: {
width: theme.drawer.widthOpen,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
- drawerClose: {
+
+ [`& .${classes.drawerClose}`]: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
@@ -41,21 +54,21 @@ const useStyles = makeStyles((theme) => ({
width: theme.spacing(9) + 1
}
},
- toggleButton: {
+
+ [`& .${classes.toggleButton}`]: {
marginRight: theme.spacing(1)
}
}));
export function MenuDrawer({ open, toggleDrawer, children }) {
const theme = useTheme();
- const classes = useStyles();
const handleDrawerClose = () => {
toggleDrawer();
};
return (
- <>
+ <Root>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
@@ -74,7 +87,7 @@ export function MenuDrawer({ open, toggleDrawer, children }) {
keepMounted: true // Better open performance on mobile.
}}
>
- <Container disableGutters="true">
+ <Container disableGutters>
<div style={{ ...theme.mixins.toolbar }} />
<div
style={{
@@ -112,6 +125,6 @@ export function MenuDrawer({ open, toggleDrawer, children }) {
</div>
</Container>
</Drawer>
- </>
+ </Root>
);
}
diff --git a/src/components/navigation/NotFound.js b/src/components/navigation/NotFound.js
index afdfe0d9..414e8cad 100644
--- a/src/components/navigation/NotFound.js
+++ b/src/components/navigation/NotFound.js
@@ -1,18 +1,23 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { Paper, Typography, Box, Button, Link } from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { RootContainer } from "../../components/common/Container/RootContainer";
import { useRedirect } from "../../hooks/Redirect";
-const useStyles = makeStyles((theme) => ({
- paper: {
+const PREFIX = "NotFound";
+
+const classes = {
+ paper: `${PREFIX}-paper`
+};
+
+const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
+ [`& .${classes.paper}`]: {
maxWidth: "80%",
padding: theme.spacing(4)
}
}));
export default function NotFound({ message }) {
- const classes = useStyles();
const redirect = useRedirect();
const goHome = () => {
@@ -76,7 +81,7 @@ export default function NotFound({ message }) {
);
return (
- <RootContainer>
+ <StyledRootContainer>
<Paper className={classes.paper}>
<Box
display="flex"
@@ -98,6 +103,6 @@ export default function NotFound({ message }) {
</Button>
</Box>
</Paper>
- </RootContainer>
+ </StyledRootContainer>
);
}
diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js
index 58519c86..fc9dcf2a 100644
--- a/src/views/IOC/IOCListView.js
+++ b/src/views/IOC/IOCListView.js
@@ -8,12 +8,12 @@ import {
Tabs,
Tab
} from "@mui/material";
+import { styled } from "@mui/material/styles";
import { RootContainer } from "../../components/common/Container/RootContainer";
import React, { useState, useEffect, useContext, useCallback } from "react";
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
import { IOCAsyncList } from "../../components/IOC/IOCAsyncList";
import { useIOCSearch, userContext } from "../../api/SwaggerApi";
-import { makeStyles } from "@mui/styles";
import { initRequestParams } from "../../components/common/Helper";
import { SearchBar } from "../../components/common/SearchBar/SearchBar";
import AccessControl from "../../components/auth/AccessControl";
@@ -23,8 +23,14 @@ import {
deserialize
} from "../../components/common/URLState/URLState";
-const useStyles = makeStyles((theme) => ({
- root: {
+const PREFIX = "IOCListView";
+
+const classes = {
+ root: `${PREFIX}-root`
+};
+
+const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
+ [`& .${classes.root}`]: {
marginBottom: theme.spacing(2)
}
}));
@@ -46,7 +52,6 @@ export function IOCListView() {
const [deploymentStatus, setDeploymentStatus] = useState("ALL");
const { user } = useContext(userContext);
- const classes = useStyles();
const handleTabChange = useCallback(
(tab) => {
@@ -145,7 +150,7 @@ export function IOCListView() {
);
return (
- <RootContainer>
+ <StyledRootContainer>
<Paper className={classes.root}>
<Grid
container
@@ -205,6 +210,6 @@ export function IOCListView() {
</Grid>
</Grid>
</Paper>
- </RootContainer>
+ </StyledRootContainer>
);
}
diff --git a/src/views/help/HelpView.js b/src/views/help/HelpView.js
index c99a9dba..2bae1ec0 100644
--- a/src/views/help/HelpView.js
+++ b/src/views/help/HelpView.js
@@ -1,26 +1,33 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { Paper, Link, Typography } from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
import "./helpfile.css";
import { RootContainer } from "../../components/common/Container/RootContainer";
-const useStyles = makeStyles((theme) => ({
- paper: {
+const PREFIX = "HelpView";
+
+const classes = {
+ paper: `${PREFIX}-paper`,
+ typography: `${PREFIX}-typography`
+};
+
+const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
+ [`& .${classes.paper}`]: {
padding: theme.spacing(4)
},
- typography: {
+
+ [`& .${classes.typography}`]: {
paddingBottom: theme.spacing(2.5)
}
}));
export function HelpView() {
- const classes = useStyles();
const title = "Help";
useGlobalAppBar(title);
return (
- <RootContainer>
+ <StyledRootContainer>
<Paper className={classes.paper}>
<h2>Help</h2>
<Typography
@@ -307,6 +314,6 @@ export function HelpView() {
</table>
</Typography>
</Paper>
- </RootContainer>
+ </StyledRootContainer>
);
}
diff --git a/src/views/home/HomeView.js b/src/views/home/HomeView.js
index e47e3e9b..613c4c80 100644
--- a/src/views/home/HomeView.js
+++ b/src/views/home/HomeView.js
@@ -1,4 +1,5 @@
import { Container, Grid, Paper, Button, Box, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
import React, { useState } from "react";
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
import { CreateIOC } from "../../components/IOC/CreateIOC";
@@ -13,13 +14,19 @@ import {
useOwnIocsWithAlarms
} from "../../api/SwaggerApi";
import ReactMarkdown from "react-markdown";
-import { makeStyles } from "@mui/styles";
+const PREFIX = "HomeView";
-const useStyles = makeStyles((theme) => ({
- root: {
+const classes = {
+ root: `${PREFIX}-root`,
+ announcements: `${PREFIX}-announcements`
+};
+
+const StyledContainer = styled(Container)(({ theme }) => ({
+ [`& .${classes.root}`]: {
marginBottom: theme.spacing(2)
},
- announcements: {
+
+ [`& .${classes.announcements}`]: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3)
}
@@ -35,7 +42,6 @@ export function HomeView() {
,
loading
] = useOwnIocsWithAlarms();
- const classes = useStyles();
const [lazyParams, setLazyParams] = useState({
rows: 100,
@@ -49,7 +55,7 @@ export function HomeView() {
};
return (
- <Container>
+ <StyledContainer>
<Paper className={classes.root}>
<Grid
container
@@ -154,6 +160,6 @@ export function HomeView() {
/>
</SimpleModal>
</Paper>
- </Container>
+ </StyledContainer>
);
}
diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js
index e672e576..c0e1da60 100644
--- a/src/views/host/HostDetailsView.js
+++ b/src/views/host/HostDetailsView.js
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useCallback } from "react";
+import { styled } from "@mui/material/styles";
import {
Paper,
Link,
@@ -8,7 +9,6 @@ import {
CardContent,
Typography
} from "@mui/material";
-import { makeStyles } from "@mui/styles";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useHostIOCList } from "../../api/SwaggerApi";
import { HostBadge } from "../../components/host/HostBadge";
@@ -28,11 +28,19 @@ import {
deserialize
} from "../../components/common/URLState/URLState";
-const useStyles = makeStyles((theme) => ({
- secondItem: {
+const PREFIX = "HostDetailsView";
+
+const classes = {
+ secondItem: `${PREFIX}-secondItem`,
+ hostHeader: `${PREFIX}-hostHeader`
+};
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+ [`& .${classes.secondItem}`]: {
marginTop: theme.spacing(2)
},
- hostHeader: {
+
+ [`& .${classes.hostHeader}`]: {
marginTop: theme.spacing(2)
}
}));
@@ -54,7 +62,6 @@ export function HostDetailsView({ id }) {
);
const navigate = useNavigate();
- const classes = useStyles();
const lazyParams = useCallback(() => {
return {
@@ -125,7 +132,7 @@ export function HostDetailsView({ id }) {
}, [host, setTitle]);
return (
- <Paper>
+ <StyledPaper>
<IconButton
color="inherit"
onClick={handleClick}
@@ -223,6 +230,6 @@ export function HostDetailsView({ id }) {
</Container>
</CardContent>
</Card>
- </Paper>
+ </StyledPaper>
);
}
diff --git a/src/views/host/HostListView.js b/src/views/host/HostListView.js
index f3a2c01b..3eaafe4e 100644
--- a/src/views/host/HostListView.js
+++ b/src/views/host/HostListView.js
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useCallback } from "react";
+import { styled } from "@mui/material/styles";
import {
Container,
Paper,
@@ -15,7 +16,6 @@ import { HostList } from "../../components/host/HostList";
import { HostTable } from "../../components/host/HostTable";
import { useCSEntrySearch } from "../../api/SwaggerApi";
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
-import { makeStyles } from "@mui/styles";
import {
initRequestParams,
transformHostQuery
@@ -28,8 +28,14 @@ import {
deserialize
} from "../../components/common/URLState/URLState";
-const useStyles = makeStyles((theme) => ({
- root: {
+const PREFIX = "HostListView";
+
+const classes = {
+ root: `${PREFIX}-root`
+};
+
+const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
+ [`& .${classes.root}`]: {
marginBottom: theme.spacing(2)
}
}));
@@ -52,7 +58,6 @@ export function HostListView() {
);
const [hostFilter, setHostFilter] = useState("ALL");
- const classes = useStyles();
const hideOwnSlider = deserialize(state.tab) === 2;
@@ -151,7 +156,7 @@ export function HostListView() {
);
return (
- <RootContainer>
+ <StyledRootContainer>
<Paper className={classes.root}>
<Grid
container
@@ -226,6 +231,6 @@ export function HostListView() {
</Grid>
</Grid>
</Paper>
- </RootContainer>
+ </StyledRootContainer>
);
}
diff --git a/src/views/jobs/JobListView.js b/src/views/jobs/JobListView.js
index 241fbd1e..3ae3b4ec 100644
--- a/src/views/jobs/JobListView.js
+++ b/src/views/jobs/JobListView.js
@@ -1,5 +1,5 @@
import React, { useContext, useState, useCallback } from "react";
-import { makeStyles } from "@mui/styles";
+import { styled } from "@mui/material/styles";
import {
Paper,
Grid,
@@ -24,21 +24,30 @@ import {
deserialize
} from "../../components/common/URLState/URLState";
-const useStyles = makeStyles((theme) => ({
- root: {
+const PREFIX = "JobListView";
+
+const classes = {
+ root: `${PREFIX}-root`,
+ paper: `${PREFIX}-paper`,
+ formControl: `${PREFIX}-formControl`
+};
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+ [`& .${classes.root}`]: {
width: "100%"
},
- paper: {
+
+ [`&.${classes.paper}`]: {
marginBottom: theme.spacing(2)
},
- formControl: {
+
+ [`& .${classes.formControl}`]: {
marginLeft: "5px",
marginRight: "5px"
}
}));
export function JobListView() {
- const classes = useStyles();
const [operations, getOperations /* reset*/, , loading] =
useOperationsSearch();
const [state, setState] = useUrlState(
@@ -160,7 +169,7 @@ export function JobListView() {
];
return (
- <Paper className={classes.paper}>
+ <StyledPaper className={classes.paper}>
<Grid
container
spacing={1}
@@ -243,6 +252,6 @@ export function JobListView() {
{content}
</Grid>
</Grid>
- </Paper>
+ </StyledPaper>
);
}
diff --git a/src/views/statistics/StatisticsView.js b/src/views/statistics/StatisticsView.js
index 81ca1afb..45cc3c2c 100644
--- a/src/views/statistics/StatisticsView.js
+++ b/src/views/statistics/StatisticsView.js
@@ -1,6 +1,6 @@
import React from "react";
+import { styled } from "@mui/material/styles";
import { Paper, Grid, useTheme, Typography } from "@mui/material";
-import { makeStyles } from "@mui/styles";
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
import { RootContainer } from "../../components/common/Container/RootContainer";
import ActiveIOCChart from "../../components/statistics/ActiveIOCChart";
@@ -13,22 +13,26 @@ import { HostStatistics } from "../../components/statistics/HostStatistics";
import { IOCStatistics } from "../../components/statistics/IOCStatistics";
import OperationChart from "../../components/statistics/OperationChart/OperationChart";
-const useStyles = makeStyles((theme) => ({
- paper: {
+const PREFIX = "StatisticsView";
+
+const classes = {
+ paper: `${PREFIX}-paper`
+};
+
+const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
+ [`& .${classes.paper}`]: {
padding: theme.spacing(4)
}
}));
export function StatisticsView() {
- const classes = useStyles();
-
const title = "Statistics";
useGlobalAppBar(title);
const theme = useTheme();
return (
- <RootContainer>
+ <StyledRootContainer>
<Grid
container
spacing={theme.spacing(0.5)}
@@ -86,6 +90,6 @@ export function StatisticsView() {
</Paper>
</Grid>
</Grid>
- </RootContainer>
+ </StyledRootContainer>
);
}
--
GitLab