chore: merge hoppscotch/main into hoppscotch/release/2023.12.0

2023-11-16 13:50:17 +05:30
parent f5d2e4f11f 23afc201a1
commit 7b18526f24
187 changed files with 13014 additions and 504 deletions
--- a/packages/hoppscotch-common/src/components/app/Footer.vue
+++ b/packages/hoppscotch-common/src/components/app/Footer.vue
@@ -20,6 +20,12 @@
            <AppInterceptor />
          </template>
        </tippy>
+        <HoppButtonSecondary
+          v-if="platform.platformFeatureFlags.cookiesEnabled ?? false"
+          :label="t('app.cookies')"
+          :icon="IconCookie"
+          @click="showCookiesModal = true"
+        />
      </div>
      <div class="flex">
        <tippy
@@ -195,12 +201,17 @@
      :show="showDeveloperOptions"
      @hide-modal="showDeveloperOptions = false"
    />
+    <CookiesAllModal
+      :show="showCookiesModal"
+      @hide-modal="showCookiesModal = false"
+    />
  </div>
 </template>

 <script setup lang="ts">
 import { ref } from "vue"
 import { version } from "~/../package.json"
+import IconCookie from "~icons/lucide/cookie"
 import IconSidebar from "~icons/lucide/sidebar"
 import IconZap from "~icons/lucide/zap"
 import IconShare2 from "~icons/lucide/share-2"
@@ -223,7 +234,9 @@ import { invokeAction } from "@helpers/actions"
 import { HoppSmartItem } from "@hoppscotch/ui"

 const t = useI18n()
+
 const showDeveloperOptions = ref(false)
+const showCookiesModal = ref(false)

 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR = useSetting("SIDEBAR")
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -1,7 +1,9 @@
 <template>
  <div>
    <header
+      ref="headerRef"
      class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
+      @mousedown.prevent="platform.ui?.appHeader?.onHeaderAreaClick?.()"
    >
      <div
        class="inline-flex flex-1 items-center justify-start space-x-2"
--- a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
@@ -258,7 +258,7 @@ const importFromJSON = () => {
  inputChooseFileToImportFrom.value.value = ""
 }

