[5.x] Save and view response headers (#1561)

* Log and view response headers

* Add test

Author: gdebrauwer

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=99f84d421ae083196e0a45c3c310168b",
+    "/app.js": "/app.js?id=a04a99f77a55ffcecde23cd7304b481b",
     "/app-dark.css": "/app-dark.css?id=1ea407db56c5163ae29311f1f38eb7b9",
     "/app.css": "/app.css?id=de4c978567bfd90b38d186937dee5ccf"
 }

public/mix-manifest.json

@@ -10,7 +10,8 @@
             return {
                 entry: null,
                 batch: [],
-                currentTab: 'payload'
+                currentRequestTab: 'payload',
+                currentResponseTab: 'response'
             };
         }
     }
@@ -84,21 +85,33 @@
             <div class="card mt-5 overflow-hidden">
                 <ul class="nav nav-pills">
                     <li class="nav-item">
-                        <a class="nav-link" :class="{active: currentTab=='payload'}" href="#" v-on:click.prevent="currentTab='payload'">Payload</a>
+                        <a class="nav-link" :class="{active: currentRequestTab=='payload'}" href="#" v-on:click.prevent="currentRequestTab='payload'">Payload</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" :class="{active: currentTab=='headers'}" href="#" v-on:click.prevent="currentTab='headers'">Headers</a>
+                        <a class="nav-link" :class="{active: currentRequestTab=='headers'}" href="#" v-on:click.prevent="currentRequestTab='headers'">Headers</a>
+                    </li>
+                </ul>
+                <div class="code-bg p-4 mb-0 text-white">
+                    <copy-clipboard :data="slotProps.entry.content[currentRequestTab]">
+                        <vue-json-pretty :data="slotProps.entry.content[currentRequestTab]"></vue-json-pretty>
+                    </copy-clipboard>
+                </div>
+            </div>
+            <div class="card mt-5">
+                <ul class="nav nav-pills">
+                    <li class="nav-item">
+                        <a class="nav-link" :class="{active: currentResponseTab=='response'}" href="#" v-on:click.prevent="currentResponseTab='response'">Response</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" :class="{active: currentTab=='session'}" href="#" v-on:click.prevent="currentTab='session'">Session</a>
+                        <a class="nav-link" :class="{active: currentResponseTab=='response_headers'}" href="#" v-on:click.prevent="currentResponseTab='response_headers'">Headers</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" :class="{active: currentTab=='response'}" href="#" v-on:click.prevent="currentTab='response'">Response</a>
+                        <a class="nav-link" :class="{active: currentResponseTab=='session'}" href="#" v-on:click.prevent="currentResponseTab='session'">Session</a>
                     </li>
                 </ul>
                 <div class="code-bg p-4 mb-0 text-white">
-                    <copy-clipboard :data="slotProps.entry.content[currentTab]">
-                        <vue-json-pretty :data="slotProps.entry.content[currentTab]"></vue-json-pretty>
+                    <copy-clipboard :data="slotProps.entry.content[currentResponseTab]">
+                        <vue-json-pretty :data="slotProps.entry.content[currentResponseTab]"></vue-json-pretty>
                     </copy-clipboard>
                 </div>
             </div>

resources/js/screens/requests/preview.vue

@@ -53,6 +53,7 @@ public function recordRequest(RequestHandled $event)
             'headers' => $this->headers($event->request->headers->all()),
             'payload' => $this->payload($this->input($event->request)),
             'session' => $this->payload($this->sessionVariables($event->request)),
+            'response_headers' => $this->headers($event->response->headers->all()),
             'response_status' => $event->response->getStatusCode(),
             'response' => $this->response($event->response),
             'duration' => $startTime ? floor((microtime(true) - $startTime) * 1000) : null,

src/Watchers/RequestWatcher.php

@@ -109,11 +109,11 @@ public function test_request_watcher_hides_php_auth_pw()
         $this->assertSame('********', $entry->content['headers']['php-auth-pw']);
     }
 
-    public function test_it_stores_and_displays_array_of_request_headers()
+    public function test_it_stores_and_displays_array_of_request_and_response_headers()
     {
         Route::post('/dashboard', function () {
             return response('success')->withHeaders([
-                'X-Foo' => ['first', 'second'],
+                'X-Foo' => ['third', 'fourth'],
             ]);
         });
 
@@ -125,6 +125,7 @@ public function test_it_stores_and_displays_array_of_request_headers()
 
         $this->assertSame(EntryType::REQUEST, $entry->type);
         $this->assertSame('first, second', $entry->content['headers']['x-bar']);
+        $this->assertSame('third, fourth', $entry->content['response_headers']['x-foo']);
     }
 
     public function test_request_watcher_handles_file_uploads()