From adbd4de2b4d9e340273bad677b006439716ec6ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ladislav=20Slez=C3=A1k?= <lslezak@suse.com>
Date: Fri, 1 Sep 2023 18:14:09 +0200
Subject: [PATCH] Use the sprintf-js library instead of format-util

It also supports more formatting attributes like %2$s
---
 web/package-lock.json                         | 40 ++++++++++---------
 web/package.json                              |  2 +-
 web/src/components/core/About.jsx             |  4 +-
 web/src/components/core/ValidationErrors.jsx  |  4 +-
 web/src/components/layout/Icon.jsx            |  4 +-
 .../components/network/ConnectionsTable.jsx   |  8 ++--
 web/src/components/network/IpSettingsForm.jsx |  4 +-
 .../network/WifiNetworkListItem.jsx           |  4 +-
 .../components/overview/NetworkSection.jsx    |  4 +-
 web/src/components/storage/DeviceSelector.jsx | 16 ++++----
 .../storage/ProposalActionsSection.jsx        |  6 +--
 .../components/storage/ProposalVolumes.jsx    |  6 +--
 web/src/components/storage/VolumeForm.jsx     | 14 +++----
 .../components/storage/iscsi/EditNodeForm.jsx |  4 +-
 .../components/storage/iscsi/LoginForm.jsx    |  4 +-
 .../storage/iscsi/NodesPresenter.jsx          |  4 +-
 16 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 79139409e..e2312c0d1 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -14,13 +14,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"
       },
       "devDependencies": {
@@ -5190,6 +5190,12 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/argparse/node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true
+    },
     "node_modules/aria-query": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -9189,11 +9195,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/format-util": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/format-util/-/format-util-1.0.5.tgz",
-      "integrity": "sha512-varLbTj0e0yVyRpqQhuWV+8hlePAgaoFRhNFj50BNjEIrw1/DphHSObtqwskVCPWNgzwPoQrZAbfa/SBiicNeg=="
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -16094,10 +16095,9 @@
       }
     },
     "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
+      "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
     },
     "node_modules/stack-utils": {
       "version": "2.0.6",
@@ -22009,6 +22009,14 @@
       "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
+      },
+      "dependencies": {
+        "sprintf-js": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+          "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+          "dev": true
+        }
       }
     },
     "aria-query": {
@@ -24978,11 +24986,6 @@
         "mime-types": "^2.1.12"
       }
     },
-    "format-util": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/format-util/-/format-util-1.0.5.tgz",
-      "integrity": "sha512-varLbTj0e0yVyRpqQhuWV+8hlePAgaoFRhNFj50BNjEIrw1/DphHSObtqwskVCPWNgzwPoQrZAbfa/SBiicNeg=="
-    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -30040,10 +30043,9 @@
       }
     },
     "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
+      "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
     },
     "stack-utils": {
       "version": "2.0.6",
diff --git a/web/package.json b/web/package.json
index 7ffb78a8c..fe25c2126 100644
--- 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
index 3f48059b8..6e1f68f8e 100644
--- 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
index c34aba1be..b5f00ac1e 100644
--- 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
index f903001b5..462783015 100644
--- 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
index 80e2ff7aa..a01433d2c 100644
--- 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
index 2a61cf8c5..969ccb030 100644
--- 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
index 085484bf9..57f3e426d 100644
--- 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";
 
@@ -90,7 +90,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
index d8946bd3a..bba879614 100644
--- 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
index 7128e7873..b237e3fb2 100644
--- 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
index a30723752..a7a66bd34 100644
--- 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
index 619cd22ee..1b226fc1c 100644
--- 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
index 4669814e9..6f6b00cfd 100644
--- 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 (
     <>
diff --git a/web/src/components/storage/iscsi/EditNodeForm.jsx b/web/src/components/storage/iscsi/EditNodeForm.jsx
index f48ac50de..17da23f93 100644
--- a/web/src/components/storage/iscsi/EditNodeForm.jsx
+++ b/web/src/components/storage/iscsi/EditNodeForm.jsx
@@ -23,7 +23,7 @@ import React, { useState } from "react";
 import {
   Form, FormGroup, FormSelect, FormSelectOption
 } from "@patternfly/react-core";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { _ } from "~/i18n";
 import { Popup } from "~/components/core";
@@ -47,7 +47,7 @@ export default function EditNodeForm({ node, onSubmit: onSubmitProp, onCancel })
 
   return (
     // TRANSLATORS: %s is replaced by the iSCSI target node name
-    <Popup isOpen title={format(_("Edit %s"), node.target)}>
+    <Popup isOpen title={sprintf(_("Edit %s"), node.target)}>
       <Form id={id} onSubmit={onSubmit}>
         <FormGroup fieldId="startup" label="Startup">
           <FormSelect
diff --git a/web/src/components/storage/iscsi/LoginForm.jsx b/web/src/components/storage/iscsi/LoginForm.jsx
index 8d56d819b..b123435e0 100644
--- a/web/src/components/storage/iscsi/LoginForm.jsx
+++ b/web/src/components/storage/iscsi/LoginForm.jsx
@@ -24,7 +24,7 @@ import {
   Alert,
   Form, FormGroup, FormSelect, FormSelectOption
 } from "@patternfly/react-core";
-import format from "format-util";
+import { sprintf } from "sprintf-js";
 
 import { _ } from "~/i18n";
 import { Popup } from "~/components/core";
@@ -66,7 +66,7 @@ export default function LoginForm({ node, onSubmit: onSubmitProp, onCancel }) {
 
   return (
     // TRANSLATORS: %s is replaced by the iSCSI target name
-    <Popup isOpen title={format("Login %s", node.target)}>
+    <Popup isOpen title={sprintf(_("Login %s"), node.target)}>
       <Form id={id} onSubmit={onSubmit}>
         { isFailed &&
           <Alert variant="warning" isInline title={_("Something went wrong")}>
diff --git a/web/src/components/storage/iscsi/NodesPresenter.jsx b/web/src/components/storage/iscsi/NodesPresenter.jsx
index b091aa64f..1dc4a4fd6 100644
--- a/web/src/components/storage/iscsi/NodesPresenter.jsx
+++ b/web/src/components/storage/iscsi/NodesPresenter.jsx
@@ -21,7 +21,7 @@
 
 import React, { useState } from "react";
 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 { RowActions } from '~/components/core';
@@ -64,7 +64,7 @@ export default function NodesPresenter ({ nodes, client }) {
 
     const startup = Object.values(NodeStartupOptions).find(o => o.value === node.startup);
     // TRANSLATORS: iSCSI connection status, %s is replaced by node label
-    return format(_("Connected (%s)"), startup.label);
+    return sprintf(_("Connected (%s)"), startup.label);
   };
 
   const nodeActions = (node) => {