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 && }
);
};