rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-26 22:25:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up ununsed components

Browse Source
This commit is contained in:
Siddharth Gelera
2025-10-01 10:45:57 +05:30
parent 808c78ec12
commit 0ed2ec1e20
7 changed files with 9 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSQueryResult/StyledWrapper.js
View File

@@ -1,96 +0,0 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
height: 100%;
overflow: hidden;
background: ${(props) => props.theme.bg};
border-radius: 4px;
.CodeMirror {
height: 100%;
font-family: ${(props) => (props.font === 'default' ? 'monospace' : props.font)};
font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
}
.accordion-header {
background-color: ${(props) => props.theme.requestTabPanel.card.bg};
&:hover {
background-color: ${(props) => props.theme.plainGrid.hoverBg};
}
&.open {
background-color: ${(props) => props.theme.plainGrid.hoverBg};
}
}
.error-header {
background-color: ${(props) => (props.theme.bg === '#1e1e1e' ? 'rgba(185, 28, 28, 0.1)' : '#fee2e2')};
}
.error-text {
color: ${(props) => props.theme.colors.text.danger};
}
div.tabs {
div.tab {
padding: 6px 0px;
border: none;
border-bottom: solid 2px transparent;
margin-right: 1.25rem;
color: var(--color-tab-inactive);
cursor: pointer;
&:focus,
&:active,
&:focus-within,
&:focus-visible,
&:target {
outline: none !important;
box-shadow: none !important;
}
&.active {
color: ${(props) => props.theme.tabs.active.color} !important;
border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
}
}
}
.stream-status {
display: inline-flex;
align-items: center;
&.complete {
color: ${(props) => props.theme.colors.text.green};
}
&.cancelled {
color: ${(props) => props.theme.colors.text.danger};
}
&.streaming {
color: ${(props) => props.theme.colors.text.blue};
}
}
.message-counter {
display: inline-flex;
align-items: center;
margin-left: 10px;
}
.response-list {
max-height: 500px;
overflow-y: auto;
}
.response-message {
margin-bottom: 8px;
padding: 8px;
border-radius: 4px;
background-color: var(--color-panel-background);
}
`;
export default StyledWrapper;

130
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSQueryResult/index.js
View File

@@ -1,130 +0,0 @@
import React, { useState, useEffect } from 'react';
import Accordion from 'components/Accordion';
import CodeEditor from 'components/CodeEditor';
import { get } from 'lodash';
import { useSelector } from 'react-redux';
import { useTheme } from 'providers/Theme/index';
import StyledWrapper from './StyledWrapper';
import { formatISO9075 } from 'date-fns';
import WSError from '../WSError';
const WSQueryResult = ({ item, collection }) => {
const { displayedTheme } = useTheme();
const preferences = useSelector((state) => state.app.preferences);
const [showErrorMessage, setShowErrorMessage] = useState(true);
const response = item.response || {};
const responsesList = response?.responses || [];
// Reverse the responses list to show the most recent at the top
const reversedResponsesList = [...responsesList].reverse();
const hasError = response.isError;
const hasResponses = responsesList.length > 0;
const errorMessage = response.error;
// Reset error visibility when a new response is received
useEffect(() => {
if (hasError) {
setShowErrorMessage(true);
}
}, [response, hasError]);
// Format a timestamp to a human-readable format
const formatTimestamp = (timestamp) => {
if (!timestamp) return 'Unknown time';
try {
const date = new Date(timestamp);
return formatISO9075(date);
} catch (e) {
return 'Invalid time';
}
};
// Format JSON for display
const formatJSON = (data) => {
try {
if (typeof data === 'string') {
return JSON.stringify(JSON.parse(data), null, 2);
}
return JSON.stringify(data, null, 2);
} catch (e) {
return typeof data === 'string' ? data : JSON.stringify(data);
}
};
if (!hasResponses && !hasError) {
return (
<StyledWrapper className="w-full h-full relative flex flex-col">
<div className="text-gray-500 dark:text-gray-400 p-4">No messages received</div>
</StyledWrapper>
);
}
return (
<StyledWrapper className="w-full h-full relative flex flex-col mt-2">
{hasError && showErrorMessage && <WSError error={errorMessage} onClose={() => setShowErrorMessage(false)} />}
{hasResponses && (
<div className={`overflow-y-auto ${responsesList.length === 1 ? 'flex-1' : ''}`}>
{responsesList.length === 1 ? (
// Single message - render directly without accordion
<div className="h-full">
<CodeEditor
collection={collection}
font={get(preferences, 'font.codeFont', 'default')}
fontSize={get(preferences, 'font.codeFontSize')}
theme={displayedTheme}
value={formatJSON(reversedResponsesList[0])}
mode="application/json"
readOnly={true}
/>
</div>
) : (
// Multiple messages - use accordion
<Accordion defaultIndex={0}>
{reversedResponsesList.map((response, index) => {
// Calculate the original response number (for display purposes)
const originalIndex = responsesList.length - index - 1;
return (
<Accordion.Item key={originalIndex} index={index}>
<Accordion.Header index={index} style={{ padding: '8px 12px', minHeight: '40px' }}>
<div className="flex justify-between w-full">
<div className="font-medium">
Response
{' '}
{originalIndex + 1}
{' '}
{index === 0 ? '(Latest)' : ''}
</div>
</div>
</Accordion.Header>
<Accordion.Content index={index} style={{ padding: '0px' }}>
<div className="h-60">
<CodeEditor
collection={collection}
font={get(preferences, 'font.codeFont', 'default')}
fontSize={get(preferences, 'font.codeFontSize')}
theme={displayedTheme}
value={formatJSON(response)}
mode="application/json"
readOnly={true}
/>
</div>
</Accordion.Content>
</Accordion.Item>
);
})}
</Accordion>
)}
</div>
)}
{hasError && !hasResponses && !showErrorMessage && (
<div className="text-gray-500 dark:text-gray-400 p-4">
No messages received. A server error occurred but has been dismissed.
</div>
)}
</StyledWrapper>
);
};
export default WSQueryResult;

44
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WsError/StyledWrapper.js
View File

@@ -1,44 +0,0 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
border-left: 4px solid ${(props) => props.theme.colors.text.danger};
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
max-height: 200px;
min-height: 70px;
overflow-y: auto;
background-color: ${(props) => (props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.5)' : 'rgba(250, 250, 250, 0.9)')};
.close-button {
opacity: 0.7;
transition: opacity 0.2s;
&:hover {
opacity: 1;
}
svg {
color: ${(props) => props.theme.text};
}
}
.error-title {
font-weight: 600;
margin-bottom: 0.375rem;
color: ${(props) => props.theme.colors.text.danger};
}
.error-message {
font-family: monospace;
font-size: 0.6875rem;
line-height: 1.25rem;
white-space: pre-wrap;
word-break: break-all;
color: ${(props) => props.theme.text};
}
`;
export default StyledWrapper;

