web: migrate to React Router v7

web/package.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/src/App.tsx

@@ -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/Protected.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/components/core/ChangeProductOption.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/InstallButton.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/InstallationFinished.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/InstallationProgress.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/InstallerOptions.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/Link.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 */

web/src/components/core/LoginPage.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { useState } from "react";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
 import {
   ActionGroup,
   Alert,

web/src/components/core/Page.tsx

@@ -44,7 +44,7 @@ import { ProductRegistrationAlert } from "~/components/product";
 import Link, { LinkProps } from "~/components/core/Link";
 import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
 import flexStyles from "@patternfly/react-styles/css/utilities/Flex/flex";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 import { isEmpty, isObject } from "radashi";
 import { SIDE_PATHS } from "~/routes/paths";
 import { _ } from "~/i18n";

web/src/components/l10n/KeyboardSelection.test.tsx

@@ -53,8 +53,8 @@ jest.mock("~/api/api", () => ({
   updateConfig: (config) => mockUpdateConfigFn(config),
 }));
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigateFn,
 }));
 

web/src/components/l10n/KeyboardSelection.tsx

@@ -22,7 +22,7 @@
 
 import React, { useState } from "react";
 import { Content, Flex, Form, FormGroup, Radio } from "@patternfly/react-core";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ListSearch, Page } from "~/components/core";
 import { updateConfig } from "~/api/api";
 import { useSystem } from "~/queries/system";

web/src/components/l10n/LocaleSelection.test.tsx

@@ -53,8 +53,8 @@ jest.mock("~/api/api", () => ({
   updateConfig: (config) => mockUpdateConfigFn(config),
 }));
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigateFn,
 }));
 

web/src/components/l10n/LocaleSelection.tsx

@@ -22,7 +22,7 @@
 
 import React, { useState } from "react";
 import { Content, Flex, Form, FormGroup, Radio } from "@patternfly/react-core";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ListSearch, Page } from "~/components/core";
 import { updateConfig } from "~/api/api";
 import { useSystem } from "~/queries/system";

web/src/components/l10n/TimezoneSelection.test.tsx

@@ -60,8 +60,8 @@ jest.mock("~/queries/proposal", () => ({
   useProposal: () => ({ l10n: { timezones, timezone: "Europe/Berlin" } }),
 }));
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigateFn,
 }));
 

web/src/components/l10n/TimezoneSelection.tsx

@@ -22,7 +22,7 @@
 
 import React, { useState } from "react";
 import { Content, Flex, Form, FormGroup, Radio } from "@patternfly/react-core";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ListSearch, Page } from "~/components/core";
 import { Timezone } from "~/types/l10n";
 import { updateConfig } from "~/api/api";

web/src/components/layout/Header.tsx

@@ -39,7 +39,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
-import { useMatches } from "react-router-dom";
+import { useMatches } from "react-router";
 import { Icon } from "~/components/layout";
 import { useProduct } from "~/queries/software";
 import { Route } from "~/types/routes";

web/src/components/layout/Layout.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { Suspense, useRef, useState } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation } from "react-router";
 import { Masthead, Page, PageProps } from "@patternfly/react-core";
 import { Questions } from "~/components/questions";
 import Header, { HeaderProps } from "~/components/layout/Header";

web/src/components/layout/Sidebar.tsx

@@ -21,7 +21,7 @@
  */
 
 import React from "react";
