[SharedUX] Merge similar toast messages in case of a toast-flood/storm (#161738)

## Summary
This PR addresses the occasional toast-floods/toast-storms with a simple
catch mechanism: deduplicate/group toasts by their broad alikeness,
their text and title.

This implementation plugs in to the `global_toast_list.tsx` in Kibana's
GlobalToastList component, capturing updates on the toast update stream,
and collapses toasts before passing them further to the downstream EUI
Toast list react components.

The core idea is to not display notifications directly, but to keep the
toast notifications apart from their visual representation. This way, we
can represent more notifications with one toast on our end, if we group
rightly. The only issue then, is to clean up everything nicely when it's
time. For this we're also exporting a mapping that shows which toast ID
represents which grouped toasts.

I also changed the type `ToastInputFields` to accept rendered react
components as title/text - this will prevent attempts to unmount react
components from elements that are not displayed, thus causing React
warnings.

The close-all button is an EUI feature, which we've started discussing
[here](https://github.com/elastic/eui/issues/6945), probably not part of
this PR.

## What toasts get merged?
The exact merging strategy was not settled, and it's kind of a valve,
where we trade off potential detail lost in toasts for the prevented
noise in the toast floods. The current strategy is as folows:
```
 * These toasts will be merged:
 *  - where title and text are strings, and the same (1)
 *  - where titles are the same, and texts are missing (2)
 *  - where titles are the same, and the text's mount function is the same string (3)
 *  - where titles are missing, but the texts are the same string (4)
``` 
The base merge case is `(1) & (2)`, after some discussion with @Dosant
we decided to include (3) as a compromise, where we're still merging
somewhat similar toasts, and extend the merging to `ToastsApi::addError`
where all error toasts have a MountPoint as their text. We understand
this might hide some details (e.g.: same titles, but very slightly
different MountPoints as their text) but realistically this shouldn't
really happen.

The ultimate future improvement will be (as suggested in the comments by
@jloleysens) a sort of identifier to the toast, based on which we can
group without fear of losing information. But this will require more
work on all the call-sites.
 
Relates to: #161482 


![1ca12f39-75af-4d24-8906-9f27fad33c45](b4578f2e-756d-40d0-9d24-fdffe8b9c724)


### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

### For maintainers

- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

packages/core/notifications/core-notifications-browser-internal/src/toasts/__snapshots__/deduplicate_toasts.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TitleWithBadge component renders with string titles 1`] = `
+<Fragment>
+  Welcome!
+   
+  <EuiNotificationBadge
+    className="css-1f5ny76"
+    color="subdued"
+    size="m"
+  >
+    5
+  </EuiNotificationBadge>
+</Fragment>
+`;

packages/core/notifications/core-notifications-browser-internal/src/toasts/__snapshots__/global_toast_list.test.tsx.snap

@@ -1,5 +1,117 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`global_toast_list with duplicate elements renders the list with a single element 1`] = `
+<EuiGlobalToastList
+  aria-label="Notification message list"
+  data-test-subj="globalToastList"
+  dismissToast={[Function]}
+  toastLifeTimeMs={Infinity}
+  toasts={
+    Array [
+      Object {
+        "id": "0",
+        "text": "You've got mail!",
+        "title": <TitleWithBadge
+          counter={4}
+          title="AOL Notifications"
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+    ]
+  }
+/>
+`;
+
+exports[`global_toast_list with duplicate elements, using MountPoints renders the all separate elements element: euiToastList 1`] = `
+<EuiGlobalToastList
+  aria-label="Notification message list"
+  data-test-subj="globalToastList"
+  dismissToast={[Function]}
+  toastLifeTimeMs={Infinity}
+  toasts={
+    Array [
+      Object {
+        "id": "0",
+        "text": "You've got mail!",
+        "title": <MountWrapper
+          mount={[Function]}
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+      Object {
+        "id": "1",
+        "text": "You've got mail!",
+        "title": <MountWrapper
+          mount={[Function]}
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+      Object {
+        "id": "2",
+        "text": "You've got mail!",
+        "title": <MountWrapper
+          mount={[Function]}
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+      Object {
+        "id": "3",
+        "text": "You've got mail!",
+        "title": <MountWrapper
+          mount={[Function]}
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+    ]
+  }
+/>
+`;
+
+exports[`global_toast_list with duplicate elements, using MountPoints renders the all separate elements element: globalToastList 1`] = `
+<EuiGlobalToastList
+  aria-label="Notification message list"
+  data-test-subj="globalToastList"
+  dismissToast={[Function]}
+  toastLifeTimeMs={Infinity}
+  toasts={
+    Array [
+      Object {
+        "id": "0",
+        "text": "You've got mail!",
+        "title": <MountWrapper
+          mount={[Function]}
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+      Object {
+        "id": "1",
+        "text": "You've got mail!",
+        "title": <MountWrapper
+          mount={[Function]}
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+      Object {
+        "id": "2",
+        "text": "You've got mail!",
+        "title": <MountWrapper
+          mount={[Function]}
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+      Object {
+        "id": "3",
+        "text": "You've got mail!",
+        "title": <MountWrapper
+          mount={[Function]}
+        />,
+        "toastLifeTimeMs": 5000,
+      },
+    ]
+  }
+/>
+`;
+
 exports[`renders matching snapshot 1`] = `
 <EuiGlobalToastList
   aria-label="Notification message list"

packages/core/notifications/core-notifications-browser-internal/src/toasts/deduplicate_toasts.test.tsx

@@ -0,0 +1,126 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { mount, render, shallow } from 'enzyme';
+import { ReactElement, ReactNode } from 'react';
+
+import { deduplicateToasts, TitleWithBadge, ToastWithRichTitle } from './deduplicate_toasts';
+import { Toast } from '@kbn/core-notifications-browser';
+import { MountPoint } from '@kbn/core-mount-utils-browser';
+
+function toast(title: string | MountPoint, text?: string | MountPoint, id = Math.random()): Toast {
+  return {
+    id: id.toString(),
+    title,
+    text,
+  };
+}
+
+const fakeMountPoint = () => () => {};
+
+describe('deduplicate toasts', () => {
+  it('returns an empty list for an empty input', () => {
+    const toasts: Toast[] = [];
+
+    const { toasts: deduplicatedToastList } = deduplicateToasts(toasts);
+
+    expect(deduplicatedToastList).toHaveLength(0);
+  });
+
+  it(`doesn't affect singular notifications`, () => {
+    const toasts: Toast[] = [
+      toast('A', 'B'), // single toast
+      toast('X', 'Y'), // single toast
+    ];
+
+    const { toasts: deduplicatedToastList } = deduplicateToasts(toasts);
+
+    expect(deduplicatedToastList).toHaveLength(toasts.length);
+    verifyTextAndTitle(deduplicatedToastList[0], 'A', 'B');
+    verifyTextAndTitle(deduplicatedToastList[1], 'X', 'Y');
+  });
+
+  it(`doesn't group notifications with MountPoints for title`, () => {
+    const toasts: Toast[] = [
+      toast('A', 'B'),
+      toast(fakeMountPoint, 'B'),
+      toast(fakeMountPoint, 'B'),
+      toast(fakeMountPoint, fakeMountPoint),
+      toast(fakeMountPoint, fakeMountPoint),
+    ];
+
+    const { toasts: deduplicatedToastList } = deduplicateToasts(toasts);
+
+    expect(deduplicatedToastList).toHaveLength(toasts.length);
+  });
+
+  it('groups toasts based on title + text', () => {
+    const toasts: Toast[] = [
+      toast('A', 'B'), // 2 of these
+      toast('X', 'Y'), // 3 of these
+      toast('A', 'B'),
+      toast('X', 'Y'),
+      toast('A', 'C'), // 1 of these
+      toast('X', 'Y'),
+    ];
+
+    const { toasts: deduplicatedToastList } = deduplicateToasts(toasts);
+
+    expect(deduplicatedToastList).toHaveLength(3);
+    verifyTextAndTitle(deduplicatedToastList[0], 'A 2', 'B');
+    verifyTextAndTitle(deduplicatedToastList[1], 'X 3', 'Y');
+    verifyTextAndTitle(deduplicatedToastList[2], 'A', 'C');
+  });
+
+  it('groups toasts based on title, when text is not available', () => {
+    const toasts: Toast[] = [
+      toast('A', 'B'), // 2 of these
+      toast('A', fakeMountPoint), // 2 of these
+      toast('A', 'C'), // 1 of this
+      toast('A', 'B'),
+      toast('A', fakeMountPoint),
+      toast('A'), // but it doesn't group functions with missing texts
+    ];
+
+    const { toasts: deduplicatedToastList } = deduplicateToasts(toasts);
+
+    expect(deduplicatedToastList).toHaveLength(4);
+    verifyTextAndTitle(deduplicatedToastList[0], 'A 2', 'B');
+    verifyTextAndTitle(deduplicatedToastList[1], 'A 2', expect.any(Function));
+    verifyTextAndTitle(deduplicatedToastList[2], 'A', 'C');
+    verifyTextAndTitle(deduplicatedToastList[3], 'A', undefined);
+  });
+});
+
+describe('TitleWithBadge component', () => {
+  it('renders with string titles', () => {
+    const title = 'Welcome!';
+
+    const titleComponent = <TitleWithBadge title={title} counter={5} />;
+    const shallowRender = shallow(titleComponent);
+    const fullRender = mount(titleComponent);
+
+    expect(fullRender.text()).toBe('Welcome! 5');
+    expect(shallowRender).toMatchSnapshot();
+  });
+});
+
+function verifyTextAndTitle(
+  { text, title }: ToastWithRichTitle,
+  expectedTitle?: string,
+  expectedText?: string
+) {
+  expect(getNodeText(title)).toEqual(expectedTitle);
+  expect(text).toEqual(expectedText);
+}
+
+function getNodeText(node: ReactNode) {
+  const rendered = render(node as ReactElement);
+  return rendered.text();
+}

packages/core/notifications/core-notifications-browser-internal/src/toasts/deduplicate_toasts.tsx

@@ -0,0 +1,138 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { ReactNode } from 'react';
+import { css } from '@emotion/css';
+
+import { EuiNotificationBadge } from '@elastic/eui';
+import { Toast } from '@kbn/core-notifications-browser';
+import { MountPoint } from '@kbn/core-mount-utils-browser';
+
+/**
+ * We can introduce this type within this domain, to allow for react-managed titles
+ */
+export type ToastWithRichTitle = Omit<Toast, 'title'> & {
+  title?: MountPoint | ReactNode;
+};
+
+export interface DeduplicateResult {
+  toasts: ToastWithRichTitle[];
+  idToToasts: Record<string, Toast[]>;
+}
+
+interface TitleWithBadgeProps {
+  title: string | undefined;
+  counter: number;
+}
+
+/**
+ * Collects toast messages to groups based on the `getKeyOf` function,
+ * then represents every group of message with a single toast
+ * @param allToasts
+ * @return the deduplicated list of toasts, and a lookup to find toasts represented by their first toast's ID
+ */
+export function deduplicateToasts(allToasts: Toast[]): DeduplicateResult {
+  const toastGroups = groupByKey(allToasts);
+
+  const distinctToasts: ToastWithRichTitle[] = [];
+  const idToToasts: Record<string, Toast[]> = {};
+  for (const toastGroup of Object.values(toastGroups)) {
+    const firstElement = toastGroup[0];
+    idToToasts[firstElement.id] = toastGroup;
+    if (toastGroup.length === 1) {
+      distinctToasts.push(firstElement);
+    } else {
+      // Grouping will only happen for toasts whose titles are strings (or missing)
+      const title = firstElement.title as string | undefined;
+      distinctToasts.push({
+        ...firstElement,
+        title: <TitleWithBadge title={title} counter={toastGroup.length} />,
+      });
+    }
+  }
+
+  return { toasts: distinctToasts, idToToasts };
+}
+
+/**
+ * Derives a key from a toast object
+ * these keys decide what makes between different toasts, and which ones should be merged
+ * These toasts will be merged:
+ *  - where title and text are strings, and the same
+ *  - where titles are the same, and texts are missing
+ *  - where titles are the same, and the text's mount function is the same string
+ *  - where titles are missing, but the texts are the same string
+ * @param toast The toast whose key we're deriving
+ */
+function getKeyOf(toast: Toast): string {
+  if (isString(toast.title) && isString(toast.text)) {
+    return toast.title + ' ' + toast.text;
+  } else if (isString(toast.title) && !toast.text) {
+    return toast.title;
+  } else if (isString(toast.title) && typeof toast.text === 'function') {
+    return toast.title + ' ' + djb2Hash(toast.text.toString());
+  } else if (isString(toast.text) && !toast.title) {
+    return toast.text;
+  } else {
+    // Either toast or text is a mount function, or both missing
+    return 'KEY_' + toast.id.toString();
+  }
+}
+
+function isString(a: string | any): a is string {
+  return typeof a === 'string';
+}
+
+// Based on: https://gist.github.com/eplawless/52813b1d8ad9af510d85
+function djb2Hash(str: string): number {
+  const len = str.length;
+  let hash = 5381;
+
+  for (let i = 0; i < len; i++) {
+    // eslint-disable-next-line no-bitwise
+    hash = (hash * 33) ^ str.charCodeAt(i);
+  }
+  // eslint-disable-next-line no-bitwise
+  return hash >>> 0;
+}
+
+function groupByKey(allToasts: Toast[]) {
+  const toastGroups: Record<string, Toast[]> = {};
+  for (const toast of allToasts) {
+    const key = getKeyOf(toast);
+
+    if (!toastGroups[key]) {
+      toastGroups[key] = [toast];
+    } else {
+      toastGroups[key].push(toast);
+    }
+  }
+  return toastGroups;
+}
+
+const floatTopRight = css`
+  position: absolute;
+  top: -8px;
+  right: -8px;
+`;
+
+/**
+ * A component that renders a title with a floating counter
+ * @param title {string} The title string
+ * @param counter {number} The count of notifications represented
+ */
+export function TitleWithBadge({ title, counter }: TitleWithBadgeProps) {
+  return (
+    <React.Fragment>
+      {title}{' '}
+      <EuiNotificationBadge color="subdued" size="m" className={floatTopRight}>
+        {counter}
+      </EuiNotificationBadge>
+    </React.Fragment>
+  );
+}

packages/core/notifications/core-notifications-browser-internal/src/toasts/global_toast_list.test.tsx

@@ -7,14 +7,17 @@
  */
 
 import { EuiGlobalToastList } from '@elastic/eui';
+import { Toast } from '@kbn/core-notifications-browser/src/types';
 import { shallow } from 'enzyme';
 import React from 'react';
 import { Observable, from, EMPTY } from 'rxjs';
 
 import { GlobalToastList } from './global_toast_list';
 
+const mockDismissToast = jest.fn();
+
 function render(props: Partial<GlobalToastList['props']> = {}) {
-  return <GlobalToastList dismissToast={jest.fn()} toasts$={EMPTY} {...props} />;
+  return <GlobalToastList dismissToast={mockDismissToast} toasts$={EMPTY} {...props} />;
 }
 
 it('renders matching snapshot', () => {
@@ -52,3 +55,78 @@ it('passes latest value from toasts$ to <EuiGlobalToastList />', () => {
 
   expect(el.find(EuiGlobalToastList).prop('toasts')).toEqual([{ id: '1' }, { id: '2' }]);
 });
+
+describe('global_toast_list with duplicate elements', () => {
+  const dummyText = `You've got mail!`;
+  const dummyTitle = `AOL Notifications`;
+  const toast = (id: any): Toast => ({
+    id: id.toString(),
+    text: dummyText,
+    title: dummyTitle,
+    toastLifeTimeMs: 5000,
+  });
+
+  const globalToastList = shallow(
+    render({
+      toasts$: from([[toast(0), toast(1), toast(2), toast(3)]]) as any,
+    })
+  );
+
+  const euiToastList = globalToastList.find(EuiGlobalToastList);
+  const toastsProp = euiToastList.prop('toasts');
+
+  it('renders the list with a single element', () => {
+    expect(toastsProp).toBeDefined();
+    expect(toastsProp).toHaveLength(1);
+    expect(euiToastList).toMatchSnapshot();
+  });
+
+  it('renders the single toast with the common text', () => {
+    const firstRenderedToast = toastsProp![0];
+    expect(firstRenderedToast.text).toBe(dummyText);
+  });
+
+  it(`calls all toast's dismiss when closed`, () => {
+    const firstRenderedToast = toastsProp![0];
+    const dismissToast = globalToastList.prop('dismissToast');
+    dismissToast(firstRenderedToast);
+
+    expect(mockDismissToast).toHaveBeenCalledTimes(4);
+    expect(mockDismissToast).toHaveBeenCalledWith('0');
+    expect(mockDismissToast).toHaveBeenCalledWith('1');
+    expect(mockDismissToast).toHaveBeenCalledWith('2');
+    expect(mockDismissToast).toHaveBeenCalledWith('3');
+  });
+});
+
+describe('global_toast_list with duplicate elements, using MountPoints', () => {
+  const dummyText = `You've got mail!`;
+  const toast = (id: any): Toast => ({
+    id: id.toString(),
+    text: dummyText,
+    title: (element) => {
+      const a = document.createElement('a');
+      a.innerText = 'Click me!';
+      a.href = 'https://elastic.co';
+      element.appendChild(a);
+      return () => element.removeChild(a);
+    },
+    toastLifeTimeMs: 5000,
+  });
+
+  const globalToastList = shallow(
+    render({
+      toasts$: from([[toast(0), toast(1), toast(2), toast(3)]]) as any,
+    })
+  );
+
+  const euiToastList = globalToastList.find(EuiGlobalToastList);
+  const toastsProp = euiToastList.prop('toasts');
+
+  it('renders the all separate elements element', () => {
+    expect(toastsProp).toBeDefined();
+    expect(toastsProp).toHaveLength(4);
+    expect(euiToastList).toMatchSnapshot('euiToastList');
+    expect(globalToastList).toMatchSnapshot('globalToastList');
+  });
+});

packages/core/notifications/core-notifications-browser-internal/src/toasts/global_toast_list.tsx

@@ -13,6 +13,7 @@ import { i18n } from '@kbn/i18n';
 
 import type { Toast } from '@kbn/core-notifications-browser';
 import { MountWrapper } from '@kbn/core-mount-utils-browser-internal';
+import { deduplicateToasts, ToastWithRichTitle } from './deduplicate_toasts';
 
 interface Props {
   toasts$: Observable<Toast[]>;
@@ -20,25 +21,28 @@ interface Props {
 }
 
 interface State {
-  toasts: Toast[];
+  toasts: ToastWithRichTitle[];
+  idToToasts: Record<string, Toast[]>;
 }
 
-const convertToEui = (toast: Toast): EuiToast => ({
+const convertToEui = (toast: ToastWithRichTitle): EuiToast => ({
   ...toast,
-  title: typeof toast.title === 'function' ? <MountWrapper mount={toast.title} /> : toast.title,
-  text: typeof toast.text === 'function' ? <MountWrapper mount={toast.text} /> : toast.text,
+  title: toast.title instanceof Function ? <MountWrapper mount={toast.title} /> : toast.title,
+  text: toast.text instanceof Function ? <MountWrapper mount={toast.text} /> : toast.text,
 });
 
 export class GlobalToastList extends React.Component<Props, State> {
   public state: State = {
     toasts: [],
+    idToToasts: {},
   };
 
   private subscription?: Subscription;
 
   public componentDidMount() {
-    this.subscription = this.props.toasts$.subscribe((toasts) => {
-      this.setState({ toasts });
+    this.subscription = this.props.toasts$.subscribe((redundantToastList) => {
+      const { toasts, idToToasts } = deduplicateToasts(redundantToastList);
+      this.setState({ toasts, idToToasts });
     });
   }
 
@@ -48,6 +52,13 @@ export class GlobalToastList extends React.Component<Props, State> {
     }
   }
 
+  private closeToastsRepresentedById(id: string) {
+    const representedToasts = this.state.idToToasts[id];
+    if (representedToasts) {
+      representedToasts.forEach((toast) => this.props.dismissToast(toast.id));
+    }
+  }
+
   public render() {
     return (
       <EuiGlobalToastList
@@ -56,7 +67,7 @@ export class GlobalToastList extends React.Component<Props, State> {
         })}
         data-test-subj="globalToastList"
         toasts={this.state.toasts.map(convertToEui)}
-        dismissToast={({ id }) => this.props.dismissToast(id)}
+        dismissToast={({ id }) => this.closeToastsRepresentedById(id)}
         /**
          * This prop is overridden by the individual toasts that are added.
          * Use `Infinity` here so that it's obvious a timeout hasn't been

packages/core/notifications/core-notifications-browser-internal/tsconfig.json

@@ -28,6 +28,7 @@
     "@kbn/test-jest-helpers",
     "@kbn/core-overlays-browser-mocks",
     "@kbn/core-theme-browser-mocks",
+    "@kbn/core-mount-utils-browser",
   ],
   "exclude": [
     "target/**/*",