From 9563c3b760363701118b57f9a0c55dcf06c0f853 Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Fri, 17 Nov 2023 15:50:42 +0100
Subject: [PATCH] storage: show toast notification when disks selection changed

Also change the notification type to toast for the 'no changes
detected', in order to avoid moving UI elements when the notification
appears.

This also fixes a bug, where the 'not additional disks detected' notification appears
while re-scan is in progress.

Resolves: INSTALLER-3727
Resolves: INSTALLER-3742
---
 .../storage/InstallationDestination.jsx       | 92 +++++++++++++++++--
 test/check-storage                            |  3 +
 test/helpers/storage.py                       |  3 +
 3 files changed, 89 insertions(+), 9 deletions(-)

diff --git a/src/components/storage/InstallationDestination.jsx b/src/components/storage/InstallationDestination.jsx
index ca2a556ba5..54f23a020e 100644
--- a/src/components/storage/InstallationDestination.jsx
+++ b/src/components/storage/InstallationDestination.jsx
@@ -20,6 +20,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import {
     Alert,
     AlertActionCloseButton,
+    AlertGroup,
     Button,
     Chip,
     ChipGroup,
@@ -31,9 +32,12 @@ import {
     SelectList,
     SelectOption,
     Spinner,
+    Text,
+    TextContent,
     TextInputGroup,
     TextInputGroupMain,
     TextInputGroupUtilities,
+    TextVariants,
     Title,
 } from "@patternfly/react-core";
 import { SyncAltIcon, TimesIcon } from "@patternfly/react-icons";
@@ -393,20 +397,19 @@ export const InstallationDestination = ({
         />
     );
 
-    const equalDisks = refUsableDisks.current && checkIfArraysAreEqual(refUsableDisks.current, diskSelection.usableDisks);
     const headingLevel = isBootIso ? "h2" : "h3";
 
     return (
         <>
             <Title headingLevel={headingLevel} id={idPrefix + "-disk-selector-title"}>{_("Destination")}</Title>
-            {equalDisksNotify && equalDisks &&
-                <Alert
-                  id="no-disks-detected-alert"
-                  isInline
-                  title={_("No additional disks detected")}
-                  variant="info"
-                  actionClose={<AlertActionCloseButton onClose={() => { setEqualDisksNotify(false) }} />}
-                />}
+            {!isRescanningDisks && diskSelection.usableDisks !== undefined && refUsableDisks.current !== undefined &&
+            <DisksChangedAlert
+              deviceData={deviceData}
+              equalDisksNotify={equalDisksNotify}
+              refUsableDisks={refUsableDisks}
+              setEqualDisksNotify={setEqualDisksNotify}
+              usableDisks={diskSelection.usableDisks}
+            />}
             <FormGroup>
                 <Flex spaceItems={{ default: "spaceItemsMd" }} alignItems={{ default: "alignItemsCenter" }}>
                     {(diskSelection.usableDisks.length > 1 || (diskSelection.usableDisks.length === 1 && diskSelection.selectedDisks.length === 0))
@@ -436,3 +439,74 @@ export const InstallationDestination = ({
         </>
     );
 };
+
+const DisksChangedAlert = ({
+    deviceData,
+    equalDisksNotify,
+    refUsableDisks,
+    setEqualDisksNotify,
+    usableDisks,
+}) => {
+    const [showChangedNotification, setShowChangedNotification] = useState(true);
+    const equalDisks = checkIfArraysAreEqual(refUsableDisks.current, usableDisks);
+    const disksAdded = usableDisks.filter(disk => !refUsableDisks.current.includes(disk));
+    const disksRemoved = (
+        refUsableDisks.current &&
+        refUsableDisks.current.filter(disk => !usableDisks.includes(disk))
+    );
+
+    return (
+        <AlertGroup isToast isLiveRegion>
+            {equalDisksNotify && equalDisks &&
+                <Alert
+                  id="no-disks-detected-alert"
+                  title={_("No additional disks detected")}
+                  variant="info"
+                  actionClose={<AlertActionCloseButton onClose={() => { setEqualDisksNotify(false) }} />}
+                />}
+            {showChangedNotification && !equalDisks &&
+                <Alert
+                  id="disks-changed-alert"
+                  title={_("The usable disks have changed")}
+                  variant="info"
+                  actionClose={<AlertActionCloseButton onClose={() => { setShowChangedNotification(false) }} />}>
+                    <TextContent>
+                        {disksAdded?.length > 0 &&
+                        <Text component={TextVariants.p}>
+                            {cockpit.format(
+                                cockpit.ngettext(
+                                    "The following disk was detected: $0",
+                                    "The following disks were detected: $0",
+                                    disksAdded.length
+                                ),
+                                disksAdded.map(disk => (
+                                    cockpit.format(
+                                        "$0 ($1)",
+                                        deviceData[disk].name.v,
+                                        deviceData[disk].description.v
+                                    ))
+                                ).join(", ")
+                            )}
+                        </Text>}
+                        {disksRemoved?.length > 0 &&
+                        <Text component={TextVariants.p}>
+                            {cockpit.format(
+                                cockpit.ngettext(
+                                    "The following disk is no longer available: $0",
+                                    "The following disks are no longer available: $0",
+                                    disksRemoved.length
+                                ),
+                                disksRemoved.map(disk => (
+                                    cockpit.format(
+                                        "$0 ($1)",
+                                        deviceData[disk].name.v,
+                                        deviceData[disk].description.v
+                                    ))
+                                ).join(", ")
+                            )}
+                        </Text>}
+                    </TextContent>
+                </Alert>}
+        </AlertGroup>
+    );
+};
diff --git a/test/check-storage b/test/check-storage
index 9cda4588ee..69af408446 100755
--- a/test/check-storage
+++ b/test/check-storage
@@ -61,6 +61,9 @@ class TestStorage(anacondalib.VirtInstallMachineCase, StorageHelpers):
         dev = dev.split("/")[-1]
         s.rescan_disks()
 
+        # Check the newly added disk generated a notification
+        s.wait_disk_added(dev)
+
         # Check that the disk selection persists when moving next and back
         s.check_disk_selected("vda", True)
         i.next()
diff --git a/test/helpers/storage.py b/test/helpers/storage.py
index 604998fe8c..9849e98936 100644
--- a/test/helpers/storage.py
+++ b/test/helpers/storage.py
@@ -94,6 +94,9 @@ def wait_no_disks_detected(self):
     def wait_no_disks_detected_not_present(self):
         self.browser.wait_not_present("#no-disks-detected-alert")
 
+    def wait_disk_added(self, disk):
+        self.browser.wait_in_text("#disks-changed-alert", f"The following disk was detected: {disk}")
+
     @log_step(snapshots=True)
     def rescan_disks(self):
         self.browser.click(f"#{self._step}-rescan-disks")