From d5aaa0034d096a19ed244333a46045bbb2ed7508 Mon Sep 17 00:00:00 2001
From: Alex Yur <ayur@fb.com>
Date: Tue, 21 Sep 2021 11:42:54 -0700
Subject: [PATCH] Improve UI when no devices connected

Summary: Remove empty dropdown when no devices connected. Show 'No devices available' test instead.

Reviewed By: passy

Differential Revision: D31088007

fbshipit-source-id: 8a3bf0e8fbff04c7dfe2581f95576b3ab5ed4bcb
---
 .../sandy-chrome/appinspect/AppSelector.tsx   | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
index 71637fc2d..831a45ac7 100644
--- a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
+++ b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
@@ -85,32 +85,36 @@ export function AppSelector() {
 
   return (
     <>
-      <Radio.Group
-        value={selectedApp}
-        size="small"
-        style={{
-          display: 'flex',
-          flex: 1,
-        }}>
-        <Dropdown
-          trigger={['click']}
-          overlay={
-            <Menu selectedKeys={selectedApp ? [selectedApp] : []}>
-              {entries}
-            </Menu>
-          }>
-          <AppInspectButton title="Select the device / app to inspect">
-            <Layout.Horizontal gap center>
-              <AppIcon appname={client?.query.app} device={selectedDevice} />
-              <Layout.Container grow shrink>
-                <Text strong>{client?.query.app ?? ''}</Text>
-                <Text>{selectedDevice?.title || 'Available devices'}</Text>
-              </Layout.Container>
-              <CaretDownOutlined />
-            </Layout.Horizontal>
-          </AppInspectButton>
-        </Dropdown>
-      </Radio.Group>
+      {entries.length ? (
+        <Radio.Group
+          value={selectedApp}
+          size="small"
+          style={{
+            display: 'flex',
+            flex: 1,
+          }}>
+          <Dropdown
+            trigger={['click']}
+            overlay={
+              <Menu selectedKeys={selectedApp ? [selectedApp] : []}>
+                {entries}
+              </Menu>
+            }>
+            <AppInspectButton title="Select the device / app to inspect">
+              <Layout.Horizontal gap center>
+                <AppIcon appname={client?.query.app} device={selectedDevice} />
+                <Layout.Container grow shrink>
+                  <Text strong>{client?.query.app ?? ''}</Text>
+                  <Text>{selectedDevice?.title || 'Available devices'}</Text>
+                </Layout.Container>
+                <CaretDownOutlined />
+              </Layout.Horizontal>
+            </AppInspectButton>
+          </Dropdown>
+        </Radio.Group>
+      ) : (
+        <Text>{'No devices available'}</Text>
+      )}
       <TroubleshootingGuide
         showGuide={GK.get('flipper_self_sufficiency')}
         devicesDetected={entries.length}