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,6 +101,7 @@ export default function AppHeader(): JSX.Element {
             side="bottom"
             styleClasses="z-10"
           >
+            <AlertDropdown onClose={() => setActiveState(null)}>
               <Button
                 ref={notificationRef}
                 variant="ghost"
@@ -110,6 +111,7 @@ export default function AppHeader(): JSX.Element {
                     prev === "notifications" ? null : "notifications",
                   )
                 }
+                data-testid="notification_button"
               >
                 <span
                   className={
@@ -126,6 +128,7 @@ export default function AppHeader(): JSX.Element {
                   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();
+  },
+);