refactor(ui): migrate toast notifications to core-components toast (open-metadata#29545)

* refactor(ui): migrate toast notifications to core-components toast

Replace useAlertStore + inline AlertBar pattern with toast from
@openmetadata/ui-core-components across the application.

- ToastUtils: showErrorToast/showSuccessToast/showWarningToast/showInfoToast
  now delegate to toast.error/success/warning/info
- AlertBar: decoupled from useAlertStore, now a pure display component
- Remove store-driven AlertBar renders from PageLayoutV1, OntologyEntityPanel,
  auth pages (ForgotPassword, SignInPage, BasicSignup, ResetPassword),
  and ContextCenter pages (Documents, Memories, Articles, Dashboard)
- Delete useAlertStore (addAlert had zero callers after ToastUtils migration)

AlertBar component retained for standalone in-page use (forms/modals).

* fix(ui): add alert-message testid to Toast for Playwright compatibility

* fix(ui): fix toast dismiss timings for warnings and errors

Rule-violation warnings were dismissing after 2.2s (core default)
instead of 5s, diverging from showWarningToast and the old
useAlertStore behavior. Non-rule errors now correctly pass empty
options so toast.error keeps its timeout:0 (stays until dismissed).

Also bumps the global default timeout from 2200ms to 3500ms.

* style(ui): reformat toast.error call for readability

* lint fix

* fix(e2e): scope alert-icon check to matched toast in toastNotification

Strict mode violation when multiple toasts appear simultaneously —
getByTestId('alert-icon') resolved to 2 elements. Scope both the
wait and the icon assertion to the toast matching the expected message.

* fix(e2e): handle duplicate toasts in toastNotification; reduce success timeout

.filter({ hasText }) resolves to 2 elements when the same success
message fires twice in quick succession. Add .first() to avoid strict
mode violation. Also reduce showSuccessToast default from 5000ms to
3000ms to shrink the overlap window.

* fix(e2e): handle duplicate toasts in toastNotification; reduce success timeout

- Replace raw getByText toast assertions in TestLibrary.spec.ts with
  toastNotification() to avoid strict mode violations when duplicate
  toasts appear simultaneously.
- Fix announcementForm: toast.success has no close button, so replace
  alert-icon-close click with toastNotification() verification.

* fix(e2e): replace raw alert-bar assertions with toastNotification()

Strict mode violations when multiple toasts appear simultaneously —
unscoped getByTestId('alert-bar') / toHaveText resolves to 2+ elements.
Replace all such patterns with toastNotification() which scopes to the
matching toast via .filter({ hasText }).first().

Files updated: Login.spec.ts, user.ts, entity.ts, DataProductRename,
MutuallyExclusiveColumnTags, NavigationBlocker, TestSuitePipelineRedeploy,
Domains, Entity.

Author: karanh37

openmetadata-ui-core-components/src/main/resources/ui/src/components/application/toast/toast-store.ts

@@ -28,7 +28,7 @@ export const toastQueue = new ToastQueue<ToastContent>({
 export interface ShowToastOptions {
   /** Whether the toast should dismiss automatically. Defaults to true. */
   autoDismiss?: boolean;
-  /** Auto-dismiss delay in ms. Defaults to 2200. Pass 0 to keep the toast until manually dismissed. */
+  /** Auto-dismiss delay in ms. Defaults to 3500. Pass 0 to keep the toast until manually dismissed. */
   timeout?: number;
 }
 
@@ -37,7 +37,7 @@ function add(
   variant: ToastVariant,
   options?: ShowToastOptions
 ): string {
-  const { autoDismiss = true, timeout = 2200 } = options ?? {};
+  const { autoDismiss = true, timeout = 3500 } = options ?? {};
 
   return toastQueue.add(
     { message, variant },

openmetadata-ui-core-components/src/main/resources/ui/src/components/application/toast/toast.tsx

@@ -88,11 +88,11 @@ export const Toast = ({ toast }: ToastProps) => {
           className={cx('tw:size-4', config.iconClass)}
         />
       </span>
-      {typeof messageOrNode === 'string' ? (
-        <span>{messageOrNode}</span>
-      ) : (
-        (messageOrNode as ReactNode)
-      )}
+      <span data-testid="alert-message">
+        {typeof messageOrNode === 'string'
+          ? messageOrNode
+          : (messageOrNode as ReactNode)}
+      </span>
       {showClose && state && (
         <Button
           aria-label="Close"

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/DataProductRename.spec.ts

@@ -22,6 +22,7 @@ import {
   createNewPage,
   getApiContext,
   redirectToHomePage,
+  toastNotification,
   uuid,
 } from '../../utils/common';
 import {
@@ -396,13 +397,7 @@ test.describe('Data Product Rename', () => {
       // Verify the response status is 400 (Bad Request)
       expect(response.status()).toBe(400);
 
-      // Verify an error alert is shown
-      await expect(page.getByTestId('alert-bar')).toBeVisible();
-
-      // Verify the error message contains information about the duplicate name
-      await expect(page.getByTestId('alert-message')).toContainText(
-        'already exists'
-      );
+      await toastNotification(page, /already exists/i);
     } finally {
       await dataProduct1.delete(apiContext);
       await dataProduct2.delete(apiContext);

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/DataQuality/TestLibrary.spec.ts

@@ -12,7 +12,12 @@
  */
 import test, { expect } from '@playwright/test';
 import { DOMAIN_TAGS } from '../../../constant/config';
-import { getApiContext, redirectToHomePage, uuid } from '../../../utils/common';
+import {
+  getApiContext,
+  redirectToHomePage,
+  toastNotification,
+  uuid,
+} from '../../../utils/common';
 import { findSystemTestDefinition } from '../../../utils/testCases';
 
 const TEST_DEFINITION_NAME = `AaroCustomTestDefinition${uuid()}`;
@@ -155,7 +160,7 @@ test.describe(
         expect(responseData.status()).toBe(201);
 
         // Wait for success toast
-        await expect(page.getByText(/created successfully/i)).toBeVisible();
+        await toastNotification(page, /created successfully/i);
 
         // Verify test definition appears in table
         await expect(page.getByTestId(TEST_DEFINITION_NAME)).toBeVisible();
@@ -206,7 +211,7 @@ test.describe(
         expect(responseData.status()).toBe(200);
 
         // Wait for success toast
-        await expect(page.getByText(/updated successfully/i)).toBeVisible();
+        await toastNotification(page, /updated successfully/i);
       });
 
       await test.step('should enable/disable test definition', async () => {
@@ -235,7 +240,7 @@ test.describe(
         expect(responseData.status()).toBe(200);
 
         // Wait for success toast
-        await expect(page.getByText(/updated successfully/i)).toBeVisible();
+        await toastNotification(page, /updated successfully/i);
 
         // Verify switch state changed
         await expect(firstSwitch).toHaveAttribute(
@@ -280,7 +285,7 @@ test.describe(
         expect(response.status()).toBe(200);
 
         // Wait for success toast
-        await expect(page.getByText(/deleted successfully/i)).toBeVisible();
+        await toastNotification(page, /deleted successfully/i);
 
         // Verify test definition is removed from table
         await expect(page.getByText(TEST_DEFINITION_NAME)).not.toBeVisible();
@@ -391,7 +396,7 @@ test.describe(
           const responseBody = await responseData.json();
           createdTestDefinitionId = responseBody.id;
 
-          await expect(page.getByText(/created successfully/i)).toBeVisible();
+          await toastNotification(page, /created successfully/i);
         });
       } finally {
         if (createdTestDefinitionId) {
@@ -631,7 +636,7 @@ test.describe(
         const responseData = await createResponse;
         expect(responseData.status()).toBe(201);
 
-        await expect(page.getByText(/created successfully/i)).toBeVisible();
+        await toastNotification(page, /created successfully/i);
         await expect(page.getByTestId(EXTERNAL_TEST_NAME)).toBeVisible();
       });
 
@@ -720,7 +725,7 @@ test.describe(
         expect(updatedBody.parameterDefinition[0].dataType).toBeUndefined();
         expect(updatedBody.parameterDefinition[0].description).toBeUndefined();
 
-        await expect(page.getByText(/updated successfully/i)).toBeVisible();
+        await toastNotification(page, /updated successfully/i);
       });
 
       await test.step('Delete external test definition', async () => {
@@ -750,7 +755,7 @@ test.describe(
         const response = await deleteResponse;
         expect(response.status()).toBe(200);
 
-        await expect(page.getByText(/deleted successfully/i)).toBeVisible();
+        await toastNotification(page, /deleted successfully/i);
         await expect(page.getByTestId(EXTERNAL_TEST_NAME)).not.toBeVisible();
       });
     });
@@ -831,7 +836,7 @@ test.describe(
         const createdData = await responseData.json();
         createdTestId = createdData.id;
 
-        await expect(page.getByText(/created successfully/i)).toBeVisible();
+        await toastNotification(page, /created successfully/i);
         await expect(
           page.getByTestId(SUPPORTED_SERVICES_TEST_NAME)
         ).toBeVisible();
@@ -953,7 +958,7 @@ test.describe(
         expect(updatedData.supportedServices).toContain('BigQuery');
         expect(updatedData.supportedServices).not.toContain('MySql');
 
-        await expect(page.getByText(/updated successfully/i)).toBeVisible();
+        await toastNotification(page, /updated successfully/i);
       });
 
       await test.step('Verify updated supported services are persisted', async () => {
@@ -1034,7 +1039,7 @@ test.describe(
             updatedData.supportedServices.length === 0
         ).toBeTruthy();
 
-        await expect(page.getByText(/updated successfully/i)).toBeVisible();
+        await toastNotification(page, /updated successfully/i);
       });
 
       await test.step('Delete test definition', async () => {
@@ -1060,7 +1065,7 @@ test.describe(
         const response = await deleteResponse;
         expect(response.status()).toBe(200);
 
-        await expect(page.getByText(/deleted successfully/i)).toBeVisible();
+        await toastNotification(page, /deleted successfully/i);
         await expect(
           page.getByTestId(SUPPORTED_SERVICES_TEST_NAME)
         ).not.toBeVisible();
@@ -1114,7 +1119,7 @@ test.describe(
 
         const responseData = await createResponse;
         expect(responseData.status()).toBe(201);
-        await expect(page.getByText(/created successfully/i)).toBeVisible();
+        await toastNotification(page, /created successfully/i);
       });
 
       await test.step('Change page size to 25', async () => {
@@ -1190,7 +1195,7 @@ test.describe(
         const updateResponse = await patchResponse;
         expect(updateResponse.status()).toBe(200);
 
-        await expect(page.getByText(/updated successfully/i)).toBeVisible();
+        await toastNotification(page, /updated successfully/i);
 
         // Verify we stayed on the same page (previous button state should be unchanged)
         if (prevDisabledBefore) {
@@ -1232,7 +1237,7 @@ test.describe(
         // Wait for the GET that happens after delete (page reset + fetch)
         await getResponse;
 
-        await expect(page.getByText(/deleted successfully/i)).toBeVisible();
+        await toastNotification(page, /deleted successfully/i);
 
         // Previous button should be disabled on first page
         const previousButton = page.getByTestId('previous');

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/MutuallyExclusiveColumnTags.spec.ts

@@ -13,7 +13,11 @@
 import { expect, test } from '@playwright/test';
 import { PLAYWRIGHT_BASIC_TEST_TAG_OBJ } from '../../constant/config';
 import { TableClass } from '../../support/entity/TableClass';
-import { createNewPage, redirectToHomePage } from '../../utils/common';
+import {
+  createNewPage,
+  redirectToHomePage,
+  toastNotification,
+} from '../../utils/common';
 import { waitForAllLoadersToDisappear } from '../../utils/entity';
 
 const table = new TableClass();
@@ -101,13 +105,7 @@ test(
     await page.click('[data-testid="saveAssociatedTag"]');
     await errorResponse;
 
-    // Verify that error alert is displayed
-    await expect(page.getByTestId('alert-bar')).toBeVisible();
-
-    // Verify the error message contains information about mutually exclusive tags
-    await expect(page.getByTestId('alert-message')).toContainText(
-      'mutually exclusive'
-    );
+    await toastNotification(page, /mutually exclusive/i);
 
     // Verify that the dropdown closes after error
     await expect(page.locator('.ant-select-dropdown')).not.toBeVisible();

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/NavigationBlocker.spec.ts

@@ -15,7 +15,7 @@ import { PLAYWRIGHT_BASIC_TEST_TAG_OBJ } from '../../constant/config';
 import { PersonaClass } from '../../support/persona/PersonaClass';
 import { UserClass } from '../../support/user/UserClass';
 import { performAdminLogin } from '../../utils/admin';
-import { redirectToHomePage } from '../../utils/common';
+import { redirectToHomePage, toastNotification } from '../../utils/common';
 import {
   navigateToCustomizeLandingPage,
   removeAndCheckWidget,
@@ -216,10 +216,7 @@ test.describe('Navigation Blocker Tests', PLAYWRIGHT_BASIC_TEST_TAG_OBJ, () => {
     await adminPage.locator('[data-testid="save-button"]').click();
     await saveResponse;
 
-    // Wait for success toast and save button to be disabled
-    await expect(
-      adminPage.locator('[data-testid="alert-message"]')
-    ).toContainText('Page layout created successfully.');
+    await toastNotification(adminPage, /Page layout created successfully/i);
     await expect(
       adminPage.locator('[data-testid="save-button"]')
     ).toBeDisabled();

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TestSuitePipelineRedeploy.spec.ts

@@ -14,7 +14,11 @@ import test, { expect } from '@playwright/test';
 import { PLAYWRIGHT_INGESTION_TAG_OBJ } from '../../constant/config';
 import { GlobalSettingOptions } from '../../constant/settings';
 import { TableClass } from '../../support/entity/TableClass';
-import { createNewPage, redirectToHomePage } from '../../utils/common';
+import {
+  createNewPage,
+  redirectToHomePage,
+  toastNotification,
+} from '../../utils/common';
 import { settingClick } from '../../utils/sidebar';
 
 // use the admin user to login
@@ -69,9 +73,7 @@ test.describe('Bulk Re-Deploy pipelines ', PLAYWRIGHT_INGESTION_TAG_OBJ, () => {
     await page.getByRole('button', { name: 'Re Deploy' }).click();
     await redeployResponse;
 
-    await expect(page.getByTestId('alert-bar')).toHaveText(
-      /Pipelines Re Deploy Successfully/i
-    );
+    await toastNotification(page, /Pipelines Re Deploy Successfully/i);
   });
 
   // TODO: Add test to verify the re-deployed pipelines for Database, Dashboard and other entities

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Domains.spec.ts

@@ -43,6 +43,7 @@ import {
   descriptionBox,
   getApiContext,
   redirectToHomePage,
+  toastNotification,
   uuid,
   visitGlossaryPage,
 } from '../../utils/common';
@@ -2729,13 +2730,7 @@ test.describe('Domain Rename Comprehensive Tests', () => {
       // Verify the response status is 409 (Conflict) or 400 (Bad Request)
       expect([400, 409]).toContain(response.status());
 
-      // Verify an error toast/alert is shown
-      await expect(page.getByTestId('alert-bar')).toBeVisible();
-
-      // Verify the error message contains information about the duplicate name
-      await expect(page.getByTestId('alert-message')).toContainText(
-        /already exists/i
-      );
+      await toastNotification(page, /already exists/i);
     } finally {
       await domain1.delete(apiContext);
       await domain2.delete(apiContext);

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Entity.spec.ts

@@ -46,6 +46,7 @@ import {
   getToken,
   redirectToHomePage,
   removeSingleSelectDomain,
+  toastNotification,
   uuid,
   verifyDomainPropagation,
 } from '../../utils/common';
@@ -1597,12 +1598,7 @@ Object.entries(entities).forEach(([key, EntityClass]) => {
             await expect(saveButton).toBeEnabled();
             await saveButton.click();
             await saveResponse;
-            await expect(
-              page
-                .locator('.column-detail-panel')
-                .getByTestId('alert-bar')
-                .getByTestId('alert-message')
-            ).toContainText('Description updated successfully');
+            await toastNotification(page, /Description updated successfully/i);
 
             await waitForAllLoadersToDisappear(page);
 

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Login.spec.ts

@@ -19,6 +19,7 @@ import {
   clickOutside,
   getDefaultAdminAPIContext,
   redirectToHomePage,
+  toastNotification,
   visitOwnProfilePage,
 } from '../../utils/common';
 import { waitForAllLoadersToDisappear } from '../../utils/entity';
@@ -124,9 +125,7 @@ test.describe('Login flow should work properly', () => {
     await page.locator('[data-testid="login"]').click();
     await loginResponse;
 
-    await expect(page.locator('[data-testid="alert-bar"]')).toHaveText(
-      LOGIN_ERROR_MESSAGE
-    );
+    await toastNotification(page, LOGIN_ERROR_MESSAGE);
 
     // Login with invalid password
     await page.fill('#email', CREDENTIALS.email);
@@ -135,9 +134,7 @@ test.describe('Login flow should work properly', () => {
     await page.locator('[data-testid="login"]').click();
     await loginResponse2;
 
-    await expect(page.locator('[data-testid="alert-bar"]')).toHaveText(
-      LOGIN_ERROR_MESSAGE
-    );
+    await toastNotification(page, LOGIN_ERROR_MESSAGE);
   });
 
   test('Forgot password and login with new password', async ({ page }) => {