No device warning

Reviewed By: LukeDefeo

Differential Revision: D47473652

fbshipit-source-id: d4fe51c20cb555d3701aa112ccf3ea9edd23c903

desktop/flipper-ui-core/src/sandy-chrome/appinspect/NoDevices.tsx

@@ -8,9 +8,9 @@
  */
 
 import React from 'react';
-import {RocketOutlined} from '@ant-design/icons';
+import {RocketOutlined, WarningOutlined} from '@ant-design/icons';
-import {Alert, Typography} from 'antd';
+import {Alert, Tooltip, Typography} from 'antd';
-import {useTrackedCallback} from 'flipper-plugin';
+import {useTrackedCallback, Layout, theme} from 'flipper-plugin';
 import {showEmulatorLauncher} from './LaunchEmulator';
 import {useStore} from '../../utils/useStore';
 
@@ -28,21 +28,29 @@ export function NoDevices() {
   );
 
   return (
-    <Alert
+    <Tooltip
-      type="info"
+      title={
-      message={
+        <Alert
-        <>
+          type="info"
-          <Title level={4}>No devices found</Title>
+          message={
-          <Text>
+            <>
-            Start a fresh emulator <RocketOutlined onClick={onLaunchEmulator} />{' '}
+              <Title level={4}>No devices found</Title>
-            or check the{' '}
+              <Text>
-            <Link href="https://fbflipper.com/docs/getting-started/troubleshooting/">
+                Start a fresh emulator{' '}
-              troubleshooting guide
+                <RocketOutlined onClick={onLaunchEmulator} /> or check the{' '}
-            </Link>
+                <Link href="https://fbflipper.com/docs/getting-started/troubleshooting/">
-            .
+                  troubleshooting guide
-          </Text>
+                </Link>
-        </>
+                .
-      }
+              </Text>
-    />
+            </>
+          }
+        />
+      }>
+      <Layout.Container
+        style={{alignItems: 'center', justifyContent: 'space-around'}}>
+        <WarningOutlined style={{fontSize: 32, color: theme.warningColor}} />
+      </Layout.Container>
+    </Tooltip>
   );
 }