Add button for emu launch selection

Summary: Based on afcoplan's feedback, now we're showing a button for launching the emulators instead of having it inline.

Reviewed By: mweststrate

Differential Revision: D30603659

fbshipit-source-id: edae6c63fd58647b406398c897215910938ae429

desktop/app/src/dispatcher/handleOpenPluginDeeplink.tsx

@@ -26,7 +26,6 @@ import isProduction, {isTest} from '../utils/isProduction';
 import restart from '../utils/restartFlipper';
 import BaseDevice from '../server/devices/BaseDevice';
 import Client from '../Client';
-import {Button} from 'antd';
 import {RocketOutlined} from '@ant-design/icons';
 import {showEmulatorLauncher} from '../sandy-chrome/appinspect/LaunchEmulator';
 
@@ -491,41 +490,42 @@ async function launchDeviceDialog(
   title: string,
 ) {
   return new Promise<boolean>((resolve) => {
-    const dialog = Dialog.alert({
+    const currentDevices = store.getState().connections.devices;
+    const waitForNewDevice = async () =>
+      await waitFor(
+        store,
+        (state) => state.connections.devices !== currentDevices,
+      );
+    const dialog = Dialog.confirm({
       title,
-      type: 'warning',
       message: (
         <p>
           To open the current deeplink for plugin {params.pluginId} a device{' '}
           {params.devices.length ? ' of type ' + params.devices.join(', ') : ''}{' '}
           should be up and running. No device was found. Please connect a device
-          or launch an emulator / simulator{' '}
-          <Button
-            icon={<RocketOutlined />}
-            title="Start Emulator / Simulator"
-            onClick={() => {
-              showEmulatorLauncher(store);
-            }}
-            size="small"
-          />
-          .
+          or launch an emulator / simulator.
         </p>
       ),
-      okText: 'Cancel',
+      cancelText: 'Cancel',
+      okText: 'Launch Device',
+      onConfirm: async () => {
+        showEmulatorLauncher(store);
+        await waitForNewDevice();
+        return true;
+      },
+      okButtonProps: {
+        icon: <RocketOutlined />,
+      },
     });
     // eslint-disable-next-line promise/catch-or-return
     dialog.then(() => {
-      // dialog was canceled
+      // dialog was cancelled
       resolve(false);
     });
 
-    const currentDevices = store.getState().connections.devices;
     // new devices were found
     // eslint-disable-next-line promise/catch-or-return
-    waitFor(
-      store,
-      (state) => state.connections.devices !== currentDevices,
-    ).then(() => {
+    waitForNewDevice().then(() => {
       dialog.close();
       resolve(true);
     });

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

@@ -7,13 +7,12 @@
  * @format
  */
 
-import {Alert, Input, Modal, Radio, Space, Typography} from 'antd';
+import {Alert, ButtonProps, Input, Modal, Radio, Space, Typography} from 'antd';
 import {createState, useValue} from '../state/atom';
 import React from 'react';
 import {renderReactRoot} from '../utils/renderReactRoot';
 import {Layout} from './Layout';
 import {Spinner} from './Spinner';
-
 type DialogResult<T> = Promise<false | T> & {close: () => void};
 
 type BaseDialogOptions = {
@@ -21,6 +20,8 @@ type BaseDialogOptions = {
   okText?: string;
   cancelText?: string;
   width?: number;
+  okButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
 };
 
 const defaultWidth = 400;
@@ -74,7 +75,9 @@ export const Dialog = {
                 disabled: opts.onValidate
                   ? !!opts.onValidate(currentValue) // non-falsy value means validation error
                   : false,
+                ...opts.okButtonProps,
               }}
+              cancelButtonProps={opts.cancelButtonProps}
               onCancel={cancel}
               width={opts.width ?? defaultWidth}>
               <Layout.Container gap>