Improved Request Count Calculation and UI Handling in RunCollectionIt…

…em (#2959)

* Fix | properl calculates the request number for folder run

* Chore|formatted document

---------

Co-authored-by: Anusree Subash <anusree@usebruno.com>

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js

@@ -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>
  );