23
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WsError/index.js
View File

@@ -1,23 +0,0 @@
import React from 'react';
import { IconX } from '@tabler/icons';
import StyledWrapper from './StyledWrapper';
const WSError = ({ error, onClose }) => {
if (!error) return null;
return (
<StyledWrapper className="mt-4 mb-2">
<div className="flex items-start gap-3 px-4 py-3">
<div className="flex-1 min-w-0">
<div className="error-title">WebSocket Server Error</div>
<div className="error-message">{typeof error === 'string' ? error : JSON.stringify(error, null, 2)}</div>
</div>
<div className="close-button flex-shrink-0 cursor-pointer" onClick={onClose}>
<IconX size={16} strokeWidth={1.5} />
</div>
</div>
</StyledWrapper>
);
};
export default WSError;

8
packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
View File

@@ -17,13 +17,7 @@ import WSResponseSortOrder from './WSResponseSortOrder';
import WSResponseHeaders from './WSResponseHeaders';
const WSResult = ({ response }) => {
return response.isError ? (
<div className="text-red-500" style={{ whiteSpace: 'pre-line' }}>
{response.error}
</div>
) : (
<WSMessagesList order={response?.sortOrder} messages={response.responses || []} />
);
return <WSMessagesList order={response?.sortOrder} messages={response.responses || []} />;
};
const WSResponsePane = ({ item, collection }) => {

7
packages/bruno-requests/src/ws/ws-client.js
View File

@@ -297,6 +297,13 @@ class WsClient {
});
});
ws.on('unexpected-response', (req, res) => {
this.eventCallback('ws:error', requestId, collectionUid, {
message: res.statusMessage,
timestamp: Date.now()
});
});
ws.on('message', (data) => {
try {
const message = JSON.parse(data.toString());

2
tests/websockets/subproto.spec.ts
View File

@@ -31,7 +31,7 @@ test.describe.serial('headers', () => {
await page.keyboard.insertText(wrongProtocol);
await locators.runner().click();
expect(await messages[0].locator('.text-ellipsis').innerText()).toMatch(/^(Unexpected server response: 400)/);
expect(await messages[0].locator('.text-ellipsis').innerText()).toMatch(/^(Bad Request)/);
await page.locator('pre').filter({ hasText: wrongProtocol }).click();
await clearText(wrongProtocol);