Add neighbouring lines feature to Flipper Logs plugin

Summary:
Adding a feature to Flipper's Logs plugin where:
1) you search for something,
2) click on a line among the filtered search results,
3) press control,
4) get taken back to unfiltered list of all messages, centered on your selected line

This is to help debugging where the user may add a print statement but the error happens after it, and it's difficult to catch without a lot of scrolling.

Reviewed By: mweststrate

Differential Revision: D33446285

fbshipit-source-id: 19aa472a12de074e561dbe37b44821fc29bf5c91

desktop/flipper-plugin/src/ui/data-table/DataTable.tsx

@@ -308,6 +308,9 @@ export function DataTable<T extends object>(
         case 'Escape':
           tableManager.clearSelection();
           break;
+        case 'Control':
+          tableManager.setSelectedSearchRecord();
+          break;
         default:
           handled = false;
       }
@@ -348,7 +351,9 @@ export function DataTable<T extends object>(
     [
       tableState.searchValue,
       tableState.useRegex,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       ...tableState.columns.map((c) => c.filters),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       ...tableState.columns.map((c) => c.inversed),
     ],
   );
@@ -473,6 +478,30 @@ export function DataTable<T extends object>(
     // eslint-disable-next-line
   }, []);
 
+  useEffect(
+    function findMappedIndex() {
+      // Hardcoded delay to give dataSource.view time to update, otherwise
+      // the entries we loop over here won't be the list of unfiltered records
+      // the user sees, so there won't be a match found
+      const delay = 300;
+
+      if (tableState.selectedSearchRecord) {
+        const timer = setTimeout(() => {
+          for (let i = 0; i < dataSource.view.size; i++) {
+            if (dataSource.view.get(i) === tableState.selectedSearchRecord) {
+              tableManager.clearSelectedSearchRecord();
+              tableManager.selectItem(i, false, true);
+              break;
+            }
+          }
+        }, delay);
+
+        return () => clearTimeout(timer);
+      }
+    },
+    [dataSource, selection, tableManager, tableState.selectedSearchRecord],
+  );
+
   const header = (
     <Layout.Container>
       {props.enableSearchbar && (