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:
committed by
Facebook GitHub Bot
parent
97e5c897c6
commit
d5aaa0034d
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user