feat: interpolate environment vats while sending request

packages/bruno-app/src/components/Sidebar/index.js

@@ -104,7 +104,7 @@ const Sidebar = () => {
                 {/* Need to ut github stars link here */}
               </div>
               <div className='pl-1'>
-                <iframe src="https://ghbtns.com/github-btn.html?user=usebruno&repo=bruno&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20" title="GitHub"></iframe>   
+                <iframe src="https://ghbtns.com/github-btn.html?user=usebruno&repo=bruno&type=star&count=true" frameBorder="0" scrolling="0" width="100" height="20" title="GitHub"></iframe>   
               </div>
               <div className="flex flex-grow items-center justify-end text-xs mr-2">
                 v1.25.2

packages/bruno-app/src/pageComponents/Index/index.js

@@ -35,7 +35,9 @@ export default function Main() {
   const isDragging = useSelector((state) => state.app.isDragging);
   const showHomePage = useSelector((state) => state.app.showHomePage);
 
-  console.log(useSelector((state) => state.collections.collections));
+  // Todo: write a better logging flow that can be used to log by turning on debug flag
+  // Enable for debugging.
+  // console.log(useSelector((state) => state.collections.collections));
 
   const className = classnames({
     'is-dragging': isDragging

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

@@ -15,7 +15,8 @@ import {
   findParentItemInCollection,
   findEnvironmentInCollection,
   isItemAFolder,
-  refreshUidsInItem
+  refreshUidsInItem,
+  interpolateEnvironmentVars
 } from 'utils/collections';
 import { collectionSchema, itemSchema } from '@usebruno/schema';
 import { waitForNextTick } from 'utils/common';
@@ -213,26 +214,45 @@ export const saveRequest = (itemUid, collectionUid) => (dispatch, getState) => {
   });
 };
 
-export const sendRequest = (item, collectionUid) => (dispatch) => {
+export const sendRequest = (item, collectionUid) => (dispatch, getState) => {
+  const state = getState();
+  const collection = findCollectionByUid(state.collections.collections, collectionUid);
   const cancelTokenUid = uuid();
 
-  dispatch(requestSent({
-    itemUid: item.uid,
-    collectionUid: collectionUid,
-    cancelTokenUid: cancelTokenUid
-  }));
+  return new Promise((resolve, reject) => {
+    if(!collection) {
+      return reject(new Error('Collection not found'));
+    }
+  
+    dispatch(requestSent({
+      itemUid: item.uid,
+      collectionUid: collectionUid,
+      cancelTokenUid: cancelTokenUid
+    }));
+  
+    const itemCopy = cloneDeep(item);
+    const collectionCopy = cloneDeep(collection);
 
-  sendNetworkRequest(item, {cancelTokenUid: cancelTokenUid})
-    .then((response) => {
-      if(response && response.status !== -1) {
-        return dispatch(responseReceived({
-          itemUid: item.uid,
-          collectionUid: collectionUid,
-          response: response
-        }));
-      }
-    })
-    .catch((err) => console.log(err));
+    if(collection.activeEnvironmentUid) {
+      const environment = findEnvironmentInCollection(collectionCopy, collection.activeEnvironmentUid);
+      if(environment) {
+        interpolateEnvironmentVars(itemCopy, environment.variables)
+      }      
+    }
+  
+    sendNetworkRequest(itemCopy, {cancelTokenUid: cancelTokenUid})
+      .then((response) => {
+        if(response && response.status !== -1) {
+          return dispatch(responseReceived({
+            itemUid: item.uid,
+            collectionUid: collectionUid,
+            response: response
+          }));
+        }
+      })
+      .then(resolve)
+      .catch(reject);
+  });
 };
 
 export const cancelRequest = (cancelTokenUid, item, collection) => (dispatch) => {

packages/bruno-app/src/utils/collections/index.js

@@ -1,3 +1,4 @@
+import template from 'lodash/template';
 import get from 'lodash/get';
 import each from 'lodash/each';
 import find from 'lodash/find';
@@ -352,3 +353,54 @@ export const refreshUidsInItem = (item) => {
 export const isLocalCollection = (collection) => {
   return collection.pathname ? true : false;
 };
+
+export const interpolateEnvironmentVars = (item, variables) => {
+  const envVars = {};
+  const { request } = item;
+  each(variables, (variable) => {
+    envVars[variable.name] = variable.value;
+  });
+
+  const templateOpts = {
+    interpolate: /{{([\s\S]+?)}}/g, //interpolate content using markers `{{}}`
+    evaluate: null, // prevent any js evaluation
+    escape: null, // disable any escaping
+  };
+
+  const interpolate = (str) => template(str, templateOpts)(envVars);
+
+  request.url = interpolate(request.url);
+
+  each(request.headers, (header) => {
+    header.value = interpolate(header.value);
+  });
+  each(request.params, (param) => {
+    param.value = interpolate(param.value);
+  });
+
+  // Todo: Make interpolation work with body mode json
+  switch(request.body.mode) {
+    case 'text': {
+      request.body.text = interpolate(request.body.text);
+      break;
+    }
+    case 'xml': {
+      request.body.text = interpolate(request.body.text);
+      break;
+    }
+    case 'multipartForm': {
+      each(request.body.multipartForm, (param) => {
+        param.value = interpolate(param.value);
+      });
+      break;
+    }
+    case 'formUrlEncoded': {
+      each(request.body.formUrlEncoded, (param) => {
+        param.value = interpolate(param.value);
+      });
+      break;
+    }
+  }
+
+  return request;
+};