From 6c21d01df0906a77e64c9ca2df144c43fefae23e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Tue, 23 Jul 2024 16:50:19 +0100
Subject: [PATCH] refactor(web) move and improve network routes file

Related to 1555cc4c0144c2043cc4924cb5f34fb4c0a17933
---
 .../components/network/ConnectionsTable.jsx   |  8 +++---
 web/src/components/network/NetworkPage.jsx    | 11 ++++----
 .../network/WifiNetworksListPage.jsx          | 24 +++++++++--------
 web/src/router.js                             |  4 +--
 .../network/routes.js => routes/network.tsx}  | 27 +++++++++++--------
 5 files changed, 41 insertions(+), 33 deletions(-)
 rename web/src/{components/network/routes.js => routes/network.tsx} (73%)

diff --git a/web/src/components/network/ConnectionsTable.jsx b/web/src/components/network/ConnectionsTable.jsx
index 22616074d7..4dd892758e 100644
--- a/web/src/components/network/ConnectionsTable.jsx
+++ b/web/src/components/network/ConnectionsTable.jsx
@@ -20,13 +20,13 @@
  */
 
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, generatePath } from "react-router-dom";
 import { Table, Thead, Tr, Th, Tbody, Td } from "@patternfly/react-table";
-import { sprintf } from "sprintf-js";
-
 import { RowActions } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { formatIp } from "~/client/network/utils";
