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/DataTableManager.tsx

@@ -62,6 +62,13 @@ type DataManagerActions<T> =
         addToSelection?: boolean;
       }
     >
+  | Action<
+      'selectItemById',
+      {
+        id: string | number;
+        addToSelection?: boolean;
+      }
+    >
   | Action<
       'addRangeToSelection',
       {
@@ -161,6 +168,17 @@ export const dataTableManagerReducer = produce<
       );
       break;
     }
+    case 'selectItemById': {
+      const {id, addToSelection} = action;
+      // TODO: fix that this doesn't jumpt selection if items are shifted! sorting is swapped etc
+      const idx = config.dataSource.getIndexOfKey(id);
+      if (idx !== -1) {
+        draft.selection = castDraft(
+          computeSetSelection(draft.selection, idx, addToSelection),
+        );
+      }
+      break;
+    }
     case 'addRangeToSelection': {
       const {start, end, allowUnselect} = action;
       draft.selection = castDraft(
@@ -241,6 +259,7 @@ export type DataTableManager<T> = {
     end: number,
     allowUnselect?: boolean,
   ): void;
+  selectItemById(id: string | number, addToSelection?: boolean): void;
   clearSelection(): void;
   getSelectedItem(): T | undefined;
   getSelectedItems(): readonly T[];
@@ -261,6 +280,9 @@ export function createDataTableManager<T>(
     selectItem(index: number, addToSelection = false) {
       dispatch({type: 'selectItem', nextIndex: index, addToSelection});
     },
+    selectItemById(id, addToSelection = false) {
+      dispatch({type: 'selectItemById', id, addToSelection});
+    },
     addRangeToSelection(start, end, allowUnselect = false) {
       dispatch({type: 'addRangeToSelection', start, end, allowUnselect});
     },