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

* Fix | properl calculates the request number for folder run

* Chore|formatted document

---------

Co-authored-by: Anusree Subash <[email protected]>

Author: anusreesubash

Diff for: 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>
   );