diff --git a/package-lock.json b/package-lock.json index 0e7fefcd..677fad3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,13 +15,14 @@ "@fontsource/roboto": "^5.0.5", "@mui/icons-material": "^5.14.0", "@mui/material": "^5.14.0", + "@mui/styles": "^5.14.4", "@mui/x-data-grid": "^6.10.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^12.8.3", "file-saver": "^2.0.5", "jszip": "^3.10.1", - "konva": "^8.4.3", + "konva": "^7.2.5", "material-ui-popup-state": "^5.0.9", "notistack": "^3.0.1", "qs": "^6.11.2", @@ -625,10 +626,6 @@ "stylis": "4.2.0" } }, - "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": { - "version": "0.9.1", - "license": "MIT" - }, "node_modules/@emotion/cache": { "version": "11.11.0", "license": "MIT", @@ -640,6 +637,11 @@ "stylis": "4.2.0" } }, + "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/@emotion/is-prop-valid": { "version": "1.2.1", "license": "MIT", @@ -684,10 +686,6 @@ "csstype": "^3.0.2" } }, - "node_modules/@emotion/serialize/node_modules/@emotion/hash": { - "version": "0.9.1", - "license": "MIT" - }, "node_modules/@emotion/sheet": { "version": "1.2.2", "license": "MIT" @@ -1823,6 +1821,54 @@ } } }, + "node_modules/@mui/styles": { + "version": "5.14.4", + "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.14.4.tgz", + "integrity": "sha512-I4C7q/s17h8AA9FA63oLPdEHnEQlAPNX3zGngxsOYfSLZJB/VhR2SsrkIZFzUazd6a2o2nC997lbAACn3CstKw==", + "dependencies": { + "@babel/runtime": "^7.22.6", + "@emotion/hash": "^0.9.1", + "@mui/private-theming": "^5.14.4", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.4", + "clsx": "^2.0.0", + "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/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/@mui/system": { "version": "5.14.4", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.4.tgz", @@ -3551,6 +3597,15 @@ "node": ">= 8" } }, + "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.escape": { "version": "1.5.1", "license": "MIT" @@ -5313,6 +5368,11 @@ "url": "https://github.com/sponsors/typicode" } }, + "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.6.3", "dev": true, @@ -5536,6 +5596,11 @@ "node": ">=0.10.0" } }, + "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-inside-container": { "version": "1.0.0", "dev": true, @@ -7637,6 +7702,88 @@ "node": ">=6" } }, + "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/jsx-ast-utils": { "version": "3.3.4", "dev": true, @@ -7670,7 +7817,9 @@ } }, "node_modules/konva": { - "version": "8.4.3", + "version": "7.2.5", + "resolved": "https://registry.npmjs.org/konva/-/konva-7.2.5.tgz", + "integrity": "sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew==", "funding": [ { "type": "patreon", @@ -7684,8 +7833,7 @@ "type": "github", "url": "https://github.com/sponsors/lavrton" } - ], - "license": "MIT" + ] }, "node_modules/language-subtag-registry": { "version": "0.3.22", @@ -9985,6 +10133,11 @@ "dev": true, "license": "MIT" }, + "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/titleize": { "version": "3.0.0", "dev": true, @@ -11027,11 +11180,6 @@ "find-root": "^1.1.0", "source-map": "^0.5.7", "stylis": "4.2.0" - }, - "dependencies": { - "@emotion/hash": { - "version": "0.9.1" - } } }, "@emotion/cache": { @@ -11044,6 +11192,11 @@ "stylis": "4.2.0" } }, + "@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==" + }, "@emotion/is-prop-valid": { "version": "1.2.1", "requires": { @@ -11074,11 +11227,6 @@ "@emotion/unitless": "^0.8.1", "@emotion/utils": "^1.2.1", "csstype": "^3.0.2" - }, - "dependencies": { - "@emotion/hash": { - "version": "0.9.1" - } } }, "@emotion/sheet": { @@ -11772,6 +11920,37 @@ "prop-types": "^15.8.1" } }, + "@mui/styles": { + "version": "5.14.4", + "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.14.4.tgz", + "integrity": "sha512-I4C7q/s17h8AA9FA63oLPdEHnEQlAPNX3zGngxsOYfSLZJB/VhR2SsrkIZFzUazd6a2o2nC997lbAACn3CstKw==", + "requires": { + "@babel/runtime": "^7.22.6", + "@emotion/hash": "^0.9.1", + "@mui/private-theming": "^5.14.4", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.4", + "clsx": "^2.0.0", + "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": { + "clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==" + } + } + }, "@mui/system": { "version": "5.14.4", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.4.tgz", @@ -12863,6 +13042,15 @@ "which": "^2.0.1" } }, + "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.escape": { "version": "1.5.1" }, @@ -13956,6 +14144,11 @@ "version": "8.0.3", "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.6.3", "dev": true, @@ -14079,6 +14272,11 @@ "is-extglob": "^2.1.1" } }, + "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-inside-container": { "version": "1.0.0", "dev": true, @@ -15404,6 +15602,84 @@ "version": "2.2.3", "dev": true }, + "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" + } + }, + "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.4", "dev": true, @@ -15428,7 +15704,9 @@ "dev": true }, "konva": { - "version": "8.4.3" + "version": "7.2.5", + "resolved": "https://registry.npmjs.org/konva/-/konva-7.2.5.tgz", + "integrity": "sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew==" }, "language-subtag-registry": { "version": "0.3.22", @@ -16781,6 +17059,11 @@ "version": "2.3.8", "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==" + }, "titleize": { "version": "3.0.0", "dev": true diff --git a/package.json b/package.json index 3e7648f0..74ccac54 100644 --- a/package.json +++ b/package.json @@ -14,13 +14,14 @@ "@fontsource/roboto": "^5.0.5", "@mui/icons-material": "^5.14.0", "@mui/material": "^5.14.0", + "@mui/styles": "^5.14.4", "@mui/x-data-grid": "^6.10.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^12.8.3", "file-saver": "^2.0.5", "jszip": "^3.10.1", - "konva": "^8.4.3", + "konva": "^7.2.5", "material-ui-popup-state": "^5.0.9", "notistack": "^3.0.1", "qs": "^6.11.2", diff --git a/src/components/BaseModal.tsx b/src/components/BaseModal.tsx index 9073cf5d..082d7740 100644 --- a/src/components/BaseModal.tsx +++ b/src/components/BaseModal.tsx @@ -38,7 +38,7 @@ export const BaseModal: React.FunctionComponent = ({ - diff --git a/src/components/BuildList/index.tsx b/src/components/BuildList/index.tsx index 9b13c3d7..ff63a6d9 100644 --- a/src/components/BuildList/index.tsx +++ b/src/components/BuildList/index.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from "react"; -import { styled } from "@mui/material/styles"; +import { makeStyles, createStyles } from '@mui/styles'; import { List, ListItemButton, @@ -34,33 +34,25 @@ import { useNavigate } from "react-router"; import { buildTestRunLocation } from "../../_helpers/route.helpers"; import { Tooltip } from "../Tooltip"; -const PREFIX = "index"; - -const classes = { - listContainer: `${PREFIX}-listContainer`, - listItemSecondaryAction: `${PREFIX}-listItemSecondaryAction`, - listItem: `${PREFIX}-listItem`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ - [`& .${classes.listContainer}`]: { - height: "100%", - overflow: "auto", - }, - - [`& .${classes.listItemSecondaryAction}`]: { - visibility: "hidden", - }, - - [`& .${classes.listItem}`]: { - "&:hover $listItemSecondaryAction": { - visibility: "inherit", +const useStyles = makeStyles(() => + createStyles({ + listContainer: { + height: "100%", + overflow: "auto", + }, + listItemSecondaryAction: { + visibility: "hidden", + }, + listItem: { + "&:hover $listItemSecondaryAction": { + visibility: "inherit", + }, }, - }, -})); + }), +); const BuildList: FunctionComponent = () => { + const classes = useStyles(); const navigate = useNavigate(); const { buildList, selectedBuild, loading, total, take } = useBuildState(); const buildDispatch = useBuildDispatch(); @@ -124,7 +116,7 @@ const BuildList: FunctionComponent = () => { }, [handlePaginationChange]); return ( - + <> {loading ? ( @@ -263,7 +255,7 @@ const BuildList: FunctionComponent = () => { inputProps={{ onChange: (event: React.ChangeEvent) => setNewCiBuildId(event.target.value), - "data-testId": "newCiBuildId", + "data-testid": "newCiBuildId", }} /> @@ -322,7 +314,7 @@ const BuildList: FunctionComponent = () => { }} /> )} - + ); }; diff --git a/src/components/CommentsPopper.tsx b/src/components/CommentsPopper.tsx index f9b7df15..5f444ec1 100644 --- a/src/components/CommentsPopper.tsx +++ b/src/components/CommentsPopper.tsx @@ -1,30 +1,22 @@ import React from "react"; -import { styled } from "@mui/material/styles"; -import { Button, Popper, Fade, Paper, TextField, Badge } from "@mui/material"; +import { makeStyles } from '@mui/styles'; +import { Button, Popper, Fade, Paper, TextField, Badge, type Theme } from "@mui/material"; import { usePopupState, bindToggle, bindPopper, } from "material-ui-popup-state/hooks"; -const PREFIX = "CommentsPopper"; - -const classes = { - popperContainer: `${PREFIX}-popperContainer`, - contentContainer: `${PREFIX}-contentContainer`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(({ theme }) => ({ - [`& .${classes.popperContainer}`]: { +const useStyles = makeStyles((theme: Theme) => ({ + popperContainer: { zIndex: 1400, }, - - [`& .${classes.contentContainer}`]: { + contentContainer: { padding: theme.spacing(2), }, })); + interface IProps { text: string | undefined; onSave: (comment: string) => Promise; @@ -34,6 +26,7 @@ export const CommentsPopper: React.FunctionComponent = ({ text, onSave, }) => { + const classes = useStyles(); const popupState = usePopupState({ variant: "popper", popupId: "commentPopper", @@ -44,7 +37,7 @@ export const CommentsPopper: React.FunctionComponent = ({ React.useEffect(() => setComment(text || ""), [text]); return ( - + <> = ({ setComment(event.target.value) } inputProps={{ - "data-testId": "comment", + "data-testid": "comment", }} /> diff --git a/src/components/ProjectSelect.tsx b/src/components/ProjectSelect.tsx index 2d4f0259..0d39f903 100644 --- a/src/components/ProjectSelect.tsx +++ b/src/components/ProjectSelect.tsx @@ -1,10 +1,11 @@ import React, { FunctionComponent } from "react"; -import { styled } from "@mui/material/styles"; +import { makeStyles, createStyles } from '@mui/styles'; import { FormControl, InputLabel, MenuItem, Select, + type Theme, type SelectChangeEvent, } from "@mui/material"; import { @@ -13,28 +14,22 @@ import { selectProject, } from "../contexts"; -const PREFIX = "ProjectSelect"; - -const classes = { - formControl: `${PREFIX}-formControl`, - input: `${PREFIX}-input`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(({ theme }) => ({ - [`& .${classes.formControl}`]: { - width: "100%", - }, - - [`& .${classes.input}`]: { - margin: theme.spacing(1), - }, -})); +const useStyles = makeStyles((theme: Theme) => + createStyles({ + formControl: { + width: "100%", + }, + input: { + margin: theme.spacing(1), + }, + }), +); const ProjectSelect: FunctionComponent<{ projectId?: string; onProjectSelect: (id: string) => void; }> = ({ projectId, onProjectSelect }) => { + const classes = useStyles(); const { projectList, selectedProjectId } = useProjectState(); const projectDispatch = useProjectDispatch(); @@ -45,7 +40,7 @@ const ProjectSelect: FunctionComponent<{ }, [projectId, selectedProjectId, projectDispatch]); return ( - + <> {projectList.length > 0 && ( @@ -73,7 +68,7 @@ const ProjectSelect: FunctionComponent<{ )} - + ); }; diff --git a/src/components/RegisterForm.tsx b/src/components/RegisterForm.tsx index 26b8c854..6cde8c30 100644 --- a/src/components/RegisterForm.tsx +++ b/src/components/RegisterForm.tsx @@ -55,7 +55,7 @@ const RegisterForm = () => { inputProps={{ onChange: (event: React.FormEvent) => setFirstName(event.target.value), - "data-testId": "firstName", + "data-testid": "firstName", }} /> @@ -74,7 +74,7 @@ const RegisterForm = () => { inputProps={{ onChange: (event: React.FormEvent) => setLastName(event.target.value), - "data-testId": "lastName", + "data-testid": "lastName", }} /> @@ -93,7 +93,7 @@ const RegisterForm = () => { inputProps={{ onChange: (event: React.FormEvent) => setEmail(event.target.value), - "data-testId": "email", + "data-testid": "email", }} /> @@ -112,7 +112,7 @@ const RegisterForm = () => { inputProps={{ onChange: (event: React.FormEvent) => setPassword(event.target.value), - "data-testId": "password", + "data-testid": "password", }} /> @@ -125,7 +125,7 @@ const RegisterForm = () => { type="submit" color="primary" variant="outlined" - data-testId="submit" + data-testid="submit" > Submit diff --git a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx index aae3e439..5c8f2300 100644 --- a/src/components/TestDetailsDialog/ApproveRejectButtons.tsx +++ b/src/components/TestDetailsDialog/ApproveRejectButtons.tsx @@ -1,21 +1,14 @@ import { Chip, Button } from "@mui/material"; -import { styled } from "@mui/material/styles"; import { useSnackbar } from "notistack"; import { useHotkeys } from "react-hotkeys-hook"; import React from "react"; import { testRunService } from "../../services"; import { TestRun } from "../../types"; import { Tooltip } from "../Tooltip"; +import { makeStyles } from "@mui/styles"; -const PREFIX = "ApproveRejectButtons"; - -const classes = { - actionButton: `${PREFIX}-actionButton`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ - [`& .${classes.actionButton}`]: { +const useStyles = makeStyles(() => ({ + actionButton: { width: 120, marginLeft: 4, marginRight: 4, @@ -28,6 +21,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{ afterReject?: () => void; }> = ({ testRun, afterApprove, afterReject }) => { const { enqueueSnackbar } = useSnackbar(); + const classes = useStyles(); const approve = () => { testRunService @@ -65,7 +59,7 @@ export const ApproveRejectButtons: React.FunctionComponent<{ useHotkeys("x", reject, [testRun]); return ( - + <> {testRun.merge && ( - + ); }; diff --git a/src/components/TestDetailsDialog/ArrowButtons.tsx b/src/components/TestDetailsDialog/ArrowButtons.tsx index ca3bccc1..3bd8fe42 100644 --- a/src/components/TestDetailsDialog/ArrowButtons.tsx +++ b/src/components/TestDetailsDialog/ArrowButtons.tsx @@ -1,21 +1,13 @@ import { IconButton } from "@mui/material"; -import { styled } from "@mui/material/styles"; import { NavigateNext, NavigateBefore } from "@mui/icons-material"; import React from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { TestRun } from "../../types"; import { Tooltip } from "../Tooltip"; +import { makeStyles } from "@mui/styles"; -const PREFIX = "ArrowButtons"; - -const classes = { - button: `${PREFIX}-button`, - icon: `${PREFIX}-icon`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ - [`& .${classes.button}`]: { +const useStyles = makeStyles(() => ({ + button: { width: 64, height: 64, padding: 0, @@ -23,8 +15,7 @@ const Root = styled("div")(() => ({ top: "50%", zIndex: 4000, }, - - [`& .${classes.icon}`]: { + icon: { width: 64, height: 64, }, @@ -35,6 +26,8 @@ export const ArrowButtons: React.FunctionComponent<{ selectedTestRunIndex: number; handleNavigation: (testRunId: string) => void; }> = ({ testRuns, selectedTestRunIndex, handleNavigation }) => { + const classes = useStyles(); + const navigateNext = () => { if (testRuns.length > selectedTestRunIndex + 1) { const next = testRuns[selectedTestRunIndex + 1]; @@ -53,7 +46,7 @@ export const ArrowButtons: React.FunctionComponent<{ useHotkeys("left", navigateBefore, [selectedTestRunIndex, handleNavigation]); return ( - + <> {testRuns.length > selectedTestRunIndex + 1 && ( )} - + ); }; diff --git a/src/components/TestDetailsDialog/DrawArea.tsx b/src/components/TestDetailsDialog/DrawArea.tsx index 26840189..c874aff6 100644 --- a/src/components/TestDetailsDialog/DrawArea.tsx +++ b/src/components/TestDetailsDialog/DrawArea.tsx @@ -1,37 +1,26 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ import React, { FunctionComponent, useCallback } from "react"; -import { styled } from "@mui/material/styles"; import { Stage, Layer, Image } from "react-konva"; import Rectangle, { MIN_RECT_SIDE_PIXEL } from "../Rectangle"; import { IgnoreArea } from "../../types/ignoreArea"; -import { Grid, CircularProgress } from "@mui/material"; +import { Grid, CircularProgress, type Theme } from "@mui/material"; import { NoImagePlaceholder } from "./NoImageAvailable"; import Konva from "konva"; +import { makeStyles } from "@mui/styles"; -const PREFIX = "DrawArea"; - -const classes = { - canvasContainer: `${PREFIX}-canvasContainer`, - imageDetailsContainer: `${PREFIX}-imageDetailsContainer`, - progressContainer: `${PREFIX}-progressContainer`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(({ theme }) => ({ - [`& .${classes.canvasContainer}`]: { +const useStyles = makeStyles((theme: Theme) => ({ + canvasContainer: { overflow: "auto", backgroundColor: "white", }, - - [`& .${classes.imageDetailsContainer}`]: { + imageDetailsContainer: { position: "absolute", backgroundColor: "white", zIndex: 1, padding: theme.spacing(1), height: "48px", }, - - [`& .${classes.progressContainer}`]: { + progressContainer: { minHeight: "300px", }, })); @@ -83,6 +72,7 @@ export const DrawArea: FunctionComponent = ({ stageScrollPosState, drawModeState, }) => { + const classes = useStyles(); const [stageInitPos, setStageInitPos] = stageInitPosState; const [stageOffset, setStageOffset] = stageOffsetState; const [stagePos, setStagePos] = stagePosState; @@ -349,5 +339,9 @@ export const DrawArea: FunctionComponent = ({ ); // TODO: Separate SVG with reason... - return {imageName ? imageCanvas() : }; + return ( + <> + {imageName ? imageCanvas() : } + + ); }; diff --git a/src/components/TestDetailsDialog/ImageDetails.tsx b/src/components/TestDetailsDialog/ImageDetails.tsx index f9c93cd3..d33be359 100644 --- a/src/components/TestDetailsDialog/ImageDetails.tsx +++ b/src/components/TestDetailsDialog/ImageDetails.tsx @@ -1,26 +1,17 @@ import React from "react"; -import { styled } from "@mui/material/styles"; import { Typography, Grid, IconButton } from "@mui/material"; import { WarningRounded, AltRoute } from "@mui/icons-material"; import { IgnoreArea } from "../../types/ignoreArea"; import { Tooltip } from "../Tooltip"; +import { makeStyles } from "@mui/styles"; -const PREFIX = "ImageDetails"; - -const classes = { - container: `${PREFIX}-container`, - branchName: `${PREFIX}-branchName`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ - [`& .${classes.container}`]: { +const useStyles = makeStyles(() => ({ + container: { display: "flex", alignItems: "center", color: "darkslategrey", }, - - [`& .${classes.branchName}`]: { + branchName: { cursor: "pointer", lineHeight: "20px", fontWeight: "bolder", @@ -48,13 +39,14 @@ const ImageDetails: React.FunctionComponent = ({ branchName, ignoreAreas, }) => { + const classes = useStyles(); const imageSize = () => { return ( imageName && ( {image ? `(${image?.width} x ${image?.height})` : "Loading..."} @@ -62,29 +54,27 @@ const ImageDetails: React.FunctionComponent = ({ ); }; return ( - - - - {type === "Baseline" ? "Baseline" : "Checkpoint"} - - {imageSize()} - - - {branchName} + + + {type === "Baseline" ? "Baseline" : "Checkpoint"} + + {imageSize()} + + + {branchName} + + {ignoreAreas && ignoreAreas.length > 0 && ( + + + + - {ignoreAreas && ignoreAreas.length > 0 && ( - - - - - - )} - - + )} + ); }; diff --git a/src/components/TestDetailsDialog/NoImageAvailable.tsx b/src/components/TestDetailsDialog/NoImageAvailable.tsx index 77d2060f..f74d75bb 100644 --- a/src/components/TestDetailsDialog/NoImageAvailable.tsx +++ b/src/components/TestDetailsDialog/NoImageAvailable.tsx @@ -1,23 +1,19 @@ import React from "react"; -import { styled } from "@mui/material/styles"; import noImage from "../../static/no-image.png"; +import { makeStyles } from "@mui/styles"; -const PREFIX = "NoImagePlaceholder"; - -const classes = { - img: `${PREFIX}-img`, -}; - -const Root = styled("img")(() => ({ - [`&.${classes.img}`]: { +const useStyles = makeStyles(() => ({ + img: { display: "block", marginLeft: "auto", marginRight: "auto", - width: "fit-content", + width: "50%", }, })); // TODO: Use SVG and more specific text to describe reason... export const NoImagePlaceholder: React.FunctionComponent = () => { - return ; + const classes = useStyles(); + + return Not available; }; diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx index 4af09844..037a75c6 100644 --- a/src/components/TestDetailsDialog/TestDetailsModal.tsx +++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { styled } from "@mui/material/styles"; +import { makeStyles } from '@mui/styles'; import { Typography, Button, @@ -53,70 +53,44 @@ import ImageDetails, { ImageDetailsProps } from "./ImageDetails"; import { calculateScale } from "../../_helpers/scale.helper"; import TestStatusChip from "../TestStatusChip"; -const PREFIX = "TestDetailsModal"; - -const classes = { - header: `${PREFIX}-header`, - footer: `${PREFIX}-footer`, - scaleActions: `${PREFIX}-scaleActions`, - testRunActions: `${PREFIX}-testRunActions`, - testRunName: `${PREFIX}-testRunName`, - closeIcon: `${PREFIX}-closeIcon`, - testRunDetails: `${PREFIX}-testRunDetails`, - drawAreaContainer: `${PREFIX}-drawAreaContainer`, - drawAreaItem: `${PREFIX}-drawAreaItem`, - imageToolbar: `${PREFIX}-imageToolbar`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ - [`& .${classes.header}`]: { +const useStyles = makeStyles(() => ({ + header: { position: "relative", textAlign: "left", background: "#efefef", paddingLeft: 8, - paddingBottom: 8, }, - - [`& .${classes.footer}`]: { + footer: { background: "#efefef", }, - - [`& .${classes.scaleActions}`]: { + scaleActions: { display: "flex", alignItems: "center", }, - - [`& .${classes.testRunActions}`]: { + testRunActions: { display: "flex", alignItems: "center", alignContent: "center", }, - - [`& .${classes.testRunName}`]: { + testRunName: { fontWeight: 300, }, - - [`& .${classes.closeIcon}`]: { + closeIcon: { position: "absolute", right: "8px", }, - - [`& .${classes.testRunDetails}`]: { + testRunDetails: { paddingLeft: 8, }, - - [`& .${classes.drawAreaContainer}`]: { + drawAreaContainer: { width: "100%", height: "100%", }, - - [`& .${classes.drawAreaItem}`]: { + drawAreaItem: { padding: "0 4px", height: "100%", }, - - [`& .${classes.imageToolbar}`]: { + imageToolbar: { paddingLeft: 5, height: 52, }, @@ -146,6 +120,7 @@ const TestDetailsModal: React.FunctionComponent = ({ handleNext, handleClose, }) => { + const classes = useStyles(); const { enqueueSnackbar } = useSnackbar(); const testRunDispatch = useTestRunDispatch(); @@ -626,7 +601,11 @@ const TestDetailsModal: React.FunctionComponent = ({ - + @@ -683,7 +662,7 @@ const TestDetailsModal: React.FunctionComponent = ({ ); return ( - + <> {header()} {processing && } @@ -828,7 +807,7 @@ const TestDetailsModal: React.FunctionComponent = ({ applyIgnoreArea(); }} /> - + ); }; diff --git a/src/components/TestDetailsDialog/index.tsx b/src/components/TestDetailsDialog/index.tsx index 9ff8ba63..376a2abd 100644 --- a/src/components/TestDetailsDialog/index.tsx +++ b/src/components/TestDetailsDialog/index.tsx @@ -1,5 +1,5 @@ import { Dialog, Typography } from "@mui/material"; -import { styled } from "@mui/material/styles"; +import { styled } from '@mui/material/styles'; import React from "react"; import { useNavigate } from "react-router"; import { useBuildState, useTestRunState } from "../../contexts"; @@ -8,19 +8,20 @@ import { BaseModal } from "../BaseModal"; import TestDetailsModal from "./TestDetailsModal"; import { TestRun } from "../../types"; -const PREFIX = "TestDetailsDialog"; +const PREFIX = 'TestDetailsDialog'; const classes = { - modal: `${PREFIX}-modal`, + modal: `${PREFIX}-modal` }; const StyledDialog = styled(Dialog)(() => ({ [`&.${classes.modal}`]: { margin: "20px 10px 10px 10px", - }, + } })); export const TestDetailsDialog: React.FunctionComponent = () => { + const { selectedTestRun, touched, diff --git a/src/components/TestRunList/StatusFilterOperators.tsx b/src/components/TestRunList/StatusFilterOperators.tsx index 627c5ac2..120320a7 100644 --- a/src/components/TestRunList/StatusFilterOperators.tsx +++ b/src/components/TestRunList/StatusFilterOperators.tsx @@ -11,15 +11,12 @@ import { GridFilterItem, GridCellParams, GridFilterOperator, - GridFilterInputValueProps, + GridFilterInputValueProps } from "@mui/x-data-grid"; import { TestStatus, TestRun } from "../../types"; -const StatusInputComponent = ({ - item, - applyValue, -}: GridFilterInputValueProps) => { +const StatusInputComponent = ({ item, applyValue }: GridFilterInputValueProps) => { const { testRuns } = useTestRunState(); const handleFilterChange = (event: SelectChangeEvent) => { @@ -29,9 +26,7 @@ const StatusInputComponent = ({ }); }; - const filterOptions: TestStatus[] = testRuns.map( - (item: TestRun) => item.status, - ); + const filterOptions: TestStatus[] = testRuns.map((item: TestRun) => item.status); return ( @@ -56,7 +51,7 @@ const StatusInputComponent = ({ ); }; -export const StatusFilterOperators: GridFilterOperator[] = [ +export const StatusFilterOperators: GridFilterOperator[] = [ ...getGridStringOperators() .filter((operator) => operator.value === "equals") .map((operator) => ({ diff --git a/src/components/TestRunList/TagFilterOperators.tsx b/src/components/TestRunList/TagFilterOperators.tsx index ebbd575d..2e4179f4 100644 --- a/src/components/TestRunList/TagFilterOperators.tsx +++ b/src/components/TestRunList/TagFilterOperators.tsx @@ -6,11 +6,7 @@ import { } from "@mui/material"; import React from "react"; import { useTestRunState } from "../../contexts"; -import { - getGridStringOperators, - GridFilterOperator, - GridFilterInputValueProps, -} from "@mui/x-data-grid"; +import { getGridStringOperators, GridFilterOperator, GridFilterInputValueProps } from "@mui/x-data-grid"; const TagInputComponent = ({ item, applyValue }: GridFilterInputValueProps) => { const { testRuns } = useTestRunState(); diff --git a/src/components/TestVariationList.tsx b/src/components/TestVariationList.tsx index b01a5cbd..3e9be225 100644 --- a/src/components/TestVariationList.tsx +++ b/src/components/TestVariationList.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { styled } from "@mui/material/styles"; import { TestVariation } from "../types"; import { Card, @@ -17,20 +16,13 @@ import { routes } from "../constants"; import { TestVariationDetails } from "./TestVariationDetails"; import { Delete } from "@mui/icons-material"; import { BaseModal } from "./BaseModal"; +import { makeStyles } from "@mui/styles"; -const PREFIX = "TestVariationList"; - -const classes = { - card: `${PREFIX}-card`, - media: `${PREFIX}-media`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")({ - [`& .${classes.card}`]: { +const useStyles = makeStyles({ + card: { maxWidth: 345, }, - [`& .${classes.media}`]: { + media: { height: 140, objectFit: "contain", }, @@ -45,6 +37,7 @@ const TestVariationList: React.FunctionComponent = ({ items, onDeleteClick, }) => { + const classes = useStyles(); const [selectedItem, setSelectedItem] = React.useState( null, ); @@ -54,7 +47,7 @@ const TestVariationList: React.FunctionComponent = ({ }; return ( - + <> {items.length === 0 && ( No variations @@ -103,7 +96,7 @@ const TestVariationList: React.FunctionComponent = ({ }} /> )} - + ); }; diff --git a/src/index.css b/src/index.css index 833f34be..7799f77b 100644 --- a/src/index.css +++ b/src/index.css @@ -5,8 +5,7 @@ body { font-family: Roboto, sans-serif; } -#root, -[data-cy-root] { +#root { height: 100%; } diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 3f5711c3..2db5f5e9 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -111,7 +111,7 @@ const ProfilePage = () => { onChange: ( event: React.ChangeEvent, ) => setFirstName(event.target.value), - "data-testId": "firstName", + "data-testid": "firstName", }} /> @@ -131,7 +131,7 @@ const ProfilePage = () => { onChange: ( event: React.ChangeEvent, ) => setLastName(event.target.value), - "data-testId": "lastName", + "data-testid": "lastName", }} /> @@ -151,7 +151,7 @@ const ProfilePage = () => { onChange: ( event: React.ChangeEvent, ) => setEmail(event.target.value), - "data-testId": "email", + "data-testid": "email", }} /> @@ -181,7 +181,7 @@ const ProfilePage = () => { type="submit" color="primary" variant="outlined" - data-testId="submit" + data-testid="submit" > Update @@ -216,7 +216,7 @@ const ProfilePage = () => { onChange: ( event: React.ChangeEvent, ) => setPassword(event.target.value), - "data-testId": "password", + "data-testid": "password", }} /> @@ -229,7 +229,7 @@ const ProfilePage = () => { type="submit" color="primary" variant="outlined" - data-testId="submit" + data-testid="submit" > Update diff --git a/src/pages/ProjectListPage.tsx b/src/pages/ProjectListPage.tsx index 9f278941..691d1b3e 100644 --- a/src/pages/ProjectListPage.tsx +++ b/src/pages/ProjectListPage.tsx @@ -183,7 +183,7 @@ const ProjectsListPage = () => { setProjectEditState(projectDispatch, project); }} size="large" - data-testId="delete" + data-testid="delete" > diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx index 5a2b946f..81f8279b 100644 --- a/src/pages/ProjectPage.tsx +++ b/src/pages/ProjectPage.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { styled } from "@mui/material/styles"; +import { makeStyles } from '@mui/styles'; import { Grid, Box } from "@mui/material"; import { useParams, useNavigate } from "react-router-dom"; import BuildList from "../components/BuildList"; @@ -16,20 +16,15 @@ import { } from "../constants"; import { buildProjectPageUrl } from "../_helpers/route.helpers"; -const PREFIX = "ProjectPage"; - -const classes = { - root: `${PREFIX}-root`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(() => ({ - [`& .${classes.root}`]: { +const useStyles = makeStyles(() => ({ + root: { height: "100%", }, })); + const ProjectPage = () => { + const classes = useStyles(); const { projectId } = useParams<{ projectId: string }>(); const navigate = useNavigate(); const helpDispatch = useHelpDispatch(); @@ -39,7 +34,7 @@ const ProjectPage = () => { }); return ( - + <> @@ -62,7 +57,7 @@ const ProjectPage = () => { - + ); }; diff --git a/src/pages/TestVariationDetailsPage.tsx b/src/pages/TestVariationDetailsPage.tsx index 0d39235c..c78a3489 100644 --- a/src/pages/TestVariationDetailsPage.tsx +++ b/src/pages/TestVariationDetailsPage.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { styled } from "@mui/material/styles"; import { useParams, useNavigate } from "react-router-dom"; import { TestVariation } from "../types"; import { testVariationService, staticService } from "../services"; @@ -22,22 +21,17 @@ import { useSnackbar } from "notistack"; import { formatDateTime } from "../_helpers/format.helper"; import TestStatusChip from "../components/TestStatusChip"; import { Baseline } from "../types/baseline"; +import { makeStyles } from "@mui/styles"; -const PREFIX = "TestVariationDetailsPage"; - -const classes = { - media: `${PREFIX}-media`, -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")({ - [`& .${classes.media}`]: { +const useStyles = makeStyles({ + media: { height: 600, objectFit: "contain", }, }); const TestVariationDetailsPage: React.FunctionComponent = () => { + const classes = useStyles(); const navigate = useNavigate(); const { enqueueSnackbar } = useSnackbar(); const { testVariationId } = useParams<{ testVariationId: string }>(); @@ -53,69 +47,67 @@ const TestVariationDetailsPage: React.FunctionComponent = () => { .catch((err) => enqueueSnackbar(err, { variant: "error", - }), + }) ); } }, [testVariationId, enqueueSnackbar]); return ( - - - - {testVariation && ( - - - - - {testVariation.baselines.map((baseline: Baseline) => ( - - - - - {baseline.testRun && ( - - )} - {baseline.user && ( - - {`${baseline.user.firstName} ${baseline.user.lastName} <${baseline.user.email}>`} - - )} + + + {testVariation && ( + + + + + {testVariation.baselines.map((baseline: Baseline) => ( + + + + + {baseline.testRun && ( + + )} + {baseline.user && ( - {formatDateTime(baseline.createdAt)} + {`${baseline.user.firstName} ${baseline.user.lastName} <${baseline.user.email}>`} - - - - - ))} - - )} - - - + )} + + {formatDateTime(baseline.createdAt)} + + + + + + ))} + + )} + + ); };