Add "Copy cell" to ManagedTable

Summary:
Previously you could only copy the entire row.
Now you can choose which cell to copy.
Not the perfect UI admittedly, but that would require a big change to make individual cells selectable. I think it's a definite improvement.

Reviewed By: passy

Differential Revision: D15231784

fbshipit-source-id: 0d52192a5bf4e8ea1ebee74988c749d3f602fea9

flow-typed/electron-menu.js

@@ -53,7 +53,7 @@ type Electron$MenuItemOptions = {
   enabled?: boolean,
   visible?: boolean,
   checked?: boolean,
-  submenu?: Electron$MenuItem | Electron$MenuItemOptions,
+  submenu?: Electron$Menu | Array<Electron$MenuItemOptions>,
   id?: string,
   position?: string,
 };

src/ui/components/table/ManagedTable.js

@@ -145,6 +145,12 @@ const Container = styled(FlexColumn)(props => ({
 
 const globalTableState: {[string]: TableColumnSizes} = {};
 
+function getTextContentOfRow(rowId: string) {
+  return Array.from(
+    document.querySelectorAll(`[data-key='${rowId}'] > *`) || [],
+  ).map(node => node.textContent);
+}
+
 class ManagedTable extends React.Component<
   ManagedTableProps,
   ManagedTableState,
@@ -455,13 +461,39 @@ class ManagedTable extends React.Component<
     }
   };
 
-  buildContextMenuItems = () => {
+  onCopyCell = (rowId: string, column: string) => {
+    const cellText = getTextContentOfRow(rowId)[
+      Object.keys(this.props.columns).indexOf(column)
+    ];
+    clipboard.writeText(cellText);
+  };
+
+  buildContextMenuItems: () => Array<Electron$MenuItemOptions> = () => {
     const {highlightedRows} = this.state;
     if (highlightedRows.size === 0) {
       return [];
     }
 
+    const copyCellSubMenu =
+      highlightedRows.size === 1
+        ? [
+            {
+              click: this.onCopy,
+              label: 'Copy cell',
+              submenu: Object.keys(this.props.columns).map((column, index) => ({
+                label: this.props.columns[column].value,
+                click: () => {
+                  const rowId = this.state.highlightedRows.values().next()
+                    .value;
+                  rowId && this.onCopyCell(rowId, column);
+                },
+              })),
+            },
+          ]
+        : [];
+
     return [
+      ...copyCellSubMenu,
       {
         label:
           highlightedRows.size > 1
@@ -486,12 +518,7 @@ class ManagedTable extends React.Component<
       .filter(row => highlightedRows.has(row.key))
       .map(
         (row: TableBodyRow) =>
-          row.copyText ||
-          Array.from(
-            document.querySelectorAll(`[data-key='${row.key}'] > *`) || [],
-          )
-            .map(node => node.textContent)
-            .join('\t'),
+          row.copyText || getTextContentOfRow(row.key).join('\t'),
       )
       .join('\n');
   };