(feat) O3-2546: Add the ability to use actions in the existing toast (#…

…822) * implement the actionable toast * Update the documentation * some refactors * update docs * leverage the existing toast to allow actions * update docs * cleanup * override the green color for tertiary buttons to fix the notification action btns * fix lint changes * update docs again * tweak the auto closing logic --------- Co-authored-by: Ian <52504170+ibacher@users.noreply.github.com>
openmrs · Jan 8, 2024 · 966e697 · 966e697
1 parent ad1c754
commit 966e697
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 39 deletions.
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx b/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { showActionableNotification, UserHasAccess, useStore } from '@openmrs/esm-framework';
+import { showToast, UserHasAccess, useStore } from '@openmrs/esm-framework';
 import { implementerToolsStore, showModuleDiagnostics, togglePopup } from './store';
 
 import { useBackendDependencies } from './backend-dependencies/useBackendDependencies';
@@ -24,10 +24,10 @@ function PopupHandler() {
   useEffect(() => {
     // only show notification max. 1 time
     if (shouldShowNotification) {
-      showActionableNotification({
+      showToast({
         critical: false,
         kind: 'error',
-        subtitle: t(
+        description: t(
           'checkImplementerToolsMessage',
           'Check the Backend Modules tab in the Implementer Tools for more details',
         ),

diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
@@ -688,7 +688,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/toasts/toast.component.tsx:26](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L26)
+[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)
 
 ___
 
@@ -4564,7 +4564,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:102](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L102)
+[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)
 
 ___
 
@@ -4590,7 +4590,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:95](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L95)
+[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)
 
 ___
 
@@ -4616,7 +4616,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:116](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L116)
+[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)
 
 ___
 
@@ -4642,7 +4642,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:109](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L109)
+[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)
 
 ___
 

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: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:72](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L72)
 
 ___
 
@@ -36,7 +36,7 @@ ___
 
 #### 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:75](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L75)
 
 ___
 
@@ -46,7 +46,7 @@ ___
 
 #### Defined in
 
-[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)
+[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)
 
 ___
 
@@ -56,7 +56,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:74](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L74)
 
 ___
 
@@ -66,7 +66,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/events.ts:67](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L67)
+[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)
 
 ___
 
@@ -76,7 +76,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:76](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L76)
 
 ___
 
@@ -86,7 +86,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:71](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L71)
 
 ## Methods
 
@@ -100,4 +100,4 @@ ___
 
 #### 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:73](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L73)
diff --git a/packages/framework/esm-framework/docs/interfaces/ShowToastEvent.md b/packages/framework/esm-framework/docs/interfaces/ShowToastEvent.md
@@ -6,13 +6,28 @@
 
 ### Properties
 
