web: change warning content in storage result

It has been decided to only show affected systems by now.
agama-project · Mar 13, 2024 · 88fe6c1 · 88fe6c1
1 parent fd2f132
commit 88fe6c1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 29 deletions.
diff --git a/web/src/components/storage/ProposalResultSection.jsx b/web/src/components/storage/ProposalResultSection.jsx
@@ -24,7 +24,7 @@
 import React, { useState } from "react";
 import { Alert, Button, Skeleton } from "@patternfly/react-core";
 import { sprintf } from "sprintf-js";
-import { _ } from "~/i18n";
+import { _, n_ } from "~/i18n";
 import { deviceChildren, deviceSize } from "~/components/storage/utils";
 import DevicesManager from "~/components/storage/DevicesManager";
 import { If, Section, Tag, TreeTable } from "~/components/core";
@@ -61,35 +61,32 @@ const ActionsInfo = ({ actions, devicesManager }) => {
   );
 
   const deleteActions = actions.filter(a => a.delete && !a.subvol);
+  const deleteActionsSize = deleteActions.length;
 
-  // Borrowed from https://www.30secondsofcode.org/js/s/count-grouped-elements/
-  const frequencies = arr =>
-    arr.reduce((a, v) => {
-      a[v] = (a[v] ?? 0) + 1;
-      return a;
-    }, {});
-
-  if (deleteActions.length === 0) return <GeneralActionsInfo />;
+  if (deleteActionsSize === 0) return <GeneralActionsInfo />;
 
   const deletedSids = deleteActions.map(a => a.device);
   const deletedDevices = deletedSids.map(sid => devicesManager.systemDevice(sid));
-  const deletedTypes = frequencies(deletedDevices.map(d => d.type));
-  const deletedSystems = deletedDevices.map(d => d.systems).flat();
-  const deletionTypeTexts = Object.entries(deletedTypes).map(([type, amount]) => `${amount} ${type}`)
-    .join(", ");
-
-  const warningTitle = sprintf(_("%s delete actions will be performed"), deleteActions.length);
-  const warningTexts = [deletionTypeTexts];
-
-  if (deletedSystems.length > 0) {
-    warningTexts.push(_("including"));
-    warningTexts.push(deletedSystems.join(", "));
-    warningTexts.push("systems");
-  }
-
+  const deletedSystems = deletedDevices.map(d => d?.systems).flat();
+  const warningTitle = sprintf(n_(
+    "That proposal will perform %d destructive action",
+    "That proposal will perform %d destructive actions",
+    deleteActionsSize
+  ), deleteActionsSize);
+
+  // FIXME: Use the Intl.ListFormat instead of the `join(", ")` used below.
+  // Most probably, a `listFormat` or similar wrapper should live in src/i18n.js or so.
+  // Read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
   return (
     <Alert isInline variant="warning" title={warningTitle}>
-      <p><strong>{warningTexts.join(" ")}</strong></p>
+      <If
+        condition={deletedSystems.length > 0}
+        then={
+          <p>
+            {_("Including the deletion of")} <strong>{deletedSystems.join(", ")}</strong>
+          </p>
+        }
+      />
       <GeneralActionsInfo />
     </Alert>
   );

diff --git a/web/src/components/storage/ProposalResultSection.test.jsx b/web/src/components/storage/ProposalResultSection.test.jsx
@@ -23,11 +23,11 @@ import React from "react";
 import { screen, within } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
 import { ProposalResultSection } from "~/components/storage";
-import { settings, devices, actions } from "./test-data/full-result-example";
+import { devices, actions } from "./test-data/full-result-example";
 
 const errorMessage = "Something went wrong, proposal not possible";
 const errors = [{ severity: 0, message: errorMessage }];
-const defaultProps = { settings, actions, devices };
+const defaultProps = { system: devices.system, staging: devices.staging, actions };
 
 describe("ProposalResultSection", () => {
   describe("when there are errors (proposal was not possible)", () => {
@@ -36,7 +36,7 @@ describe("ProposalResultSection", () => {
       expect(screen.queryByText(errorMessage)).toBeInTheDocument();
     });
 
-    it("does not render an warning for delete actions", () => {
+    it("does not render a warning for delete actions", () => {
       plainRender(<ProposalResultSection {...defaultProps} errors={errors} />);
       expect(screen.queryByText(/Warning alert:/)).toBeNull();
     });
@@ -63,9 +63,25 @@ describe("ProposalResultSection", () => {
       expect(screen.queryByText(/Warning alert:/)).toBeNull();
     });
 
-    it("renders a warning when when there are delete", () => {
+    it("renders a warning when there are delete actions", () => {
       plainRender(<ProposalResultSection {...defaultProps} />);
-      screen.getByText(/Warning alert:/);
+      const warning = screen.getByText(/Warning alert:/).parentNode;
+      within(warning).getByText(/4 destructive/);
+    });
+
+    it("renders the affected systems in the deletion warning, if any", () => {
+      // NOTE: simulate the deletion of vdc2 (sid: 79) for checking that
+      // affected systems are rendered in the warning summary
+      const props = {
+        ...defaultProps,
+        actions: [{ device: 79, delete: true }]
+      };
+
+      plainRender(<ProposalResultSection {...props} />);
+      // FIXME: below line reveals that warning wrapper deserves a role or
+      // something
+      const warning = screen.getByText(/Warning alert:/).parentNode.parentNode;
+      within(warning).getByText(/openSUSE/);
     });
 
     it("renders a treegrid including all relevant information about final result", () => {