feat(common): display status text from the API response if available (#3466)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

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

@@ -53,7 +53,12 @@
           <span v-if="response.statusCode">
             <span class="text-secondary"> {{ t("response.status") }}: </span>
             {{ `${response.statusCode}\xA0 • \xA0`
-            }}{{ getStatusCodeReasonPhrase(response.statusCode) }}
+            }}{{
+              getStatusCodeReasonPhrase(
+                response.statusCode,
+                response.statusText
+              )
+            }}
           </span>
           <span v-if="response.meta && response.meta.responseDuration">
             <span class="text-secondary"> {{ t("response.time") }}: </span>

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

@@ -29,10 +29,10 @@ function processResponse(
   const contentLength = res.headers["content-length"]
     ? parseInt(res.headers["content-length"])
     : (res.data as ArrayBuffer).byteLength
-
   return <HoppRESTResponse>{
     type: successState,
     statusCode: res.status,
+    statusText: res.statusText,
     body: res.data,
     headers: Object.keys(res.headers).map((x) => ({
       key: x,

packages/hoppscotch-common/src/helpers/types/HoppRESTResponse.ts

@@ -10,7 +10,7 @@ export type HoppRESTResponse =
       headers: HoppRESTResponseHeader[]
       body: ArrayBuffer
       statusCode: number
-
+      statusText: string
       meta: {
         responseSize: number // in bytes
         responseDuration: number // in millis
@@ -33,6 +33,7 @@ export type HoppRESTResponse =
       headers: HoppRESTResponseHeader[]
       body: ArrayBuffer
       statusCode: number
+      statusText: string
       meta: {
         responseSize: number // in bytes
         responseDuration: number // in millis

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

@@ -85,6 +85,17 @@ const statusCodes: {
   599: "Network connect timeout error", // (Unknown) This status code is not specified in any RFCs, but is used by Microsoft Corp. HTTP proxies to signal a network connect timeout behind the proxy to a client in front of the proxy.
 }
 
-export function getStatusCodeReasonPhrase(code: number): string {
+export function getStatusCodeReasonPhrase(
+  code: number,
+  statusText?: string
+): string {
+  // Return statusText if non-empty after trimming and add ellipsis if greater than 35 characters
+  const trimmedStatusText = statusText?.trim()
+  if (trimmedStatusText) {
+    return trimmedStatusText.length > 35
+      ? `${trimmedStatusText.substring(0, 35)}...`
+      : trimmedStatusText
+  }
+
   return statusCodes[code] ?? "Unknown"
 }

packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/response.inspector.spec.ts

@@ -157,6 +157,7 @@ describe("ResponseInspectorService", () => {
         headers: [],
         meta: { responseDuration: 0, responseSize: 0 },
         req: req.value,
+        statusText: "",
       })
 
       const result = responseInspector.getInspections(req, res)
@@ -183,6 +184,7 @@ describe("ResponseInspectorService", () => {
         headers: [],
         meta: { responseDuration: 0, responseSize: 0 },
         req: req.value,
+        statusText: "",
       })
 
       const result = responseInspector.getInspections(req, res)
@@ -209,6 +211,7 @@ describe("ResponseInspectorService", () => {
         headers: [],
         meta: { responseDuration: 0, responseSize: 0 },
         req: req.value,
+        statusText: "",
       })
 
       const result = responseInspector.getInspections(req, res)
@@ -235,6 +238,7 @@ describe("ResponseInspectorService", () => {
         headers: [],
         meta: { responseDuration: 0, responseSize: 0 },
         req: req.value,
+        statusText: "",
       })
 
       const result = responseInspector.getInspections(req, res)