allow environment variables in request body. (#1942)

* feat: allow environment variables in request body

* chore(ui): minor ui improvements

* chore(deps): bump

* fix: track env vars changes

* feat: allow environment variables in request body

* refactor: better implementation

Co-authored-by: liyasthomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -461,7 +461,8 @@ export default defineComponent({
       return "choose an environment"
     },
     getEnvValue(value) {
-      if (value) return value
+      if (value) return value.replace(/"/g, """)
+      // it does not filter special characters before adding them to HTML.
       return "not found"
     },
   },

packages/hoppscotch-app/helpers/templating.ts

@@ -1,6 +1,16 @@
 import { Environment } from "~/newstore/environments"
 
-export default function parseTemplateString(
+export function parseBodyEnvVariables(
+  body: string,
+  env: Environment["variables"]
+) {
+  return body.replace(/<<\w+>>/g, (key) => {
+    const found = env.find((envVar) => envVar.key === key.replace(/[<>]/g, ""))
+    return found ? found.value : key
+  })
+}
+
+export function parseTemplateString(
   str: string,
   variables: Environment["variables"]
 ) {

packages/hoppscotch-app/helpers/utils/EffectiveURL.ts

@@ -1,7 +1,7 @@
 import { combineLatest, Observable } from "rxjs"
 import { map } from "rxjs/operators"
 import { FormDataKeyValue, HoppRESTRequest } from "../types/HoppRESTRequest"
-import parseTemplateString from "../templating"
+import { parseTemplateString, parseBodyEnvVariables } from "../templating"
 import { Environment, getGlobalVariables } from "~/newstore/environments"
 
 export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
@@ -46,7 +46,7 @@ function getFinalBodyFromRequest(
       })
 
     return formData
-  } else return request.body.body
+  } else return parseBodyEnvVariables(request.body.body, env.variables)
 }
 
 /**