web: stop using custom generateEncodedPath

It was introduced to work around React Router v6's issue of not encoding
parameters in the generatePath function. However, after migrating to v7,
tests began failing due to double encoding. This revealed that React
Router v7 already handles encoding parameters in generatePath. See
remix-run/react-router#13530

Thus, this commit reverts the changes made in
#2576

Author: dgdavid

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/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/WiredConnectionsList.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { useId } from "react";
-import { useNavigate } from "react-router";
+import { generatePath, useNavigate } from "react-router";
 import {
   Content,
   DataList,
@@ -39,7 +39,6 @@ import { useConnections, useNetworkDevices } from "~/queries/network";
 import { NETWORK as PATHS } from "~/routes/paths";
 import { formatIp } from "~/utils/network";
 import { _ } from "~/i18n";
-import { generateEncodedPath } from "~/utils";
 
 type ConnectionListItemProps = { connection: Connection };
 
@@ -93,7 +92,7 @@ function WiredConnectionsList(props: DataListProps) {
 
   return (
     <DataList
-      onSelectDataListItem={(_, id) => navigate(generateEncodedPath(PATHS.wiredConnection, { id }))}
+      onSelectDataListItem={(_, id) => navigate(generatePath(PATHS.wiredConnection, { id }))}
       {...props}
     >
       {wiredConnections.map((c: Connection) => (

web/src/components/storage/FilesystemMenu.tsx

@@ -22,15 +22,14 @@
 
 import React, { useId } from "react";
 import { Divider, Flex } from "@patternfly/react-core";
-import { useNavigate } from "react-router";
+import { generatePath, useNavigate } from "react-router";
 import Text from "~/components/core/Text";
 import MenuHeader from "~/components/core/MenuHeader";
 import MenuButton from "~/components/core/MenuButton";
 import { STORAGE as PATHS } from "~/routes/paths";
 import { model } from "~/types/storage";
 import * as driveUtils from "~/components/storage/utils/drive";
 import { filesystemType, formattedPath } from "~/components/storage/utils";
-import { generateEncodedPath } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
 
@@ -61,7 +60,7 @@ export default function FilesystemMenu({ deviceModel }: FilesystemMenuProps): Re
   const ariaLabelId = useId();
   const toggleTextId = useId();
   const { list, listIndex } = deviceModel;
-  const editFilesystemPath = generateEncodedPath(PATHS.formatDevice, { list, listIndex });
+  const editFilesystemPath = generatePath(PATHS.formatDevice, { list, listIndex });
 
   // TRANSLATORS: %s is the name of device, like '/dev/sda'.
   const detailsAriaLabel = sprintf(_("Details for %s"), deviceModel.name);

web/src/components/storage/PartitionsMenu.tsx

@@ -22,7 +22,7 @@
 
 import React, { useId } from "react";
 import { Divider, Stack, Flex } from "@patternfly/react-core";
-import { useNavigate } from "react-router";
+import { generatePath, useNavigate } from "react-router";
 import Text from "~/components/core/Text";
 import MenuButton from "~/components/core/MenuButton";
 import MenuHeader from "~/components/core/MenuHeader";
@@ -31,14 +31,13 @@ import { Partition } from "~/api/storage/types/model";
 import { STORAGE as PATHS } from "~/routes/paths";
 import { useDeletePartition } from "~/hooks/storage/partition";
 import * as driveUtils from "~/components/storage/utils/drive";
-import { generateEncodedPath } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _, n_ } from "~/i18n";
 
 const PartitionMenuItem = ({ device, mountPath }) => {
   const partition = device.getPartition(mountPath);
   const { list, listIndex } = device;
-  const editPath = generateEncodedPath(PATHS.editPartition, {
+  const editPath = generatePath(PATHS.editPartition, {
     list,
     listIndex,
     partitionId: mountPath,
@@ -140,7 +139,7 @@ export default function PartitionsMenu({ device }) {
   const ariaLabelId = useId();
   const toggleTextId = useId();
   const { list, listIndex } = device;
-  const newPartitionPath = generateEncodedPath(PATHS.addPartition, { list, listIndex });
+  const newPartitionPath = generatePath(PATHS.addPartition, { list, listIndex });
   // TRANSLATORS: %s is the name of device, like '/dev/sda'.
   const detailsAriaLabel = sprintf(_("Details for %s"), device.name);
   const hasPartitions = device.partitions.some((p: Partition) => p.mountPath);

web/src/components/storage/SpacePolicyMenu.tsx

@@ -24,13 +24,12 @@ import React from "react";
 import { Flex } from "@patternfly/react-core";
 import MenuButton from "~/components/core/MenuButton";
 import Text from "~/components/core/Text";
-import { useNavigate } from "react-router";
+import { generatePath, useNavigate } from "react-router";
 import { useSetSpacePolicy } from "~/hooks/storage/space-policy";
 import { SPACE_POLICIES } from "~/components/storage/utils";
 import { apiModel } from "~/api/storage/types";
 import { STORAGE as PATHS } from "~/routes/paths";
 import * as driveUtils from "~/components/storage/utils/drive";
-import { generateEncodedPath } from "~/utils";
 import { isEmpty } from "radashi";
 import { _ } from "~/i18n";
 
@@ -57,7 +56,7 @@ export default function SpacePolicyMenu({ modelDevice, device }) {
 
   const onSpacePolicyChange = (spacePolicy: apiModel.SpacePolicy) => {
     if (spacePolicy === "custom") {
-      return navigate(generateEncodedPath(PATHS.editSpacePolicy, { list, listIndex }));
+      return navigate(generatePath(PATHS.editSpacePolicy, { list, listIndex }));
     } else {
       setSpacePolicy(list, listIndex, { type: spacePolicy });
     }

web/src/components/storage/UnusedMenu.tsx

@@ -22,12 +22,11 @@
 
 import React, { useId } from "react";
 import { Flex } from "@patternfly/react-core";
-import { useNavigate } from "react-router";
+import { generatePath, useNavigate } from "react-router";
 import Text from "~/components/core/Text";
 import MenuButton from "~/components/core/MenuButton";
 import { STORAGE as PATHS } from "~/routes/paths";
 import { model } from "~/types/storage";
-import { generateEncodedPath } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
 
@@ -38,8 +37,8 @@ export default function UnusedMenu({ deviceModel }: UnusedMenuProps): React.Reac
   const ariaLabelId = useId();
   const toggleTextId = useId();
   const { list, listIndex } = deviceModel;
-  const newPartitionPath = generateEncodedPath(PATHS.addPartition, { list, listIndex });
-  const formatDevicePath = generateEncodedPath(PATHS.formatDevice, { list, listIndex });
+  const newPartitionPath = generatePath(PATHS.addPartition, { list, listIndex });
+  const formatDevicePath = generatePath(PATHS.formatDevice, { list, listIndex });
 
   // TRANSLATORS: %s is the name of device, like '/dev/sda'.
   const detailsAriaLabel = sprintf(_("Details for %s"), deviceModel.name);

web/src/components/storage/VolumeGroupEditor.tsx

@@ -22,7 +22,7 @@
 
 import React, { useId } from "react";
 import { Divider, Flex, Title } from "@patternfly/react-core";
-import { useNavigate } from "react-router";
+import { generatePath, useNavigate } from "react-router";
 import Link from "~/components/core/Link";
 import Text from "~/components/core/Text";
 import MenuButton from "~/components/core/MenuButton";
@@ -36,7 +36,6 @@ import { baseName, formattedPath } from "~/components/storage/utils";
 import { contentDescription } from "~/components/storage/utils/volume-group";
 import { useDeleteVolumeGroup } from "~/hooks/storage/volume-group";
 import { useDeleteLogicalVolume } from "~/hooks/storage/logical-volume";
-import { generateEncodedPath } from "~/utils";
 import { isEmpty } from "radashi";
 import { sprintf } from "sprintf-js";
 import { _, n_, formatList } from "~/i18n";
@@ -93,7 +92,7 @@ const EditVgOption = ({ vg }: { vg: model.VolumeGroup }) => {
       itemId="edit-volume-group"
       description={_("Modify settings and physical volumes")}
       role="menuitem"
-      onClick={() => navigate(generateEncodedPath(PATHS.volumeGroup.edit, { id: vg.vgName }))}
+      onClick={() => navigate(generatePath(PATHS.volumeGroup.edit, { id: vg.vgName }))}
     >
       {_("Edit volume group")}
     </MenuButton.Item>
@@ -130,7 +129,7 @@ const LogicalVolumes = ({ vg }: { vg: model.VolumeGroup }) => {
   const deleteLogicalVolume = useDeleteLogicalVolume();
   const ariaLabelId = useId();
   const toggleTextId = useId();
-  const newLvPath = generateEncodedPath(PATHS.volumeGroup.logicalVolume.add, { id: vg.vgName });
+  const newLvPath = generatePath(PATHS.volumeGroup.logicalVolume.add, { id: vg.vgName });
   const menuAriaLabel = sprintf(_("Logical volumes for %s"), vg.vgName);
 
   if (isEmpty(vg.logicalVolumes)) {
@@ -176,7 +175,7 @@ const LogicalVolumes = ({ vg }: { vg: model.VolumeGroup }) => {
                 <MountPathMenuItem
                   key={lv.mountPath}
                   device={lv}
-                  editPath={generateEncodedPath(PATHS.volumeGroup.logicalVolume.edit, {
+                  editPath={generatePath(PATHS.volumeGroup.logicalVolume.edit, {
                     id: vg.vgName,
                     logicalVolumeId: lv.mountPath,
                   })}

web/src/utils.test.ts

@@ -20,15 +20,7 @@
  * find current contact information at www.suse.com.
  */
 
-import {
-  compact,
-  localConnection,
-  hex,
-  mask,
-  timezoneTime,
-  generateEncodedPath,
-  sortCollection,
-} from "./utils";
+import { compact, localConnection, hex, mask, timezoneTime, sortCollection } from "./utils";
 
 describe("compact", () => {
   it("removes null and undefined values", () => {
@@ -197,49 +189,6 @@ describe("localConnection", () => {
   });
 });
 
-describe("generateEncodedPath", () => {
-  it("encodes special characters in parameters", () => {
-    const path = "/network/:id";
-    const params = { id: "Wired #1" };
-
-    const result = generateEncodedPath(path, params);
-
-    expect(result).toBe("/network/Wired%20%231");
-  });
-
-  it("handles multiple parameters", () => {
-    const path = "/network/:id/bridge/:bridge";
-    const params = { id: "Wired #1", bridge: "br $0" };
-
-    const result = generateEncodedPath(path, params);
-
-    expect(result).toBe("/network/Wired%20%231/bridge/br%20%240");
-  });
-
-  it("leaves safe characters unchanged", () => {
-    const path = "/product/:id";
-    const params = { id: "12345" };
-
-    const result = generateEncodedPath(path, params);
-
-    expect(result).toBe("/product/12345");
-  });
-
-  it("works with empty params", () => {
-    const path = "/static/path";
-
-    const result = generateEncodedPath(path, {});
-
-    expect(result).toBe("/static/path");
-  });
-
-  it("throws if a param is missing", () => {
-    const path = "/network/:id";
-
-    expect(() => generateEncodedPath(path, {})).toThrow();
-  });
-});
-
 describe("simpleFastSort", () => {
   const fakeDevices = [
     { sid: 100, name: "/dev/sdz", size: 5 },