feat: add button to export test results as json (#4419)

Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/locales/en.json

@@ -20,6 +20,7 @@
     "dismiss": "Dismiss",
     "dont_save": "Don't save",
     "download_file": "Download file",
+    "download_test_report": "Download test report",
     "drag_to_reorder": "Drag to reorder",
     "duplicate": "Duplicate",
     "edit": "Edit",

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -14,12 +14,20 @@
         <label class="truncate font-semibold text-secondaryLight">
           {{ t("test.report") }}
         </label>
-        <HoppButtonSecondary
+        <div>
-          v-tippy="{ theme: 'tooltip' }"
+          <HoppButtonSecondary
-          :title="t('action.clear')"
+            v-tippy="{ theme: 'tooltip' }"
-          :icon="IconTrash2"
+            :title="t('action.download_test_report')"
-          @click="clearContent()"
+            :icon="IconDownload"
-        />
+            @click="downloadTestResult"
+          />
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.clear')"
+            :icon="IconTrash2"
+            @click="clearContent()"
+          />
+        </div>
       </div>
       <div class="divide-y-4 divide-dividerLight border-b border-dividerLight">
         <div v-if="haveEnvVariables" class="flex flex-col">
@@ -214,11 +222,13 @@ import {
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
+import { exportTestResults } from "~/helpers/import-export/export/testResults"
 
 import IconCheck from "~icons/lucide/check"
 import IconExternalLink from "~icons/lucide/external-link"
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconClose from "~icons/lucide/x"
+import IconDownload from "~icons/lucide/download"
 
 import { GlobalEnvironment } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
@@ -307,4 +317,9 @@ const addEnvToGlobal = () => {
     isSecret: false,
   })
 }
+
+const downloadTestResult = () => {
+  if (!testResults.value) return
+  exportTestResults(testResults.value)
+}
 </script>

packages/hoppscotch-common/src/helpers/import-export/export/testResults.ts

@@ -0,0 +1,29 @@
+import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+import { platform } from "~/platform"
+import * as E from "fp-ts/Either"
+
+export const exportTestResults = async (testResults: HoppTestResult) => {
+  const contentsJSON = JSON.stringify(testResults, null, 2)
+  const file = new Blob([contentsJSON], { type: "application/json" })
+  const url = URL.createObjectURL(file)
+
+  const fileName = url.split("/").pop()!.split("#")[0].split("?")[0]
+
+  const result = await platform.io.saveFileWithDialog({
+    data: contentsJSON,
+    contentType: "application/json",
+    suggestedFilename: `${fileName}.json`,
+    filters: [
+      {
+        name: "Hoppscotch Test Results JSON file",
+        extensions: ["json"],
+      },
+    ],
+  })
+
+  if (result.type === "unknown" || result.type === "saved") {
+    return E.right("state.download_started")
+  }
+
+  return E.left("state.download_failed")
+}