webui: upgrade react-router

Quentin Gliech created

Change summary

webui/package-lock.json                    | 314 +++++++----------------
webui/package.json                         |   5 
webui/src/App.tsx                          |  16 
webui/src/pages/bug/BugQuery.tsx           |  11 
webui/src/pages/identity/IdentityQuery.tsx |  11 
webui/src/pages/list/Filter.tsx            |   7 
webui/src/pages/list/FilterToolbar.tsx     |   4 
webui/src/pages/list/ListQuery.tsx         |   6 
webui/src/pages/new/NewBugPage.tsx         |   6 
9 files changed, 127 insertions(+), 253 deletions(-)

Detailed changes

webui/package-lock.json 🔗

@@ -17,16 +17,13 @@
         "@types/node": "^17.0.18",
         "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.11",
-        "@types/react-router": "^5.1.18",
-        "@types/react-router-dom": "^5.3.3",
         "clsx": "^1.1.1",
         "graphql": "^16.3.0",
         "moment": "^2.29.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-moment": "^1.1.1",
-        "react-router": "^5.2.1",
-        "react-router-dom": "^5.3.0",
+        "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.0",
         "rehype-react": "^7.0.4",
         "remark-gemoji": "^7.0.1",
@@ -2183,9 +2180,9 @@
       "dev": true
     },
     "node_modules/@graphql-codegen/cli": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-2.6.1.tgz",
-      "integrity": "sha512-bIpnujBEg/WRv0wl4W309hNUDK+glnSOkKQiuT2LpSN0nvJNsJsi1k4NCA4SGWs5ZbyLkWflfOXxEVkv5fVWZA==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-2.6.2.tgz",
+      "integrity": "sha512-UO75msoVgvLEvfjCezM09cQQqp32+mR8Ma1ACsBpr7nroFvHbgcu2ulx1cMovg4sxDBCsvd9Eq/xOOMpARUxtw==",
       "dev": true,
       "dependencies": {
         "@graphql-codegen/core": "2.5.1",
@@ -2219,7 +2216,7 @@
         "listr": "^0.14.3",
         "listr-update-renderer": "^0.5.0",
         "log-symbols": "^4.0.0",
-        "minimatch": "^3.0.4",
+        "minimatch": "^4.0.0",
         "mkdirp": "^1.0.4",
         "string-env-interpolation": "^1.0.1",
         "ts-log": "^2.2.3",
@@ -2541,6 +2538,18 @@
         "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
       }
     },
+    "node_modules/@graphql-codegen/cli/node_modules/graphql-config/node_modules/minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@graphql-codegen/cli/node_modules/inquirer": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.0.tgz",
@@ -2566,6 +2575,18 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/@graphql-codegen/cli/node_modules/minimatch": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-4.2.1.tgz",
+      "integrity": "sha512-9Uq1ChtSZO+Mxa/CL1eGizn2vRn3MlLgzhT0Iz8zaY8NdvxvB0d5QdPFmCKf7JKA9Lerx5vRrnwO03jsSfGG9g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@graphql-codegen/cli/node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -4540,11 +4561,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/@types/history": {
-      "version": "4.7.11",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
-    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -4686,25 +4702,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-router": {
-      "version": "5.1.18",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz",
-      "integrity": "sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==",
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
@@ -10661,19 +10658,6 @@
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
       "dev": true
     },
-    "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",
@@ -11597,11 +11581,6 @@
         "node": ">=8"
       }
     },
-    "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/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -14166,19 +14145,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"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/mini-css-extract-plugin": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.3.tgz",
@@ -15017,14 +14983,6 @@
         "node": ">=0.10.0"
       }
     },
-    "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"
-      }
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -16715,41 +16673,36 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-router": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
-      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+    "node_modules/react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
       "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "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"
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-router-dom": {
+    "node_modules/react-router-dom/node_modules/history": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
-      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
+    "node_modules/react-router-dom/node_modules/react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
       "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.1",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "history": "^5.2.0"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
       }
     },
     "node_modules/react-scripts": {
@@ -17416,11 +17369,6 @@
         "node": ">=8"
       }
     },
-    "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",
@@ -18927,11 +18875,6 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
-    "node_modules/tiny-invariant": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
-    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -19632,11 +19575,6 @@
       "integrity": "sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=",
       "dev": true
     },
-    "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/value-or-promise": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/value-or-promise/-/value-or-promise-1.0.11.tgz",
@@ -22122,9 +22060,9 @@
       }
     },
     "@graphql-codegen/cli": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-2.6.1.tgz",
