From 832c896b74ee9ae49d385cb22e1266cd20f9ed2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ladislav=20Slez=C3=A1k?= <lslezak@suse.com>
Date: Mon, 28 Aug 2023 18:31:56 +0200
Subject: [PATCH] Mark the iSCSI texts for translation

---
 .../components/storage/iscsi/AuthFields.jsx   | 37 ++++++++++---------
 .../components/storage/iscsi/DiscoverForm.jsx | 26 +++++++------
 .../components/storage/iscsi/EditNodeForm.jsx |  5 ++-
 .../storage/iscsi/InitiatorForm.jsx           |  9 +++--
 .../storage/iscsi/InitiatorPresenter.jsx      | 17 +++++----
 .../storage/iscsi/InitiatorSection.jsx        |  4 +-
 .../components/storage/iscsi/LoginForm.jsx    | 14 ++++---
 .../storage/iscsi/NodeStartupOptions.js       |  8 ++--
 .../storage/iscsi/NodesPresenter.jsx          | 36 ++++++++++--------
 .../storage/iscsi/TargetsSection.jsx          | 14 ++++---
 10 files changed, 100 insertions(+), 70 deletions(-)

diff --git a/web/src/components/storage/iscsi/AuthFields.jsx b/web/src/components/storage/iscsi/AuthFields.jsx
index 6b43c84127..09cebbbcd8 100644
--- a/web/src/components/storage/iscsi/AuthFields.jsx
+++ b/web/src/components/storage/iscsi/AuthFields.jsx
@@ -24,6 +24,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
 
 import { Fieldset } from "~/components/core";
 import { Icon } from "~/components/layout";
