Make connectivity log entries selectable

Summary: Once an item is selected, more details can be shown to our users.

Reviewed By: antonk52

Differential Revision: D47797390

fbshipit-source-id: 1bf98f81df32d103f7c0fc332f819507dcf84cc2

desktop/flipper-ui-core/src/chrome/ConnectivityHub.tsx

@@ -8,7 +8,7 @@
  */
 
 import {Layout} from '../ui';
-import React, {createRef, CSSProperties} from 'react';
+import React, {createRef, CSSProperties, useState} from 'react';
 import {
   createDataSource,
   DataFormatter,
@@ -137,7 +137,9 @@ function clearMessages() {
 
 export function ConnectivityHub() {
   const columns = createColumnConfig();
-
+  const [_selection, setSelection] = useState<
+    ConnectionRecordEntry | undefined
+  >();
   const tableManagerRef = createRef<
     undefined | DataTableManager<ConnectionRecordEntry>
   >();
@@ -146,6 +148,7 @@ export function ConnectivityHub() {
     <Button
       title="Clear logs"
       onClick={() => {
+        setSelection(undefined);
         clearMessages();
       }}>
       <DeleteOutlined />
@@ -158,6 +161,7 @@ export function ConnectivityHub() {
       columns={columns}
       enableAutoScroll
       enableMultiPanels
+      onSelect={setSelection}
       onRowStyle={getRowStyle}
       enableHorizontalScroll={false}
       tableManagerRef={tableManagerRef}