From d75a9cb29b06bfd1765998ea5152e66fca31b40a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ladislav=20Slez=C3=A1k?= <lslezak@suse.com>
Date: Tue, 10 Oct 2023 16:03:03 +0200
Subject: [PATCH 1/2] Translate also the DevServerWrapper component

---
 web/.eslintrc.json           |  2 +-
 web/src/DevServerWrapper.jsx | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/.eslintrc.json b/web/.eslintrc.json
index b4ef3b3fc6..e3545f56c7 100644
--- a/web/.eslintrc.json
+++ b/web/.eslintrc.json
@@ -62,7 +62,7 @@
     "overrides": [
       {
         // do not check translations in the testing or development files
-        "files": ["*.test.*", "test-utils.js", "DevServerWrapper.jsx"],
+        "files": ["*.test.*", "test-utils.js"],
         "rules": {
           "i18next/no-literal-string": "off"
         }
diff --git a/web/src/DevServerWrapper.jsx b/web/src/DevServerWrapper.jsx
index da17411193..c2397bdde8 100644
--- a/web/src/DevServerWrapper.jsx
+++ b/web/src/DevServerWrapper.jsx
@@ -26,6 +26,7 @@ import {
   EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon
 } from "@patternfly/react-core";
 import { Center, Icon, Loading } from "~/components/layout";
+import { _ } from "~/i18n";
 
 // path to any internal Cockpit component to force displaying the login dialog
 const loginPath = "/cockpit/@localhost/system/terminal.html";
@@ -77,26 +78,30 @@ export default function DevServerWrapper({ children }) {
   if (isLoading) return <Loading />;
 
   if (isError) {
+    // TRANSLATORS: error message, %s is replaced by the server URL
+    const [msg1, msg2] = _("The server at %s is not reachable.").split("%s");
     return (
       <Center>
         <EmptyState variant="xl">
           <EmptyStateHeader
-            titleText="Cannot connect to the Cockpit server"
+            // TRANSLATORS: error message
+            titleText={_("Cannot connect to the Cockpit server")}
             headingLevel="h2"
             icon={<EmptyStateIcon icon={ErrorIcon} />}
           />
           <EmptyStateBody>
             <Text>
-              The server at { " " }
-              <Button isInline variant="link" component="a" href={ COCKPIT_TARGET_URL } target="_blank">
-                { COCKPIT_TARGET_URL }
+              {msg1} {" "}
+              <Button isInline variant="link" component="a" href={COCKPIT_TARGET_URL} target="_blank">
+                {COCKPIT_TARGET_URL}
               </Button>
-              { " " } is not reachable.
+              {" "} {msg2}
             </Text>
           </EmptyStateBody>
           <EmptyStateFooter>
             <Button variant="primary" onClick={() => { setIsLoading(true); setIsError(false) }}>
-              Try Again
+              {/* TRANSLATORS: button label */}
+              {_("Try Again")}
             </Button>
           </EmptyStateFooter>
         </EmptyState>

From f688733057394cba2a89fc06c8bd06a3db5a047d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ladislav=20Slez=C3=A1k?= <lslezak@suse.com>
Date: Tue, 10 Oct 2023 16:13:57 +0200
Subject: [PATCH 2/2] Fixed translation marks

---
 web/src/components/core/InstallButton.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/core/InstallButton.jsx b/web/src/components/core/InstallButton.jsx
index 44f56b50a5..fb5eb9af70 100644
--- a/web/src/components/core/InstallButton.jsx
+++ b/web/src/components/core/InstallButton.jsx
@@ -63,8 +63,8 @@ before proceeding with the installation.").split(/[[\]]/);
       <div className="stack">
         <If condition={hasIssues} then={<IssuesWarning />} />
         <p>
-          { _(`If you continue, partitions on your hard disk will be modified
-according to the provided installation settings.`) }
+          { _("If you continue, partitions on your hard disk will be modified \
+according to the provided installation settings.") }
         </p>
         <p>
           {_("Please, cancel and check the settings if you are unsure.")}
@@ -87,8 +87,8 @@ const CannotInstallPopup = ({ onClose }) => (
     isOpen
   >
     <p>
-      {_(`Some problems were found when trying to start the installation.
-Please, have a look to the reported errors and try again.`)}
+      {_("Some problems were found when trying to start the installation. \
+Please, have a look to the reported errors and try again.")}
     </p>
 
     <Popup.Actions>