Minor improvements

Summary:
Some styling fixes and minor improvements in DataTable, used by network plugin:

- be able to customise the context menu
- be able to customise how entire rows are copied and presented on the clipboard to be able to deviate from the standard JSON
- deeplink handling was made async, this gives the plugin the opportunity to first handle initial setup and rendering before trying to jump somewhere which is a typical use case for deeplinking

Reviewed By: passy

Differential Revision: D27947186

fbshipit-source-id: a56f081d60520c4bc2ad3c547a8ca5b9357e71a1

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

@@ -11,6 +11,7 @@ import {CopyOutlined, FilterOutlined} from '@ant-design/icons';
 import {Checkbox, Menu} from 'antd';
 import {
   DataTableDispatch,
+  getSelectedItem,
   getSelectedItems,
   Selection,
 } from './DataTableManager';
@@ -21,12 +22,18 @@ import {DataSource} from '../../state/DataSource';
 
 const {Item, SubMenu} = Menu;
 
+function defaultOnCopyRows<T>(items: T[]) {
+  return JSON.stringify(items.length > 1 ? items : items[0], null, 2);
+}
+
 export function tableContextMenuFactory<T>(
   datasource: DataSource<T>,
   dispatch: DataTableDispatch<T>,
   selection: Selection,
   columns: DataTableColumn<T>[],
   visibleColumns: DataTableColumn<T>[],
+  onCopyRows: (rows: T[]) => string = defaultOnCopyRows,
+  onContextMenu?: (selection: undefined | T) => React.ReactElement,
 ) {
   const lib = tryGetFlipperLibImplementation();
   if (!lib) {
@@ -40,6 +47,9 @@ export function tableContextMenuFactory<T>(
 
   return (
     <Menu>
+      {onContextMenu
+        ? onContextMenu(getSelectedItem(datasource, selection))
+        : null}
       <SubMenu
         title="Filter on same"
         icon={<FilterOutlined />}
@@ -81,9 +91,7 @@ export function tableContextMenuFactory<T>(
         onClick={() => {
           const items = getSelectedItems(datasource, selection);
           if (items.length) {
-            lib.writeTextToClipboard(
-              JSON.stringify(items.length > 1 ? items : items[0], null, 2),
-            );
+            lib.writeTextToClipboard(onCopyRows(items));
           }
         }}>
         Copy row(s)
@@ -94,9 +102,7 @@ export function tableContextMenuFactory<T>(
           onClick={() => {
             const items = getSelectedItems(datasource, selection);
             if (items.length) {
-              lib.createPaste(
-                JSON.stringify(items.length > 1 ? items : items[0], null, 2),
-              );
+              lib.createPaste(onCopyRows(items));
             }
           }}>
           Create paste