From 1e69aaa62474f4c10c7f1827675c0df5f01389f7 Mon Sep 17 00:00:00 2001
From: cjenkscybercom <christina.jenks@knowit.se>
Date: Thu, 30 Nov 2023 11:04:20 +0100
Subject: [PATCH] CE-2269: correctly constrain ioc status popover alert size

---
 src/components/IOC/IOCIcons/IOCIcons.js      | 32 +++++++++++++-------
 src/components/IOC/IOCTable/IOCTable.spec.js |  4 +--
 src/mocks/fixtures/IOCStatus.json            | 21 +++++++++++--
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index 87c45053..40781b57 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Typography, useTheme } from "@mui/material";
+import { Typography, useTheme, Stack } from "@mui/material";
 import {
   Brightness1,
   Cancel,
@@ -11,39 +11,49 @@ import {
   PauseCircleFilled
 } from "@mui/icons-material";
 import Popover from "../../common/Popover";
-import { AlertBannerList } from "@ess-ics/ce-ui-common";
+import { AlertBanner } from "@ess-ics/ce-ui-common";
 import LabeledIcon from "../../common/LabeledIcon/LabeledIcon";
 
 function AlertMessagesPopoverContents({ title, alerts }) {
   // Filter out INFO level alerts
   // And for now filter out links on alerts due to issues with
   // focus behavior of popovers
-  const alertsWithoutLinks = (
-    alerts.filter((alert) => alert?.type.toLowerCase() !== "info") || []
+  // Also normalize the type to lowercase since AlertBanner expects lowercase
+  const sanitizedAlerts = (
+    alerts?.filter((alert) => alert?.type.toLowerCase() !== "info") || []
   ).map((alert) => ({
     ...alert,
+    type: alert?.type?.toLowerCase(),
     link: undefined
   }));
 
   return (
-    <div style={{ maxWidth: "75vw" }}>
+    <Stack
+      gap={1}
+      sx={{ minWidth: 0, maxWidth: "50vw" }}
+    >
       <Typography
         sx={{
-          fontWeight: alertsWithoutLinks.length > 0 ? "bold" : "normal"
+          fontWeight: sanitizedAlerts.length > 0 ? "bold" : "normal"
         }}
       >
         {title}
       </Typography>
-      {alertsWithoutLinks.length > 0 ? (
-        <AlertBannerList alerts={alertsWithoutLinks} />
-      ) : null}
-    </div>
+      {sanitizedAlerts.length > 0
+        ? sanitizedAlerts.map((alert, index) => (
+            <AlertBanner
+              {...alert}
+              key={index}
+            />
+          ))
+        : null}
+    </Stack>
   );
 }
 
 export function IOCStatusIcon({ ioc }) {
   const theme = useTheme();
-  let { active, alerts, activeDeployment, id } = ioc;
+  let { active, alerts = [], activeDeployment, id } = ioc;
   const alertSeverity = ioc?.alertSeverity?.toLowerCase();
 
   const iconConfig = {
diff --git a/src/components/IOC/IOCTable/IOCTable.spec.js b/src/components/IOC/IOCTable/IOCTable.spec.js
index bac3b2bb..cc7089f2 100644
--- a/src/components/IOC/IOCTable/IOCTable.spec.js
+++ b/src/components/IOC/IOCTable/IOCTable.spec.js
@@ -6,14 +6,14 @@ const { AfterAsync } = composeStories(stories);
 const textColumns = ["IOC name", "Description", "Host", "Network"];
 const columns = ["Status"].concat(textColumns);
 const firstRowData = [
-  "Active",
+  "Alert",
   "VacS-RFQ:SC-IOC-130",
   "Some description",
   "vacs-accv-vm-ioc",
   "ChannelAccess-FEB"
 ];
 
-describe("HostTable", () => {
+describe("IOCTable", () => {
   context("Populated Table", () => {
     beforeEach(() => {
       cy.mount(<AfterAsync />);
diff --git a/src/mocks/fixtures/IOCStatus.json b/src/mocks/fixtures/IOCStatus.json
index 58b546db..58cc6210 100644
--- a/src/mocks/fixtures/IOCStatus.json
+++ b/src/mocks/fixtures/IOCStatus.json
@@ -1,7 +1,18 @@
 [
   {
     "id": 346,
-    "active": true
+    "active": true,
+    "alerts": [
+      {
+        "type": "WARNING",
+        "message": "A temporary gravity anomaly has been detected in the cafeteria. Please secure your trays and beverages. We suspect a rogue black hole passing by, or maybe someone just dropped a super-dense bagel again. Proceed with caution, and remember, what goes up might not come down for a while. Thank you for floating with us today."
+      },
+      {
+        "type": "ERROR",
+        "message": "The area is currently experiencing an unexpected entropy reversal. As a precaution, ice cream in the freezer may spontaneously melt, then refreeze. We recommend eating it now, just to be safe. Also, be on the lookout for random acts of orderliness. Your messy desk might just organize itself, but don't get your hopes up."
+      }
+    ],
+    "alertSeverity": "ERROR"
   },
   {
     "id": 345,
@@ -16,6 +27,7 @@
         "link": "https://google.com"
       }
     ],
+    "alertSeverity": "ERROR",
     "active": true
   },
   {
@@ -26,6 +38,7 @@
         "message": "Example alert warning for VacS-RFQ:SC-IOC-110"
       }
     ],
+    "alertSeverity": "WARNING",
     "active": true
   },
   {
@@ -45,7 +58,8 @@
         "type": "ERROR",
         "message": "Example alert error for RFQ-010:SC-IOC-001"
       }
-    ]
+    ],
+    "alertSeverity": "ERROR"
   },
   {
     "id": 148,
@@ -55,6 +69,7 @@
         "message": "Example alert warning for RFQ-010:SC-IOC-977"
       }
     ],
+    "alertSeverity": "WARNING",
     "active": true
   },
   {
@@ -73,6 +88,7 @@
         "message": "Example alert warning for RFQ-010:SC-IOC-056"
       }
     ],
+    "alertSeverity": "WARNING",
     "active": true
   },
   {
@@ -100,6 +116,7 @@
         "message": "Example alert warning RFQ-010:SC-IOC-006"
       }
     ],
+    "alertSeverity": "WARNING",
     "active": true
   }
 ]
-- 
GitLab