Add keyboard shortcut to support quick selecting recent searches

Summary:
Currently there's no way of quickly selecting recent searches other than manually opening the recent search history and then clicking one of the search terms. This diff seeks to add a new feature that would allow not only a keyboard short cut to open the recent search history drop down but also number the most recent 5 search terms so that the user could quickly select them with a number on their keyboard

Additionally, fixed bug found in terms of the search bar not showing the current search value correctly

`Changelog`: Introduced keyboard shortcut(ctrl + f) option to toggle the search history dropdown along with numbers attached to the options in order to quickly navigate to recent search terms. Have to first enable the option(search shortcut) in menu in order to use the feature. Also added a new button in the options menu that would trigger the search result toggle as triggered by the keyboard shortcut `ctrl` before(`ctrl` + `t` now)

WARNING: The current behavior of "ctrl" toggling back and forth to focus the selected item has been migrated to "ctrl + t" key combo

Reviewed By: mweststrate

Differential Revision: D37685738

fbshipit-source-id: a7ac4dd3dceb846a98258de2d884ebc279ee5995

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

@@ -115,7 +115,9 @@ type DataManagerActions<T> =
   | Action<'toggleHighlightSearch'>
   | Action<'setSearchHighlightColor', {color: string}>
   | Action<'toggleFilterSearchHistory'>
-  | Action<'toggleSideBySide'>;
+  | Action<'toggleSideBySide'>
+  | Action<'showSearchDropdown', {show: boolean}>
+  | Action<'setShowNumberedHistory', {showNumberedHistory: boolean}>;
 
 type DataManagerConfig<T> = {
   dataSource: DataSource<T, T[keyof T]>;
@@ -138,6 +140,8 @@ export type DataManagerState<T> = {
   selection: Selection;
   useRegex: boolean;
   filterSearchHistory: boolean;
+  showSearchHistory: boolean;
+  showNumberedHistory: boolean;
   autoScroll: boolean;
   searchValue: string;
   /** Used to remember the record entry to lookup when user presses ctrl */
@@ -335,6 +339,14 @@ export const dataTableManagerReducer = produce<
       draft.sideBySide = !draft.sideBySide;
       break;
     }
+    case 'showSearchDropdown': {
+      draft.showSearchHistory = action.show;
+      break;
+    }
+    case 'setShowNumberedHistory': {
+      draft.showNumberedHistory = action.showNumberedHistory;
+      break;
+    }
     default: {
       throw new Error('Unknown action ' + (action as any).type);
     }
@@ -369,6 +381,8 @@ export type DataTableManager<T> = {
   toggleHighlightSearch(): void;
   setSearchHighlightColor(color: string): void;
   toggleSideBySide(): void;
+  showSearchDropdown(show: boolean): void;
+  setShowNumberedHistory(showNumberedHistory: boolean): void;
 };
 
 export function createDataTableManager<T>(
@@ -427,6 +441,12 @@ export function createDataTableManager<T>(
     toggleSideBySide() {
       dispatch({type: 'toggleSideBySide'});
     },
+    showSearchDropdown(show) {
+      dispatch({type: 'showSearchDropdown', show});
+    },
+    setShowNumberedHistory(showNumberedHistory) {
+      dispatch({type: 'setShowNumberedHistory', showNumberedHistory});
+    },
     dataView,
   };
 }
@@ -478,6 +498,8 @@ export function createInitialState<T>(
       color: theme.searchHighlightBackground.yellow,
     },
     sideBySide: false,
+    showSearchHistory: false,
+    showNumberedHistory: false,
   };
   // @ts-ignore
   res.config[immerable] = false; // optimization: never proxy anything in config