-      "integrity": "sha512-bIpnujBEg/WRv0wl4W309hNUDK+glnSOkKQiuT2LpSN0nvJNsJsi1k4NCA4SGWs5ZbyLkWflfOXxEVkv5fVWZA==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-2.6.2.tgz",
+      "integrity": "sha512-UO75msoVgvLEvfjCezM09cQQqp32+mR8Ma1ACsBpr7nroFvHbgcu2ulx1cMovg4sxDBCsvd9Eq/xOOMpARUxtw==",
       "dev": true,
       "requires": {
         "@graphql-codegen/core": "2.5.1",
@@ -22158,7 +22096,7 @@
         "listr": "^0.14.3",
         "listr-update-renderer": "^0.5.0",
         "log-symbols": "^4.0.0",
-        "minimatch": "^3.0.4",
+        "minimatch": "^4.0.0",
         "mkdirp": "^1.0.4",
         "string-env-interpolation": "^1.0.1",
         "ts-log": "^2.2.3",
@@ -22396,6 +22334,17 @@
             "cosmiconfig-toml-loader": "1.0.0",
             "minimatch": "3.0.4",
             "string-env-interpolation": "1.0.1"
+          },
+          "dependencies": {
+            "minimatch": {
+              "version": "3.0.4",
+              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+              "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+              "dev": true,
+              "requires": {
+                "brace-expansion": "^1.1.7"
+              }
+            }
           }
         },
         "inquirer": {
@@ -22420,6 +22369,15 @@
             "through": "^2.3.6"
           }
         },
+        "minimatch": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-4.2.1.tgz",
+          "integrity": "sha512-9Uq1ChtSZO+Mxa/CL1eGizn2vRn3MlLgzhT0Iz8zaY8NdvxvB0d5QdPFmCKf7JKA9Lerx5vRrnwO03jsSfGG9g==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
         "p-limit": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -23954,11 +23912,6 @@
         "@types/unist": "*"
       }
     },
-    "@types/history": {
-      "version": "4.7.11",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
-    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -24107,25 +24060,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-router": {
-      "version": "5.1.18",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz",
-      "integrity": "sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==",
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
     "@types/react-transition-group": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
@@ -28651,19 +28585,6 @@
         }
       }
     },
-    "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",
@@ -29323,11 +29244,6 @@
         "is-docker": "^2.0.0"
       }
     },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -31225,15 +31141,6 @@
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
       "dev": true
     },
-    "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.5.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.3.tgz",
@@ -31847,14 +31754,6 @@
       "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
       "dev": true
     },
-    "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"
-      }
-    },
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -32966,35 +32865,31 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
-    "react-router": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
-      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.13",
-        "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"
-      }
-    },
     "react-router-dom": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
-      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
       "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.1",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      },
+      "dependencies": {
+        "history": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+          "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+          "requires": {
+            "@babel/runtime": "^7.7.6"
+          }
+        },
+        "react-router": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+          "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+          "requires": {
+            "history": "^5.2.0"
+          }
+        }
       }
     },
     "react-scripts": {
@@ -33466,11 +33361,6 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
     },
-    "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",
@@ -34622,11 +34512,6 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
-    "tiny-invariant": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
-    },
     "tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -35148,11 +35033,6 @@
       "integrity": "sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=",
       "dev": true
     },
-    "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=="
-    },
     "value-or-promise": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/value-or-promise/-/value-or-promise-1.0.11.tgz",

webui/package.json 🔗

@@ -12,16 +12,13 @@
     "@types/node": "^17.0.18",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "@types/react-router": "^5.1.18",
-    "@types/react-router-dom": "^5.3.3",
     "clsx": "^1.1.1",
     "graphql": "^16.3.0",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-moment": "^1.1.1",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "^5.0.0",
     "rehype-react": "^7.0.4",
     "remark-gemoji": "^7.0.1",

webui/src/App.tsx 🔗

@@ -1,4 +1,4 @@
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 
 import Layout from './components/Header';
 import BugPage from './pages/bug';
@@ -10,13 +10,13 @@ import NotFoundPage from './pages/notfound/NotFoundPage';
 export default function App() {
   return (
     <Layout>
-      <Switch>
-        <Route path="/" exact component={ListPage} />
-        <Route path="/new" exact component={NewBugPage} />
-        <Route path="/bug/:id" exact component={BugPage} />
-        <Route path="/user/:id" exact component={IdentityPage} />
-        <Route component={NotFoundPage} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<ListPage />} />
+        <Route path="/new" element={<NewBugPage />} />
+        <Route path="/bug/:id" element={<BugPage />} />
+        <Route path="/user/:id" element={<IdentityPage />} />
+        <Route element={<NotFoundPage />} />
+      </Routes>
     </Layout>
   );
 }

