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,14 +28,16 @@ export function NoDevices() {
   );
 
   return (
+    <Tooltip
+      title={
         <Alert
           type="info"
           message={
             <>
               <Title level={4}>No devices found</Title>
               <Text>
-            Start a fresh emulator <RocketOutlined onClick={onLaunchEmulator} />{' '}
+                Start a fresh emulator{' '}
-            or check the{' '}
+                <RocketOutlined onClick={onLaunchEmulator} /> or check the{' '}
                 <Link href="https://fbflipper.com/docs/getting-started/troubleshooting/">
                   troubleshooting guide
                 </Link>
@@ -44,5 +46,11 @@ export function NoDevices() {
             </>
           }
         />
+      }>
+      <Layout.Container
+        style={{alignItems: 'center', justifyContent: 'space-around'}}>
+        <WarningOutlined style={{fontSize: 32, color: theme.warningColor}} />
+      </Layout.Container>
+    </Tooltip>
   );
 }