fix: improve ref naming causing fallback error on icons + regression test (#6989)

* ♻️ (index.tsx): remove unused ShortUniqueId import and uid variable to clean up the code
💡 (index.tsx): refactor useEffect dependency array to only include necessary dependencies for better performance and readability
♻️ (index.tsx): refactor PopoverContent component to use notificationRef instead of inline ref assignment for better code organization

* ✨ (loading.tsx): add data-testid attribute to loading icon for easier testing and identification in the UI
✅ (general-bugs-icons-fallback.spec.ts): add test to ensure that loading icon fallback is displayed correctly when the icon is not found

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,6 +1,5 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { forwardRef, useEffect, useState } from "react";
-import ShortUniqueId from "short-unique-id";
 import IconComponent from "../../components/common/genericIconComponent";
 import {
   Popover,
@@ -31,9 +30,7 @@ const AlertDropdown = forwardRef<HTMLDivElement, AlertDropdownType>(
       if (!open) {
         onClose?.();
       }
-    }, [open, onClose]);
+    }, [open]);
-
-    const uid = new ShortUniqueId();
 
     return (
       <Popover
@@ -48,14 +45,11 @@ const AlertDropdown = forwardRef<HTMLDivElement, AlertDropdownType>(
       >
         <PopoverTrigger asChild>{children}</PopoverTrigger>
         <PopoverContent
-          ref={ref}
+          ref={notificationRef}
           data-testid="notification-dropdown-content"
           className="noflow nowheel nopan nodelete nodrag z-10 flex h-[500px] w-[500px] flex-col"
         >
-          <div
+          <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
-            ref={notificationRef}
-            className="text-md flex flex-row justify-between pl-3 font-medium text-foreground"
-          >
             Notifications
             <div className="flex gap-3 pr-3">
               <button
@@ -81,7 +75,7 @@ const AlertDropdown = forwardRef<HTMLDivElement, AlertDropdownType>(
             {notificationList.length !== 0 ? (
               notificationList.map((alertItem) => (
                 <SingleAlert
-                  key={uid.randomUUID(10)}
+                  key={alertItem.id}
                   dropItem={alertItem}
                   removeAlert={removeFromNotificationList}
                 />

src/frontend/src/components/ui/loading.tsx

@@ -18,6 +18,7 @@ export const Loading = ({ size = 24, ...props }: LoadingProps) => (
     strokeLinejoin="round"
     className="feather feather-circle"
     {...props}
+    data-testid="loading-icon"
   >
     <circle cx={12} cy={12} r={10} strokeDasharray={63} strokeDashoffset={21}>
       <animateTransform

src/frontend/tests/extended/regression/general-bugs-icons-fallback.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { extractAndCleanCode } from "../../utils/extract-and-clean-code";
+
+test(
+  "user must be able to see icons fallback if the icon is not found",
+  { tag: ["@release", "@components"] },
+  async ({ page }) => {
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("blank-flow").click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("disclosure-data").click();
+    await page.waitForTimeout(500);
+    await page.getByTestId("disclosure-processing").click();
+    await page.waitForTimeout(500);
+    const loadingIcons = await page.getByTestId("loading-icon").count();
+    expect(loadingIcons).toBe(0);
+  },
+);