Introduce showNotification API

Summary: Introduced `showNotifcation` to the Sandy API.

Reviewed By: jknoxville

Differential Revision: D27012001

fbshipit-source-id: d3f237910a478400b0f925f0362af485c96072bb

desktop/flipper-plugin/src/__tests__/api.node.tsx

@@ -72,6 +72,7 @@ test('Correct top level API exposed', () => {
       "Logger",
       "MenuEntry",
       "NormalizedMenuEntry",
+      "Notification",
       "PluginClient",
       "TrackType",
     ]

desktop/flipper-plugin/src/index.ts

@@ -46,6 +46,7 @@ export {
   buildInMenuEntries as _buildInMenuEntries,
   DefaultKeyboardAction,
 } from './plugin/MenuEntry';
+export {Notification} from './plugin/Notification';
 
 export {theme} from './ui/theme';
 export {Layout} from './ui/Layout';

desktop/flipper-plugin/src/plugin/FlipperLib.tsx

@@ -11,6 +11,7 @@ import {Logger} from '../utils/Logger';
 import {RealFlipperDevice} from './DevicePlugin';
 import {NormalizedMenuEntry} from './MenuEntry';
 import {RealFlipperClient} from './Plugin';
+import {Notification} from './Notification';
 
 /**
  * This interface exposes all global methods for which an implementation will be provided by Flipper itself
@@ -33,6 +34,7 @@ export interface FlipperLib {
     deeplink: unknown,
   ): void;
   writeTextToClipboard(text: string): void;
+  showNotification(pluginKey: string, notification: Notification): void;
 }
 
 let flipperLibInstance: FlipperLib | undefined;

desktop/flipper-plugin/src/plugin/Notification.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export type Notification = {
+  id: string;
+  title: string;
+  message: string | React.ReactNode;
+  severity: 'warning' | 'error';
+  timestamp?: number;
+  category?: string;
+  /** The action will be available as deeplink payload when the notification is clicked. */
+  action?: string;
+};

desktop/flipper-plugin/src/plugin/PluginBase.tsx

@@ -7,14 +7,15 @@
  * @format
  */
 
-import {SandyPluginDefinition} from './SandyPluginDefinition';
+import {message} from 'antd';
 import {EventEmitter} from 'events';
+import {SandyPluginDefinition} from './SandyPluginDefinition';
 import {MenuEntry, NormalizedMenuEntry, normalizeMenuEntry} from './MenuEntry';
 import {FlipperLib} from './FlipperLib';
 import {Device, RealFlipperDevice} from './DevicePlugin';
 import {batched} from '../state/batch';
 import {Idler} from '../utils/Idler';
-import {message} from 'antd';
+import {Notification} from './Notification';
 
 type StateExportHandler<T = any> = (
   idler: Idler,
@@ -23,6 +24,9 @@ type StateExportHandler<T = any> = (
 type StateImportHandler<T = any> = (data: T) => void;
 
 export interface BasePluginClient {
+  /**
+   * A key that uniquely identifies this plugin instance, captures the current device/client/plugin combination.
+   */
   readonly pluginKey: string;
   readonly device: Device;
 
@@ -74,6 +78,14 @@ export interface BasePluginClient {
    * Always returns `false` in open source.
    */
   GK(gkName: string): boolean;
+
+  /**
+   * Shows an urgent, system wide notification, that will also be registered in Flipper's notification pane.
+   * For on-screen notifications, we recommend to use either the `message` or `notification` API from `antd` directly.
+   *
+   * Clicking the notification will open this plugin. If the `action` id is set, it will be used as deeplink.
+   */
+  showNotification(notification: Notification): void;
 }
 
 let currentPluginInstance: BasePluginInstance | undefined = undefined;
@@ -262,6 +274,9 @@ export abstract class BasePluginInstance {
       },
       createPaste: this.flipperLib.createPaste,
       GK: this.flipperLib.GK,
+      showNotification: (notification: Notification) => {
+        this.flipperLib.showNotification(this.pluginKey, notification);
+      },
     };
   }
 

desktop/flipper-plugin/src/test-utils/test-utils.tsx

@@ -371,6 +371,7 @@ export function createMockFlipperLib(options?: StartPluginOptions): FlipperLib {
     selectPlugin: jest.fn(),
     isPluginAvailable: jest.fn().mockImplementation(() => false),
     writeTextToClipboard: jest.fn(),
+    showNotification: jest.fn(),
   };
 }