+import { _ } from "~/i18n";
 
 export default function AuthFields({ data, onChange, onValidate }) {
   const onUsernameChange = v => onChange("username", v);
@@ -66,62 +67,62 @@ export default function AuthFields({ data, onChange, onValidate }) {
           size="16"
           style={{ verticalAlign: "text-bottom", marginRight: "0.3em" }}
         />
-        Only available if authentication by target is provided
+        {_("Only available if authentication by target is provided")}
       </p>
     );
   };
 
   return (
     <>
-      <Fieldset legend="Authentication by target">
+      <Fieldset legend={_("Authentication by target")}>
         <FormGroup
           fieldId="username"
-          label="Username"
-          helperTextInvalid="Incorrect username"
+          label={_("User name")}
+          helperTextInvalid={_("Incorrect user name")}
           validated={showUsernameError() ? "error" : "default"}
         >
           <TextInput
             id="username"
             name="username"
-            aria-label="Username"
+            aria-label={_("User name")}
             value={data.username || ""}
-            label="Username"
+            label={_("User name")}
             onChange={onUsernameChange}
             validated={showUsernameError() ? "error" : "default"}
           />
         </FormGroup>
         <FormGroup
           fieldId="password"
-          label="Password"
-          helperTextInvalid="Incorrect password"
+          label={_("Password")}
+          helperTextInvalid={_("Incorrect password")}
           validated={showPasswordError() ? "error" : "default"}
         >
           <TextInput
             id="password"
             name="password"
             type="password"
-            aria-label="Password"
+            aria-label={_("Password")}
             value={data.password || ""}
-            label="Password"
+            label={_("Password")}
             onChange={onPasswordChange}
             validated={showPasswordError() ? "error" : "default"}
           />
         </FormGroup>
       </Fieldset>
-      <Fieldset legend="Authentication by initiator">
+      <Fieldset legend={_("Authentication by initiator")}>
         <ByInitiatorAuthTip />
         <FormGroup
           fieldId="reverseUsername"
-          label="Username"
-          helperTextInvalid="Incorrect username"
+          label={_("User name")}
+          helperTextInvalid={_("Incorrect user name")}
           validated={showReverseUsernameError() ? "error" : "default"}
         >
           <TextInput
             id="reverseUsername"
             name="reverseUsername"
-            aria-label="Username"
+            aria-label={_("User name")}
             value={data.reverseUsername || ""}
-            label="Username"
+            label={_("User name")}
             isDisabled={!isValidAuth()}
             onChange={onReverseUsernameChange}
             validated={showReverseUsernameError() ? "error" : "default"}
@@ -130,16 +131,16 @@ export default function AuthFields({ data, onChange, onValidate }) {
         <FormGroup
           fieldId="reversePassword"
           label="Password"
-          helperTextInvalid="Incorrect password"
+          helperTextInvalid={_("Incorrect password")}
           validated={showReversePasswordError() ? "error" : "default"}
         >
           <TextInput
             id="reversePassword"
             name="reversePassword"
             type="password"
-            aria-label="Target Password"
+            aria-label={_("Target Password")}
             value={data.reversePassword || ""}
-            label="Password"
+            label={_("Password")}
             isDisabled={!isValidAuth()}
             onChange={onReversePasswordChange}
             validated={showReversePasswordError() ? "error" : "default"}
diff --git a/web/src/components/storage/iscsi/DiscoverForm.jsx b/web/src/components/storage/iscsi/DiscoverForm.jsx
index 825c7afaaa..7c8413552c 100644
--- a/web/src/components/storage/iscsi/DiscoverForm.jsx
+++ b/web/src/components/storage/iscsi/DiscoverForm.jsx
@@ -30,6 +30,7 @@ import { Popup } from "~/components/core";
 import { AuthFields } from "~/components/storage/iscsi";
 import { useLocalStorage } from "~/utils";
 import { isValidIp } from "~/client/network/utils";
+import { _ } from "~/i18n";
 
 const defaultData = {
   address: "",
@@ -96,31 +97,33 @@ export default function DiscoverForm({ onSubmit: onSubmitProp, onCancel }) {
   const isDisabled = isLoading || !isValidForm();
 
   return (
-    <Popup isOpen title="Discover iSCSI Targets">
+    // TRANSLATORS: popup title
+    <Popup isOpen title={_("Discover iSCSI Targets")}>
       <Form id={id} onSubmit={onSubmit}>
         { isFailed &&
           <div ref={alertRef}>
             <Alert
               variant="warning"
               isInline
-              title="Something went wrong"
+              title={_("Something went wrong")}
             >
-              <p>Make sure you provide the correct values</p>
+              <p>{_("Make sure you provide the correct values")}</p>
             </Alert>
           </div> }
         <FormGroup
           fieldId="address"
-          label="IP address"
+          label={_("IP address")}
           isRequired
-          helperTextInvalid="Incorrect IP address"
+          helperTextInvalid={_("Incorrect IP address")}
           validated={showAddressError() ? "error" : "default"}
         >
           <TextInput
             id="address"
             name="address"
-            aria-label="Address"
+            // TRANSLATORS: network address
+            aria-label={_("Address")}
             value={data.address || ""}
-            label="Address"
+            label={_("Address")}
             isRequired
             onChange={onAddressChange}
             validated={showAddressError() ? "error" : "default"}
@@ -128,17 +131,18 @@ export default function DiscoverForm({ onSubmit: onSubmitProp, onCancel }) {
         </FormGroup>
         <FormGroup
           fieldId="port"
-          label="Port"
+          label={_("Port")}
           isRequired
-          helperTextInvalid="Incorrect port"
+          helperTextInvalid={_("Incorrect port")}
           validated={showPortError() ? "error" : "default"}
         >
           <TextInput
             id="port"
             name="port"
-            aria-label="Port"
+            // TRANSLATORS: network port number
+            aria-label={_("Port")}
             value={data.port || ""}
-            label="Port"
+            label={_("Port")}
             isRequired
             onChange={onPortChange}
             validated={showPortError() ? "error" : "default"}
diff --git a/web/src/components/storage/iscsi/EditNodeForm.jsx b/web/src/components/storage/iscsi/EditNodeForm.jsx
index 8d68e72f88..f48ac50de1 100644
--- a/web/src/components/storage/iscsi/EditNodeForm.jsx
+++ b/web/src/components/storage/iscsi/EditNodeForm.jsx
@@ -23,7 +23,9 @@ import React, { useState } from "react";
 import {
   Form, FormGroup, FormSelect, FormSelectOption
 } from "@patternfly/react-core";
+import format from "format-util";
 
+import { _ } from "~/i18n";
 import { Popup } from "~/components/core";
 import { NodeStartupOptions } from "~/components/storage/iscsi";
 
@@ -44,7 +46,8 @@ export default function EditNodeForm({ node, onSubmit: onSubmitProp, onCancel })
   const id = "iscsiEditNode";
 
   return (
-    <Popup isOpen title={`Edit ${node.target}`}>
+    // TRANSLATORS: %s is replaced by the iSCSI target node name
+    <Popup isOpen title={format(_("Edit %s"), node.target)}>
       <Form id={id} onSubmit={onSubmit}>
         <FormGroup fieldId="startup" label="Startup">
           <FormSelect
diff --git a/web/src/components/storage/iscsi/InitiatorForm.jsx b/web/src/components/storage/iscsi/InitiatorForm.jsx
index 71e94eb2bb..ad017e47d2 100644
--- a/web/src/components/storage/iscsi/InitiatorForm.jsx
+++ b/web/src/components/storage/iscsi/InitiatorForm.jsx
@@ -22,6 +22,7 @@
 import React, { useState } from "react";
 import { Form, FormGroup, TextInput } from "@patternfly/react-core";
 
+import { _ } from "~/i18n";
 import { Popup } from "~/components/core";
 
 export default function InitiatorForm({ initiator, onSubmit: onSubmitProp, onCancel }) {
@@ -38,15 +39,17 @@ export default function InitiatorForm({ initiator, onSubmit: onSubmitProp, onCan
   const isDisabled = data.name === "";
 
   return (
-    <Popup isOpen title="Edit iSCSI Initiator">
+    <Popup isOpen title={_("Edit iSCSI Initiator")}>
       <Form id={id} onSubmit={onSubmit}>
         <FormGroup fieldId="initiatorName" label="Name" isRequired>
           <TextInput
             id="initiatorName"
             name="name"
-            aria-label="Initiator name"
+            // TRANSLATORS: iSCSI initiator name
+            aria-label={_("Initiator name")}
             value={data.name || ""}
-            label="Name"
+            // TRANSLATORS: input field for the iSCSI initiator name
+            label={_("Name")}
             isRequired
             onChange={onNameChange}
           />
diff --git a/web/src/components/storage/iscsi/InitiatorPresenter.jsx b/web/src/components/storage/iscsi/InitiatorPresenter.jsx
index 9e9eab7ddb..a68a8b1767 100644
--- a/web/src/components/storage/iscsi/InitiatorPresenter.jsx
+++ b/web/src/components/storage/iscsi/InitiatorPresenter.jsx
@@ -23,6 +23,7 @@ import React, { useEffect, useState } from "react";
 import { Skeleton } from "@patternfly/react-core";
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
+import { _ } from "~/i18n";
 import { RowActions } from '~/components/core';
 import { InitiatorForm } from "~/components/storage/iscsi";
 
@@ -45,7 +46,7 @@ export default function InitiatorPresenter({ initiator, client }) {
 
   const initiatorActions = () => {
     const actions = {
-      edit: { title: "Edit", onClick: openForm }
+      edit: { title: _("Edit"), onClick: openForm }
     };
 
     return [actions.edit];
@@ -64,9 +65,11 @@ export default function InitiatorPresenter({ initiator, client }) {
 
     return (
       <Tr>
-        <Td dataLabel="Name">{initiator.name}</Td>
-        <Td dataLabel="iBFT">{initiator.ibft ? "Yes" : "No"}</Td>
-        <Td dataLabel="Offload card">{initiator.offloadCard || "None"}</Td>
+        <Td dataLabel={_("Name")}>{initiator.name}</Td>
+        {/* TRANSLATORS: usually just keep the original text */}
+        {/* iBFT = iSCSI Boot Firmware Table, HW support for booting from iSCSI */}
+        <Td dataLabel={_("iBFT")}>{initiator.ibft ? _("Yes") : _("No")}</Td>
+        <Td dataLabel={_("Offload card")}>{initiator.offloadCard || _("None")}</Td>
         <Td isActionCell>
           <RowActions actions={initiatorActions()} id="actions-for-initiator" />
         </Td>
@@ -79,9 +82,9 @@ export default function InitiatorPresenter({ initiator, client }) {
       <TableComposable variant="compact">
         <Thead>
           <Tr>
-            <Th width={50}>Name</Th>
-            <Th>iBFT</Th>
-            <Th>Offload card</Th>
+            <Th width={50}>{_("Name")}</Th>
+            <Th>{_("iBFT")}</Th>
+            <Th>{_("Offload card")}</Th>
             <Th />
           </Tr>
         </Thead>
diff --git a/web/src/components/storage/iscsi/InitiatorSection.jsx b/web/src/components/storage/iscsi/InitiatorSection.jsx
index 9d2eaca018..e7728eaf11 100644
--- a/web/src/components/storage/iscsi/InitiatorSection.jsx
+++ b/web/src/components/storage/iscsi/InitiatorSection.jsx
@@ -21,6 +21,7 @@
 
 import React, { useEffect, useState } from "react";
 
+import { _ } from "~/i18n";
 import { Section } from "~/components/core";
 import { InitiatorPresenter } from "~/components/storage/iscsi";
 import { useInstallerClient } from "~/context/installer";
@@ -45,7 +46,8 @@ export default function InitiatorSection() {
   }, [cancellablePromise, client.iscsi]);
 
   return (
-    <Section title="Initiator">
+    // TRANSLATORS: iSCSI initiator section name
+    <Section title={_("Initiator")}>
       <InitiatorPresenter
         initiator={initiator}
         client={client}
diff --git a/web/src/components/storage/iscsi/LoginForm.jsx b/web/src/components/storage/iscsi/LoginForm.jsx
index 7ef190e353..8d56d819bc 100644
--- a/web/src/components/storage/iscsi/LoginForm.jsx
+++ b/web/src/components/storage/iscsi/LoginForm.jsx
@@ -24,7 +24,9 @@ import {
   Alert,
   Form, FormGroup, FormSelect, FormSelectOption
 } from "@patternfly/react-core";
+import format from "format-util";
 
+import { _ } from "~/i18n";
 import { Popup } from "~/components/core";
 import { AuthFields, NodeStartupOptions } from "~/components/storage/iscsi";
 
@@ -63,16 +65,18 @@ export default function LoginForm({ node, onSubmit: onSubmitProp, onCancel }) {
   const isDisabled = isLoading || !isValidAuth;
 
   return (
-    <Popup isOpen title={`Login ${node.target}`}>
+    // TRANSLATORS: %s is replaced by the iSCSI target name
+    <Popup isOpen title={format("Login %s", node.target)}>
       <Form id={id} onSubmit={onSubmit}>
         { isFailed &&
-          <Alert variant="warning" isInline title="Something went wrong">
-            <p>Make sure you provide the correct values</p>
+          <Alert variant="warning" isInline title={_("Something went wrong")}>
+            <p>{_("Make sure you provide the correct values")}</p>
           </Alert> }
-        <FormGroup fieldId="startup" label="Startup">
+        {/* TRANSLATORS: iSCSI start up mode (on boot/manual/automatic) */}
+        <FormGroup fieldId="startup" label={_("Startup")}>
           <FormSelect
             id="startup"
-            aria-label="startup"
+            aria-label={_("Startup")}
             value={data.startup}
             onChange={onStartupChange}
           >
diff --git a/web/src/components/storage/iscsi/NodeStartupOptions.js b/web/src/components/storage/iscsi/NodeStartupOptions.js
index fdfec899ac..1b9486f15a 100644
--- a/web/src/components/storage/iscsi/NodeStartupOptions.js
+++ b/web/src/components/storage/iscsi/NodeStartupOptions.js
@@ -19,10 +19,12 @@
  * find current contact information at www.suse.com.
  */
 
+import { _ } from "~/i18n";
+
 const NodeStartupOptions = Object.freeze({
-  MANUAL: { label: "Manual", value: "manual" },
-  ONBOOT: { label: "On boot", value: "onboot" },
-  AUTOMATIC: { label: "Automatic", value: "automatic" }
+  MANUAL: { label: _("Manual"), value: "manual" },
+  ONBOOT: { label: _("On boot"), value: "onboot" },
+  AUTOMATIC: { label: _("Automatic"), value: "automatic" }
 });
 
 export default NodeStartupOptions;
diff --git a/web/src/components/storage/iscsi/NodesPresenter.jsx b/web/src/components/storage/iscsi/NodesPresenter.jsx
index e3f2b6a40d..b091aa64f6 100644
--- a/web/src/components/storage/iscsi/NodesPresenter.jsx
+++ b/web/src/components/storage/iscsi/NodesPresenter.jsx
@@ -21,7 +21,9 @@
 
 import React, { useState } from "react";
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import format from "format-util";
 
+import { _ } from "~/i18n";
 import { RowActions } from '~/components/core';
 import { EditNodeForm, LoginForm, NodeStartupOptions } from "~/components/storage/iscsi";
 
@@ -57,29 +59,31 @@ export default function NodesPresenter ({ nodes, client }) {
   };
 
   const nodeStatus = (node) => {
-    if (!node.connected) return "Disconnected";
+    // TRANSLATORS: iSCSI connection status
+    if (!node.connected) return _("Disconnected");
 
     const startup = Object.values(NodeStartupOptions).find(o => o.value === node.startup);
-    return `Connected (${startup.label})`;
+    // TRANSLATORS: iSCSI connection status, %s is replaced by node label
+    return format(_("Connected (%s)"), startup.label);
   };
 
   const nodeActions = (node) => {
     const actions = {
       edit: {
-        title: "Edit",
+        title: _("Edit"),
         onClick: () => openEditForm(node)
       },
       delete: {
-        title: "Delete",
+        title: _("Delete"),
         onClick: () => client.iscsi.delete(node),
         className: "danger-action"
       },
       login: {
-        title: "Login",
+        title: _("Login"),
         onClick: () => openLoginForm(node)
       },
       logout: {
-        title: "Logout",
+        title: _("Logout"),
         onClick: () => client.iscsi.logout(node)
       }
     };
@@ -93,11 +97,11 @@ export default function NodesPresenter ({ nodes, client }) {
   const NodeRow = ({ node }) => {
     return (
       <Tr>
-        <Td dataLabel="Name">{node.target}</Td>
-        <Td dataLabel="Portal">{node.address + ":" + node.port}</Td>
-        <Td dataLabel="Interface">{node.interface}</Td>
-        <Td dataLabel="iBFT">{node.ibft ? "Yes" : "No"}</Td>
-        <Td dataLabel="Status">{nodeStatus(node)}</Td>
+        <Td dataLabel={_("Name")}>{node.target}</Td>
+        <Td dataLabel={_("Portal")}>{node.address + ":" + node.port}</Td>
+        <Td dataLabel={_("Interface")}>{node.interface}</Td>
+        <Td dataLabel={_("iBFT")}>{node.ibft ? _("Yes") : _("No")}</Td>
+        <Td dataLabel={_("Status")}>{nodeStatus(node)}</Td>
         <Td isActionCell>
           <RowActions actions={nodeActions(node)} id={`actions-for-node${node.id}`} />
         </Td>
@@ -114,11 +118,11 @@ export default function NodesPresenter ({ nodes, client }) {
       <TableComposable variant="compact">
         <Thead>
           <Tr>
-            <Th>Name</Th>
-            <Th>Portal</Th>
-            <Th>Interface</Th>
-            <Th>iBFT</Th>
-            <Th>Status</Th>
+            <Th>{_("Name")}</Th>
+            <Th>{_("Portal")}</Th>
+            <Th>{_("Interface")}</Th>
+            <Th>{_("iBFT")}</Th>
+            <Th>{_("Status")}</Th>
             <Th />
           </Tr>
         </Thead>
diff --git a/web/src/components/storage/iscsi/TargetsSection.jsx b/web/src/components/storage/iscsi/TargetsSection.jsx
index a61e5a2a52..4462a8edef 100644
--- a/web/src/components/storage/iscsi/TargetsSection.jsx
+++ b/web/src/components/storage/iscsi/TargetsSection.jsx
@@ -25,6 +25,7 @@ import {
   Toolbar, ToolbarItem, ToolbarContent,
 } from "@patternfly/react-core";
 
+import { _ } from "~/i18n";
 import { Section, SectionSkeleton } from "~/components/core";
 import { NodesPresenter, DiscoverForm } from "~/components/storage/iscsi";
 import { useInstallerClient } from "~/context/installer";
@@ -135,9 +136,10 @@ export default function TargetsSection() {
     if (state.nodes.length === 0) {
       return (
         <div className="stack">
-          <div className="bold">No iSCSI targets found</div>
-          <div>Please, perform an iSCSI discovery in order to find available iSCSI targets.</div>
-          <Button variant="primary" onClick={openDiscoverForm}>Discover iSCSI targets</Button>
+          <div className="bold">{_("No iSCSI targets found")}</div>
+          <div>{_("Please, perform an iSCSI discovery in order to find available iSCSI targets.")}</div>
+          {/* TRANSLATORS: button label, starts iSCSI discovery */}
+          <Button variant="primary" onClick={openDiscoverForm}>{_("Discover iSCSI targets")}</Button>
         </div>
       );
     }
@@ -147,7 +149,8 @@ export default function TargetsSection() {
         <Toolbar className="no-stack-gutter">
           <ToolbarContent alignment="alignRight">
             <ToolbarItem alignment={{ default: "alignRight" }}>
-              <Button onClick={openDiscoverForm}>Discover</Button>
+              {/* TRANSLATORS: button label, starts iSCSI discovery */}
+              <Button onClick={openDiscoverForm}>{_("Discover")}</Button>
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
@@ -160,7 +163,8 @@ export default function TargetsSection() {
   };
 
   return (
-    <Section title="Targets">
+    // TRANSLATORS: iSCSI targets section title
+    <Section title={_("Targets")}>
       <SectionContent />
       { state.isDiscoverFormOpen &&
         <DiscoverForm