From 203ca36d5a10a58a766aee3b454a81e5ff2d422c Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 10 Mar 2025 18:04:31 -0300
Subject: [PATCH] fix: improve ref naming causing fallback error on icons +
 regression test (#6989)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ♻️ (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/alerts/alertDropDown/index.tsx        | 14 ++++-------
 src/frontend/src/components/ui/loading.tsx    |  1 +
 .../general-bugs-icons-fallback.spec.ts       | 24 +++++++++++++++++++
 3 files changed, 29 insertions(+), 10 deletions(-)
 create mode 100644 src/frontend/tests/extended/regression/general-bugs-icons-fallback.spec.ts

diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 3d830f25b..87e2fac56 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/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]);
-
-    const uid = new ShortUniqueId();
+    }, [open]);
 
     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
-            ref={notificationRef}
-            className="text-md flex flex-row justify-between pl-3 font-medium text-foreground"
-          >
+          <div 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}
                 />
diff --git a/src/frontend/src/components/ui/loading.tsx b/src/frontend/src/components/ui/loading.tsx
index 2e81bacf9..af8b73a99 100644
--- a/src/frontend/src/components/ui/loading.tsx
+++ b/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
diff --git a/src/frontend/tests/extended/regression/general-bugs-icons-fallback.spec.ts b/src/frontend/tests/extended/regression/general-bugs-icons-fallback.spec.ts
new file mode 100644
index 000000000..3e74fec3d
--- /dev/null
+++ b/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);
+  },
+);