(feat) O3-2883: Use toast notifications for system-generated error me…

…ssages (#937) Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Feb 22, 2024 · 4e6cb76 · 4e6cb76
1 parent 5adfe9e
commit 4e6cb76
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 93 deletions.
diff --git a/packages/framework/esm-error-handling/src/index.ts b/packages/framework/esm-error-handling/src/index.ts
@@ -1,9 +1,9 @@
 /** @module @category Error Handling */
-import { dispatchNotificationShown } from '@openmrs/esm-globals';
+import { dispatchToastShown } from '@openmrs/esm-globals';
 
 window.onerror = function (error) {
   console.error('Unexpected error: ', error);
-  dispatchNotificationShown({
+  dispatchToastShown({
     description: error ?? 'Oops! An unexpected error occurred.',
     kind: 'error',
     title: 'Error',
@@ -13,7 +13,7 @@ window.onerror = function (error) {
 
 window.onunhandledrejection = function (event) {
   console.error('Unhandled rejection: ', event.reason);
-  dispatchNotificationShown({
+  dispatchToastShown({
     description: event.reason ?? 'Oops! An unhandled promise rejection occurred.',
     kind: 'error',
     title: 'Error',

diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
@@ -690,7 +690,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:28](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L28)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:23](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L23)
 
 ___
 
@@ -4629,7 +4629,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:104](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L104)
+[packages/framework/esm-globals/src/events.ts:107](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L107)
 
 ___
 
@@ -4655,7 +4655,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:97](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L97)
+[packages/framework/esm-globals/src/events.ts:100](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L100)
 
 ___
 
@@ -4681,7 +4681,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:118](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L118)
+[packages/framework/esm-globals/src/events.ts:121](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L121)
 
 ___
 
@@ -4707,7 +4707,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:111](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L111)
+[packages/framework/esm-globals/src/events.ts:114](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L114)
 
 ___
 

diff --git a/packages/framework/esm-framework/docs/interfaces/ShowSnackbarEvent.md b/packages/framework/esm-framework/docs/interfaces/ShowSnackbarEvent.md
@@ -26,7 +26,7 @@
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:72](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L72)
+[packages/framework/esm-globals/src/events.ts:71](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L71)
 
 ___
 
@@ -36,7 +36,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:75](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L75)
+[packages/framework/esm-globals/src/events.ts:74](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L74)
 
 ___
 
@@ -46,7 +46,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:70](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L70)
+[packages/framework/esm-globals/src/events.ts:69](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L69)
 
 ___
 
@@ -56,7 +56,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:74](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L74)
+[packages/framework/esm-globals/src/events.ts:73](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L73)
 
 ___
 
@@ -66,7 +66,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:69](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L69)
+[packages/framework/esm-globals/src/events.ts:68](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L68)
 
 ___
 
@@ -76,7 +76,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:76](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L76)
+[packages/framework/esm-globals/src/events.ts:75](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L75)
 
 ___
 
@@ -86,7 +86,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:71](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L71)
+[packages/framework/esm-globals/src/events.ts:70](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L70)
 
 ## Methods
 
@@ -100,4 +100,4 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:73](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L73)
+[packages/framework/esm-globals/src/events.ts:72](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L72)
diff --git a/packages/framework/esm-framework/docs/interfaces/ShowToastEvent.md b/packages/framework/esm-framework/docs/interfaces/ShowToastEvent.md
@@ -9,7 +9,6 @@
 - [actionButtonLabel](ShowToastEvent.md#actionbuttonlabel)
 - [description](ShowToastEvent.md#description)
 - [kind](ShowToastEvent.md#kind)
-- [millis](ShowToastEvent.md#millis)
 - [title](ShowToastEvent.md#title)
 
 ### Methods
@@ -24,7 +23,7 @@
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:63](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L63)
+[packages/framework/esm-globals/src/events.ts:62](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L62)
 
 ___
 
@@ -48,16 +47,6 @@ ___
 
 ___
 
-### millis
-
-• `Optional` **millis**: `number`
-
-#### Defined in
-
-[packages/framework/esm-globals/src/events.ts:62](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L62)
-
-___
-
 ### title
 
 • `Optional` **title**: `string`
@@ -78,4 +67,4 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:64](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L64)
+[packages/framework/esm-globals/src/events.ts:63](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L63)
diff --git a/packages/framework/esm-framework/docs/interfaces/ToastDescriptor.md b/packages/framework/esm-framework/docs/interfaces/ToastDescriptor.md
@@ -16,7 +16,6 @@
 - [critical](ToastDescriptor.md#critical)
 - [description](ToastDescriptor.md#description)
 - [kind](ToastDescriptor.md#kind)
-- [millis](ToastDescriptor.md#millis)
 - [title](ToastDescriptor.md#title)
 
 ### UI Methods
@@ -31,7 +30,7 @@
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:17](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L17)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:13](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L13)
 
 ___
 
@@ -41,7 +40,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L19)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:15](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L15)
 
 ___
 
@@ -51,7 +50,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:15](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L15)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:11](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L11)
 
 ___
 
@@ -61,17 +60,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L18)
-
-___
-
-### millis
-
-• `Optional` **millis**: `number`
-
-#### Defined in
-
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:21](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L21)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:14](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L14)
 
 ___
 
