Introduce Dialog.alert

Summary: Introduce `Dialog.alert` to show users a FYI message, and be able to wait for it to be handled, as utility around several `Modal` utilities.

Reviewed By: jknoxville

Differential Revision: D29875484

fbshipit-source-id: 5d2ea83e486631ac18a81800b467f97dfaac6d34

desktop/app/src/dispatcher/application.tsx

@@ -17,7 +17,7 @@ import {
 } from '../utils/exportData';
 import {tryCatchReportPlatformFailures} from '../utils/metrics';
 import {handleDeeplink} from '../deeplink';
-import {message} from 'antd';
+import {Dialog} from 'flipper-plugin';
 
 export default (store: Store, _logger: Logger) => {
   const currentWindow = remote.getCurrentWindow();
@@ -59,7 +59,13 @@ export default (store: Store, _logger: Logger) => {
     (_event: IpcRendererEvent, query: string) => {
       handleDeeplink(store, query).catch((e) => {
         console.warn('Failed to handle deeplink', query, e);
-        message.error(`Failed to handle deeplink '${query}': ${e}`);
+        Dialog.alert({
+          title: 'Failed to open deeplink',
+          type: 'error',
+          message: `Failed to handle deeplink '${query}': ${
+            e.message ?? e.toString()
+          }`,
+        });
       });
     },
   );

desktop/flipper-plugin/src/ui/Dialog.tsx

@@ -77,14 +77,33 @@ export const Dialog = {
 
   confirm({
     message,
+    onConfirm,
     ...rest
   }: {
     message: React.ReactNode;
+    onConfirm?: () => Promise<true>;
   } & BaseDialogOptions): DialogResult<true> {
     return Dialog.show<true>({
       ...rest,
       children: message,
-      onConfirm: async () => true,
+      onConfirm: onConfirm ?? (async () => true),
+    });
+  },
+
+  alert({
+    message,
+    type,
+    ...rest
+  }: {
+    message: React.ReactNode;
+    type: 'info' | 'error' | 'warning' | 'success';
+  } & BaseDialogOptions): Promise<void> {
+    return new Promise((resolve) => {
+      Modal[type]({
+        afterClose: resolve,
+        content: message,
+        ...rest,
+      });
     });
   },
 

docs/extending/flipper-plugin.mdx

@@ -914,7 +914,7 @@ Available utilities
 
 * `Dialog.confirm(options): Promise<boolean>`. Show a confirmation dialog to the user. Options:
   * `message`: Description of what the user is confirming.
-* `Dialog.prompt(options): Promise<string | false>`. Prompt the user for some input. Options:
+* `Dialog.prompt(options): Promise<string | false>`. Inspired by `window.prompt`. Prompt the user for some input. Options:
   * `message`: Text accompanying the input
   * `defaultValue`
   * `onConfirm(value) => Promise<string>`. Can be used to transform the inputted value before resolving the prompt promise. If the handler throws, this will be shown as validation error in the dialog.
@@ -923,6 +923,9 @@ Available utilities
 * `Dialog.show<T>(options): Promise<T | false`. Low level building block to build dialogs. Options:
   * `children`: React Element to render as children of the dialog.
   * `onConfirm: () => Promise<T>`. Handler to handle the OK button, which should produce the value the `Dialog.show` call will resolve to.
+* `Dialog.alert(options)` show a small dialog, inspired by window.alert. Returns a `Promise<void>`. Options:
+  * `type`, determines style. One of: `'info' | 'error' | 'warning' | 'success'`.
+  * `message` parameter to specificy the content of the dialog.
 
 ### Spinner