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
This commit is contained in:
Alex Yur
2021-09-21 11:42:54 -07:00
committed by Facebook GitHub Bot
parent 97e5c897c6
commit d5aaa0034d

View File

@@ -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}