Translate the storage texts

web/src/components/core/InstallButton.jsx

@@ -41,10 +41,10 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
  };
 
  // TRANSLATORS: the installer reports some errors,
- // the part in curly brackets {} is a clickable link
+ // the text in square 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(/[{}]/);
+Please, check [the list of issues] \
+before proceeding with the installation.").split(/[[\]]/);
 
  return (
  <p className="bold">

web/src/components/core/Popup.jsx

@@ -21,6 +21,8 @@
 
 import React, { useLayoutEffect } from "react";
 import { Button, Modal } from "@patternfly/react-core";
+
+import { _ } from "~/i18n";
 import { partition } from "~/utils";
 
 /**
@@ -85,7 +87,7 @@ const PrimaryAction = ({ children, ...props }) => (
  * @param {React.ReactNode} [props.children="confirm"] - content of the action
  * @param {object} [props] - {@link Action} props
  */
-const Confirm = ({ children = "Confirm", ...props }) => (
+const Confirm = ({ children = _("Confirm"), ...props }) => (
  <PrimaryAction key="confirm" { ...props }>{ children }</PrimaryAction>
 );
 
@@ -123,7 +125,7 @@ const SecondaryAction = ({ children, ...props }) => (
  * @param {React.ReactNode} [props.children="Cancel"] - content of the action
  * @param {object} [props] - {@link Action} props
  */
-const Cancel = ({ children = "Cancel", ...props }) => (
+const Cancel = ({ children = _("Cancel"), ...props }) => (
  <SecondaryAction key="cancel" { ...props }>{ children }</SecondaryAction>
 );
 

web/src/components/storage/DASDFormatProgress.jsx

@@ -21,6 +21,8 @@
 
 import React, { useEffect, useState } from "react";
 import { Progress, Skeleton } from '@patternfly/react-core';
+
+import { _ } from "~/i18n";
 import { If, Popup } from "~/components/core";
 import { useInstallerClient } from "~/context/installer";
 
@@ -56,15 +58,15 @@ export default function DASDFormatProgress({ job, devices, isOpen = true }) {
 
  const WaitingProgress = () => (
  <div className="stack">
- <div>Waiting for progress report</div>
+ <div>{_("Waiting for progress report")}</div>
  <Skeleton height="10px" />
  <Skeleton height="10px" />
  </div>
  );
 
  return (
  <Popup
- title="Formatting DASD devices"
+ title={_("Formatting DASD devices")}
  isOpen={isOpen}
  disableFocusTrap
  >

web/src/components/storage/DASDPage.jsx

@@ -22,6 +22,8 @@
 import React, { useEffect, useReducer } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@patternfly/react-core";
+
+import { _ } from "~/i18n";
 import { MainActions } from "~/components/layout";
 import { If, Page } from "~/components/core";
 import { DASDFormatProgress, DASDTable } from "~/components/storage";
@@ -179,9 +181,10 @@ export default function DASDPage() {
  }, [client.dasd]);
 
  return (
- <Page title="Storage DASD" icon="hard_drive">
+ // TRANSLATORS: DASD = Direct Access Storage Device, IBM mainframe storage technology
+ <Page title={_("Storage DASD")} icon="hard_drive">
  <MainActions>
- <Button isLarge variant="secondary" onClick={() => navigate("/storage")}>Back</Button>
+ <Button isLarge variant="secondary" onClick={() => navigate("/storage")}>{_("Back")}</Button>
  </MainActions>
 
  <DASDTable state={state} dispatch={dispatch} />

web/src/components/storage/DASDTable.jsx

@@ -29,6 +29,7 @@ import {
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { sort } from 'fast-sort';
 
+import { _ } from "~/i18n";
 import { Icon } from "~/components/layout";
 import { If, SectionSkeleton } from "~/components/core";
 import { hex } from "~/utils";
@@ -51,20 +52,20 @@ const columnData = (device, column) => {
  }
 
  if (typeof data === "boolean") {
- return data ? "Yes" : "No";
+ return data ? _("Yes") : _("No");
  }
 
  return data;
 };
 
 const columns = [
- { id: "channelId", sortId: "hexId", label: "Channel ID" },
- { id: "status", label: "Status" },
- { id: "name", label: "Device" },
- { id: "type", label: "Type" },
- { id: "diag", label: "Diag" },
- { id: "formatted", label: "Formatted" },
- { id: "partitionInfo", label: "Partition Info" }
+ { id: "channelId", sortId: "hexId", label: _("Channel ID") },
+ { id: "status", label: _("Status") },
+ { id: "name", label: _("Device") },
+ { id: "type", label: _("Type") },
+ { id: "diag", label: _("Diag") },
+ { id: "formatted", label: _("Formatted") },
+ { id: "partitionInfo", label: _("Partition Info") }
 ];
 
 const Actions = ({ devices, isDisabled }) => {
@@ -97,17 +98,23 @@ const Actions = ({ devices, isDisabled }) => {
  isOpen={isOpen}
  onSelect={onSelect}
  dropdownItems={[
- <Action key="activate" onClick={activate}>Activate</Action>,
- <Action key="deactivate" onClick={deactivate}>Deactivate</Action>,
+ // TRANSLATORS: drop down menu action, activate the device
+ <Action key="activate" onClick={activate}>{_("Activate")}</Action>,
+ // TRANSLATORS: drop down menu action, deactivate the device
+ <Action key="deactivate" onClick={deactivate}>{_("Deactivate")}</Action>,
  <DropdownSeparator key="first-separator" />,
- <Action key="set_diag_on" onClick={setDiagOn}>Set DIAG On</Action>,
- <Action key="set_diag_off" onClick={setDiagOff}>Set DIAG Off</Action>,
+ // TRANSLATORS: drop down menu action, enable DIAG access method
+ <Action key="set_diag_on" onClick={setDiagOn}>{_("Set DIAG On")}</Action>,
+ // TRANSLATORS: drop down menu action, disable DIAG access method
+ <Action key="set_diag_off" onClick={setDiagOff}>{_("Set DIAG Off")}</Action>,
  <DropdownSeparator key="second-separator" />,
- <Action key="format" onClick={format}>Format</Action>
+ // TRANSLATORS: drop down menu action, format the disk
+ <Action key="format" onClick={format}>{_("Format")}</Action>
  ]}
  toggle={
  <DropdownToggle toggleVariant="primary" isDisabled={isDisabled} onToggle={onToggle}>
- Perform an action
+ {/* TRANSLATORS: drop down menu label */}
+ {_("Perform an action")}
  </DropdownToggle>
  }
  />
@@ -185,15 +192,15 @@ export default function DASDTable({ state, dispatch }) {
  <TextInputGroupMain
  value={state.minChannel}
  type="text"
- aria-label="Filter by min channel"
- placeholder="Filter by min channel"
+ aria-label={_("Filter by min channel")}
+ placeholder={_("Filter by min channel")}
  onChange={onMinChannelFilterChange}
  />
  { state.minChannel !== "" &&
  <TextInputGroupUtilities>
  <Button
  variant="plain"
- aria-label="Remove min channel filter"
+ aria-label={_("Remove min channel filter")}
  onClick={removeMinChannelFilter}
  >
  <Icon name="backspace" size="24" />
@@ -206,15 +213,15 @@ export default function DASDTable({ state, dispatch }) {
  <TextInputGroupMain
  value={state.maxChannel}
  type="text"
- aria-label="Filter by max channel"
- placeholder="Filter by max channel"
+ aria-label={_("Filter by max channel")}
+ placeholder={_("Filter by max channel")}
  onChange={onMaxChannelFilterChange}
  />
  { state.maxChannel !== "" &&
  <TextInputGroupUtilities>
  <Button
  variant="plain"
- aria-label="Remove max channel filter"
+ aria-label={_("Remove max channel filter")}
  onClick={removeMaxChannelFilter}
  >
  <Icon name="backspace" size="24" />

web/src/components/storage/DeviceSelector.jsx

@@ -20,6 +20,9 @@
  */
 
 import React, { useState } from "react";
+import format from "format-util";
+
+import { _ } from "~/i18n";
 import { noop } from "~/utils";
 import { Icon } from "~/components/layout";
 import { If } from "~/components/core";
@@ -92,19 +95,25 @@ const ItemContent = ({ device }) => {
 
  switch (device.type) {
  case "multipath": {
- type = "Multipath";
+ // TRANSLATORS: multipath device type
+ type = _("Multipath");
  break;
  }
  case "dasd": {
- type = `DASD ${device.busId}`;
+ // TRANSLATORS: %s is replaced by the device bus ID
+ type = format(_("DASD %s"), device.busId);
  break;
  }
  case "md": {
- type = `Software ${device.level.toUpperCase()}`;
+ // TRANSLATORS: software RAID device, %s is replaced by the RAID level, e.g. RAID-1
+ type = format(_("Software %s"), device.level.toUpperCase());
  break;
  }
  case "disk": {
- type = device.sdCard ? "SD Card" : `Transport ${device.transport}`;
+ type = device.sdCard
+ ? _("SD Card")
+ // TRANSLATORS: %s is replaced by the device transport name, e.g. USB, SATA, SCSI...
+ : format(_("Transport %s"), device.transport);
  }
  }
 
@@ -160,7 +169,9 @@ const ItemContent = ({ device }) => {
  const type = device.partitionTable.type.toUpperCase();
  const numPartitions = device.partitionTable.partitions.length;
 
- const text = `${type} with ${numPartitions} partitions`;
+ // TRANSLATORS: disk partition info, %s is replaced by partition table
+ // type (MS-DOS or GPT), %d is the number of the partitions
+ const text = format(_("%s with %d partitions"), type, numPartitions);
 
  return (
  <div>
@@ -182,7 +193,9 @@ const ItemContent = ({ device }) => {
  };
 
  const NotFound = () => {
- return <div><Icon name="folder_off" size="14" /> No content found</div>;
+ // TRANSLATORS: status message, no existing content was found on the disk,
+ // i.e. the disk is completely empty
+ return <div><Icon name="folder_off" size="14" /> {_("No content found")}</div>;
  };
 
  const hasContent = device.partitionTable || device.systems.length > 0;
@@ -230,7 +243,7 @@ export default function DeviceSelector ({ selected, devices = [], onSelect = noo
  };
 
  return (
- <ListBox aria-label="Available devices" className="stack device-selector">
+ <ListBox aria-label={_("Available devices")} className="stack device-selector">
  { devices.map(device => (
  <ListBoxItem
  key={device.sid}

web/src/components/storage/ISCSIPage.jsx

@@ -23,6 +23,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@patternfly/react-core";
 
+import { _ } from "~/i18n";
 import { Title as PageTitle, MainActions } from "~/components/layout";
 import { InitiatorSection, TargetsSection } from "~/components/storage/iscsi";
 
@@ -31,10 +32,11 @@ export default function ISCSIPage() {
 
  return (
  <>
- <PageTitle>Storage iSCSI</PageTitle>
+ {/* TRANSLATORS: page title for iSCSI configuration */}
+ <PageTitle>{_("Storage iSCSI")}</PageTitle>
  <MainActions>
  <Button isLarge variant="secondary" form="storage-config" onClick={() => navigate("/storage")}>
- Back
+ {_("Back")}
  </Button>
  </MainActions>
 

web/src/components/storage/ProposalActionsSection.jsx

@@ -27,7 +27,9 @@ import {
  Skeleton,
  Text
 } from "@patternfly/react-core";
+import format from "format-util";
 
+import { _, n_ } from "~/i18n";
 import { If, Section } from "~/components/core";
 import { partition } from "~/utils";
 
@@ -64,13 +66,16 @@ const ProposalActions = ({ actions = [] }) => {
  if (actions.length === 0) return null;
 
  const [generalActions, subvolActions] = partition(actions, a => !a.subvol);
- const userAction = isExpanded ? "Hide" : "Show";
- const toggleText = `${userAction} ${subvolActions.length} subvolumes actions`;
+ const toggleText = isExpanded
+ // TRANSLATORS: show/hide toggle action, this is a clickable link
+ ? format(n_("Hide %d subvolume action", "Hide %d subvolume actions", subvolActions.length), subvolActions.length)
+ // TRANSLATORS: show/hide toggle action, this is a clickable link
+ : format(n_("Show %d subvolume action", "Show %d subvolume actions", subvolActions.length), subvolActions.length);
 
  return (
  <>
  <Text>
- Actions to create the file systems and to ensure the system boots.
+ {_("Actions to create the file systems and to ensure the system boots.")}
  </Text>
  <ActionsList actions={generalActions} />
  {subvolActions.length > 0 && (
@@ -116,7 +121,9 @@ export default function ProposalActionsSection({ actions = [], errors = [], isLo
  if (isLoading) errors = [];
 
  return (
- <Section title="Planned Actions" errors={errors}>
+ // TRANSLATORS: section title, list of planned actions for the selected device,
+ // e.g. "delete partition A", "create partition B with filesystem C", ...
+ <Section title={_("Planned Actions")} errors={errors}>
  <If
  condition={isLoading}
  then={<ActionsSkeleton />}

web/src/components/storage/ProposalActionsSection.test.jsx

@@ -114,14 +114,14 @@ describe("when there are actions", () => {
  <ProposalActionsSection actions={[...actions, ...subvolumeActions]} />
  );
 
- const link = screen.getByText(/Show.*subvolumes actions/);
+ const link = screen.getByText(/Show.*subvolume actions/);
 
  expect(screen.getAllByRole("list").length).toEqual(1);
 
  await user.click(link);
 
  waitForElementToBeRemoved(link);
- screen.getByText(/Hide.*subvolumes actions/);
+ screen.getByText(/Hide.*subvolume actions/);
 
  // For now, we know that there are two lists and the subvolume list is the second one.
  // The test could be simplified once we have aria-descriptions for the lists.

web/src/components/storage/ProposalPage.jsx

@@ -22,6 +22,7 @@
 import React, { useCallback, useReducer, useEffect } from "react";
 import { Alert } from "@patternfly/react-core";
 
+import { _ } from "~/i18n";
 import { useInstallerClient } from "~/context/installer";
 import { toValidationError, useCancellablePromise } from "~/utils";
 import { Icon } from "~/components/layout";
@@ -146,7 +147,7 @@ export default function ProposalPage() {
  <Alert
  isInline
  customIcon={<Icon name="info" size="16" />}
- title="Devices will not be modified until installation starts."
+ title={_("Devices will not be modified until installation starts.")}
  />
  <ProposalSettingsSection
  availableDevices={state.availableDevices}
@@ -165,7 +166,8 @@ export default function ProposalPage() {
  };
 
  return (
- <Page title="Storage" icon="hard_drive" actionLabel="Back" actionVariant="secondary">
+ // TRANSLATORS: page title
+ <Page title={_("Storage")} icon="hard_drive" actionLabel={_("Back")} actionVariant="secondary">
  <PageContent />
  <ProposalPageOptions />
  </Page>