From e974b28c8fef9f8f0d11ac6a83f1b4631e1c5f6a Mon Sep 17 00:00:00 2001
From: Ananya Arun <ananyaarun@fb.com>
Date: Tue, 28 Sep 2021 09:56:36 -0700
Subject: [PATCH] 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
---
 .../src/sandy-chrome/appinspect/AppSelector.tsx    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
index 115fe0a79..05732cc20 100644
--- a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
+++ b/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')}