@@ -81,7 +70,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:20](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L20)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:16](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L16)
 
 ## UI Methods
 
@@ -95,4 +84,4 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:16](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L16)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:12](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L12)
diff --git a/packages/framework/esm-framework/docs/interfaces/ToastNotificationMeta.md b/packages/framework/esm-framework/docs/interfaces/ToastNotificationMeta.md
@@ -17,7 +17,6 @@
 - [description](ToastNotificationMeta.md#description)
 - [id](ToastNotificationMeta.md#id)
 - [kind](ToastNotificationMeta.md#kind)
-- [millis](ToastNotificationMeta.md#millis)
 - [title](ToastNotificationMeta.md#title)
 
 ### UI Methods
@@ -36,7 +35,7 @@
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:17](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L17)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:13](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L13)
 
 ___
 
@@ -50,7 +49,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L19)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:15](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L15)
 
 ___
 
@@ -64,7 +63,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:15](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L15)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:11](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L11)
 
 ___
 
@@ -74,7 +73,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:25](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L25)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:20](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L20)
 
 ___
 
@@ -88,21 +87,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L18)
-
-___
-
-### millis
-
-• `Optional` **millis**: `number`
-
-#### Inherited from
-
-[ToastDescriptor](ToastDescriptor.md).[millis](ToastDescriptor.md#millis)
-
-#### Defined in
-
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:21](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L21)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:14](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L14)
 
 ___
 
@@ -116,7 +101,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:20](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L20)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:16](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L16)
 
 ## UI Methods
 
@@ -134,4 +119,4 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:16](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L16)
+[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:12](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L12)
diff --git a/packages/framework/esm-globals/src/events.ts b/packages/framework/esm-globals/src/events.ts
@@ -59,7 +59,6 @@ export interface ShowToastEvent {
   description: any;
   kind?: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
   title?: string;
-  millis?: number;
   actionButtonLabel?: string | any;
   onActionButtonClick?: () => void;
 }
@@ -93,6 +92,10 @@ export function dispatchSnackbarShown(data: ShowSnackbarEvent) {
   window.dispatchEvent(new CustomEvent(snackbarShownName, { detail: data }));
 }
 
+export function dispatchToastShown(data: ShowToastEvent) {
+  window.dispatchEvent(new CustomEvent(toastShownName, { detail: data }));
+}
+
 /** @category UI */
 export function subscribeNotificationShown(cb: (data: ShowNotificationEvent) => void) {
   const handler = (ev: CustomEvent) => cb(ev.detail);

diff --git a/packages/framework/esm-styleguide/src/toasts/toast.component.tsx b/packages/framework/esm-styleguide/src/toasts/toast.component.tsx
@@ -1,11 +1,7 @@
 /** @module @category UI */
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { ActionableNotification } from '@carbon/react';
 
-const defaultOptions = {
-  millis: 5000,
-};
-
 export interface ToastProps {
   toast: ToastNotificationMeta;
   closeToast(): void;
@@ -18,7 +14,6 @@ export interface ToastDescriptor {
   kind?: ToastType;
   critical?: boolean;
   title?: string;
-  millis?: number;
 }
 
 export interface ToastNotificationMeta extends ToastDescriptor {
@@ -28,30 +23,14 @@ export interface ToastNotificationMeta extends ToastDescriptor {
 export type ToastType = 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
 
 export const Toast: React.FC<ToastProps> = ({ toast, closeToast }) => {
-  const {
-    description,
-    kind,
-    critical,
-    title,
-    actionButtonLabel,
-    onActionButtonClick = () => {},
-    millis = defaultOptions.millis,
-  } = toast;
-  const [waitingForTime, setWaitingForTime] = useState(true);
+  const { description, kind, critical, title, actionButtonLabel, onActionButtonClick = () => {} } = toast;
   const handleActionClick = useCallback(() => {
     onActionButtonClick();
     closeToast();
   }, [closeToast, onActionButtonClick]);
 
-  useEffect(() => {
-    if (!actionButtonLabel && waitingForTime) {
-      const timeoutId = setTimeout(closeToast, millis);
-      return () => clearTimeout(timeoutId);
-    }
-  }, [closeToast, waitingForTime, millis, actionButtonLabel]);
-
   return (
-    <div onMouseEnter={() => setWaitingForTime(false)} onMouseLeave={() => setWaitingForTime(true)}>
+    <div>
       <ActionableNotification
         actionButtonLabel={actionButtonLabel}
         kind={kind || 'info'}