web: migrate to React Router v7 (#2861)

## Problem

React Router v7 was released almost a year now (see
https://reactrouter.com/changelog#v700), but it has not been updated in
Agama yet. In addition to the obvious benefit of keeping dependencies
up-to-date, updating it might help to address some limitations we have
found with the v6 version, like
06d858c

## Solution

Migrate React Router dependency to its latest version.

## Testing

- Adapted existing tests.

## Notes

This migration has been straightforward, and as of now, Agama is using
Data Mode (see https://reactrouter.com/start/modes). However, this could
change in the future if we find advantages in switching to Declarative
or Framework Mode. Before making any decisions, we’ll need to work on
`src/App.tsx` along with the changes planned for the api-v2 branch that
this PR is based on.

## Documentation


 * https://reactrouter.com/upgrading/v6
*
remix-run/react-router#12363 (comment)
* remix-run/react-router#13530 (`generatePath`
now encodes URL params by default, related to
#2576)
 * https://www.typescriptlang.org/tsconfig/#moduleResolution

Author: dgdavid

web/package-lock.json

@@ -101,7 +101,7 @@
     "radashi": "^12.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.30.1",
+    "react-router": "^7.9.5",
     "sprintf-js": "^1.1.3",
     "xbytes": "^1.9.1"
   },

web/package.json

@@ -21,7 +21,7 @@
  */
 
 import React, { useEffect } from "react";
-import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router";
 import { Loading } from "~/components/layout";
 import { useProduct, useProductChanges } from "~/queries/software";
 import { useProposalChanges } from "~/queries/proposal";

web/src/App.tsx

@@ -21,7 +21,7 @@
  */
 
 import React from "react";
-import { Navigate, Outlet } from "react-router-dom";
+import { Navigate, Outlet } from "react-router";
 import { useAuth } from "./context/auth";
 import { AppProviders } from "./context/app";
 

web/src/Protected.tsx

@@ -22,7 +22,7 @@
 
 import React from "react";
 import { DropdownItem, DropdownItemProps } from "@patternfly/react-core";
-import { useHref, useLocation } from "react-router-dom";
+import { useHref, useLocation } from "react-router";
 import { useProduct, useRegistration } from "~/queries/software";
 import { PRODUCT as PATHS, SIDE_PATHS } from "~/routes/paths";
 import { _ } from "~/i18n";

web/src/components/core/ChangeProductOption.tsx

@@ -26,7 +26,7 @@ import { Popup } from "~/components/core";
 import { startInstallation } from "~/api/manager";
 import { useAllIssues } from "~/queries/issues";
 import { IssueSeverity } from "~/types/issues";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { SIDE_PATHS } from "~/routes/paths";
 import { _ } from "~/i18n";
 import { Icon } from "../layout";

web/src/components/core/InstallButton.tsx

@@ -37,7 +37,7 @@ import {
   GridItem,
   Stack,
 } from "@patternfly/react-core";
-import { Navigate, useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router";
 import { Icon } from "~/components/layout";
 import alignmentStyles from "@patternfly/react-styles/css/utilities/Alignment/alignment";
 import { useInstallerStatus } from "~/queries/status";

web/src/components/core/InstallationFinished.tsx

@@ -25,7 +25,7 @@ import { _ } from "~/i18n";
 import ProgressReport from "./ProgressReport";
 import { InstallationPhase } from "~/types/status";
 import { ROOT as PATHS } from "~/routes/paths";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
 import { useInstallerStatus, useInstallerStatusChanges } from "~/queries/status";
 
 function InstallationProgress() {

web/src/components/core/InstallationProgress.tsx

@@ -32,7 +32,7 @@
  */
 
 import React, { useReducer } from "react";
-import { useHref, useLocation } from "react-router-dom";
+import { useHref, useLocation } from "react-router";
 import {
   Button,
   ButtonProps,

web/src/components/core/InstallerOptions.tsx

@@ -22,7 +22,7 @@
 
 import React from "react";
 import { Button, ButtonProps } from "@patternfly/react-core";
-import { To, useHref, useLinkClickHandler } from "react-router-dom";
+import { To, useHref, useLinkClickHandler } from "react-router";
 
 export type LinkProps = Omit<ButtonProps, "component"> & {
   /** The target route */