feat: graphql response schema ui (#4310)

feat: data schema added for graphql response

packages/hoppscotch-common/src/components/graphql/Response.vue

@@ -46,7 +46,7 @@
           >
             <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="t('app.copy_interface_type')"
+              :title="t('action.more')"
               :icon="IconMore"
             />
             <template #content="{ hide }">
@@ -57,15 +57,14 @@
                 @keyup.escape="hide()"
               >
                 <HoppSmartItem
-                  v-for="(language, index) in interfaceLanguages"
+                  :label="t('response.generate_data_schema')"
-                  :key="index"
+                  :icon="IconNetwork"
-                  :label="language"
+                  @click="
-                  :icon="
+                    () => {
-                    copiedInterfaceLanguage === language
+                      invokeAction('response.schema.toggle')
-                      ? copyInterfaceIcon
+                      hide()
-                      : IconCopy
+                    }
                   "
-                  @click="runCopyInterface(language)"
                 />
               </div>
             </template>
@@ -95,19 +94,17 @@
 
 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
-import IconCopy from "~icons/lucide/copy"
+import IconNetwork from "~icons/lucide/network"
 import IconMore from "~icons/lucide/more-horizontal"
 import { computed, reactive, ref } from "vue"
 import { useCodemirror } from "@composables/codemirror"
 import { useI18n } from "@composables/i18n"
-import { defineActionHandler } from "~/helpers/actions"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { GQLResponseEvent } from "~/helpers/graphql/connection"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
-import interfaceLanguages from "~/helpers/utils/interfaceLanguages"
 import {
-  useCopyInterface,
   useCopyResponse,
   useDownloadResponse,
 } from "~/composables/lens-actions"
@@ -158,20 +155,11 @@ useCodemirror(
 )
 
 const { copyIcon, copyResponse } = useCopyResponse(responseString)
-const { copyInterfaceIcon, copyInterface } = useCopyInterface(responseString)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "application/json",
   responseString
 )
 
-const copiedInterfaceLanguage = ref("")
-
-const runCopyInterface = (language: string) => {
-  copyInterface(language).then(() => {
-    copiedInterfaceLanguage.value = language
-  })
-}
-
 defineActionHandler(
   "response.file.download",
   () => downloadResponse(),

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

@@ -133,6 +133,7 @@ import IconCheck from "~icons/lucide/check"
 import IconWrapText from "~icons/lucide/wrap-text"
 import jsonToLanguage from "~/helpers/utils/json-to-language"
 import { watch } from "vue"
+import { GQLTabService } from "~/services/tab/graphql"
 
 const t = useI18n()
 
@@ -144,14 +145,44 @@ const emit = defineEmits<{
   (e: "close"): void
 }>()
 
-const tabs = useService(RESTTabService)
+const restTabs = useService(RESTTabService)
+const gqlTabs = useService(GQLTabService)
+
+function getCurrentPageCategory(): "graphql" | "rest" | "other" {
+  try {
+    const url = new URL(window.location.href)
+
+    if (url.pathname.startsWith("/graphql")) {
+      return "graphql"
+    } else if (url.pathname === "/") {
+      return "rest"
+    }
+    return "other"
+  } catch (e) {
+    return "other"
+  }
+}
+
 const selectedInterface = ref<(typeof interfaceLanguages)[number]>("TypeScript")
 const response = computed(() => {
-  const res = tabs.currentActiveTab.value.document.response
+  let response = ""
-  if (res?.type === "success" || res?.type === "fail") {
+  const pageCategory = getCurrentPageCategory()
-    return getResponseBodyText(res.body)
+
+  if (pageCategory === "rest") {
+    const res = restTabs.currentActiveTab.value.document.response
+    if (res?.type === "success" || res?.type === "fail") {
+      response = getResponseBodyText(res.body)
+    }
   }
-  return ""
+
+  if (pageCategory === "graphql") {
+    const res = gqlTabs.currentActiveTab.value.document.response
+    if (res && res.length === 1 && res[0].type === "response" && res[0].data) {
+      response = JSON.stringify(JSON.parse(res[0].data), null, 2)
+    }
+  }
+
+  return response
 })
 const errorState = ref(false)