Added warning msg when variables detect infinite expansion (WIP)

packages/hoppscotch-app/components/http/Variables.vue

@@ -1,5 +1,11 @@
 <template>
   <div>
+    <div
+      v-if="envExpandError"
+      class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
+    >
+      {{ nestedVars }}
+    </div>
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
@@ -109,14 +115,15 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref, watch } from "@nuxtjs/composition-api"
+import { computed, Ref, ref, watch } from "@nuxtjs/composition-api"
 import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
-import { HoppRESTVar } from "@hoppscotch/data"
+import { HoppRESTVar, parseMyVariablesString } from "@hoppscotch/data"
 import draggable from "vuedraggable"
 import cloneDeep from "lodash/cloneDeep"
 import isEqual from "lodash/isEqual"
+import * as E from "fp-ts/Either"
 import { useI18n, useStream, useToast } from "~/helpers/utils/composables"
 import { throwError } from "~/helpers/functional/error"
 import { restVars$, setRESTVars } from "~/newstore/RESTSession"
@@ -126,6 +133,7 @@ const t = useI18n()
 const toast = useToast()
 
 const emptyVars: string = "Add a new variable"
+const nestedVars: string = "nested variables greater than 10 levels"
 
 const idTicker = ref(0)
 
@@ -241,6 +249,24 @@ const deleteVar = (index: number) => {
   )
 }
 
+const envExpandError = computed(() => {
+  const variables = pipe(vars.value)
+
+  console.log(
+    pipe(
+      variables,
+      A.exists(({ value }) =>
+        E.isLeft(parseMyVariablesString(value, variables))
+      )
+    )
+  )
+
+  return pipe(
+    variables,
+    A.exists(({ value }) => E.isLeft(parseMyVariablesString(value, variables)))
+  )
+})
+
 const clearContent = () => {
   // set params list to the initial state
   workingVars.value = [

packages/hoppscotch-data/src/environment.ts

@@ -110,3 +110,26 @@ export const parseTemplateString = (
     parseTemplateStringE(str, variables, myVariables),
     E.getOrElse(() => str)
   )
+
+export function parseMyVariablesString(
+  str: string,
+  variables: Variables,
+) {
+
+  if (!variables || !str) {
+    return E.right(str)
+  }
+
+  let result = str
+  let depthVar = 0
+
+  while (result.match(REGEX_MY_VAR) != null && depthVar <= ENV_MAX_EXPAND_LIMIT) {
+    result = decodeURI(encodeURI(result)).replace(
+      REGEX_MY_VAR,
+      (_, p1) => variables.find((x) => x.key === p1)?.value || ""
+    )
+    depthVar++
+  }
+
+  return depthVar <= ENV_MAX_EXPAND_LIMIT ? E.right(result) : E.left(ENV_EXPAND_LOOP);
+}