diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx index 2ad8f1fb0..f6c17f2dc 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx @@ -311,7 +311,7 @@ export function DataTable( tableManager.clearSelection(); break; case 'Control': - tableManager.setSelectedSearchRecord(); + tableManager.toggleSearchValue(); break; default: handled = false; @@ -505,30 +505,6 @@ export function DataTable( // 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 = ( {props.enableSearchbar && ( diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx index f53db92b7..8e991fd0d 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx @@ -43,7 +43,6 @@ type PersistedState = { >[]; scrollOffset: number; autoScroll: boolean; - selectedSearchRecord: any; }; type Action = {type: Name} & Args; @@ -97,8 +96,7 @@ type DataManagerActions = | Action<'toggleUseRegex'> | Action<'toggleAutoScroll'> | Action<'setAutoScroll', {autoScroll: boolean}> - | Action<'clearSelectedSearchRecord'> - | Action<'setSelectedSearchRecord'>; + | Action<'toggleSearchValue'>; type DataManagerConfig = { dataSource: DataSource; @@ -122,7 +120,7 @@ export type DataManagerState = { useRegex: boolean; autoScroll: boolean; /** Used to remember the record entry to lookup when user presses ctrl */ - selectedSearchRecord: any; + previousSearchValue: string; }; export type DataTableReducer = Reducer< @@ -174,6 +172,17 @@ export const dataTableManagerReducer = produce< } case 'setSearchValue': { draft.searchValue = action.value; + draft.previousSearchValue = ''; + break; + } + case 'toggleSearchValue': { + if (draft.searchValue) { + draft.previousSearchValue = draft.searchValue; + draft.searchValue = ''; + } else { + draft.searchValue = draft.previousSearchValue; + draft.previousSearchValue = ''; + } break; } case 'toggleUseRegex': { @@ -268,24 +277,6 @@ export const dataTableManagerReducer = produce< draft.autoScroll = action.autoScroll; break; } - case 'setSelectedSearchRecord': { - if (draft.searchValue !== '') { - // Clear search to get unfiltered list of records - draft.searchValue = ''; - - // Save the record to map back in DataTable - draft.selectedSearchRecord = config.dataSource.view.get( - draft.selection.current, - ); - - draft.selection = castDraft(emptySelection); - } - break; - } - case 'clearSelectedSearchRecord': { - draft.selectedSearchRecord = null; - break; - } default: { throw new Error('Unknown action ' + (action as any).type); } @@ -316,8 +307,7 @@ export type DataTableManager = { sortColumn(column: keyof T, direction?: SortDirection): void; setSearchValue(value: string): void; dataSource: DataSource; - setSelectedSearchRecord(): void; - clearSelectedSearchRecord(): void; + toggleSearchValue(): void; }; export function createDataTableManager( @@ -364,11 +354,8 @@ export function createDataTableManager( setSearchValue(value) { dispatch({type: 'setSearchValue', value}); }, - setSelectedSearchRecord() { - dispatch({type: 'setSelectedSearchRecord'}); - }, - clearSelectedSearchRecord() { - dispatch({type: 'clearSelectedSearchRecord'}); + toggleSearchValue() { + dispatch({type: 'toggleSearchValue'}); }, dataSource, }; @@ -411,9 +398,9 @@ export function createInitialState( } : emptySelection, searchValue: prefs?.search ?? '', + previousSearchValue: '', useRegex: prefs?.useRegex ?? false, autoScroll: prefs?.autoScroll ?? config.autoScroll ?? false, - selectedSearchRecord: null, }; // @ts-ignore res.config[immerable] = false; // optimization: never proxy anything in config @@ -491,7 +478,6 @@ export function savePreferences( })), scrollOffset, autoScroll: state.autoScroll, - selectedSearchRecord: state.selectedSearchRecord, }; localStorage.setItem(state.storageKey, JSON.stringify(prefs)); }