cybercyst/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2025-05-05 15:32:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: style skipped requests in runner and show skipped count (#3853)

Browse Source 
Mostly taken from @JorgeTrovisco 's implementation #2397
Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
This commit is contained in:
Tim Nikischin 2025-04-19 14:44:45 +02:00 committed by GitHub
parent 56ab61c29c
commit e3c28fd0ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 81 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js Normal file
View File

@ -0,0 +1,11 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
padding-top: 20%;
width: 100%;
.send-icon {
color: ${(props) => props.theme.requestTabPanel.responseSendIcon};
}
`;
export default StyledWrapper;

18
packages/bruno-app/src/components/ResponsePane/SkippedRequest/index.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import { IconCircleOff } from '@tabler/icons';
import StyledWrapper from './StyledWrapper';
const SkippedRequest = () => {
return (
<StyledWrapper>
<div className="send-icon flex justify-center" style={{ fontSize: 200 }}>
<IconCircleOff size={150} strokeWidth={1} />
</div>
<div className="flex mt-4 justify-center" style={{ fontSize: 25 }}>
Request skipped
</div>
</StyledWrapper>
);
};
export default SkippedRequest;

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

@ -12,6 +12,10 @@ const StyledWrapper = styled.div`
.error-message {
color: ${(props) => props.theme.colors.text.muted};
}
.skipped-request {
color: ${(props) => props.theme.colors.text.muted};
}
`;
export default StyledWrapper;

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

@ -18,6 +18,7 @@ import ScriptErrorIcon from './ScriptErrorIcon';
import StyledWrapper from './StyledWrapper';
import ResponseSave from 'src/components/ResponsePane/ResponseSave';
import ResponseClear from 'src/components/ResponsePane/ResponseClear';
import SkippedRequest from './SkippedRequest';
import ClearTimeline from './ClearTimeline/index';
const ResponsePane = ({ rightPaneWidth, item, collection }) => {
@ -80,6 +81,14 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
}
};
if (item.response && item.status === 'skipped') {
return (
<StyledWrapper className="flex h-full relative">
<SkippedRequest />
</StyledWrapper>
);
}
if (isLoading && !item.response) {
return (
<StyledWrapper className="flex flex-col h-full relative">

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

@ -33,6 +33,10 @@ const StyledWrapper = styled.div`
.all-tests-passed {
color: ${(props) => props.theme.colors.text.green} !important;
}
.skipped-request {
color: ${(props) => props.theme.colors.text.muted};
}
`;
export default StyledWrapper;

9
packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
View File

@ -10,6 +10,7 @@ import ResponseSize from 'components/ResponsePane/ResponseSize';
import TestResults from 'components/ResponsePane/TestResults';
import TestResultsLabel from 'components/ResponsePane/TestResultsLabel';
import StyledWrapper from './StyledWrapper';
import SkippedRequest from 'components/ResponsePane/SkippedRequest';
import RunnerTimeline from 'components/ResponsePane/RunnerTimeline';
const ResponsePane = ({ rightPaneWidth, item, collection }) => {
@ -63,6 +64,14 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
});
};
if (item.status === 'skipped') {
return (
<StyledWrapper className="flex h-full relative">
<SkippedRequest />
</StyledWrapper>
);
}
return (
<StyledWrapper className="flex flex-col h-full relative">
<div className="flex items-center px-3 tabs" role="tablist">

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

@ -39,6 +39,10 @@ const Wrapper = styled.div`
color: ${(props) => props.theme.colors.text.muted};
}
}
.skipped-request {
color: ${(props) => props.theme.colors.text.muted};
}
`;
export default Wrapper;

32
packages/bruno-app/src/components/RunnerResults/index.jsx
View File

@ -5,7 +5,7 @@ import { get, cloneDeep } from 'lodash';
import { runCollectionFolder, cancelRunnerExecution } from 'providers/ReduxStore/slices/collections/actions';
import { resetCollectionRunner } from 'providers/ReduxStore/slices/collections';
import { findItemInCollection, getTotalRequestCountInCollection } from 'utils/collections';
import { IconRefresh, IconCircleCheck, IconCircleX, IconCheck, IconX, IconRun } from '@tabler/icons';
import { IconRefresh, IconCircleCheck, IconCircleX, IconCircleOff, IconCheck, IconX, IconRun } from '@tabler/icons';
import ResponsePane from './ResponsePane';
import StyledWrapper from './StyledWrapper';
import { areItemsLoading } from 'utils/collections';
@ -102,6 +102,9 @@ export default function RunnerResults({ collection }) {
return (item.status !== 'error' && item.testStatus === 'fail') || item.assertionStatus === 'fail';
});
const skippedRequests = items.filter((item) => {
return item.status === 'skipped';
});
let isCollectionLoading = areItemsLoading(collection);
if (!items || !items.length) {
@ -159,7 +162,8 @@ export default function RunnerResults({ collection }) {
ref={runnerBodyRef}
>
<div className="pb-2 font-medium test-summary">
Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}
Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}, Skipped:{' '}
{skippedRequests.length}
</div>
{runnerInfo?.statusText ?
<div className="pb-2 font-medium danger">
@ -172,14 +176,18 @@ export default function RunnerResults({ collection }) {
<div className="item-path mt-2">
<div className="flex items-center">
<span>
{item.status !== 'error' && item.testStatus === 'pass' && item.status !== 'skipped' ? (
{item.testStatus === 'pass' && item.assertionStatus === 'pass' ?
<IconCircleCheck className="test-success" size={20} strokeWidth={1.5} />
) : (
: null}
{item.status === 'skipped' ?
<IconCircleOff className="skipped-request" size={20} strokeWidth={1.5} />
:null}
{item.status === 'error' || item.testStatus === 'fail' || item.assertionStatus === 'fail' ?
<IconCircleX className="test-failure" size={20} strokeWidth={1.5} />
)}
:null}
</span>
<span
className={`mr-1 ml-2 ${item.status == 'error' || item.status == 'skipped' || item.testStatus == 'fail' ? 'danger' : ''}`}
className={`mr-1 ml-2 ${item.status == 'skipped' ? 'skipped-request' : item.status === 'error' || item.testStatus === 'fail' || item.assertionStatus === 'fail' ? 'danger' : ''}`}
>
{item.displayName}
</span>
@ -263,11 +271,15 @@ export default function RunnerResults({ collection }) {
<div className="flex items-center px-3 mb-4 font-medium">
<span className="mr-2">{selectedItem.displayName}</span>
<span>
{selectedItem.testStatus === 'pass' ? (
{selectedItem.testStatus === 'pass' && selectedItem.assertionStatus === 'pass' ?
<IconCircleCheck className="test-success" size={20} strokeWidth={1.5} />
) : (
<IconCircleX className="test-failure" size={20} strokeWidth={1.5} />
)}
: null}
{selectedItem.status === 'error' || selectedItem.testStatus === 'fail' || selectedItem.assertionStatus === 'fail' ?
<IconCircleX className="test-failure" size={20} strokeWidth={1.5} />
: null}
{selectedItem.status === 'skipped' ?
<IconCircleOff className="skipped-request" size={20} strokeWidth={1.5} />
: null}
</span>
</div>
<ResponsePane item={selectedItem} collection={collection} />