Improved Request Count Calculation and UI Handling in RunCollectionItem (#2959)

* Fix | properl calculates the request number for folder run

* Chore|formatted document

---------

Co-authored-by: Anusree Subash <anusree@usebruno.com>
This commit is contained in:
anusreesubash 2024-09-16 00:33:15 +05:30 committed by GitHub
parent f31c997fed
commit 721d0e1e49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -23,43 +23,53 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
onClose();
};
const runLength = item ? get(item, 'items.length', 0) : get(collection, 'items.length', 0);
const items = flattenItems(item ? item.items : collection.items);
const requestItems = items.filter((item) => item.type !== 'folder');
const recursiveRunLength = requestItems.length;
const getRequestsCount = (items) => {
const requestTypes = ['http-request', 'graphql-request']
return items.filter(req => requestTypes.includes(req.type)).length;
}
const runLength = item ? getRequestsCount(item.items) : get(collection, 'items.length', 0);
const flattenedItems = flattenItems(item ? item.items : collection.items);
const recursiveRunLength = getRequestsCount(flattenedItems);
return (
<StyledWrapper>
<Modal size="md" title="Collection Runner" hideFooter={true} handleCancel={onClose}>
<div className="mb-1">
<span className="font-medium">Run</span>
<span className="ml-1 text-xs">({runLength} requests)</span>
</div>
<div className="mb-8">This will only run the requests in this folder.</div>
{!runLength && !recursiveRunLength ? (
<div className="mb-8">No request found in this folder.</div>
) : (
<div>
<div className="mb-1">
<span className="font-medium">Run</span>
<span className="ml-1 text-xs">({runLength} requests)</span>
</div>
<div className="mb-8">This will only run the requests in this folder.</div>
<div className="mb-1">
<span className="font-medium">Recursive Run</span>
<span className="ml-1 text-xs">({recursiveRunLength} requests)</span>
</div>
<div className="mb-8">This will run all the requests in this folder and all its subfolders.</div>
<div className="mb-1">
<span className="font-medium">Recursive Run</span>
<span className="ml-1 text-xs">({recursiveRunLength} requests)</span>
</div>
<div className="mb-8">This will run all the requests in this folder and all its subfolders.</div>
<div className="flex justify-end bruno-modal-footer">
<span className="mr-3">
<button type="button" onClick={onClose} className="btn btn-md btn-close">
Cancel
</button>
</span>
<span>
<button type="submit" className="submit btn btn-md btn-secondary mr-3" onClick={() => onSubmit(true)}>
Recursive Run
</button>
</span>
<span>
<button type="submit" className="submit btn btn-md btn-secondary" onClick={() => onSubmit(false)}>
Run
</button>
</span>
</div>
<div className="flex justify-end bruno-modal-footer">
<span className="mr-3">
<button type="button" onClick={onClose} className="btn btn-md btn-close">
Cancel
</button>
</span>
<span>
<button type="submit" disabled={!recursiveRunLength} className="submit btn btn-md btn-secondary mr-3" onClick={() => onSubmit(true)}>
Recursive Run
</button>
</span>
<span>
<button type="submit" disabled={!runLength} className="submit btn btn-md btn-secondary" onClick={() => onSubmit(false)}>
Run
</button>
</span>
</div>
</div>
)}
</Modal>
</StyledWrapper>
);