+import { PATHS } from "~/routes/network";
+import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
 
 /**
@@ -76,7 +76,7 @@ export default function ConnectionsTable({ connections, devices, onForget }) {
               role: "link",
               // TRANSLATORS: %s is replaced by a network connection name
               "aria-label": sprintf(_("Edit connection %s"), connection.id),
-              onClick: () => navigate(`connections/${connection.id}/edit`),
+              onClick: () => navigate(generatePath(PATHS.editConnection, { id: connection.id })),
             },
             typeof onForget === "function" && {
               title: _("Forget"),
diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx
index 3de10cd297..dd1216d346 100644
--- a/web/src/components/network/NetworkPage.jsx
+++ b/web/src/components/network/NetworkPage.jsx
@@ -25,10 +25,11 @@ import React from "react";
 import { CardBody, Grid, GridItem } from "@patternfly/react-core";
 import { ButtonLink, CardField, EmptyState, Page } from "~/components/core";
 import { ConnectionsTable } from "~/components/network";
-import { _ } from "~/i18n";
 import { formatIp } from "~/client/network/utils";
-import { sprintf } from "sprintf-js";
 import { useNetwork, useNetworkConfigChanges } from "~/queries/network";
+import { PATHS } from "~/routes/network";
+import { sprintf } from "sprintf-js";
+import { _ } from "~/i18n";
 
 /**
  * Page component holding Network settings
@@ -70,7 +71,7 @@ export default function NetworkPage() {
       <CardField
         label={_("Wi-Fi")}
         actions={
-          <ButtonLink isPrimary={!activeConnection} to="wifis">
+          <ButtonLink isPrimary={!activeConnection} to={PATHS.wifis}>
             {activeConnection ? _("Change") : _("Connect")}
           </ButtonLink>
         }
@@ -101,8 +102,8 @@ export default function NetworkPage() {
     return (
       <CardField label={total > 0 && _("Wired")}>
         <CardBody>
-          {total === 0 && (<EmptyState title={_("No wired connections found")} icon="warning" />)}
-          {total !== 0 && (<ConnectionsTable connections={wiredConnections} devices={devices} />)}
+          {total === 0 && <EmptyState title={_("No wired connections found")} icon="warning" />}
+          {total !== 0 && <ConnectionsTable connections={wiredConnections} devices={devices} />}
         </CardBody>
       </CardField>
     );
diff --git a/web/src/components/network/WifiNetworksListPage.jsx b/web/src/components/network/WifiNetworksListPage.jsx
index d00b4cd2b9..12e362a298 100644
--- a/web/src/components/network/WifiNetworksListPage.jsx
+++ b/web/src/components/network/WifiNetworksListPage.jsx
@@ -43,15 +43,17 @@ import {
   Split,
   Stack,
 } from "@patternfly/react-core";
+import { generatePath } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
 import { Icon } from "~/components/layout";
 import { WifiConnectionForm } from "~/components/network";
 import { ButtonLink } from "~/components/core";
 import { DeviceState } from "~/client/network/model";
-import { useInstallerClient } from "~/context/installer";
-import { _ } from "~/i18n";
 import { formatIp } from "~/client/network/utils";
-import { useQueryClient } from "@tanstack/react-query";
+import { useInstallerClient } from "~/context/installer";
 import { useSelectedWifi, useSelectedWifiChange } from "~/queries/network";
+import { PATHS } from "~/routes/network";
+import { _ } from "~/i18n";
 
 const HIDDEN_NETWORK = Object.freeze({ hidden: true });
 
@@ -92,7 +94,7 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => {
   const { data } = useSelectedWifi();
   const forgetNetwork = async () => {
     await client.network.deleteConnection(network.settings.id);
-    queryClient.invalidateQueries({ queryKey: ["network", "connections"] })
+    queryClient.invalidateQueries({ queryKey: ["network", "connections"] });
   };
 
   if (!network) return;
@@ -109,7 +111,9 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => {
         <ButtonLink onClick={async () => await client.network.connectTo(network.settings)}>
           {_("Connect")}
         </ButtonLink>
-        <ButtonLink to={`/network/connections/${network.settings.id}/edit`}>{_("Edit")}</ButtonLink>
+        <ButtonLink to={generatePath(PATHS.editConnection, { id: network.settings.id })}>
+          {_("Edit")}
+        </ButtonLink>
         <Button variant="secondary" isDanger onClick={forgetNetwork}>
           {_("Forget")}
         </Button>
@@ -131,7 +135,7 @@ const WifiDrawerPanelBody = ({ network, onCancel }) => {
             <ButtonLink onClick={async () => await client.network.disconnect(network.settings)}>
               {_("Disconnect")}
             </ButtonLink>
-            <ButtonLink to={`/network/connections/${network.settings.id}/edit`}>
+            <ButtonLink to={generatePath(PATHS.editConnection, { id: network.settings.id })}>
               {_("Edit")}
             </ButtonLink>
             <Button
@@ -187,7 +191,8 @@ const NetworkListName = ({ network }) => {
  */
 function WifiNetworksListPage({ networks = [] }) {
   const { data } = useSelectedWifi();
-  const selected = data.ssid === undefined ? HIDDEN_NETWORK : networks.find(n => n.ssid === data.ssid);
+  const selected =
+    data.ssid === undefined ? HIDDEN_NETWORK : networks.find((n) => n.ssid === data.ssid);
   const changeSelected = useSelectedWifiChange();
 
   const selectHiddneNetwork = () => {
@@ -247,10 +252,7 @@ function WifiNetworksListPage({ networks = [] }) {
                   </DrawerActions>
                 </DrawerHead>
                 <DrawerPanelBody>
-                  <WifiDrawerPanelBody
-                    network={selected}
-                    onCancel={unselectNetwork}
-                  />
+                  <WifiDrawerPanelBody network={selected} onCancel={unselectNetwork} />
                 </DrawerPanelBody>
               </DrawerPanelContent>
             }
diff --git a/web/src/router.js b/web/src/router.js
index d72d0748cc..fb478c8b9e 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -29,7 +29,7 @@ import { LoginPage } from "~/components/core";
 import { OverviewPage } from "~/components/overview";
 import { _, N_ } from "~/i18n";
 import l10nRoutes from "~/routes/l10n";
-import networkRoutes from "~/components/network/routes";
+import networkRoutes from "~/routes/network";
 import productsRoutes from "~/routes/products";
 import storageRoutes from "~/routes/storage";
 import softwareRoutes from "~/routes/software";
@@ -48,7 +48,7 @@ const rootRoutes = [
     handle: { name: N_("Overview"), icon: "list_alt" },
   },
   l10nRoutes(),
-  networkRoutes,
+  networkRoutes(),
   storageRoutes(),
   softwareRoutes(),
   usersRoutes(),
diff --git a/web/src/components/network/routes.js b/web/src/routes/network.tsx
similarity index 73%
rename from web/src/components/network/routes.js
rename to web/src/routes/network.tsx
index 96bc5851d0..dcbbe97bbd 100644
--- a/web/src/components/network/routes.js
+++ b/web/src/routes/network.tsx
@@ -20,13 +20,17 @@
  */
 
 import React from "react";
-import NetworkPage from "./NetworkPage";
-import IpSettingsForm from "./IpSettingsForm";
-import WifiSelectorPage from "./WifiSelectorPage";
+import { NetworkPage, IpSettingsForm, WifiSelectorPage } from "~/components/network";
 import { N_ } from "~/i18n";
 
-const routes = {
-  path: "/network",
+const PATHS = {
+  root: "/network",
+  editConnection: "/network/connections/:id/edit",
+  wifis: "/network/wifis",
+};
+
+const routes = () => ({
+  path: PATHS.root,
   handle: {
     name: N_("Network"),
     icon: "settings_ethernet",
@@ -34,14 +38,15 @@ const routes = {
   children: [
     { index: true, element: <NetworkPage /> },
     {
-      path: "connections/:id/edit",
-      element: <IpSettingsForm />
+      path: PATHS.editConnection,
+      element: <IpSettingsForm />,
     },
     {
-      path: "wifis",
+      path: PATHS.wifis,
       element: <WifiSelectorPage />,
-    }
-  ]
-};
+    },
+  ],
+});
 
 export default routes;
+export { PATHS };