Add no device found error msg to guide

Summary:
Added noDeviceErrorMsg as a JSX.Element that will display 'No device found' if there are no devices detected. It is an empty JSX.Element otherwise and nothing is displayed as shown in the video.

I am using a JS variable as a JSX element in this diff. This simplifies the if else checks needed inside return, and reused the same styling we have.

Reviewed By: mweststrate

Differential Revision: D31193647

fbshipit-source-id: dea96232785c9e2987be1513fa3462452c996e66

desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx

@@ -14,6 +14,7 @@ import {
   AndroidOutlined,
   WindowsOutlined,
   CaretDownOutlined,
+  ExclamationCircleOutlined,
 } from '@ant-design/icons';
 import {Glyph, Layout, styled} from '../../ui';
 import {DeviceOS, theme, useTrackedCallback, useValue} from 'flipper-plugin';
@@ -113,7 +114,18 @@ export function AppSelector() {
           </Dropdown>
         </Radio.Group>
       ) : (
-        <Text>{'No devices available'}</Text>
+        <Layout.Horizontal gap center>
+          <ExclamationCircleOutlined style={{color: theme.warningColor}} />
+          <Text
+            type="secondary"
+            style={{
+              textTransform: 'uppercase',
+              fontSize: '0.8em',
+              color: theme.errorColor,
+            }}>
+            No devices found
+          </Text>
+        </Layout.Horizontal>
       )}
       <TroubleshootingGuide
         showGuide={GK.get('flipper_self_sufficiency')}