From 62b8784972e1c2c98cbd84aadb15c541532f8dc1 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Thu, 18 Dec 2025 17:48:53 +0530
Subject: [PATCH] feat: add hideResultTypeSelector prop to QueryResponse
 component (#6452)

* Introduced hideResultTypeSelector prop to conditionally render the QueryResultTypeSelector in the QueryResponse component.
* Updated BodyBlock to pass the type prop to control the visibility of the result type selector based on the request or response context.
* Adjusted styling in StyledWrapper for improved layout consistency.
---
 .../QueryResponse/StyledWrapper.js            |  4 +--
 .../ResponsePane/QueryResponse/index.js       | 34 +++++++++++--------
 .../TimelineItem/Common/Body/index.js         |  3 +-
 .../Timeline/TimelineItem/Request/index.js    |  2 +-
 .../Timeline/TimelineItem/Response/index.js   |  2 +-
 5 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResponse/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/QueryResponse/StyledWrapper.js
index 4c68464eb..ee599f4dd 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResponse/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResponse/StyledWrapper.js
@@ -8,8 +8,8 @@ const StyledWrapper = styled.div`
   border-radius: 4px;
   border: 1px solid ${(props) => props.theme.console.border};
 
-  .query-response-content {
-    border-top: 1px solid ${(props) => props.theme.console.border};
+  .result-type-selector {
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
index 283f98228..f0e82e507 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
@@ -12,7 +12,8 @@ const QueryResponse = ({
   dataBuffer,
   disableRunEventListener,
   headers,
-  error
+  error,
+  hideResultTypeSelector
 }) => {
   const { initialFormat, initialTab } = useInitialResponseFormat(dataBuffer, headers);
   const previewFormatOptions = useResponsePreviewFormatOptions(dataBuffer, headers);
@@ -27,20 +28,23 @@ const QueryResponse = ({
   }, [initialFormat, initialTab]);
   return (
     <StyledWrapper>
-      <div className="flex items-center justify-end p-2">
-        <QueryResultTypeSelector
-          formatOptions={previewFormatOptions}
-          formatValue={selectedFormat}
-          onFormatChange={(newFormat) => {
-            setSelectedFormat(newFormat);
-          }}
-          onPreviewTabSelect={() => {
-            setSelectedTab((prev) => prev === 'editor' ? 'preview' : 'editor');
-          }}
-          selectedTab={selectedTab}
-        />
-      </div>
-      <div className={classnames('flex-1 query-response-content', selectedTab === 'editor' ? 'px-2 py-1' : '')}>
+      {!hideResultTypeSelector && (
+        <div className="flex items-center justify-end p-2 result-type-selector">
+
+          <QueryResultTypeSelector
+            formatOptions={previewFormatOptions}
+            formatValue={selectedFormat}
+            onFormatChange={(newFormat) => {
+              setSelectedFormat(newFormat);
+            }}
+            onPreviewTabSelect={() => {
+              setSelectedTab((prev) => prev === 'editor' ? 'preview' : 'editor');
+            }}
+            selectedTab={selectedTab}
+          />
+        </div>
+      )}
+      <div className={classnames('flex-1 result-content', selectedTab === 'editor' ? 'px-2 py-1' : '')}>
         <QueryResult
           item={item}
           collection={collection}
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
index 3baec39f0..e86d40669 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
@@ -1,7 +1,7 @@
 import QueryResponse from 'components/ResponsePane/QueryResponse/index';
 import { useState } from 'react';
 
-const BodyBlock = ({ collection, data, dataBuffer, headers, error, item }) => {
+const BodyBlock = ({ collection, data, dataBuffer, headers, error, item, type }) => {
   const [isBodyCollapsed, toggleBody] = useState(true);
   return (
     <div className="collapsible-section">
@@ -22,6 +22,7 @@ const BodyBlock = ({ collection, data, dataBuffer, headers, error, item }) => {
                 headers={headers}
                 error={error}
                 key={item?.uid}
+                hideResultTypeSelector={type === 'request'}
               />
             </div>
           ) : (
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js
index 51ce28bf0..ef6f90a28 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js
@@ -32,7 +32,7 @@ const Request = ({ collection, request, item }) => {
       <Headers headers={headers} type="request" />
 
       {/* Body */}
-      <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} />
+      <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} type="request" />
     </div>
   );
 };
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
index 4c595f29c..0f4a83645 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
@@ -35,7 +35,7 @@ const Response = ({ collection, response, item }) => {
       <Headers headers={headers} type="response" />
 
       {/* Body */}
-      <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} />
+      <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} type="response" />
     </div>
   );
 };