-const exportJSON = () => {
+const exportJSON = async () => {
  const dataToWrite = collectionJson.value

  const parsedCollections = JSON.parse(dataToWrite)
@@ -268,24 +268,32 @@ const exportJSON = () => {
  }

  const file = new Blob([dataToWrite], { type: "application/json" })
-  const a = document.createElement("a")
  const url = URL.createObjectURL(file)
-  a.href = url

-  platform?.analytics?.logEvent({
-    type: "HOPP_EXPORT_COLLECTION",
-    exporter: "json",
-    platform: "gql",
+  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+
+  URL.revokeObjectURL(url)
+
+  const result = await platform.io.saveFileWithDialog({
+    data: dataToWrite,
+    contentType: "application/json",
+    suggestedFilename: filename,
+    filters: [
+      {
+        name: "Hoppscotch Collection JSON file",
+        extensions: ["json"],
+      },
+    ],
  })

-  // TODO: get uri from meta
-  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
-  document.body.appendChild(a)
-  a.click()
-  toast.success(t("state.download_started").toString())
-  setTimeout(() => {
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-  }, 1000)
+  if (result.type === "unknown" || result.type === "saved") {
+    platform?.analytics?.logEvent({
+      type: "HOPP_EXPORT_COLLECTION",
+      exporter: "json",
+      platform: "gql",
+    })
+
+    toast.success(t("state.download_started").toString())
+  }
 }
 </script>
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -1866,28 +1866,25 @@ const getJSONCollection = async () => {
 * @param collectionJSON - JSON string of the collection
 * @param name - Name of the collection set as the file name
 */
-const initializeDownloadCollection = (
+const initializeDownloadCollection = async (
  collectionJSON: string,
  name: string | null
 ) => {
-  const file = new Blob([collectionJSON], { type: "application/json" })
-  const a = document.createElement("a")
-  const url = URL.createObjectURL(file)
-  a.href = url
+  const result = await platform.io.saveFileWithDialog({
+    data: collectionJSON,
+    contentType: "application/json",
+    suggestedFilename: `${name ?? "collection"}.json`,
+    filters: [
+      {
+        name: "Hoppscotch Collection JSON file",
+        extensions: ["json"],
+      },
+    ],
+  })

-  if (name) {
-    a.download = `${name}.json`
-  } else {
-    a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+  if (result.type === "unknown" || result.type === "saved") {
+    toast.success(t("state.download_started").toString())
  }
-
-  document.body.appendChild(a)
-  a.click()
-  toast.success(t("state.download_started").toString())
-  setTimeout(() => {
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-  }, 1000)
 }

 /**
@@ -1916,11 +1913,14 @@ const exportData = async (
          exportLoading.value = false
          return
        },
-        (coll) => {
+        async (coll) => {
          const hoppColl = teamCollToHoppRESTColl(coll)
          const collectionJSONString = JSON.stringify(hoppColl)

-          initializeDownloadCollection(collectionJSONString, hoppColl.name)
+          await initializeDownloadCollection(
+            collectionJSONString,
+            hoppColl.name
+          )
          exportLoading.value = false
        }
      )
--- a/packages/hoppscotch-common/src/components/cookies/AllModal.vue
+++ b/packages/hoppscotch-common/src/components/cookies/AllModal.vue
@@ -0,0 +1,269 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="t('app.cookies')"
+    aria-modal="true"
+    @close="hideModal"
+  >
+    <template #body>
+      <HoppSmartPlaceholder
+        v-if="!currentInterceptorSupportsCookies"
+        :text="t('cookies.modal.interceptor_no_support')"
+      >
+        <AppInterceptor class="rounded border border-dividerLight p-2" />
+      </HoppSmartPlaceholder>
+      <div v-else class="flex flex-col">
+        <div
+          class="sticky -mx-4 -mt-4 flex space-x-2 border-b border-dividerLight bg-primary px-4 py-4"
+          style="top: calc(-1 * var(--line-height-body))"
+        >
+          <HoppSmartInput
+            v-model="newDomainText"
+            class="flex-1"
+            :placeholder="t('cookies.modal.new_domain_name')"
+            @keyup.enter="addNewDomain"
+          />
+          <HoppButtonSecondary
+            outline
+            filled
+            :label="t('action.add')"
+            @click="addNewDomain"
+          />
+        </div>
+        <div class="flex flex-col space-y-4">
+          <HoppSmartPlaceholder
+            v-if="workingCookieJar.size === 0"
+            :src="`/images/states/${colorMode.value}/blockchain.svg`"
+            :alt="`${t('cookies.modal.empty_domains')}`"
+            :text="t('cookies.modal.empty_domains')"
+            class="mt-6"
+          >
+          </HoppSmartPlaceholder>
+          <div
+            v-for="[domain, entries] in workingCookieJar.entries()"
+            v-else
+            :key="domain"
+            class="flex flex-col"
+          >
+            <div class="flex flex-1 items-center justify-between">
+              <label for="cookiesList" class="p-4">
+                {{ domain }}
+              </label>
+              <div class="flex">
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="t('action.delete')"
+                  :icon="IconTrash2"
+                  @click="deleteDomain(domain)"
+                />
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="t('add.new')"
+                  :icon="IconPlus"
+                  @click="addCookieToDomain(domain)"
+                />
+              </div>
+            </div>
+            <div class="rounded border border-divider">
+              <div class="divide-y divide-dividerLight">
+                <div
+                  v-if="entries.length === 0"
+                  class="flex flex-col items-center gap-2 p-4"
+                >
+                  {{ t("cookies.modal.no_cookies_in_domain") }}
+                </div>
+                <template v-else>
+                  <div
+                    v-for="(entry, entryIndex) in entries"
+                    :key="`${entry}-${entryIndex}`"
+                    class="flex divide-x divide-dividerLight"
+                  >
+                    <input
+                      class="flex flex-1 bg-transparent px-4 py-2"
+                      :value="entry"
+                      readonly
+                    />
+                    <HoppButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="t('action.edit')"
+                      :icon="IconEdit"
+                      @click="editCookie(domain, entryIndex, entry)"
+                    />
+                    <HoppButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="t('action.remove')"
+                      :icon="IconTrash"
+                      color="red"
+                      @click="deleteCookie(domain, entryIndex)"
+                    />
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="currentInterceptorSupportsCookies" #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          v-focus
+          :label="t('action.save')"
+          outline
+          @click="saveCookieChanges"
+        />
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="cancelCookieChanges"
+        />
+      </span>
+      <HoppButtonSecondary
+        :label="t('action.clear_all')"
+        outline
+        filled
+        @click="clearAllDomains"
+      />
+    </template>
+  </HoppSmartModal>
+  <CookiesEditCookie
+    :show="!!showEditModalFor"
+    :entry="showEditModalFor"
+    @save-cookie="saveCookie"
+    @hide-modal="showEditModalFor = null"
+  />
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "@composables/i18n"
+import { useService } from "dioc/vue"
+import { CookieJarService } from "~/services/cookie-jar.service"
+import IconTrash from "~icons/lucide/trash"
+import IconEdit from "~icons/lucide/edit"
+import IconTrash2 from "~icons/lucide/trash-2"
+import IconPlus from "~icons/lucide/plus"
+import { cloneDeep } from "lodash-es"
+import { ref, watch, computed } from "vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import { EditCookieConfig } from "./EditCookie.vue"
+import { useColorMode } from "@composables/theming"
+import { useToast } from "@composables/toast"
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const t = useI18n()
+const colorMode = useColorMode()
+const toast = useToast()
+
+const newDomainText = ref("")
+
+const interceptorService = useService(InterceptorService)
+const cookieJarService = useService(CookieJarService)
+
+const workingCookieJar = ref(cloneDeep(cookieJarService.cookieJar.value))
+
+const currentInterceptorSupportsCookies = computed(() => {
+  const currentInterceptor = interceptorService.currentInterceptor.value
+
+  if (!currentInterceptor) return true
+
+  return currentInterceptor.supportsCookies ?? false
+})
+
+function addNewDomain() {
+  if (newDomainText.value === "" || /^\s+$/.test(newDomainText.value)) {
+    toast.error(`${t("cookies.modal.empty_domain")}`)
+    return
+  }
+
+  workingCookieJar.value.set(newDomainText.value, [])
+  newDomainText.value = ""
+}
+
+function deleteDomain(domain: string) {
+  workingCookieJar.value.delete(domain)
+}
+
+function addCookieToDomain(domain: string) {
+  showEditModalFor.value = { type: "create", domain }
+}
+
+function clearAllDomains() {
+  workingCookieJar.value = new Map()
+  toast.success(`${t("state.cleared")}`)
+}
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      workingCookieJar.value = cloneDeep(cookieJarService.cookieJar.value)
+    }
+  }
+)
+
+const showEditModalFor = ref<EditCookieConfig | null>(null)
+
+function saveCookieChanges() {
+  cookieJarService.cookieJar.value = workingCookieJar.value
+  hideModal()
+}
+
+function cancelCookieChanges() {
+  hideModal()
+}
+
+function editCookie(domain: string, entryIndex: number, cookieEntry: string) {
+  showEditModalFor.value = {
+    type: "edit",
+    domain,
+    entryIndex,
+    currentCookieEntry: cookieEntry,
+  }
+}
+
+function deleteCookie(domain: string, entryIndex: number) {
+  const entry = workingCookieJar.value.get(domain)
+
+  if (entry) {
+    entry.splice(entryIndex, 1)
+  }
+}
+
+function saveCookie(cookie: string) {
+  if (showEditModalFor.value?.type === "create") {
+    const { domain } = showEditModalFor.value
+
+    const entry = workingCookieJar.value.get(domain)!
+    entry.push(cookie)
+
+    showEditModalFor.value = null
+
+    return
+  }
+
+  if (showEditModalFor.value?.type !== "edit") return
+
+  const { domain, entryIndex } = showEditModalFor.value!
+
+  const entry = workingCookieJar.value.get(domain)
+
+  if (entry) {
+    entry[entryIndex] = cookie
+  }
+
+  showEditModalFor.value = null
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+</script>
--- a/packages/hoppscotch-common/src/components/cookies/EditCookie.vue
+++ b/packages/hoppscotch-common/src/components/cookies/EditCookie.vue
@@ -0,0 +1,195 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="t('cookies.modal.set')"
+    @close="hideModal"
+  >
+    <template #body>
+      <div class="rounded border border-dividerLight">
+        <div class="flex flex-col">
+          <div class="flex items-center justify-between pl-4">
+            <label class="truncate font-semibold text-secondaryLight">
+              {{ t("cookies.modal.cookie_string") }}
+            </label>
+            <div class="flex items-center">
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear_all')"
+                :icon="IconTrash2"
+                @click="clearContent()"
+              />
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('state.linewrap')"
+                :class="{ '!text-accent': linewrapEnabled }"
+                :icon="IconWrapText"
+                @click.prevent="linewrapEnabled = !linewrapEnabled"
+              />
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.download_file')"
+                :icon="downloadIcon"
+                @click="downloadResponse"
+              />
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.copy')"
+                :icon="copyIcon"
+                @click="copyResponse"
+              />
+            </div>
+          </div>
+          <div class="h-46">
+            <div
+              ref="cookieEditor"
+              class="h-full rounded-b border-t border-dividerLight"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex space-x-2">
+        <HoppButtonPrimary
+          v-focus
+          :label="t('action.save')"
+          outline
+          @click="saveCookieChange"
+        />
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="cancelCookieChange"
+        />
+      </div>
+      <span class="flex">
+        <HoppButtonSecondary
+          :icon="pasteIcon"
+          :label="`${t('action.paste')}`"
+          filled
+          outline
+          @click="handlePaste"
+        />
+      </span>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script lang="ts">
+export type EditCookieConfig =
+  | { type: "create"; domain: string }
+  | {
+      type: "edit"
+      domain: string
+      entryIndex: number
+      currentCookieEntry: string
+    }
+</script>
+
+<script setup lang="ts">
+import { useI18n } from "@composables/i18n"
+import { useCodemirror } from "~/composables/codemirror"
+import { watch, ref, reactive } from "vue"
+import { refAutoReset } from "@vueuse/core"
+import IconWrapText from "~icons/lucide/wrap-text"
+import IconClipboard from "~icons/lucide/clipboard"
+import IconCheck from "~icons/lucide/check"
+import IconTrash2 from "~icons/lucide/trash-2"
+import { useToast } from "~/composables/toast"
+import {
+  useCopyResponse,
+  useDownloadResponse,
+} from "~/composables/lens-actions"
+
+// TODO: Build Managed Mode!
+
+const props = defineProps<{
+  show: boolean
+
+  entry: EditCookieConfig | null
+}>()
+
+const emit = defineEmits<{
+  (e: "save-cookie", cookie: string): void
+  (e: "hide-modal"): void
+}>()
+
+const t = useI18n()
+
+const toast = useToast()
+
+const cookieEditor = ref<HTMLElement>()
+const rawCookieString = ref("")
+const linewrapEnabled = ref(true)
+
+useCodemirror(
+  cookieEditor,
+  rawCookieString,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/plain",
+      placeholder: `${t("cookies.modal.enter_cookie_string")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)
+
+const pasteIcon = refAutoReset<typeof IconClipboard | typeof IconCheck>(
+  IconClipboard,
+  1000
+)
+
+watch(
+  () => props.entry,
+  () => {
+    if (!props.entry) return
+
+    if (props.entry.type === "create") {
+      rawCookieString.value = ""
+      return
+    }
+
+    rawCookieString.value = props.entry.currentCookieEntry
+  }
+)
+
+function hideModal() {
+  emit("hide-modal")
+}
+
+function cancelCookieChange() {
+  hideModal()
+}
+
+async function handlePaste() {
+  try {
+    const text = await navigator.clipboard.readText()
+    if (text) {
+      rawCookieString.value = text
+      pasteIcon.value = IconCheck
+    }
+  } catch (e) {
+    console.error("Failed to copy: ", e)
+    toast.error(t("profile.no_permission").toString())
+  }
+}
+
+function saveCookieChange() {
+  emit("save-cookie", rawCookieString.value)
+}
+
+const { copyIcon, copyResponse } = useCopyResponse(rawCookieString)
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "",
+  rawCookieString
+)
+
+function clearContent() {
+  rawCookieString.value = ""
+}
+</script>
--- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -375,7 +375,7 @@ const importFromPostman = ({
  importFromHoppscotch(environments)
 }

-const exportJSON = () => {
+const exportJSON = async () => {
  const dataToWrite = environmentJson.value

  const parsedCollections = JSON.parse(dataToWrite)
@@ -385,19 +385,27 @@ const exportJSON = () => {
  }

  const file = new Blob([dataToWrite], { type: "application/json" })
-  const a = document.createElement("a")
  const url = URL.createObjectURL(file)
-  a.href = url

-  // TODO: get uri from meta
-  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
-  document.body.appendChild(a)
-  a.click()
-  toast.success(t("state.download_started").toString())
-  setTimeout(() => {
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-  }, 1000)
+  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+
+  URL.revokeObjectURL(url)
+
+  const result = await platform.io.saveFileWithDialog({
+    data: dataToWrite,
+    contentType: "application/json",
+    suggestedFilename: filename,
+    filters: [
+      {
+        name: "JSON file",
+        extensions: ["json"],
+      },
+    ],
+  })
+
+  if (result.type === "unknown" || result.type === "saved") {
+    toast.success(t("state.download_started").toString())
+  }
 }

 const getErrorMessage = (err: GQLError<string>) => {
--- a/packages/hoppscotch-common/src/components/graphql/Field.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Field.vue
@@ -1,23 +1,34 @@
 <template>
  <div>
-    <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
-      {{ fieldName }}
-      <span v-if="fieldArgs.length > 0">
-        (
-        <span v-for="(field, index) in fieldArgs" :key="`field-${index}`">
-          {{ field.name }}:
-          <GraphqlTypeLink
-            :gql-type="field.type"
-            :jump-type-callback="jumpTypeCallback"
-          />
-          <span v-if="index !== fieldArgs.length - 1">, </span>
+    <div class="flex justify-between gap-2">
+      <div
+        class="field-title flex-1"
+        :class="{ 'field-highlighted': isHighlighted }"
+      >
+        {{ fieldName }}
+        <span v-if="fieldArgs.length > 0">
+          (
+          <span v-for="(field, index) in fieldArgs" :key="`field-${index}`">
+            {{ field.name }}:
+            <GraphqlTypeLink
+              :gql-type="field.type"
+              @jump-to-type="jumpToType"
+            />
+            <span v-if="index !== fieldArgs.length - 1">, </span>
+          </span>
+          ) </span
+        >:
+        <GraphqlTypeLink :gql-type="gqlField.type" @jump-to-type="jumpToType" />
+      </div>
+      <div v-if="gqlField.deprecationReason">
+        <span
+          v-tippy="{ theme: 'tomato' }"
+          class="flex cursor-pointer items-center gap-2 text-xs !text-red-500 hover:!text-red-600"
+          :title="gqlField.deprecationReason"
+        >
+          <IconAlertTriangle /> {{ t("state.deprecated") }}
        </span>
-        ) </span
-      >:
-      <GraphqlTypeLink
-        :gql-type="gqlField.type"
-        :jump-type-callback="jumpTypeCallback"
-      />
+      </div>
    </div>
    <div
      v-if="gqlField.description"
@@ -25,12 +36,6 @@
    >
      {{ gqlField.description }}
    </div>
-    <div
-      v-if="gqlField.isDeprecated"
-      class="field-deprecated my-1 inline-block rounded bg-yellow-200 px-2 py-1 text-black"
-    >
-      {{ t("state.deprecated") }}
-    </div>
    <div v-if="fieldArgs.length > 0">
      <h5 class="my-2">Arguments:</h5>
      <div class="border-l-2 border-divider pl-4">
@@ -39,7 +44,7 @@
            {{ field.name }}:
            <GraphqlTypeLink
              :gql-type="field.type"
-              :jump-type-callback="jumpTypeCallback"
+              @jump-to-type="jumpToType"
            />
          </span>
          <div
@@ -54,32 +59,36 @@
  </div>
 </template>

-<script>
-// TypeScript + Script Setup this :)
-import { defineComponent } from "vue"
+<script setup lang="ts">
 import { useI18n } from "@composables/i18n"
+import { GraphQLType } from "graphql"
+import { computed } from "vue"
+import IconAlertTriangle from "~icons/lucide/alert-triangle"

-export default defineComponent({
-  props: {
-    gqlField: { type: Object, default: () => ({}) },
-    jumpTypeCallback: { type: Function, default: () => ({}) },
-    isHighlighted: { type: Boolean, default: false },
-  },
-  setup() {
-    return {
-      t: useI18n(),
-    }
-  },
-  computed: {
-    fieldName() {
-      return this.gqlField.name
-    },
+const t = useI18n()

-    fieldArgs() {
-      return this.gqlField.args || []
-    },
-  },
-})
+const props = withDefaults(
+  defineProps<{
+    gqlField: any
+    isHighlighted: boolean
+  }>(),
+  {
+    gqlField: {},
+    isHighlighted: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "jump-to-type", type: GraphQLType): void
+}>()
+
+const fieldName = computed(() => props.gqlField.name)
+
+const fieldArgs = computed(() => props.gqlField.args || [])
+
+const jumpToType = (type: GraphQLType) => {
+  emit("jump-to-type", type)
+}
 </script>

 <style lang="scss" scoped>
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -59,6 +59,7 @@ import { useToast } from "@composables/toast"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { GQLResponseEvent } from "~/helpers/graphql/connection"
+import { platform } from "~/platform"

 const t = useI18n()
 const toast = useToast()
@@ -111,21 +112,31 @@ const copyResponse = (str: string) => {
  toast.success(`${t("state.copied_to_clipboard")}`)
 }

-const downloadResponse = (str: string) => {
+const downloadResponse = async (str: string) => {
  const dataToWrite = str
  const file = new Blob([dataToWrite!], { type: "application/json" })
-  const a = document.createElement("a")
  const url = URL.createObjectURL(file)
-  a.href = url
-  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}`
-  document.body.appendChild(a)
-  a.click()
-  downloadResponseIcon.value = IconCheck
-  toast.success(`${t("state.download_started")}`)
-  setTimeout(() => {
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-  }, 1000)
+
+  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+
+  URL.revokeObjectURL(url)
+
+  const result = await platform.io.saveFileWithDialog({
+    data: dataToWrite,
+    contentType: "application/json",
+    suggestedFilename: filename,
+    filters: [
+      {
+        name: "JSON file",
+        extensions: ["json"],
+      },
+    ],
+  })
+
+  if (result.type === "unknown" || result.type === "saved") {
+    downloadResponseIcon.value = IconCheck
+    toast.success(`${t("state.download_started")}`)
+  }
 }

 defineActionHandler(
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -58,8 +58,8 @@
              v-for="(field, index) in filteredQueryFields"
              :key="`field-${index}`"
              :gql-field="field"
-              :jump-type-callback="handleJumpToType"
              class="p-4"
+              @jump-to-type="handleJumpToType"
            />
          </HoppSmartTab>
          <HoppSmartTab
@@ -72,8 +72,8 @@
              v-for="(field, index) in filteredMutationFields"
              :key="`field-${index}`"
              :gql-field="field"
-              :jump-type-callback="handleJumpToType"
              class="p-4"
+              @jump-to-type="handleJumpToType"
            />
          </HoppSmartTab>
          <HoppSmartTab
@@ -86,8 +86,8 @@
              v-for="(field, index) in filteredSubscriptionFields"
              :key="`field-${index}`"
              :gql-field="field"
-              :jump-type-callback="handleJumpToType"
              class="p-4"
+              @jump-to-type="handleJumpToType"
            />
          </HoppSmartTab>
          <HoppSmartTab
@@ -103,7 +103,7 @@
              :gql-types="graphqlTypes"
              :is-highlighted="isGqlTypeHighlighted(type)"
              :highlighted-fields="getGqlTypeHighlightedFields(type)"
-              :jump-type-callback="handleJumpToType"
+              @jump-to-type="handleJumpToType"
            />
          </HoppSmartTab>
        </HoppSmartTabs>
@@ -202,6 +202,7 @@ import {
  schemaString,
  subscriptionFields,
 } from "~/helpers/graphql/connection"
+import { platform } from "~/platform"

 type NavigationTabs = "history" | "collection" | "docs" | "schema"
 type GqlTabs = "queries" | "mutations" | "subscriptions" | "types"
@@ -372,21 +373,33 @@ useCodemirror(
  })
 )

-const downloadSchema = () => {
-  const dataToWrite = JSON.stringify(schemaString.value, null, 2)
+const downloadSchema = async () => {
+  const dataToWrite = schemaString.value
  const file = new Blob([dataToWrite], { type: "application/graphql" })
-  const a = document.createElement("a")
  const url = URL.createObjectURL(file)
-  a.href = url
-  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.graphql`
-  document.body.appendChild(a)
-  a.click()
-  downloadSchemaIcon.value = IconCheck
-  toast.success(`${t("state.download_started")}`)
-  setTimeout(() => {
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-  }, 1000)
+
+  const filename = `${
+    url.split("/").pop()!.split("#")[0].split("?")[0]
+  }.graphql`
+
+  URL.revokeObjectURL(url)
+
+  const result = await platform.io.saveFileWithDialog({
+    data: dataToWrite,
+    contentType: "application/graphql",
+    suggestedFilename: filename,
+    filters: [
+      {
+        name: "GraphQL Schema File",
+        extensions: ["graphql"],
+      },
+    ],
+  })
+
+  if (result.type === "unknown" || result.type === "saved") {
+    downloadSchemaIcon.value = IconCheck
+    toast.success(`${t("state.download_started")}`)
+  }
 }

 const copySchema = () => {
--- a/packages/hoppscotch-common/src/components/graphql/TypeLink.vue
+++ b/packages/hoppscotch-common/src/components/graphql/TypeLink.vue
@@ -7,38 +7,31 @@
  </span>
 </template>

-<script lang="ts">
-import { defineComponent } from "vue"
-import { GraphQLScalarType } from "graphql"
+<script setup lang="ts">
+import { GraphQLScalarType, GraphQLType } from "graphql"
+import { computed } from "vue"

-export default defineComponent({
-  props: {
-    // eslint-disable-next-line vue/require-default-prop
-    gqlType: null,
-    // (typeName: string) => void
-    // eslint-disable-next-line vue/require-default-prop
-    jumpTypeCallback: Function,
-  },
+const props = defineProps<{
+  gqlType: GraphQLType
+}>()

-  computed: {
-    typeString() {
-      return `${this.gqlType}`
-    },
-    isScalar() {
-      return this.resolveRootType(this.gqlType) instanceof GraphQLScalarType
-    },
-  },
+const emit = defineEmits<{
+  (e: "jump-to-type", type: GraphQLType): void
+}>()

-  methods: {
-    jumpToType() {
-      if (this.isScalar) return
-      this.jumpTypeCallback(this.gqlType)
-    },
-    resolveRootType(type) {
-      let t = type
-      while (t.ofType != null) t = t.ofType
-      return t
-    },
-  },
+const typeString = computed(() => `${props.gqlType}`)
+const isScalar = computed(() => {
+  return resolveRootType(props.gqlType) instanceof GraphQLScalarType
 })
+
+function resolveRootType(type: GraphQLType) {
+  let t = type as any
+  while (t.ofType != null) t = t.ofType
+  return t
+}
+
+function jumpToType() {
+  if (isScalar.value) return
+  emit("jump-to-type", props.gqlType)
+}
 </script>
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
@@ -43,6 +43,7 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { tokenRequest } from "~/helpers/oauth"
 import { getCombinedEnvVariables } from "~/helpers/preRequest"
+import * as E from "fp-ts/Either"

 const t = useI18n()
 const toast = useToast()
@@ -77,6 +78,15 @@ const clientSecret = pluckRef(auth, "clientSecret" as any)

 const scope = pluckRef(auth, "scope")

+function translateTokenRequestError(error: string) {
+  switch (error) {
+    case "OIDC_DISCOVERY_FAILED":
+      return t("authorization.oauth.token_generation_oidc_discovery_failed")
+    default:
+      return t("authorization.oauth.something_went_wrong_on_token_generation")
+  }
+}
+
 const handleAccessTokenRequest = async () => {
  if (
    oidcDiscoveryURL.value === "" &&
@@ -98,7 +108,11 @@ const handleAccessTokenRequest = async () => {
      clientSecret: parseTemplateString(clientSecret.value, envVars),
      scope: parseTemplateString(scope.value, envVars),
    }
-    await tokenRequest(tokenReqParams)
+    const res = await tokenRequest(tokenReqParams)
+
+    if (res && E.isLeft(res)) {
+      toast.error(translateTokenRequestError(res.left))
+    }
  } catch (e) {
    toast.error(`${e}`)
  }
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -350,7 +350,6 @@ const newSendRequest = async () => {
  const streamResult = await streamPromise

  requestCancelFunc.value = cancel
-
  if (E.isRight(streamResult)) {
    subscribeToStream(
      streamResult.right,
@@ -365,6 +364,20 @@ const newSendRequest = async () => {
        loading.value = false
      },
      () => {
+        // TODO: Change this any to a proper type
+        const result = (streamResult.right as any).value
+        if (
+          result.type === "network_fail" &&
+          result.error?.error === "NO_PW_EXT_HOOK"
+        ) {
+          const errorResponse: HoppRESTResponse = {
+            type: "extension_error",
+            error: result.error.humanMessage.heading,
+            component: result.error.component,
+            req: result.req,
+          }
+          updateRESTResponse(errorResponse)
+        }
        loading.value = false
      }
    )
--- a/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
@@ -11,6 +11,12 @@
        <HoppSmartSpinner class="my-4" />
        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
      </div>
+
+      <component
+        :is="response.component"
+        v-if="response.type === 'extension_error'"
+        class="flex-1"
+      />
      <HoppSmartPlaceholder
        v-if="response.type === 'network_fail'"
        :src="`/images/states/${colorMode.value}/youre_lost.svg`"
--- a/packages/hoppscotch-common/src/components/interceptors/ErrorPlaceholder.vue
+++ b/packages/hoppscotch-common/src/components/interceptors/ErrorPlaceholder.vue
@@ -0,0 +1,98 @@
+<template>
+  <HoppSmartPlaceholder
+    :src="`/images/states/${colorMode.value}/youre_lost.svg`"
+    :alt="`${t('error.network_fail')}`"
+    :heading="t('error.network_fail')"
+    large
+  >
+    <div class="my-1 flex flex-col items-center text-secondaryLight">
+      <span>
+        {{ t("error.please_install_extension") }}
+      </span>
+      <span>
+        {{ t("error.check_how_to_add_origin") }}
+        <HoppSmartLink
+          blank
+          to="https://docs.hoppscotch.io/documentation/features/interceptor#browser-extension"
+          class="text-accent hover:text-accentDark"
+        >
+          here
+        </HoppSmartLink>
+      </span>
+    </div>
+    <div class="flex flex-col space-y-2 py-4">
+      <span>
+        <HoppSmartItem
+          to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+          blank
+          :icon="IconChrome"
+          label="Chrome"
+          :info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
+          :active-info-icon="hasChromeExtInstalled"
+          outline
+        />
+      </span>
+      <span>
+        <HoppSmartItem
+          to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+          blank
+          :icon="IconFirefox"
+          label="Firefox"
+          :info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
+          :active-info-icon="hasFirefoxExtInstalled"
+          outline
+        />
+      </span>
+    </div>
+    <div class="space-y-4 py-4">
+      <div class="flex items-center">
+        <HoppSmartToggle
+          :on="extensionEnabled"
+          @change="extensionEnabled = !extensionEnabled"
+        >
+          {{ t("settings.extensions_use_toggle") }}
+        </HoppSmartToggle>
+      </div>
+    </div>
+  </HoppSmartPlaceholder>
+</template>
+
+<script setup lang="ts">
+import IconChrome from "~icons/brands/chrome"
+import IconFirefox from "~icons/brands/firefox"
+import IconCheckCircle from "~icons/lucide/check-circle"
+import { useI18n } from "@composables/i18n"
+import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
+import { useService } from "dioc/vue"
+import { computed } from "vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import { platform } from "~/platform"
+import { useColorMode } from "~/composables/theming"
+
+const colorMode = useColorMode()
+const t = useI18n()
+
+const interceptorService = useService(InterceptorService)
+const extensionService = useService(ExtensionInterceptorService)
+
+const hasChromeExtInstalled = extensionService.chromeExtensionInstalled
+const hasFirefoxExtInstalled = extensionService.firefoxExtensionInstalled
+
+const extensionEnabled = computed({
+  get() {
+    return (
+      interceptorService.currentInterceptorID.value ===
+      extensionService.interceptorID
+    )
+  },
+  set(active) {
+    if (active) {
+      interceptorService.currentInterceptorID.value =
+        extensionService.interceptorID
+    } else {
+      interceptorService.currentInterceptorID.value =
+        platform.interceptors.default
+    }
+  },
+})
+</script>