Add tag filtering to folder run window

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import { uuid } from 'utils/common';
 import Modal from 'components/Modal';
@@ -8,12 +8,15 @@ import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/act
 import { flattenItems } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import { areItemsLoading } from 'utils/collections';
+import TagList from 'components/RequestPane/Tags/TagList/TagList';
 
 const RunCollectionItem = ({ collectionUid, item, onClose }) => {
   const dispatch = useDispatch();
 
   const collection = useSelector(state => state.collections.collections?.find(c => c.uid === collectionUid));
   const isCollectionRunInProgress = collection?.runnerResult?.info?.status && (collection?.runnerResult?.info?.status !== 'ended');
+  const [tags, setTags] = useState({ include: [], exclude: [] });
+  const [tagsEnabled, setTagsEnabled] = useState(false);
 
   const onSubmit = (recursive) => {
     dispatch(
@@ -24,7 +27,7 @@ const RunCollectionItem = ({ collectionUid, item, onClose }) => {
       })
     );
     if (!isCollectionRunInProgress) {
-      dispatch(runCollectionFolder(collection.uid, item ? item.uid : null, recursive));
+      dispatch(runCollectionFolder(collection.uid, item ? item.uid : null, recursive, 0, tagsEnabled && tags));
     }
     onClose();
   };
@@ -71,6 +74,39 @@ const RunCollectionItem = ({ collectionUid, item, onClose }) => {
             <div className={isFolderLoading ? "mb-2" : "mb-8"}>This will run all the requests in this folder and all its subfolders.</div>
             {isFolderLoading ? <div className='mb-8 warning'>Requests in this folder are still loading.</div> : null}
             {isCollectionRunInProgress ? <div className='mb-6 warning'>A Collection Run is already in progress.</div> : null}
+
+            <div className="mb-8 flex flex-col">
+              <div className="flex gap-2">
+                <label className="block font-medium">Filter requests with tags</label>
+                <input
+                  className="cursor-pointer"
+                  type="checkbox"
+                  checked={tagsEnabled}
+                  onChange={() => setTagsEnabled(!tagsEnabled)}
+                />
+              </div>
+              {tagsEnabled && (
+                <div className="flex p-4 gap-4 max-w-xl justify-between">
+                  <div className="w-1/2">
+                    <span>Included tags:</span>
+                    <TagList
+                      tags={tags.include}
+                      onTagAdd={(tag) => setTags({ ...tags, include: [...tags.include, tag] })}
+                      onTagRemove={(tag) => setTags({ ...tags, include: tags.include.filter((t) => t !== tag) })}
+                    />
+                  </div>
+                  <div className="w-1/2">
+                    <span>Excluded tags:</span>
+                    <TagList
+                      tags={tags.exclude}
+                      onTagAdd={(tag) => setTags({ ...tags, exclude: [...tags.exclude, tag] })}
+                      onTagRemove={(tag) => setTags({ ...tags, exclude: tags.exclude.filter((t) => t !== tag) })}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+
             <div className="flex justify-end bruno-modal-footer">
               <span className="mr-3">
                 <button type="button" onClick={onClose} className="btn btn-md btn-close">