feat(ui-devkit): Add `notify()` function

packages/admin-ui/src/app/shared/components/extension-host/extension-host.service.ts

@@ -5,6 +5,7 @@ import { merge, Observer, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { assertNever } from 'shared/shared-utils';
 
+import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { DataService } from '../../../data/providers/data.service';
 
 @Injectable()
@@ -13,7 +14,7 @@ export class ExtensionHostService implements OnDestroy {
     private cancellationMessage$ = new Subject<string>();
     private destroyMessage$ = new Subject<void>();
 
-    constructor(private dataService: DataService) {}
+    constructor(private dataService: DataService, private notificationService: NotificationService) {}
 
     init(extensionWindow: Window) {
         this.extensionWindow = extensionWindow;
@@ -57,6 +58,10 @@ export class ExtensionHostService implements OnDestroy {
                         .subscribe(this.createObserver(data.requestId, origin));
                     break;
                 }
+                case 'notification': {
+                    this.notificationService.notify(data.data);
+                    break;
+                }
                 default:
                     assertNever(data);
             }

packages/common/src/extension-host-types.ts

@@ -24,6 +24,16 @@ export interface MutationMessage extends BaseExtensionMessage {
     };
 }
 
+export interface NotificationMessage extends BaseExtensionMessage {
+    type: 'notification';
+    data: {
+        message: string;
+        translationVars?: { [key: string]: string | number };
+        type?: 'info' | 'success' | 'error' | 'warning';
+        duration?: number;
+    };
+}
+
 export interface CancellationMessage extends BaseExtensionMessage {
     type: 'cancellation';
     data: null;
@@ -34,7 +44,12 @@ export interface DestroyMessage extends BaseExtensionMessage {
     data: null;
 }
 
-export type ExtensionMesssage = QueryMessage | MutationMessage | CancellationMessage | DestroyMessage;
+export type ExtensionMesssage =
+    | QueryMessage
+    | MutationMessage
+    | NotificationMessage
+    | CancellationMessage
+    | DestroyMessage;
 
 export interface MessageResponse {
     requestId: string;

packages/ui-devkit/src/devkit-api.ts

@@ -2,6 +2,7 @@ import {
     BaseExtensionMessage,
     ExtensionMesssage,
     MessageResponse,
+    NotificationMessage,
     WatchQueryFetchPolicy,
 } from '@vendure/common/lib/extension-host-types';
 import { Observable } from 'rxjs';
@@ -10,6 +11,7 @@ import { take } from 'rxjs/operators';
 let targetOrigin = 'http://localhost:3000';
 
 /**
+ * @description
  * Set the [window.postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
  * `targetOrigin`. The Vendure ui-devkit uses the postMessage API to
  * enable cross-frame and cross-origin communication between the ui extension code and the Admin UI
@@ -20,6 +22,7 @@ export function setTargetOrigin(value: string) {
 }
 
 /**
+ * @description
  * Perform a GraphQL query and returns either an Observable or a Promise of the result.
  */
 export function graphQlQuery<T, V extends { [key: string]: any }>(
@@ -42,6 +45,7 @@ export function graphQlQuery<T, V extends { [key: string]: any }>(
 }
 
 /**
+ * @description
  * Perform a GraphQL mutation and returns either an Observable or a Promise of the result.
  */
 export function graphQlMutation<T, V extends { [key: string]: any }>(
@@ -62,6 +66,14 @@ export function graphQlMutation<T, V extends { [key: string]: any }>(
     };
 }
 
+/**
+ * @description
+ * Display a toast notification.
+ */
+export function notify(options: NotificationMessage['data']) {
+    sendMessage('notification', options).toPromise();
+}
+
 function sendMessage<T extends ExtensionMesssage>(type: T['type'], data: T['data']): Observable<any> {
     const requestId =
         type +