diff --git a/CHANGELOG.md b/CHANGELOG.md index 0bf303b3..ab0d574b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,8 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), * [#570](https://github.com/shlinkio/shlink-web-client/pull/570) Added new section to load non-orphan visits all together. ### Changed +* [#543](https://github.com/shlinkio/shlink-web-client/pull/543) Redesigned settings section. * [#567](https://github.com/shlinkio/shlink-web-client/pull/567) Improved Shlink 3.0.0 compatibility by checking the `INVALID_SHORT_URL_DELETION` error code when deleting short URLs. * [#524](https://github.com/shlinkio/shlink-web-client/pull/524) Updated to react-router v6. +* [#579](https://github.com/shlinkio/shlink-web-client/pull/579) Replaced react-color with react-colorful. ### Deprecated * *Nothing* diff --git a/package-lock.json b/package-lock.json index 104c475f..9e297dad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "ramda": "^0.27.1", "react": "^17.0.1", "react-chartjs-2": "^3.0.4", - "react-color": "^2.19.3", + "react-colorful": "^5.5.1", "react-copy-to-clipboard": "^5.0.2", "react-datepicker": "^3.6.0", "react-dom": "^17.0.1", @@ -104,7 +104,7 @@ "object-assign": "^4.1.1", "optimize-css-assets-webpack-plugin": "^5.0.4", "pnp-webpack-plugin": "^1.6.4", - "postcss": "^8.1.7", + "postcss": "^8.2.13", "postcss-flexbugs-fixes": "^4.2.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", @@ -2567,14 +2567,6 @@ "react": ">=0.14.0" } }, - "node_modules/@icons/material": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", - "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", - "peerDependencies": { - "react": "*" - } - }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -9206,9 +9198,9 @@ } }, "node_modules/colorette": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz", - "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", + "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==", "dev": true }, "node_modules/combined-stream": { @@ -18534,28 +18526,6 @@ "node": ">= 0.8.0" } }, - "node_modules/line-column": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/line-column/-/line-column-1.0.2.tgz", - "integrity": "sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=", - "dev": true, - "dependencies": { - "isarray": "^1.0.0", - "isobject": "^2.0.0" - } - }, - "node_modules/line-column/node_modules/isobject": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz", - "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=", - "dev": true, - "dependencies": { - "isarray": "1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/lines-and-columns": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz", @@ -18664,11 +18634,6 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, - "node_modules/lodash-es": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", - "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" - }, "node_modules/lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -18997,11 +18962,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/material-colors": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", - "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" - }, "node_modules/mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -19616,9 +19576,9 @@ "optional": true }, "node_modules/nanoid": { - "version": "3.1.16", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz", - "integrity": "sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", + "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" @@ -21184,14 +21144,13 @@ } }, "node_modules/postcss": { - "version": "8.1.7", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.7.tgz", - "integrity": "sha512-llCQW1Pz4MOPwbZLmOddGM9eIJ8Bh7SZ2Oj5sxZva77uVaotYDsYTch1WBTNu7fUY0fpWp0fdt7uW40D4sRiiQ==", + "version": "8.2.13", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz", + "integrity": "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==", "dev": true, "dependencies": { - "colorette": "^1.2.1", - "line-column": "^1.0.2", - "nanoid": "^3.1.16", + "colorette": "^1.2.2", + "nanoid": "^3.1.22", "source-map": "^0.6.1" }, "engines": { @@ -26503,21 +26462,13 @@ "react": "^16.8.0 || ^17.0.0" } }, - "node_modules/react-color": { - "version": "2.19.3", - "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", - "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", - "dependencies": { - "@icons/material": "^0.2.4", - "lodash": "^4.17.15", - "lodash-es": "^4.17.15", - "material-colors": "^1.2.1", - "prop-types": "^15.5.10", - "reactcss": "^1.2.0", - "tinycolor2": "^1.4.1" - }, + "node_modules/react-colorful": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", + "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", "peerDependencies": { - "react": "*" + "react": ">=16.8.0", + "react-dom": ">=16.8.0" } }, "node_modules/react-copy-to-clipboard": { @@ -26989,14 +26940,6 @@ "react-dom": ">=15.0.0" } }, - "node_modules/reactcss": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", - "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", - "dependencies": { - "lodash": "^4.0.1" - } - }, "node_modules/reactstrap": { "version": "8.9.0", "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz", @@ -31626,14 +31569,6 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, - "node_modules/tinycolor2": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", - "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", - "engines": { - "node": "*" - } - }, "node_modules/tmp": { "version": "0.0.33", "resolved": "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz", @@ -33782,9 +33717,9 @@ } }, "node_modules/webpack-dev-server/node_modules/ws": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", - "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", + "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==", "dev": true, "dependencies": { "async-limiter": "~1.0.0" @@ -34561,9 +34496,9 @@ } }, "node_modules/ws": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz", - "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==", + "version": "7.5.7", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz", + "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==", "dev": true, "engines": { "node": ">=8.3.0" @@ -36622,12 +36557,6 @@ "warning": "^4.0.3" } }, - "@icons/material": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", - "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", - "requires": {} - }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -41834,9 +41763,9 @@ } }, "colorette": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz", - "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", + "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==", "dev": true }, "combined-stream": { @@ -49019,27 +48948,6 @@ "type-check": "~0.4.0" } }, - "line-column": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/line-column/-/line-column-1.0.2.tgz", - "integrity": "sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=", - "dev": true, - "requires": { - "isarray": "^1.0.0", - "isobject": "^2.0.0" - }, - "dependencies": { - "isobject": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz", - "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=", - "dev": true, - "requires": { - "isarray": "1.0.0" - } - } - } - }, "lines-and-columns": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz", @@ -49128,11 +49036,6 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, - "lodash-es": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", - "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" - }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -49406,11 +49309,6 @@ "repeat-string": "^1.0.0" } }, - "material-colors": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", - "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" - }, "mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -49919,9 +49817,9 @@ "optional": true }, "nanoid": { - "version": "3.1.16", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz", - "integrity": "sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", + "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", "dev": true }, "nanomatch": { @@ -51122,14 +51020,13 @@ "dev": true }, "postcss": { - "version": "8.1.7", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.7.tgz", - "integrity": "sha512-llCQW1Pz4MOPwbZLmOddGM9eIJ8Bh7SZ2Oj5sxZva77uVaotYDsYTch1WBTNu7fUY0fpWp0fdt7uW40D4sRiiQ==", + "version": "8.2.13", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz", + "integrity": "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==", "dev": true, "requires": { - "colorette": "^1.2.1", - "line-column": "^1.0.2", - "nanoid": "^3.1.16", + "colorette": "^1.2.2", + "nanoid": "^3.1.22", "source-map": "^0.6.1" } }, @@ -55346,19 +55243,11 @@ "lodash": "^4.17.19" } }, - "react-color": { - "version": "2.19.3", - "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", - "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", - "requires": { - "@icons/material": "^0.2.4", - "lodash": "^4.17.15", - "lodash-es": "^4.17.15", - "material-colors": "^1.2.1", - "prop-types": "^15.5.10", - "reactcss": "^1.2.0", - "tinycolor2": "^1.4.1" - } + "react-colorful": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", + "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", + "requires": {} }, "react-copy-to-clipboard": { "version": "5.0.2", @@ -55710,14 +55599,6 @@ "react-lifecycles-compat": "^3.0.4" } }, - "reactcss": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", - "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", - "requires": { - "lodash": "^4.0.1" - } - }, "reactstrap": { "version": "8.9.0", "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz", @@ -59307,11 +59188,6 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, - "tinycolor2": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", - "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" - }, "tmp": { "version": "0.0.33", "resolved": "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz", @@ -61005,9 +60881,9 @@ } }, "ws": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", - "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", + "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==", "dev": true, "requires": { "async-limiter": "~1.0.0" @@ -61598,9 +61474,9 @@ } }, "ws": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz", - "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==", + "version": "7.5.7", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz", + "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==", "dev": true, "requires": {} }, diff --git a/package.json b/package.json index 3d4c6102..315670b5 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "ramda": "^0.27.1", "react": "^17.0.1", "react-chartjs-2": "^3.0.4", - "react-color": "^2.19.3", + "react-colorful": "^5.5.1", "react-copy-to-clipboard": "^5.0.2", "react-datepicker": "^3.6.0", "react-dom": "^17.0.1", @@ -119,7 +119,7 @@ "object-assign": "^4.1.1", "optimize-css-assets-webpack-plugin": "^5.0.4", "pnp-webpack-plugin": "^1.6.4", - "postcss": "^8.1.7", + "postcss": "^8.2.13", "postcss-flexbugs-fixes": "^4.2.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", diff --git a/src/app/App.tsx b/src/app/App.tsx index 499841f5..afe7c2e9 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -47,7 +47,7 @@ const App = (
} /> - } /> + } /> } /> } /> } /> diff --git a/src/common/MainHeader.tsx b/src/common/MainHeader.tsx index 4ce52d68..e4dc28b6 100644 --- a/src/common/MainHeader.tsx +++ b/src/common/MainHeader.tsx @@ -31,7 +31,7 @@ const MainHeader = (ServersDropdown: FC) => () => {
- - setColor(hex)} /> + + = ({ children, ...rest }) => ( + + {children} + +); + +export const NavPills: FC<{ fill?: boolean }> = ({ children, fill = false }) => ( + + + +); diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx index ff52b15c..b9701765 100644 --- a/src/visits/VisitsStats.tsx +++ b/src/visits/VisitsStats.tsx @@ -1,11 +1,10 @@ import { isEmpty, propEq, values } from 'ramda'; import { useState, useEffect, useMemo, FC, useRef } from 'react'; -import { Button, Card, Nav, NavLink, Progress, Row } from 'reactstrap'; +import { Button, Progress, Row } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie, faFileDownload } from '@fortawesome/free-solid-svg-icons'; import { IconDefinition } from '@fortawesome/fontawesome-common-types'; -import { Route, Routes, NavLink as RouterNavLink, Navigate } from 'react-router-dom'; -import { Location } from 'history'; +import { Route, Routes, Navigate } from 'react-router-dom'; import classNames from 'classnames'; import { DateRangeSelector } from '../utils/dates/DateRangeSelector'; import Message from '../utils/Message'; @@ -16,6 +15,7 @@ import { Settings } from '../settings/reducers/settings'; import { SelectedServer } from '../servers/data'; import { supportsBotVisits } from '../utils/helpers/features'; import { prettify } from '../utils/helpers/numbers'; +import { NavPillItem, NavPills } from '../utils/NavPills'; import LineChartCard from './charts/LineChartCard'; import VisitsTable from './VisitsTable'; import { NormalizedOrphanVisit, NormalizedVisit, VisitsFilter, VisitsInfo, VisitsParams } from './types'; @@ -25,7 +25,6 @@ import { VisitsFilterDropdown } from './helpers/VisitsFilterDropdown'; import { HighlightableProps, highlightedVisitsToStats } from './types/helpers'; import { DoughnutChartCard } from './charts/DoughnutChartCard'; import { SortableBarChartCard } from './charts/SortableBarChartCard'; -import './VisitsStats.scss'; export interface VisitsStatsProps { getVisits: (params: VisitsParams, doIntervalFallback?: boolean) => void; @@ -55,19 +54,6 @@ const sections: Record = { let selectedBar: string | undefined; -const VisitsNavLink: FC = ({ subPath, title, icon, to }) => ( - pathname.endsWith(`visits${subPath}`)} - replace - > - - {title} - -); - const VisitsStats: FC = ({ children, visitsInfo, @@ -157,12 +143,14 @@ const VisitsStats: FC = ({ return ( <> - - - + + {Object.values(sections).map(({ title, icon, subPath }, index) => ( + + + {title} + + ))} + ', () => { const routes = wrapper.find(Route); const expectedPaths = [ undefined, - '/settings', + '/settings/*', '/manage-servers', '/server/create', '/server/:serverId/edit', diff --git a/test/common/MainHeader.test.tsx b/test/common/MainHeader.test.tsx index b1fa282e..d472a505 100644 --- a/test/common/MainHeader.test.tsx +++ b/test/common/MainHeader.test.tsx @@ -35,6 +35,8 @@ describe('', () => { [ '/foo', false ], [ '/bar', false ], [ '/settings', true ], + [ '/settings/foo', true ], + [ '/settings/bar', true ], ])('sets link to settings as active only when current path is settings', (currentPath, isActive) => { const wrapper = createWrapper(currentPath); const settingsLink = wrapper.find(NavLink); diff --git a/test/settings/Settings.test.tsx b/test/settings/Settings.test.tsx index ffd9ed39..c39b104b 100644 --- a/test/settings/Settings.test.tsx +++ b/test/settings/Settings.test.tsx @@ -1,6 +1,8 @@ import { shallow } from 'enzyme'; +import { Route } from 'react-router-dom'; import createSettings from '../../src/settings/Settings'; import { NoMenuLayout } from '../../src/common/NoMenuLayout'; +import { NavPillItem } from '../../src/utils/NavPills'; describe('', () => { const Component = () => null; @@ -9,10 +11,19 @@ describe('', () => { it('renders a no-menu layout with the expected settings sections', () => { const wrapper = shallow(); const layout = wrapper.find(NoMenuLayout); - const sections = wrapper.find('SettingsSections'); + const sections = wrapper.find(Route); expect(layout).toHaveLength(1); - expect(sections).toHaveLength(1); - expect((sections.prop('items') as any[]).flat()).toHaveLength(6); + expect(sections).toHaveLength(4); + }); + + it('renders expected menu', () => { + const wrapper = shallow(); + const items = wrapper.find(NavPillItem); + + expect(items).toHaveLength(3); + expect(items.first().prop('to')).toEqual('general'); + expect(items.at(1).prop('to')).toEqual('short-urls'); + expect(items.last().prop('to')).toEqual('secondary-items'); }); }); diff --git a/test/tags/helpers/EditTagModal.test.tsx b/test/tags/helpers/EditTagModal.test.tsx index 54d54fa0..790e7284 100644 --- a/test/tags/helpers/EditTagModal.test.tsx +++ b/test/tags/helpers/EditTagModal.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; import { Button, Input, Modal, ModalHeader, Popover } from 'reactstrap'; -import { ChromePicker } from 'react-color'; +import { HexColorPicker } from 'react-colorful'; import { TagEdition } from '../../../src/tags/reducers/tagEdit'; import createEditTagModal from '../../../src/tags/helpers/EditTagModal'; import ColorGenerator from '../../../src/utils/services/ColorGenerator'; @@ -92,9 +92,9 @@ describe('', () => { it('changes color when changing on color picker', () => { const wrapper = createWrapper(); - expect(wrapper.find(ChromePicker).prop('color')).toEqual('red'); - wrapper.find(ChromePicker).simulate('change', { hex: 'blue' }); - expect(wrapper.find(ChromePicker).prop('color')).toEqual('blue'); + expect(wrapper.find(HexColorPicker).prop('color')).toEqual('red'); + wrapper.find(HexColorPicker).simulate('change', 'blue'); + expect(wrapper.find(HexColorPicker).prop('color')).toEqual('blue'); }); it('allows toggling popover with different mechanisms', () => { diff --git a/test/utils/NavPills.test.tsx b/test/utils/NavPills.test.tsx new file mode 100644 index 00000000..5f015432 --- /dev/null +++ b/test/utils/NavPills.test.tsx @@ -0,0 +1,41 @@ +import { shallow } from 'enzyme'; +import { Card, Nav } from 'reactstrap'; +import { NavPillItem, NavPills } from '../../src/utils/NavPills'; + +describe('', () => { + it.each([ + [ 'Foo' ], + [ Hi! ], + [[ , Hi! ]], + ])('throws error when any of the children is not a NavPillItem', (children) => { + expect.assertions(1); + + try { + shallow({children}); + } catch (e: any) { + expect(e.message).toEqual('Only NavPillItem children are allowed inside NavPills.'); + } + }); + + it.each([ + [ undefined ], + [ true ], + [ false ], + ])('renders provided items', (fill) => { + const wrapper = shallow( + + 1 + 2 + 3 + , + ); + const card = wrapper.find(Card); + const nav = wrapper.find(Nav); + + expect(card).toHaveLength(1); + expect(card.prop('body')).toEqual(true); + expect(nav).toHaveLength(1); + expect(nav.prop('pills')).toEqual(true); + expect(nav.prop('fill')).toEqual(!!fill); + }); +});