[Backport 2.x] Adds toast ID to toast api

CHANGELOG.md

@@ -22,6 +22,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Monaco editor] Add json worker support ([#3424](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3424))
 - [Dashboard] Indicate that IE is no longer supported ([#3641](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3641))
 - [Data] Add geo shape filter field ([#3605](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3605))
+- [Notifications] Adds id to toast api for deduplication ([#3752](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3752))
 - [UI] Add support for comma delimiters in the global filter bar ([#3686](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3686))
 - [VisBuilder] Add UI actions handler ([#3732](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3732))
 

src/core/public/notifications/toasts/toasts_api.test.ts

@@ -105,6 +105,24 @@ describe('#get$()', () => {
     toasts.remove('bar');
     expect(onToasts).not.toHaveBeenCalled();
   });
+
+  it('does not emit a new toast list when a toast with the same id is passed to add()', () => {
+    const toasts = new ToastsApi(toastDeps());
+    const onToasts = jest.fn();
+
+    toasts.get$().subscribe(onToasts);
+    toasts.add({
+      id: 'foo',
+      title: 'foo',
+    });
+    onToasts.mockClear();
+
+    toasts.add({
+      id: 'foo',
+      title: 'bar',
+    });
+    expect(onToasts).not.toHaveBeenCalled();
+  });
 });
 
 describe('#add()', () => {
@@ -135,6 +153,11 @@ describe('#add()', () => {
     const toasts = new ToastsApi(toastDeps());
     expect(toasts.add('foo')).toHaveProperty('title', 'foo');
   });
+
+  it('accepts an id and does not auto increment', async () => {
+    const toasts = new ToastsApi(toastDeps());
+    expect(toasts.add({ id: 'foo', title: 'not foo' })).toHaveProperty('id', 'foo');
+  });
 });
 
 describe('#remove()', () => {

src/core/public/notifications/toasts/toasts_api.tsx

@@ -42,12 +42,10 @@ import { I18nStart } from '../../i18n';
 /**
  * Allowed fields for {@link ToastInput}.
  *
- * @remarks
- * `id` cannot be specified.
- *
  * @public
  */
 export type ToastInputFields = Pick<EuiToast, Exclude<keyof EuiToast, 'id' | 'text' | 'title'>> & {
+  id?: string;
   title?: string | MountPoint;
   text?: string | MountPoint;
 };
@@ -143,6 +141,16 @@ export class ToastsApi implements IToasts {
    * @returns a {@link Toast}
    */
   public add(toastOrTitle: ToastInput) {
+    if (typeof toastOrTitle !== 'string') {
+      const toastObject = toastOrTitle;
+      const list = this.toasts$.getValue();
+      const existingToast = list.find((toast) => toast.id === toastObject.id);
+
+      if (existingToast) {
+        return existingToast;
+      }
+    }
+
     const toast: Toast = {
       id: String(this.idCounter++),
       toastLifeTimeMs: this.uiSettings.get('notifications:lifetime:info'),

src/plugins/vis_builder/public/application/components/workspace.tsx

@@ -56,7 +56,11 @@ export const WorkspaceUI = () => {
 
         const err = schemaValidation.errorMsg || aggValidation.errorMsg;
 
-        if (err) toasts.addWarning(err);
+        if (err)
+          toasts.addWarning({
+            id: 'vb_expression_validation',
+            title: err,
+          });
 
         return;
       }

src/plugins/vis_builder/public/application/utils/state_management/store.ts

@@ -47,9 +47,9 @@ export const getPreloadedStore = async (services: VisBuilderServices) => {
   };
 
   // the store subscriber will automatically detect changes and call handleChange function
-  store.subscribe(handleChange);
+  const unsubscribe = store.subscribe(handleChange);
 
-  return store;
+  return { store, unsubscribe };
 };
 
 // Infer the `RootState` and `AppDispatch` types from the store itself

src/plugins/vis_builder/public/plugin.ts

@@ -163,14 +163,15 @@ export class VisBuilderPlugin
         };
 
         // Instantiate the store
-        const store = await getPreloadedStore(services);
+        const { store, unsubscribe: unsubscribeStore } = await getPreloadedStore(services);
         const unmount = renderApp(params, services, store);
 
         // Render the application
         return () => {
           unlistenParentHistory();
           unmount();
           appUnMounted();
+          unsubscribeStore();
         };
       },
     });