From e3c28fd0ec62443bf69a64d73dac92665661f18b Mon Sep 17 00:00:00 2001 From: Tim Nikischin <49103409+nikischin@users.noreply.github.com> Date: Sat, 19 Apr 2025 14:44:45 +0200 Subject: [PATCH] feat: style skipped requests in runner and show skipped count (#3853) Mostly taken from @JorgeTrovisco 's implementation #2397 Co-authored-by: Anoop M D --- .../SkippedRequest/StyledWrapper.js | 11 +++++++ .../ResponsePane/SkippedRequest/index.js | 18 +++++++++++ .../ResponsePane/TestResults/StyledWrapper.js | 4 +++ .../src/components/ResponsePane/index.js | 9 ++++++ .../ResponsePane/StyledWrapper.js | 4 +++ .../RunnerResults/ResponsePane/index.js | 9 ++++++ .../components/RunnerResults/StyledWrapper.js | 4 +++ .../src/components/RunnerResults/index.jsx | 32 +++++++++++++------ 8 files changed, 81 insertions(+), 10 deletions(-) create mode 100644 packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js create mode 100644 packages/bruno-app/src/components/ResponsePane/SkippedRequest/index.js diff --git a/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js new file mode 100644 index 000000000..a7049ad6b --- /dev/null +++ b/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js @@ -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; \ No newline at end of file diff --git a/packages/bruno-app/src/components/ResponsePane/SkippedRequest/index.js b/packages/bruno-app/src/components/ResponsePane/SkippedRequest/index.js new file mode 100644 index 000000000..684dc3c37 --- /dev/null +++ b/packages/bruno-app/src/components/ResponsePane/SkippedRequest/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { IconCircleOff } from '@tabler/icons'; +import StyledWrapper from './StyledWrapper'; + +const SkippedRequest = () => { + return ( + +
+ +
+
+ Request skipped +
+ + ); +}; + +export default SkippedRequest; \ No newline at end of file diff --git a/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js index 13fa41142..001b4dc29 100644 --- a/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js index 454c2926c..ebacf05c5 100644 --- a/packages/bruno-app/src/components/ResponsePane/index.js +++ b/packages/bruno-app/src/components/ResponsePane/index.js @@ -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 ( + + + + ); + } + if (isLoading && !item.response) { return ( diff --git a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js index 0b49d66ca..aa91e576c 100644 --- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js +++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js index 0cd2e986e..5591dbfea 100644 --- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js +++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js @@ -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 ( + + + + ); + } + return (
diff --git a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js index 38dd7511e..b3fbaaebd 100644 --- a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js +++ b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/components/RunnerResults/index.jsx b/packages/bruno-app/src/components/RunnerResults/index.jsx index 9e23780e9..cfe3c0f1a 100644 --- a/packages/bruno-app/src/components/RunnerResults/index.jsx +++ b/packages/bruno-app/src/components/RunnerResults/index.jsx @@ -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} >
- Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length} + Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}, Skipped:{' '} + {skippedRequests.length}
{runnerInfo?.statusText ?
@@ -172,14 +176,18 @@ export default function RunnerResults({ collection }) {
- {item.status !== 'error' && item.testStatus === 'pass' && item.status !== 'skipped' ? ( + {item.testStatus === 'pass' && item.assertionStatus === 'pass' ? - ) : ( + : null} + {item.status === 'skipped' ? + + :null} + {item.status === 'error' || item.testStatus === 'fail' || item.assertionStatus === 'fail' ? - )} + :null} {item.displayName} @@ -263,11 +271,15 @@ export default function RunnerResults({ collection }) {
{selectedItem.displayName} - {selectedItem.testStatus === 'pass' ? ( + {selectedItem.testStatus === 'pass' && selectedItem.assertionStatus === 'pass' ? - ) : ( - - )} + : null} + {selectedItem.status === 'error' || selectedItem.testStatus === 'fail' || selectedItem.assertionStatus === 'fail' ? + + : null} + {selectedItem.status === 'skipped' ? + + : null}