Quick action for resetting all datatable filters

Summary:
As we persist column filters between sessions - sometimes it's not obvious that they are applied.

This diff adds "Reset filters" action just near message "No records match the current search / filter criteria" to make it obvious that some records are hidden because of filters and let user quickly disable filters to see all items.

The same action also added to datatable's context menu.

Changelog:
Quick action "Reset filters" for datatable-based plugins which is shown in context menu and in empty table when all items filtered out.

Reviewed By: timur-valiev

Differential Revision: D36600535

fbshipit-source-id: 782e7f863f2f52d7f6017685bdebcb1feeb97dbd

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

@@ -534,8 +534,9 @@ export function DataTable<T extends object>(
 
   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<DataTableProps<any>>;
 
 /* eslint-disable react-hooks/rules-of-hooks */
@@ -662,16 +663,27 @@ function syncRecordsToDataSource<T>(
   }
 }
 
-function emptyRenderer(dataSource: DataSource<any>) {
-  return <EmptyTable dataSource={dataSource} />;
+function createDefaultEmptyRenderer<T>(dataTableManager?: DataTableManager<T>) {
+  return (dataSource?: DataSource<T, T[keyof T]>) => (
+    <EmptyTable dataSource={dataSource} dataManager={dataTableManager} />
+  );
 }
 
-function EmptyTable({dataSource}: {dataSource: DataSource<any>}) {
+function EmptyTable<T>({
+  dataSource,
+  dataManager,
+}: {
+  dataSource?: DataSource<T, T[keyof T]>;
+  dataManager?: DataTableManager<T>;
+}) {
+  const resetFilters = useCallback(() => {
+    dataManager?.resetFilters();
+  }, [dataManager]);
   return (
     <Layout.Container
       center
       style={{width: '100%', padding: 40, color: theme.textColorSecondary}}>
-      {dataSource.size === 0 ? (
+      {dataSource?.size === 0 ? (
         <>
           <CoffeeOutlined style={{fontSize: '2em', margin: 8}} />
           <Typography.Text type="secondary">No records yet</Typography.Text>
@@ -680,7 +692,12 @@ function EmptyTable({dataSource}: {dataSource: DataSource<any>}) {
         <>
           <SearchOutlined style={{fontSize: '2em', margin: 8}} />
           <Typography.Text type="secondary">
-            No records match the current search / filter criteria
+            No records match the current search / filter criteria.
+          </Typography.Text>
+          <Typography.Text>
+            <Typography.Link onClick={resetFilters}>
+              Reset filters
+            </Typography.Link>
           </Typography.Text>
         </>
       )}