From 8015b5e48e925db303cf031b24eac62dec7fa4d5 Mon Sep 17 00:00:00 2001
From: Sam Wheating <sam.wheating@reddit.com>
Date: Mon, 11 Sep 2023 17:35:12 -0700
Subject: [PATCH] Refactor, allow copying in all formats

---
 web-console/src/utils/download.ts             | 35 +++++++------------
 .../execution-summary-panel.tsx               | 16 +++++----
 2 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/web-console/src/utils/download.ts b/web-console/src/utils/download.ts
index 1cd4f9667380..aebf5f14f637 100644
--- a/web-console/src/utils/download.ts
+++ b/web-console/src/utils/download.ts
@@ -74,11 +74,7 @@ export function downloadFile(text: string, type: string, filename: string): void
   FileSaver.saveAs(blob, filename);
 }
 
-export function downloadQueryResults(
-  queryResult: QueryResult,
-  filename: string,
-  format: string,
-): void {
+function queryResultsToString(queryResult: QueryResult, format: string): string {
   let lines: string[] = [];
   let separator = '';
 
@@ -103,24 +99,19 @@ export function downloadQueryResults(
       return JSONBig.stringify(outputObject);
     });
   }
-
-  const lineBreak = '\n';
-  downloadFile(lines.join(lineBreak), format, filename);
+  return lines.join('\n');
 }
 
-export function copyJSONResultsToClipboard(queryResult: QueryResult): void {
-  let lines: string[] = [];
-  lines = queryResult.rows.map(r => {
-    const outputObject: Record<string, any> = {};
-    for (let k = 0; k < r.length; k++) {
-      const newName = queryResult.header[k];
-      if (newName) {
-        outputObject[newName.name] = r[k];
-      }
-    }
-    return JSONBig.stringify(outputObject);
-  });
+export function downloadQueryResults(
+  queryResult: QueryResult,
+  filename: string,
+  format: string,
+): void {
+  const resultString: string = queryResultsToString(queryResult, format);
+  downloadFile(resultString, format, filename);
+}
 
-  const lineBreak = '\n';
-  copyAndAlert(lines.join(lineBreak), 'Query results copied to clipboard');
+export function copyQueryResultsToClipboard(queryResult: QueryResult, format: string): void {
+  const resultString: string = queryResultsToString(queryResult, format);
+  copyAndAlert(resultString, 'Query results copied to clipboard');
 }
diff --git a/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
index 2bb83e0bf563..720711500b65 100644
--- a/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
+++ b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
@@ -24,7 +24,7 @@ import React, { useState } from 'react';
 
 import type { Execution } from '../../../druid-models';
 import {
-  copyJSONResultsToClipboard,
+  copyQueryResultsToClipboard,
   downloadQueryResults,
   formatDurationHybrid,
   formatInteger,
@@ -69,6 +69,10 @@ export const ExecutionSummaryPanel = React.memo(function ExecutionSummaryPanel(
       downloadQueryResults(queryResult, `results-${execution.id}.${format}`, format);
     };
 
+    const handleCopy = (format: string) => {
+      copyQueryResultsToClipboard(queryResult, format);
+    };
+
     buttons.push(
       <Button
         key="results"
@@ -98,14 +102,14 @@ export const ExecutionSummaryPanel = React.memo(function ExecutionSummaryPanel(
           className="download-button"
           content={
             <Menu>
-              <MenuDivider title="Save Query Results:" />
+              <MenuDivider title="Download results as..." />
               <MenuItem text="CSV" onClick={() => handleDownload('csv')} />
               <MenuItem text="TSV" onClick={() => handleDownload('tsv')} />
               <MenuItem text="JSON (new line delimited)" onClick={() => handleDownload('json')} />
-              <MenuItem
-                text="JSON (copy to clipboard)"
-                onClick={() => copyJSONResultsToClipboard(queryResult)}
-              />
+              <MenuDivider title="Copy to clipboard as..." />
+              <MenuItem text="CSV" onClick={() => handleCopy('csv')} />
+              <MenuItem text="TSV" onClick={() => handleCopy('tsv')} />
+              <MenuItem text="JSON (new line delimited)" onClick={() => handleCopy('json')} />
             </Menu>
           }
           position={Position.BOTTOM_RIGHT}