Added highlight search setting and toggle in menu to trigger

Summary:
Created search highlight settings to be stored as part of persisted state. Added toggle/menu option in the dropdown.

This diff serves as the start of the stack that introduces highlighting the search terms in the search results of flipper. Currently, the results returned do not show why(the key word) they are appearing.

The next diffs will introduce not only the actual highlighting but also "custom"-ish color-picking for the highlights. The colors will be chosen from the sub-menu where the highlighting is enabled.

Reviewed By: mweststrate

Differential Revision: D37229735

fbshipit-source-id: d681f8e7b7fdfce8135c2c3fa81d8450447565c1

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

@@ -313,6 +313,9 @@ export function DataTable<T extends object>(
         case 'Control':
           tableManager.toggleSearchValue();
           break;
+        case 'H':
+          tableManager.toggleHighlightSearch();
+          break;
         default:
           handled = false;
       }
@@ -469,6 +472,7 @@ export function DataTable<T extends object>(
             dataSource,
             dispatch,
             selection,
+            tableState.highlightSearchSetting,
             tableState.columns,
             visibleColumns,
             onCopyRows,
@@ -479,6 +483,7 @@ export function DataTable<T extends object>(
           dispatch,
           selection,
           tableState.columns,
+          tableState.highlightSearchSetting,
           visibleColumns,
           onCopyRows,
           onContextMenu,

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

@@ -18,6 +18,10 @@ export type Sorting<T = any> = {
   key: keyof T;
   direction: Exclude<SortDirection, undefined>;
 };
+export type SearchHighlightSetting = {
+  highlightEnabled: boolean;
+  color: string;
+};
 
 export type SortDirection = 'asc' | 'desc' | undefined;
 
@@ -46,6 +50,7 @@ type PersistedState = {
   scrollOffset: number;
   autoScroll: boolean;
   searchHistory: string[];
+  highlightSearchSetting: SearchHighlightSetting;
 };
 
 type Action<Name extends string, Args = {}> = {type: Name} & Args;
@@ -100,7 +105,8 @@ type DataManagerActions<T> =
   | Action<'toggleAutoScroll'>
   | Action<'setAutoScroll', {autoScroll: boolean}>
   | Action<'toggleSearchValue'>
-  | Action<'clearSearchHistory'>;
+  | Action<'clearSearchHistory'>
+  | Action<'toggleHighlightSearch'>;
 
 type DataManagerConfig<T> = {
   dataSource: DataSource<T, T[keyof T]>;
@@ -126,6 +132,7 @@ export type DataManagerState<T> = {
   /** Used to remember the record entry to lookup when user presses ctrl */
   previousSearchValue: string;
   searchHistory: string[];
+  highlightSearchSetting: SearchHighlightSetting;
 };
 
 export type DataTableReducer<T> = Reducer<
@@ -297,6 +304,11 @@ export const dataTableManagerReducer = produce<
       draft.autoScroll = action.autoScroll;
       break;
     }
+    case 'toggleHighlightSearch': {
+      draft.highlightSearchSetting.highlightEnabled =
+        !draft.highlightSearchSetting.highlightEnabled;
+      break;
+    }
     default: {
       throw new Error('Unknown action ' + (action as any).type);
     }
@@ -328,6 +340,7 @@ export type DataTableManager<T> = {
   setSearchValue(value: string, addToHistory?: boolean): void;
   dataSource: DataSource<T, T[keyof T]>;
   toggleSearchValue(): void;
+  toggleHighlightSearch(): void;
 };
 
 export function createDataTableManager<T>(
@@ -377,6 +390,9 @@ export function createDataTableManager<T>(
     toggleSearchValue() {
       dispatch({type: 'toggleSearchValue'});
     },
+    toggleHighlightSearch() {
+      dispatch({type: 'toggleHighlightSearch'});
+    },
     dataSource,
   };
 }
@@ -422,6 +438,10 @@ export function createInitialState<T>(
     searchHistory: prefs?.searchHistory ?? [],
     useRegex: prefs?.useRegex ?? false,
     autoScroll: prefs?.autoScroll ?? config.autoScroll ?? false,
+    highlightSearchSetting: prefs?.highlightSearchSetting ?? {
+      highlightEnabled: false,
+      color: '',
+    },
   };
   // @ts-ignore
   res.config[immerable] = false; // optimization: never proxy anything in config
@@ -500,6 +520,7 @@ export function savePreferences(
     scrollOffset,
     autoScroll: state.autoScroll,
     searchHistory: state.searchHistory,
+    highlightSearchSetting: state.highlightSearchSetting,
   };
   localStorage.setItem(state.storageKey, JSON.stringify(prefs));
 }

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

@@ -8,12 +8,14 @@
  */
 
 import {CopyOutlined, FilterOutlined, TableOutlined} from '@ant-design/icons';
-import {Checkbox, Menu} from 'antd';
+import {Checkbox, Menu, Switch} from 'antd';
+import {Layout} from 'flipper-plugin';
 import {
   DataTableDispatch,
   getSelectedItem,
   getSelectedItems,
   getValueAtPath,
+  SearchHighlightSetting,
   Selection,
 } from './DataTableManager';
 import React from 'react';
@@ -30,6 +32,7 @@ export function tableContextMenuFactory<T>(
   datasource: DataSource<T, T[keyof T]>,
   dispatch: DataTableDispatch<T>,
   selection: Selection,
+  highlightSearchSetting: SearchHighlightSetting,
   columns: DataTableColumn<T>[],
   visibleColumns: DataTableColumn<T>[],
   onCopyRows: (
@@ -177,6 +180,8 @@ export function tableContextMenuFactory<T>(
         }}>
         Reset view
       </Menu.Item>
+
+      <SubMenu title="Search Options" key="search options">
         <Menu.Item
           key="clear history"
           onClick={() => {
@@ -184,6 +189,27 @@ export function tableContextMenuFactory<T>(
           }}>
           Clear search history
         </Menu.Item>
+        <Menu.Item key="highlight search setting">
+          <Layout.Horizontal
+            gap
+            center
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+            }}>
+            <Switch
+              checked={highlightSearchSetting.highlightEnabled}
+              size="small"
+              onChange={() => {
+                dispatch({
+                  type: 'toggleHighlightSearch',
+                });
+              }}
+            />
+            Highlight search terms
+          </Layout.Horizontal>
+        </Menu.Item>
+      </SubMenu>
     </Menu>
   );
 }