feat(common): support importing OpenAPI YAML definitions from URL (#5098)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/importExport/ImportExportSteps/UrlImport.vue

@@ -23,9 +23,10 @@
     <p class="flex flex-col">
       <input
         v-model="inputChooseGistToImportFrom"
+        v-focus
+        :placeholder="t('import.from_url')"
         type="url"
         class="input"
-        :placeholder="`${t('import.from_url')}`"
       />
     </p>
 
@@ -49,7 +50,7 @@ import { KernelInterceptorService } from "~/services/kernel-interceptor.service"
 import { useService } from "dioc/vue"
 import * as E from "fp-ts/Either"
 import * as O from "fp-ts/Option"
-import { parseBodyAsJSON } from "~/helpers/functional/json"
+import { parseBodyAsJSONOrYAML } from "~/helpers/functional/json"
 
 const interceptorService = useService(KernelInterceptorService)
 
@@ -98,7 +99,7 @@ const urlFetchLogic =
       return E.left("REQUEST_FAILED")
     }
 
-    const responsePayload = parseBodyAsJSON<unknown>(res.right.body)
+    const responsePayload = parseBodyAsJSONOrYAML<unknown>(res.right.body)
 
     if (O.isSome(responsePayload)) {
       // stringify the response payload

packages/hoppscotch-common/src/helpers/functional/json.ts

@@ -5,6 +5,7 @@ import { pipe, flow } from "fp-ts/function"
 import { MediaType, RelayResponseBody } from "@hoppscotch/kernel"
 
 import { decodeToString } from "~/helpers/functional/parse"
+import { safeParseJSONOrYAML } from "./yaml"
 
 type SafeParseJSON = {
   (str: string, convertToArray: true): O.Option<Array<unknown>>
@@ -49,3 +50,18 @@ export const parseBodyAsJSON = <T>(body: RelayResponseBody): O.Option<T> =>
     O.filter((type) => type.includes(MediaType.APPLICATION_JSON)),
     O.chain(() => parseBytesToJSON<T>(body.body))
   )
+
+/**
+ * Parses response body as JSON or YAML content
+ * @param body Response body from RelayResponse
+ * @returns Option containing parsed data or none if parsing fails
+ */
+export const parseBodyAsJSONOrYAML = <T>(
+  body: RelayResponseBody
+): O.Option<T> =>
+  pipe(
+    body.body,
+    decodeToString,
+    E.fold(() => O.none, safeParseJSONOrYAML),
+    O.map((data) => data as T)
+  )