Show feedback if there are no records visible

Summary:
Per title. Give the user some feedback on why he doesn't see any records (filtering to aggressive vs there are simply no records).

Fixes the old Flipper behavior where tables are merely empty, which always looks kinda broken to me. (Didn't it work, or is there nothing?)

Reviewed By: nikoant

Differential Revision: D26611173

fbshipit-source-id: 7ac798bd7d5c31f6d9fbacf30c6727d2e0e94570

desktop/flipper-plugin/src/ui/datatable/DataSourceRenderer.tsx

@@ -56,6 +56,7 @@ type DataSourceProps<T extends object, C> = {
   onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   virtualizerRef?: MutableRefObject<DataSourceVirtualizer | undefined>;
   onRangeChange?(start: number, end: number, total: number): void;
+  emptyRenderer?(dataSource: DataSource<T>): React.ReactElement;
   _testHeight?: number; // exposed for unit testing only
 };
 
@@ -75,6 +76,7 @@ export const DataSourceRenderer: <T extends object, C>(
   onKeyDown,
   virtualizerRef,
   onRangeChange,
+  emptyRenderer,
   _testHeight,
 }: DataSourceProps<any, any>) {
   /**
@@ -235,6 +237,9 @@ export const DataSourceRenderer: <T extends object, C>(
    */
   return (
     <TableContainer onScroll={onScroll} ref={parentRef}>
+      {virtualizer.virtualItems.length === 0
+        ? emptyRenderer?.(dataSource)
+        : null}
       <TableWindow
         height={virtualizer.totalSize}
         onKeyDown={onKeyDown}

desktop/flipper-plugin/src/ui/datatable/DataTable.tsx

@@ -27,6 +27,8 @@ import {TableSearch} from './TableSearch';
 import styled from '@emotion/styled';
 import {theme} from '../theme';
 import {tableContextMenuFactory} from './TableContextMenu';
+import {Typography} from 'antd';
+import {CoffeeOutlined, SearchOutlined} from '@ant-design/icons';
 
 interface DataTableProps<T = any> {
   columns: DataTableColumn<T>[];
@@ -231,6 +233,10 @@ export function DataTable<T extends object>(
     ? undefined // don't render context menu in tests
     : tableContextMenuFactory(tableManager);
 
+  const emptyRenderer = useCallback((dataSource: DataSource<T>) => {
+    return <EmptyTable dataSource={dataSource} />;
+  }, []);
+
   return (
     <Layout.Container grow>
       <Layout.Top>
@@ -264,6 +270,7 @@ export function DataTable<T extends object>(
           onKeyDown={onKeyDown}
           virtualizerRef={virtualizerRef}
           onRangeChange={onRangeChange}
+          emptyRenderer={emptyRenderer}
           _testHeight={props._testHeight}
         />
       </Layout.Top>
@@ -272,6 +279,28 @@ export function DataTable<T extends object>(
   );
 }
 
+function EmptyTable({dataSource}: {dataSource: DataSource<any>}) {
+  return (
+    <Layout.Container
+      center
+      style={{width: '100%', padding: 40, color: theme.textColorSecondary}}>
+      {dataSource.records.length === 0 ? (
+        <>
+          <CoffeeOutlined style={{fontSize: '2em', margin: 8}} />
+          <Typography.Text type="secondary">No records yet</Typography.Text>
+        </>
+      ) : (
+        <>
+          <SearchOutlined style={{fontSize: '2em', margin: 8}} />
+          <Typography.Text type="secondary">
+            No records match the current search / filter criteria
+          </Typography.Text>
+        </>
+      )}
+    </Layout.Container>
+  );
+}
+
 const RangeFinder = styled.div({
   backgroundColor: theme.backgroundWash,
   position: 'absolute',