From fee3416c85da5a0d2f52973b8b2c3ac40b78eb3c Mon Sep 17 00:00:00 2001 From: lohit Date: Mon, 19 Feb 2024 17:29:24 +0530 Subject: [PATCH] feat(#1575) - auto scroll runner output body during collection run (#1588) --- .../src/components/RunnerResults/index.jsx | 36 +++++++++++-------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/bruno-app/src/components/RunnerResults/index.jsx b/packages/bruno-app/src/components/RunnerResults/index.jsx index a156b3e73f..e5e46b3daf 100644 --- a/packages/bruno-app/src/components/RunnerResults/index.jsx +++ b/packages/bruno-app/src/components/RunnerResults/index.jsx @@ -22,13 +22,23 @@ const getRelativePath = (fullPath, pathname) => { export default function RunnerResults({ collection }) { const dispatch = useDispatch(); - const listWrapperRef = useRef(); const [selectedItem, setSelectedItem] = useState(null); + // ref for the runner output body + const runnerBodyRef = useRef(); + + const autoScrollRunnerBody = () => { + if (runnerBodyRef?.current) { + // mimicks the native terminal scroll style + runnerBodyRef.current.scrollTo(0, 100000); + } + }; + useEffect(() => { if (!collection.runnerResult) { setSelectedItem(null); } + autoScrollRunnerBody(); }, [collection, setSelectedItem]); const collectionCopy = cloneDeep(collection); @@ -67,11 +77,6 @@ export default function RunnerResults({ collection }) { }) .filter(Boolean); - useEffect(() => { - if (listWrapperRef.current) { - listWrapperRef.current.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' }); - } - }, [items]); const runCollection = () => { dispatch(runCollectionFolder(collection.uid, null, true)); }; @@ -102,12 +107,11 @@ export default function RunnerResults({ collection }) { if (!items || !items.length) { return ( - +
Runner
-
You have {totalRequestsInCollection} requests in this collection.
@@ -124,21 +128,25 @@ export default function RunnerResults({ collection }) { } return ( - -
-
+ +
+
Runner
{runnerInfo.status !== 'ended' && runnerInfo.cancelTokenUid && ( - )}
-
+
-
+
Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}
{items.map((item) => {