refactor(web): improve route files

By moving them from ~/components/{namespace}/routs.js to
~/routes/{namespace}.tsx

It also adds a constant PATHS per namespace and uses them instead of
directly typing the route path again when needed.

web/src/App.jsx

@@ -30,7 +30,8 @@ import { useProduct, useProductChanges } from "./queries/software";
 import { CONFIG, INSTALL, STARTUP } from "~/client/phase";
 import { BUSY } from "~/client/status";
 import { useL10nConfigChanges } from "~/queries/l10n";
-import { useIssues, useIssuesChanges } from "./queries/issues";
+import { useIssuesChanges } from "./queries/issues";
+import { PATHS as PRODUCT_PATHS } from "./routes/products";
 
 /**
  * Main application component.
@@ -61,12 +62,12 @@ function App() {
       return <Loading />;
     }
 
-    if (selectedProduct === undefined && location.pathname !== "/products") {
+    if (selectedProduct === undefined && location.pathname !== PRODUCT_PATHS.root) {
       return <Navigate to="/products" />;
     }
 
-    if (phase === CONFIG && status === BUSY && location.pathname !== "/products/progress") {
-      return <Navigate to="/products/progress" />;
+    if (phase === CONFIG && status === BUSY && location.pathname !== PRODUCT_PATHS.progress) {
+      return <Navigate to={PRODUCT_PATHS.progress} />;
     }
 
     return <Outlet />;

web/src/components/l10n/L10nPage.jsx

@@ -23,11 +23,7 @@ import React from "react";
 import { Gallery, GalleryItem } from "@patternfly/react-core";
 import { useLoaderData } from "react-router-dom";
 import { ButtonLink, CardField, Page } from "~/components/core";
-import {
-  LOCALE_SELECTION_PATH,
-  KEYMAP_SELECTION_PATH,
-  TIMEZONE_SELECTION_PATH,
-} from "~/routes/l10n";
+import { PATHS } from "~/routes/l10n";
 import { _ } from "~/i18n";
 import { useL10n } from "~/queries/l10n";
 
@@ -60,15 +56,15 @@ export default function L10nPage() {
               label={_("Language")}
               value={locale ? `${locale.name} - ${locale.territory}` : _("Not selected yet")}
             >
-              <ButtonLink to={LOCALE_SELECTION_PATH} isPrimary={!locale}>
+              <ButtonLink to={PATHS.localeSelection} isPrimary={!locale}>
                 {locale ? _("Change") : _("Select")}
               </ButtonLink>
             </Section>
           </GalleryItem>
 
           <GalleryItem>
             <Section label={_("Keyboard")} value={keymap ? keymap.name : _("Not selected yet")}>
-              <ButtonLink to={KEYMAP_SELECTION_PATH} isPrimary={!keymap}>
+              <ButtonLink to={PATHS.keymapSelection} isPrimary={!keymap}>
                 {keymap ? _("Change") : _("Select")}
               </ButtonLink>
             </Section>

web/src/components/product/ProductSelectionProgress.jsx

@@ -26,6 +26,7 @@ import { useProduct } from "~/queries/software";
 import { ProgressReport } from "~/components/core";
 import { IDLE } from "~/client/status";
 import { useInstallerClient } from "~/context/installer";
+import { PATHS } from "~/router";
 
 /**
  * @component
@@ -42,7 +43,7 @@ function ProductSelectionProgress() {
     return manager.onStatusChange(setStatus);
   }, [manager, setStatus]);
 
-  if (status === IDLE) return <Navigate to="/" replace />;
+  if (status === IDLE) return <Navigate to={PATHS.root} replace />;
 
   return (
     <ProgressReport

web/src/components/product/index.js → web/src/components/product/index.ts

@@ -19,6 +19,5 @@
  * find current contact information at www.suse.com.
  */
 
-export { default as ProductRegistrationPage } from "./ProductRegistrationPage";
 export { default as ProductSelectionPage } from "./ProductSelectionPage";
 export { default as ProductSelectionProgress } from "./ProductSelectionProgress";

web/src/components/software/SoftwarePage.tsx

@@ -36,6 +36,7 @@ import { useIssues } from "~/queries/issues";
 import { usePatterns, useProposal, useProposalChanges } from "~/queries/software";
 import { Pattern, SelectedBy } from "~/types/software";
 import { _ } from "~/i18n";