+- [actionButtonLabel](ShowToastEvent.md#actionbuttonlabel)
 - [description](ShowToastEvent.md#description)
 - [kind](ShowToastEvent.md#kind)
 - [millis](ShowToastEvent.md#millis)
 - [title](ShowToastEvent.md#title)
 
+### Methods
+
+- [onActionButtonClick](ShowToastEvent.md#onactionbuttonclick)
+
 ## Properties
 
+### actionButtonLabel
+
+• `Optional` **actionButtonLabel**: `any`
+
+#### 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)
+
+___
+
 ### description
 
 • **description**: `any`
@@ -50,3 +65,17 @@ ___
 #### Defined in
 
 [packages/framework/esm-globals/src/events.ts:61](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/events.ts#L61)
+
+## Methods
+
+### onActionButtonClick
+
+▸ `Optional` **onActionButtonClick**(): `void`
+
+#### Returns
+
+`void`
+
+#### 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)
diff --git a/packages/framework/esm-framework/docs/interfaces/ToastDescriptor.md b/packages/framework/esm-framework/docs/interfaces/ToastDescriptor.md
@@ -12,21 +12,36 @@
 
 ### UI Properties
 
+- [actionButtonLabel](ToastDescriptor.md#actionbuttonlabel)
 - [critical](ToastDescriptor.md#critical)
 - [description](ToastDescriptor.md#description)
 - [kind](ToastDescriptor.md#kind)
 - [millis](ToastDescriptor.md#millis)
 - [title](ToastDescriptor.md#title)
 
+### UI Methods
+
+- [onActionButtonClick](ToastDescriptor.md#onactionbuttonclick)
+
 ## UI Properties
 
+### actionButtonLabel
+
+• `Optional` **actionButtonLabel**: `string`
+
+#### 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)
+
+___
+
 ### critical
 
 • `Optional` **critical**: `boolean`
 
 #### 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:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L19)
 
 ___
 
@@ -46,7 +61,7 @@ ___
 
 #### 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:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L18)
 
 ___
 
@@ -56,7 +71,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:21](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L21)
 
 ___
 
@@ -66,4 +81,18 @@ ___
 
 #### 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)
+[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)
+
+## UI Methods
+
+### onActionButtonClick
+
+▸ `Optional` **onActionButtonClick**(): `void`
+
+#### Returns
+
+`void`
+
+#### 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)
diff --git a/packages/framework/esm-framework/docs/interfaces/ToastNotificationMeta.md b/packages/framework/esm-framework/docs/interfaces/ToastNotificationMeta.md
@@ -12,15 +12,34 @@
 
 ### UI Properties
 
+- [actionButtonLabel](ToastNotificationMeta.md#actionbuttonlabel)
 - [critical](ToastNotificationMeta.md#critical)
 - [description](ToastNotificationMeta.md#description)
 - [id](ToastNotificationMeta.md#id)
 - [kind](ToastNotificationMeta.md#kind)
 - [millis](ToastNotificationMeta.md#millis)
 - [title](ToastNotificationMeta.md#title)
 
+### UI Methods
+
+- [onActionButtonClick](ToastNotificationMeta.md#onactionbuttonclick)
+
 ## UI Properties
 
+### actionButtonLabel
+
+• `Optional` **actionButtonLabel**: `string`
+
+#### Inherited from
+
+[ToastDescriptor](ToastDescriptor.md).[actionButtonLabel](ToastDescriptor.md#actionbuttonlabel)
+
+#### 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)
+
+___
+
 ### critical
 
 • `Optional` **critical**: `boolean`
@@ -31,7 +50,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:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L19)
 
 ___
 
@@ -55,7 +74,7 @@ ___
 
 #### Defined in
 
-[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)
+[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)
 
 ___
 
@@ -69,7 +88,7 @@ ___
 
 #### 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:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L18)
 
 ___
 
@@ -83,7 +102,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:21](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/toasts/toast.component.tsx#L21)
 
 ___
 
@@ -97,4 +116,22 @@ ___
 
 #### 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)
+[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)
+
+## UI Methods
+
+### onActionButtonClick
+
+▸ `Optional` **onActionButtonClick**(): `void`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+[ToastDescriptor](ToastDescriptor.md).[onActionButtonClick](ToastDescriptor.md#onactionbuttonclick)
+
+#### 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)
diff --git a/packages/framework/esm-globals/src/events.ts b/packages/framework/esm-globals/src/events.ts
@@ -60,6 +60,8 @@ export interface ShowToastEvent {
   kind?: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
   title?: string;
   millis?: number;
+  actionButtonLabel?: string | any;
+  onActionButtonClick?: () => void;
 }
 
 /** @category UI */
@@ -77,7 +79,7 @@ export interface ShowSnackbarEvent {
 const notificationShownName = 'openmrs:notification-shown';
 const actionableNotificationShownName = 'openmrs:actionable-notification-shown';
 const toastShownName = 'openmrs:toast-shown';
-const SnackbarShownName = 'openmrs:snack-bar-shown';
+const snackbarShownName = 'openmrs:snack-bar-shown';
 
 export function dispatchNotificationShown(data: ShowNotificationEvent) {
   window.dispatchEvent(new CustomEvent(notificationShownName, { detail: data }));
@@ -88,7 +90,7 @@ export function dispatchActionableNotificationShown(data: ShowActionableNotifica
 }
 
 export function dispatchSnackbarShown(data: ShowSnackbarEvent) {
-  window.dispatchEvent(new CustomEvent(SnackbarShownName, { detail: data }));
+  window.dispatchEvent(new CustomEvent(snackbarShownName, { detail: data }));
 }
 
 /** @category UI */
@@ -115,6 +117,6 @@ export function subscribeToastShown(cb: (data: ShowToastEvent) => void) {
 /** @category UI */
 export function subscribeSnackbarShown(cb: (data: ShowSnackbarEvent) => void) {
   const handler = (ev: CustomEvent) => cb(ev.detail);
-  window.addEventListener(SnackbarShownName, handler);
-  return () => window.removeEventListener(SnackbarShownName, handler);
+  window.addEventListener(snackbarShownName, handler);
+  return () => window.removeEventListener(snackbarShownName, handler);
 }
diff --git a/packages/framework/esm-styleguide/src/_overrides.scss b/packages/framework/esm-styleguide/src/_overrides.scss
@@ -621,3 +621,10 @@ html[dir='rtl'] {
     }
   }
 }
+
+// This is to override the green border and background color which we apply to tertiary buttons. Since this in the Notification carbon uses blue.
+.cds--actionable-notification__action-button.cds--btn--tertiary {
+  background-color: transparent;
+  border: 1px solid #0f62fe;
+  color: #0f62fe;
+}