webui/src/pages/bug/BugQuery.tsx 🔗

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -8,13 +8,12 @@ import NotFoundPage from '../notfound/NotFoundPage';
 import Bug from './Bug';
 import { useGetBugQuery } from './BugQuery.generated';
 
-type Props = RouteComponentProps<{
-  id: string;
-}>;
+const BugQuery: React.FC = () => {
+  const params = useParams<'id'>();
+  if (params.id === undefined) throw new Error('missing route parameters');
 
-const BugQuery: React.FC<Props> = ({ match }: Props) => {
   const { loading, error, data } = useGetBugQuery({
-    variables: { id: match.params.id },
+    variables: { id: params.id },
   });
   if (loading) return <CircularProgress />;
   if (!data?.repository?.bug) return <NotFoundPage />;

webui/src/pages/identity/IdentityQuery.tsx 🔗

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -7,13 +7,12 @@ import { useGetUserByIdQuery } from '../../components/Identity/UserIdentity.gene
 
 import Identity from './Identity';
 
-type Props = RouteComponentProps<{
-  id: string;
-}>;
+const UserQuery: React.FC = () => {
+  const params = useParams<'id'>();
+  if (params.id === undefined) throw new Error();
 
-const UserQuery: React.FC<Props> = ({ match }: Props) => {
   const { loading, error, data } = useGetUserByIdQuery({
-    variables: { userId: match.params.id },
+    variables: { userId: params.id },
   });
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;

webui/src/pages/list/Filter.tsx 🔗

@@ -1,8 +1,7 @@
 import clsx from 'clsx';
-import { LocationDescriptor } from 'history';
 import { useRef, useState, useEffect } from 'react';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Location, Link } from 'react-router-dom';
 
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -138,7 +137,7 @@ type FilterDropdownProps = {
   dropdown: DropdownTuple[];
   itemActive: (key: string) => boolean;
   icon?: React.ComponentType<SvgIconProps>;
-  to: (key: string) => LocationDescriptor;
+  to: (key: string) => Location;
   hasFilter?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
@@ -240,7 +239,7 @@ function FilterDropdown({
 
 export type FilterProps = {
   active: boolean;
-  to: LocationDescriptor; // the target on click
+  to: Location; // the target on click
   icon?: React.ComponentType<SvgIconProps>;
   children: React.ReactNode;
 };

webui/src/pages/list/FilterToolbar.tsx 🔗

@@ -1,6 +1,6 @@
 import { pipe } from '@arrows/composition';
-import { LocationDescriptor } from 'history';
 import * as React from 'react';
+import { Location } from 'react-router-dom';
 
 import Toolbar from '@material-ui/core/Toolbar';
 import { makeStyles } from '@material-ui/core/styles';
@@ -68,7 +68,7 @@ function quoteLabel(value: string) {
 
 type Props = {
   query: string;
-  queryLocation: (query: string) => LocationDescriptor;
+  queryLocation: (query: string) => Location;
 };
 
 function FilterToolbar({ query, queryLocation }: Props) {

webui/src/pages/list/ListQuery.tsx 🔗

@@ -2,7 +2,7 @@ import { ApolloError } from '@apollo/client';
 import { pipe } from '@arrows/composition';
 import { useState, useEffect, useRef } from 'react';
 import * as React from 'react';
-import { useLocation, useHistory, Link } from 'react-router-dom';
+import { useLocation, useNavigate, Link } from 'react-router-dom';
 
 import { Button, FormControl, Menu, MenuItem } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
@@ -185,7 +185,7 @@ const Error: React.FC<ErrorProps> = ({ error }: ErrorProps) => {
 
 function ListQuery() {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const params = new URLSearchParams(location.search);
   const query = params.has('q') ? params.get('q') || '' : 'status:open';
 
@@ -290,7 +290,7 @@ function ListQuery() {
 
   const formSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    history.push(queryLocation(input));
+    navigate(queryLocation(input));
   };
 
   const {

webui/src/pages/new/NewBugPage.tsx 🔗

@@ -1,5 +1,5 @@
 import { FormEvent, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { Button, Paper } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
@@ -49,7 +49,7 @@ function NewBugPage() {
   const classes = useStyles();
 
   let issueTitleInput: any;
-  let history = useHistory();
+  let navigate = useNavigate();
 
   function submitNewIssue(e: FormEvent) {
     e.preventDefault();
@@ -63,7 +63,7 @@ function NewBugPage() {
       },
     }).then(function (data) {
       const id = data.data?.newBug.bug.id;
-      history.push('/bug/' + id);
+      navigate('/bug/' + id);
     });
     issueTitleInput.value = '';
   }