fix: codegen breaking in example tab and minor UI updates (#4478)

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

packages/hoppscotch-common/src/components/collections/Request.vue

@@ -26,7 +26,7 @@
         <component
           :is="isResponseVisible ? IconArrowDown : IconArrowRight"
           v-if="request.responses && Object.keys(request.responses).length > 0"
-          class="svg-icons cursor-pointer hover:bg-primaryDark transition"
+          class="svg-icons cursor-pointer hover:bg-primaryDark transition rounded"
           @click="toggleRequestResponse()"
         />
       </div>

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

@@ -136,13 +136,23 @@ import { RESTTabService } from "~/services/tab/rest"
 import IconCheck from "~icons/lucide/check"
 import IconWrapText from "~icons/lucide/wrap-text"
 import { asyncComputed } from "@vueuse/core"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
 
 const t = useI18n()
 
 const tabs = useService(RESTTabService)
-const request = computed(() =>
-  cloneDeep(tabs.currentActiveTab.value.document.request)
+
+// get the current active request if the current active tab is a request else get the original request from the response tab
+const currentActiveRequest = computed(() =>
+  tabs.currentActiveTab.value.document.type === "request"
+    ? tabs.currentActiveTab.value.document.request
+    : makeRESTRequest({
+        ...getDefaultRESTRequest(),
+        ...tabs.currentActiveTab.value.document.response.originalRequest,
+      })
 )
+
+const request = computed(() => cloneDeep(currentActiveRequest.value))
 const codegenType = ref<CodegenName>("shell-curl")
 const errorState = ref(false)
 

packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue

@@ -285,7 +285,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: "save-as-example"): void
-  (e: "update:response", val: HoppRESTRequestResponse): void
+  (e: "update:response", val: HoppRESTRequestResponse | HoppRESTResponse): void
 }>()
 
 const showResponse = computed(() => {
@@ -444,7 +444,10 @@ const { cursor } = useCodemirror(
     completer: null,
     environmentHighlights: true,
     onChange: (update: string) => {
-      emit("update:response", { ...props.response, body: update })
+      emit("update:response", {
+        ...props.response,
+        body: update,
+      } as HoppRESTRequestResponse)
     },
   })
 )

packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 py-1"
+      class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
       :class="{ 'py-2': !responseBodyText }"
     >
       <label class="truncate font-semibold text-secondaryLight">
@@ -180,7 +180,10 @@ useCodemirror(
     completer: null,
     environmentHighlights: true,
     onChange: (update: string) => {
-      emit("update:response", { ...props.response, body: update })
+      emit("update:response", {
+        ...props.response,
+        body: update,
+      } as HoppRESTRequestResponse)
     },
   })
 )

packages/hoppscotch-common/src/components/teams/Invite.vue

@@ -34,8 +34,9 @@
             <div
               v-for="(invitee, index) in successInvites"
               :key="`invitee-${index}`"
+              class="flex items-center"
             >
-              <p class="flex items-center">
+              <p class="flex items-center flex-1">
                 <component
                   :is="IconMailCheck"
                   class="svg-icons mr-4 text-green-500"
@@ -69,6 +70,7 @@
             <div
               v-for="(invitee, index) in failedInvites"
               :key="`invitee-${index}`"
+              class="flex flex-col"
             >
               <p class="flex items-center">
                 <component
@@ -77,7 +79,7 @@
                 />
                 <span class="truncate">{{ invitee.email }}</span>
               </p>
-              <p class="ml-8 mt-2 text-red-500">
+              <p class="ml-8 mt-1 text-secondaryLight text-tiny">
                 {{ getErrorMessage(invitee.error) }}
               </p>
             </div>
@@ -660,6 +662,8 @@ const getErrorMessage = (error: SendInvitesErrorType) => {
       return t("team.already_member")
     case "team_invite/member_has_invite":
       return t("team.member_has_invite")
+    case "user/not_found":
+      return t("team.user_not_found")
   }
 }