fix(web): mark routes name for being translated (#1385)

Uses `N_` and `_` combination to get the sidebar routes translated.

web/package/agama-web-ui.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Wed Jun 26 13:38:32 UTC 2024 - David Diaz <[email protected]>
+
+- Fix routes translations (gh#openSUSE/agama#1385).
+
 -------------------------------------------------------------------
 Wed Jun 26 13:14:06 UTC 2024 - David Diaz <[email protected]>
 

web/src/MainLayout.jsx

@@ -93,13 +93,16 @@ const Sidebar = () => {
   const links = rootRoutes.map(r => {
     if (!r.handle || r.handle.hidden) return null;
 
+    // eslint-disable-next-line agama-i18n/string-literals
+    const name = _(r.handle?.name);
+
     return (
       <NavItem
         key={r.path}
         component={
           ({ className }) =>
             <NavLink to={r.path} className={({ isActive }) => [className, isActive ? "pf-m-current" : ""].join(" ")}>
-              <Icon size="s" name={r.handle?.icon} /> {r.handle?.name}
+              <Icon size="s" name={r.handle?.icon} /> {name}
             </NavLink>
         }
       />

web/src/components/l10n/routes.js

@@ -25,13 +25,13 @@ import L10nPage from "./L10nPage";
 import LocaleSelection from "./LocaleSelection";
 import KeymapSelection from "./KeyboardSelection";
 import TimezoneSelection from "./TimezoneSelection";
-import { _ } from "~/i18n";
+import { N_ } from "~/i18n";
 
 const routes = {
   path: "/l10n",
   element: <Page />,
   handle: {
-    name: _("Localization"),
+    name: N_("Localization"),
     icon: "globe"
   },
   children: [

web/src/components/network/routes.js

@@ -20,12 +20,12 @@
  */
 
 import React from "react";
-import { _ } from "~/i18n";
 import { Page } from "~/components/core";
 import NetworkPage from "./NetworkPage";
 import IpSettingsForm from "./IpSettingsForm";
 import { createDefaultClient } from "~/client";
 import WifiSelectorPage from "./WifiSelectorPage";
+import { N_ } from "~/i18n";
 
 // FIXME: just to be discussed, most probably we should reading data directly in
 // the component in order to get it subscribed to changes.
@@ -56,18 +56,15 @@ const routes = {
   path: "/network",
   element: <Page />,
   handle: {
-    name: _("Network"),
+    name: N_("Network"),
     icon: "settings_ethernet"
   },
   children: [
     { index: true, element: <NetworkPage />, loader: loaders.all },
     {
       path: "connections/:id/edit",
       element: <IpSettingsForm />,
-      loader: loaders.connection,
-      handle: {
-        name: _("Edit connection %s")
-      }
+      loader: loaders.connection
     },
     {
       path: "wifis",

web/src/components/overview/routes.js

@@ -21,13 +21,13 @@
 
 import React from "react";
 import OverviewPage from "./OverviewPage";
-import { _ } from "~/i18n";
+import { N_ } from "~/i18n";
 
 const routes = {
   path: "/overview",
   element: <OverviewPage />,
   handle: {
-    name: _("Overview"),
+    name: N_("Overview"),
     icon: "list_alt"
   }
 };

web/src/components/software/routes.js

@@ -23,13 +23,13 @@ import React from "react";
 import { Page } from "~/components/core";
 import SoftwarePage from "./SoftwarePage";
 import SoftwarePatternsSelection from "./SoftwarePatternsSelection";
-import { _ } from "~/i18n";
+import { N_ } from "~/i18n";
 
 const routes = {
   path: "/software",
   element: <Page />,
   handle: {
-    name: _("Software"),
+    name: N_("Software"),
     icon: "apps"
   },
   children: [

web/src/components/storage/routes.js

@@ -28,13 +28,13 @@ import DASDPage from "./DASDPage";
 import ISCSIPage from "./ISCSIPage";
 import ProposalPage from "./ProposalPage";
 import ZFCPPage from "./ZFCPPage";
-import { _ } from "~/i18n";
+import { N_ } from "~/i18n";
 
 // FIXME: Choose a better name
 const navigation = [
   // FIXME: use index: true
-  { path: "/storage", element: <ProposalPage />, handle: { name: _("Proposal") } },
-  { path: "iscsi", element: <ISCSIPage />, handle: { name: _("iSCSI") } }
+  { path: "/storage", element: <ProposalPage />, handle: { name: N_("Proposal") } },
+  { path: "iscsi", element: <ISCSIPage />, handle: { name: N_("iSCSI") } }
 ];
 
 // if (something) {
@@ -55,7 +55,7 @@ const routes = {
   path: "/storage",
   element: <Page />,
   handle: {
-    name: _("Storage"),
+    name: N_("Storage"),
     icon: "hard_drive"
   },
   children: [

web/src/components/users/routes.js

@@ -20,33 +20,27 @@
  */
 
 import React from "react";
-import { _ } from "~/i18n";
 import { Page } from "~/components/core";
 import UsersPage from "./UsersPage";
 import FirstUserForm from "./FirstUserForm";
+import { N_ } from "~/i18n";
 
 const routes = {
   path: "/users",
   element: <Page />,
   handle: {
-    name: _("Users"),
+    name: N_("Users"),
     icon: "manage_accounts"
   },
   children: [
     { index: true, element: <UsersPage /> },
     {
       path: "first",
-      element: <FirstUserForm />,
-      handle: {
-        name: _("Create or edit the first user")
-      }
+      element: <FirstUserForm />
     },
     {
       path: "first/edit",
-      element: <FirstUserForm />,
-      handle: {
-        name: _("Edit first user")
-      }
+      element: <FirstUserForm />
     }
   ]
 };