Merge pull request #735 from openSUSE/sprintf

Use the sprintf-js library instead of format-util
openSUSE · Sep 5, 2023 · 56e66f1 · 56e66f1
2 parents 6c4cd72 + adbd4de
commit 56e66f1
Show file tree

Hide file tree

Showing 16 changed files with 65 additions and 63 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -103,13 +103,13 @@
     "@patternfly/react-table": "^4.113.0",
     "core-js": "^3.21.1",
     "fast-sort": "^3.2.1",
-    "format-util": "^1.0.5",
     "ipaddr.js": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "react-teleporter": "^3.1.0",
     "regenerator-runtime": "^0.13.9",
+    "sprintf-js": "^1.1.2",
     "xbytes": "^1.8.0"
   }
 }
diff --git a/web/src/components/core/About.jsx b/web/src/components/core/About.jsx
@@ -21,7 +21,7 @@
 
 import React, { useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { Icon } from "~/components/layout";
 import { Popup } from "~/components/core";
@@ -59,7 +59,7 @@ data loss.")
         </Text>
         <Text>
           {
-            format(
+            sprintf(
               // TRANSLATORS: content of the "About" popup (2/2)
               // %s is replaced by the project URL
               _("For more information, please visit the project's repository at %s."),

diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
@@ -29,7 +29,7 @@ import {
   ListItem,
   Popover
 } from "@patternfly/react-core";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { Icon } from '~/components/layout';
 import { _, n_ } from "~/i18n";
@@ -81,7 +81,7 @@ const ValidationErrors = ({ title = _("Errors"), errors }) => {
             onClick={() => setPopoverVisible(true)}
           >
             { warningIcon } {
-              format(
+              sprintf(
                 // TRANSLATORS: %d is replaced with the number of errors found
                 n_("%d error found", "%d errors found", errors.length),
                 errors.length

diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx
@@ -20,7 +20,7 @@
  */
 
 import React from 'react';
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { _ } from "~/i18n";
 
@@ -152,5 +152,5 @@ export default function Icon({ name, className = "", size = 32, ...otherProps })
 
   return (IconComponent)
     ? <IconComponent className={cssClassName} aria-hidden="true" {...otherProps} />
-    : <em>{format(_("Icon %s not found!"), name)}</em>;
+    : <em>{sprintf(_("Icon %s not found!"), name)}</em>;
 }
diff --git a/web/src/components/network/ConnectionsTable.jsx b/web/src/components/network/ConnectionsTable.jsx
@@ -21,7 +21,7 @@
 
 import React from "react";
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { RowActions } from "~/components/core";
 import { Icon } from "~/components/layout";
@@ -67,14 +67,14 @@ export default function ConnectionsTable ({
               title: _("Edit"),
               "aria-label":
                 // TRANSLATORS: %s is replaced by a network connection name
-                format(_("Edit connection %s"), connection.name),
+                sprintf(_("Edit connection %s"), connection.name),
               onClick: () => onEdit(connection)
             },
             typeof onForget === 'function' && {
               title: _("Forget"),
               "aria-label":
                 // TRANSLATORS: %s is replaced by a network connection name
-                format(_("Forget connection %s"), connection.name),
+                sprintf(_("Forget connection %s"), connection.name),
               className: "danger-action",
               icon: <Icon name="delete" size="24" />,
               onClick: () => onForget(connection)
@@ -89,7 +89,7 @@ export default function ConnectionsTable ({
                 <RowActions
                   id={`actions-for-connection-${connection.id}`}
                   // TRANSLATORS: %s is replaced by a network connection name
-                  aria-label={format(_("Actions for connection %s"), connection.name)}
+                  aria-label={sprintf(_("Actions for connection %s"), connection.name)}
                   actions={actions}
                   connection={connection}
                 />

diff --git a/web/src/components/network/IpSettingsForm.jsx b/web/src/components/network/IpSettingsForm.jsx
@@ -21,7 +21,7 @@
 
 import React, { useState } from "react";
 import { HelperText, HelperTextItem, Form, FormGroup, FormSelect, FormSelectOption, TextInput } from "@patternfly/react-core";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { useInstallerClient } from "~/context/installer";
 import { Popup } from "~/components/core";
@@ -128,7 +128,7 @@ export default function IpSettingsForm({ connection, onClose }) {
   // TRANSLATORS: manual network configuration mode with a static IP address
   // %s is replaced by the connection name
   return (
-    <Popup isOpen title={format(_("Edit %s connection"), connection.name)}>
+    <Popup isOpen title={sprintf(_("Edit %s connection"), connection.name)}>
       <Form id="edit-connection" onSubmit={onSubmit}>
         <FormGroup fieldId="method" label={_("Mode")} isRequired>
           <FormSelect

diff --git a/web/src/components/network/WifiNetworkListItem.jsx b/web/src/components/network/WifiNetworkListItem.jsx
@@ -26,7 +26,7 @@ import {
   Spinner,
   Text
 } from "@patternfly/react-core";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { ConnectionState } from "~/client/network/model";
 
@@ -94,7 +94,7 @@ function WifiNetworkListItem ({ network, isSelected, isActive, onSelect, onCance
         />
         <div className="split">
           {/* TRANSLATORS: %s is replaced by a WiFi network name */}
-          {showSpinner && <Spinner isSVG size="md" aria-label={format(_("%s connection is waiting for an state change"), network.ssid)} /> }
+          {showSpinner && <Spinner isSVG size="md" aria-label={sprintf(_("%s connection is waiting for an state change"), network.ssid)} /> }
           <Text component="small" className="keep-words">
             { showSpinner && !network.connection && _("Connecting") }
             { networkState(network.connection?.state)}

diff --git a/web/src/components/overview/NetworkSection.jsx b/web/src/components/overview/NetworkSection.jsx
@@ -20,7 +20,7 @@
  */
 
 import React, { useEffect, useState } from "react";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { Em, Section, SectionSkeleton } from "~/components/core";
 import { ConnectionTypes, NetworkEventTypes } from "~/client/network";
@@ -81,7 +81,7 @@ export default function NetworkSection() {
       <Em key={connection.id}>{connection.name} - {connection.addresses.map(formatIp)}</Em>
     ));
 
-    const msg = format(
+    const msg = sprintf(
       // 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),

diff --git a/web/src/components/storage/DeviceSelector.jsx b/web/src/components/storage/DeviceSelector.jsx
@@ -20,7 +20,7 @@
  */
 
 import React, { useState } from "react";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { _ } from "~/i18n";
 import { noop } from "~/utils";
@@ -101,19 +101,19 @@ const ItemContent = ({ device }) => {
         }
         case "dasd": {
           // TRANSLATORS: %s is replaced by the device bus ID
-          type = format(_("DASD %s"), device.busId);
+          type = sprintf(_("DASD %s"), device.busId);
           break;
         }
         case "md": {
           // TRANSLATORS: software RAID device, %s is replaced by the RAID level, e.g. RAID-1
-          type = format(_("Software %s"), device.level.toUpperCase());
+          type = sprintf(_("Software %s"), device.level.toUpperCase());
           break;
         }
         case "disk": {
           type = device.sdCard
             ? _("SD Card")
             // TRANSLATORS: %s is replaced by the device transport name, e.g. USB, SATA, SCSI...
-            : format(_("Transport %s"), device.transport);
+            : sprintf(_("Transport %s"), device.transport);
         }
       }
 
@@ -132,7 +132,7 @@ const ItemContent = ({ device }) => {
       const members = device.members.map(m => m.split("/").at(-1));
 
       // TRANSLATORS: RAID details, %s is replaced by list of devices used by the array
-      return <div>{format(_("Members: %s"), members.sort().join(", "))}</div>;
+      return <div>{sprintf(_("Members: %s"), members.sort().join(", "))}</div>;
     };
 
     const RAIDInfo = () => {
@@ -141,7 +141,7 @@ const ItemContent = ({ device }) => {
       const devices = device.devices.map(m => m.split("/").at(-1));
 
       // TRANSLATORS: RAID details, %s is replaced by list of devices used by the array
-      return <div>{format(_("Devices: %s"), devices.sort().join(", "))}</div>;
+      return <div>{sprintf(_("Devices: %s"), devices.sort().join(", "))}</div>;
     };
 
     const MultipathInfo = () => {
@@ -150,7 +150,7 @@ const ItemContent = ({ device }) => {
       const wires = device.wires.map(m => m.split("/").at(-1));
 
       // TRANSLATORS: multipath details, %s is replaced by list of connections used by the device
-      return <div>{format(_("Wires: %s"), wires.sort().join(", "))}</div>;
+      return <div>{sprintf(_("Wires: %s"), wires.sort().join(", "))}</div>;
     };
 
     return (
@@ -174,7 +174,7 @@ const ItemContent = ({ device }) => {
 
       // 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);
+      const text = sprintf(_("%s with %d partitions"), type, numPartitions);
 
       return (
         <div>

diff --git a/web/src/components/storage/ProposalActionsSection.jsx b/web/src/components/storage/ProposalActionsSection.jsx
@@ -27,7 +27,7 @@ import {
   Skeleton,
   Text
 } from "@patternfly/react-core";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { _, n_ } from "~/i18n";
 import { If, Section } from "~/components/core";
@@ -68,9 +68,9 @@ const ProposalActions = ({ actions = [] }) => {
   const [generalActions, subvolActions] = partition(actions, a => !a.subvol);
   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)
+    ? sprintf(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);
+    : sprintf(n_("Show %d subvolume action", "Show %d subvolume actions", subvolActions.length), subvolActions.length);
 
   return (
     <>

diff --git a/web/src/components/storage/ProposalVolumes.jsx b/web/src/components/storage/ProposalVolumes.jsx
@@ -27,7 +27,7 @@ import {
   Toolbar, ToolbarContent, ToolbarItem
 } from "@patternfly/react-core";
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { _ } from "~/i18n";
 import { Em, If, Popup, RowActions, Tip } from '~/components/core';
@@ -61,7 +61,7 @@ const AutoCalculatedHint = (volume) => {
         {volume.sizeRelevantVolumes && volume.sizeRelevantVolumes.length > 0 &&
         // TRANSLATORS: list item, this affects the computed partition size limits
         // %s is replaced by a list of the volumes (like "/home, /boot")
-          <ListItem>{format(_("Presence of other volumes (%s)"), volume.sizeRelevantVolumes.join(", "))}</ListItem>}
+          <ListItem>{sprintf(_("Presence of other volumes (%s)"), volume.sizeRelevantVolumes.join(", "))}</ListItem>}
       </List>
     </>
   );
@@ -183,7 +183,7 @@ const VolumeRow = ({ columns, volume, isLoading, onEdit, onDelete }) => {
     let size = minSize;
     if (minSize && maxSize && minSize !== maxSize) size = `${minSize} - ${maxSize}`;
     // TRANSLATORS: minimum device size, %s is replaced by size string, e.g. "17.5 GiB"
-    if (maxSize === undefined) size = format(_("At least %s"), minSize);
+    if (maxSize === undefined) size = sprintf(_("At least %s"), minSize);
 
     return (
       <div className="split">

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
@@ -27,7 +27,7 @@ import {
   Radio,
   TextInput
 } from "@patternfly/react-core";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { _, N_ } from "~/i18n";
 import { If, NumericTextInput } from '~/components/core';
@@ -98,14 +98,14 @@ const SizeAuto = ({ volume }) => {
   if (volume.sizeRelevantVolumes && volume.sizeRelevantVolumes.length > 0)
     // TRANSLATORS: item which affects the final computed partition size
     // %s is replaced by a list of mount points like "/home, /boot"
-    conditions.push(format(_("the presence of the file system for %s"),
-                           // TRANSLATORS: conjunction for merging two list items
-                           volume.sizeRelevantVolumes.join(_(", "))));
+    conditions.push(sprintf(_("the presence of the file system for %s"),
+      // TRANSLATORS: conjunction for merging two list items
+                            volume.sizeRelevantVolumes.join(_(", "))));
 
   // TRANSLATORS: the %s is replaced by the items which affect the computed size
-  const conditionsText = format(_("The final size depends on %s."),
-                                // TRANSLATORS: conjunction for merging two texts
-                                conditions.join(_(" and ")));
+  const conditionsText = sprintf(_("The final size depends on %s."),
+    // TRANSLATORS: conjunction for merging two texts
+                                 conditions.join(_(" and ")));
 
   return (
     <>