fix: show file chip for the selected file in binary body (#4562)

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

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

@@ -56,7 +56,11 @@ const handleFileChange = (e: Event) => {
 }
 </script>
 <template>
-  <span>
+  <div class="flex items-center px-4 py-2">
+    <HoppSmartFileChip v-if="props.modelValue.body">{{
+      props.modelValue.body.name
+    }}</HoppSmartFileChip>
+
     <label :for="`attachment-binary-body`" class="p-0">
       <input
         :id="`attachment-binary-body`"
@@ -66,5 +70,5 @@ const handleFileChange = (e: Event) => {
         @change="handleFileChange"
       />
     </label>
-  </span>
+  </div>
 </template>

packages/hoppscotch-common/src/services/inspection/inspectors/interceptors.inspector.ts

@@ -33,6 +33,10 @@ export class InterceptorsInspectorService extends Service implements Inspector {
     req: Readonly<Ref<HoppRESTRequest | HoppRESTResponseOriginalRequest>>
   ) {
     return computed((): InspectorResult[] => {
+      if (!req.value) {
+        return []
+      }
+
       const isBinaryBody =
         req.value.body.contentType === "application/octet-stream"
 

packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts

@@ -27,25 +27,31 @@ export const REST_COLLECTIONS_MOCK: HoppCollection[] = [
   {
     v: 5,
     name: "Echo",
-    folders: [],
     requests: [
       {
         v: RESTReqSchemaVersion,
-        endpoint: "https://echo.hoppscotch.io",
         name: "Echo test",
+        method: "GET",
+        endpoint: "https://echo.hoppscotch.io",
         params: [],
         headers: [],
-        method: "GET",
-        auth: { authType: "none", authActive: true },
         preRequestScript: "",
         testScript: "",
-        body: { contentType: null, body: null },
+        auth: {
+          authType: "none",
+          authActive: true,
+        },
+        body: {
+          contentType: null,
+          body: null,
+        },
         requestVariables: [],
         responses: {},
       },
     ],
     auth: { authType: "none", authActive: true },
     headers: [],
+    folders: [],
   },
 ]
 
@@ -53,20 +59,23 @@ export const GQL_COLLECTIONS_MOCK: HoppCollection[] = [
   {
     v: 5,
     name: "Echo",
-    folders: [],
     requests: [
       {
         v: 7,
         name: "Echo test",
         url: "https://echo.hoppscotch.io/graphql",
         headers: [],
-        variables: '{\n  "id": "1"\n}',
         query: "query Request { url }",
-        auth: { authType: "none", authActive: true },
+        variables: '{\n  "id": "1"\n}',
+        auth: {
+          authType: "none",
+          authActive: true,
+        },
       },
     ],
     auth: { authType: "none", authActive: true },
     headers: [],
+    folders: [],
   },
 ]