Add copy with columns header option to table rows

Summary: Add "With columns header" and "Without columns header" options when copying rows.

Reviewed By: danielbuechele

Differential Revision: D15854176

fbshipit-source-id: ff7b5639cc313b74528e5e85f6c84e314058e899

src/ui/components/table/ManagedTable.js

@@ -275,8 +275,13 @@ class ManagedTable extends React.Component<
     }
   };
 
-  onCopy = () => {
+  onCopy = (withHeader: boolean) => {
-    clipboard.writeText(this.getSelectedText());
+    clipboard.writeText(
+      [
+        ...(withHeader ? [this.getHeaderText()] : []),
+        this.getSelectedText(),
+      ].join('\n'),
+    );
   };
 
   onKeyDown = (e: KeyboardEvent) => {
@@ -289,7 +294,7 @@ class ManagedTable extends React.Component<
         (e.ctrlKey && process.platform !== 'darwin')) &&
       e.keyCode === 67
     ) {
-      this.onCopy();
+      this.onCopy(false);
     } else if (
       (e.keyCode === 38 || e.keyCode === 40) &&
       this.props.highlightableRows
@@ -485,7 +490,6 @@ class ManagedTable extends React.Component<
       highlightedRows.size === 1
         ? [
             {
-              click: this.onCopy,
               label: 'Copy cell',
               submenu: this.state.columnOrder
                 .filter(c => c.visible)
@@ -509,15 +513,34 @@ class ManagedTable extends React.Component<
           highlightedRows.size > 1
             ? `Copy ${highlightedRows.size} rows`
             : 'Copy row',
-        click: this.onCopy,
+        submenu: [
+          {label: 'With columns header', click: () => this.onCopy(true)},
+          {
+            label: 'Without columns header',
+            click: () => {
+              this.onCopy(false);
+            },
+          },
+        ],
       },
       {
         label: 'Create Paste',
-        click: () => createPaste(this.getSelectedText()),
+        click: () =>
+          createPaste(
+            [this.getHeaderText(), this.getSelectedText()].join('\n'),
+          ),
       },
     ];
   };
 
+  getHeaderText = (): string => {
+    return this.state.columnOrder
+      .filter(c => c.visible)
+      .map(c => c.key)
+      .map(key => this.props.columns[key].value)
+      .join('\t');
+  };
+
   getSelectedText = (): string => {
     const {highlightedRows} = this.state;