diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx index 8ceec96c9..6462d8f30 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx @@ -495,6 +495,7 @@ export function DataTable( dispatch, selection, tableState.highlightSearchSetting, + tableState.filterSearchHistory, tableState.columns, visibleColumns, onCopyRows, @@ -506,6 +507,7 @@ export function DataTable( selection, tableState.columns, tableState.highlightSearchSetting, + tableState.filterSearchHistory, visibleColumns, onCopyRows, onContextMenu, @@ -538,6 +540,7 @@ export function DataTable( = | Action<'toggleSearchValue'> | Action<'clearSearchHistory'> | Action<'toggleHighlightSearch'> - | Action<'setSearchHighlightColor', {color: string}>; + | Action<'setSearchHighlightColor', {color: string}> + | Action<'toggleFilterSearchHistory'>; type DataManagerConfig = { dataSource: DataSource; @@ -129,6 +131,7 @@ export type DataManagerState = { sorting: Sorting | undefined; selection: Selection; useRegex: boolean; + filterSearchHistory: boolean; autoScroll: boolean; searchValue: string; /** Used to remember the record entry to lookup when user presses ctrl */ @@ -218,6 +221,10 @@ export const dataTableManagerReducer = produce< draft.useRegex = !draft.useRegex; break; } + case 'toggleFilterSearchHistory': { + draft.filterSearchHistory = !draft.filterSearchHistory; + break; + } case 'selectItem': { const {nextIndex, addToSelection, allowUnselect} = action; draft.selection = castDraft( @@ -449,6 +456,7 @@ export function createInitialState( previousSearchValue: '', searchHistory: prefs?.searchHistory ?? [], useRegex: prefs?.useRegex ?? false, + filterSearchHistory: prefs?.filterSearchHistory ?? true, autoScroll: prefs?.autoScroll ?? config.autoScroll ?? false, highlightSearchSetting: prefs?.highlightSearchSetting ?? { highlightEnabled: false, @@ -517,6 +525,7 @@ export function savePreferences( const prefs: PersistedState = { search: state.searchValue, useRegex: state.useRegex, + filterSearchHistory: state.filterSearchHistory, selection: { current: state.selection.current, items: Array.from(state.selection.items), diff --git a/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx b/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx index a240ecbc0..16edd9c99 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx @@ -35,6 +35,7 @@ export function tableContextMenuFactory( dispatch: DataTableDispatch, selection: Selection, highlightSearchSetting: SearchHighlightSetting, + filterSearchHistory: boolean, columns: DataTableColumn[], visibleColumns: DataTableColumn[], onCopyRows: ( @@ -247,6 +248,26 @@ export function tableContextMenuFactory( + + { + e.stopPropagation(); + e.preventDefault(); + }}> + Filter Search History + { + dispatch({ + type: 'toggleFilterSearchHistory', + }); + }} + /> + + ); diff --git a/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx index 5b7fca49e..1003a6f74 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx @@ -19,6 +19,7 @@ import type {DataTableDispatch} from './DataTableManager'; export const TableSearch = memo(function TableSearch({ searchValue, useRegex, + filterSearchHistory, dispatch, searchHistory, extraActions, @@ -26,6 +27,7 @@ export const TableSearch = memo(function TableSearch({ }: { searchValue: string; useRegex: boolean; + filterSearchHistory: boolean; dispatch: DataTableDispatch; searchHistory: string[]; extraActions?: React.ReactElement; @@ -69,6 +71,7 @@ export const TableSearch = memo(function TableSearch({ open={showHistory} options={options} filterOption={(inputValue, option) => + !filterSearchHistory || option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 } onSelect={(value: string) => { @@ -79,11 +82,11 @@ export const TableSearch = memo(function TableSearch({ if (!open) { setShowHistory(false); } - }}> + }} + value={searchValue}> {options.length ? (