Mark translatable texts

.github/workflows/weblate-update-pot.yml

@@ -35,13 +35,11 @@ jobs:
         # TODO: use a shared script for this
         run: |
           cd agama/web
-          xgettext --default-domain=agama --output=- --language=C --keyword= \
-            --keyword=_:1,1t --keyword=_:1c,2,2t --keyword=C_:1c,2 \
-            --keyword=N_ --keyword=NC_:1c,2 --foreign-user \
-            --copyright-holder="SuSE Linux Products GmbH, Nuernberg" \
+          xgettext --default-domain=agama --output=agama.pot --language=JavaScript --keyword= \
+            --keyword=_:1 --keyword=N_:1 --keyword=n_:1,2,3t --keyword=Nn_:1,2,3t \
+            --foreign-user --copyright-holder="SuSE Linux Products GmbH, Nuernberg" \
             --from-code=UTF-8 --add-comments=TRANSLATORS --sort-by-file \
-            $(find . ! -name cockpit.js -name '*.js' -o ! -name '*.test.jsx' -name '*.jsx') | \
-            sed '/^#/ s/, c-format//' > agama.pot
+            $(find . ! -name cockpit.js -name '*.js' -o ! -name '*.test.jsx' -name '*.jsx')
             msgfmt --statistics agama.pot
 
       - name: Validate the generated POT file

web/src/components/core/About.jsx

