chore(deps): bump

packages/hoppscotch-app/components/http/BodyParameters.vue

@@ -54,13 +54,12 @@
       />
       <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
         <div class="space-x-2 file-chips-wrapper">
-          <SmartDeletableChip
+          <SmartFileChip
             v-for="(file, fileIndex) in param.value"
             :key="`param-${index}-file-${fileIndex}`"
-            @chip-delete="chipDelete(index, fileIndex)"
           >
             {{ file.name }}
-          </SmartDeletableChip>
+          </SmartFileChip>
         </div>
       </div>
       <span v-else class="flex flex-1">
@@ -85,21 +84,17 @@
         />
       </span>
       <span>
-        <label for="attachment" class="p-0">
-          <ButtonSecondary
-            class="w-full"
-            svg="paperclip"
-            @click.native="$refs.attachment[index].click()"
+        <label :for="`attachment${index}`" class="p-0">
+          <input
+            :id="`attachment${index}`"
+            :ref="`attachment${index}`"
+            :name="`attachment${index}`"
+            type="file"
+            multiple
+            class="p-1 transition cursor-pointer file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
+            @change="setRequestAttachment(index, param, $event)"
           />
         </label>
-        <input
-          ref="attachment"
-          class="input"
-          name="attachment"
-          type="file"
-          multiple
-          @change="setRequestAttachment(index, param, $event)"
-        />
       </span>
       <span>
         <ButtonSecondary
