Fixes an issue with selection by refactoring

Summary: Refactor was going to happen, but it was required at this stage as to fix a selection problem.

Reviewed By: LukeDefeo

Differential Revision: D47831239

fbshipit-source-id: 87ce6250721f6d3df3e826e779409625ddc85660

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

@@ -8,14 +8,13 @@
  */
 
 import {Layout} from '../ui';
-import React, {createRef, CSSProperties, useState} from 'react';
+import React, {CSSProperties, useState} from 'react';
 import {
   createDataSource,
   DataFormatter,
   DataInspector,
   DataTable,
   DataTableColumn,
-  DataTableManager,
   Tab,
   Tabs,
   theme,
@@ -129,6 +128,8 @@ function createColumnConfig(): DataTableColumn<ConnectionRecordEntry>[] {
   ];
 }
 
+const columns = createColumnConfig();
+
 function getRowStyle(entry: ConnectionRecordEntry): CSSProperties | undefined {
   return (logTypes[entry.type]?.style as any) ?? baseRowStyle;
 }
@@ -164,14 +165,10 @@ function clearMessages() {
   rows.clear();
 }
 
-export function ConnectivityHub() {
-  const columns = createColumnConfig();
+const LogView = () => {
   const [selection, setSelection] = useState<
     ConnectionRecordEntry | undefined
   >();
-  const tableManagerRef = createRef<
-    undefined | DataTableManager<ConnectionRecordEntry>
-  >();
 
   const clearButton = (
     <Button
@@ -184,7 +181,6 @@ export function ConnectivityHub() {
     </Button>
   );
 
-  const LogView = () => {
   return (
     <Layout.Right resizable width={400}>
       <DataTable<ConnectionRecordEntry>
@@ -193,7 +189,6 @@ export function ConnectivityHub() {
         enableAutoScroll
         onRowStyle={getRowStyle}
         onSelect={setSelection}
-          tableManagerRef={tableManagerRef}
         extraActions={clearButton}
       />
       <Sidebar selection={selection} />
@@ -201,6 +196,7 @@ export function ConnectivityHub() {
   );
 };
 
+export function ConnectivityHub() {
   return (
     <Layout.Container grow>
       <Tabs grow>