extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-04-04 12:31:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(#1575) - auto scroll runner output body during collection run (#1588)

Browse Source
This commit is contained in:
lohit 2024-02-19 17:29:24 +05:30 committed by GitHub
parent bd002ca316
commit fee3416c85
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,13 +22,23 @@ const getRelativePath = (fullPath, pathname) => {
export default function RunnerResults({ collection }) { export default function RunnerResults({ collection }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const listWrapperRef = useRef();
const [selectedItem, setSelectedItem] = useState(null); 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(() => { useEffect(() => {
if (!collection.runnerResult) { if (!collection.runnerResult) {
setSelectedItem(null); setSelectedItem(null);
} }
autoScrollRunnerBody();
}, [collection, setSelectedItem]); }, [collection, setSelectedItem]);
const collectionCopy = cloneDeep(collection); const collectionCopy = cloneDeep(collection);
@ -67,11 +77,6 @@ export default function RunnerResults({ collection }) {
}) })
.filter(Boolean); .filter(Boolean);
useEffect(() => {
if (listWrapperRef.current) {
listWrapperRef.current.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
}
}, [items]);
const runCollection = () => { const runCollection = () => {
dispatch(runCollectionFolder(collection.uid, null, true)); dispatch(runCollectionFolder(collection.uid, null, true));
}; };
@ -102,12 +107,11 @@ export default function RunnerResults({ collection }) {
if (!items || !items.length) { if (!items || !items.length) {
return ( return (
<StyledWrapper className="px-4"> <StyledWrapper className="px-4 pb-4">
<div className="font-medium mt-6 title flex items-center"> <div className="font-medium mt-6 title flex items-center">
Runner Runner
<IconRun size={20} strokeWidth={1.5} className="ml-2" /> <IconRun size={20} strokeWidth={1.5} className="ml-2" />
</div> </div>
<div className="mt-6"> <div className="mt-6">
You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection. You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
</div> </div>
@ -124,21 +128,25 @@ export default function RunnerResults({ collection }) {
} }
return ( return (
<StyledWrapper ref={listWrapperRef} className="px-4 pb-4 flex flex-grow flex-col relative"> <StyledWrapper className="px-4 pb-4 flex flex-grow flex-col relative">
<div className="flex flex-row mt-6 mb-4"> <div className="flex flex-row">
<div className="font-medium title flex items-center"> <div className="font-medium my-6 title flex items-center">
Runner Runner
<IconRun size={20} strokeWidth={1.5} className="ml-2" /> <IconRun size={20} strokeWidth={1.5} className="ml-2" />
</div> </div>
{runnerInfo.status !== 'ended' && runnerInfo.cancelTokenUid && ( {runnerInfo.status !== 'ended' && runnerInfo.cancelTokenUid && (
<button className="btn ml-6 btn-sm btn-danger" onClick={cancelExecution}> <button className="btn ml-6 my-4 btn-sm btn-danger" onClick={cancelExecution}>
Cancel Execution Cancel Execution
</button> </button>
)} )}
</div> </div>
<div className="flex flex-1"> <div
className="flex flex-col overflow-y-auto"
ref={runnerBodyRef}
style={{ height: 'calc(100vh - 12rem)', maxHeight: 'calc(100vh - 12rem)' }}
>
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<div className="py-2 font-medium test-summary"> <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}
</div> </div>
{items.map((item) => { {items.map((item) => {