rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-02 17:08:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add hideResultTypeSelector prop to QueryResponse component (#6452)

Browse Source 
* 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.
This commit is contained in:
Abhishek S Lal
2025-12-18 17:48:53 +05:30
committed by GitHub
parent 5e6444b8b5
commit 62b8784972
5 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bruno-app/src/components/ResponsePane/QueryResponse/StyledWrapper.js
View File

@@ -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};
}
`;

34
packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
View File

@@ -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}

3
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
View File

@@ -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>
) : (

2
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js
View File

@@ -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>
);
};

2
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
View File

@@ -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>
);
};