feat(request-log): add view button to request log

web/components/templates/requestsV2/requestContentView.tsx

@@ -0,0 +1,27 @@
+import React from 'react'; 
+import { NormalizedRequest } from './builder/abstractRequestBuilder';
+
+interface RequestContentViewProps {
+  request: NormalizedRequest;
+}
+
+const RequestContentView: React.FC<RequestContentViewProps> = ({ request }) => {
+  return (
+    <div className="p-4">
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold mb-2">Request</h3>
+        <div style={{ overflowWrap: 'break-word' }}>
+          <pre>{JSON.stringify(request.requestBody, null, 2)}</pre>
+        </div>
+      </div>
+      <div>
+        <h3 className="text-lg font-semibold mb-2">Response</h3>
+        <div style={{ overflowWrap: 'break-word' }}>
+          <pre>{JSON.stringify(request.responseBody, null, 2)}</pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RequestContentView;

web/components/templates/requestsV2/requestDrawerV2.tsx

@@ -1,4 +1,4 @@
-import { BeakerIcon, ClipboardDocumentIcon } from "@heroicons/react/24/outline";
+import { BeakerIcon, ClipboardDocumentIcon, EyeIcon } from "@heroicons/react/24/outline";
 import { Tooltip } from "@mui/material";
 import { useRouter } from "next/router";
 import useNotification from "../../shared/notification/useNotification";
@@ -7,6 +7,8 @@ import { NormalizedRequest } from "./builder/abstractRequestBuilder";
 import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/20/solid";
 import { clsx } from "../../shared/clsx";
 import RequestRow from "./requestRow";
+import RequestContentView from "./requestContentView";
+import { useState } from "react";
 
 interface RequestDrawerV2Props {
   open: boolean;
@@ -33,6 +35,7 @@ const RequestDrawerV2 = (props: RequestDrawerV2Props) => {
 
   const { setNotification } = useNotification();
   const router = useRouter();
+  const [isContentView, setIsContentView] = useState(false);
 
   const setOpenHandler = (drawerOpen: boolean) => {
     // if the drawerOpen boolean is true, open the drawer
@@ -85,6 +88,14 @@ const RequestDrawerV2 = (props: RequestDrawerV2Props) => {
                 <ClipboardDocumentIcon className="h-5 w-5" />
               </button>
             </Tooltip>
+            <Tooltip title="View Content">
+              <button
+                onClick={() => setIsContentView(!isContentView)} 
+                className="hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md -m-1 p-1"
+              >
+                <EyeIcon className="h-5 w-5" />
+              </button>
+            </Tooltip>
           </div>
           {(hasPrevious || hasNext) && (
             <div className="flex flex-row items-center space-x-1.5">
@@ -118,7 +129,11 @@ const RequestDrawerV2 = (props: RequestDrawerV2Props) => {
       }
     >
       {request ? (
-        <RequestRow request={request} properties={properties} open={open} />
+        isContentView ? (
+          <RequestContentView request={request} />
+        ) : (
+          <RequestRow request={request} properties={properties} open={open} />
+        )
       ) : (
         <p>Loading...</p>
       )}