diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx index 4b8afed83..6283d891f 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx @@ -534,8 +534,9 @@ export function DataTable( const emptyRenderer = props.onRenderEmpty === undefined - ? props.onRenderEmpty + ? createDefaultEmptyRenderer(tableManager) : props.onRenderEmpty; + let mainSection: JSX.Element; if (props.scrollable) { const dataSourceRenderer = ( @@ -620,7 +621,7 @@ DataTable.defaultProps = { enableMultiSelect: true, enableContextMenu: true, enablePersistSettings: true, - onRenderEmpty: emptyRenderer, + onRenderEmpty: undefined, } as Partial>; /* eslint-disable react-hooks/rules-of-hooks */ @@ -662,16 +663,27 @@ function syncRecordsToDataSource( } } -function emptyRenderer(dataSource: DataSource) { - return ; +function createDefaultEmptyRenderer(dataTableManager?: DataTableManager) { + return (dataSource?: DataSource) => ( + + ); } -function EmptyTable({dataSource}: {dataSource: DataSource}) { +function EmptyTable({ + dataSource, + dataManager, +}: { + dataSource?: DataSource; + dataManager?: DataTableManager; +}) { + const resetFilters = useCallback(() => { + dataManager?.resetFilters(); + }, [dataManager]); return ( - {dataSource.size === 0 ? ( + {dataSource?.size === 0 ? ( <> No records yet @@ -680,7 +692,12 @@ function EmptyTable({dataSource}: {dataSource: DataSource}) { <> - No records match the current search / filter criteria + No records match the current search / filter criteria. + + + + Reset filters + )} diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx index 975920745..33a43c27b 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx @@ -51,6 +51,8 @@ type Action = {type: Name} & Args; type DataManagerActions = /** Reset the current table preferences, including column widths an visibility, back to the default */ | Action<'reset'> + /** Disable the current column filters */ + | Action<'resetFilters'> /** Resizes the column with the given key to the given width */ | Action<'resizeColumn', {column: keyof T; width: number | Percentage}> /** Sort by the given column. This toggles statefully between ascending, descending, none (insertion order of the data source) */ @@ -142,6 +144,13 @@ export const dataTableManagerReducer = produce< draft.selection = castDraft(emptySelection); break; } + case 'resetFilters': { + draft.columns.forEach((c) => + c.filters?.forEach((f) => (f.enabled = false)), + ); + draft.searchValue = ''; + break; + } case 'resizeColumn': { const {column, width} = action; const col = draft.columns.find((c) => c.key === column)!; @@ -288,6 +297,7 @@ export const dataTableManagerReducer = produce< */ export type DataTableManager = { reset(): void; + resetFilters(): void; selectItem( index: number | ((currentSelection: number) => number), addToSelection?: boolean, @@ -319,6 +329,9 @@ export function createDataTableManager( reset() { dispatch({type: 'reset'}); }, + resetFilters() { + dispatch({type: 'resetFilters'}); + }, selectItem(index: number, addToSelection = false, allowUnselect = false) { dispatch({ type: 'selectItem', diff --git a/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx b/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx index 40ed8f230..4e898a5a9 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx @@ -160,6 +160,13 @@ export function tableContextMenuFactory( ))} + { + dispatch({type: 'resetFilters'}); + }}> + Reset filters + {