Highlight search terms in logs with yellow when highlight search setting is enabled

Summary: Building on the previous diff which added a setting to enable/disable highlighting search terms in the logs. This diff adds the actual highlighting and connects with the setting. The highlighting currently only supports one color, while the next diff will seek to support a preset of a "custom" colors for the highlighting

Reviewed By: mweststrate

Differential Revision: D37348441

fbshipit-source-id: 7a2b74b16f239d5e36c213e06ccb86f74eaa8df5

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

@@ -16,6 +16,7 @@ import {DataFormatter} from '../DataFormatter';
 import {Dropdown} from 'antd';
 import {contextMenuTrigger} from '../data-inspector/DataInspectorNode';
 import {getValueAtPath} from './DataTableManager';
+import {HighlightManager, useHighlighter} from '../Highlight';
 
 // heuristic for row estimation, should match any future styling updates
 export const DEFAULT_ROW_HEIGHT = 24;
@@ -109,6 +110,7 @@ export const TableRow = memo(function TableRow<T>({
   highlighted,
   config,
 }: TableRowProps<T>) {
+  const highlighter = useHighlighter();
   const row = (
     <TableBodyRowContainer
       highlighted={highlighted}
@@ -127,6 +129,7 @@ export const TableRow = memo(function TableRow<T>({
             record,
             highlighted,
             itemIndex,
+            highlighter,
           );
 
           return (
@@ -157,8 +160,13 @@ export function renderColumnValue<T>(
   record: T,
   highlighted: boolean,
   itemIndex: number,
+  highlighter?: HighlightManager,
 ) {
   return col.onRender
     ? col.onRender(record, highlighted, itemIndex)
-    : DataFormatter.format(getValueAtPath(record, col.key), col.formatters);
+    : DataFormatter.format(
+        getValueAtPath(record, col.key),
+        col.formatters,
+        highlighter,
+      );
 }