Translate more texts

web/src/components/core/InstallButton.jsx

@@ -40,24 +40,17 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
       );
     };
 
+    // TRANSLATORS: the installer reports some errors,
+    // the part in curly brackets {} is a clickable link
+    const [msgStart, msgLink, msgEnd] = _("There are some reported issues. \
+Please, check {the list of issues} \
+before proceeding with the installation.").split(/[{}]/);
+
     return (
       <p className="bold">
-        {
-          // TRANSLATORS: the installer reports some errors,
-          // the beginning (1/3)
-          _("There are some reported issues. Please, check")
-        }
-        <IssuesLink text={
-          // TRANSLATORS: the installer reports some errors,
-          // the middle part (a clickable link) (2/3)
-          _("the list of issues")
-        }
-        />
-        {
-          // TRANSLATORS: the installer reports some errors,
-          // the end (3/3)
-          _("before proceeding with the installation.")
-        }
+        {msgStart}
+        <IssuesLink text={msgLink} />
+        {msgEnd}
       </p>
     );
   };

web/src/components/overview/L10nSection.jsx

@@ -24,6 +24,7 @@ import { Text } from "@patternfly/react-core";
 import { Em, Section, SectionSkeleton } from "~/components/core";
 import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
+import { _ } from "~/i18n";
 
 const initialState = {
   busy: true,
@@ -64,17 +65,21 @@ export default function L10nSection({ showErrors }) {
 
     const selected = languages.find(lang => lang.id === language);
 
+    // TRANSLATORS: %s will be replaced by a language name and code,
+    // example: "English (en_US.UTF-8)"
+    const [msg1, msg2] = _("The system will use %s as its default language.").split("%s");
     return (
       <Text>
-        The system will use <Em>{`${selected.name} (${selected.id})`}</Em> as its default language.
+        {msg1}<Em>{`${selected.name} (${selected.id})`}</Em>{msg2}
       </Text>
     );
   };
 
   return (
     <Section
       key="l10n-section"
-      title="Localization"
+      // TRANSLATORS: page section
+      title={_("Localization")}
       loading={state.busy}
       icon="translate"
       path="/l10n"

web/src/components/overview/NetworkSection.jsx

@@ -20,10 +20,13 @@
  */
 
 import React, { useEffect, useState } from "react";
+import format from "format-util";
+
 import { Em, Section, SectionSkeleton } from "~/components/core";
 import { ConnectionTypes, NetworkEventTypes } from "~/client/network";
 import { useInstallerClient } from "~/context/installer";
 import { formatIp } from "~/client/network/utils";
+import { _, n_ } from "~/i18n";
 
 export default function NetworkSection() {
   const { network: client } = useInstallerClient();
@@ -72,23 +75,31 @@ export default function NetworkSection() {
 
     const activeConnections = connections.filter(c => [ConnectionTypes.WIFI, ConnectionTypes.ETHERNET].includes(c.type));
 
-    if (activeConnections.length === 0) return "No network connections detected";
+    if (activeConnections.length === 0) return _("No network connections detected");
 
     const summary = activeConnections.map(connection => (
       <Em key={connection.id}>{connection.name} - {connection.addresses.map(formatIp)}</Em>
     ));
 
+    const msg = format(
+      // TRANSLATORS: header for the list of active network connections,
+      // %d is replaced by the number of active connections
+      n_("%d connection set:", "%d connections set:", activeConnections.length),
+      activeConnections.length
+    );
+
     return (
       <>
-        <div>{activeConnections.length} connection(s) set:</div>
+        <div>{msg}</div>
         <div className="split wrapped">{summary}</div>
       </>
     );
   };
 
   return (
     <Section
-      title="Network"
+      // TRANSLATORS: page section title
+      title={_("Network")}
       icon="settings_ethernet"
       loading={!initialized}
       path="/network"

web/src/components/overview/SoftwareSection.jsx

@@ -26,13 +26,14 @@ import { Icon } from "~/components/layout";
 import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
 import { BUSY } from "~/client/status";
+import { _ } from "~/i18n";
 
 const initialState = {
   busy: true,
   errors: [],
   errorsRead: false,
   size: "",
-  progress: { message: "Reading software repositories", current: 0, total: 0, finished: false }
+  progress: { message: _("Reading software repositories"), current: 0, total: 0, finished: false }
 };
 
 const reducer = (state, action) => {
@@ -114,8 +115,11 @@ export default function SoftwareSection({ showErrors }) {
   const UsedSize = () => {
     if (state.size === "" || state.size === "0 B") return null;
 
+    // TRANSLATORS: %s will be replaced by the estimated installation size,
+    // example: "728.8 MiB"
+    const [msg1, msg2] = _("Installation will take %s").split("%s");
     return (
-      <>Installation will take <Em>{state.size}</Em></>
+      <>{msg1}<Em>{state.size}</Em>{msg2}</>
     );
   };
 
@@ -137,7 +141,8 @@ export default function SoftwareSection({ showErrors }) {
             icon={<Icon name="refresh" size="16" />}
             onClick={probe}
           >
-            Refresh the repositories
+            {/* TRANSLATORS: clickable link label */}
+            {_("Refresh the repositories")}
           </Button>}
       </>
     );
@@ -146,7 +151,8 @@ export default function SoftwareSection({ showErrors }) {
   return (
     <Section
       key="software-section"
-      title="Software"
+      // TRANSLATORS: page section
+      title={_("Software")}
       icon="apps"
       loading={state.busy}
       errors={errors}

web/src/components/overview/StorageSection.jsx

@@ -27,20 +27,24 @@ import { useInstallerClient } from "~/context/installer";
 import { BUSY } from "~/client/status";
 import { deviceLabel } from "~/components/storage/utils";
 import { Em, ProgressText, Section } from "~/components/core";
+import { _ } from "~/i18n";
 
 const ProposalSummary = ({ proposal }) => {
   const { result } = proposal;
 
-  if (result === undefined) return <Text>Device not selected yet</Text>;
+  if (result === undefined) return <Text>{_("Device not selected yet")}</Text>;
 
   const [candidateDevice] = result.candidateDevices;
   const device = proposal.availableDevices.find(d => d.name === candidateDevice);
 
   const label = device ? deviceLabel(device) : candidateDevice;
 
+  // TRANSLATORS: %s will be replaced by the device name and its size,
+  // example: "/dev/sda, 20 GiB"
+  const [msg1, msg2] = _("Install using device %s and deleting all its content").split("%s");
   return (
     <Text>
-      Install using device <Em>{label}</Em> and deleting all its content
+      {msg1}<Em>{label}</Em>{msg2}
     </Text>
   );
 };
@@ -49,7 +53,7 @@ const initialState = {
   busy: true,
   proposal: undefined,
   errors: [],
-  progress: { message: "Probing storage devices", current: 0, total: 0 }
+  progress: { message: _("Probing storage devices"), current: 0, total: 0 }
 };
 
 const reducer = (state, action) => {
@@ -156,7 +160,8 @@ export default function StorageSection({ showErrors = false }) {
   return (
     <Section
       key="storage-section"
-      title="Storage"
+      // TRANSLATORS: page section title
+      title={_("Storage")}
       path="/storage"
       icon="hard_drive"
       loading={busy}

web/src/components/overview/UsersSection.jsx

@@ -23,6 +23,7 @@ import React, { useReducer, useEffect } from "react";
 import { If, Em, Section, SectionSkeleton } from "~/components/core";
 import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
+import { _ } from "~/i18n";
 
 const initialState = {
   busy: true,
@@ -75,13 +76,15 @@ export default function UsersSection({ showErrors }) {
 
   const errors = showErrors ? state.errors : [];
 
+  // TRANSLATORS: %s will be replaced by the user name
+  const [msg1, msg2] = _("User %s will be created").split("%s");
   const UserSummary = () => {
     return (
       <div>
         <If
           condition={user?.userName !== ""}
-          then={<>User <Em>{state.user.userName}</Em> will be created</>}
-          else={<>No user defined yet</>}
+          then={<>{msg1}<Em>{state.user.userName}</Em>{msg2}</>}
+          else={<>{_("No user defined yet")}</>}
         />
       </div>
     );
@@ -95,10 +98,10 @@ export default function UsersSection({ showErrors }) {
 
     return (
       <div>
-        <If condition={both} then={<>Root authentication set for using both, password and public SSH Key</>} />
-        <If condition={none} then={<>No root authentication method defined</>} />
-        <If condition={onlyPassword} then={<>Root authentication set for using password</>} />
-        <If condition={onlySSHKey} then={<>Root authentication set for using public SSH Key</>} />
+        <If condition={both} then={<>{_("Root authentication set for using both, password and public SSH Key")}</>} />
+        <If condition={none} then={<>{_("No root authentication method defined")}</>} />
+        <If condition={onlyPassword} then={<>{_("Root authentication set for using password")}</>} />
+        <If condition={onlySSHKey} then={<>{_("Root authentication set for using public SSH Key")}</>} />
       </div>
     );
   };
@@ -113,7 +116,8 @@ export default function UsersSection({ showErrors }) {
   return (
     <Section
       key="users-section"
-      title="Users"
+      // TRANSLATORS: page section title
+      title={_("Users")}
       icon="manage_accounts"
       loading={state.busy}
       errors={errors}