From ba9957302ae3d2b7d13db89eca3fde8ed8843615 Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 13 Nov 2022 13:30:34 +0900 Subject: [PATCH 1/4] Upgrade the version of react-router-dom --- ui/package-lock.json | 236 +++++++--------------------- ui/package.json | 4 +- ui/src/App.tsx | 37 ++--- ui/src/views/deployment/index.tsx | 17 +- ui/src/views/repo/index.tsx | 6 +- ui/src/views/repoDeploy/index.tsx | 13 +- ui/src/views/repoHome/index.tsx | 12 +- ui/src/views/repoLock/index.tsx | 12 +- ui/src/views/repoRollback/index.tsx | 12 +- ui/src/views/repoSettings/index.tsx | 16 +- 10 files changed, 122 insertions(+), 243 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 94f013ef..598d5b7b 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -24,7 +24,7 @@ "react-dom": "^17.0.2", "react-helmet": "^6.1.0", "react-redux": "^7.2.4", - "react-router-dom": "^5.2.0", + "react-router-dom": "^6.4.3", "react-scripts": "5.0.1", "web-vitals": "^1.1.2" }, @@ -35,7 +35,7 @@ "@types/react": "^17.0.8", "@types/react-dom": "^17.0.5", "@types/react-helmet": "^6.1.4", - "@types/react-router-dom": "^5.1.7", + "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^4.28.4", "@typescript-eslint/parser": "^4.28.4", "eslint": "^7.31.0", @@ -3507,6 +3507,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -4139,9 +4147,9 @@ } }, "node_modules/@types/history": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==", + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", "dev": true }, "node_modules/@types/hoist-non-react-statics": { @@ -4311,12 +4319,12 @@ } }, "node_modules/@types/react-router-dom": { - "version": "5.1.7", - "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz", - "integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", "dev": true, "dependencies": { - "@types/history": "*", + "@types/history": "^4.7.11", "@types/react": "*", "@types/react-router": "*" } @@ -9223,19 +9231,6 @@ "he": "bin/he" } }, - "node_modules/history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "dependencies": { - "@babel/runtime": "^7.1.2", - "loose-envify": "^1.2.0", - "resolve-pathname": "^3.0.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0", - "value-equal": "^1.0.1" - } - }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -13783,15 +13778,6 @@ "node": ">=4" } }, - "node_modules/mini-create-react-context": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", - "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", - "dependencies": { - "@babel/runtime": "^7.12.1", - "tiny-warning": "^1.0.3" - } - }, "node_modules/mini-css-extract-plugin": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz", @@ -16670,47 +16656,33 @@ } }, "node_modules/react-router": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", - "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", "dependencies": { - "@babel/runtime": "^7.1.2", - "history": "^4.9.0", - "hoist-non-react-statics": "^3.1.0", - "loose-envify": "^1.3.1", - "mini-create-react-context": "^0.4.0", - "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.2", - "react-is": "^16.6.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.0.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", - "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", "dependencies": { - "@babel/runtime": "^7.1.2", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.2.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" - } - }, - "node_modules/react-router/node_modules/isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" - }, - "node_modules/react-router/node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "dependencies": { - "isarray": "0.0.1" + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" } }, "node_modules/react-scripts": { @@ -17619,11 +17591,6 @@ "node": ">=4" } }, - "node_modules/resolve-pathname": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", - "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" - }, "node_modules/resolve-url-loader": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz", @@ -18853,16 +18820,6 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, - "node_modules/tiny-invariant": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", - "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" - }, - "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/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19295,11 +19252,6 @@ "node": ">=10.12.0" } }, - "node_modules/value-equal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", - "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" - }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -22681,6 +22633,11 @@ "reselect": "^4.1.5" } }, + "@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -23195,9 +23152,9 @@ } }, "@types/history": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==", + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", "dev": true }, "@types/hoist-non-react-statics": { @@ -23367,12 +23324,12 @@ } }, "@types/react-router-dom": { - "version": "5.1.7", - "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz", - "integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", "dev": true, "requires": { - "@types/history": "*", + "@types/history": "^4.7.11", "@types/react": "*", "@types/react-router": "*" } @@ -26995,19 +26952,6 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, - "history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "requires": { - "@babel/runtime": "^7.1.2", - "loose-envify": "^1.2.0", - "resolve-pathname": "^3.0.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0", - "value-equal": "^1.0.1" - } - }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -30377,15 +30321,6 @@ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" }, - "mini-create-react-context": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", - "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", - "requires": { - "@babel/runtime": "^7.12.1", - "tiny-warning": "^1.0.3" - } - }, "mini-css-extract-plugin": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz", @@ -32406,49 +32341,20 @@ "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, "react-router": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", - "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", - "requires": { - "@babel/runtime": "^7.1.2", - "history": "^4.9.0", - "hoist-non-react-statics": "^3.1.0", - "loose-envify": "^1.3.1", - "mini-create-react-context": "^0.4.0", - "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.2", - "react-is": "^16.6.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" - }, - "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" - }, - "path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "requires": { - "isarray": "0.0.1" - } - } + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", + "requires": { + "@remix-run/router": "1.0.3" } }, "react-router-dom": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", - "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", "requires": { - "@babel/runtime": "^7.1.2", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.2.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" } }, "react-scripts": { @@ -33091,11 +32997,6 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, - "resolve-pathname": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", - "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" - }, "resolve-url-loader": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz", @@ -34011,16 +33912,6 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, - "tiny-invariant": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", - "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" - }, - "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==" - }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -34326,11 +34217,6 @@ "source-map": "^0.7.3" } }, - "value-equal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", - "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" - }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/ui/package.json b/ui/package.json index a9c8fc55..5f5a9387 100644 --- a/ui/package.json +++ b/ui/package.json @@ -19,7 +19,7 @@ "react-dom": "^17.0.2", "react-helmet": "^6.1.0", "react-redux": "^7.2.4", - "react-router-dom": "^5.2.0", + "react-router-dom": "^6.4.3", "react-scripts": "5.0.1", "web-vitals": "^1.1.2" }, @@ -56,7 +56,7 @@ "@types/react": "^17.0.8", "@types/react-dom": "^17.0.5", "@types/react-helmet": "^6.1.4", - "@types/react-router-dom": "^5.1.7", + "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^4.28.4", "@typescript-eslint/parser": "^4.28.4", "eslint": "^7.31.0", diff --git a/ui/src/App.tsx b/ui/src/App.tsx index cbc6c047..9c25a2e5 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,5 +1,5 @@ import './App.less'; -import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './views/home'; import Repo from './views/repo'; @@ -12,29 +12,18 @@ function App(): JSX.Element { return (
- - - - - - - - - - - - - - - - - - - - - - - + + } + /> + } /> + } /> + } /> + } /> + } /> + } /> +
); diff --git a/ui/src/views/deployment/index.tsx b/ui/src/views/deployment/index.tsx index 558c8915..c5b5cc2a 100644 --- a/ui/src/views/deployment/index.tsx +++ b/ui/src/views/deployment/index.tsx @@ -1,9 +1,8 @@ import { useEffect } from 'react'; import { shallowEqual } from 'react-redux'; -import { useParams } from 'react-router-dom'; +import { Params, useParams } from 'react-router-dom'; import { Helmet } from 'react-helmet'; import { Button, PageHeader, Result, Row, Col } from 'antd'; - import { useAppSelector, useAppDispatch } from '../../redux/hooks'; import { deploymentSlice as slice, @@ -27,7 +26,6 @@ import { subscribeDeploymentStatusEvents, subscribeReviewEvents, } from '../../apis'; - import Main from '../main'; import HeaderBreadcrumb, { HeaderBreadcrumbProps } from './HeaderBreadcrumb'; import ReviewButton, { ReviewButtonProps } from './ReviewButton'; @@ -38,14 +36,15 @@ import DeploymentDescriptor, { import DeploymentStatusSteps from './DeploymentStatusSteps'; import Spin from '../../components/Spin'; +interface ParamsType extends Params { + namespace: string; + name: string; + number: string; +} + // It makes the view by binding the state to the deployment page. export default (): JSX.Element => { - const { namespace, name, number } = useParams<{ - namespace: string; - name: string; - number: string; - }>(); - + const { namespace, name, number } = useParams() as ParamsType; const { display, deployment, diff --git a/ui/src/views/repo/index.tsx b/ui/src/views/repo/index.tsx index d4f0d7cb..34d1508e 100644 --- a/ui/src/views/repo/index.tsx +++ b/ui/src/views/repo/index.tsx @@ -1,4 +1,4 @@ -import { useParams } from 'react-router-dom'; +import { Params, useParams } from 'react-router-dom'; import { Menu, Breadcrumb, Result } from 'antd'; import { shallowEqual } from 'react-redux'; import { useEffect } from 'react'; @@ -15,14 +15,14 @@ import RepoDeploy from '../repoDeploy'; import RepoRollabck from '../repoRollback'; import RepoSettings from '../repoSettings'; -interface Params { +interface ParamsTypes extends Params { namespace: string; name: string; tab: string; } export default (): JSX.Element => { - const { namespace, name, tab } = useParams(); + const { namespace, name, tab } = useParams() as ParamsTypes; const { display, repo } = useAppSelector((state) => state.repo, shallowEqual); const dispatch = useAppDispatch(); diff --git a/ui/src/views/repoDeploy/index.tsx b/ui/src/views/repoDeploy/index.tsx index 8937d609..6afe5ce9 100644 --- a/ui/src/views/repoDeploy/index.tsx +++ b/ui/src/views/repoDeploy/index.tsx @@ -1,8 +1,7 @@ import { useEffect, useState } from 'react'; import { shallowEqual } from 'react-redux'; -import { useParams } from 'react-router-dom'; +import { Params, useParams } from 'react-router-dom'; import { PageHeader, Result, Button } from 'antd'; - import { useAppSelector, useAppDispatch } from '../../redux/hooks'; import { DeploymentType, @@ -36,11 +35,13 @@ import DynamicPayloadModal, { const { actions } = repoDeploySlice; +interface ParamsType extends Params { + namespace: string; + name: string; +} + export default (): JSX.Element => { - const { namespace, name } = useParams<{ - namespace: string; - name: string; - }>(); + const { namespace, name } = useParams() as ParamsType; const { display, diff --git a/ui/src/views/repoHome/index.tsx b/ui/src/views/repoHome/index.tsx index 1fa99a73..cc552198 100644 --- a/ui/src/views/repoHome/index.tsx +++ b/ui/src/views/repoHome/index.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { useParams } from 'react-router-dom'; +import { Params, useParams } from 'react-router-dom'; import { shallowEqual } from 'react-redux'; import { PageHeader, Select } from 'antd'; @@ -17,11 +17,13 @@ import Pagination, { PaginationProps } from '../../components/Pagination'; const { Option } = Select; +interface ParamsType extends Params { + namespace: string; + name: string; +} + export default (): JSX.Element => { - const { namespace, name } = useParams<{ - namespace: string; - name: string; - }>(); + const { namespace, name } = useParams() as ParamsType; const { loading, deployments, envs, page } = useAppSelector( (state) => state.repoHome, diff --git a/ui/src/views/repoLock/index.tsx b/ui/src/views/repoLock/index.tsx index 6373f736..4bad369e 100644 --- a/ui/src/views/repoLock/index.tsx +++ b/ui/src/views/repoLock/index.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; import { shallowEqual } from 'react-redux'; -import { useParams } from 'react-router-dom'; +import { Params, useParams } from 'react-router-dom'; import { PageHeader, Button } from 'antd'; import { Result } from 'antd'; @@ -15,11 +15,13 @@ import { } from '../../redux/repoLock'; import LockList, { LockListProps } from './LockList'; +interface ParamsType extends Params { + namespace: string; + name: string; +} + export default (): JSX.Element => { - const { namespace, name } = useParams<{ - namespace: string; - name: string; - }>(); + const { namespace, name } = useParams() as ParamsType; const { display, config, locks } = useAppSelector( (state) => state.repoLock, diff --git a/ui/src/views/repoRollback/index.tsx b/ui/src/views/repoRollback/index.tsx index e026e793..4e62b980 100644 --- a/ui/src/views/repoRollback/index.tsx +++ b/ui/src/views/repoRollback/index.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { useParams } from 'react-router-dom'; +import { Params, useParams } from 'react-router-dom'; import { PageHeader, Result, Button } from 'antd'; import { shallowEqual } from 'react-redux'; @@ -17,11 +17,13 @@ import RollbackForm, { RollbackFormProps } from './RollbackForm'; const { actions } = repoRollbackSlice; +interface ParamsType extends Params { + namespace: string; + name: string; +} + export default (): JSX.Element => { - const { namespace, name } = useParams<{ - namespace: string; - name: string; - }>(); + const { namespace, name } = useParams() as ParamsType; const { display, config, envs, deployments, deploying } = useAppSelector( (state) => state.repoRollback, diff --git a/ui/src/views/repoSettings/index.tsx b/ui/src/views/repoSettings/index.tsx index 2eb8f2a0..552de949 100644 --- a/ui/src/views/repoSettings/index.tsx +++ b/ui/src/views/repoSettings/index.tsx @@ -1,25 +1,23 @@ import { useEffect } from 'react'; -import { useParams } from 'react-router-dom'; +import { Params, useParams } from 'react-router-dom'; import { shallowEqual } from 'react-redux'; import { PageHeader } from 'antd'; - import { useAppSelector, useAppDispatch } from '../../redux/hooks'; import { save, deactivate } from '../../redux/repoSettings'; import { init } from '../../redux/repoSettings'; - import SettingsForm, { SettingFormProps, SettingFormValues, } from './SettingsForm'; -export default (): JSX.Element => { - const { namespace, name } = useParams<{ - namespace: string; - name: string; - }>(); +interface ParamsType extends Params { + namespace: string; + name: string; +} +export default (): JSX.Element => { + const { namespace, name } = useParams() as ParamsType; const { repo } = useAppSelector((state) => state.repoSettings, shallowEqual); - const dispatch = useAppDispatch(); useEffect(() => { From 6d18ae8000d79b72b059dfee63c6d382415309ca Mon Sep 17 00:00:00 2001 From: noah Date: Sun, 13 Nov 2022 19:51:26 +0900 Subject: [PATCH 2/4] Replace the state into the search params --- ui/src/redux/repoHome.ts | 15 ++------- ui/src/views/repoHome/index.tsx | 54 ++++++++++++++++++++++++--------- 2 files changed, 42 insertions(+), 27 deletions(-) diff --git a/ui/src/redux/repoHome.ts b/ui/src/redux/repoHome.ts index d8cfd27d..2fdd7c24 100644 --- a/ui/src/redux/repoHome.ts +++ b/ui/src/redux/repoHome.ts @@ -38,10 +38,10 @@ export const fetchEnvs = createAsyncThunk< export const fetchDeployments = createAsyncThunk< Deployment[], - void, + { env: string; page: number }, { state: { repoHome: RepoHomeState } } ->('repoHome/fetchDeployments', async (_, { getState }) => { - const { namespace, name, env, page } = getState().repoHome; +>('repoHome/fetchDeployments', async ({ env, page }, { getState }) => { + const { namespace, name } = getState().repoHome; const deployments = await listDeployments( namespace, @@ -65,15 +65,6 @@ export const repoHomeSlice = createSlice({ state.namespace = action.payload.namespace; state.name = action.payload.name; }, - setEnv: (state, action: PayloadAction) => { - state.env = action.payload; - }, - increasePage: (state) => { - state.page = state.page + 1; - }, - decreasePage: (state) => { - state.page = state.page - 1; - }, }, extraReducers: (builder) => { builder diff --git a/ui/src/views/repoHome/index.tsx b/ui/src/views/repoHome/index.tsx index cc552198..f7ed9734 100644 --- a/ui/src/views/repoHome/index.tsx +++ b/ui/src/views/repoHome/index.tsx @@ -1,8 +1,7 @@ import { useEffect } from 'react'; -import { Params, useParams } from 'react-router-dom'; +import { Params, useParams, useSearchParams } from 'react-router-dom'; import { shallowEqual } from 'react-redux'; import { PageHeader, Select } from 'antd'; - import { useAppSelector, useAppDispatch } from '../../redux/hooks'; import { repoHomeSlice as slice, @@ -10,7 +9,6 @@ import { fetchDeployments, perPage, } from '../../redux/repoHome'; - import ActivityLogs, { ActivityLogsProps } from './ActivityLogs'; import Spin from '../../components/Spin'; import Pagination, { PaginationProps } from '../../components/Pagination'; @@ -22,43 +20,67 @@ interface ParamsType extends Params { name: string; } +const parseSearchParams = ( + searchParams: URLSearchParams +): { env: string; page: number } => { + return { + env: searchParams.get('env') as string, + page: parseInt(searchParams.get('page') as string, 10), + }; +}; + export default (): JSX.Element => { const { namespace, name } = useParams() as ParamsType; - - const { loading, deployments, envs, page } = useAppSelector( + const [searchParams, setSearchParams] = useSearchParams({ + env: '', + page: '1', + }); + const { env, page } = parseSearchParams(searchParams); + const { loading, deployments, envs } = useAppSelector( (state) => state.repoHome, shallowEqual ); - const dispatch = useAppDispatch(); useEffect(() => { const f = async () => { await dispatch(slice.actions.init({ namespace, name })); await dispatch(fetchEnvs()); - await dispatch(fetchDeployments()); + await dispatch(fetchDeployments({ env, page })); }; f(); - }, [dispatch]); + }, []); + + // Fetch deployments when search parameters change. + useEffect(() => { + dispatch(fetchDeployments({ env, page })); + }, [env, page]); const onChangeEnv = (env: string) => { - dispatch(slice.actions.setEnv(env)); - dispatch(fetchDeployments()); + // When the environment is changed, + // unconditionally return to the first page. + setSearchParams({ env, page: '1' }); }; const onClickPrev = () => { - dispatch(slice.actions.decreasePage()); - dispatch(fetchDeployments()); + // Subtract one for the page param. + const prevPage = page != 1 ? page - 1 : 1; + searchParams.set('page', prevPage.toString()); + setSearchParams(searchParams); }; const onClickNext = () => { - dispatch(slice.actions.increasePage()); - dispatch(fetchDeployments()); + // Plus one for the page param. + const nextPage = page + 1; + searchParams.set('page', nextPage.toString()); + setSearchParams(searchParams); }; + return ( { interface RepoHomeProps extends ActivityLogsProps, PaginationProps { loading: boolean; + env: string; envs: string[]; onChangeEnv(env: string): void; } @@ -80,6 +103,7 @@ export function RepoHome({ loading, deployments, // Environment Selector + env, envs, onChangeEnv, // Pagination @@ -97,7 +121,7 @@ export function RepoHome({