feat: added runner delay (#2218)

* feat: added runner delay

* fix: check if delay is greater than 0

* fix: input type number and added missing onclick

packages/bruno-app/src/components/RunnerResults/StyledWrapper.js

@@ -1,6 +1,19 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
+  .textbox {
+    border: 1px solid #ccc;
+    padding: 0.2rem 0.5rem;
+    box-shadow: none;
+    border-radius: 0px;
+    outline: none;
+    box-shadow: none;
+    transition: border-color ease-in-out 0.1s;
+    border-radius: 3px;
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+  }
+
   .item-path {
     .link {
       color: ${(props) => props.theme.textLink};

packages/bruno-app/src/components/RunnerResults/index.jsx

@@ -23,6 +23,7 @@ const getRelativePath = (fullPath, pathname) => {
 export default function RunnerResults({ collection }) {
   const dispatch = useDispatch();
   const [selectedItem, setSelectedItem] = useState(null);
+  const [delay, setDelay] = useState(null);
 
   // ref for the runner output body
   const runnerBodyRef = useRef();
@@ -78,11 +79,11 @@ export default function RunnerResults({ collection }) {
     .filter(Boolean);
 
   const runCollection = () => {
-    dispatch(runCollectionFolder(collection.uid, null, true));
+    dispatch(runCollectionFolder(collection.uid, null, true, Number(delay)));
   };
 
   const runAgain = () => {
-    dispatch(runCollectionFolder(collection.uid, runnerInfo.folderUid, runnerInfo.isRecursive));
+    dispatch(runCollectionFolder(collection.uid, runnerInfo.folderUid, runnerInfo.isRecursive, Number(delay)));
   };
 
   const resetRunner = () => {
@@ -116,6 +117,20 @@ export default function RunnerResults({ collection }) {
           You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
         </div>
 
+        <div className="mt-6">
+          <label>Delay (in ms)</label>
+          <input
+            type="number"
+            className="block textbox mt-2 py-5"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            value={delay}
+            onChange={(e) => setDelay(e.target.value)}
+          />
+        </div>
+
         <button type="submit" className="submit btn btn-sm btn-secondary mt-6" onClick={runCollection}>
           Run Collection
         </button>
@@ -167,10 +182,14 @@ export default function RunnerResults({ collection }) {
                     </span>
                     {item.status !== 'error' && item.status !== 'completed' ? (
                       <IconRefresh className="animate-spin ml-1" size={18} strokeWidth={1.5} />
-                    ) : (
+                    ) : item.responseReceived?.status ? (
                       <span className="text-xs link cursor-pointer" onClick={() => setSelectedItem(item)}>
-                        (<span className="mr-1">{get(item.responseReceived, 'status')}</span>
-                        <span>{get(item.responseReceived, 'statusText')}</span>)
+                        (<span className="mr-1">{item.responseReceived?.status}</span>
+                        <span>{item.responseReceived?.statusText}</span>)
+                      </span>
+                    ) : (
+                      <span className="danger text-xs cursor-pointer" onClick={() => setSelectedItem(item)}>
+                        (request failed)
                       </span>
                     )}
                   </div>

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -281,7 +281,7 @@ export const cancelRunnerExecution = (cancelTokenUid) => (dispatch) => {
   cancelNetworkRequest(cancelTokenUid).catch((err) => console.log(err));
 };
 
-export const runCollectionFolder = (collectionUid, folderUid, recursive) => (dispatch, getState) => {
+export const runCollectionFolder = (collectionUid, folderUid, recursive, delay) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);
 
@@ -312,7 +312,8 @@ export const runCollectionFolder = (collectionUid, folderUid, recursive) => (dis
         collectionCopy,
         environment,
         collectionCopy.runtimeVariables,
-        recursive
+        recursive,
+        delay
       )
       .then(resolve)
       .catch((err) => {

packages/bruno-electron/src/ipc/network/index.js

@@ -825,7 +825,7 @@ const registerNetworkIpc = (mainWindow) => {
 
   ipcMain.handle(
     'renderer:run-collection-folder',
-    async (event, folder, collection, environment, runtimeVariables, recursive) => {
+    async (event, folder, collection, environment, runtimeVariables, recursive, delay) => {
       const collectionUid = collection.uid;
       const collectionPath = collection.pathname;
       const folderUid = folder ? folder.uid : null;
@@ -944,6 +944,18 @@ const registerNetworkIpc = (mainWindow) => {
             timeStart = Date.now();
             let response, responseTime;
             try {
+              if (delay && !Number.isNaN(delay) && delay > 0) {
+                const delayPromise = new Promise((resolve) => setTimeout(resolve, delay));
+
+                const cancellationPromise = new Promise((_, reject) => {
+                  abortController.signal.addEventListener('abort', () => {
+                    reject(new Error('Cancelled'));
+                  });
+                });
+
+                await Promise.race([delayPromise, cancellationPromise]);
+              }
+
               /** @type {import('axios').AxiosResponse} */
               response = await axiosInstance(request);
               timeEnd = Date.now();