fix: sidebar codegen crashing and AWS Signature Auth flow (#4315)

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

packages/hoppscotch-common/locales/en.json

@@ -292,7 +292,8 @@
     "team_name": "Workspace name empty",
     "teams": "You don't belong to any workspaces",
     "tests": "There are no tests for this request",
-    "access_tokens": "Access tokens are empty"
+    "access_tokens": "Access tokens are empty",
+    "response": "No response received"
   },
   "environment": {
     "add_to_global": "Add to Global",

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

@@ -259,6 +259,10 @@ const selectAWSSignatureAuthType = () => {
     ...auth.value,
     authType: "aws-signature",
     addTo: "HEADERS",
+    accessKey: "",
+    secretKey: "",
+    region: "",
+    serviceName: "",
   } as HoppGQLAuth
 }
 

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

@@ -184,6 +184,7 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import IconTrash2 from "~icons/lucide/trash-2"
 
 import { getDefaultAuthCodeOauthFlowParams } from "~/services/oauth/flows/authCode"
+import { HoppRESTAuth, HoppRESTAuthOAuth2 } from "@hoppscotch/data"
 
 const t = useI18n()
 
@@ -239,6 +240,10 @@ const selectAWSSignatureAuthType = () => {
     ...auth.value,
     authType: "aws-signature",
     addTo: "HEADERS",
+    accessKey: "",
+    secretKey: "",
+    region: "",
+    serviceName: "",
   } as HoppRESTAuth
 }
 

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

@@ -135,6 +135,7 @@ import { platform } from "~/platform"
 import { RESTTabService } from "~/services/tab/rest"
 import IconCheck from "~icons/lucide/check"
 import IconWrapText from "~icons/lucide/wrap-text"
+import { asyncComputed } from "@vueuse/core"
 
 const t = useI18n()
 
@@ -156,7 +157,7 @@ const emit = defineEmits<{
   (e: "request-code", value: string): void
 }>()
 
-const requestCode = computed(() => {
+const requestCode = asyncComputed(async () => {
   const aggregateEnvs = getAggregateEnvs()
   const requestVariables = request.value.requestVariables.map(
     (requestVariable) => {
@@ -178,10 +179,19 @@ const requestCode = computed(() => {
       ...aggregateEnvs,
     ],
   }
-  const effectiveRequest = getEffectiveRESTRequest(request.value, env, true)
+
+  // Calculating this before to keep the reactivity as asyncComputed will lose
+  // reactivity tracking after the await point
+  const lang = codegenType.value
+
+  const effectiveRequest = await getEffectiveRESTRequest(
+    request.value,
+    env,
+    true
+  )
 
   const result = generateCode(
-    codegenType.value,
+    lang,
     makeRESTRequest({
       ...effectiveRequest,
       body: resolvesEnvsInBody(effectiveRequest.body, env),

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

@@ -5,7 +5,7 @@
     @close="close()"
   >
     <template #content>
-      <div class="flex flex-col px-4 flex-1 overflow-y-auto">
+      <div v-if="response" class="flex flex-col px-4 flex-1 overflow-y-auto">
         <div class="flex flex-col">
           <tippy
             interactive
@@ -110,6 +110,14 @@
           </div>
         </div>
       </div>
+
+      <HoppSmartPlaceholder
+        v-else
+        :src="`/images/states/${colorMode.value}/add_files.svg`"
+        :alt="`${t('empty.response')}`"
+        :text="`${t('empty.response')}`"
+      >
+      </HoppSmartPlaceholder>
     </template>
   </HoppSmartSlideOver>
 </template>
@@ -134,8 +142,10 @@ 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"
+import { useColorMode } from "~/composables/theming"
 
 const t = useI18n()
+const colorMode = useColorMode()
 
 defineProps<{
   show: boolean
@@ -189,7 +199,10 @@ const errorState = ref(false)
 const interfaceCode = ref("")
 
 const setInterfaceCode = async () => {
-  const res = await jsonToLanguage(selectedInterface.value, response.value)
+  const res = await jsonToLanguage(
+    selectedInterface.value,
+    response.value || "{}"
+  ) // to avoid possible errors empty object is passed
   interfaceCode.value = res.lines.join("\n")
 }
 

packages/hoppscotch-common/src/helpers/RequestRunner.ts

@@ -247,7 +247,7 @@ export function runRESTRequest$(
       combineEnvVariables(finalEnvs)
     )
 
-    const effectiveRequest = getEffectiveRESTRequest(finalRequest, {
+    const effectiveRequest = await getEffectiveRESTRequest(finalRequest, {
       id: "env-id",
       v: 1,
       name: "Env",
@@ -321,7 +321,7 @@ export function runRESTRequest$(
                 {
                   name: env.name,
                   v: 1,
-                  id: env.id ?? "",
+                  id: "id" in env ? env.id : "",
                   variables: updatedRunResult.envs.selected,
                 }
               )

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

@@ -1,30 +1,32 @@
+import {
+  Environment,
+  FormDataKeyValue,
+  HoppRESTAuth,
+  HoppRESTHeader,
+  HoppRESTHeaders,
+  HoppRESTParam,
+  HoppRESTParams,
+  HoppRESTReqBody,
+  HoppRESTRequest,
+  parseBodyEnvVariables,
+  parseRawKeyValueEntriesE,
+  parseTemplateString,
+  parseTemplateStringE,
+} from "@hoppscotch/data"
+import { AwsV4Signer } from "aws4fetch"
 import * as A from "fp-ts/Array"
 import * as E from "fp-ts/Either"
+import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as RA from "fp-ts/ReadonlyArray"
 import * as S from "fp-ts/string"
 import qs from "qs"
-import { flow, pipe } from "fp-ts/function"
 import { combineLatest, Observable } from "rxjs"
 import { map } from "rxjs/operators"
-import {
-  FormDataKeyValue,
-  HoppRESTReqBody,
-  HoppRESTRequest,
-  parseTemplateString,
-  parseBodyEnvVariables,
-  Environment,
-  HoppRESTHeader,
-  HoppRESTParam,
-  parseRawKeyValueEntriesE,
-  parseTemplateStringE,
-  HoppRESTAuth,
-  HoppRESTHeaders,
-} from "@hoppscotch/data"
+
 import { arrayFlatMap, arraySort } from "../functional/array"
 import { toFormData } from "../functional/formData"
 import { tupleWithSameKeysToRecord } from "../functional/record"
-import { AwsV4Signer } from "aws4fetch"
 
 export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
   /**
@@ -33,8 +35,8 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
    * This contains path, params and environment variables all applied to it
    */
   effectiveFinalURL: string
-  effectiveFinalHeaders: { key: string; value: string }[]
-  effectiveFinalParams: { key: string; value: string }[]
+  effectiveFinalHeaders: HoppRESTHeaders
+  effectiveFinalParams: HoppRESTParams
   effectiveFinalBody: FormData | string | null
   effectiveFinalRequestVariables: { key: string; value: string }[]
 }
@@ -502,6 +504,7 @@ export async function getEffectiveRESTRequest(
         false,
         showKeyIfSecret
       ),
+      description: x.description,
     }))
   )
 
@@ -525,6 +528,7 @@ export async function getEffectiveRESTRequest(
         false,
         showKeyIfSecret
       ),
+      description: x.description,
     }))
   )