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/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/activities/index.tsx b/ui/src/views/activities/index.tsx
index 0d0d9803..6799167f 100644
--- a/ui/src/views/activities/index.tsx
+++ b/ui/src/views/activities/index.tsx
@@ -40,6 +40,7 @@ export default (): JSX.Element => {
}: SearchActivitiesValues) => {
if (period) {
console.debug('Set search options.', period, productionOnly);
+ // TODO: Replace the state of the query into the URL query parameter.
dispatch(
actions.setSearchOptions({
startDate: period[0].toDate(),
diff --git a/ui/src/views/deployment/index.tsx b/ui/src/views/deployment/index.tsx
index 558c8915..bb150696 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, useNavigate, 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,
@@ -169,8 +168,10 @@ function DeploymentPage({
onClickReject,
onClickDeploy,
}: DeploymentPageProps): JSX.Element {
+ const navigate = useNavigate();
+
const onBack = () => {
- window.location.href = `/${namespace}/${name}`;
+ navigate(-1);
};
return (
diff --git a/ui/src/views/home/index.tsx b/ui/src/views/home/index.tsx
index f566beb9..6034c456 100644
--- a/ui/src/views/home/index.tsx
+++ b/ui/src/views/home/index.tsx
@@ -29,6 +29,7 @@ export default (): JSX.Element => {
}, [dispatch]);
const search = (q: string) => {
+ // TODO: Replace the state of the query into the URL query parameter.
dispatch(actions.setQ(q));
dispatch(actions.setFirstPage());
dispatch(listRepos());
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 8ed773d1..4c1c9537 100644
--- a/ui/src/views/repoDeploy/index.tsx
+++ b/ui/src/views/repoDeploy/index.tsx
@@ -1,6 +1,6 @@
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 { RedoOutlined } from '@ant-design/icons';
import { useAppSelector, useAppDispatch } from '../../redux/hooks';
@@ -36,11 +36,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..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 { 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,53 +9,78 @@ import {
fetchDeployments,
perPage,
} from '../../redux/repoHome';
-
import ActivityLogs, { ActivityLogsProps } from './ActivityLogs';
import Spin from '../../components/Spin';
import Pagination, { PaginationProps } from '../../components/Pagination';
const { Option } = Select;
-export default (): JSX.Element => {
- const { namespace, name } = useParams<{
- namespace: string;
- name: string;
- }>();
+interface ParamsType extends Params {
+ namespace: string;
+ 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),
+ };
+};
- const { loading, deployments, envs, page } = useAppSelector(
+export default (): JSX.Element => {
+ const { namespace, name } = useParams() as ParamsType;
+ 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;
}
@@ -78,6 +103,7 @@ export function RepoHome({
loading,
deployments,
// Environment Selector
+ env,
envs,
onChangeEnv,
// Pagination
@@ -95,7 +121,7 @@ export function RepoHome({