+import { PATHS } from "~/routes/software";
 
 /**
  * List of selected patterns.
@@ -66,7 +67,7 @@ const SelectedPatterns = ({ patterns }): React.ReactNode => (
   <CardField
     label={_("Selected patterns")}
     actions={
-      <ButtonLink to="patterns/select" isPrimary>
+      <ButtonLink to={PATHS.patternsSelection} isPrimary>
         {_("Change selection")}
       </ButtonLink>
     }

web/src/components/storage/BootConfigField.jsx

@@ -28,6 +28,7 @@ import { _ } from "~/i18n";
 import { sprintf } from "sprintf-js";
 import { deviceLabel } from "~/components/storage/utils";
 import { Icon } from "~/components/layout";
+import { PATHS } from "~/routes/storage";
 
 /**
  * @typedef {import ("~/client/storage").StorageDevice} StorageDevice
@@ -42,7 +43,7 @@ import { Icon } from "~/components/layout";
 const Link = ({ isBold = false }) => {
   const text = _("Change boot options");
 
-  return <RouterLink to="booting-partition">{isBold ? <b>{text}</b> : text}</RouterLink>;
+  return <RouterLink to={PATHS.bootingPartition}>{isBold ? <b>{text}</b> : text}</RouterLink>;
 };
 
 /**

web/src/components/storage/InstallationDeviceField.jsx

@@ -25,6 +25,7 @@ import React from "react";
 import { Skeleton } from "@patternfly/react-core";
 import { ButtonLink, CardField } from "~/components/core";
 import { deviceLabel } from "~/components/storage/utils";
+import { PATHS } from "~/routes/storage";
 import { _ } from "~/i18n";
 import { sprintf } from "sprintf-js";
 
@@ -104,7 +105,7 @@ export default function InstallationDeviceField({
         isLoading ? (
           <Skeleton fontSize="sm" width="100px" />
         ) : (
-          <ButtonLink to="target-device" isPrimary={false}>
+          <ButtonLink to={PATHS.targetDevice} isPrimary={false}>
             {_("Change")}
           </ButtonLink>
         )

web/src/components/storage/ProposalActionsSummary.jsx

@@ -28,6 +28,7 @@ import DevicesManager from "~/components/storage/DevicesManager";
 import { _, n_ } from "~/i18n";
 import { sprintf } from "sprintf-js";
 import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
+import { PATHS } from "~/routes/storage";
 
 /**
  * @typedef {import ("~/client/storage").Action} Action
@@ -235,7 +236,7 @@ export default function ProposalActionsSummary({
         isLoading ? (
           <Skeleton fontSize="sm" width="100px" />
         ) : (
-          <ButtonLink to="space-policy">{_("Change")}</ButtonLink>
+          <ButtonLink to={PATHS.spacePolicy}>{_("Change")}</ButtonLink>
         )
       }
       cardProps={{ isFullHeight: false }}

web/src/components/users/FirstUser.jsx

@@ -26,6 +26,7 @@ import { useNavigate } from "react-router-dom";
 import { RowActions, ButtonLink } from "~/components/core";
 import { _ } from "~/i18n";
 import { useFirstUser, useFirstUserChanges, useRemoveFirstUserMutation } from "~/queries/users";
+import { PATHS } from "~/routes/users";
 
 const UserNotDefined = ({ actionCb }) => {
   return (
@@ -40,7 +41,7 @@ const UserNotDefined = ({ actionCb }) => {
           </strong>
         </div>
         <Split hasGutter>
-          <ButtonLink to="first" isPrimary>
+          <ButtonLink to={PATHS.firstUser.create} isPrimary>
             {_("Define a user now")}
           </ButtonLink>
         </Split>
@@ -83,7 +84,7 @@ export default function FirstUser() {
   const actions = [
     {
       title: _("Edit"),
-      onClick: () => navigate("/users/first/edit"),
+      onClick: () => navigate(PATHS.firstUser.edit),
     },
     {
       title: _("Discard"),

web/src/router.js

@@ -27,27 +27,36 @@ import MainLayout from "~/MainLayout";
 import SimpleLayout from "./SimpleLayout";
 import { LoginPage } from "~/components/core";
 import { OverviewPage } from "~/components/overview";
-import { _ } from "~/i18n";
-import overviewRoutes from "~/components/overview/routes";
+import { _, N_ } from "~/i18n";
 import l10nRoutes from "~/routes/l10n";
 import networkRoutes from "~/components/network/routes";
 import productsRoutes from "~/routes/products";
-import storageRoutes from "~/components/storage/routes";
-import softwareRoutes from "~/components/software/routes";
-import usersRoutes from "~/components/users/routes";
+import storageRoutes from "~/routes/storage";
+import softwareRoutes from "~/routes/software";
+import usersRoutes from "~/routes/users";
+
+const PATHS = {
+  root: "/",
+  login: "/login",
+  overview: "/overview",
+};
 
 const rootRoutes = [
-  overviewRoutes,
-  l10nRoutes,
+  {
+    path: "/overview",
+    element: <OverviewPage />,
+    handle: { name: N_("Overview"), icon: "list_alt" },
+  },
+  l10nRoutes(),
   networkRoutes,
-  storageRoutes,
-  softwareRoutes,
-  usersRoutes,
+  storageRoutes(),
+  softwareRoutes(),
+  usersRoutes(),
 ];
 
 const protectedRoutes = [
   {
-    path: "/",
+    path: PATHS.root,
     element: <App />,
     children: [
       {
@@ -62,15 +71,15 @@ const protectedRoutes = [
       },
       {
         element: <SimpleLayout showInstallerOptions />,
-        children: [productsRoutes],
+        children: [productsRoutes()],
       },
     ],
   },
 ];
 
 const routes = [
   {
-    path: "/login",
+    path: PATHS.login,
     exact: true,
     element: <SimpleLayout />,
     children: [
@@ -81,12 +90,12 @@ const routes = [
     ],
   },
   {
-    path: "/",
+    path: PATHS.root,
     element: <Protected />,
     children: [...protectedRoutes],
   },
 ];
 
 const router = createHashRouter(routes);
 
-export { router, rootRoutes };
+export { router, rootRoutes, PATHS };