fix: add support for data-schema changes after version bump (#5368)

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

@@ -17,7 +17,7 @@
           >
             <HoppSmartSelectWrapper>
               <HoppButtonSecondary
-                :label="selectedInterface"
+                :label="selectedLanguage"
                 outline
                 class="flex-1 pr-8"
               />
@@ -40,9 +40,9 @@
                   @keyup.escape="hide()"
                 >
                   <HoppSmartItem
-                    v-for="lang in filteredResponseInterfaces"
+                    v-for="(lang, key) in filteredResponseInterfaces"
                     :key="lang"
-                    :label="lang"
+                    :label="key"
                     :info-icon="
                       lang === selectedInterface ? IconCheck : undefined
                     "
@@ -55,7 +55,7 @@
                     "
                   />
                   <HoppSmartPlaceholder
-                    v-if="filteredResponseInterfaces.length === 0"
+                    v-if="Object.keys(filteredResponseInterfaces).length === 0"
                     :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
                   >
                     <template #icon>
@@ -134,7 +134,11 @@ import {
 
 import { useService } from "dioc/vue"
 import { useNestedSetting } from "~/composables/settings"
-import interfaceLanguages from "~/helpers/utils/interfaceLanguages"
+import {
+  interfaceLanguages,
+  InterfaceLanguage,
+  Language,
+} from "~/helpers/utils/interfaceLanguages"
 import { toggleNestedSetting } from "~/newstore/settings"
 import { RESTTabService } from "~/services/tab/rest"
 import IconCheck from "~icons/lucide/check"
@@ -173,7 +177,7 @@ function getCurrentPageCategory(): "graphql" | "rest" | "other" {
   }
 }
 
-const selectedInterface = ref<(typeof interfaceLanguages)[number]>("TypeScript")
+const selectedInterface = ref<InterfaceLanguage>("typescript")
 const response = computed(() => {
   let response = ""
   const pageCategory = getCurrentPageCategory()
@@ -246,9 +250,23 @@ useCodemirror(
 
 const searchQuery = ref("")
 
-const filteredResponseInterfaces = computed(() => {
-  return interfaceLanguages.filter((lang) =>
-    lang.toLowerCase().includes(searchQuery.value.toLowerCase())
+const filteredResponseInterfaces = computed<
+  Record<Language, InterfaceLanguage>
+>(() => {
+  const searchQueryValue = searchQuery.value.trim()
+
+  return Object.fromEntries(
+    Object.entries(interfaceLanguages).filter(([key]) =>
+      key.toLowerCase().includes(searchQueryValue)
+    )
+  ) as Record<Language, InterfaceLanguage>
+})
+
+const selectedLanguage = computed<Language>(() => {
+  return (
+    (Object.keys(interfaceLanguages) as Language[]).find(
+      (key) => interfaceLanguages[key] === selectedInterface.value
+    ) || "TypeScript"
   )
 })
 

packages/hoppscotch-common/src/helpers/utils/interfaceLanguages.ts

@@ -1,26 +1,27 @@
-const interfaceLanguages = [
-  "cJSON",
-  "C++",
-  "C#",
-  "Crystal",
-  "Dart",
-  "Elm",
-  "Flow",
-  "Go",
-  "Haskell",
-  "Java",
-  "JavaScript",
-  "Kotlin",
-  "Objective-C",
-  "PHP",
-  "Pike",
-  "Python",
-  "Ruby",
-  "Rust",
-  "Scala3",
-  "Smithy",
-  "Swift",
-  "TypeScript",
-]
+export const interfaceLanguages = {
+  cJSON: "cjson",
+  "C++": "cpp",
+  "C#": "csharp",
+  Crystal: "crystal",
+  Dart: "dart",
+  Elm: "elm",
+  Flow: "flow",
+  Go: "go",
+  Haskell: "haskell",
+  Java: "java",
+  JavaScript: "javascript",
+  Kotlin: "kotlin",
+  "Objective-C": "objective-c",
+  PHP: "php",
+  Pike: "pike",
+  Python: "python",
+  Ruby: "ruby",
+  Rust: "rust",
+  Scala3: "scala3",
+  Smithy: "smithy4a",
+  Swift: "swift",
+  TypeScript: "typescript",
+} as const
 
-export default interfaceLanguages
+export type Language = keyof typeof interfaceLanguages
+export type InterfaceLanguage = (typeof interfaceLanguages)[Language]

packages/hoppscotch-common/src/helpers/utils/json-to-language.ts

@@ -3,8 +3,12 @@ import {
   InputData,
   jsonInputForTargetLanguage,
 } from "quicktype-core"
+import { InterfaceLanguage } from "./interfaceLanguages"
 
-async function jsonToLanguage(targetLanguage: string, jsonString: string) {
+async function jsonToLanguage(
+  targetLanguage: InterfaceLanguage,
+  jsonString: string
+) {
   const jsonInput = jsonInputForTargetLanguage(targetLanguage)
 
   await jsonInput.addSource({