diff --git a/desktop/flipper-ui-core/src/chrome/ConnectivityLogs.tsx b/desktop/flipper-ui-core/src/chrome/ConnectivityLogs.tsx index b27d7ce3f..fc93f82e0 100644 --- a/desktop/flipper-ui-core/src/chrome/ConnectivityLogs.tsx +++ b/desktop/flipper-ui-core/src/chrome/ConnectivityLogs.tsx @@ -8,7 +8,7 @@ */ import {Layout, Panel} from '../ui'; -import React, {CSSProperties, useState} from 'react'; +import React, {CSSProperties, useCallback, useState} from 'react'; import { createDataSource, DataFormatter, @@ -135,27 +135,32 @@ const Placeholder = styled(Layout.Container)({ fontSize: 18, }); +function isShellCommand( + entry: ConnectionRecordEntry, +): entry is CommandRecordEntry { + return 'cmd' in entry; +} + function Sidebar({selection}: {selection: undefined | ConnectionRecordEntry}) { const content: JSX.Element[] = []; if (selection) { - if ('cmd' in selection) { - const cmd = selection as CommandRecordEntry; + if (isShellCommand(selection)) { content.push( - {cmd.cmd} + {selection.cmd} , - {cmd.description} + {selection.description} , - {cmd.stdout} + {selection.stdout} , - {cmd.stderr} + {selection.stderr} , - {cmd.troubleshoot} + {selection.troubleshoot} , ); } @@ -195,17 +200,28 @@ export const ConnectivityLogs = () => { ); + const onSelection = useCallback( + (entry: ConnectionRecordEntry) => { + if (isShellCommand(entry)) { + setSelection(entry); + } else { + setSelection(undefined); + } + }, + [setSelection], + ); + return ( - + dataSource={rows} columns={columns} enableAutoScroll onRowStyle={getRowStyle} - onSelect={setSelection} + onSelect={onSelection} extraActions={clearButton} /> - + {selection && } ); };