@@ -163,8 +158,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, Ref, watch } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { onMounted, Ref, watch } from "@nuxtjs/composition-api"
 import { FormDataKeyValue } from "@hoppscotch/data"
 import { pluckRef } from "~/helpers/utils/composables"
 import {
@@ -175,87 +170,66 @@ import {
   useRESTRequestBody,
 } from "~/newstore/RESTSession"
 
-export default defineComponent({
-  setup() {
-    const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
-      FormDataKeyValue[]
-    >
-
-    const addBodyParam = () => {
-      addFormDataEntry({ key: "", value: "", active: true, isFile: false })
-    }
+const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
+  FormDataKeyValue[]
+>
 
-    const updateBodyParam = (index: number, entry: FormDataKeyValue) => {
-      updateFormDataEntry(index, entry)
-    }
+const addBodyParam = () => {
+  addFormDataEntry({ key: "", value: "", active: true, isFile: false })
+}
 
-    const deleteBodyParam = (index: number) => {
-      deleteFormDataEntry(index)
-    }
+const updateBodyParam = (index: number, entry: FormDataKeyValue) => {
+  updateFormDataEntry(index, entry)
+}
 
-    const clearContent = () => {
-      deleteAllFormDataEntries()
-    }
+const deleteBodyParam = (index: number) => {
+  deleteFormDataEntry(index)
+}
 
-    const chipDelete = (paramIndex: number, fileIndex: number) => {
-      const entry = bodyParams.value[paramIndex]
-      if (entry.isFile) {
-        entry.value.splice(fileIndex, 1)
-        if (entry.value.length === 0) {
-          updateFormDataEntry(paramIndex, {
-            ...entry,
-            isFile: false,
-            value: "",
-          })
-          return
-        }
-      }
+const clearContent = () => {
+  deleteAllFormDataEntries()
+}
 
-      updateFormDataEntry(paramIndex, entry)
-    }
+const setRequestAttachment = (
+  index: number,
+  entry: FormDataKeyValue,
+  event: InputEvent
+) => {
+  // check if file exists or not
+  if ((event.target as HTMLInputElement).files?.length === 0) {
+    updateFormDataEntry(index, {
+      ...entry,
+      isFile: false,
+      value: "",
+    })
+    return
+  }
 
-    const setRequestAttachment = (
-      index: number,
-      entry: FormDataKeyValue,
-      event: InputEvent
-    ) => {
-      const fileEntry: FormDataKeyValue = {
-        ...entry,
-        isFile: true,
-        value: Array.from((event.target as HTMLInputElement).files!),
-      }
-      updateFormDataEntry(index, fileEntry)
-    }
+  const fileEntry: FormDataKeyValue = {
+    ...entry,
+    isFile: true,
+    value: Array.from((event.target as HTMLInputElement).files!),
+  }
+  updateFormDataEntry(index, fileEntry)
+}
 
-    watch(
-      bodyParams,
-      () => {
-        if (
-          bodyParams.value.length > 0 &&
-          (bodyParams.value[bodyParams.value.length - 1].key !== "" ||
-            bodyParams.value[bodyParams.value.length - 1].value !== "")
-        )
-          addBodyParam()
-      },
-      { deep: true }
+watch(
+  bodyParams,
+  () => {
+    if (
+      bodyParams.value.length > 0 &&
+      (bodyParams.value[bodyParams.value.length - 1].key !== "" ||
+        bodyParams.value[bodyParams.value.length - 1].value !== "")
     )
-
-    onMounted(() => {
-      if (!bodyParams.value?.length) {
-        addBodyParam()
-      }
-    })
-
-    return {
-      bodyParams,
-      addBodyParam,
-      updateBodyParam,
-      deleteBodyParam,
-      clearContent,
-      setRequestAttachment,
-      chipDelete,
-    }
+      addBodyParam()
   },
+  { deep: true }
+)
+
+onMounted(() => {
+  if (!bodyParams.value?.length) {
+    addBodyParam()
+  }
 })
 </script>
 
@@ -268,8 +242,7 @@ export default defineComponent({
 
   .file-chips-wrapper {
     @apply flex;
-    @apply px-4;
-    @apply py-1;
+    @apply p-1;
     @apply w-0;
   }
 }

packages/hoppscotch-app/components/http/CodegenModal.vue

@@ -13,33 +13,54 @@
           <template #trigger>
             <span class="select-wrapper">
               <ButtonSecondary
-                :label="codegens.find((x) => x.id === codegenType).name"
+                :label="
+                  CodegenDefinitions.find((x) => x.name === codegenType).caption
+                "
                 outline
                 class="flex-1 pr-8"
               />
             </span>
           </template>
-          <SmartItem
-            v-for="(gen, index) in codegens"
-            :key="`gen-${index}`"
-            :label="gen.name"
-            :info-icon="gen.id === codegenType ? 'done' : ''"
-            :active-info-icon="gen.id === codegenType"
-            @click.native="
-              () => {
-                codegenType = gen.id
-                options.tippy().hide()
-              }
-            "
-          />
+          <div class="flex flex-col space-y-2">
+            <div class="sticky top-0">
+              <input
+                v-model="searchQuery"
+                type="search"
+                autocomplete="off"
+                class="flex w-full p-4 py-2 !bg-popover input"
+                :placeholder="`${t('action.search')}`"
+              />
+            </div>
+            <div class="flex flex-col">
+              <SmartItem
+                v-for="codegen in filteredCodegenDefinitions"
+                :key="codegen.name"
+                :label="codegen.caption"
+                :info-icon="codegen.name === codegenType ? 'done' : ''"
+                :active-info-icon="codegen.name === codegenType"
+                @click.native="
+                  () => {
+                    codegenType = codegen.name
+                    options.tippy().hide()
+                  }
+                "
+              />
+            </div>
+          </div>
         </tippy>
         <div class="flex justify-between flex-1">
           <label for="generatedCode" class="p-4">
             {{ t("request.generated_code") }}
           </label>
         </div>
         <div
-          v-if="codegenType"
+          v-if="errorState"
+          class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal"
+        >
+          {{ t("error.something_went_wrong") }}
+        </div>
+        <div
+          v-else-if="codegenType"
           ref="generatedCode"
           class="border rounded border-dividerLight"
         ></div>
@@ -63,13 +84,22 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "@nuxtjs/composition-api"
-import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
+import * as O from "fp-ts/Option"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
-import { getCurrentEnvironment } from "~/newstore/environments"
+import {
+  getEffectiveRESTRequest,
+  resolvesEnvsInBody,
+} from "~/helpers/utils/EffectiveURL"
+import { Environment, getAggregateEnvs } from "~/newstore/environments"
 import { getRESTRequest } from "~/newstore/RESTSession"
 import { useI18n, useToast } from "~/helpers/utils/composables"
+import {
+  CodegenDefinitions,
+  CodegenName,
+  generateCode,
+} from "~/helpers/new-codegen"
+import { makeRESTRequest } from "~/../hoppscotch-data/dist"
 
 const t = useI18n()
 
@@ -86,18 +116,44 @@ const toast = useToast()
 const options = ref<any | null>(null)
 
 const request = ref(getRESTRequest())
-const codegenType = ref("curl")
+const codegenType = ref<CodegenName>("shell-curl")
 const copyIcon = ref("copy")
+const errorState = ref(false)
 
 const requestCode = computed(() => {
-  const effectiveRequest = getEffectiveRESTRequest(
-    request.value as any,
-    getCurrentEnvironment()
+  const aggregateEnvs = getAggregateEnvs()
+  const env: Environment = {
+    name: "Env",
+    variables: aggregateEnvs,
+  }
+  const effectiveRequest = getEffectiveRESTRequest(request.value, env)
+
+  if (!props.show) return ""
+
+  const result = generateCode(
+    codegenType.value,
+    makeRESTRequest({
+      ...effectiveRequest,
+      body: resolvesEnvsInBody(effectiveRequest.body, env),
+      headers: effectiveRequest.effectiveFinalHeaders.map((header) => ({
+        ...header,
+        active: true,
+      })),
+      params: effectiveRequest.effectiveFinalParams.map((param) => ({
+        ...param,
+        active: true,
+      })),
+      endpoint: effectiveRequest.effectiveFinalURL,
+    })
   )
 
-  return codegens
-    .find((x) => x.id === codegenType.value)!
-    .generator(generateCodegenContext(effectiveRequest))
+  if (O.isSome(result)) {
+    errorState.value = false
+    return result.value
+  } else {
+    errorState.value = true
+    return ""
+  }
 })
 
 const generatedCode = ref<any | null>(null)
@@ -129,4 +185,12 @@ const copyRequestCode = () => {
   toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
+
+const searchQuery = ref("")
+
+const filteredCodegenDefinitions = computed(() => {
+  return CodegenDefinitions.filter((obj) =>
+    Object.values(obj).some((val) => val.includes(searchQuery.value))
+  )
+})
 </script>