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/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")
 }