fix: headers having different values with the same key are not shown (#4112)

* feat: allow ability for multiple headers with the same key to be shown

* chore: remove extension inspector in selfhost-desktop

* chore: cleanup

---------

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

packages/hoppscotch-common/src/components.d.ts

@@ -1,11 +1,11 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-components
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
 export {}
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
     AppBanner: typeof import('./components/app/Banner.vue')['default']
@@ -148,7 +148,6 @@ declare module 'vue' {
     IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
-    IconLucideBrush: (typeof import("~icons/lucide/brush"))["default"]
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -158,7 +157,6 @@ declare module 'vue' {
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideRss: (typeof import("~icons/lucide/rss"))["default"]
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
     IconLucideX: typeof import('~icons/lucide/x')['default']
@@ -214,4 +212,5 @@ declare module 'vue' {
     WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
     WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
   }
+
 }

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

@@ -15,10 +15,6 @@ export type NetworkStrategy = (
   req: AxiosRequestConfig
 ) => TE.TaskEither<any, NetworkResponse>
 
-export const cancelRunningRequest = () => {
-  // TODO: Implement
-}
-
 function processResponse(
   res: NetworkResponse,
   req: EffectiveHoppRESTRequest,
@@ -34,10 +30,13 @@ function processResponse(
     statusCode: res.status,
     statusText: res.statusText,
     body: res.data,
-    headers: Object.keys(res.headers).map((x) => ({
-      key: x,
-      value: res.headers[x],
-    })),
+    // If multi headers are present, then we can just use that, else fallback to Axios type
+    headers:
+      res.additional?.multiHeaders ??
+      Object.keys(res.headers).map((x) => ({
+        key: x,
+        value: res.headers[x],
+      })),
     meta: {
       responseSize: contentLength,
       responseDuration: backupTimeEnd - backupTimeStart,

packages/hoppscotch-common/src/services/interceptor.service.ts

@@ -16,6 +16,22 @@ export type NetworkResponse = AxiosResponse<unknown> & {
       endTime: number
     }
   }
+  /**
+   * Optional additional fields with special optional metadata that can be used
+   */
+  additional?: {
+    /**
+     * By the HTTP spec, we can have multiple headers with the same name, but
+     * this is not accessible in the AxiosResponse type as the headers there are Record<string, string>
+     * (and hence cannot have secondary values).
+     *
+     * If this value is present, headers can be read from here which will have the data.
+     */
+    multiHeaders?: Array<{
+      key: string
+      value: string
+    }>
+  }
 }
 
 /**

packages/hoppscotch-selfhost-desktop/src/main.ts

@@ -5,7 +5,6 @@ import { def as collectionsDef } from "./platform/collections/collections.platfo
 import { def as settingsDef } from "./platform/settings/settings.platform"
 import { def as historyDef } from "./platform/history/history.platform"
 import { proxyInterceptor } from "@hoppscotch/common/platform/std/interceptors/proxy"
-import { ExtensionInspectorService } from "@hoppscotch/common/platform/std/inspections/extension.inspector"
 import { NativeInterceptorService } from "./platform/interceptors/native"
 import { nextTick, ref, watch } from "vue"
 import { emit, listen } from "@tauri-apps/api/event"
@@ -53,9 +52,6 @@ const headerPaddingTop = ref("0px")
         { type: "standalone", interceptor: proxyInterceptor },
       ],
     },
-    additionalInspectors: [
-      { type: "service", service: ExtensionInspectorService },
-    ],
     platformFeatureFlags: {
       exportAsGIST: false,
       hasTelemetry: false,

packages/hoppscotch-selfhost-desktop/src/platform/interceptors/native.ts

@@ -97,6 +97,11 @@ async function runRequest(
           endTime: timeEnd,
         },
       },
+      additional: {
+        multiHeaders: Object.entries(res.rawHeaders).flatMap(
+          ([header, values]) => values.map((value) => ({ key: header, value }))
+        ),
+      },
     })
   } catch (e) {
     const timeEnd = Date.now()