-import { NavLink, useLocation } from "react-router-dom";
+import { NavLink, useLocation } from "react-router";
 import {
   Nav,
   NavItem,

web/src/components/network/BindingSettingsForm.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { useReducer } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import {
   ActionGroup,
   Content,

web/src/components/network/IpSettingsForm.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import {
   ActionGroup,
   Alert,

web/src/components/network/WifiConnectionDetails.tsx

@@ -32,12 +32,12 @@ import {
   GridItem,
   Stack,
 } from "@patternfly/react-core";
+import { generatePath } from "react-router";
 import { Link, Page } from "~/components/core";
 import InstallationOnlySwitch from "./InstallationOnlySwitch";
 import { Device, WifiNetwork } from "~/types/network";
 import { NETWORK } from "~/routes/paths";
 import { formatIp } from "~/utils/network";
-import { generateEncodedPath } from "~/utils";
 import { _ } from "~/i18n";
 
 const NetworkDetails = ({ network }: { network: WifiNetwork }) => {
@@ -96,7 +96,7 @@ const IpDetails = ({ device, settings }: { device: Device; settings: WifiNetwork
       title={_("IP settings")}
       pfCardProps={{ isPlain: false, isFullHeight: false }}
       actions={
-        <Link to={generateEncodedPath(NETWORK.editConnection, { id: device.connection })}>
+        <Link to={generatePath(NETWORK.editConnection, { id: device.connection })}>
           {_("Edit")}
         </Link>
       }

web/src/components/network/WifiNetworkPage.tsx

@@ -21,7 +21,7 @@
  */
 
 import React from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import {
   Content,
   EmptyState,

web/src/components/network/WifiNetworksList.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { useId } from "react";
-import { useNavigate } from "react-router-dom";
+import { generatePath, useNavigate } from "react-router";
 import {
   Content,
   DataList,
@@ -41,7 +41,6 @@ import { Connection, ConnectionState, WifiNetwork, WifiNetworkStatus } from "~/t
 import { useConnections, useNetworkChanges, useWifiNetworks } from "~/queries/network";
 import { NETWORK as PATHS } from "~/routes/paths";
 import { isEmpty } from "radashi";
-import { generateEncodedPath } from "~/utils";
 import { formatIp } from "~/utils/network";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
@@ -190,7 +189,7 @@ function WifiNetworksList({ showIp = true, ...props }: WifiNetworksListProps) {
 
   return (
     <DataList
-      onSelectDataListItem={(_, ssid) => navigate(generateEncodedPath(PATHS.wifiNetwork, { ssid }))}
+      onSelectDataListItem={(_, ssid) => navigate(generatePath(PATHS.wifiNetwork, { ssid }))}
       {...props}
     >
       {networks.map((n) => (

web/src/components/network/WiredConnectionDetails.tsx

@@ -37,13 +37,13 @@ import {
   Tabs,
   TabTitleText,
 } from "@patternfly/react-core";
+import { generatePath } from "react-router";
 import { Link, Page } from "~/components/core";
 import InstallationOnlySwitch from "./InstallationOnlySwitch";
 import { Connection, Device } from "~/types/network";
 import { connectionBindingMode, formatIp } from "~/utils/network";
 import { NETWORK } from "~/routes/paths";
 import { useNetworkDevices } from "~/queries/network";
-import { generateEncodedPath } from "~/utils";
 import { isEmpty } from "radashi";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
@@ -73,7 +73,7 @@ const BindingSettings = ({ connection }: { connection: Connection }) => {
       pfCardProps={{ isPlain: false, isFullHeight: false }}
       actions={
         <Link
-          to={generateEncodedPath(NETWORK.editBindingSettings, {
+          to={generatePath(NETWORK.editBindingSettings, {
             id: connection.id,
           })}
         >
@@ -203,7 +203,7 @@ const ConnectionDetails = ({ connection }: { connection: Connection }) => {
       title={_("Settings")}
       pfCardProps={{ isPlain: false, isFullHeight: false }}
       actions={
-        <Link to={generateEncodedPath(NETWORK.editConnection, { id: connection.id })}>
+        <Link to={generatePath(NETWORK.editConnection, { id: connection.id })}>
           {_("Edit connection settings")}
         </Link>
       }

web/src/components/network/WiredConnectionPage.tsx

@@ -21,7 +21,7 @@
  */
 
 import React from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import {
   Content,
   EmptyState,