Use the i18next eslint plugin

web/.eslintrc.json

@@ -20,8 +20,9 @@
         },
         "sourceType": "module"
     },
-    "plugins": ["flowtype", "react", "react-hooks", "@typescript-eslint"],
+    "plugins": ["flowtype", "i18next", "react", "react-hooks", "@typescript-eslint"],
     "rules": {
+        "i18next/no-literal-string": "error",
         "indent": ["error", 2,
             {
                 "ObjectExpression": "first",
@@ -58,6 +59,15 @@
         "space-before-function-paren": "off",
         "n/no-callback-literal": "off"
     },
+    "overrides": [
+      {
+        // do not check translations in the testing or development files
+        "files": ["*.test.*", "test-utils.js", "DevServerWrapper.jsx"],
+        "rules": {
+          "i18next/no-literal-string": "off"
+        }
+      }
+    ],
     "globals": {
         "require": false,
         "module": false,

web/package.json

@@ -56,6 +56,7 @@
     "eslint-config-standard-jsx": "^11.0.0",
     "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-i18next": "^6.0.3",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-node": "^11.1.0",

web/src/App.jsx

@@ -96,6 +96,8 @@ function App() {
       </Sidebar>
 
       <Layout>
+        {/* this is the name of the tool, do not translate it */}
+        {/* eslint-disable-next-line i18next/no-literal-string */}
         <Title>Agama</Title>
         <Content />
       </Layout>

web/src/components/core/Sidebar.jsx

@@ -115,6 +115,8 @@ export default function Sidebar ({ children }) {
     }
 
     targetInfo = (
+      /* this is only displayed in the development mode, not in production, do not translate it */
+      /* eslint-disable-next-line i18next/no-literal-string */
       <Text>
         Target server: { " " }
         <Button isInline variant="link" component="a" href={ targetUrl } target="_blank">

web/src/components/layout/Icon.jsx

@@ -20,6 +20,9 @@
  */
 
 import React from 'react';
+import format from "format-util";
+
+import { _ } from "~/i18n";
 
 // NOTE: "@icons" is an alias to use a shorter path to real @material-symbols
 // icons location. Check the tsconfig.json file to see its value.
@@ -149,5 +152,5 @@ export default function Icon({ name, className = "", size = 32, ...otherProps })
 
   return (IconComponent)
     ? <IconComponent className={cssClassName} aria-hidden="true" {...otherProps} />
-    : <em>icon {name} not found!</em>;
+    : <em>{format(_("Icon %s not found!"), name)}</em>;
 }

web/src/components/layout/Icon.test.jsx

@@ -35,6 +35,6 @@ describe("when given a known name", () => {
 describe("when given an unknown name", () => {
   it("renders an informative text", async () => {
     plainRender(<Icon name="apsens" />);
-    await screen.findByText("icon apsens not found!", { name: /options/i });
+    await screen.findByText("Icon apsens not found!", { name: /options/i });
   });
 });

web/src/components/network/NetworkPage.jsx

@@ -35,7 +35,7 @@ import { _ } from "~/i18n";
 const NoWiredConnections = () => {
   return (
     <div className="stack">
-      <div className="bold">No wired connections found</div>
+      <div className="bold">{_("No wired connections found")}</div>
     </div>
   );
 };

web/src/components/storage/DeviceSelector.jsx

@@ -131,23 +131,26 @@ const ItemContent = ({ device }) => {
 
       const members = device.members.map(m => m.split("/").at(-1));
 
-      return <div>Members: {members.sort().join(", ")}</div>;
+      // TRANSLATORS: RAID details, %s is replaced by list of devices used by the array
+      return <div>{format(_("Members: %s"), members.sort().join(", "))}</div>;
     };
 
     const RAIDInfo = () => {
       if (device.type !== "raid") return null;
 
       const devices = device.devices.map(m => m.split("/").at(-1));
 
-      return <div>Devices: {devices.sort().join(", ")}</div>;
+      // TRANSLATORS: RAID details, %s is replaced by list of devices used by the array
+      return <div>{format(_("Devices: %s"), devices.sort().join(", "))}</div>;
     };
 
     const MultipathInfo = () => {
       if (device.type !== "multipath") return null;
 
       const wires = device.wires.map(m => m.split("/").at(-1));
 
-      return <div>Wires: {wires.sort().join(", ")}</div>;
+      // TRANSLATORS: multipath details, %s is replaced by list of connections used by the device
+      return <div>{format(_("Wires: %s"), wires.sort().join(", "))}</div>;
     };
 
     return (

web/src/components/storage/ProposalPageOptions.jsx

@@ -57,7 +57,7 @@ const ZFCPLink = () => {
       href={href}
       description={_("Activate disks")}
     >
-      zFCP
+      {_("zFCP")}
     </PageOptions.Item>
   );
 };
@@ -75,7 +75,7 @@ const ISCSILink = () => {
       href={href}
       description={_("Connect to iSCSI targets")}
     >
-      iSCSI
+      {_("iSCSI")}
     </PageOptions.Item>
   );
 };