Add option to copy query results to clipboard

web-console/src/utils/download.ts

@@ -20,7 +20,7 @@ import type { QueryResult } from '@druid-toolkit/query';
 import FileSaver from 'file-saver';
 import * as JSONBig from 'json-bigint-native';
 
-import { stringifyValue } from './general';
+import { stringifyValue, copyAndAlert } from './general';
 
 export function downloadUrl(url: string, filename: string) {
   // Create a link and set the URL using `createObjectURL`
@@ -107,3 +107,21 @@ export function downloadQueryResults(
   const lineBreak = '\n';
   downloadFile(lines.join(lineBreak), format, filename);
 }
+
+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);
+  });
+
+  const lineBreak = '\n';
+  let JsonString = lines.join(lineBreak);
+  copyAndAlert(JsonString, 'Query results copied to clipboard');
+}

web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx

@@ -24,6 +24,7 @@ import React, { useState } from 'react';
 
 import type { Execution } from '../../../druid-models';
 import {
+  copyJSONResultsToClipboard,
   downloadQueryResults,
   formatDurationHybrid,
   formatInteger,
@@ -97,10 +98,14 @@ export const ExecutionSummaryPanel = React.memo(function ExecutionSummaryPanel(
           className="download-button"
           content={
             <Menu>
-              <MenuDivider title="Download results as..." />
+              <MenuDivider title="Save Query Results:" />
               <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)}
+              />
             </Menu>
           }
           position={Position.BOTTOM_RIGHT}