@@ -23,6 +23,9 @@ import React, { useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { Popup } from "~/components/core";
+import { _ } from "~/i18n";
+
+import cockpit from "~/lib/cockpit";
 
 export default function About() {
   const [isOpen, setIsOpen] = useState(false);
@@ -37,23 +40,35 @@ export default function About() {
         icon={<Icon name="help" size="24" />}
         onClick={open}
       >
-        About Agama
+        {_("About Agama")}
       </Button>
 
       <Popup
         isOpen={isOpen}
-        title="About Agama"
+        title={_("About Agama")}
       >
         <Text>
-          Agama is an <strong>experimental installer</strong> for (open)SUSE systems. It is
-          still under development so, please, do not use it in production environments. If you want
-          to give it a try, we recommend to use a virtual machine to prevent any possible data loss.
+          {
+            // TRANSLATORS: content of the "About" popup (1/2)
+            _(`Agama is an experimental installer for (open)SUSE systems. It
+still under development so, please, do not use it in
+production environments. If you want to give it a try, we
+recommend to use a virtual machine to prevent any possible
+data loss.`)
+          }
         </Text>
         <Text>
-          For more information, please visit the project's repository at https://github.com/openSUSE/Agama.
+          {
+            cockpit.format(
+              // TRANSLATORS: content of the "About" popup (2/2)
+              // $0 is replaced by the project URL
+              _("For more information, please visit the project's repository at $0."),
+              "https://github.com/openSUSE/agama"
+            )
+          }
         </Text>
         <Popup.Actions>
-          <Popup.Confirm onClick={close} autoFocus>Close</Popup.Confirm>
+          <Popup.Confirm onClick={close} autoFocus>{_("Close")}</Popup.Confirm>
         </Popup.Actions>
       </Popup>
     </>

web/src/components/core/InstallButton.jsx

@@ -26,6 +26,7 @@ import { Button } from "@patternfly/react-core";
 import { useNavigate } from "react-router-dom";
 
 import { If, Popup } from "~/components/core";
+import { _ } from "~/i18n";
 
 const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
   const navigate = useNavigate();
@@ -41,29 +42,46 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
 
     return (
       <p className="bold">
-        There are some reported issues. Please, check <IssuesLink text="the list of issues" /> before
-        proceeding with the installation.
+        {
+          // 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.")
+        }
       </p>
     );
   };
 
   return (
     <Popup
-      title="Confirm Installation"
+      title={_("Confirm Installation")}
       isOpen
     >
       <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.
+          {_("Please, cancel and check the settings if you are unsure.")}
         </p>
       </div>
       <Popup.Actions>
-        <Popup.Confirm onClick={onAccept}>Continue</Popup.Confirm>
+        <Popup.Confirm onClick={onAccept}>
+          {/* TRANSLATORS: button label */}
+          {_("Continue")}
+        </Popup.Confirm>
         <Popup.Cancel onClick={onClose} autoFocus />
       </Popup.Actions>
     </Popup>
@@ -72,16 +90,19 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
 
 const CannotInstallPopup = ({ onClose }) => (
   <Popup
-    title="Problems Found"
+    title={_("Problems Found")}
     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>
-      <Popup.Cancel onClick={onClose} autoFocus>Accept</Popup.Cancel>
+      <Popup.Cancel onClick={onClose} autoFocus>
+        {/* TRANSLATORS: button label */}
+        {_("Accept")}
+      </Popup.Cancel>
     </Popup.Actions>
   </Popup>
 );
@@ -127,7 +148,8 @@ const InstallButton = ({ onClick }) => {
   return (
     <>
       <Button isLarge variant="primary" onClick={open}>
-        Install
+        {/* TRANSLATORS: button label */}
+        {_("Install")}
       </Button>
 
       { isOpen && renderPopup(error, hasIssues, { onAccept: install, onClose: close }) }

web/src/components/core/InstallationFinished.jsx

@@ -31,12 +31,17 @@ import {
 
 import { Center, Icon, Title as SectionTitle, PageIcon, MainActions } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
+import { _ } from "~/i18n";
 
 function InstallationFinished() {
   const client = useInstallerClient();
   const [iguana, setIguana] = useState(false);
   const closingAction = () => client.manager.finishInstallation();
-  const buttonCaption = iguana ? "Finish" : "Reboot";
+  const buttonCaption = iguana
+    // TRANSLATORS: button label
+    ? _("Finish")
+    // TRANSLATORS: button label
+    : _("Reboot");
 
   useEffect(() => {
     async function getIguana() {
@@ -49,7 +54,7 @@ function InstallationFinished() {
 
   return (
     <Center>
-      <SectionTitle>Installation Finished</SectionTitle>
+      <SectionTitle>{_("Installation Finished")}</SectionTitle>
       <PageIcon><Icon name="task_alt" /></PageIcon>
       <MainActions>
         <Button isLarge variant="primary" onClick={closingAction}>
@@ -60,15 +65,19 @@ function InstallationFinished() {
       <EmptyState>
         <EmptyStateIcon icon={({ ...props }) => <Icon name="check_circle" { ...props } />} className="color-success" />
         <Title headingLevel="h2" size="4xl">
-          Congratulations!
+          {_("Congratulations!")}
         </Title>
         <EmptyStateBody className="pf-c-content">
           <div>
-            <Text>The installation on your machine is complete.</Text>
+            <Text>{_("The installation on your machine is complete.")}</Text>
             <Text>
-              At this point you can {buttonCaption} the machine to log in to the new system.
+              {
+                iguana
+                  ? _("At this point you can power off the machine.")
+                  : _("At this point you can reboot the machine to log in to the new system.")
+              }
             </Text>
-            <Text>Have a lot of fun! Your openSUSE Development Team.</Text>
+            <Text>{_("Have a lot of fun! Your openSUSE Development Team.")}</Text>
           </div>
         </EmptyStateBody>
       </EmptyState>

web/src/components/core/InstallationProgress.jsx

@@ -24,11 +24,12 @@ import React from "react";
 import ProgressReport from "./ProgressReport";
 import { Center, Icon, Title, PageIcon } from "~/components/layout";
 import { Questions } from "~/components/questions";
+import { _ } from "~/i18n";
 
 function InstallationProgress() {
   return (
     <>
-      <Title>Installing</Title>
+      <Title>{_("Installing")}</Title>
       <PageIcon><Icon name="downloading" /></PageIcon>
       <Center><ProgressReport /></Center>
       <Questions />

web/src/components/core/IssuesLink.jsx

@@ -25,6 +25,7 @@ import { Link } from "react-router-dom";
 import { Icon } from "~/components/layout";
 import { If, NotificationMark } from "~/components/core";
 import { useNotification } from "~/context/notification";
+import { _ } from "~/i18n";
 
 /**
  * Link to go to the issues page
@@ -36,10 +37,10 @@ export default function IssuesLink() {
   return (
     <Link to="/issues">
       <Icon name="problem" size="24" />
-      Show issues
+      {_("Show issues")}
       <If
         condition={notification.issues}
-        then={<NotificationMark aria-label="There are new issues" />}
+        then={<NotificationMark aria-label={_("There are new issues")} />}
       />
     </Link>
   );

web/src/components/core/IssuesPage.jsx

@@ -28,6 +28,7 @@ import { If, Page, Section } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 import { useNotification } from "~/context/notification";
+import { _ } from "~/i18n";
 
 /**
  * Renders an issue
@@ -111,7 +112,7 @@ const IssuesContent = ({ issues }) => {
     return (
       <HelperText className="issue">
         <HelperTextItem variant="success" hasIcon icon={<Icon name="task_alt" />}>
-          No issues found. Everything looks ok.
+          {_("No issues found. Everything looks ok.")}
         </HelperTextItem>
       </HelperText>
     );

web/src/components/core/LogsButton.jsx

@@ -25,6 +25,7 @@ import { useCancellablePromise } from "~/utils";
 
 import { Alert, Button } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
+import { _ } from "~/i18n";
 
 const FILENAME = "y2logs.tar.xz";
 const FILETYPE = "application/x-xz";
@@ -94,23 +95,23 @@ const LogsButton = ({ ...props }) => {
         icon={isCollecting ? null : <Icon name="download" size="24" />}
         {...props}
       >
-        {isCollecting ? "Collecting logs..." : "Download logs"}
+        {isCollecting ? _("Collecting logs...") : _("Download logs")}
       </Button>
 
       { isCollecting &&
         <Alert
           isInline
           isPlain
           variant="info"
-          title="The browser will run the logs download as soon as they are ready. Please, be patient."
+          title={_("The browser will run the logs download as soon as they are ready. Please, be patient.")}
         /> }
 
       { error &&
         <Alert
           isInline
           isPlain
           variant="warning"
-          title="Something went wrong while collecting logs. Please, try again."
+          title={_("Something went wrong while collecting logs. Please, try again.")}
         /> }
     </>
   );

web/src/components/core/PasswordAndConfirmationInput.jsx

@@ -24,6 +24,7 @@ import {
   FormGroup,
   TextInput
 } from "@patternfly/react-core";
+import { _ } from "~/i18n";
 
 const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled, split = false }) => {
   const [confirmation, setConfirmation] = useState(value || "");
@@ -33,7 +34,7 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
     let newError = "";
 
     if (password !== passwordConfirmation) {
-      newError = "Passwords do not match";
+      newError = _("Passwords do not match");
     }
 
     setError(newError);
@@ -54,12 +55,12 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
 
   return (
     <div className={split ? "split" : "stack"}>
-      <FormGroup fieldId="password" label="Password">
+      <FormGroup fieldId="password" label={_("Password")}>
         <TextInput
           id="password"
           name="password"
           type="password"
-          aria-label="User password"
+          aria-label={_("User password")}
           value={value}
           isDisabled={isDisabled}
           onChange={onChangeValue}
@@ -68,15 +69,15 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
       </FormGroup>
       <FormGroup
         fieldId="passwordConfirmation"
-        label="Password confirmation"
+        label={_("Password confirmation")}
         helperTextInvalid={error}
         validated={error === "" ? "default" : "error"}
       >
         <TextInput
           id="passwordConfirmation"
           name="passwordConfirmation"
           type="password"
-          aria-label="User password confirmation"
+          aria-label={_("User password confirmation")}
           value={confirmation}
           isDisabled={isDisabled}
           onChange={onChangeConfirmation}

web/src/components/core/RowActions.jsx

@@ -24,6 +24,7 @@ import { DropdownToggle } from "@patternfly/react-core";
 import { ActionsColumn } from '@patternfly/react-table';
 
 import { Icon } from '~/components/layout';
+import { _ } from "~/i18n";
 
 /**
  * Renders icon for selecting the options of a row in a table
@@ -58,7 +59,7 @@ export default function RowActions({ id, actions, "aria-label": toggleAriaLabel,
   const actionsToggle = (props) => (
     <DropdownToggle
       id={id}
-      aria-label={toggleAriaLabel || "Actions"}
+      aria-label={toggleAriaLabel || _("Actions")}
       toggleIndicator={null}
       isDisabled={props.isDisabled}
       onToggle={props.onToggle}

web/src/components/core/SectionSkeleton.jsx

@@ -21,16 +21,17 @@
 
 import React from "react";
 import { Skeleton } from "@patternfly/react-core";
+import { _ } from "~/i18n";
 
 const SectionSkeleton = () => (
   <>
     <Skeleton
-      screenreaderText="Waiting..."
+      screenreaderText={_("Waiting")}
       fontSize="sm"
       width="50%"
     />
     <Skeleton
-      screenreaderText="Waiting..."
+      screenreaderText={_("Waiting")}
       fontSize="sm"
       width="25%"
     />