fix: add notifications UI and add integration test (#5286)

✨ (appHeaderComponent/index.tsx): Refactor AppHeader component to use AlertDropdown for notifications and improve user interaction with notifications tab
✅ (notifications.spec.ts): Add end-to-end test for user interaction with notifications tab in the frontend application

src/frontend/src/components/core/appHeaderComponent/index.tsx

@@ -101,31 +101,34 @@ export default function AppHeader(): JSX.Element {
             side="bottom"
             styleClasses="z-10"
           >
-            <Button
-              ref={notificationRef}
-              variant="ghost"
-              className={`relative ${activeState === "notifications" ? "bg-accent text-accent-foreground" : ""}`}
-              onClick={() =>
-                setActiveState((prev) =>
-                  prev === "notifications" ? null : "notifications",
-                )
-              }
-            >
-              <span
-                className={
-                  notificationCenter
-                    ? `absolute left-[31px] top-[10px] h-1 w-1 rounded-full bg-destructive`
-                    : "hidden"
+            <AlertDropdown onClose={() => setActiveState(null)}>
+              <Button
+                ref={notificationRef}
+                variant="ghost"
+                className={`relative ${activeState === "notifications" ? "bg-accent text-accent-foreground" : ""}`}
+                onClick={() =>
+                  setActiveState((prev) =>
+                    prev === "notifications" ? null : "notifications",
+                  )
                 }
-              />
-              <ForwardedIconComponent
-                name="Bell"
-                className="side-bar-button-size h-[18px] w-[18px]"
-              />
-              <span className="hidden whitespace-nowrap 2xl:inline">
-                Notifications
-              </span>
-            </Button>
+                data-testid="notification_button"
+              >
+                <span
+                  className={
+                    notificationCenter
+                      ? `absolute left-[31px] top-[10px] h-1 w-1 rounded-full bg-destructive`
+                      : "hidden"
+                  }
+                />
+                <ForwardedIconComponent
+                  name="Bell"
+                  className="side-bar-button-size h-[18px] w-[18px]"
+                />
+                <span className="hidden whitespace-nowrap 2xl:inline">
+                  Notifications
+                </span>
+              </Button>
+            </AlertDropdown>
           </ShadTooltip>
         </AlertDropdown>
         {!ENABLE_DATASTAX_LANGFLOW && (

src/frontend/tests/extended/features/notifications.spec.ts

@@ -0,0 +1,65 @@
+import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+
+test(
+  "User should be able to interact notifications tab",
+  { tag: ["@release"] },
+  async ({ page }) => {
+    await awaitBootstrapTest(page);
+    await page.getByTestId("blank-flow").click();
+    await page.waitForSelector('[data-testid="disclosure-inputs"]', {
+      timeout: 3000,
+      state: "visible",
+    });
+
+    await page.getByTestId("disclosure-inputs").click();
+    await page.waitForSelector('[data-testid="inputsChat Input"]', {
+      timeout: 3000,
+      state: "visible",
+    });
+    await page
+      .getByTestId("inputsChat Input")
+      .hover()
+      .then(async () => {
+        await page.getByTestId("add-component-button-chat-input").click();
+        await page.getByTestId("button_run_chat input").click();
+      });
+
+    await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+    await page.getByText("built successfully").last().click({
+      timeout: 15000,
+    });
+
+    await page.getByTestId("notification_button").click();
+
+    // Add explicit waits before checking visibility
+    await page.waitForSelector('[data-testid="icon-Trash2"]', {
+      timeout: 3000,
+      state: "visible",
+    });
+
+    await page.waitForSelector("text=Running components", {
+      timeout: 30000,
+      state: "visible",
+    });
+    // Then check visibility
+    const notificationsText = page
+      .getByText("Notifications", { exact: true })
+      .last();
+    await expect(notificationsText).toBeVisible();
+
+    const trashIcon = page.getByTestId("icon-Trash2").last();
+    await expect(trashIcon).toBeVisible();
+
+    const runningComponentsText = page
+      .getByText("Running components", { exact: true })
+      .last();
+    await expect(runningComponentsText).toBeVisible();
+
+    const builtSuccessfullyText = page
+      .getByText("Chat Input built successfully", { exact: true })
+      .last();
+    await expect(builtSuccessfullyText).toBeVisible();
+  },
+);