CE-2269: correctly constrain ioc status popover alert size

src/components/IOC/IOCIcons/IOCIcons.js

 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 = {

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 />);

src/mocks/fixtures/IOCStatus.json

 [
   {
     "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
   }
 ]