Merge pull request #29 from bruinenxyz/hungle/bru-1051-add-export-to-csv

BRU-1501 Add export to CSV

frontend/src/app/queries/[userQueryId]/page.tsx

@@ -18,6 +18,8 @@ import {
   useUserQuery,
   useUserQueryResults,
 } from "@/data/use-user-query";
+import { convertToCSV } from "@/utils/csv-converter";
+import { toSnakeCase } from "@/utils/strings";
 import React, { useEffect, useState } from "react";
 import * as _ from "lodash";
 
@@ -64,6 +66,21 @@ const Page: React.FC<UserQueryPageProps> = ({ params: { userQueryId } }) => {
     error: pipelineSchemaError,
   } = usePipelineSchema(pipeline);
 
+  const handleDownloadCSV = () => {
+    const csvData = convertToCSV(results.rows);
+    const blob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
+
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = toSnakeCase(userQuery?.name) + ".csv";
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  };
+
   const { trigger: updateUserQueryTrigger, isMutating: isUpdatingUserQuery } =
     useUpdateUserQuery(userQueryId);
 
@@ -162,6 +179,13 @@ const Page: React.FC<UserQueryPageProps> = ({ params: { userQueryId } }) => {
               >
                 Save and run
               </Button>
+              <Button
+                className="mt-1 mr-1 w-fit"
+                disabled={isLoadingResults || isUpdatingUserQuery}
+                onClick={handleDownloadCSV}
+              >
+                Download as CSV
+              </Button>
               <OverwriteSQLDialog
                 userQueryId={userQueryId}
                 pipeline={pipeline}