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 ( return (
<> <>
<Radio.Group {entries.length ? (
value={selectedApp} <Radio.Group
size="small" value={selectedApp}
style={{ size="small"
display: 'flex', style={{
flex: 1, display: 'flex',
}}> flex: 1,
<Dropdown }}>
trigger={['click']} <Dropdown
overlay={ trigger={['click']}
<Menu selectedKeys={selectedApp ? [selectedApp] : []}> overlay={
{entries} <Menu selectedKeys={selectedApp ? [selectedApp] : []}>
</Menu> {entries}
}> </Menu>
<AppInspectButton title="Select the device / app to inspect"> }>
<Layout.Horizontal gap center> <AppInspectButton title="Select the device / app to inspect">
<AppIcon appname={client?.query.app} device={selectedDevice} /> <Layout.Horizontal gap center>
<Layout.Container grow shrink> <AppIcon appname={client?.query.app} device={selectedDevice} />
<Text strong>{client?.query.app ?? ''}</Text> <Layout.Container grow shrink>
<Text>{selectedDevice?.title || 'Available devices'}</Text> <Text strong>{client?.query.app ?? ''}</Text>
</Layout.Container> <Text>{selectedDevice?.title || 'Available devices'}</Text>
<CaretDownOutlined /> </Layout.Container>
</Layout.Horizontal> <CaretDownOutlined />
</AppInspectButton> </Layout.Horizontal>
</Dropdown> </AppInspectButton>
</Radio.Group> </Dropdown>
</Radio.Group>
) : (
<Text>{'No devices available'}</Text>
)}
<TroubleshootingGuide <TroubleshootingGuide
showGuide={GK.get('flipper_self_sufficiency')} showGuide={GK.get('flipper_self_sufficiency')}
devicesDetected={entries.length} devicesDetected={entries.length}