From d7cdeb796ae472874dabe7946c0996f20dd7b2ac Mon Sep 17 00:00:00 2001
From: James George <jamesgeorge998001@gmail.com>
Date: Fri, 2 Feb 2024 15:32:06 +0530
Subject: [PATCH 01/25] chore(common): analytics on spotlight (#3727)

Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>
---
 .../src/components/app/Header.vue             |   2 +-
 .../src/components/app/spotlight/index.vue    |  46 +++++---
 .../src/components/history/index.vue          |   3 +-
 .../src/components/http/Request.vue           |  25 +----
 .../hoppscotch-common/src/helpers/actions.ts  |  66 +++++++----
 .../src/helpers/keybindings.ts                |   6 +-
 .../hoppscotch-common/src/layouts/default.vue |  22 +++-
 .../src/platform/analytics.ts                 |  12 ++
 .../spotlight/__tests__/index.spec.ts         | 106 ++++++++++++++++--
 .../src/services/spotlight/index.ts           |  55 ++++++++-
 10 files changed, 267 insertions(+), 76 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue
index 58301f18d..280ae805e 100644
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -23,7 +23,7 @@
       <div class="col-span-1 flex items-center justify-between space-x-2">
         <button
           class="flex h-full flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
-          @click="invokeAction('modals.search.toggle')"
+          @click="invokeAction('modals.search.toggle', undefined, 'mouseclick')"
         >
           <span class="inline-flex flex-1 items-center">
             <icon-lucide-search class="svg-icons mr-2" />
diff --git a/packages/hoppscotch-common/src/components/app/spotlight/index.vue b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
index f61d20a3e..5081bfad1 100644
--- a/packages/hoppscotch-common/src/components/app/spotlight/index.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
@@ -3,7 +3,7 @@
     v-if="show"
     styles="sm:max-w-lg"
     full-width
-    @close="emit('hide-modal')"
+    @close="closeSpotlightModal"
   >
     <template #body>
       <div class="flex flex-col border-b border-divider transition">
@@ -86,35 +86,36 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue"
-import { useService } from "dioc/vue"
 import { useI18n } from "@composables/i18n"
+import { useService } from "dioc/vue"
+import { isEqual } from "lodash-es"
+import { computed, ref, watch } from "vue"
+import { platform } from "~/platform"
+import { HoppSpotlightSessionEventData } from "~/platform/analytics"
 import {
-  SpotlightService,
   SpotlightSearchState,
   SpotlightSearcherResult,
+  SpotlightService,
 } from "~/services/spotlight"
-import { isEqual } from "lodash-es"
-import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/history.searcher"
-import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
-import { NavigationSpotlightSearcherService } from "~/services/spotlight/searchers/navigation.searcher"
-import { SettingsSpotlightSearcherService } from "~/services/spotlight/searchers/settings.searcher"
 import { CollectionsSpotlightSearcherService } from "~/services/spotlight/searchers/collections.searcher"
-import { MiscellaneousSpotlightSearcherService } from "~/services/spotlight/searchers/miscellaneous.searcher"
-import { TabSpotlightSearcherService } from "~/services/spotlight/searchers/tab.searcher"
-import { GeneralSpotlightSearcherService } from "~/services/spotlight/searchers/general.searcher"
-import { ResponseSpotlightSearcherService } from "~/services/spotlight/searchers/response.searcher"
-import { RequestSpotlightSearcherService } from "~/services/spotlight/searchers/request.searcher"
 import {
   EnvironmentsSpotlightSearcherService,
   SwitchEnvSpotlightSearcherService,
 } from "~/services/spotlight/searchers/environment.searcher"
+import { GeneralSpotlightSearcherService } from "~/services/spotlight/searchers/general.searcher"
+import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/history.searcher"
+import { InterceptorSpotlightSearcherService } from "~/services/spotlight/searchers/interceptor.searcher"
+import { MiscellaneousSpotlightSearcherService } from "~/services/spotlight/searchers/miscellaneous.searcher"
+import { NavigationSpotlightSearcherService } from "~/services/spotlight/searchers/navigation.searcher"
+import { RequestSpotlightSearcherService } from "~/services/spotlight/searchers/request.searcher"
+import { ResponseSpotlightSearcherService } from "~/services/spotlight/searchers/response.searcher"
+import { SettingsSpotlightSearcherService } from "~/services/spotlight/searchers/settings.searcher"
+import { TabSpotlightSearcherService } from "~/services/spotlight/searchers/tab.searcher"
+import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
 import {
   SwitchWorkspaceSpotlightSearcherService,
   WorkspaceSpotlightSearcherService,
 } from "~/services/spotlight/searchers/workspace.searcher"
-import { InterceptorSpotlightSearcherService } from "~/services/spotlight/searchers/interceptor.searcher"
-import { platform } from "~/platform"
 
 const t = useI18n()
 
@@ -290,4 +291,17 @@ function newUseArrowKeysForNavigation() {
 
   return { selectedEntry }
 }
+
+function closeSpotlightModal() {
+  const analyticsData: HoppSpotlightSessionEventData = {
+    action: "close",
+    searcherID: null,
+    rank: null,
+  }
+
+  // Sets the action indicating `close` and rank as `null` in the state for analytics event logging
+  spotlightService.setAnalyticsData(analyticsData)
+
+  emit("hide-modal")
+}
 </script>
diff --git a/packages/hoppscotch-common/src/components/history/index.vue b/packages/hoppscotch-common/src/components/history/index.vue
index 112fb5932..2c5d5b318 100644
--- a/packages/hoppscotch-common/src/components/history/index.vue
+++ b/packages/hoppscotch-common/src/components/history/index.vue
@@ -331,7 +331,8 @@ const deleteHistory = (entry: HistoryEntry) => {
 const addToCollection = (entry: HistoryEntry) => {
   if (props.page === "rest") {
     invokeAction("request.save-as", {
-      request: entry.request,
+      requestType: "rest",
+      request: entry.request as HoppRESTRequest,
     })
   }
 }
diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue
index 74a584fc3..f92b5631d 100644
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -255,7 +255,7 @@ import IconShare2 from "~icons/lucide/share-2"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
 import { platform } from "~/platform"
-import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
+import { HoppRESTRequest } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
 import { InspectionService } from "~/services/inspection"
 import { InterceptorService } from "~/services/interceptor.service"
@@ -577,25 +577,12 @@ defineActionHandler("request.share-request", shareRequest)
 defineActionHandler("request.method.next", cycleDownMethod)
 defineActionHandler("request.method.prev", cycleUpMethod)
 defineActionHandler("request.save", saveRequest)
-defineActionHandler(
-  "request.save-as",
-  (
-    req:
-      | {
-          requestType: "rest"
-          request: HoppRESTRequest
-        }
-      | {
-          requestType: "gql"
-          request: HoppGQLRequest
-        }
-  ) => {
-    showSaveRequestModal.value = true
-    if (req && req.requestType === "rest") {
-      request.value = req.request
-    }
+defineActionHandler("request.save-as", (req) => {
+  showSaveRequestModal.value = true
+  if (req?.requestType === "rest") {
+    request.value = req.request
   }
-)
+})
 defineActionHandler("request.method.get", () => updateMethod("GET"))
 defineActionHandler("request.method.post", () => updateMethod("POST"))
 defineActionHandler("request.method.put", () => updateMethod("PUT"))
diff --git a/packages/hoppscotch-common/src/helpers/actions.ts b/packages/hoppscotch-common/src/helpers/actions.ts
index 684f568ae..05fd1909b 100644
--- a/packages/hoppscotch-common/src/helpers/actions.ts
+++ b/packages/hoppscotch-common/src/helpers/actions.ts
@@ -66,6 +66,13 @@ export type HoppAction =
   | "user.login" // Login to Hoppscotch
   | "user.logout" // Log out of Hoppscotch
   | "editor.format" // Format editor content
+  | "modals.team.delete" // Delete team
+  | "workspace.switch" // Switch workspace
+  | "rest.request.open" // Open REST request
+  | "request.open-tab" // Open REST request
+  | "share.request" // Share REST request
+  | "tab.duplicate-tab" // Duplicate REST request
+  | "gql.request.open" // Open GraphQL request
 
 /**
  * Defines the arguments, if present for a given type that is required to be passed on
@@ -112,6 +119,7 @@ type HoppActionArgsMap = {
         requestType: "gql"
         request: HoppGQLRequest
       }
+    | undefined
   "request.open-tab": {
     tab: RESTOptionTabs | GQLOptionTabs
   }
@@ -121,7 +129,6 @@ type HoppActionArgsMap = {
   "tab.duplicate-tab": {
     tabID?: string
   }
-
   "gql.request.open": {
     request: HoppGQLRequest
     saveContext?: HoppGQLSaveContext
@@ -132,11 +139,23 @@ type HoppActionArgsMap = {
   }
 }
 
+type KeysWithValueUndefined<T> = {
+  [K in keyof T]: undefined extends T[K] ? K : never
+}[keyof T]
+
 /**
  * HoppActions which require arguments for their invocation
  */
 export type HoppActionWithArgs = keyof HoppActionArgsMap
 
+/**
+ * HoppActions which optionally takes in arguments for their invocation
+ */
+
+export type HoppActionWithOptionalArgs =
+  | HoppActionWithNoArgs
+  | KeysWithValueUndefined<HoppActionArgsMap>
+
 /**
  * HoppActions which do not require arguments for their invocation
  */
@@ -145,27 +164,26 @@ export type HoppActionWithNoArgs = Exclude<HoppAction, HoppActionWithArgs>
 /**
  * Resolves the argument type for a given HoppAction
  */
-type ArgOfHoppAction<A extends HoppAction | HoppActionWithArgs> =
-  A extends HoppActionWithArgs ? HoppActionArgsMap[A] : undefined
+type ArgOfHoppAction<A extends HoppAction> = A extends HoppActionWithArgs
+  ? HoppActionArgsMap[A]
+  : undefined
 
 /**
  * Resolves the action function for a given HoppAction, used by action handler function defs
  */
-type ActionFunc<A extends HoppAction | HoppActionWithArgs> =
-  A extends HoppActionWithArgs ? (arg: ArgOfHoppAction<A>) => void : () => void
+type ActionFunc<A extends HoppAction> = A extends HoppActionWithArgs
+  ? (arg: ArgOfHoppAction<A>, trigger?: InvocationTriggers) => void
+  : (_?: undefined, trigger?: InvocationTriggers) => void
 
 type BoundActionList = {
-  // eslint-disable-next-line no-unused-vars
-  [A in HoppAction | HoppActionWithArgs]?: Array<ActionFunc<A>>
+  [A in HoppAction]?: Array<ActionFunc<A>>
 }
 
 const boundActions: BoundActionList = reactive({})
 
-export const activeActions$ = new BehaviorSubject<
-  (HoppAction | HoppActionWithArgs)[]
->([])
+export const activeActions$ = new BehaviorSubject<HoppAction[]>([])
 
-export function bindAction<A extends HoppAction | HoppActionWithArgs>(
+export function bindAction<A extends HoppAction>(
   action: A,
   handler: ActionFunc<A>
 ) {
@@ -179,27 +197,33 @@ export function bindAction<A extends HoppAction | HoppActionWithArgs>(
   activeActions$.next(Object.keys(boundActions) as HoppAction[])
 }
 
+export type InvocationTriggers = "keypress" | "mouseclick"
+
 type InvokeActionFunc = {
-  (action: HoppActionWithNoArgs, args?: undefined): void
+  (
+    action: HoppActionWithOptionalArgs,
+    args?: undefined,
+    trigger?: InvocationTriggers
+  ): void
   <A extends HoppActionWithArgs>(action: A, args: HoppActionArgsMap[A]): void
 }
 
 /**
- * Invokes a action, triggering action handlers if any registered.
- * The second argument parameter is optional if your action has no args required
+ * Invokes an action, triggering action handlers if any registered.
+ * The second and third arguments are optional
  * @param action The action to fire
  * @param args The argument passed to the action handler. Optional if action has no args required
+ * @param trigger Optionally supply the trigger that invoked the action (keypress/mouseclick)
  */
-export const invokeAction: InvokeActionFunc = <
-  A extends HoppAction | HoppActionWithArgs,
->(
+export const invokeAction: InvokeActionFunc = <A extends HoppAction>(
   action: A,
-  args: ArgOfHoppAction<A>
+  args?: ArgOfHoppAction<A>,
+  trigger?: InvocationTriggers
 ) => {
-  boundActions[action]?.forEach((handler) => handler(args! as any))
+  boundActions[action]?.forEach((handler) => handler(args! as any, trigger))
 }
 
-export function unbindAction<A extends HoppAction | HoppActionWithArgs>(
+export function unbindAction<A extends HoppAction>(
   action: A,
   handler: ActionFunc<A>
 ) {
@@ -232,7 +256,7 @@ export function isActionBound(action: HoppAction): Ref<boolean> {
  * @param handler The function to be called when the action is invoked
  * @param isActive A ref that indicates whether the action is active
  */
-export function defineActionHandler<A extends HoppAction | HoppActionWithArgs>(
+export function defineActionHandler<A extends HoppAction>(
   action: A,
   handler: ActionFunc<A>,
   isActive: Ref<boolean> | undefined = undefined
diff --git a/packages/hoppscotch-common/src/helpers/keybindings.ts b/packages/hoppscotch-common/src/helpers/keybindings.ts
index 1676a055f..d2aaa0ce1 100644
--- a/packages/hoppscotch-common/src/helpers/keybindings.ts
+++ b/packages/hoppscotch-common/src/helpers/keybindings.ts
@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted } from "vue"
-import { HoppActionWithNoArgs, invokeAction } from "./actions"
+import { HoppActionWithOptionalArgs, invokeAction } from "./actions"
 import { isAppleDevice } from "./platformutils"
 import { isDOMElement, isTypableElement } from "./utils/dom"
 
@@ -40,7 +40,7 @@ type SingleCharacterShortcutKey = `${Key}`
 type ShortcutKey = ModifierBasedShortcutKey | SingleCharacterShortcutKey
 
 export const bindings: {
-  [_ in ShortcutKey]?: HoppActionWithNoArgs
+  [_ in ShortcutKey]?: HoppActionWithOptionalArgs
 } = {
   "ctrl-enter": "request.send-cancel",
   "ctrl-i": "request.reset",
@@ -96,7 +96,7 @@ function handleKeyDown(ev: KeyboardEvent) {
   if (!boundAction) return
 
   ev.preventDefault()
-  invokeAction(boundAction)
+  invokeAction(boundAction, undefined, "keypress")
 }
 
 function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
diff --git a/packages/hoppscotch-common/src/layouts/default.vue b/packages/hoppscotch-common/src/layouts/default.vue
index fc1b19767..424d9d947 100644
--- a/packages/hoppscotch-common/src/layouts/default.vue
+++ b/packages/hoppscotch-common/src/layouts/default.vue
@@ -69,13 +69,15 @@ import "splitpanes/dist/splitpanes.css"
 import { computed, onBeforeMount, onMounted, ref, watch } from "vue"
 import { RouterView, useRouter } from "vue-router"
 
-import { defineActionHandler } from "~/helpers/actions"
+import { useI18n } from "~/composables/i18n"
+import { useToast } from "~/composables/toast"
+import { InvocationTriggers, defineActionHandler } from "~/helpers/actions"
 import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { applySetting } from "~/newstore/settings"
-import { useToast } from "~/composables/toast"
-import { useI18n } from "~/composables/i18n"
 import { platform } from "~/platform"
+import { HoppSpotlightSessionEventData } from "~/platform/analytics"
 import { PersistenceService } from "~/services/persistence"
+import { SpotlightService } from "~/services/spotlight"
 
 const router = useRouter()
 
@@ -93,6 +95,7 @@ const toast = useToast()
 const t = useI18n()
 
 const persistenceService = useService(PersistenceService)
+const spotlightService = useService(SpotlightService)
 
 onBeforeMount(() => {
   if (!mdAndLarger.value) {
@@ -144,7 +147,18 @@ const spacerClass = computed(() =>
   expandNavigation.value ? "spacer-small" : "spacer-expand"
 )
 
-defineActionHandler("modals.search.toggle", () => {
+defineActionHandler("modals.search.toggle", (_, trigger) => {
+  const triggerMethodMap: Record<
+    InvocationTriggers,
+    HoppSpotlightSessionEventData["method"]
+  > = {
+    keypress: "keyboard-shortcut",
+    mouseclick: "click-spotlight-bar",
+  }
+  spotlightService.setAnalyticsData({
+    method: triggerMethodMap[trigger as InvocationTriggers],
+  })
+
   showSearch.value = !showSearch.value
 })
 
diff --git a/packages/hoppscotch-common/src/platform/analytics.ts b/packages/hoppscotch-common/src/platform/analytics.ts
index ee7b368da..cd230cc30 100644
--- a/packages/hoppscotch-common/src/platform/analytics.ts
+++ b/packages/hoppscotch-common/src/platform/analytics.ts
@@ -5,6 +5,15 @@ export type HoppRequestEvent =
     }
   | { platform: "wss" | "sse" | "socketio" | "mqtt" }
 
+export type HoppSpotlightSessionEventData = {
+  action?: "success" | "close"
+  inputLength?: number
+  method?: "keyboard-shortcut" | "click-spotlight-bar"
+  rank?: string | null
+  searcherID?: string | null
+  sessionDuration?: string
+}
+
 export type AnalyticsEvent =
   | ({ type: "HOPP_REQUEST_RUN" } & HoppRequestEvent)
   | {
@@ -46,6 +55,9 @@ export type AnalyticsEvent =
   | { type: "HOPP_EXPORT_ENVIRONMENT"; platform: "rest" | "gql" }
   | { type: "HOPP_REST_CODEGEN_OPENED" }
   | { type: "HOPP_REST_IMPORT_CURL" }
+  | ({
+      type: "HOPP_SPOTLIGHT_SESSION"
+    } & HoppSpotlightSessionEventData)
 
 export type AnalyticsPlatformDef = {
   initAnalytics: () => void
diff --git a/packages/hoppscotch-common/src/services/spotlight/__tests__/index.spec.ts b/packages/hoppscotch-common/src/services/spotlight/__tests__/index.spec.ts
index b2d951894..61ba887ad 100644
--- a/packages/hoppscotch-common/src/services/spotlight/__tests__/index.spec.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/__tests__/index.spec.ts
@@ -1,12 +1,14 @@
-import { describe, it, expect, vi, beforeEach } from "vitest"
+import { TestContainer } from "dioc/testing"
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest"
+import { Ref, computed, nextTick, ref, watch } from "vue"
+import { setPlatformDef } from "~/platform"
+import { HoppSpotlightSessionEventData } from "~/platform/analytics"
 import {
   SpotlightSearcher,
-  SpotlightSearcherSessionState,
   SpotlightSearcherResult,
+  SpotlightSearcherSessionState,
   SpotlightService,
 } from "../"
-import { Ref, computed, nextTick, ref, watch } from "vue"
-import { TestContainer } from "dioc/testing"
 
 const echoSearcher: SpotlightSearcher = {
   searcherID: "echo-searcher",
@@ -78,6 +80,15 @@ const emptySearcher: SpotlightSearcher = {
 }
 
 describe("SpotlightService", () => {
+  beforeAll(() => {
+    setPlatformDef({
+      // @ts-expect-error We're mocking the platform
+      analytics: {
+        logEvent: vi.fn(),
+      },
+    })
+  })
+
   describe("registerSearcher", () => {
     it("registers a searcher with a given ID", () => {
       const container = new TestContainer()
@@ -387,16 +398,14 @@ describe("SpotlightService", () => {
         searcherID: "test-searcher",
         searcherSectionTitle: "Test Searcher",
         createSearchSession: (query) => {
-          watch(query, notifiedFn, { immediate: true })
+          const dispose = watch(query, notifiedFn, { immediate: true })
 
           return [
             computed<SpotlightSearcherSessionState>(() => ({
               loading: false,
               results: [],
             })),
-            () => {
-              /* noop */
-            },
+            dispose,
           ]
         },
         onResultSelect: () => {
@@ -420,7 +429,7 @@ describe("SpotlightService", () => {
       query.value = "test3"
       await nextTick()
 
-      expect(notifiedFn).toHaveBeenCalledTimes(3)
+      expect(notifiedFn).toHaveBeenCalledTimes(2)
     })
 
     describe("selectSearchResult", () => {
@@ -547,4 +556,83 @@ describe("SpotlightService", () => {
       ])
     })
   })
+
+  describe("getAnalyticsData", () => {
+    const analyticsData: HoppSpotlightSessionEventData = {
+      method: "click-spotlight-bar",
+      inputLength: 0,
+      action: "close",
+      rank: null,
+      searcherID: null,
+      sessionDuration: "0.9s",
+    }
+
+    it("returns the initial state of `analyticsData` in a spotlight session", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+
+      expect(spotlight.getAnalyticsData()).toEqual({})
+    })
+
+    it("returns the current state of `analyticsData` in a spotlight session", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.setAnalyticsData(analyticsData)
+
+      expect(spotlight.getAnalyticsData()).toEqual(analyticsData)
+    })
+  })
+
+  describe("setAnalyticsData", () => {
+    const analyticsData: HoppSpotlightSessionEventData = {
+      method: "click-spotlight-bar",
+      inputLength: 0,
+      action: "close",
+      rank: null,
+      searcherID: null,
+      sessionDuration: "0.9s",
+    }
+
+    it("sets analytics data for the current spotlight session by merging with existing data", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+
+      // Session data, maintained outside and communicated to the service
+      spotlight.setAnalyticsData({
+        method: "click-spotlight-bar",
+        action: "close",
+        rank: null,
+        searcherID: null,
+      })
+
+      // Session duration and input length are computed at the service level
+      const analyticsDataComputedInService: Partial<HoppSpotlightSessionEventData> =
+        {
+          inputLength: 0,
+          sessionDuration: "0.9s",
+        }
+      spotlight.setAnalyticsData(analyticsDataComputedInService)
+
+      expect(spotlight.getAnalyticsData()).toEqual(analyticsData)
+    })
+
+    it("resets analytics data after a spotlight session", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+
+      // Populate `analyticsData` in the service context with sample data
+      spotlight.setAnalyticsData(analyticsData)
+
+      const analyticsDataEmptyState = {}
+
+      // Resets the state with the supplied data by specifying `false` for the `merge` argument
+      spotlight.setAnalyticsData(analyticsDataEmptyState, false)
+
+      expect(spotlight.getAnalyticsData()).toEqual(analyticsDataEmptyState)
+    })
+  })
 })
diff --git a/packages/hoppscotch-common/src/services/spotlight/index.ts b/packages/hoppscotch-common/src/services/spotlight/index.ts
index 2687b9aa8..000fbe02d 100644
--- a/packages/hoppscotch-common/src/services/spotlight/index.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/index.ts
@@ -1,5 +1,8 @@
 import { Service } from "dioc"
-import { watch, type Ref, ref, reactive, effectScope, Component } from "vue"
+import { Component, effectScope, reactive, ref, watch, type Ref } from "vue"
+
+import { platform } from "~/platform"
+import { HoppSpotlightSessionEventData } from "~/platform/analytics"
 
 /**
  * Defines how to render the entry text in a Spotlight Search Result
@@ -115,6 +118,7 @@ export type SpotlightSearchState = {
 export class SpotlightService extends Service {
   public static readonly ID = "SPOTLIGHT_SERVICE"
 
+  private analyticsData: HoppSpotlightSessionEventData = {}
   private searchers: Map<string, SpotlightSearcher> = new Map()
 
   /**
@@ -140,6 +144,8 @@ export class SpotlightService extends Service {
   public createSearchSession(
     query: Ref<string>
   ): [Ref<SpotlightSearchState>, () => void] {
+    const startTime = Date.now()
+
     const searchSessions = Array.from(this.searchers.values()).map(
       (x) => [x, ...x.createSearchSession(query)] as const
     )
@@ -183,6 +189,16 @@ export class SpotlightService extends Service {
         onSessionEndList.push(onSessionEnd)
       }
 
+      watch(
+        query,
+        (newQuery) => {
+          this.setAnalyticsData({
+            inputLength: newQuery.length,
+          })
+        },
+        { immediate: true }
+      )
+
       watch(
         loadingSearchers,
         (set) => {
@@ -198,6 +214,18 @@ export class SpotlightService extends Service {
       for (const onEnd of onSessionEndList) {
         onEnd()
       }
+
+      // Sets the session duration in the state for analytics event logging
+      const sessionDuration = `${((Date.now() - startTime) / 1000).toFixed(2)}s`
+      this.setAnalyticsData({ sessionDuration })
+
+      platform.analytics?.logEvent({
+        type: "HOPP_SPOTLIGHT_SESSION",
+        ...this.analyticsData,
+      })
+
+      // Reset the state
+      this.setAnalyticsData({}, false)
     }
 
     return [resultObj, onSearchEnd]
@@ -206,12 +234,35 @@ export class SpotlightService extends Service {
   /**
    * Selects a search result. To be called when the user selects a result
    * @param searcherID The ID of the searcher that the result belongs to
-   * @param result The resuklt to look at
+   * @param result The result to look at
    */
   public selectSearchResult(
     searcherID: string,
     result: SpotlightSearcherResult
   ) {
     this.searchers.get(searcherID)?.onResultSelect(result)
+
+    // Sets the action indicating `success` and selected result score in the state for analytics event logging
+    this.setAnalyticsData({
+      action: "success",
+      rank: result.score.toFixed(2),
+      searcherID,
+    })
+  }
+
+  /**
+   * Gets the analytics data for the current search session
+   */
+  public getAnalyticsData(): HoppSpotlightSessionEventData {
+    return this.analyticsData
+  }
+
+  /**
+   * Sets Analytics data for the current search session
+   * @param data The data to set
+   * @param merge Whether to merge the data with the existing data or replace it
+   */
+  public setAnalyticsData(data: HoppSpotlightSessionEventData, merge = true) {
+    this.analyticsData = merge ? { ...this.analyticsData, ...data } : data
   }
 }

From 0ba33ec187503dbe6410f0b131a724354bc495db Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Mon, 5 Feb 2024 20:38:16 +0300
Subject: [PATCH 02/25] fix: request endpoint heading (#3804)

---
 .../src/components/http/Request.vue               | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue
index f92b5631d..d71ad238e 100644
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -395,17 +395,14 @@ const newSendRequest = async () => {
 }
 
 const ensureMethodInEndpoint = () => {
-  if (
-    !/^http[s]?:\/\//.test(newEndpoint.value) &&
-    !newEndpoint.value.startsWith("<<")
-  ) {
-    const domain = newEndpoint.value.split(/[/:#?]+/)[0]
+  const endpoint = newEndpoint.value.trim()
+  tab.value.document.request.endpoint = endpoint
+  if (!/^http[s]?:\/\//.test(endpoint) && !endpoint.startsWith("<<")) {
+    const domain = endpoint.split(/[/:#?]+/)[0]
     if (domain === "localhost" || /([0-9]+\.)*[0-9]/.test(domain)) {
-      tab.value.document.request.endpoint =
-        "http://" + tab.value.document.request.endpoint
+      tab.value.document.request.endpoint = "http://" + endpoint
     } else {
-      tab.value.document.request.endpoint =
-        "https://" + tab.value.document.request.endpoint
+      tab.value.document.request.endpoint = "https://" + endpoint
     }
   }
 }

From 0028f6e878770b964b65854462d5fce924a94929 Mon Sep 17 00:00:00 2001
From: Florian Metz <me@timeraa.dev>
Date: Mon, 5 Feb 2024 18:42:55 +0100
Subject: [PATCH 03/25] feat(js-sandbox): expose `atob` & `btoa` functions for
 Node.js (#3724)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
---
 .../src/helpers/terndoc/ecma.json             |  6 ++
 .../testing/base64-helper-functions.spec.ts   | 85 +++++++++++++++++++
 .../src/pre-request/node-vm/index.ts          |  2 +
 .../src/test-runner/node-vm/index.ts          |  2 +
 4 files changed, 95 insertions(+)
 create mode 100644 packages/hoppscotch-js-sandbox/src/__tests__/testing/base64-helper-functions.spec.ts

diff --git a/packages/hoppscotch-common/src/helpers/terndoc/ecma.json b/packages/hoppscotch-common/src/helpers/terndoc/ecma.json
index 9262de7d6..a916755ba 100644
--- a/packages/hoppscotch-common/src/helpers/terndoc/ecma.json
+++ b/packages/hoppscotch-common/src/helpers/terndoc/ecma.json
@@ -1256,5 +1256,11 @@
         "!type": "fn(value: ?) -> bool"
       }
     }
+  },
+  "btoa": {
+    "!type": "fn(data: string) -> string"
+  },
+  "atob": {
+    "!type": "fn(data: string) -> string"
   }
 }
diff --git a/packages/hoppscotch-js-sandbox/src/__tests__/testing/base64-helper-functions.spec.ts b/packages/hoppscotch-js-sandbox/src/__tests__/testing/base64-helper-functions.spec.ts
new file mode 100644
index 000000000..8e54af0d9
--- /dev/null
+++ b/packages/hoppscotch-js-sandbox/src/__tests__/testing/base64-helper-functions.spec.ts
@@ -0,0 +1,85 @@
+import * as TE from "fp-ts/TaskEither"
+import { pipe } from "fp-ts/function"
+
+import { runPreRequestScript } from "~/pre-request/node-vm"
+import { runTestScript } from "~/test-runner/node-vm"
+import { TestResponse, TestResult } from "~/types"
+
+describe("Base64 helper functions", () => {
+  const scriptExpectations = {
+    atob: {
+      script: `pw.env.set("atob", atob("SGVsbG8gV29ybGQ="))`,
+      environment: {
+        selected: [{ key: "atob", value: "Hello World" }],
+      },
+    },
+    btoa: {
+      script: `pw.env.set("btoa", btoa("Hello World"))`,
+      environment: {
+        selected: [{ key: "btoa", value: "SGVsbG8gV29ybGQ=" }],
+      },
+    },
+  }
+
+  describe("Pre-request script", () => {
+    describe("atob", () => {
+      test("successfully decodes the input string", () => {
+        return expect(
+          runPreRequestScript(scriptExpectations.atob.script, {
+            global: [],
+            selected: [],
+          })()
+        ).resolves.toEqualRight(
+          expect.objectContaining(scriptExpectations.atob.environment)
+        )
+      })
+    })
+
+    describe("btoa", () => {
+      test("successfully encodes the input string", () => {
+        return expect(
+          runPreRequestScript(scriptExpectations.btoa.script, {
+            global: [],
+            selected: [],
+          })()
+        ).resolves.toEqualRight(
+          expect.objectContaining(scriptExpectations.btoa.environment)
+        )
+      })
+    })
+  })
+
+  describe("Test script", () => {
+    const fakeResponse: TestResponse = {
+      status: 200,
+      body: "hoi",
+      headers: [],
+    }
+
+    const func = (script: string, envs: TestResult["envs"]) =>
+      pipe(
+        runTestScript(script, envs, fakeResponse),
+        TE.map((x) => x.envs)
+      )
+
+    describe("atob", () => {
+      test("successfully decodes the input string", () => {
+        return expect(
+          func(scriptExpectations.atob.script, { global: [], selected: [] })()
+        ).resolves.toEqualRight(
+          expect.objectContaining(scriptExpectations.atob.environment)
+        )
+      })
+    })
+
+    describe("btoa", () => {
+      test("successfully encodes the input string", () => {
+        return expect(
+          func(scriptExpectations.btoa.script, { global: [], selected: [] })()
+        ).resolves.toEqualRight(
+          expect.objectContaining(scriptExpectations.btoa.environment)
+        )
+      })
+    })
+  })
+})
diff --git a/packages/hoppscotch-js-sandbox/src/pre-request/node-vm/index.ts b/packages/hoppscotch-js-sandbox/src/pre-request/node-vm/index.ts
index f37b610cd..220a18d77 100644
--- a/packages/hoppscotch-js-sandbox/src/pre-request/node-vm/index.ts
+++ b/packages/hoppscotch-js-sandbox/src/pre-request/node-vm/index.ts
@@ -24,6 +24,8 @@ export const runPreRequestScript = (
 
             // Expose pw to the context
             context.pw = pw
+            context.atob = atob
+            context.btoa = btoa
 
             // Run the pre-request script in the provided context
             runInContext(preRequestScript, context)
diff --git a/packages/hoppscotch-js-sandbox/src/test-runner/node-vm/index.ts b/packages/hoppscotch-js-sandbox/src/test-runner/node-vm/index.ts
index ce96acb13..89d5a8f68 100644
--- a/packages/hoppscotch-js-sandbox/src/test-runner/node-vm/index.ts
+++ b/packages/hoppscotch-js-sandbox/src/test-runner/node-vm/index.ts
@@ -43,6 +43,8 @@ const executeScriptInContext = (
 
     // Expose pw to the context
     context.pw = { ...pw, response: responseObjHandle.right }
+    context.atob = atob
+    context.btoa = btoa
 
     // Run the test script in the provided context
     runInContext(testScript, context)

From 3911c9cd1f47a62f8a2507b52629f3f4b4cec3a7 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Mon, 5 Feb 2024 23:50:15 +0530
Subject: [PATCH 04/25] refactor: update share request flow (#3805)

---
 packages/hoppscotch-common/locales/en.json    |  1 +
 .../src/components/http/TabHead.vue           | 17 +++++++++
 .../src/components/share/Request.vue          |  7 +---
 .../src/components/share/index.vue            | 38 ++++++++++++++-----
 .../hoppscotch-common/src/pages/index.vue     | 19 ++++++++++
 5 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 0125cc37e..301448130 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -889,6 +889,7 @@
     "query": "Query",
     "schema": "Schema",
     "shared_requests": "Shared Requests",
+    "share_tab_request": "Share tab request",
     "socketio": "Socket.IO",
     "sse": "SSE",
     "tests": "Tests",
diff --git a/packages/hoppscotch-common/src/components/http/TabHead.vue b/packages/hoppscotch-common/src/components/http/TabHead.vue
index 17a65c10e..22ff669a8 100644
--- a/packages/hoppscotch-common/src/components/http/TabHead.vue
+++ b/packages/hoppscotch-common/src/components/http/TabHead.vue
@@ -29,6 +29,7 @@
           class="flex flex-col focus:outline-none"
           tabindex="0"
           @keyup.r="renameAction?.$el.click()"
+          @keyup.s="shareRequestAction?.$el.click()"
           @keyup.d="duplicateAction?.$el.click()"
           @keyup.w="closeAction?.$el.click()"
           @keyup.x="closeOthersAction?.$el.click()"
@@ -58,6 +59,19 @@
               }
             "
           />
+          <HoppSmartItem
+            ref="shareRequestAction"
+            :icon="IconShare2"
+            :label="t('tab.share_tab_request')"
+            :shortcut="['S']"
+            :new="true"
+            @click="
+              () => {
+                emit('share-tab-request')
+                hide()
+              }
+            "
+          />
           <HoppSmartItem
             v-if="isRemovable"
             ref="closeAction"
@@ -99,6 +113,7 @@ import IconXCircle from "~icons/lucide/x-circle"
 import IconXSquare from "~icons/lucide/x-square"
 import IconFileEdit from "~icons/lucide/file-edit"
 import IconCopy from "~icons/lucide/copy"
+import IconShare2 from "~icons/lucide/share-2"
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
 
@@ -114,6 +129,7 @@ const emit = defineEmits<{
   (event: "close-tab"): void
   (event: "close-other-tabs"): void
   (event: "duplicate-tab"): void
+  (event: "share-tab-request"): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
@@ -123,4 +139,5 @@ const renameAction = ref<HTMLButtonElement | null>(null)
 const closeAction = ref<HTMLButtonElement | null>(null)
 const closeOthersAction = ref<HTMLButtonElement | null>(null)
 const duplicateAction = ref<HTMLButtonElement | null>(null)
+const shareRequestAction = ref<HTMLButtonElement | null>(null)
 </script>
diff --git a/packages/hoppscotch-common/src/components/share/Request.vue b/packages/hoppscotch-common/src/components/share/Request.vue
index d62742e5e..44a04c473 100644
--- a/packages/hoppscotch-common/src/components/share/Request.vue
+++ b/packages/hoppscotch-common/src/components/share/Request.vue
@@ -7,7 +7,7 @@
       v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
       class="flex items-center justify-center flex-1 min-w-0 py-2 cursor-pointer pointer-events-auto"
       :title="`${timeStamp}`"
-      @click="openInNewTab"
+      @click="customizeSharedRequest()"
     >
       <span
         class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
@@ -128,7 +128,6 @@ const emit = defineEmits<{
     embedProperties?: string | null
   ): void
   (e: "delete-shared-request", codeID: string): void
-  (e: "open-new-tab", request: HoppRESTRequest): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
@@ -145,10 +144,6 @@ const requestLabelColor = computed(() =>
   getMethodLabelColorClassOf(parseRequest.value)
 )
 
-const openInNewTab = () => {
-  emit("open-new-tab", parseRequest.value)
-}
-
 const customizeSharedRequest = () => {
   const embedProperties = props.request.properties
   emit(
diff --git a/packages/hoppscotch-common/src/components/share/index.vue b/packages/hoppscotch-common/src/components/share/index.vue
index 50b7f5c70..bfdbb64c0 100644
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/packages/hoppscotch-common/src/components/share/index.vue
@@ -9,8 +9,14 @@
       />
     </div>
     <div
-      class="sticky top-sidebarPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-end overflow-x-auto border-b border-dividerLight bg-primary"
+      class="sticky top-sidebarPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
     >
+      <HoppButtonSecondary
+        :label="t('action.new')"
+        :icon="IconPlus"
+        class="!rounded-none"
+        @click="shareRequest()"
+      />
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         to="https://docs.hoppscotch.io/documentation/features/widgets"
@@ -47,7 +53,6 @@
           :request="request"
           @customize-shared-request="customizeSharedRequest"
           @delete-shared-request="deleteSharedRequest"
-          @open-new-tab="openInNewTab"
         />
         <HoppSmartIntersection
           v-if="hasMoreSharedRequests"
@@ -70,7 +75,15 @@
         :alt="`${t('empty.shared_requests')}`"
         :text="t('empty.shared_requests')"
         @drop.stop
-      />
+      >
+        <template #body>
+          <HoppButtonPrimary
+            :label="t('add.new')"
+            :icon="IconPlus"
+            @click="shareRequest()"
+          />
+        </template>
+      </HoppSmartPlaceholder>
     </div>
   </div>
   <HoppSmartConfirmModal
@@ -95,6 +108,7 @@
 
 <script lang="ts" setup>
 import IconHelpCircle from "~icons/lucide/help-circle"
+import IconPlus from "~icons/lucide/plus"
 import { useI18n } from "~/composables/i18n"
 import ShortcodeListAdapter from "~/helpers/shortcode/ShortcodeListAdapter"
 import { useReadonlyStream } from "~/composables/stream"
@@ -270,6 +284,17 @@ onAuthEvent((ev) => {
   }
 })
 
+const shareRequest = () => {
+  if (currentUser.value) {
+    const tab = restTab.currentActiveTab
+    invokeAction("share.request", {
+      request: tab.value.document.request,
+    })
+  } else {
+    invokeAction("modals.login.toggle")
+  }
+}
+
 const deleteSharedRequest = (codeID: string) => {
   if (currentUser.value) {
     sharedRequestID.value = codeID
@@ -434,13 +459,6 @@ const copySharedRequest = (payload: {
   }
 }
 
-const openInNewTab = (request: HoppRESTRequest) => {
-  restTab.createNewTab({
-    isDirty: false,
-    request,
-  })
-}
-
 const resolveConfirmModal = (title: string | null) => {
   if (title === `${t("confirm.remove_shared_request")}`) onDeleteSharedRequest()
   else {
diff --git a/packages/hoppscotch-common/src/pages/index.vue b/packages/hoppscotch-common/src/pages/index.vue
index 5c9078862..ecd169105 100644
--- a/packages/hoppscotch-common/src/pages/index.vue
+++ b/packages/hoppscotch-common/src/pages/index.vue
@@ -26,6 +26,7 @@
                 @close-tab="removeTab(tab.id)"
                 @close-other-tabs="closeOtherTabsAction(tab.id)"
                 @duplicate-tab="duplicateTab(tab.id)"
+                @share-tab-request="shareTabRequest(tab.id)"
               />
             </template>
             <template #suffix>
@@ -145,6 +146,11 @@ const tabs = useService(RESTTabService)
 
 const currentTabID = tabs.currentTabID
 
+const currentUser = useReadonlyStream(
+  platform.auth.getCurrentUserStream(),
+  platform.auth.getCurrentUser()
+)
+
 type PopupDetails = {
   show: boolean
   position: {
@@ -308,6 +314,19 @@ const onSaveModalClose = () => {
   }
 }
 
+const shareTabRequest = (tabID: string) => {
+  const tab = tabs.getTabRef(tabID)
+  if (tab.value) {
+    if (currentUser.value) {
+      invokeAction("share.request", {
+        request: tab.value.document.request,
+      })
+    } else {
+      invokeAction("modals.login.toggle")
+    }
+  }
+}
+
 const syncTabState = () => {
   if (tabStateForSync.value)
     tabs.loadTabsFromPersistedState(tabStateForSync.value)

From 16803acb26f3d70e684760c536bce6855456937e Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Tue, 6 Feb 2024 20:35:29 +0530
Subject: [PATCH 05/25] chore: Oauth temporary ux improvements (#3792)

---
 .../components/http/OAuth2Authorization.vue   | 28 +++++--
 .../hoppscotch-common/src/helpers/oauth.ts    | 81 ++++++++++---------
 .../platform/std/interceptors/extension.ts    |  9 +++
 3 files changed, 73 insertions(+), 45 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
index fbd157170..ee9d2f1c0 100644
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
@@ -3,14 +3,25 @@
     <div class="flex flex-1 border-b border-dividerLight">
       <SmartEnvInput
         v-model="oidcDiscoveryURL"
+        :styles="
+          hasAccessTokenOrAuthURL ? 'pointer-events-none opacity-70' : ''
+        "
         placeholder="OpenID Connect Discovery URL"
       />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <SmartEnvInput v-model="authURL" placeholder="Authorization URL" />
+      <SmartEnvInput
+        v-model="authURL"
+        placeholder="Authorization URL"
+        :styles="hasOIDCURL ? 'pointer-events-none opacity-70' : ''"
+      ></SmartEnvInput>
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <SmartEnvInput v-model="accessTokenURL" placeholder="Access Token URL" />
+      <SmartEnvInput
+        v-model="accessTokenURL"
+        placeholder="Access Token URL"
+        :styles="hasOIDCURL ? 'pointer-events-none opacity-70' : ''"
+      />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
       <SmartEnvInput v-model="clientID" placeholder="Client ID" />
@@ -44,6 +55,7 @@ import { useToast } from "@composables/toast"
 import { tokenRequest } from "~/helpers/oauth"
 import { getCombinedEnvVariables } from "~/helpers/preRequest"
 import * as E from "fp-ts/Either"
+import { computed } from "vue"
 
 const t = useI18n()
 const toast = useToast()
@@ -66,10 +78,16 @@ watch(
 )
 
 const oidcDiscoveryURL = pluckRef(auth, "oidcDiscoveryURL")
+const hasOIDCURL = computed(() => {
+  return oidcDiscoveryURL.value
+})
 
 const authURL = pluckRef(auth, "authURL")
 
 const accessTokenURL = pluckRef(auth, "accessTokenURL")
+const hasAccessTokenOrAuthURL = computed(() => {
+  return accessTokenURL.value || authURL.value
+})
 
 const clientID = pluckRef(auth, "clientID")
 
@@ -88,13 +106,11 @@ function translateTokenRequestError(error: string) {
 }
 
 const handleAccessTokenRequest = async () => {
-  if (
-    oidcDiscoveryURL.value === "" &&
-    (authURL.value === "" || accessTokenURL.value === "")
-  ) {
+  if (!oidcDiscoveryURL.value && !(authURL.value || accessTokenURL.value)) {
     toast.error(`${t("error.incomplete_config_urls")}`)
     return
   }
+
   const envs = getCombinedEnvVariables()
   const envVars = [...envs.selected, ...envs.global]
 
diff --git a/packages/hoppscotch-common/src/helpers/oauth.ts b/packages/hoppscotch-common/src/helpers/oauth.ts
index db52ef5f0..ce45432be 100644
--- a/packages/hoppscotch-common/src/helpers/oauth.ts
+++ b/packages/hoppscotch-common/src/helpers/oauth.ts
@@ -3,41 +3,20 @@ import { PersistenceService } from "~/services/persistence"
 
 import * as E from "fp-ts/Either"
 import { z } from "zod"
+import { InterceptorService } from "~/services/interceptor.service"
+import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
+
+import { AxiosRequestConfig } from "axios"
+import { until } from "@vueuse/core"
 
 const redirectUri = `${window.location.origin}/oauth`
 
+const interceptorService = getService(InterceptorService)
 const persistenceService = getService(PersistenceService)
+const extensionService = getService(ExtensionInterceptorService)
 
 // GENERAL HELPER FUNCTIONS
 
-/**
- * Makes a POST request and parse the response as JSON
- *
- * @param {String} url - The resource
- * @param {Object} params - Configuration options
- * @returns {Object}
- */
-
-const sendPostRequest = async (url: string, params: Record<string, string>) => {
-  const body = Object.keys(params)
-    .map((key) => `${key}=${params[key]}`)
-    .join("&")
-  const options = {
-    method: "POST",
-    headers: {
-      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
-    },
-    body,
-  }
-  try {
-    const response = await fetch(url, options)
-    const data = await response.json()
-    return E.right(data)
-  } catch (e) {
-    return E.left("AUTH_TOKEN_REQUEST_FAILED")
-  }
-}
-
 /**
  * Parse a query string into an object
  *
@@ -71,9 +50,16 @@ const getTokenConfiguration = async (endpoint: string) => {
     },
   }
   try {
-    const response = await fetch(endpoint, options)
-    const config = await response.json()
-    return E.right(config)
+    const res = await runRequestThroughInterceptor({
+      url: endpoint,
+      ...options,
+    })
+
+    if (E.isLeft(res)) {
+      return E.left("OIDC_DISCOVERY_FAILED")
+    }
+
+    return E.right(JSON.parse(res.right))
   } catch (e) {
     return E.left("OIDC_DISCOVERY_FAILED")
   }
@@ -166,8 +152,7 @@ const tokenRequest = async ({
   clientSecret,
   scope,
 }: TokenRequestParams) => {
-  // Check oauth configuration
-  if (oidcDiscoveryUrl !== "") {
+  if (oidcDiscoveryUrl) {
     const res = await getTokenConfiguration(oidcDiscoveryUrl)
 
     const OIDCConfigurationSchema = z.object({
@@ -269,17 +254,19 @@ const handleOAuthRedirect = async () => {
   }
 
   // Exchange the authorization code for an access token
-  const tokenResponse: E.Either<string, any> = await sendPostRequest(
-    tokenEndpoint,
-    {
+  const tokenResponse = await runRequestThroughInterceptor({
+    url: tokenEndpoint,
+    data: JSON.stringify({
       grant_type: "authorization_code",
       code: queryParams.code,
       client_id: clientID,
       client_secret: clientSecret,
       redirect_uri: redirectUri,
       code_verifier: codeVerifier,
-    }
-  )
+    }),
+    method: "POST",
+    headers: {},
+  })
 
   // Clean these up since we don't need them anymore
   clearPKCEState()
@@ -293,7 +280,7 @@ const handleOAuthRedirect = async () => {
   })
 
   const parsedTokenResponse = withAccessTokenSchema.safeParse(
-    tokenResponse.right
+    JSON.parse(tokenResponse.right)
   )
 
   return parsedTokenResponse.success
@@ -309,4 +296,20 @@ const clearPKCEState = () => {
   persistenceService.removeLocalConfig("client_secret")
 }
 
+async function runRequestThroughInterceptor(config: AxiosRequestConfig) {
+  const res = await interceptorService.runRequest(config).response
+
+  if (E.isLeft(res)) {
+    return E.left("REQUEST_FAILED")
+  }
+
+  // convert ArrayBuffer to string
+  if (!(res.right.data instanceof ArrayBuffer)) {
+    return E.left("REQUEST_FAILED")
+  }
+
+  const data = new TextDecoder().decode(res.right.data).replace(/\0+$/, "")
+  return E.right(data)
+}
+
 export { tokenRequest, handleOAuthRedirect }
diff --git a/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts b/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts
index 033e23865..a6095c0bc 100644
--- a/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts
+++ b/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts
@@ -13,6 +13,7 @@ import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
 import SettingsExtension from "~/components/settings/Extension.vue"
 import InterceptorsExtensionSubtitle from "~/components/interceptors/ExtensionSubtitle.vue"
 import InterceptorsErrorPlaceholder from "~/components/interceptors/ErrorPlaceholder.vue"
+import { until } from "@vueuse/core"
 
 export const defineSubscribableObject = <T extends object>(obj: T) => {
   const proxyObject = {
@@ -206,6 +207,14 @@ export class ExtensionInterceptorService
   private async runRequestOnExtension(
     req: AxiosRequestConfig
   ): RequestRunResult["response"] {
+    // wait for the extension to resolve
+    await until(this.extensionStatus).toMatch(
+      (status) => status !== "waiting",
+      {
+        timeout: 1000,
+      }
+    )
+
     const extensionHook = window.__POSTWOMAN_EXTENSION_HOOK__
     if (!extensionHook) {
       return E.left(<InterceptorError>{

From 00862eb192f4df30f564d408b48ba9843d48b0c8 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Thu, 8 Feb 2024 21:58:42 +0530
Subject: [PATCH 06/25] feat: secret variables in environments (#3779)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
---
 packages/hoppscotch-common/locales/en.json    |   8 +
 .../src/components/environments/Add.vue       |   4 +-
 .../components/environments/ImportExport.vue  |  10 +-
 .../src/components/environments/Selector.vue  |  21 +-
 .../src/components/environments/index.vue     |  28 +-
 .../components/environments/my/Details.vue    | 300 ++++++++++----
 .../environments/my/Environment.vue           |   5 +
 .../src/components/environments/my/index.vue  |  11 +-
 .../components/environments/teams/Details.vue | 381 ++++++++++++------
 .../environments/teams/Environment.vue        |   9 +-
 .../components/environments/teams/index.vue   |  11 +-
 .../src/components/http/CodegenModal.vue      |   2 +
 .../src/components/http/Headers.vue           |   5 +-
 .../components/http/OAuth2Authorization.vue   |   2 +-
 .../src/components/http/TabHead.vue           |   1 -
 .../src/components/http/TestResult.vue        |  11 +-
 .../src/components/smart/EnvInput.vue         | 115 ++++--
 .../src/composables/codemirror.ts             |   7 +
 .../src/helpers/RequestRunner.ts              |  99 ++++-
 .../hoppscotch-common/src/helpers/actions.ts  |   9 +-
 .../mutations/CreateTeamEnvironment.graphql   |  11 +-
 .../editor/extensions/HoppEnvironment.ts      |  20 +-
 .../import-export/export/environment.ts       |   2 -
 .../helpers/import-export/import/hoppEnv.ts   |  21 +-
 .../import-export/import/insomniaEnv.ts       |  11 +-
 .../import-export/import/postmanEnv.ts        |   5 +-
 .../src/helpers/preRequest.ts                 |  68 +++-
 .../helpers/teams/TeamEnvironmentAdapter.ts   |   6 +
 .../src/helpers/utils/EffectiveURL.ts         |  26 +-
 .../src/newstore/environments.ts              | 178 ++++++--
 .../secret-environment.service.spec.ts        | 194 +++++++++
 .../__tests__/environment.inspector.spec.ts   | 120 +++++-
 .../inspectors/environment.inspector.ts       | 194 +++++++--
 .../inspection/inspectors/header.inspector.ts |   2 +-
 .../inspectors/response.inspector.ts          |   2 +-
 .../persistence/__tests__/__mocks__/index.ts  |  29 +-
 .../persistence/__tests__/index.spec.ts       | 128 +++++-
 .../src/services/persistence/index.ts         |  58 +++
 .../persistence/validation-schemas/index.ts   |  57 ++-
 .../services/secret-environment.service.ts    | 130 ++++++
 .../searchers/environment.searcher.ts         |   4 +-
 .../hoppscotch-data/src/environment/index.ts  | 104 ++++-
 .../hoppscotch-data/src/environment/v/0.ts    |   4 +-
 .../hoppscotch-data/src/environment/v/1.ts    |  42 ++
 .../src/__tests__/preRequest.spec.ts          |  22 +-
 .../testing/base64-helper-functions.spec.ts   |   4 +-
 .../src/__tests__/testing/envs/get.spec.ts    |   5 +
 .../__tests__/testing/envs/getResolve.spec.ts |   8 +
 .../__tests__/testing/envs/resolve.spec.ts    |   6 +
 .../src/__tests__/testing/envs/set.spec.ts    |   9 +
 .../src/__tests__/testing/envs/unset.spec.ts  |  14 +
 .../hoppscotch-js-sandbox/src/types/index.ts  |  13 +-
 packages/hoppscotch-js-sandbox/src/utils.ts   |  24 +-
 .../environments/environments.platform.ts     |   2 +
 .../environments/environments.sync.ts         |  18 +-
 55 files changed, 2141 insertions(+), 439 deletions(-)
 create mode 100644 packages/hoppscotch-common/src/services/__tests__/secret-environment.service.spec.ts
 create mode 100644 packages/hoppscotch-common/src/services/secret-environment.service.ts
 create mode 100644 packages/hoppscotch-data/src/environment/v/1.ts

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 301448130..45b5420c8 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -24,6 +24,7 @@
     "go_back": "Go back",
     "go_forward": "Go forward",
     "group_by": "Group by",
+    "hide_secret": "Hide secret",
     "label": "Label",
     "learn_more": "Learn more",
     "less": "Less",
@@ -43,6 +44,7 @@
     "search": "Search",
     "send": "Send",
     "share": "Share",
+    "show_secret": "Show secret",
     "start": "Start",
     "starting": "Starting",
     "stop": "Stop",
@@ -238,6 +240,7 @@
     "profile": "Login to view your profile",
     "protocols": "Protocols are empty",
     "schema": "Connect to a GraphQL endpoint to view schema",
+    "secret_environments": "Secret environments are not synced to Hoppscotch hence user has to provide it's value during run-time.",
     "shared_requests": "Shared requests are empty",
     "shared_requests_logout": "Login to view your shared requests or create a new one",
     "subscription": "Subscriptions are empty",
@@ -269,6 +272,8 @@
     "quick_peek": "Environment Quick Peek",
     "replace_with_variable": "Replace with variable",
     "scope": "Scope",
+    "secret": "Secret",
+    "secret_value": "Secret value",
     "select": "Select environment",
     "set": "Set environment",
     "set_as_environment": "Set as environment",
@@ -277,6 +282,7 @@
     "updated": "Environment updated",
     "value": "Value",
     "variable": "Variable",
+    "variables":"Variables",
     "variable_list": "Variable List"
   },
   "error": {
@@ -413,6 +419,8 @@
     "description": "Inspect possible errors",
     "environment": {
       "add_environment": "Add to Environment",
+      "add_environment_value": "Add value",
+      "empty_value": "Environment value is empty for the variable '{variable}' ",
       "not_found": "Environment variable “{environment}” not found."
     },
     "header": {
diff --git a/packages/hoppscotch-common/src/components/environments/Add.vue b/packages/hoppscotch-common/src/components/environments/Add.vue
index 3d81d1116..3446d2349 100644
--- a/packages/hoppscotch-common/src/components/environments/Add.vue
+++ b/packages/hoppscotch-common/src/components/environments/Add.vue
@@ -21,7 +21,7 @@
           <label for="value" class="min-w-[2.5rem] font-semibold">{{
             t("environment.value")
           }}</label>
-          <input
+          <SmartEnvInput
             v-model="editingValue"
             type="text"
             class="input"
@@ -154,12 +154,14 @@ const addEnvironment = async () => {
     addGlobalEnvVariable({
       key: editingName.value,
       value: editingValue.value,
+      secret: false,
     })
     toast.success(`${t("environment.updated")}`)
   } else if (scope.value.type === "my-environment") {
     addEnvironmentVariable(scope.value.index, {
       key: editingName.value,
       value: editingValue.value,
+      secret: false,
     })
     toast.success(`${t("environment.updated")}`)
   } else {
diff --git a/packages/hoppscotch-common/src/components/environments/ImportExport.vue b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
index d092aedbd..56c2f3869 100644
--- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { Environment } from "@hoppscotch/data"
+import { Environment, NonSecretEnvironment } from "@hoppscotch/data"
 import * as E from "fp-ts/Either"
 import { ref } from "vue"
 
@@ -340,13 +340,13 @@ const showImportFailedError = () => {
 
 const handleImportToStore = async (
   environments: Environment[],
-  globalEnv?: Environment
+  globalEnv?: NonSecretEnvironment
 ) => {
   // if there's a global env, add them to the store
   if (globalEnv) {
-    globalEnv.variables.forEach(({ key, value }) => {
-      addGlobalEnvVariable({ key, value })
-    })
+    globalEnv.variables.forEach(({ key, value, secret }) =>
+      addGlobalEnvVariable({ key, value, secret })
+    )
   }
 
   if (props.environmentType === "MY_ENV") {
diff --git a/packages/hoppscotch-common/src/components/environments/Selector.vue b/packages/hoppscotch-common/src/components/environments/Selector.vue
index 085fa8f0c..f5e463b36 100644
--- a/packages/hoppscotch-common/src/components/environments/Selector.vue
+++ b/packages/hoppscotch-common/src/components/environments/Selector.vue
@@ -210,7 +210,10 @@
                   {{ variable.key }}
                 </span>
                 <span class="min-w-[9rem] w-full truncate text-secondaryLight">
-                  {{ variable.value }}
+                  <template v-if="variable.secret"> ******** </template>
+                  <template v-else>
+                    {{ variable.value }}
+                  </template>
                 </span>
               </div>
               <div v-if="globalEnvs.length === 0" class="text-secondaryLight">
@@ -265,7 +268,10 @@
                   {{ variable.key }}
                 </span>
                 <span class="min-w-[9rem] w-full truncate text-secondaryLight">
-                  {{ variable.value }}
+                  <template v-if="variable.secret"> ******** </template>
+                  <template v-else>
+                    {{ variable.value }}
+                  </template>
                 </span>
               </div>
               <div
@@ -479,15 +485,20 @@ const selectedEnv = computed(() => {
         type: "MY_ENV",
         index: props.modelValue.index,
         name: props.modelValue.environment?.name,
+        variables: props.modelValue.environment?.variables,
       }
     } else if (props.modelValue?.type === "team-environment") {
       return {
         type: "TEAM_ENV",
         name: props.modelValue.environment.environment.name,
         teamEnvID: props.modelValue.environment.id,
+        variables: props.modelValue.environment.environment.variables,
       }
     }
-    return { type: "global", name: "Global" }
+    return {
+      type: "global",
+      name: "Global",
+    }
   }
   if (selectedEnvironmentIndex.value.type === "MY_ENV") {
     const environment =
@@ -582,9 +593,7 @@ const environmentVariables = computed(() => {
 })
 
 const editGlobalEnv = () => {
-  invokeAction("modals.my.environment.edit", {
-    envName: "Global",
-  })
+  invokeAction("modals.global.environment.update", {})
 }
 
 const editEnv = () => {
diff --git a/packages/hoppscotch-common/src/components/environments/index.vue b/packages/hoppscotch-common/src/components/environments/index.vue
index ea526a16e..5d679bfa9 100644
--- a/packages/hoppscotch-common/src/components/environments/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/index.vue
@@ -24,6 +24,8 @@
       :action="action"
       :editing-environment-index="editingEnvironmentIndex"
       :editing-variable-name="editingVariableName"
+      :env-vars="envVars"
+      :is-secret-option-selected="secretOptionSelected"
       @hide-modal="displayModalEdit(false)"
     />
     <EnvironmentsAdd
@@ -37,7 +39,7 @@
 
   <HoppSmartConfirmModal
     :show="showConfirmRemoveEnvModal"
-    :title="t('confirm.remove_team')"
+    :title="`${t('confirm.remove_environment')}`"
     @hide-modal="showConfirmRemoveEnvModal = false"
     @resolve="removeSelectedEnvironment()"
   />
@@ -67,6 +69,7 @@ import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironme
 import { useToast } from "~/composables/toast"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
+import { Environment } from "@hoppscotch/data"
 
 const t = useI18n()
 const toast = useToast()
@@ -88,6 +91,8 @@ const environmentType = ref<EnvironmentsChooseType>({
 const globalEnv = useReadonlyStream(globalEnv$, [])
 
 const globalEnvironment = computed(() => ({
+  v: 1 as const,
+  id: "Global",
   name: "Global",
   variables: globalEnv.value,
 }))
@@ -186,6 +191,7 @@ const action = ref<"new" | "edit">("edit")
 const editingEnvironmentIndex = ref<"Global" | null>(null)
 const editingVariableName = ref("")
 const editingVariableValue = ref("")
+const secretOptionSelected = ref(false)
 
 const position = ref({ top: 0, left: 0 })
 
@@ -203,6 +209,7 @@ const displayModalEdit = (shouldDisplay: boolean) => {
 const editEnvironment = (environmentIndex: "Global") => {
   editingEnvironmentIndex.value = environmentIndex
   action.value = "edit"
+  editingVariableName.value = ""
   displayModalEdit(true)
 }
 
@@ -232,6 +239,9 @@ const removeSelectedEnvironment = () => {
 
 const resetSelectedData = () => {
   editingEnvironmentIndex.value = null
+  editingVariableName.value = ""
+  editingVariableValue.value = ""
+  secretOptionSelected.value = false
 }
 
 defineActionHandler("modals.environment.new", () => {
@@ -243,11 +253,19 @@ defineActionHandler("modals.environment.delete-selected", () => {
   showConfirmRemoveEnvModal.value = true
 })
 
+const additionalVars = ref<Environment["variables"]>([])
+
+const envVars = () => [...globalEnv.value, ...additionalVars.value]
+
 defineActionHandler(
-  "modals.my.environment.edit",
-  ({ envName, variableName }) => {
-    if (variableName) editingVariableName.value = variableName
-    envName === "Global" && editEnvironment("Global")
+  "modals.global.environment.update",
+  ({ variables, isSecret }) => {
+    if (variables) {
+      additionalVars.value = variables
+    }
+    secretOptionSelected.value = isSecret ?? false
+    editEnvironment("Global")
+    editingVariableName.value = "Global"
   }
 )
 
diff --git a/packages/hoppscotch-common/src/components/environments/my/Details.vue b/packages/hoppscotch-common/src/components/environments/my/Details.vue
index 7b9d799aa..28f9f3da3 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -16,76 +16,103 @@
           @submit="saveEnvironment"
         />
 
-        <div class="flex flex-1 items-center justify-between">
-          <label for="variableList" class="p-4">
-            {{ t("environment.variable_list") }}
-          </label>
-          <div class="flex">
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.clear_all')"
-              :icon="clearIcon"
-              @click="clearContent()"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :icon="IconPlus"
-              :title="t('add.new')"
-              @click="addEnvironmentVariable"
-            />
-          </div>
-        </div>
-        <div
-          v-if="evnExpandError"
-          class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
-        >
-          {{ t("environment.nested_overflow") }}
-        </div>
-        <div class="divide-y divide-dividerLight rounded border border-divider">
+        <div class="my-4 flex flex-col border border-divider rounded">
           <div
-            v-for="({ id, env }, index) in vars"
-            :key="`variable-${id}-${index}`"
-            class="flex divide-x divide-dividerLight"
+            v-if="evnExpandError"
+            class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
           >
-            <input
-              v-model="env.key"
-              v-focus
-              class="flex flex-1 bg-transparent px-4 py-2"
-              :placeholder="`${t('count.variable', { count: index + 1 })}`"
-              :name="'param' + index"
-            />
-            <SmartEnvInput
-              v-model="env.value"
-              :select-text-on-mount="env.key === editingVariableName"
-              :placeholder="`${t('count.value', { count: index + 1 })}`"
-              :envs="liveEnvs"
-              :name="'value' + index"
-            />
-            <div class="flex">
-              <HoppButtonSecondary
-                id="variable"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.remove')"
-                :icon="IconTrash"
-                color="red"
-                @click="removeEnvironmentVariable(index)"
-              />
-            </div>
+            {{ t("environment.nested_overflow") }}
           </div>
-          <HoppSmartPlaceholder
-            v-if="vars.length === 0"
-            :src="`/images/states/${colorMode.value}/blockchain.svg`"
-            :alt="`${t('empty.environments')}`"
-            :text="t('empty.environments')"
-          >
-            <template #body>
-              <HoppButtonSecondary
-                :label="`${t('add.new')}`"
-                filled
-                @click="addEnvironmentVariable"
-              />
+          <HoppSmartTabs v-model="selectedEnvOption" render-inactive-tabs>
+            <template #actions>
+              <div class="flex flex-1 items-center justify-between">
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  to="https://docs.hoppscotch.io/documentation/features/environments"
+                  blank
+                  :title="t('app.wiki')"
+                  :icon="IconHelpCircle"
+                />
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="t('action.clear_all')"
+                  :icon="clearIcon"
+                  @click="clearContent()"
+                />
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :icon="IconPlus"
+                  :title="t('add.new')"
+                  @click="addEnvironmentVariable"
+                />
+              </div>
             </template>
-          </HoppSmartPlaceholder>
+
+            <HoppSmartTab
+              v-for="tab in tabsData"
+              :id="tab.id"
+              :key="tab.id"
+              :label="tab.label"
+            >
+              <div
+                class="divide-y divide-dividerLight rounded border border-divider"
+              >
+                <HoppSmartPlaceholder
+                  v-if="tab.variables.length === 0"
+                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                  :alt="tab.emptyStateLabel"
+                  :text="tab.emptyStateLabel"
+                >
+                  <template #body>
+                    <HoppButtonSecondary
+                      :label="`${t('add.new')}`"
+                      filled
+                      :icon="IconPlus"
+                      @click="addEnvironmentVariable"
+                    />
+                  </template>
+                </HoppSmartPlaceholder>
+
+                <template v-else>
+                  <div
+                    v-for="({ id, env }, index) in tab.variables"
+                    :key="`variable-${id}-${index}`"
+                    class="flex divide-x divide-dividerLight"
+                  >
+                    <input
+                      v-model="env.key"
+                      v-focus
+                      class="flex flex-1 bg-transparent px-4 py-2"
+                      :placeholder="`${t('count.variable', {
+                        count: index + 1,
+                      })}`"
+                      :name="'param' + index"
+                    />
+                    <SmartEnvInput
+                      v-model="env.value"
+                      :placeholder="`${t('count.value', { count: index + 1 })}`"
+                      :envs="liveEnvs"
+                      :name="'value' + index"
+                      :secret="tab.isSecret"
+                      :select-text-on-mount="
+                        env.key ? env.key === editingVariableName : false
+                      "
+                    />
+                    <div class="flex">
+                      <HoppButtonSecondary
+                        id="variable"
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="t('action.remove')"
+                        :icon="IconTrash"
+                        color="red"
+                        @click="removeEnvironmentVariable(id)"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </HoppSmartTab>
+          </HoppSmartTabs>
         </div>
       </div>
     </template>
@@ -112,8 +139,8 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import IconDone from "~icons/lucide/check"
 import IconPlus from "~icons/lucide/plus"
 import IconTrash from "~icons/lucide/trash"
-import { clone } from "lodash-es"
-import { computed, ref, watch } from "vue"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import { ComputedRef, computed, ref, watch } from "vue"
 import * as E from "fp-ts/Either"
 import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
@@ -136,12 +163,16 @@ import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 import { environmentsStore } from "~/newstore/environments"
 import { platform } from "~/platform"
+import { useService } from "dioc/vue"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
+import { uniqueId } from "lodash-es"
 
 type EnvironmentVariable = {
   id: number
   env: {
-    key: string
     value: string
+    key: string
+    secret: boolean
   }
 }
 
@@ -155,6 +186,7 @@ const props = withDefaults(
     action: "edit" | "new"
     editingEnvironmentIndex?: number | "Global" | null
     editingVariableName?: string | null
+    isSecretOptionSelected?: boolean
     envVars?: () => Environment["variables"]
   }>(),
   {
@@ -162,6 +194,7 @@ const props = withDefaults(
     action: "edit",
     editingEnvironmentIndex: null,
     editingVariableName: null,
+    isSecretOptionSelected: false,
     envVars: () => [],
   }
 )
@@ -172,11 +205,55 @@ const emit = defineEmits<{
 
 const idTicker = ref(0)
 
+const tabsData: ComputedRef<
+  {
+    id: string
+    label: string
+    emptyStateLabel: string
+    isSecret: boolean
+    variables: EnvironmentVariable[]
+  }[]
+> = computed(() => {
+  return [
+    {
+      id: "variables",
+      label: t("environment.variables"),
+      emptyStateLabel: t("empty.environments"),
+      isSecret: false,
+      variables: nonSecretVars.value,
+    },
+    {
+      id: "secret",
+      label: t("environment.secret"),
+      emptyStateLabel: t("empty.secret_environments"),
+      isSecret: true,
+      variables: secretVars.value,
+    },
+  ]
+})
+
 const editingName = ref<string | null>(null)
+const editingID = ref<string>("")
 const vars = ref<EnvironmentVariable[]>([
-  { id: idTicker.value++, env: { key: "", value: "" } },
+  { id: idTicker.value++, env: { key: "", value: "", secret: false } },
 ])
 
+const secretEnvironmentService = useService(SecretEnvironmentService)
+
+const secretVars = computed(() =>
+  pipe(
+    vars.value,
+    A.filter((e) => e.env.secret)
+  )
+)
+
+const nonSecretVars = computed(() =>
+  pipe(
+    vars.value,
+    A.filter((e) => !e.env.secret)
+  )
+)
+
 const clearIcon = refAutoReset<typeof IconTrash2 | typeof IconDone>(
   IconTrash2,
   1000
@@ -184,14 +261,23 @@ const clearIcon = refAutoReset<typeof IconTrash2 | typeof IconDone>(
 
 const globalVars = useReadonlyStream(globalEnv$, [])
 
+type SelectedEnv = "variables" | "secret"
+
+const selectedEnvOption = ref<SelectedEnv>("variables")
+
 const workingEnv = computed(() => {
   if (props.editingEnvironmentIndex === "Global") {
+    const vars =
+      props.editingVariableName === "Global"
+        ? props.envVars()
+        : getGlobalVariables()
     return {
       name: "Global",
-      variables: getGlobalVariables(),
+      variables: vars,
     } as Environment
   } else if (props.action === "new") {
     return {
+      id: uniqueId(),
       name: "",
       variables: props.envVars(),
     }
@@ -214,6 +300,7 @@ const evnExpandError = computed(() => {
 
   return pipe(
     variables,
+    A.filter(({ secret }) => !secret),
     A.exists(({ value }) => E.isLeft(parseTemplateStringE(value, variables)))
   )
 })
@@ -239,11 +326,29 @@ watch(
   (show) => {
     if (show) {
       editingName.value = workingEnv.value?.name ?? null
+      selectedEnvOption.value = props.isSecretOptionSelected
+        ? "secret"
+        : "variables"
+
+      if (props.editingEnvironmentIndex !== "Global") {
+        editingID.value = workingEnv.value?.id ?? uniqueId()
+      }
       vars.value = pipe(
         workingEnv.value?.variables ?? [],
-        A.map((e) => ({
+        A.mapWithIndex((index, e) => ({
           id: idTicker.value++,
-          env: clone(e),
+          env: {
+            key: e.key,
+            value: e.secret
+              ? secretEnvironmentService.getSecretEnvironmentVariable(
+                  props.editingEnvironmentIndex === "Global"
+                    ? "Global"
+                    : workingEnv.value?.id,
+                  index
+                )?.value ?? ""
+              : e.value,
+            secret: e.secret,
+          },
         }))
       )
     }
@@ -251,7 +356,10 @@ watch(
 )
 
 const clearContent = () => {
-  vars.value = []
+  vars.value = vars.value.filter((e) =>
+    selectedEnvOption.value === "secret" ? !e.env.secret : e.env.secret
+  )
+
   clearIcon.value = IconDone
   toast.success(`${t("state.cleared")}`)
 }
@@ -262,12 +370,16 @@ const addEnvironmentVariable = () => {
     env: {
       key: "",
       value: "",
+      secret: selectedEnvOption.value === "secret",
     },
   })
 }
 
-const removeEnvironmentVariable = (index: number) => {
-  vars.value.splice(index, 1)
+const removeEnvironmentVariable = (id: number) => {
+  const index = vars.value.findIndex((e) => e.id === id)
+  if (index !== -1) {
+    vars.value.splice(index, 1)
+  }
 }
 
 const saveEnvironment = () => {
@@ -276,7 +388,7 @@ const saveEnvironment = () => {
     return
   }
 
-  const filterdVariables = pipe(
+  const filteredVariables = pipe(
     vars.value,
     A.filterMap(
       flow(
@@ -286,14 +398,43 @@ const saveEnvironment = () => {
     )
   )
 
+  const secretVariables = pipe(
+    filteredVariables,
+    A.filterMapWithIndex((i, e) =>
+      e.secret ? O.some({ key: e.key, value: e.value, varIndex: i }) : O.none
+    )
+  )
+
+  if (editingID.value) {
+    secretEnvironmentService.addSecretEnvironment(
+      editingID.value,
+      secretVariables
+    )
+  } else if (props.editingEnvironmentIndex === "Global") {
+    secretEnvironmentService.addSecretEnvironment("Global", secretVariables)
+  }
+
+  const variables = pipe(
+    filteredVariables,
+    A.map((e) =>
+      e.secret ? { key: e.key, secret: e.secret, value: undefined } : e
+    )
+  )
+
   const environmentUpdated: Environment = {
+    v: 1,
+    id: uniqueId(),
     name: editingName.value,
-    variables: filterdVariables,
+    variables,
   }
 
   if (props.action === "new") {
     // Creating a new environment
-    createEnvironment(editingName.value, environmentUpdated.variables)
+    createEnvironment(
+      editingName.value,
+      environmentUpdated.variables,
+      editingID.value
+    )
     setSelectedEnvironmentIndex({
       type: "MY_ENV",
       index: envList.value.length - 1,
@@ -332,6 +473,7 @@ const saveEnvironment = () => {
 
 const hideModal = () => {
   editingName.value = null
+  selectedEnvOption.value = "variables"
   emit("hide-modal")
 }
 </script>
diff --git a/packages/hoppscotch-common/src/components/environments/my/Environment.vue b/packages/hoppscotch-common/src/components/environments/my/Environment.vue
index 04a272442..e5f8a80ea 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Environment.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Environment.vue
@@ -135,6 +135,8 @@ import { useToast } from "@composables/toast"
 import { TippyComponent } from "vue-tippy"
 import { HoppSmartItem } from "@hoppscotch/ui"
 import { exportAsJSON } from "~/helpers/import-export/export/environment"
+import { useService } from "dioc/vue"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
 
 const t = useI18n()
 const toast = useToast()
@@ -150,6 +152,8 @@ const emit = defineEmits<{
 
 const confirmRemove = ref(false)
 
+const secretEnvironmentService = useService(SecretEnvironmentService)
+
 const exportEnvironmentAsJSON = () => {
   const { environment, environmentIndex } = props
   exportAsJSON(environment, environmentIndex)
@@ -168,6 +172,7 @@ const removeEnvironment = () => {
   if (props.environmentIndex === null) return
   if (props.environmentIndex !== "Global") {
     deleteEnvironment(props.environmentIndex, props.environment.id)
+    secretEnvironmentService.deleteSecretEnvironment(props.environment.id)
   }
   toast.success(`${t("state.deleted")}`)
 }
diff --git a/packages/hoppscotch-common/src/components/environments/my/index.vue b/packages/hoppscotch-common/src/components/environments/my/index.vue
index f066df1e4..9eaa2f00c 100644
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -67,6 +67,7 @@
       :action="action"
       :editing-environment-index="editingEnvironmentIndex"
       :editing-variable-name="editingVariableName"
+      :is-secret-option-selected="secretOptionSelected"
       @hide-modal="displayModalEdit(false)"
     />
     <EnvironmentsImportExport
@@ -99,6 +100,7 @@ const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
 const editingEnvironmentIndex = ref<number | null>(null)
 const editingVariableName = ref("")
+const secretOptionSelected = ref(false)
 
 const displayModalAdd = (shouldDisplay: boolean) => {
   action.value = "new"
@@ -120,18 +122,23 @@ const editEnvironment = (environmentIndex: number) => {
 }
 const resetSelectedData = () => {
   editingEnvironmentIndex.value = null
+  editingVariableName.value = ""
+  secretOptionSelected.value = false
 }
 
 defineActionHandler(
   "modals.my.environment.edit",
-  ({ envName, variableName }) => {
+  ({ envName, variableName, isSecret }) => {
     if (variableName) editingVariableName.value = variableName
     const envIndex: number = environments.value.findIndex(
       (environment: Environment) => {
         return environment.name === envName
       }
     )
-    if (envName !== "Global") editEnvironment(envIndex)
+    if (envName !== "Global") {
+      editEnvironment(envIndex)
+      secretOptionSelected.value = isSecret ?? false
+    }
   }
 )
 </script>
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Details.vue b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
index d54d18034..906a7a608 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -16,90 +16,112 @@
           @submit="saveEnvironment"
         />
 
-        <div class="flex flex-1 items-center justify-between">
-          <label for="variableList" class="p-4">
-            {{ t("environment.variable_list") }}
-          </label>
-          <div v-if="!isViewer" class="flex">
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.clear_all')"
-              :icon="clearIcon"
-              @click="clearContent()"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :icon="IconPlus"
-              :title="t('add.new')"
-              @click="addEnvironmentVariable"
-            />
-          </div>
-        </div>
-        <div
-          v-if="evnExpandError"
-          class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
-        >
-          {{ t("environment.nested_overflow") }}
-        </div>
-        <div class="divide-y divide-dividerLight rounded border border-divider">
+        <div class="my-4 flex flex-col border border-divider rounded">
           <div
-            v-for="({ id, env }, index) in vars"
-            :key="`variable-${id}-${index}`"
-            class="flex divide-x divide-dividerLight"
+            v-if="evnExpandError"
+            class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
           >
-            <input
-              v-model="env.key"
-              v-focus
-              class="flex flex-1 bg-transparent px-4 py-2"
-              :class="isViewer && 'opacity-25'"
-              :placeholder="`${t('count.variable', { count: index + 1 })}`"
-              :name="'param' + index"
-              :disabled="isViewer"
-            />
-            <SmartEnvInput
-              v-model="env.value"
-              :select-text-on-mount="env.key === editingVariableName"
-              :placeholder="`${t('count.value', { count: index + 1 })}`"
-              :envs="liveEnvs"
-              :name="'value' + index"
-              :readonly="isViewer"
-            />
-            <div v-if="!isViewer" class="flex">
-              <HoppButtonSecondary
-                id="variable"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.remove')"
-                :icon="IconTrash"
-                color="red"
-                @click="removeEnvironmentVariable(index)"
-              />
-            </div>
+            {{ t("environment.nested_overflow") }}
           </div>
-          <HoppSmartPlaceholder
-            v-if="vars.length === 0"
-            :src="`/images/states/${colorMode.value}/blockchain.svg`"
-            :alt="`${t('empty.environments')}`"
-            :text="t('empty.environments')"
-          >
-            <template #body>
-              <HoppButtonSecondary
-                v-if="isViewer"
-                disabled
-                :label="`${t('add.new')}`"
-                filled
-              />
-              <HoppButtonSecondary
-                v-else
-                :label="`${t('add.new')}`"
-                filled
-                @click="addEnvironmentVariable"
-              />
+          <HoppSmartTabs v-model="selectedEnvOption" render-inactive-tabs>
+            <template #actions>
+              <div class="flex flex-1 items-center justify-between">
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  to="https://docs.hoppscotch.io/documentation/features/environments"
+                  blank
+                  :title="t('app.wiki')"
+                  :icon="IconHelpCircle"
+                />
+                <HoppButtonSecondary
+                  v-if="!isViewer"
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="t('action.clear_all')"
+                  :icon="clearIcon"
+                  @click="clearContent()"
+                />
+                <HoppButtonSecondary
+                  v-if="!isViewer"
+                  v-tippy="{ theme: 'tooltip' }"
+                  :icon="IconPlus"
+                  :title="t('add.new')"
+                  @click="addEnvironmentVariable"
+                />
+              </div>
             </template>
-          </HoppSmartPlaceholder>
+
+            <HoppSmartTab
+              v-for="tab in tabsData"
+              :id="tab.id"
+              :key="tab.id"
+              :label="tab.label"
+            >
+              <div
+                class="divide-y divide-dividerLight rounded border border-divider"
+              >
+                <HoppSmartPlaceholder
+                  v-if="tab.variables.length === 0"
+                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                  :alt="tab.emptyStateLabel"
+                  :text="tab.emptyStateLabel"
+                >
+                  <template #body>
+                    <HoppButtonSecondary
+                      v-if="!isViewer"
+                      :label="`${t('add.new')}`"
+                      filled
+                      :icon="IconPlus"
+                      @click="addEnvironmentVariable"
+                    />
+                  </template>
+                </HoppSmartPlaceholder>
+
+                <template v-else>
+                  <div
+                    v-for="({ id, env }, index) in tab.variables"
+                    :key="`variable-${id}-${index}`"
+                    class="flex divide-x divide-dividerLight"
+                  >
+                    <input
+                      v-model="env.key"
+                      v-focus
+                      class="flex flex-1 bg-transparent px-4 py-2"
+                      :placeholder="`${t('count.variable', {
+                        count: index + 1,
+                      })}`"
+                      :name="'param' + index"
+                      :disabled="isViewer"
+                    />
+                    <SmartEnvInput
+                      v-model="env.value"
+                      :select-text-on-mount="
+                        env.key ? env.key === editingVariableName : false
+                      "
+                      :placeholder="`${t('count.value', { count: index + 1 })}`"
+                      :envs="liveEnvs"
+                      :name="'value' + index"
+                      :secret="tab.isSecret"
+                      :readonly="isViewer && !tab.isSecret"
+                    />
+                    <div v-if="!isViewer" class="flex">
+                      <HoppButtonSecondary
+                        id="variable"
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="t('action.remove')"
+                        :icon="IconTrash"
+                        color="red"
+                        @click="removeEnvironmentVariable(id)"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </HoppSmartTab>
+          </HoppSmartTabs>
         </div>
       </div>
     </template>
-    <template v-if="!isViewer" #footer>
+    <template #footer>
       <span class="flex space-x-2">
         <HoppButtonPrimary
           :label="`${t('action.save')}`"
@@ -119,7 +141,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue"
+import { ComputedRef, computed, ref, watch } from "vue"
 import * as E from "fp-ts/Either"
 import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
@@ -141,13 +163,17 @@ import IconTrash from "~icons/lucide/trash"
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconDone from "~icons/lucide/check"
 import IconPlus from "~icons/lucide/plus"
+import IconHelpCircle from "~icons/lucide/help-circle"
 import { platform } from "~/platform"
+import { useService } from "dioc/vue"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
 
 type EnvironmentVariable = {
   id: number
   env: {
     key: string
     value: string
+    secret: boolean
   }
 }
 
@@ -163,6 +189,7 @@ const props = withDefaults(
     editingTeamId: string | undefined
     editingVariableName?: string | null
     isViewer?: boolean
+    isSecretOptionSelected?: boolean
     envVars?: () => Environment["variables"]
   }>(),
   {
@@ -172,6 +199,7 @@ const props = withDefaults(
     editingTeamId: "",
     editingVariableName: null,
     isViewer: false,
+    isSecretOptionSelected: false,
     envVars: () => [],
   }
 )
@@ -182,11 +210,59 @@ const emit = defineEmits<{
 
 const idTicker = ref(0)
 
+const tabsData: ComputedRef<
+  {
+    id: string
+    label: string
+    emptyStateLabel: string
+    isSecret: boolean
+    variables: EnvironmentVariable[]
+  }[]
+> = computed(() => {
+  return [
+    {
+      id: "variables",
+      label: t("environment.variables"),
+      emptyStateLabel: t("empty.environments"),
+      isSecret: false,
+      variables: nonSecretVars.value,
+    },
+    {
+      id: "secret",
+      label: t("environment.secret"),
+      emptyStateLabel: t("empty.secret_environments"),
+      isSecret: true,
+      variables: secretVars.value,
+    },
+  ]
+})
+
 const editingName = ref<string | null>(null)
+const editingID = ref<string | null>(null)
 const vars = ref<EnvironmentVariable[]>([
-  { id: idTicker.value++, env: { key: "", value: "" } },
+  { id: idTicker.value++, env: { key: "", value: "", secret: false } },
 ])
 
+const secretEnvironmentService = useService(SecretEnvironmentService)
+
+const secretVars = computed(() =>
+  pipe(
+    vars.value,
+    A.filter((e) => e.env.secret)
+  )
+)
+
+const nonSecretVars = computed(() =>
+  pipe(
+    vars.value,
+    A.filter((e) => !e.env.secret)
+  )
+)
+
+type SelectedEnv = "variables" | "secret"
+
+const selectedEnvOption = ref<SelectedEnv>("variables")
+
 const clearIcon = refAutoReset<typeof IconTrash2 | typeof IconDone>(
   IconTrash2,
   1000
@@ -215,22 +291,34 @@ watch(
   () => props.show,
   (show) => {
     if (show) {
+      editingName.value = props.editingEnvironment?.environment.name ?? null
+      selectedEnvOption.value = props.isSecretOptionSelected
+        ? "secret"
+        : "variables"
       if (props.action === "new") {
-        editingName.value = null
         vars.value = pipe(
           props.envVars() ?? [],
-          A.map((e: { key: string; value: string }) => ({
+          A.map((e) => ({
             id: idTicker.value++,
             env: clone(e),
           }))
         )
       } else if (props.editingEnvironment !== null) {
-        editingName.value = props.editingEnvironment.environment.name ?? null
+        editingID.value = props.editingEnvironment.id
         vars.value = pipe(
           props.editingEnvironment.environment.variables ?? [],
-          A.map((e: { key: string; value: string }) => ({
+          A.mapWithIndex((index, e) => ({
             id: idTicker.value++,
-            env: clone(e),
+            env: {
+              key: e.key,
+              value: e.secret
+                ? secretEnvironmentService.getSecretEnvironmentVariable(
+                    editingID.value ?? "",
+                    index
+                  )?.value ?? ""
+                : e.value,
+              secret: e.secret,
+            },
           }))
         )
       }
@@ -250,12 +338,16 @@ const addEnvironmentVariable = () => {
     env: {
       key: "",
       value: "",
+      secret: selectedEnvOption.value === "secret",
     },
   })
 }
 
-const removeEnvironmentVariable = (index: number) => {
-  vars.value.splice(index, 1)
+const removeEnvironmentVariable = (id: number) => {
+  const index = vars.value.findIndex((e) => e.id === id)
+  if (index !== -1) {
+    vars.value.splice(index, 1)
+  }
 }
 
 const isLoading = ref(false)
@@ -278,52 +370,102 @@ const saveEnvironment = async () => {
     )
   )
 
+  const secretVariables = pipe(
+    filterdVariables,
+    A.filterMapWithIndex((i, e) =>
+      e.secret ? O.some({ key: e.key, value: e.value, varIndex: i }) : O.none
+    )
+  )
+
+  const variables = pipe(
+    filterdVariables,
+    A.map((e) =>
+      e.secret ? { key: e.key, secret: e.secret, value: undefined } : e
+    )
+  )
+
+  const environmentUpdated: Environment = {
+    v: 1,
+    id: editingID.value ?? "",
+    name: editingName.value,
+    variables,
+  }
+
   if (props.action === "new") {
     platform.analytics?.logEvent({
       type: "HOPP_CREATE_ENVIRONMENT",
       workspaceType: "team",
     })
 
-    await pipe(
-      createTeamEnvironment(
-        JSON.stringify(filterdVariables),
-        props.editingTeamId,
-        editingName.value
-      ),
-      TE.match(
-        (err: GQLError<string>) => {
-          console.error(err)
-          toast.error(`${getErrorMessage(err)}`)
-        },
-        () => {
-          hideModal()
-          toast.success(`${t("environment.created")}`)
-        }
-      )
-    )()
+    if (!props.isViewer) {
+      await pipe(
+        createTeamEnvironment(
+          JSON.stringify(environmentUpdated.variables),
+          props.editingTeamId,
+          environmentUpdated.name
+        ),
+        TE.match(
+          (err: GQLError<string>) => {
+            console.error(err)
+            toast.error(`${getErrorMessage(err)}`)
+            isLoading.value = false
+          },
+          (res) => {
+            const envID = res.createTeamEnvironment.id
+            if (envID) {
+              secretEnvironmentService.addSecretEnvironment(
+                envID,
+                secretVariables
+              )
+            }
+            hideModal()
+            toast.success(`${t("environment.created")}`)
+            isLoading.value = false
+          }
+        )
+      )()
+    }
   } else {
     if (!props.editingEnvironment) {
       console.error("No Environment Found")
       return
     }
 
-    await pipe(
-      updateTeamEnvironment(
-        JSON.stringify(filterdVariables),
-        props.editingEnvironment.id,
-        editingName.value
-      ),
-      TE.match(
-        (err: GQLError<string>) => {
-          console.error(err)
-          toast.error(`${getErrorMessage(err)}`)
-        },
-        () => {
-          hideModal()
-          toast.success(`${t("environment.updated")}`)
-        }
+    if (editingID.value) {
+      secretEnvironmentService.addSecretEnvironment(
+        editingID.value,
+        secretVariables
       )
-    )()
+
+      // If the user is a viewer, we don't need to update the environment in BE
+      // just update the secret environment in the local storage
+      if (props.isViewer) {
+        hideModal()
+        toast.success(`${t("environment.updated")}`)
+      }
+    }
+
+    if (!props.isViewer) {
+      await pipe(
+        updateTeamEnvironment(
+          JSON.stringify(environmentUpdated.variables),
+          props.editingEnvironment.id,
+          environmentUpdated.name
+        ),
+        TE.match(
+          (err: GQLError<string>) => {
+            console.error(err)
+            toast.error(`${getErrorMessage(err)}`)
+            isLoading.value = false
+          },
+          () => {
+            hideModal()
+            toast.success(`${t("environment.updated")}`)
+            isLoading.value = false
+          }
+        )
+      )()
+    }
   }
 
   isLoading.value = false
@@ -331,6 +473,7 @@ const saveEnvironment = async () => {
 
 const hideModal = () => {
   editingName.value = null
+  selectedEnvOption.value = "variables"
   emit("hide-modal")
 }
 
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Environment.vue b/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
index 4bff99337..2271a997b 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
@@ -19,7 +19,6 @@
     </span>
     <span>
       <tippy
-        v-if="!isViewer"
         ref="options"
         interactive
         trigger="click"
@@ -57,6 +56,7 @@
             />
 
             <HoppSmartItem
+              v-if="!isViewer"
               ref="duplicate"
               :icon="IconCopy"
               :label="`${t('action.duplicate')}`"
@@ -69,6 +69,7 @@
               "
             />
             <HoppSmartItem
+              v-if="!isViewer"
               ref="exportAsJsonEl"
               :icon="IconEdit"
               :label="`${t('export.as_json')}`"
@@ -81,6 +82,7 @@
               "
             />
             <HoppSmartItem
+              v-if="!isViewer"
               ref="deleteAction"
               :icon="IconTrash2"
               :label="`${t('action.delete')}`"
@@ -124,6 +126,8 @@ import IconMoreVertical from "~icons/lucide/more-vertical"
 import { TippyComponent } from "vue-tippy"
 import { HoppSmartItem } from "@hoppscotch/ui"
 import { exportAsJSON } from "~/helpers/import-export/export/environment"
+import { useService } from "dioc/vue"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
 
 const t = useI18n()
 const toast = useToast()
@@ -137,6 +141,8 @@ const emit = defineEmits<{
   (e: "edit-environment"): void
 }>()
 
+const secretEnvironmentService = useService(SecretEnvironmentService)
+
 const confirmRemove = ref(false)
 
 const exportEnvironmentAsJSON = () =>
@@ -161,6 +167,7 @@ const removeEnvironment = () => {
       },
       () => {
         toast.success(`${t("team_environment.deleted")}`)
+        secretEnvironmentService.deleteSecretEnvironment(props.environment.id)
       }
     )
   )()
diff --git a/packages/hoppscotch-common/src/components/environments/teams/index.vue b/packages/hoppscotch-common/src/components/environments/teams/index.vue
index e1f161a84..b8aa2bfdf 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -105,6 +105,7 @@
       :editing-environment="editingEnvironment"
       :editing-team-id="team?.id"
       :editing-variable-name="editingVariableName"
+      :is-secret-option-selected="secretOptionSelected"
       :is-viewer="team?.myRole === 'VIEWER'"
       @hide-modal="displayModalEdit(false)"
     />
@@ -148,6 +149,7 @@ const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
 const editingEnvironment = ref<TeamEnvironment | null>(null)
 const editingVariableName = ref("")
+const secretOptionSelected = ref(false)
 
 const isTeamViewer = computed(() => props.team?.myRole === "VIEWER")
 
@@ -171,6 +173,8 @@ const editEnvironment = (environment: TeamEnvironment | null) => {
 }
 const resetSelectedData = () => {
   editingEnvironment.value = null
+  editingVariableName.value = ""
+  secretOptionSelected.value = false
 }
 
 const getErrorMessage = (err: GQLError<string>) => {
@@ -187,12 +191,15 @@ const getErrorMessage = (err: GQLError<string>) => {
 
 defineActionHandler(
   "modals.team.environment.edit",
-  ({ envName, variableName }) => {
+  ({ envName, variableName, isSecret }) => {
     if (variableName) editingVariableName.value = variableName
     const teamEnvToEdit = props.teamEnvironments.find(
       (environment) => environment.environment.name === envName
     )
-    if (teamEnvToEdit) editEnvironment(teamEnvToEdit)
+    if (teamEnvToEdit) {
+      editEnvironment(teamEnvToEdit)
+      secretOptionSelected.value = isSecret ?? false
+    }
   }
 )
 </script>
diff --git a/packages/hoppscotch-common/src/components/http/CodegenModal.vue b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
index a793dbef1..6747a1c13 100644
--- a/packages/hoppscotch-common/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
@@ -187,6 +187,8 @@ const copyCodeIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
 const requestCode = computed(() => {
   const aggregateEnvs = getAggregateEnvs()
   const env: Environment = {
+    v: 1,
+    id: "env",
     name: "Env",
     variables: aggregateEnvs,
   }
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index 1bf7effd8..49ec74461 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -553,7 +553,7 @@ const clearContent = () => {
 const aggregateEnvs = useReadonlyStream(aggregateEnvs$, getAggregateEnvs())
 
 const computedHeaders = computed(() =>
-  getComputedHeaders(request.value, aggregateEnvs.value).map(
+  getComputedHeaders(request.value, aggregateEnvs.value, false).map(
     (header, index) => ({
       id: `header-${index}`,
       ...header,
@@ -606,7 +606,8 @@ const inheritedProperties = computed(() => {
   const computedAuthHeader = getComputedAuthHeaders(
     aggregateEnvs.value,
     request.value,
-    props.inheritedProperties.auth.inheritedAuth
+    props.inheritedProperties.auth.inheritedAuth,
+    false
   )[0]
 
   if (
diff --git a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
index ee9d2f1c0..b2aca464f 100644
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
@@ -112,7 +112,7 @@ const handleAccessTokenRequest = async () => {
   }
 
   const envs = getCombinedEnvVariables()
-  const envVars = [...envs.selected, ...envs.global]
+  const envVars = [...envs.selected.variables, ...envs.global]
 
   try {
     const tokenReqParams = {
diff --git a/packages/hoppscotch-common/src/components/http/TabHead.vue b/packages/hoppscotch-common/src/components/http/TabHead.vue
index 22ff669a8..5f90c7056 100644
--- a/packages/hoppscotch-common/src/components/http/TabHead.vue
+++ b/packages/hoppscotch-common/src/components/http/TabHead.vue
@@ -64,7 +64,6 @@
             :icon="IconShare2"
             :label="t('tab.share_tab_request')"
             :shortcut="['S']"
-            :new="true"
             @click="
               () => {
                 emit('share-tab-request')
diff --git a/packages/hoppscotch-common/src/components/http/TestResult.vue b/packages/hoppscotch-common/src/components/http/TestResult.vue
index e87ecf286..2d5aaa2a6 100644
--- a/packages/hoppscotch-common/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-common/src/components/http/TestResult.vue
@@ -211,7 +211,6 @@ import { useI18n } from "@composables/i18n"
 import {
   globalEnv$,
   selectedEnvironmentIndex$,
-  setGlobalEnvVariables,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
 import { HoppTestResult } from "~/helpers/types/HoppTestResult"
@@ -225,6 +224,7 @@ import { useColorMode } from "~/composables/theming"
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { WorkspaceService } from "~/services/workspace.service"
+import { invokeAction } from "~/helpers/actions"
 
 const props = defineProps<{
   modelValue: HoppTestResult | null | undefined
@@ -304,9 +304,10 @@ const globalHasAdditions = computed(() => {
 
 const addEnvToGlobal = () => {
   if (!testResults.value?.envDiff.selected.additions) return
-  setGlobalEnvVariables([
-    ...globalEnvVars.value,
-    ...testResults.value.envDiff.selected.additions,
-  ])
+
+  invokeAction("modals.global.environment.update", {
+    variables: testResults.value.envDiff.selected.additions,
+    isSecret: false,
+  })
 }
 </script>
diff --git a/packages/hoppscotch-common/src/components/smart/EnvInput.vue b/packages/hoppscotch-common/src/components/smart/EnvInput.vue
index f2a899f4f..72be1bb01 100644
--- a/packages/hoppscotch-common/src/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-common/src/components/smart/EnvInput.vue
@@ -3,7 +3,18 @@
     <div
       class="no-scrollbar absolute inset-0 flex flex-1 divide-x divide-dividerLight overflow-x-auto"
     >
+      <input
+        v-if="isSecret"
+        id="secret"
+        v-model="secretText"
+        name="secret"
+        :placeholder="t('environment.secret_value')"
+        class="flex flex-1 bg-transparent px-4"
+        :class="styles"
+        type="password"
+      />
       <div
+        v-else
         ref="editor"
         :placeholder="placeholder"
         class="flex flex-1"
@@ -11,7 +22,14 @@
         @click="emit('click', $event)"
         @keydown="handleKeystroke"
         @focusin="showSuggestionPopover = true"
-      ></div>
+      />
+      <HoppButtonSecondary
+        v-if="secret"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="isSecret ? t('action.show_secret') : t('action.hide_secret')"
+        :icon="isSecret ? IconEyeoff : IconEye"
+        @click="toggleSecret"
+      />
       <AppInspection
         :inspection-results="inspectionResults"
         class="sticky inset-y-0 right-0 rounded-r bg-primary"
@@ -61,18 +79,29 @@ import { history, historyKeymap } from "@codemirror/commands"
 import { inputTheme } from "~/helpers/editor/themes/baseTheme"
 import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
 import { useReadonlyStream } from "@composables/stream"
-import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
+import {
+  AggregateEnvironment,
+  aggregateEnvsWithSecrets$,
+} from "~/newstore/environments"
 import { platform } from "~/platform"
 import { onClickOutside, useDebounceFn } from "@vueuse/core"
 import { InspectorResult } from "~/services/inspection"
 import { invokeAction } from "~/helpers/actions"
+import { Environment } from "@hoppscotch/data"
+import { useI18n } from "~/composables/i18n"
+import IconEye from "~icons/lucide/eye"
+import IconEyeoff from "~icons/lucide/eye-off"
+
+const t = useI18n()
+
+type Env = Environment["variables"][number] & { source: string }
 
 const props = withDefaults(
   defineProps<{
     modelValue?: string
     placeholder?: string
     styles?: string
-    envs?: { key: string; value: string; source: string }[] | null
+    envs?: Env[] | null
     focus?: boolean
     selectTextOnMount?: boolean
     environmentHighlights?: boolean
@@ -80,6 +109,7 @@ const props = withDefaults(
     autoCompleteSource?: string[]
     inspectionResults?: InspectorResult[] | undefined
     contextMenuEnabled?: boolean
+    secret?: boolean
   }>(),
   {
     modelValue: "",
@@ -93,6 +123,7 @@ const props = withDefaults(
     inspectionResult: undefined,
     inspectionResults: undefined,
     contextMenuEnabled: true,
+    secret: false,
   }
 )
 
@@ -118,10 +149,27 @@ const showSuggestionPopover = ref(false)
 const suggestionsMenu = ref<any | null>(null)
 const autoCompleteWrapper = ref<any | null>(null)
 
+const isSecret = ref(props.secret)
+
+const secretText = ref(props.modelValue)
+
+watch(
+  () => secretText.value,
+  (newVal) => {
+    if (isSecret.value) {
+      updateModelValue(newVal)
+    }
+  }
+)
+
 onClickOutside(autoCompleteWrapper, () => {
   showSuggestionPopover.value = false
 })
 
+const toggleSecret = () => {
+  isSecret.value = !isSecret.value
+}
+
 //filter autocompleteSource with unique values
 const uniqueAutoCompleteSource = computed(() => {
   if (props.autoCompleteSource) {
@@ -169,8 +217,6 @@ watch(
 )
 
 const handleKeystroke = (ev: KeyboardEvent) => {
-  if (!props.autoCompleteSource) return
-
   if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(ev.key)) {
     ev.preventDefault()
   }
@@ -307,19 +353,28 @@ watch(
 let clipboardEv: ClipboardEvent | null = null
 let pastedValue: string | null = null
 
-const aggregateEnvs = useReadonlyStream(aggregateEnvs$, []) as Ref<
+const aggregateEnvs = useReadonlyStream(aggregateEnvsWithSecrets$, []) as Ref<
   AggregateEnvironment[]
 >
 
-const envVars = computed(() =>
-  props.envs
-    ? props.envs.map((x) => ({
-        key: x.key,
-        value: x.value,
-        sourceEnv: x.source,
-      }))
+const envVars = computed(() => {
+  return props.envs
+    ? props.envs.map((x) => {
+        if (x.secret) {
+          return {
+            key: x.key,
+            sourceEnv: "source" in x ? x.source : null,
+            value: "********",
+          }
+        }
+        return {
+          key: x.key,
+          value: x.value,
+          sourceEnv: "source" in x ? x.source : null,
+        }
+      })
     : aggregateEnvs.value
-)
+})
 
 const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
 
@@ -363,17 +418,28 @@ const initView = (el: any) => {
     el.addEventListener("keyup", debounceFn)
   }
 
+  const extensions: Extension = getExtensions(props.readonly || isSecret.value)
+  view.value = new EditorView({
+    parent: el,
+    state: EditorState.create({
+      doc: props.modelValue,
+      extensions,
+    }),
+  })
+}
+
+const getExtensions = (readonly: boolean): Extension => {
   const extensions: Extension = [
     EditorView.contentAttributes.of({ "aria-label": props.placeholder }),
     EditorView.contentAttributes.of({ "data-enable-grammarly": "false" }),
     EditorView.updateListener.of((update) => {
-      if (props.readonly) {
+      if (readonly) {
         update.view.contentDOM.inputMode = "none"
       }
     }),
-    EditorState.changeFilter.of(() => !props.readonly),
+    EditorState.changeFilter.of(() => !readonly),
     inputTheme,
-    props.readonly
+    readonly
       ? EditorView.theme({
           ".cm-content": {
             caretColor: "var(--secondary-dark-color)",
@@ -384,6 +450,7 @@ const initView = (el: any) => {
         })
       : EditorView.theme({}),
     tooltips({
+      parent: document.body,
       position: "absolute",
     }),
     props.environmentHighlights ? envTooltipPlugin : [],
@@ -405,7 +472,8 @@ const initView = (el: any) => {
     ViewPlugin.fromClass(
       class {
         update(update: ViewUpdate) {
-          if (props.readonly) return
+          if (readonly) return
+
           if (update.docChanged) {
             const prevValue = clone(cachedValue.value)
 
@@ -454,14 +522,7 @@ const initView = (el: any) => {
     history(),
     keymap.of([...historyKeymap]),
   ]
-
-  view.value = new EditorView({
-    parent: el,
-    state: EditorState.create({
-      doc: props.modelValue,
-      extensions,
-    }),
-  })
+  return extensions
 }
 
 const triggerTextSelection = () => {
@@ -474,11 +535,11 @@ const triggerTextSelection = () => {
     })
   })
 }
-
 onMounted(() => {
   if (editor.value) {
     if (!view.value) initView(editor.value)
     if (props.selectTextOnMount) triggerTextSelection()
+    if (props.focus) view.value?.focus()
     platform.ui?.onCodemirrorInstanceMount?.(editor.value)
   }
 })
diff --git a/packages/hoppscotch-common/src/composables/codemirror.ts b/packages/hoppscotch-common/src/composables/codemirror.ts
index 5de426101..58f69e06a 100644
--- a/packages/hoppscotch-common/src/composables/codemirror.ts
+++ b/packages/hoppscotch-common/src/composables/codemirror.ts
@@ -4,6 +4,7 @@ import {
   ViewPlugin,
   ViewUpdate,
   placeholder,
+  tooltips,
 } from "@codemirror/view"
 import {
   Extension,
@@ -269,6 +270,7 @@ export function useCodemirror(
       basicSetup,
       baseTheme,
       syntaxHighlighting(baseHighlightStyle, { fallback: true }),
+
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
@@ -318,6 +320,7 @@ export function useCodemirror(
           }
         }
       ),
+
       EditorView.domEventHandlers({
         scroll(event) {
           if (event.target && options.contextMenuEnabled) {
@@ -359,6 +362,10 @@ export function useCodemirror(
           run: indentLess,
         },
       ]),
+      tooltips({
+        parent: document.body,
+        position: "absolute",
+      }),
       EditorView.contentAttributes.of({ "data-enable-grammarly": "false" }),
       additionalExts.of(options.additionalExts ?? []),
     ]
diff --git a/packages/hoppscotch-common/src/helpers/RequestRunner.ts b/packages/hoppscotch-common/src/helpers/RequestRunner.ts
index a653226f6..0ca299051 100644
--- a/packages/hoppscotch-common/src/helpers/RequestRunner.ts
+++ b/packages/hoppscotch-common/src/helpers/RequestRunner.ts
@@ -30,6 +30,13 @@ import { HoppRESTResponse } from "./types/HoppRESTResponse"
 import { HoppTestData, HoppTestResult } from "./types/HoppTestResult"
 import { getEffectiveRESTRequest } from "./utils/EffectiveURL"
 import { isJSONContentType } from "./utils/contenttypes"
+import {
+  SecretEnvironmentService,
+  SecretVariable,
+} from "~/services/secret-environment.service"
+import { getService } from "~/modules/dioc"
+
+const secretEnvironmentService = getService(SecretEnvironmentService)
 
 const getTestableBody = (
   res: HoppRESTResponse & { type: "success" | "fail" }
@@ -58,15 +65,63 @@ const getTestableBody = (
   return x
 }
 
-const combineEnvVariables = (env: {
+const combineEnvVariables = (envs: {
   global: Environment["variables"]
   selected: Environment["variables"]
-}) => [...env.selected, ...env.global]
+}) => [...envs.selected, ...envs.global]
 
 export const executedResponses$ = new Subject<
   HoppRESTResponse & { type: "success" | "fail " }
 >()
 
+/**
+ * Used to update the environment schema with the secret variables
+ * and store the secret variable values in the secret environment service
+ * @param envs The environment variables to update
+ * @param type Whether the environment variables are global or selected
+ * @returns the updated environment variables
+ */
+const updateEnvironmentsWithSecret = (
+  envs: Environment["variables"] &
+    {
+      secret: true
+      value: string | undefined
+      key: string
+    }[],
+  type: "global" | "selected"
+) => {
+  const currentEnvID =
+    type === "selected" ? getCurrentEnvironment().id : "Global"
+
+  const updatedSecretEnvironments: SecretVariable[] = []
+
+  const updatedEnv = pipe(
+    envs,
+    A.mapWithIndex((index, e) => {
+      if (e.secret) {
+        updatedSecretEnvironments.push({
+          key: e.key,
+          value: e.value ?? "",
+          varIndex: index,
+        })
+
+        // delete the value from the environment
+        // so that it doesn't get saved in the environment
+        delete e.value
+        return e
+      }
+      return e
+    })
+  )
+  if (currentEnvID) {
+    secretEnvironmentService.addSecretEnvironment(
+      currentEnvID,
+      updatedSecretEnvironments
+    )
+  }
+  return updatedEnv
+}
+
 export function runRESTRequest$(
   tab: Ref<HoppTab<HoppRESTDocument>>
 ): [
@@ -154,15 +209,36 @@ export function runRESTRequest$(
           )
 
           if (E.isRight(runResult)) {
+            const updatedGlobalEnvVariables = updateEnvironmentsWithSecret(
+              cloneDeep(runResult.right.envs.global),
+              "global"
+            )
+
+            const updatedSelectedEnvVariables = updateEnvironmentsWithSecret(
+              cloneDeep(runResult.right.envs.selected),
+              "selected"
+            )
+
             // set the response in the tab so that multiple tabs can run request simultaneously
             tab.value.document.response = res
 
-            tab.value.document.testResults = translateToSandboxTestResults(
-              runResult.right
+            const updatedRunResult = {
+              ...runResult.right,
+              envs: {
+                global: updatedGlobalEnvVariables,
+                selected: updatedSelectedEnvVariables,
+              },
+            }
+
+            tab.value.document.testResults =
+              translateToSandboxTestResults(updatedRunResult)
+
+            setGlobalEnvVariables(
+              updateEnvironmentsWithSecret(
+                runResult.right.envs.global,
+                "global"
+              )
             )
-
-            setGlobalEnvVariables(runResult.right.envs.global)
-
             if (
               environmentsStore.value.selectedEnvironmentIndex.type === "MY_ENV"
             ) {
@@ -173,8 +249,10 @@ export function runRESTRequest$(
               updateEnvironment(
                 environmentsStore.value.selectedEnvironmentIndex.index,
                 {
-                  ...env,
-                  variables: runResult.right.envs.selected,
+                  name: env.name,
+                  v: 1,
+                  id: env.id ?? "",
+                  variables: updatedRunResult.envs.selected,
                 }
               )
             } else if (
@@ -186,7 +264,7 @@ export function runRESTRequest$(
               })
               pipe(
                 updateTeamEnvironment(
-                  JSON.stringify(runResult.right.envs.selected),
+                  JSON.stringify(updatedRunResult.envs.selected),
                   environmentsStore.value.selectedEnvironmentIndex.teamEnvID,
                   env.name
                 )
@@ -275,7 +353,6 @@ function translateToSandboxTestResults(
 
   const globals = cloneDeep(getGlobalVariables())
   const env = getCurrentEnvironment()
-
   return {
     description: "",
     expectResults: testDesc.tests.expectResults,
diff --git a/packages/hoppscotch-common/src/helpers/actions.ts b/packages/hoppscotch-common/src/helpers/actions.ts
index 05fd1909b..cef62d130 100644
--- a/packages/hoppscotch-common/src/helpers/actions.ts
+++ b/packages/hoppscotch-common/src/helpers/actions.ts
@@ -5,7 +5,7 @@
 import { Ref, onBeforeUnmount, onMounted, reactive, watch } from "vue"
 import { BehaviorSubject } from "rxjs"
 import { HoppRESTDocument } from "./rest/document"
-import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
+import { Environment, HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
 import { RESTOptionTabs } from "~/components/http/RequestOptions.vue"
 import { HoppGQLSaveContext } from "./graphql/document"
 import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
@@ -43,6 +43,7 @@ export type HoppAction =
   | "modals.environment.new" // Add new environment
   | "modals.environment.delete-selected" // Delete Selected Environment
   | "modals.my.environment.edit" // Edit current personal environment
+  | "modals.global.environment.update" // Update global environment
   | "modals.team.environment.edit" // Edit current team environment
   | "modals.team.new" // Add new team
   | "modals.team.edit" // Edit selected team
@@ -93,13 +94,19 @@ type HoppActionArgsMap = {
     }
     text: string | null
   }
+  "modals.global.environment.update": {
+    variables?: Environment["variables"]
+    isSecret?: boolean
+  }
   "modals.my.environment.edit": {
     envName: string
     variableName?: string
+    isSecret?: boolean
   }
   "modals.team.environment.edit": {
     envName: string
     variableName?: string
+    isSecret?: boolean
   }
   "modals.team.delete": {
     teamId: string
diff --git a/packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateTeamEnvironment.graphql b/packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateTeamEnvironment.graphql
index efaba9855..2e72455b9 100644
--- a/packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateTeamEnvironment.graphql
+++ b/packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateTeamEnvironment.graphql
@@ -1,7 +1,12 @@
-mutation CreateTeamEnvironment($variables: String!,$teamID: ID!,$name: String!){
-  createTeamEnvironment( variables: $variables ,teamID: $teamID ,name: $name){
+mutation CreateTeamEnvironment(
+  $variables: String!
+  $teamID: ID!
+  $name: String!
+) {
+  createTeamEnvironment(variables: $variables, teamID: $teamID, name: $name) {
     variables
     name
     teamID
+    id
   }
-}
\ No newline at end of file
+}
diff --git a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
index 8c6fda20d..c949595e5 100644
--- a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
@@ -12,8 +12,8 @@ import { parseTemplateStringE } from "@hoppscotch/data"
 import { StreamSubscriberFunc } from "@composables/stream"
 import {
   AggregateEnvironment,
-  aggregateEnvs$,
-  getAggregateEnvs,
+  aggregateEnvsWithSecrets$,
+  getAggregateEnvsWithSecrets,
   getSelectedEnvironmentType,
 } from "~/newstore/environments"
 import { invokeAction } from "~/helpers/actions"
@@ -66,7 +66,16 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
 
       const envName = tooltipEnv?.sourceEnv ?? "Choose an Environment"
 
-      const envValue = tooltipEnv?.value ?? "Not found"
+      let envValue = "Not Found"
+
+      if (!tooltipEnv?.secret && tooltipEnv?.value) envValue = tooltipEnv.value
+      else if (tooltipEnv?.secret && tooltipEnv.value) {
+        envValue = "******"
+      } else if (!tooltipEnv?.sourceEnv) {
+        envValue = "Not Found"
+      } else if (!tooltipEnv?.value) {
+        envValue = "Empty"
+      }
 
       const result = parseTemplateStringE(envValue, aggregateEnvs)
 
@@ -89,6 +98,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
           invokeAction(`modals.${action}.environment.edit`, {
             envName,
             variableName: parsedEnvKey,
+            isSecret: tooltipEnv?.secret,
           })
         })
         editIcon.innerHTML = `<span class="inline-flex items-center justify-center my-1">${IconEdit}</span>`
@@ -171,9 +181,9 @@ export class HoppEnvironmentPlugin {
     subscribeToStream: StreamSubscriberFunc,
     private editorView: Ref<EditorView | undefined>
   ) {
-    this.envs = getAggregateEnvs()
+    this.envs = getAggregateEnvsWithSecrets()
 
-    subscribeToStream(aggregateEnvs$, (envs) => {
+    subscribeToStream(aggregateEnvsWithSecrets$, (envs) => {
       this.envs = envs
 
       this.editorView.value?.dispatch({
diff --git a/packages/hoppscotch-common/src/helpers/import-export/export/environment.ts b/packages/hoppscotch-common/src/helpers/import-export/export/environment.ts
index 82c812e57..22b6dff58 100644
--- a/packages/hoppscotch-common/src/helpers/import-export/export/environment.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/export/environment.ts
@@ -12,8 +12,6 @@ const getEnvironmentJson = (
       ? cloneDeep(environmentObj.environment)
       : cloneDeep(environmentObj)
 
-  delete newEnvironment.id
-
   const environmentId =
     environmentIndex || environmentIndex === 0
       ? environmentIndex
diff --git a/packages/hoppscotch-common/src/helpers/import-export/import/hoppEnv.ts b/packages/hoppscotch-common/src/helpers/import-export/import/hoppEnv.ts
index bf58fc301..e4d8c6efa 100644
--- a/packages/hoppscotch-common/src/helpers/import-export/import/hoppEnv.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/import/hoppEnv.ts
@@ -1,22 +1,13 @@
-import * as TE from "fp-ts/TaskEither"
 import * as O from "fp-ts/Option"
+import * as TE from "fp-ts/TaskEither"
+import { entityReference } from "verzod"
 
-import { IMPORTER_INVALID_FILE_FORMAT } from "."
 import { safeParseJSON } from "~/helpers/functional/json"
+import { IMPORTER_INVALID_FILE_FORMAT } from "."
 
+import { Environment } from "@hoppscotch/data"
 import { z } from "zod"
 
-const hoppEnvSchema = z.object({
-  id: z.string().optional(),
-  name: z.string(),
-  variables: z.array(
-    z.object({
-      key: z.string(),
-      value: z.string(),
-    })
-  ),
-})
-
 export const hoppEnvImporter = (content: string) => {
   const parsedContent = safeParseJSON(content, true)
 
@@ -25,7 +16,9 @@ export const hoppEnvImporter = (content: string) => {
     return TE.left(IMPORTER_INVALID_FILE_FORMAT)
   }
 
-  const validationResult = z.array(hoppEnvSchema).safeParse(parsedContent.value)
+  const validationResult = z
+    .array(entityReference(Environment))
+    .safeParse(parsedContent.value)
 
   if (!validationResult.success) {
     return TE.left(IMPORTER_INVALID_FILE_FORMAT)
diff --git a/packages/hoppscotch-common/src/helpers/import-export/import/insomniaEnv.ts b/packages/hoppscotch-common/src/helpers/import-export/import/insomniaEnv.ts
index 19c743109..ba3ce36c2 100644
--- a/packages/hoppscotch-common/src/helpers/import-export/import/insomniaEnv.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/import/insomniaEnv.ts
@@ -4,8 +4,9 @@ import * as O from "fp-ts/Option"
 import { IMPORTER_INVALID_FILE_FORMAT } from "."
 
 import { z } from "zod"
-import { Environment } from "@hoppscotch/data"
+import { NonSecretEnvironment } from "@hoppscotch/data"
 import { safeParseJSONOrYAML } from "~/helpers/functional/yaml"
+import { uniqueId } from "lodash-es"
 
 const insomniaResourcesSchema = z.object({
   resources: z.array(
@@ -56,16 +57,18 @@ export const insomniaEnvImporter = (content: string) => {
       return { ...envResource, data: stringifiedData }
     })
 
-  const environments: Environment[] = []
+  const environments: NonSecretEnvironment[] = []
 
   insomniaEnvs.forEach((insomniaEnv) => {
     const parsedInsomniaEnv = insomniaEnvSchema.safeParse(insomniaEnv)
 
     if (parsedInsomniaEnv.success) {
-      const environment: Environment = {
+      const environment: NonSecretEnvironment = {
+        id: uniqueId(),
+        v: 1,
         name: parsedInsomniaEnv.data.name,
         variables: Object.entries(parsedInsomniaEnv.data.data).map(
-          ([key, value]) => ({ key, value })
+          ([key, value]) => ({ key, value, secret: false })
         ),
       }
 
diff --git a/packages/hoppscotch-common/src/helpers/import-export/import/postmanEnv.ts b/packages/hoppscotch-common/src/helpers/import-export/import/postmanEnv.ts
index 2978a501e..428db3c6d 100644
--- a/packages/hoppscotch-common/src/helpers/import-export/import/postmanEnv.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/import/postmanEnv.ts
@@ -6,6 +6,7 @@ import { safeParseJSON } from "~/helpers/functional/json"
 
 import { z } from "zod"
 import { Environment } from "@hoppscotch/data"
+import { uniqueId } from "lodash-es"
 
 const postmanEnvSchema = z.object({
   name: z.string(),
@@ -34,12 +35,14 @@ export const postmanEnvImporter = (content: string) => {
   const postmanEnv = validationResult.data
 
   const environment: Environment = {
+    id: uniqueId(),
+    v: 1,
     name: postmanEnv.name,
     variables: [],
   }
 
   postmanEnv.values.forEach(({ key, value }) =>
-    environment.variables.push({ key, value })
+    environment.variables.push({ key, value, secret: false })
   )
 
   return TE.right(environment)
diff --git a/packages/hoppscotch-common/src/helpers/preRequest.ts b/packages/hoppscotch-common/src/helpers/preRequest.ts
index 07b96bf8c..562ffaefc 100644
--- a/packages/hoppscotch-common/src/helpers/preRequest.ts
+++ b/packages/hoppscotch-common/src/helpers/preRequest.ts
@@ -8,11 +8,71 @@ import {
   getGlobalVariables,
 } from "~/newstore/environments"
 import { TestResult } from "@hoppscotch/js-sandbox"
+import { getService } from "~/modules/dioc"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
 
-export const getCombinedEnvVariables = () => ({
-  global: cloneDeep(getGlobalVariables()),
-  selected: cloneDeep(getCurrentEnvironment().variables),
-})
+const secretEnvironmentService = getService(SecretEnvironmentService)
+
+const unsecretEnvironments = (
+  global: Environment["variables"],
+  selected: Environment
+) => {
+  const resolvedGlobalWithSecrets = global.map((globalVar, index) => {
+    const secretVar = secretEnvironmentService.getSecretEnvironmentVariable(
+      "Global",
+      index
+    )
+    if (secretVar) {
+      return {
+        ...globalVar,
+        value: secretVar.value,
+      }
+    } else if (!("value" in globalVar) || !globalVar.value) {
+      return {
+        ...globalVar,
+        value: "",
+      }
+    }
+    return globalVar
+  })
+
+  const resolvedSelectedWithSecrets = selected.variables.map(
+    (selectedVar, index) => {
+      const secretVar = secretEnvironmentService.getSecretEnvironmentVariable(
+        selected.id,
+        index
+      )
+      if (secretVar) {
+        return {
+          ...selectedVar,
+          value: secretVar.value,
+        }
+      } else if (!("value" in selectedVar) || !selectedVar.value) {
+        return {
+          ...selectedVar,
+          value: "",
+        }
+      }
+      return selectedVar
+    }
+  )
+
+  return {
+    global: resolvedGlobalWithSecrets,
+    selected: resolvedSelectedWithSecrets,
+  }
+}
+
+export const getCombinedEnvVariables = () => {
+  const reformedVars = unsecretEnvironments(
+    getGlobalVariables(),
+    getCurrentEnvironment()
+  )
+  return {
+    global: cloneDeep(reformedVars.global),
+    selected: cloneDeep(reformedVars.selected),
+  }
+}
 
 export const getFinalEnvsFromPreRequest = (
   script: string,
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts b/packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts
index e8aa29fe7..98bb0dec9 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts
@@ -118,6 +118,8 @@ export default class TeamEnvironmentAdapter {
               id: x.id,
               teamID: x.teamID,
               environment: {
+                v: 1,
+                id: x.id,
                 name: x.name,
                 variables: JSON.parse(x.variables),
               },
@@ -196,6 +198,8 @@ export default class TeamEnvironmentAdapter {
                 id: x.id,
                 teamID: x.teamID,
                 environment: {
+                  v: 1,
+                  id: x.id,
                   name: x.name,
                   variables: JSON.parse(x.variables),
                 },
@@ -249,6 +253,8 @@ export default class TeamEnvironmentAdapter {
                 id: x.id,
                 teamID: x.teamID,
                 environment: {
+                  v: 1,
+                  id: x.id,
                   name: x.name,
                   variables: JSON.parse(x.variables),
                 },
diff --git a/packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts b/packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts
index 97b447da3..d287976ee 100644
--- a/packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts
+++ b/packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts
@@ -45,7 +45,8 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
 export const getComputedAuthHeaders = (
   envVars: Environment["variables"],
   req?: HoppRESTRequest,
-  auth?: HoppRESTRequest["auth"]
+  auth?: HoppRESTRequest["auth"],
+  parse = true
 ) => {
   const request = auth ? { auth: auth ?? { authActive: false } } : req
   // If Authorization header is also being user-defined, that takes priority
@@ -60,8 +61,12 @@ export const getComputedAuthHeaders = (
 
   // TODO: Support a better b64 implementation than btoa ?
   if (request.auth.authType === "basic") {
-    const username = parseTemplateString(request.auth.username, envVars)
-    const password = parseTemplateString(request.auth.password, envVars)
+    const username = parse
+      ? parseTemplateString(request.auth.username, envVars)
+      : request.auth.username
+    const password = parse
+      ? parseTemplateString(request.auth.password, envVars)
+      : request.auth.password
 
     headers.push({
       active: true,
@@ -75,7 +80,11 @@ export const getComputedAuthHeaders = (
     headers.push({
       active: true,
       key: "Authorization",
-      value: `Bearer ${parseTemplateString(request.auth.token, envVars)}`,
+      value: `Bearer ${
+        parse
+          ? parseTemplateString(request.auth.token, envVars)
+          : request.auth.token
+      }`,
     })
   } else if (request.auth.authType === "api-key") {
     const { key, addTo } = request.auth
@@ -83,7 +92,9 @@ export const getComputedAuthHeaders = (
       headers.push({
         active: true,
         key: parseTemplateString(key, envVars),
-        value: parseTemplateString(request.auth.value ?? "", envVars),
+        value: parse
+          ? parseTemplateString(request.auth.value ?? "", envVars)
+          : request.auth.value ?? "",
       })
     }
   }
@@ -133,10 +144,11 @@ export type ComputedHeader = {
  */
 export const getComputedHeaders = (
   req: HoppRESTRequest,
-  envVars: Environment["variables"]
+  envVars: Environment["variables"],
+  parse = true
 ): ComputedHeader[] => {
   return [
-    ...getComputedAuthHeaders(envVars, req).map((header) => ({
+    ...getComputedAuthHeaders(envVars, req, undefined, parse).map((header) => ({
       source: "auth" as const,
       header,
     })),
diff --git a/packages/hoppscotch-common/src/newstore/environments.ts b/packages/hoppscotch-common/src/newstore/environments.ts
index e92c3eadf..4659c8144 100644
--- a/packages/hoppscotch-common/src/newstore/environments.ts
+++ b/packages/hoppscotch-common/src/newstore/environments.ts
@@ -1,10 +1,12 @@
 import { Environment } from "@hoppscotch/data"
-import { cloneDeep, isEqual } from "lodash-es"
+import { cloneDeep, isEqual, uniqueId } from "lodash-es"
 import { combineLatest, Observable } from "rxjs"
 import { distinctUntilChanged, map, pluck } from "rxjs/operators"
+import { getService } from "~/modules/dioc"
 import DispatchingStore, {
   defineDispatchers,
 } from "~/newstore/DispatchingStore"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
 
 export type SelectedEnvironmentIndex =
   | { type: "NO_ENV_SELECTED" }
@@ -19,6 +21,8 @@ export type SelectedEnvironmentIndex =
 const defaultEnvironmentsState = {
   environments: [
     {
+      v: 1,
+      id: uniqueId(),
       name: "My Environment Variables",
       variables: [],
     },
@@ -33,6 +37,8 @@ const defaultEnvironmentsState = {
   } as SelectedEnvironmentIndex,
 }
 
+const secretEnvironmentService = getService(SecretEnvironmentService)
+
 type EnvironmentStore = typeof defaultEnvironmentsState
 
 const dispatchers = defineDispatchers({
@@ -88,10 +94,13 @@ const dispatchers = defineDispatchers({
         envID
           ? {
               id: envID,
+              v: 1,
               name,
               variables,
             }
           : {
+              v: 1,
+              id: "",
               name,
               variables,
             },
@@ -109,14 +118,12 @@ const dispatchers = defineDispatchers({
       }
     }
 
-    // remove the id, because this is a new environment & it will get its own id when syncing
-    delete newEnvironment["id"]
-
     return {
       environments: [
         ...environments,
         {
           ...cloneDeep(newEnvironment),
+          id: uniqueId(),
           name: `${newEnvironment.name} - Duplicate`,
         },
       ],
@@ -184,14 +191,19 @@ const dispatchers = defineDispatchers({
   },
   addEnvironmentVariable(
     { environments }: EnvironmentStore,
-    { envIndex, key, value }: { envIndex: number; key: string; value: string }
+    {
+      envIndex,
+      key,
+      value,
+      secret,
+    }: { envIndex: number; key: string; value: string; secret: boolean }
   ) {
     return {
       environments: environments.map((env, index) =>
         index === envIndex
           ? {
               ...env,
-              variables: [...env.variables, { key, value }],
+              variables: [...env.variables, { key, value, secret }],
             }
           : env
       ),
@@ -219,7 +231,10 @@ const dispatchers = defineDispatchers({
     {
       envIndex,
       vars,
-    }: { envIndex: number; vars: { key: string; value: string }[] }
+    }: {
+      envIndex: number
+      vars: { key: string; value: string; secret: boolean }[]
+    }
   ) {
     return {
       environments: environments.map((env, index) =>
@@ -253,7 +268,7 @@ const dispatchers = defineDispatchers({
               ...env,
               variables: env.variables.map((v, vIndex) =>
                 vIndex === variableIndex
-                  ? { key: updatedKey, value: updatedValue }
+                  ? { key: updatedKey, value: updatedValue, secret: v.secret }
                   : v
               ),
             }
@@ -343,6 +358,8 @@ export const currentEnvironment$: Observable<Environment | undefined> =
       if (selectedEnvironmentIndex.type === "NO_ENV_SELECTED") {
         const env: Environment = {
           name: "No environment",
+          v: 1,
+          id: "",
           variables: [],
         }
         return env
@@ -356,6 +373,7 @@ export const currentEnvironment$: Observable<Environment | undefined> =
 export type AggregateEnvironment = {
   key: string
   value: string
+  secret: boolean
   sourceEnv: string
 }
 
@@ -370,11 +388,11 @@ export const aggregateEnvs$: Observable<AggregateEnvironment[]> = combineLatest(
   map(([selectedEnv, globalVars]) => {
     const results: AggregateEnvironment[] = []
 
-    selectedEnv?.variables.forEach(({ key, value }) =>
-      results.push({ key, value, sourceEnv: selectedEnv.name })
+    selectedEnv?.variables.forEach(({ key, value, secret }) =>
+      results.push({ key, value, secret, sourceEnv: selectedEnv.name })
     )
-    globalVars.forEach(({ key, value }) =>
-      results.push({ key, value, sourceEnv: "Global" })
+    globalVars.forEach(({ key, value, secret }) =>
+      results.push({ key, value, secret, sourceEnv: "Global" })
     )
 
     return results
@@ -384,32 +402,129 @@ export const aggregateEnvs$: Observable<AggregateEnvironment[]> = combineLatest(
 
 export function getAggregateEnvs() {
   const currentEnv = getCurrentEnvironment()
-
   return [
-    ...currentEnv.variables.map(
-      (x) =>
-        <AggregateEnvironment>{
-          key: x.key,
-          value: x.value,
-          sourceEnv: currentEnv.name,
-        }
-    ),
-    ...getGlobalVariables().map(
-      (x) =>
-        <AggregateEnvironment>{
-          key: x.key,
-          value: x.value,
-          sourceEnv: "Global",
-        }
-    ),
+    ...currentEnv.variables.map((x) => {
+      let value
+      if (!x.secret) {
+        value = x.value
+      }
+
+      return <AggregateEnvironment>{
+        key: x.key,
+        value,
+        secret: x.secret,
+        sourceEnv: currentEnv.name,
+      }
+    }),
+    ...getGlobalVariables().map((x) => {
+      let value
+      if (!x.secret) {
+        value = x.value
+      }
+      return <AggregateEnvironment>{
+        key: x.key,
+        value,
+        secret: x.secret,
+        sourceEnv: "Global",
+      }
+    }),
   ]
 }
 
+export function getAggregateEnvsWithSecrets() {
+  const currentEnv = getCurrentEnvironment()
+  return [
+    ...currentEnv.variables.map((x, index) => {
+      let value
+      if (x.secret) {
+        value = secretEnvironmentService.getSecretEnvironmentVariableValue(
+          currentEnv.id,
+          index
+        )
+      } else {
+        value = x.value
+      }
+
+      return <AggregateEnvironment>{
+        key: x.key,
+        value,
+        secret: x.secret,
+        sourceEnv: currentEnv.name,
+      }
+    }),
+    ...getGlobalVariables().map((x, index) => {
+      let value
+      if (x.secret) {
+        value = secretEnvironmentService.getSecretEnvironmentVariableValue(
+          "Global",
+          index
+        )
+      } else {
+        value = x.value
+      }
+      return <AggregateEnvironment>{
+        key: x.key,
+        value,
+        secret: x.secret,
+        sourceEnv: "Global",
+      }
+    }),
+  ]
+}
+
+export const aggregateEnvsWithSecrets$: Observable<AggregateEnvironment[]> =
+  combineLatest([currentEnvironment$, globalEnv$]).pipe(
+    map(([selectedEnv, globalVars]) => {
+      const results: AggregateEnvironment[] = []
+
+      selectedEnv?.variables.map((x, index) => {
+        let value
+        if (x.secret) {
+          value = secretEnvironmentService.getSecretEnvironmentVariableValue(
+            selectedEnv.id,
+            index
+          )
+        } else {
+          value = x.value
+        }
+        results.push({
+          key: x.key,
+          value: value ?? "",
+          secret: x.secret,
+          sourceEnv: selectedEnv.name,
+        })
+      })
+
+      globalVars.map((x, index) => {
+        let value
+        if (x.secret) {
+          value = secretEnvironmentService.getSecretEnvironmentVariableValue(
+            "Global",
+            index
+          )
+        } else {
+          value = x.value
+        }
+        results.push({
+          key: x.key,
+          value: value ?? "",
+          secret: x.secret,
+          sourceEnv: "Global",
+        })
+      })
+
+      return results
+    }),
+    distinctUntilChanged(isEqual)
+  )
+
 export function getCurrentEnvironment(): Environment {
   if (
     environmentsStore.value.selectedEnvironmentIndex.type === "NO_ENV_SELECTED"
   ) {
     return {
+      v: 1,
+      id: "",
       name: "No environment",
       variables: [],
     }
@@ -589,7 +704,7 @@ export function updateEnvironment(envIndex: number, updatedEnv: Environment) {
 
 export function setEnvironmentVariables(
   envIndex: number,
-  vars: { key: string; value: string }[]
+  vars: { key: string; value: string; secret: boolean }[]
 ) {
   environmentsStore.dispatch({
     dispatcher: "setEnvironmentVariables",
@@ -602,7 +717,7 @@ export function setEnvironmentVariables(
 
 export function addEnvironmentVariable(
   envIndex: number,
-  { key, value }: { key: string; value: string }
+  { key, value, secret }: { key: string; value: string; secret: boolean }
 ) {
   environmentsStore.dispatch({
     dispatcher: "addEnvironmentVariable",
@@ -610,6 +725,7 @@ export function addEnvironmentVariable(
       envIndex,
       key,
       value,
+      secret,
     },
   })
 }
diff --git a/packages/hoppscotch-common/src/services/__tests__/secret-environment.service.spec.ts b/packages/hoppscotch-common/src/services/__tests__/secret-environment.service.spec.ts
new file mode 100644
index 000000000..a39589576
--- /dev/null
+++ b/packages/hoppscotch-common/src/services/__tests__/secret-environment.service.spec.ts
@@ -0,0 +1,194 @@
+import { describe, expect, it, beforeEach } from "vitest"
+import { TestContainer } from "dioc/testing"
+import { SecretEnvironmentService } from "../secret-environment.service"
+
+describe("SecretEnvironmentService", () => {
+  let container: TestContainer
+  let service: SecretEnvironmentService
+
+  beforeEach(() => {
+    container = new TestContainer()
+    service = container.bind(SecretEnvironmentService)
+  })
+
+  describe("addSecretEnvironment", () => {
+    it("should add a new secret environment with the provided ID and secret variables", () => {
+      const id = "testEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.addSecretEnvironment(id, secretVars)
+
+      expect(service.secretEnvironments.get(id)).toEqual(secretVars)
+    })
+  })
+
+  describe("getSecretEnvironment", () => {
+    it("should return the secret variables of the specified environment", () => {
+      const id = "testEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.secretEnvironments.set(id, secretVars)
+
+      expect(service.getSecretEnvironment(id)).toEqual(secretVars)
+    })
+
+    it("should return undefined if the specified environment does not exist", () => {
+      const id = "nonExistentEnvironment"
+
+      expect(service.getSecretEnvironment(id)).toBeUndefined()
+    })
+  })
+
+  describe("getSecretEnvironmentVariable", () => {
+    it("should return the specified secret environment variable", () => {
+      const id = "testEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.secretEnvironments.set(id, secretVars)
+
+      const result = service.getSecretEnvironmentVariable(id, 1)
+
+      expect(result).toEqual(secretVars[0])
+    })
+
+    it("should return undefined if the specified variable does not exist", () => {
+      const id = "testEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.secretEnvironments.set(id, secretVars)
+
+      const result = service.getSecretEnvironmentVariable(id, 2)
+
+      expect(result).toBeUndefined()
+    })
+
+    it("should return undefined if the specified environment does not exist", () => {
+      const id = "nonExistentEnvironment"
+
+      const result = service.getSecretEnvironmentVariable(id, 1)
+
+      expect(result).toBeUndefined()
+    })
+  })
+
+  describe("getSecretEnvironmentVariableValue", () => {
+    it("should return the value of the specified secret environment variable", () => {
+      const id = "testEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.secretEnvironments.set(id, secretVars)
+
+      const result = service.getSecretEnvironmentVariableValue(id, 1)
+
+      expect(result).toEqual(secretVars[0].value)
+    })
+
+    it("should return undefined if the specified variable does not exist", () => {
+      const id = "testEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.secretEnvironments.set(id, secretVars)
+
+      const result = service.getSecretEnvironmentVariableValue(id, 2)
+
+      expect(result).toBeUndefined()
+    })
+
+    it("should return undefined if the specified environment does not exist", () => {
+      const id = "nonExistentEnvironment"
+
+      const result = service.getSecretEnvironmentVariableValue(id, 1)
+
+      expect(result).toBeUndefined()
+    })
+  })
+
+  describe("loadSecretEnvironmentsFromPersistedState", () => {
+    it("should load secret environments from the persisted state", () => {
+      const persistedState = {
+        testEnvironment: [{ key: "key1", value: "value1", varIndex: 1 }],
+      }
+
+      service.loadSecretEnvironmentsFromPersistedState(persistedState)
+
+      expect(service.secretEnvironments.size).toBe(1)
+      expect(service.secretEnvironments.get("testEnvironment")).toEqual([
+        { key: "key1", value: "value1", varIndex: 1 },
+      ])
+    })
+  })
+
+  describe("deleteSecretEnvironment", () => {
+    it("should delete the specified secret environment", () => {
+      const id = "testEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.secretEnvironments.set(id, secretVars)
+
+      service.deleteSecretEnvironment(id)
+
+      expect(service.secretEnvironments.has(id)).toBe(false)
+    })
+  })
+
+  describe("removeSecretEnvironmentVariable", () => {
+    it("should remove the specified secret environment variable", () => {
+      const id = "testEnvironment"
+      const secretVars = [
+        { key: "key1", value: "value1", varIndex: 1 },
+        { key: "key2", value: "value2", varIndex: 2 },
+      ]
+
+      service.secretEnvironments.set(id, secretVars)
+
+      service.removeSecretEnvironmentVariable(id, 1)
+
+      expect(service.secretEnvironments.get(id)).toEqual([
+        { key: "key2", value: "value2", varIndex: 2 },
+      ])
+    })
+
+    it("should do nothing if the specified variable does not exist", () => {
+      const id = "testEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.secretEnvironments.set(id, secretVars)
+
+      service.removeSecretEnvironmentVariable(id, 2)
+
+      expect(service.secretEnvironments.get(id)).toEqual(secretVars)
+    })
+  })
+
+  describe("updateSecretEnvironmentID", () => {
+    it("should update the ID of the specified secret environment", () => {
+      const oldID = "oldEnvironment"
+      const newID = "newEnvironment"
+      const secretVars = [{ key: "key1", value: "value1", varIndex: 1 }]
+
+      service.secretEnvironments.set(oldID, secretVars)
+
+      service.updateSecretEnvironmentID(oldID, newID)
+
+      expect(service.secretEnvironments.has(oldID)).toBe(false)
+      expect(service.secretEnvironments.get(newID)).toEqual(secretVars)
+    })
+  })
+
+  describe("persistableSecretEnvironments", () => {
+    it("should return a record of secret environments suitable for persistence", () => {
+      const secretVars = [
+        { key: "key1", value: "value1", varIndex: 1 },
+        { key: "key2", value: "value2", varIndex: 2 },
+      ]
+
+      service.secretEnvironments.set("environment1", secretVars)
+
+      const persistedState = service.persistableSecretEnvironments.value
+
+      expect(persistedState).toEqual({
+        environment1: secretVars,
+      })
+    })
+  })
+})
diff --git a/packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/environment.inspector.spec.ts b/packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/environment.inspector.spec.ts
index dd7cb8c88..756c61e75 100644
--- a/packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/environment.inspector.spec.ts
+++ b/packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/environment.inspector.spec.ts
@@ -15,9 +15,21 @@ vi.mock("~/newstore/environments", async () => {
 
   return {
     __esModule: true,
-    aggregateEnvs$: new BehaviorSubject([
-      { key: "EXISTING_ENV_VAR", value: "test_value" },
+    aggregateEnvsWithSecrets$: new BehaviorSubject([
+      { key: "EXISTING_ENV_VAR", value: "test_value", secret: false },
+      { key: "EXISTING_ENV_VAR_2", value: "", secret: false },
     ]),
+    getCurrentEnvironment: () => ({
+      id: "1",
+      name: "some-env",
+      v: 1,
+      variables: {
+        key: "EXISTING_ENV_VAR",
+        value: "test_value",
+        secret: false,
+      },
+    }),
+    getSelectedEnvironmentType: () => "MY_ENV",
   }
 })
 
@@ -51,7 +63,7 @@ describe("EnvironmentInspectorService", () => {
 
       expect(result.value).toContainEqual(
         expect.objectContaining({
-          id: "environment",
+          id: "environment-not-found-0",
           isApplicable: true,
           text: {
             type: "text",
@@ -91,7 +103,7 @@ describe("EnvironmentInspectorService", () => {
 
       expect(result.value).toContainEqual(
         expect.objectContaining({
-          id: "environment",
+          id: "environment-not-found-0",
           isApplicable: true,
           text: {
             type: "text",
@@ -134,7 +146,7 @@ describe("EnvironmentInspectorService", () => {
 
       expect(result.value).toContainEqual(
         expect.objectContaining({
-          id: "environment",
+          id: "environment-not-found-0",
           isApplicable: true,
           text: {
             type: "text",
@@ -161,5 +173,103 @@ describe("EnvironmentInspectorService", () => {
 
       expect(result.value).toHaveLength(0)
     })
+
+    it("should return an inspector result when the URL contains empty value in a environment variable", () => {
+      const container = new TestContainer()
+      const envInspector = container.bind(EnvironmentInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "<<EXISTING_ENV_VAR_2>>",
+      })
+
+      const result = envInspector.getInspections(req)
+
+      expect(result.value).toHaveLength(1)
+    })
+
+    it("should not return an inspector result when the URL contains non empty value in a environemnt variable", () => {
+      const container = new TestContainer()
+      const envInspector = container.bind(EnvironmentInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "<<EXISTING_ENV_VAR>>",
+      })
+
+      const result = envInspector.getInspections(req)
+
+      expect(result.value).toHaveLength(0)
+    })
+
+    it("should return an inspector result when the headers contain empty value in a environment variable", () => {
+      const container = new TestContainer()
+      const envInspector = container.bind(EnvironmentInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+        headers: [
+          { key: "<<EXISTING_ENV_VAR_2>>", value: "some-value", active: true },
+        ],
+      })
+
+      const result = envInspector.getInspections(req)
+
+      expect(result.value).toHaveLength(1)
+    })
+
+    it("should not return an inspector result when the headers contain non empty value in a environemnt variable", () => {
+      const container = new TestContainer()
+      const envInspector = container.bind(EnvironmentInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+        headers: [
+          { key: "<<EXISTING_ENV_VAR>>", value: "some-value", active: true },
+        ],
+      })
+
+      const result = envInspector.getInspections(req)
+
+      expect(result.value).toHaveLength(0)
+    })
+
+    it("should return an inspector result when the params contain empty value in a environment variable", () => {
+      const container = new TestContainer()
+      const envInspector = container.bind(EnvironmentInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+        headers: [],
+        params: [
+          { key: "<<EXISTING_ENV_VAR_2>>", value: "some-value", active: true },
+        ],
+      })
+
+      const result = envInspector.getInspections(req)
+
+      expect(result.value).toHaveLength(1)
+    })
+
+    it("should not return an inspector result when the params contain non empty value in a environemnt variable", () => {
+      const container = new TestContainer()
+      const envInspector = container.bind(EnvironmentInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+        headers: [],
+        params: [
+          { key: "<<EXISTING_ENV_VAR>>", value: "some-value", active: true },
+        ],
+      })
+
+      const result = envInspector.getInspections(req)
+
+      expect(result.value).toHaveLength(0)
+    })
   })
 })
diff --git a/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts b/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
index a3ebb66dd..c3a9c7912 100644
--- a/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
+++ b/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
@@ -9,7 +9,11 @@ import { Service } from "dioc"
 import { Ref, markRaw } from "vue"
 import IconPlusCircle from "~icons/lucide/plus-circle"
 import { HoppRESTRequest } from "@hoppscotch/data"
-import { aggregateEnvs$ } from "~/newstore/environments"
+import {
+  aggregateEnvsWithSecrets$,
+  getCurrentEnvironment,
+  getSelectedEnvironmentType,
+} from "~/newstore/environments"
 import { invokeAction } from "~/helpers/actions"
 import { computed } from "vue"
 import { useStreamStatic } from "~/composables/stream"
@@ -36,9 +40,13 @@ export class EnvironmentInspectorService extends Service implements Inspector {
 
   private readonly inspection = this.bind(InspectionService)
 
-  private aggregateEnvs = useStreamStatic(aggregateEnvs$, [], () => {
-    /* noop */
-  })[0]
+  private aggregateEnvsWithSecrets = useStreamStatic(
+    aggregateEnvsWithSecrets$,
+    [],
+    () => {
+      /* noop */
+    }
+  )[0]
 
   constructor() {
     super()
@@ -49,9 +57,8 @@ export class EnvironmentInspectorService extends Service implements Inspector {
   /**
    * Validates the environment variables in the target array
    * @param target The target array to validate
-   * @param results The results array to push the results to
    * @param locations The location where results are to be displayed
-   * @returns The results array
+   * @returns The results array containing the results of the validation
    */
   private validateEnvironmentVariables = (
     target: any[],
@@ -59,7 +66,7 @@ export class EnvironmentInspectorService extends Service implements Inspector {
   ) => {
     const newErrors: InspectorResult[] = []
 
-    const envKeys = this.aggregateEnvs.value.map((e) => e.key)
+    const envKeys = this.aggregateEnvsWithSecrets.value.map((e) => e.key)
 
     target.forEach((element, index) => {
       if (isENVInString(element)) {
@@ -68,29 +75,20 @@ export class EnvironmentInspectorService extends Service implements Inspector {
         if (extractedEnv) {
           extractedEnv.forEach((exEnv: string) => {
             const formattedExEnv = exEnv.slice(2, -2)
-            let itemLocation: InspectorLocation
-            if (locations.type === "header") {
-              itemLocation = {
-                type: "header",
-                position: locations.position,
-                index: index,
-                key: element,
-              }
-            } else if (locations.type === "parameter") {
-              itemLocation = {
-                type: "parameter",
-                position: locations.position,
-                index: index,
-                key: element,
-              }
-            } else {
-              itemLocation = {
-                type: "url",
-              }
+            const itemLocation: InspectorLocation = {
+              type: locations.type,
+              position:
+                locations.type === "url" ||
+                locations.type === "body" ||
+                locations.type === "response"
+                  ? "key"
+                  : locations.position,
+              index: index,
+              key: element,
             }
             if (!envKeys.includes(formattedExEnv)) {
               newErrors.push({
-                id: "environment",
+                id: `environment-not-found-${newErrors.length}`,
                 text: {
                   type: "text",
                   text: this.t("inspections.environment.not_found", {
@@ -112,7 +110,7 @@ export class EnvironmentInspectorService extends Service implements Inspector {
                 locations: itemLocation,
                 doc: {
                   text: this.t("action.learn_more"),
-                  link: "https://docs.hoppscotch.io/",
+                  link: "https://docs.hoppscotch.io/documentation/features/inspections",
                 },
               })
             }
@@ -124,6 +122,103 @@ export class EnvironmentInspectorService extends Service implements Inspector {
     return newErrors
   }
 
+  /**
+   * Checks if the environment variables in the target array are empty
+   * @param target The target array to validate
+   * @param locations The location where results are to be displayed
+   * @returns The results array containing the results of the validation
+   */
+  private validateEmptyEnvironmentVariables = (
+    target: any[],
+    locations: InspectorLocation
+  ) => {
+    const newErrors: InspectorResult[] = []
+
+    target.forEach((element, index) => {
+      if (isENVInString(element)) {
+        const extractedEnv = element.match(HOPP_ENVIRONMENT_REGEX)
+
+        if (extractedEnv) {
+          extractedEnv.forEach((exEnv: string) => {
+            const formattedExEnv = exEnv.slice(2, -2)
+
+            this.aggregateEnvsWithSecrets.value.forEach((env) => {
+              if (env.key === formattedExEnv) {
+                if (env.value === "") {
+                  const itemLocation: InspectorLocation = {
+                    type: locations.type,
+                    position:
+                      locations.type === "url" ||
+                      locations.type === "body" ||
+                      locations.type === "response"
+                        ? "key"
+                        : locations.position,
+                    index: index,
+                    key: element,
+                  }
+
+                  const currentSelectedEnvironment = getCurrentEnvironment()
+                  const currentEnvironmentType = getSelectedEnvironmentType()
+
+                  let invokeActionType:
+                    | "modals.my.environment.edit"
+                    | "modals.team.environment.edit"
+                    | "modals.global.environment.update" =
+                    "modals.my.environment.edit"
+
+                  if (env.sourceEnv === "Global") {
+                    invokeActionType = "modals.global.environment.update"
+                  } else if (currentEnvironmentType === "MY_ENV") {
+                    invokeActionType = "modals.my.environment.edit"
+                  } else if (currentEnvironmentType === "TEAM_ENV") {
+                    invokeActionType = "modals.team.environment.edit"
+                  } else {
+                    invokeActionType = "modals.my.environment.edit"
+                  }
+
+                  newErrors.push({
+                    id: `environment-empty-${newErrors.length}`,
+                    text: {
+                      type: "text",
+                      text: this.t("inspections.environment.empty_value", {
+                        variable: exEnv,
+                      }),
+                    },
+                    icon: markRaw(IconPlusCircle),
+                    action: {
+                      text: this.t(
+                        "inspections.environment.add_environment_value"
+                      ),
+                      apply: () => {
+                        invokeAction(invokeActionType, {
+                          envName:
+                            env.sourceEnv !== "Global"
+                              ? currentSelectedEnvironment.name
+                              : "Global",
+                          variableName: formattedExEnv,
+                          isSecret: env.secret,
+                        })
+                      },
+                    },
+                    severity: 2,
+                    isApplicable: true,
+                    locations: itemLocation,
+                    doc: {
+                      text: this.t("action.learn_more"),
+                      link: "https://docs.hoppscotch.io/documentation/features/inspections",
+                    },
+                  })
+                }
+              }
+            })
+          })
+        }
+      }
+    })
+
+    return newErrors
+  }
+
   getInspections(req: Readonly<Ref<HoppRESTRequest>>) {
     return computed(() => {
       const results: InspectorResult[] = []
@@ -132,12 +227,25 @@ export class EnvironmentInspectorService extends Service implements Inspector {
 
       const params = req.value.params
 
+      /**
+       * Validate the environment variables in the URL
+       */
+      const url = req.value.endpoint
+
       results.push(
-        ...this.validateEnvironmentVariables([req.value.endpoint], {
+        ...this.validateEnvironmentVariables([url], {
+          type: "url",
+        })
+      )
+      results.push(
+        ...this.validateEmptyEnvironmentVariables([url], {
           type: "url",
         })
       )
 
+      /**
+       * Validate the environment variables in the headers
+       */
       const headerKeys = Object.values(headers).map((header) => header.key)
 
       results.push(
@@ -146,6 +254,12 @@ export class EnvironmentInspectorService extends Service implements Inspector {
           position: "key",
         })
       )
+      results.push(
+        ...this.validateEmptyEnvironmentVariables(headerKeys, {
+          type: "header",
+          position: "key",
+        })
+      )
 
       const headerValues = Object.values(headers).map((header) => header.value)
 
@@ -155,7 +269,16 @@ export class EnvironmentInspectorService extends Service implements Inspector {
           position: "value",
         })
       )
+      results.push(
+        ...this.validateEmptyEnvironmentVariables(headerValues, {
+          type: "header",
+          position: "value",
+        })
+      )
 
+      /**
+       * Validate the environment variables in the parameters
+       */
       const paramsKeys = Object.values(params).map((param) => param.key)
 
       results.push(
@@ -164,6 +287,12 @@ export class EnvironmentInspectorService extends Service implements Inspector {
           position: "key",
         })
       )
+      results.push(
+        ...this.validateEmptyEnvironmentVariables(paramsKeys, {
+          type: "parameter",
+          position: "key",
+        })
+      )
 
       const paramsValues = Object.values(params).map((param) => param.value)
 
@@ -174,6 +303,13 @@ export class EnvironmentInspectorService extends Service implements Inspector {
         })
       )
 
+      results.push(
+        ...this.validateEmptyEnvironmentVariables(paramsValues, {
+          type: "parameter",
+          position: "value",
+        })
+      )
+
       return results
     })
   }
diff --git a/packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts b/packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts
index 3f8b893f3..e5124d068 100644
--- a/packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts
+++ b/packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts
@@ -67,7 +67,7 @@ export class HeaderInspectorService extends Service implements Inspector {
               },
               doc: {
                 text: this.t("action.learn_more"),
-                link: "https://docs.hoppscotch.io/",
+                link: "https://docs.hoppscotch.io/documentation/features/inspections",
               },
             })
           }
diff --git a/packages/hoppscotch-common/src/services/inspection/inspectors/response.inspector.ts b/packages/hoppscotch-common/src/services/inspection/inspectors/response.inspector.ts
index 014294511..fc23cdf25 100644
--- a/packages/hoppscotch-common/src/services/inspection/inspectors/response.inspector.ts
+++ b/packages/hoppscotch-common/src/services/inspection/inspectors/response.inspector.ts
@@ -67,7 +67,7 @@ export class ResponseInspectorService extends Service implements Inspector {
           },
           doc: {
             text: this.t("action.learn_more"),
-            link: "https://docs.hoppscotch.io/",
+            link: "https://docs.hoppscotch.io/documentation/features/inspections",
           },
         })
       }
diff --git a/packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts b/packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts
index eb04fbd28..02385fe9f 100644
--- a/packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts
@@ -4,6 +4,7 @@ import { HoppGQLDocument } from "~/helpers/graphql/document"
 import { HoppRESTDocument } from "~/helpers/rest/document"
 import { GQLHistoryEntry, RESTHistoryEntry } from "~/newstore/history"
 import { SettingsDef, getDefaultSettings } from "~/newstore/settings"
+import { SecretVariable } from "~/services/secret-environment.service"
 import { PersistableTabState } from "~/services/tab"
 
 type VUEX_DATA = {
@@ -19,7 +20,7 @@ const DEFAULT_SETTINGS = getDefaultSettings()
 
 export const REST_COLLECTIONS_MOCK: HoppCollection[] = [
   {
-    v: 1,
+    v: 2,
     name: "Echo",
     folders: [],
     requests: [
@@ -36,12 +37,14 @@ export const REST_COLLECTIONS_MOCK: HoppCollection[] = [
         body: { contentType: null, body: null },
       },
     ],
+    auth: { authType: "none", authActive: true },
+    headers: [],
   },
 ]
 
 export const GQL_COLLECTIONS_MOCK: HoppCollection[] = [
   {
-    v: 1,
+    v: 2,
     name: "Echo",
     folders: [],
     requests: [
@@ -55,20 +58,30 @@ export const GQL_COLLECTIONS_MOCK: HoppCollection[] = [
         auth: { authType: "none", authActive: true },
       },
     ],
+    auth: { authType: "none", authActive: true },
+    headers: [],
   },
 ]
 
 export const ENVIRONMENTS_MOCK: Environment[] = [
   {
+    v: 1,
+    id: "ENV_1",
     name: "globals",
     variables: [
       {
         key: "test-global-key",
         value: "test-global-value",
+        secret: false,
       },
     ],
   },
-  { name: "Test", variables: [{ key: "test-key", value: "test-value" }] },
+  {
+    v: 1,
+    id: "ENV_2",
+    name: "Test",
+    variables: [{ key: "test-key", value: "test-value", secret: false }],
+  },
 ]
 
 export const SELECTED_ENV_INDEX_MOCK = {
@@ -98,7 +111,7 @@ export const MQTT_REQUEST_MOCK = {
 }
 
 export const GLOBAL_ENV_MOCK: Environment["variables"] = [
-  { key: "test-key", value: "test-value" },
+  { key: "test-key", value: "test-value", secret: false },
 ]
 
 export const VUEX_DATA_MOCK: VUEX_DATA = {
@@ -201,3 +214,11 @@ export const REST_TAB_STATE_MOCK: PersistableTabState<HoppRESTDocument> = {
     },
   ],
 }
+
+export const SECRET_ENVIRONMENTS_MOCK: Record<string, SecretVariable> = {
+  clryz7ir7002al4162bsj0azg: {
+    key: "test-key",
+    value: "test-value",
+    varIndex: 1,
+  },
+}
diff --git a/packages/hoppscotch-common/src/services/persistence/__tests__/index.spec.ts b/packages/hoppscotch-common/src/services/persistence/__tests__/index.spec.ts
index 8d6e12555..8fdf0c7e1 100644
--- a/packages/hoppscotch-common/src/services/persistence/__tests__/index.spec.ts
+++ b/packages/hoppscotch-common/src/services/persistence/__tests__/index.spec.ts
@@ -56,12 +56,14 @@ import {
   REST_COLLECTIONS_MOCK,
   REST_HISTORY_MOCK,
   REST_TAB_STATE_MOCK,
+  SECRET_ENVIRONMENTS_MOCK,
   SELECTED_ENV_INDEX_MOCK,
   SOCKET_IO_REQUEST_MOCK,
   SSE_REQUEST_MOCK,
   VUEX_DATA_MOCK,
   WEBSOCKET_REQUEST_MOCK,
 } from "./__mocks__"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
 
 vi.mock("~/modules/i18n", () => {
   return {
@@ -122,10 +124,12 @@ const spyOnSetItem = () => vi.spyOn(Storage.prototype, "setItem")
 const bindPersistenceService = ({
   mockGQLTabService = false,
   mockRESTTabService = false,
+  mockSecretEnvironmentsService = false,
   mock = {},
 }: {
   mockGQLTabService?: boolean
   mockRESTTabService?: boolean
+  mockSecretEnvironmentsService?: boolean
   mock?: Record<string, unknown>
 } = {}) => {
   const container = new TestContainer()
@@ -138,6 +142,10 @@ const bindPersistenceService = ({
     container.bindMock(RESTTabService, mock)
   }
 
+  if (mockSecretEnvironmentsService) {
+    container.bindMock(SecretEnvironmentService, mock)
+  }
+
   container.bind(PersistenceService)
 
   const service = container.bind(PersistenceService)
@@ -893,7 +901,12 @@ describe("PersistenceService", () => {
         // Invalid shape for `environments`
         const environments = [
           // `entries` -> `variables`
-          { name: "Test", entries: [{ key: "test-key", value: "test-value" }] },
+          {
+            v: 1,
+            id: "ENV_1",
+            name: "Test",
+            entries: [{ key: "test-key", value: "test-value", secret: false }],
+          },
         ]
 
         window.localStorage.setItem(
@@ -1044,6 +1057,119 @@ describe("PersistenceService", () => {
       })
     })
 
+    describe("Setup secret Environments persistence", () => {
+      // Key read from localStorage across test cases
+      const secretEnvironmentsKey = "secretEnvironments"
+
+      const loadSecretEnvironmentsFromPersistedStateFn = vi.fn()
+      const mock = {
+        loadSecretEnvironmentsFromPersistedState:
+          loadSecretEnvironmentsFromPersistedStateFn,
+      }
+
+      it(`shows an error and sets the entry as a backup in localStorage if "${secretEnvironmentsKey}" read from localStorage doesn't match the schema`, () => {
+        // Invalid shape for `secretEnvironments`
+        const secretEnvironments = {
+          clryz7ir7002al4162bsj0azg: {
+            key: "ENV_KEY",
+            value: "ENV_VALUE",
+          },
+        }
+
+        window.localStorage.setItem(
+          secretEnvironmentsKey,
+          JSON.stringify(secretEnvironments)
+        )
+
+        const getItemSpy = spyOnGetItem()
+        const setItemSpy = spyOnSetItem()
+
+        invokeSetupLocalPersistence()
+
+        expect(getItemSpy).toHaveBeenCalledWith(secretEnvironmentsKey)
+
+        expect(toastErrorFn).toHaveBeenCalledWith(
+          expect.stringContaining(secretEnvironmentsKey)
+        )
+        expect(setItemSpy).toHaveBeenCalledWith(
+          `${secretEnvironmentsKey}-backup`,
+          JSON.stringify(secretEnvironments)
+        )
+      })
+
+      it("loads secret environments from the state persisted in localStorage and sets watcher for `persistableSecretEnvironment`", () => {
+        const secretEnvironment = SECRET_ENVIRONMENTS_MOCK
+        window.localStorage.setItem(
+          secretEnvironmentsKey,
+          JSON.stringify(secretEnvironment)
+        )
+
+        const getItemSpy = spyOnGetItem()
+
+        invokeSetupLocalPersistence({
+          mockSecretEnvironmentsService: true,
+          mock,
+        })
+
+        expect(getItemSpy).toHaveBeenCalledWith(secretEnvironmentsKey)
+
+        expect(toastErrorFn).not.toHaveBeenCalledWith(secretEnvironmentsKey)
+
+        expect(loadSecretEnvironmentsFromPersistedStateFn).toHaveBeenCalledWith(
+          secretEnvironment
+        )
+        expect(watchDebounced).toHaveBeenCalledWith(
+          expect.any(Object),
+          expect.any(Function),
+          { debounce: 500 }
+        )
+      })
+
+      it(`skips schema parsing and the loading of persisted secret environments if there is no "${secretEnvironmentsKey}" key present in localStorage`, () => {
+        window.localStorage.removeItem(secretEnvironmentsKey)
+
+        const getItemSpy = spyOnGetItem()
+        const setItemSpy = spyOnSetItem()
+
+        invokeSetupLocalPersistence({
+          mockSecretEnvironmentsService: true,
+          mock,
+        })
+
+        expect(getItemSpy).toHaveBeenCalledWith(secretEnvironmentsKey)
+
+        expect(toastErrorFn).not.toHaveBeenCalledWith(secretEnvironmentsKey)
+        expect(setItemSpy).not.toHaveBeenCalled()
+
+        expect(watchDebounced).toHaveBeenCalled()
+      })
+
+      it("logs an error to the console on failing to parse persisted secret environments", () => {
+        window.localStorage.setItem(secretEnvironmentsKey, "invalid-json")
+
+        console.error = vi.fn()
+        const getItemSpy = spyOnGetItem()
+        const setItemSpy = spyOnSetItem()
+
+        invokeSetupLocalPersistence()
+
+        expect(getItemSpy).toHaveBeenCalledWith(secretEnvironmentsKey)
+
+        expect(toastErrorFn).not.toHaveBeenCalledWith(secretEnvironmentsKey)
+        expect(setItemSpy).not.toHaveBeenCalled()
+
+        expect(console.error).toHaveBeenCalledWith(
+          `Failed parsing persisted secret environment, state:`,
+          window.localStorage.getItem(secretEnvironmentsKey)
+        )
+        expect(watchDebounced).toHaveBeenCalledWith(
+          expect.any(Object),
+          expect.any(Function),
+          { debounce: 500 }
+        )
+      })
+    })
+
     describe("setup WebSocket persistence", () => {
       // Key read from localStorage across test cases
       const wsRequestKey = "WebsocketRequest"
diff --git a/packages/hoppscotch-common/src/services/persistence/index.ts b/packages/hoppscotch-common/src/services/persistence/index.ts
index 04a153853..84d318476 100644
--- a/packages/hoppscotch-common/src/services/persistence/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/index.ts
@@ -67,10 +67,12 @@ import {
   SETTINGS_SCHEMA,
   SOCKET_IO_REQUEST_SCHEMA,
   SSE_REQUEST_SCHEMA,
+  SECRET_ENVIRONMENT_VARIABLE_SCHEMA,
   THEME_COLOR_SCHEMA,
   VUEX_SCHEMA,
   WEBSOCKET_REQUEST_SCHEMA,
 } from "./validation-schemas"
+import { SecretEnvironmentService } from "../secret-environment.service"
 
 /**
  * This service compiles persistence logic across the codebase
@@ -81,6 +83,10 @@ export class PersistenceService extends Service {
   private readonly restTabService = this.bind(RESTTabService)
   private readonly gqlTabService = this.bind(GQLTabService)
 
+  private readonly secretEnvironmentService = this.bind(
+    SecretEnvironmentService
+  )
+
   public hoppLocalConfigStorage: StorageLike = localStorage
 
   constructor() {
@@ -438,6 +444,56 @@ export class PersistenceService extends Service {
     })
   }
 
+  private setupSecretEnvironmentsPersistence() {
+    const secretEnvironmentsKey = "secretEnvironments"
+    const secretEnvironmentsData = window.localStorage.getItem(
+      secretEnvironmentsKey
+    )
+
+    try {
+      if (secretEnvironmentsData) {
+        let parsedSecretEnvironmentsData = JSON.parse(secretEnvironmentsData)
+
+        // Validate data read from localStorage
+        const result = SECRET_ENVIRONMENT_VARIABLE_SCHEMA.safeParse(
+          parsedSecretEnvironmentsData
+        )
+
+        if (result.success) {
+          parsedSecretEnvironmentsData = result.data
+        } else {
+          this.showErrorToast(secretEnvironmentsKey)
+          window.localStorage.setItem(
+            `${secretEnvironmentsKey}-backup`,
+            JSON.stringify(parsedSecretEnvironmentsData)
+          )
+        }
+
+        this.secretEnvironmentService.loadSecretEnvironmentsFromPersistedState(
+          parsedSecretEnvironmentsData
+        )
+      }
+    } catch (e) {
+      console.error(
+        `Failed parsing persisted secret environment, state:`,
+        secretEnvironmentsData
+      )
+    }
+
+    watchDebounced(
+      this.secretEnvironmentService.persistableSecretEnvironments,
+      (newSecretEnvironment) => {
+        window.localStorage.setItem(
+          secretEnvironmentsKey,
+          JSON.stringify(newSecretEnvironment)
+        )
+      },
+      {
+        debounce: 500,
+      }
+    )
+  }
+
   private setupSelectedEnvPersistence() {
     const selectedEnvIndexKey = "selectedEnvIndex"
     let selectedEnvIndexValue = JSON.parse(
@@ -697,6 +753,8 @@ export class PersistenceService extends Service {
     this.setupSocketIOPersistence()
     this.setupSSEPersistence()
     this.setupMQTTPersistence()
+
+    this.setupSecretEnvironmentsPersistence()
   }
 
   /**
diff --git a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
index 72ca18415..f91194e15 100644
--- a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
@@ -160,7 +160,6 @@ export const SELECTED_ENV_INDEX_SCHEMA = z.nullable(
       type: z.literal("TEAM_ENV"),
       teamID: z.string(),
       teamEnvID: z.string(),
-      // ! Versioned entity
       environment: entityReference(Environment),
     }),
   ])
@@ -212,13 +211,19 @@ export const MQTT_REQUEST_SCHEMA = z.nullable(
 
 export const GLOBAL_ENV_SCHEMA = z.union([
   z.array(z.never()),
+
   z.array(
-    z
-      .object({
+    z.union([
+      z.object({
+        key: z.string(),
+        secret: z.literal(true),
+      }),
+      z.object({
         key: z.string(),
         value: z.string(),
-      })
-      .strict()
+        secret: z.literal(false),
+      }),
+    ])
   ),
 ])
 
@@ -339,12 +344,34 @@ const HoppTestDataSchema = z.lazy(() =>
     .strict()
 )
 
-const EnvironmentVariablesSchema = z
-  .object({
+const EnvironmentVariablesSchema = z.union([
+  z.object({
     key: z.string(),
     value: z.string(),
-  })
-  .strict()
+    secret: z.literal(false),
+  }),
+  z.object({
+    key: z.string(),
+    secret: z.literal(true),
+  }),
+])
+
+export const SECRET_ENVIRONMENT_VARIABLE_SCHEMA = z.union([
+  z.object({}).strict(),
+
+  z.record(
+    z.string(),
+    z.array(
+      z
+        .object({
+          key: z.string(),
+          value: z.string(),
+          varIndex: z.number(),
+        })
+        .strict()
+    )
+  ),
+])
 
 const HoppTestResultSchema = z
   .object({
@@ -358,7 +385,11 @@ const HoppTestResultSchema = z
           .object({
             additions: z.array(EnvironmentVariablesSchema),
             updations: z.array(
-              EnvironmentVariablesSchema.extend({ previousValue: z.string() })
+              EnvironmentVariablesSchema.refine((x) => !x.secret).and(
+                z.object({
+                  previousValue: z.string(),
+                })
+              )
             ),
             deletions: z.array(EnvironmentVariablesSchema),
           })
@@ -367,7 +398,11 @@ const HoppTestResultSchema = z
           .object({
             additions: z.array(EnvironmentVariablesSchema),
             updations: z.array(
-              EnvironmentVariablesSchema.extend({ previousValue: z.string() })
+              EnvironmentVariablesSchema.refine((x) => !x.secret).and(
+                z.object({
+                  previousValue: z.string(),
+                })
+              )
             ),
             deletions: z.array(EnvironmentVariablesSchema),
           })
diff --git a/packages/hoppscotch-common/src/services/secret-environment.service.ts b/packages/hoppscotch-common/src/services/secret-environment.service.ts
new file mode 100644
index 000000000..ff6ff7641
--- /dev/null
+++ b/packages/hoppscotch-common/src/services/secret-environment.service.ts
@@ -0,0 +1,130 @@
+import { Service } from "dioc"
+import { reactive } from "vue"
+import { computed } from "vue"
+
+/**
+ * Defines a secret environment variable.
+ */
+export type SecretVariable = {
+  key: string
+  value: string
+  varIndex: number
+}
+
+/**
+ * This service is used to store and manage secret environments.
+ * The secret environments are not synced with the server.
+ * hence they are not persisted in the database. They are stored
+ * in the local storage of the browser.
+ */
+export class SecretEnvironmentService extends Service {
+  public static readonly ID = "SECRET_ENVIRONMENT_SERVICE"
+
+  /**
+   * Map of secret environments.
+   * The key is the ID of the secret environment.
+   * The value is the list of secret variables.
+   */
+  public secretEnvironments = reactive(new Map<string, SecretVariable[]>())
+
+  constructor() {
+    super()
+  }
+
+  /**
+   * Add a new secret environment.
+   * @param id ID of the environment
+   * @param secretVars List of secret variables
+   */
+  public addSecretEnvironment(id: string, secretVars: SecretVariable[]) {
+    this.secretEnvironments.set(id, secretVars)
+  }
+
+  /**
+   * Get a secret environment.
+   * @param id ID of the environment
+   */
+  public getSecretEnvironment(id: string) {
+    return this.secretEnvironments.get(id)
+  }
+
+  /**
+   * Get a secret environment variable.
+   * @param id ID of the environment
+   * @param varIndex Index of the variable in the environment
+   */
+  public getSecretEnvironmentVariable(id: string, varIndex: number) {
+    const secretVars = this.getSecretEnvironment(id)
+    return secretVars?.find((secretVar) => secretVar.varIndex === varIndex)
+  }
+
+  /**
+   * Used to get the value of a secret environment variable.
+   * @param id ID of the environment
+   * @param varIndex Index of the variable in the environment
+=   */
+  public getSecretEnvironmentVariableValue(id: string, varIndex: number) {
+    const secretVar = this.getSecretEnvironmentVariable(id, varIndex)
+    return secretVar?.value
+  }
+
+  /**
+   *
+   * @param secretEnvironments Used to load secret environments from persisted state.
+   */
+  public loadSecretEnvironmentsFromPersistedState(
+    secretEnvironments: Record<string, SecretVariable[]>
+  ) {
+    if (secretEnvironments) {
+      this.secretEnvironments.clear()
+
+      Object.entries(secretEnvironments).forEach(([id, secretVars]) => {
+        this.addSecretEnvironment(id, secretVars)
+      })
+    }
+  }
+
+  /**
+   * Delete a secret environment.
+   * @param id ID of the environment
+   */
+  public deleteSecretEnvironment(id: string) {
+    this.secretEnvironments.delete(id)
+  }
+
+  /**
+   * Delete a secret environment variable.
+   * @param id ID of the environment
+   * @param varIndex Index of the variable in the environment
+   */
+  public removeSecretEnvironmentVariable(id: string, varIndex: number) {
+    const secretVars = this.getSecretEnvironment(id)
+    const newSecretVars = secretVars?.filter(
+      (secretVar) => secretVar.varIndex !== varIndex
+    )
+    this.secretEnvironments.set(id, newSecretVars || [])
+  }
+
+  /**
+   * Used to update thye ID of a secret environment.
+   * Used while syncing with the server.
+   * @param oldID old ID of the environment
+   * @param newID new ID of the environment
+   */
+  public updateSecretEnvironmentID(oldID: string, newID: string) {
+    const secretVars = this.getSecretEnvironment(oldID)
+    this.secretEnvironments.set(newID, secretVars || [])
+    this.secretEnvironments.delete(oldID)
+  }
+
+  /**
+   * Used to update the value of a secret environment variable.
+   */
+  public persistableSecretEnvironments = computed(() => {
+    const secretEnvironments: Record<string, SecretVariable[]> = {}
+    this.secretEnvironments.forEach((secretVars, id) => {
+      secretEnvironments[id] = secretVars
+    })
+    return secretEnvironments
+  })
+}
diff --git a/packages/hoppscotch-common/src/services/spotlight/searchers/environment.searcher.ts b/packages/hoppscotch-common/src/services/spotlight/searchers/environment.searcher.ts
index 1a2781e14..1eb6a63c1 100644
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/environment.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/environment.searcher.ts
@@ -248,9 +248,7 @@ export class EnvironmentsSpotlightSearcherService extends StaticSpotlightSearche
         this.duplicateSelectedEnv()
         break
       case "edit_global_env":
-        invokeAction(`modals.my.environment.edit`, {
-          envName: "Global",
-        })
+        invokeAction(`modals.global.environment.update`, {})
         break
       case "duplicate_global_env":
         this.duplicateGlobalEnv()
diff --git a/packages/hoppscotch-data/src/environment/index.ts b/packages/hoppscotch-data/src/environment/index.ts
index 29c0b8ecc..94a4f04e1 100644
--- a/packages/hoppscotch-data/src/environment/index.ts
+++ b/packages/hoppscotch-data/src/environment/index.ts
@@ -2,22 +2,38 @@ import * as E from "fp-ts/Either"
 import { pipe } from "fp-ts/function"
 import { InferredEntity, createVersionedEntity } from "verzod"
 
+import { z } from "zod"
+
 import V0_VERSION from "./v/0"
+import V1_VERSION from "./v/1"
+
+const versionedObject = z.object({
+  v: z.number(),
+})
 
 export const Environment = createVersionedEntity({
-  latestVersion: 0,
+  latestVersion: 1,
   versionMap: {
-    0: V0_VERSION
+    0: V0_VERSION,
+    1: V1_VERSION,
+  },
+  getVersion(data) {
+    const versionCheck = versionedObject.safeParse(data)
+
+    if (versionCheck.success) return versionCheck.data.v
+
+    // For V0 we have to check the schema
+    const result = V0_VERSION.schema.safeParse(data)
+    return result.success ? 0 : null
   },
-  getVersion(x) {
-    return V0_VERSION.schema.safeParse(x).success
-      ? 0
-      : null
-  }
 })
 
 export type Environment = InferredEntity<typeof Environment>
 
+export type EnvironmentVariable = InferredEntity<
+  typeof Environment
+>["variables"][number]
+
 const REGEX_ENV_VAR = /<<([^>]*)>>/g // "<<myVariable>>"
 
 /**
@@ -31,6 +47,8 @@ const ENV_MAX_EXPAND_LIMIT = 10
  */
 const ENV_EXPAND_LOOP = "ENV_EXPAND_LOOP" as const
 
+export const EnvironmentSchemaVersion = 1
+
 export function parseBodyEnvVariablesE(
   body: string,
   env: Environment["variables"]
@@ -43,7 +61,11 @@ export function parseBodyEnvVariablesE(
       const found = env.find(
         (envVar) => envVar.key === key.replace(/[<>]/g, "")
       )
-      return found ? found.value : key
+
+      if (found && "value" in found) {
+        return found.value
+      }
+      return key
     })
 
     depth++
@@ -68,7 +90,10 @@ export const parseBodyEnvVariables = (
 
 export function parseTemplateStringE(
   str: string,
-  variables: Environment["variables"]
+  variables:
+    | Environment["variables"]
+    | { secret: true; value: string; key: string }[],
+  maskValue = false
 ) {
   if (!variables || !str) {
     return E.right(str)
@@ -78,10 +103,21 @@ export function parseTemplateStringE(
   let depth = 0
 
   while (result.match(REGEX_ENV_VAR) != null && depth <= ENV_MAX_EXPAND_LIMIT) {
-    result = decodeURI(encodeURI(result)).replace(
-      REGEX_ENV_VAR,
-      (_, p1) => variables.find((x) => x.key === p1)?.value || ""
-    )
+    result = decodeURI(encodeURI(result)).replace(REGEX_ENV_VAR, (_, p1) => {
+      const variable = variables.find((x) => x && x.key === p1)
+      if (variable && "value" in variable) {
+        // Mask the value if it is a secret and explicitly specified
+        if (variable.secret && maskValue) {
+          return "*".repeat(
+            (variable as { secret: true; value: string; key: string }).value
+              .length
+          )
+        }
+        return variable.value
+      }
+
+      return ""
+    })
     depth++
   }
 
@@ -90,14 +126,52 @@ export function parseTemplateStringE(
     : E.right(result)
 }
 
+export type NonSecretEnvironmentVariable = Extract<
+  EnvironmentVariable,
+  { secret: false }
+>
+
+export type NonSecretEnvironment = Omit<Environment, "variables"> & {
+  variables: NonSecretEnvironmentVariable[]
+}
+
 /**
  * @deprecated Use `parseTemplateStringE` instead
  */
 export const parseTemplateString = (
   str: string,
-  variables: Environment["variables"]
+  variables:
+    | Environment["variables"]
+    | { secret: true; value: string; key: string }[],
+  maskValue = false
 ) =>
   pipe(
-    parseTemplateStringE(str, variables),
+    parseTemplateStringE(str, variables, maskValue),
     E.getOrElse(() => str)
   )
+
+export const translateToNewEnvironmentVariables = (
+  x: any
+): Environment["variables"][number] => {
+  return {
+    key: x.key,
+    value: x.value,
+    secret: false,
+  }
+}
+
+export const translateToNewEnvironment = (x: any): Environment => {
+  if (x.v && x.v === EnvironmentSchemaVersion) return x
+
+  // Legacy
+  const id = x.id ?? ""
+  const name = x.name ?? "Untitled"
+  const variables = (x.variables ?? []).map(translateToNewEnvironmentVariables)
+
+  return {
+    v: EnvironmentSchemaVersion,
+    id,
+    name,
+    variables,
+  }
+}
diff --git a/packages/hoppscotch-data/src/environment/v/0.ts b/packages/hoppscotch-data/src/environment/v/0.ts
index 8e030bf75..74b189893 100644
--- a/packages/hoppscotch-data/src/environment/v/0.ts
+++ b/packages/hoppscotch-data/src/environment/v/0.ts
@@ -9,10 +9,10 @@ export const V0_SCHEMA = z.object({
       key: z.string(),
       value: z.string(),
     })
-  )
+  ),
 })
 
 export default defineVersion({
   initial: true,
-  schema: V0_SCHEMA
+  schema: V0_SCHEMA,
 })
diff --git a/packages/hoppscotch-data/src/environment/v/1.ts b/packages/hoppscotch-data/src/environment/v/1.ts
new file mode 100644
index 000000000..6ab68d79f
--- /dev/null
+++ b/packages/hoppscotch-data/src/environment/v/1.ts
@@ -0,0 +1,42 @@
+import { z } from "zod"
+import { defineVersion } from "verzod"
+import { V0_SCHEMA } from "./0"
+
+export const V1_SCHEMA = z.object({
+  v: z.literal(1),
+  id: z.string(),
+  name: z.string(),
+  variables: z.array(
+    z.union([
+      z.object({
+        key: z.string(),
+        secret: z.literal(true),
+      }),
+      z.object({
+        key: z.string(),
+        value: z.string(),
+        secret: z.literal(false),
+      }),
+    ])
+  ),
+})
+
+export default defineVersion({
+  initial: false,
+  schema: V1_SCHEMA,
+  up(old: z.infer<typeof V0_SCHEMA>) {
+    const result: z.infer<typeof V1_SCHEMA> = {
+      ...old,
+      v: 1,
+      id: old.id ?? "",
+      variables: old.variables.map((variable) => {
+        return {
+          ...variable,
+          secret: false,
+        }
+      }),
+    }
+
+    return result
+  },
+})
diff --git a/packages/hoppscotch-js-sandbox/src/__tests__/preRequest.spec.ts b/packages/hoppscotch-js-sandbox/src/__tests__/preRequest.spec.ts
index cf7ce824a..ce8bf9555 100644
--- a/packages/hoppscotch-js-sandbox/src/__tests__/preRequest.spec.ts
+++ b/packages/hoppscotch-js-sandbox/src/__tests__/preRequest.spec.ts
@@ -12,16 +12,16 @@ describe("runPreRequestScript", () => {
         {
           global: [],
           selected: [
-            { key: "bob", value: "oldbob" },
-            { key: "foo", value: "bar" },
+            { key: "bob", value: "oldbob", secret: false },
+            { key: "foo", value: "bar", secret: false },
           ],
         }
       )()
     ).resolves.toEqualRight({
       global: [],
       selected: [
-        { key: "bob", value: "newbob" },
-        { key: "foo", value: "bar" },
+        { key: "bob", value: "newbob", secret: false },
+        { key: "foo", value: "bar", secret: false },
       ],
     })
   })
@@ -35,8 +35,8 @@ describe("runPreRequestScript", () => {
         {
           global: [],
           selected: [
-            { key: "bob", value: "oldbob" },
-            { key: "foo", value: "bar" },
+            { key: "bob", value: "oldbob", secret: false },
+            { key: "foo", value: "bar", secret: false },
           ],
         }
       )()
@@ -52,8 +52,8 @@ describe("runPreRequestScript", () => {
         {
           global: [],
           selected: [
-            { key: "bob", value: "oldbob" },
-            { key: "foo", value: "bar" },
+            { key: "bob", value: "oldbob", secret: false },
+            { key: "foo", value: "bar", secret: false },
           ],
         }
       )()
@@ -69,8 +69,8 @@ describe("runPreRequestScript", () => {
         {
           global: [],
           selected: [
-            { key: "bob", value: "oldbob" },
-            { key: "foo", value: "bar" },
+            { key: "bob", value: "oldbob", secret: false },
+            { key: "foo", value: "bar", secret: false },
           ],
         }
       )()
@@ -87,7 +87,7 @@ describe("runPreRequestScript", () => {
       )()
     ).resolves.toEqualRight({
       global: [],
-      selected: [{ key: "foo", value: "bar" }],
+      selected: [{ key: "foo", value: "bar", secret: false }],
     })
   })
 })
diff --git a/packages/hoppscotch-js-sandbox/src/__tests__/testing/base64-helper-functions.spec.ts b/packages/hoppscotch-js-sandbox/src/__tests__/testing/base64-helper-functions.spec.ts
index 8e54af0d9..c1fc1e106 100644
--- a/packages/hoppscotch-js-sandbox/src/__tests__/testing/base64-helper-functions.spec.ts
+++ b/packages/hoppscotch-js-sandbox/src/__tests__/testing/base64-helper-functions.spec.ts
@@ -10,13 +10,13 @@ describe("Base64 helper functions", () => {
     atob: {
       script: `pw.env.set("atob", atob("SGVsbG8gV29ybGQ="))`,
       environment: {
-        selected: [{ key: "atob", value: "Hello World" }],
+        selected: [{ key: "atob", value: "Hello World", secret: false }],
       },
     },
     btoa: {
       script: `pw.env.set("btoa", btoa("Hello World"))`,
       environment: {
-        selected: [{ key: "btoa", value: "SGVsbG8gV29ybGQ=" }],
+        selected: [{ key: "btoa", value: "SGVsbG8gV29ybGQ=", secret: false }],
       },
     },
   }
diff --git a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/get.spec.ts b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/get.spec.ts
index 7ca8b0dad..fb433eac8 100644
--- a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/get.spec.ts
+++ b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/get.spec.ts
@@ -31,6 +31,7 @@ describe("pw.env.get", () => {
             {
               key: "a",
               value: "b",
+              secret: false,
             },
           ],
         }
@@ -59,6 +60,7 @@ describe("pw.env.get", () => {
             {
               key: "a",
               value: "b",
+              secret: false,
             },
           ],
           selected: [],
@@ -112,12 +114,14 @@ describe("pw.env.get", () => {
             {
               key: "a",
               value: "global val",
+              secret: false,
             },
           ],
           selected: [
             {
               key: "a",
               value: "selected val",
+              secret: false,
             },
           ],
         }
@@ -147,6 +151,7 @@ describe("pw.env.get", () => {
             {
               key: "a",
               value: "<<hello>>",
+              secret: false,
             },
           ],
         }
diff --git a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/getResolve.spec.ts b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/getResolve.spec.ts
index 740f5d104..0d64e6d41 100644
--- a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/getResolve.spec.ts
+++ b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/getResolve.spec.ts
@@ -31,6 +31,7 @@ describe("pw.env.getResolve", () => {
             {
               key: "a",
               value: "b",
+              secret: false,
             },
           ],
         }
@@ -59,6 +60,7 @@ describe("pw.env.getResolve", () => {
             {
               key: "a",
               value: "b",
+              secret: false,
             },
           ],
           selected: [],
@@ -112,12 +114,14 @@ describe("pw.env.getResolve", () => {
             {
               key: "a",
               value: "global val",
+              secret: false,
             },
           ],
           selected: [
             {
               key: "a",
               value: "selected val",
+              secret: false,
             },
           ],
         }
@@ -147,10 +151,12 @@ describe("pw.env.getResolve", () => {
             {
               key: "a",
               value: "<<hello>>",
+              secret: false,
             },
             {
               key: "hello",
               value: "there",
+              secret: false,
             },
           ],
         }
@@ -180,10 +186,12 @@ describe("pw.env.getResolve", () => {
             {
               key: "a",
               value: "<<hello>>",
+              secret: false,
             },
             {
               key: "hello",
               value: "<<a>>",
+              secret: false,
             },
           ],
         }
diff --git a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/resolve.spec.ts b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/resolve.spec.ts
index 044fcff83..022d7083a 100644
--- a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/resolve.spec.ts
+++ b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/resolve.spec.ts
@@ -43,6 +43,7 @@ describe("pw.env.resolve", () => {
             {
               key: "hello",
               value: "there",
+              secret: false,
             },
           ],
           selected: [],
@@ -73,6 +74,7 @@ describe("pw.env.resolve", () => {
             {
               key: "hello",
               value: "there",
+              secret: false,
             },
           ],
         }
@@ -101,12 +103,14 @@ describe("pw.env.resolve", () => {
             {
               key: "hello",
               value: "yo",
+              secret: false,
             },
           ],
           selected: [
             {
               key: "hello",
               value: "there",
+              secret: false,
             },
           ],
         }
@@ -136,10 +140,12 @@ describe("pw.env.resolve", () => {
             {
               key: "hello",
               value: "<<there>>",
+              secret: false,
             },
             {
               key: "there",
               value: "<<hello>>",
+              secret: false,
             },
           ],
         }
diff --git a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/set.spec.ts b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/set.spec.ts
index b81b39218..d3726d249 100644
--- a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/set.spec.ts
+++ b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/set.spec.ts
@@ -35,6 +35,7 @@ describe("pw.env.set", () => {
             {
               key: "a",
               value: "b",
+              secret: false,
             },
           ],
         }
@@ -45,6 +46,7 @@ describe("pw.env.set", () => {
           {
             key: "a",
             value: "c",
+            secret: false,
           },
         ],
       })
@@ -62,6 +64,7 @@ describe("pw.env.set", () => {
             {
               key: "a",
               value: "b",
+              secret: false,
             },
           ],
           selected: [],
@@ -73,6 +76,7 @@ describe("pw.env.set", () => {
           {
             key: "a",
             value: "c",
+            secret: false,
           },
         ],
       })
@@ -90,12 +94,14 @@ describe("pw.env.set", () => {
             {
               key: "a",
               value: "b",
+              secret: false,
             },
           ],
           selected: [
             {
               key: "a",
               value: "d",
+              secret: false,
             },
           ],
         }
@@ -106,12 +112,14 @@ describe("pw.env.set", () => {
           {
             key: "a",
             value: "b",
+            secret: false,
           },
         ],
         selected: [
           {
             key: "a",
             value: "c",
+            secret: false,
           },
         ],
       })
@@ -136,6 +144,7 @@ describe("pw.env.set", () => {
           {
             key: "a",
             value: "c",
+            secret: false,
           },
         ],
       })
diff --git a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/unset.spec.ts b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/unset.spec.ts
index aeda66d71..eb6ae5783 100644
--- a/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/unset.spec.ts
+++ b/packages/hoppscotch-js-sandbox/src/__tests__/testing/envs/unset.spec.ts
@@ -35,6 +35,7 @@ describe("pw.env.unset", () => {
             {
               key: "baseUrl",
               value: "https://echo.hoppscotch.io",
+              secret: false,
             },
           ],
         }
@@ -57,6 +58,7 @@ describe("pw.env.unset", () => {
             {
               key: "baseUrl",
               value: "https://echo.hoppscotch.io",
+              secret: false,
             },
           ],
           selected: [],
@@ -80,12 +82,14 @@ describe("pw.env.unset", () => {
             {
               key: "baseUrl",
               value: "https://httpbin.org",
+              secret: false,
             },
           ],
           selected: [
             {
               key: "baseUrl",
               value: "https://echo.hoppscotch.io",
+              secret: false,
             },
           ],
         }
@@ -96,6 +100,7 @@ describe("pw.env.unset", () => {
           {
             key: "baseUrl",
             value: "https://httpbin.org",
+            secret: false,
           },
         ],
         selected: [],
@@ -114,16 +119,19 @@ describe("pw.env.unset", () => {
             {
               key: "baseUrl",
               value: "https://echo.hoppscotch.io",
+              secret: false,
             },
           ],
           selected: [
             {
               key: "baseUrl",
               value: "https://httpbin.org",
+              secret: false,
             },
             {
               key: "baseUrl",
               value: "https://echo.hoppscotch.io",
+              secret: false,
             },
           ],
         }
@@ -134,12 +142,14 @@ describe("pw.env.unset", () => {
           {
             key: "baseUrl",
             value: "https://echo.hoppscotch.io",
+            secret: false,
           },
         ],
         selected: [
           {
             key: "baseUrl",
             value: "https://echo.hoppscotch.io",
+            secret: false,
           },
         ],
       })
@@ -157,10 +167,12 @@ describe("pw.env.unset", () => {
             {
               key: "baseUrl",
               value: "https://httpbin.org/",
+              secret: false,
             },
             {
               key: "baseUrl",
               value: "https://echo.hoppscotch.io",
+              secret: false,
             },
           ],
           selected: [],
@@ -172,6 +184,7 @@ describe("pw.env.unset", () => {
           {
             key: "baseUrl",
             value: "https://echo.hoppscotch.io",
+            secret: false,
           },
         ],
         selected: [],
@@ -225,6 +238,7 @@ describe("pw.env.unset", () => {
             {
               key: "baseUrl",
               value: "https://echo.hoppscotch.io",
+              secret: false,
             },
           ],
         }
diff --git a/packages/hoppscotch-js-sandbox/src/types/index.ts b/packages/hoppscotch-js-sandbox/src/types/index.ts
index 1b426d9a5..71d89d542 100644
--- a/packages/hoppscotch-js-sandbox/src/types/index.ts
+++ b/packages/hoppscotch-js-sandbox/src/types/index.ts
@@ -1,5 +1,3 @@
-import { Environment } from "@hoppscotch/data"
-
 /**
  * The response object structure exposed to the test script
  */
@@ -43,6 +41,13 @@ export type TestDescriptor = {
   children: TestDescriptor[]
 }
 
+// Representation of a transformed state for environment variables in the sandbox
+type TransformedEnvironmentVariable = {
+  key: string
+  value: string
+  secret: boolean
+}
+
 /**
  * Defines the result of a test script execution
  */
@@ -50,8 +55,8 @@ export type TestDescriptor = {
 export type TestResult = {
   tests: TestDescriptor[]
   envs: {
-    global: Environment["variables"]
-    selected: Environment["variables"]
+    global: TransformedEnvironmentVariable[]
+    selected: TransformedEnvironmentVariable[]
   }
 }
 
diff --git a/packages/hoppscotch-js-sandbox/src/utils.ts b/packages/hoppscotch-js-sandbox/src/utils.ts
index f7920ff88..a6d298c23 100644
--- a/packages/hoppscotch-js-sandbox/src/utils.ts
+++ b/packages/hoppscotch-js-sandbox/src/utils.ts
@@ -38,13 +38,20 @@ const setEnv = (
   const indexInGlobal = findEnvIndex(envName, global)
 
   if (indexInSelected >= 0) {
-    selected[indexInSelected].value = envValue
+    const selectedEnv = selected[indexInSelected]
+    if ("value" in selectedEnv) {
+      selectedEnv.value = envValue
+    }
   } else if (indexInGlobal >= 0) {
-    global[indexInGlobal].value = envValue
+    if ("value" in global[indexInGlobal]) {
+      // eslint-disable-next-line @typescript-eslint/no-extra-semi
+      ;(global[indexInGlobal] as { value: string }).value = envValue
+    }
   } else {
     selected.push({
       key: envName,
       value: envValue,
+      secret: false,
     })
   }
 
@@ -86,9 +93,9 @@ const getSharedMethods = (envs: TestResult["envs"]) => {
 
     const result = pipe(
       getEnv(key, updatedEnvs),
-      O.match(
+      O.fold(
         () => undefined,
-        ({ value }) => String(value)
+        (env) => String(env.value)
       )
     )
 
@@ -104,14 +111,13 @@ const getSharedMethods = (envs: TestResult["envs"]) => {
       getEnv(key, updatedEnvs),
       E.fromOption(() => "INVALID_KEY" as const),
 
-      E.map(({ value }) =>
+      E.map((e) =>
         pipe(
-          parseTemplateStringE(value, [
+          parseTemplateStringE(e.value, [
             ...updatedEnvs.selected,
             ...updatedEnvs.global,
-          ]),
-          // If the recursive resolution failed, return the unresolved value
-          E.getOrElse(() => value)
+          ]), // If the recursive resolution failed, return the unresolved value
+          E.getOrElse(() => e.value)
         )
       ),
       E.map((x) => String(x)),
diff --git a/packages/hoppscotch-selfhost-web/src/platform/environments/environments.platform.ts b/packages/hoppscotch-selfhost-web/src/platform/environments/environments.platform.ts
index 93b88cac5..a348f10ed 100644
--- a/packages/hoppscotch-selfhost-web/src/platform/environments/environments.platform.ts
+++ b/packages/hoppscotch-selfhost-web/src/platform/environments/environments.platform.ts
@@ -81,6 +81,7 @@ async function loadUserEnvironments() {
       runDispatchWithOutSyncing(() => {
         replaceEnvironments(
           environments.map(({ id, variables, name }) => ({
+            v: 1,
             id,
             name,
             variables: JSON.parse(variables),
@@ -164,6 +165,7 @@ function setupUserEnvironmentUpdatedSubscription() {
         if ((localIndex || localIndex == 0) && name) {
           runDispatchWithOutSyncing(() => {
             updateEnvironment(localIndex, {
+              v: 1,
               id,
               name,
               variables: JSON.parse(variables),
diff --git a/packages/hoppscotch-selfhost-web/src/platform/environments/environments.sync.ts b/packages/hoppscotch-selfhost-web/src/platform/environments/environments.sync.ts
index fb4094204..193aa3282 100644
--- a/packages/hoppscotch-selfhost-web/src/platform/environments/environments.sync.ts
+++ b/packages/hoppscotch-selfhost-web/src/platform/environments/environments.sync.ts
@@ -20,10 +20,14 @@ import {
   deleteUserEnvironment,
   updateUserEnvironment,
 } from "./environments.api"
+import { SecretEnvironmentService } from "@hoppscotch/common/services/secret-environment.service"
+import { getService } from "@hoppscotch/common/modules/dioc"
 
 export const environmentsMapper = createMapper<number, string>()
 export const globalEnvironmentMapper = createMapper<number, string>()
 
+const secretEnvironmentService = getService(SecretEnvironmentService)
+
 export const storeSyncDefinition: StoreSyncDefinitionOf<
   typeof environmentsStore
 > = {
@@ -34,6 +38,12 @@ export const storeSyncDefinition: StoreSyncDefinitionOf<
 
     if (E.isRight(res)) {
       const id = res.right.createUserEnvironment.id
+
+      secretEnvironmentService.updateSecretEnvironmentID(
+        environmentsStore.value.environments[lastCreatedEnvIndex].id,
+        id
+      )
+
       environmentsStore.value.environments[lastCreatedEnvIndex].id = id
       removeDuplicateEntry(id)
     }
@@ -84,7 +94,6 @@ export const storeSyncDefinition: StoreSyncDefinitionOf<
   },
   updateEnvironment({ envIndex, updatedEnv }) {
     const backendId = environmentsStore.value.environments[envIndex].id
-
     if (backendId) {
       updateUserEnvironment(backendId, updatedEnv)()
     }
@@ -97,7 +106,12 @@ export const storeSyncDefinition: StoreSyncDefinitionOf<
   setGlobalVariables({ entries }) {
     const backendId = getGlobalVariableID()
     if (backendId) {
-      updateUserEnvironment(backendId, { name: "", variables: entries })()
+      updateUserEnvironment(backendId, {
+        name: "",
+        variables: entries,
+        id: "",
+        v: 1,
+      })()
     }
   },
   clearGlobalVariables() {

From 5bcc38e36b458cf0754a2664d8a4e456ae1891ff Mon Sep 17 00:00:00 2001
From: James George <jamesgeorge998001@gmail.com>
Date: Thu, 8 Feb 2024 22:08:18 +0530
Subject: [PATCH 07/25] feat: support secret environment variables in CLI
 (#3815)

---
 packages/hoppscotch-cli/package.json          |   1 +
 .../src/__tests__/commands/test.spec.ts       | 296 ++++++++++++------
 .../collection-level-headers-auth-coll.json}  |   0
 .../env-flag-tests-coll.json}                 |   0
 .../fails-coll.json}                          |   0
 .../malformed-coll-2.json}                    |   0
 .../malformed-coll.json}                      |   0
 .../notjson-coll.txt}                         |   0
 .../passes-coll.json}                         |   0
 ...e-req-script-env-var-persistence-coll.json |  21 ++
 .../req-body-env-vars-coll.json               |   0
 .../samples/collections/secret-envs-coll.json | 107 +++++++
 .../secret-envs-persistence-coll.json         | 143 +++++++++
 ...ecret-envs-persistence-scripting-coll.json |  30 ++
 .../samples/environments/bulk-envs.json       |  32 ++
 .../{ => environments}/env-flag-envs.json     |   0
 .../samples/environments/malformed-envs.json  |  16 +
 .../req-body-env-vars-envs.json               |   3 +-
 ...ecret-envs-persistence-scripting-envs.json |  27 ++
 .../samples/environments/secret-envs.json     |  40 +++
 .../secret-supplied-values-envs.json          |  46 +++
 .../hoppscotch-cli/src/__tests__/utils.ts     |  13 +-
 .../hoppscotch-cli/src/interfaces/request.ts  |   2 +
 .../hoppscotch-cli/src/options/test/env.ts    |  46 +--
 packages/hoppscotch-cli/src/types/request.ts  |  21 +-
 packages/hoppscotch-cli/src/utils/display.ts  |   2 +-
 .../hoppscotch-cli/src/utils/pre-request.ts   |  38 ++-
 packages/hoppscotch-cli/src/utils/request.ts  |  47 ++-
 .../hoppscotch-data/src/environment/index.ts  |   1 +
 pnpm-lock.yaml                                |   4 +-
 30 files changed, 791 insertions(+), 145 deletions(-)
 rename packages/hoppscotch-cli/src/__tests__/samples/{collection-level-headers-auth.json => collections/collection-level-headers-auth-coll.json} (100%)
 rename packages/hoppscotch-cli/src/__tests__/samples/{env-flag-tests.json => collections/env-flag-tests-coll.json} (100%)
 rename packages/hoppscotch-cli/src/__tests__/samples/{fails.json => collections/fails-coll.json} (100%)
 rename packages/hoppscotch-cli/src/__tests__/samples/{malformed-collection2.json => collections/malformed-coll-2.json} (100%)
 rename packages/hoppscotch-cli/src/__tests__/samples/{malformed-collection.json => collections/malformed-coll.json} (100%)
 rename packages/hoppscotch-cli/src/__tests__/samples/{notjson.txt => collections/notjson-coll.txt} (100%)
 rename packages/hoppscotch-cli/src/__tests__/samples/{passes.json => collections/passes-coll.json} (100%)
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/collections/pre-req-script-env-var-persistence-coll.json
 rename packages/hoppscotch-cli/src/__tests__/samples/{ => collections}/req-body-env-vars-coll.json (100%)
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-coll.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-persistence-coll.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-persistence-scripting-coll.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/environments/bulk-envs.json
 rename packages/hoppscotch-cli/src/__tests__/samples/{ => environments}/env-flag-envs.json (100%)
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/environments/malformed-envs.json
 rename packages/hoppscotch-cli/src/__tests__/samples/{ => environments}/req-body-env-vars-envs.json (98%)
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/environments/secret-envs-persistence-scripting-envs.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/environments/secret-envs.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/environments/secret-supplied-values-envs.json

diff --git a/packages/hoppscotch-cli/package.json b/packages/hoppscotch-cli/package.json
index a5ace01d2..0582952f0 100644
--- a/packages/hoppscotch-cli/package.json
+++ b/packages/hoppscotch-cli/package.json
@@ -60,6 +60,7 @@
     "ts-jest": "^29.1.1",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
+    "verzod": "^0.2.2",
     "zod": "^3.22.4"
   }
 }
diff --git a/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts b/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
index db69d61d5..675e31750 100644
--- a/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
+++ b/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
@@ -3,138 +3,247 @@ import { ExecException } from "child_process";
 import { HoppErrorCode } from "../../types/errors";
 import { runCLI, getErrorCode, getTestJsonFilePath } from "../utils";
 
-describe("Test 'hopp test <file>' command:", () => {
-  test("No collection file path provided.", async () => {
-    const args = "test";
-    const { stderr } = await runCLI(args);
+describe("Test `hopp test <file>` command:", () => {
+  describe("Argument parsing", () => {
+    test("Errors with the code `INVALID_ARGUMENT` for not supplying enough arguments", async () => {
+      const args = "test";
+      const { stderr } = await runCLI(args);
 
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
-  });
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
+    });
 
-  test("Collection file not found.", async () => {
-    const args = "test notfound.json";
-    const { stderr } = await runCLI(args);
+    test("Errors with the code `INVALID_ARGUMENT` for an invalid command", async () => {
+      const args = "invalid-arg";
+      const { stderr } = await runCLI(args);
 
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("FILE_NOT_FOUND");
-  });
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
+    });
+  })
 
-  test("Collection file is invalid JSON.", async () => {
-    const args = `test ${getTestJsonFilePath(
-      "malformed-collection.json"
-    )}`;
-    const { stderr } = await runCLI(args);
+  describe("Supplied collection export file validations", () => {
+    test("Errors with the code `FILE_NOT_FOUND` if the supplied collection export file doesn't exist", async () => {
+      const args = "test notfound.json";
+      const { stderr } = await runCLI(args);
 
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("UNKNOWN_ERROR");
-  });
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("FILE_NOT_FOUND");
+    });
 
-  test("Malformed collection file.", async () => {
-    const args = `test ${getTestJsonFilePath(
-      "malformed-collection2.json"
-    )}`;
-    const { stderr } = await runCLI(args);
+    test("Errors with the code UNKNOWN_ERROR if the supplied collection export file content isn't valid JSON", async () => {
+      const args = `test ${getTestJsonFilePath("malformed-coll.json", "collection")}`;
+      const { stderr } = await runCLI(args);
 
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("MALFORMED_COLLECTION");
-  });
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("UNKNOWN_ERROR");
+    });
 
-  test("Invalid arguement.", async () => {
-    const args = "invalid-arg";
-    const { stderr } = await runCLI(args);
+    test("Errors with the code `MALFORMED_COLLECTION` if the supplied collection export file content is malformed", async () => {
+      const args = `test ${getTestJsonFilePath("malformed-coll-2.json", "collection")}`;
+      const { stderr } = await runCLI(args);
 
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
-  });
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("MALFORMED_COLLECTION");
+    });
 
-  test("Collection file not JSON type.", async () => {
-    const args = `test ${getTestJsonFilePath("notjson.txt")}`;
-    const { stderr } = await runCLI(args);
+    test("Errors with the code `INVALID_FILE_TYPE` if the supplied collection export file doesn't end with the `.json` extension", async () => {
+      const args = `test ${getTestJsonFilePath("notjson-coll.txt", "collection")}`;
+      const { stderr } = await runCLI(args);
 
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("INVALID_FILE_TYPE");
-  });
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("INVALID_FILE_TYPE");
+    });
 
-  test("Some errors occured (exit code 1).", async () => {
-    const args = `test ${getTestJsonFilePath("fails.json")}`;
-    const { error } = await runCLI(args);
+    test("Fails if the collection file includes scripts with incorrect API usage and failed assertions", async () => {
+      const args = `test ${getTestJsonFilePath("fails-coll.json", "collection")}`;
+      const { error } = await runCLI(args);
 
-    expect(error).not.toBeNull();
-    expect(error).toMatchObject(<ExecException>{
-      code: 1,
+      expect(error).not.toBeNull();
+      expect(error).toMatchObject(<ExecException>{
+        code: 1,
+      });
     });
   });
 
-  test("No errors occured (exit code 0).", async () => {
-    const args = `test ${getTestJsonFilePath("passes.json")}`;
+  test("Successfully processes a supplied collection export file of the expected format", async () => {
+    const args = `test ${getTestJsonFilePath("passes-coll.json", "collection")}`;
     const { error } = await runCLI(args);
 
     expect(error).toBeNull();
   });
 
-  test("Supports inheriting headers and authorization set at the root collection", async () => {
-    const args = `test ${getTestJsonFilePath("collection-level-headers-auth.json")}`;
+  test("Successfully inherits headers and authorization set at the root collection", async () => {
+    const args = `test ${getTestJsonFilePath(
+      "collection-level-headers-auth-coll.json", "collection"
+    )}`;
     const { error } = await runCLI(args);
 
     expect(error).toBeNull();
-  })
+  });
+
+  test("Persists environment variables set in the pre-request script for consumption in the test script", async () => {
+    const args = `test ${getTestJsonFilePath(
+      "pre-req-script-env-var-persistence-coll.json", "collection"
+    )}`;
+    const { error } = await runCLI(args);
+
+    expect(error).toBeNull();
+  });
 });
 
-describe("Test 'hopp test <file> --env <file>' command:", () => {
-  const VALID_TEST_ARGS = `test ${getTestJsonFilePath(
-    "passes.json"
-  )}`;
+describe("Test `hopp test <file> --env <file>` command:", () => {
+  describe("Supplied environment export file validations", () => {
+    const VALID_TEST_ARGS = `test ${getTestJsonFilePath("passes-coll.json", "collection")}`;
 
-  test("No env file path provided.", async () => {
-    const args = `${VALID_TEST_ARGS} --env`;
-    const { stderr } = await runCLI(args);
+    test("Errors with the code `INVALID_ARGUMENT` if no file is supplied", async () => {
+      const args = `${VALID_TEST_ARGS} --env`;
+      const { stderr } = await runCLI(args);
 
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
+    });
+
+    test("Errors with the code `INVALID_FILE_TYPE` if the supplied environment export file doesn't end with the `.json` extension", async () => {
+      const args = `${VALID_TEST_ARGS} --env ${getTestJsonFilePath(
+        "notjson-coll.txt", "collection"
+      )}`;
+      const { stderr } = await runCLI(args);
+
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("INVALID_FILE_TYPE");
+    });
+
+    test("Errors with the code `FILE_NOT_FOUND` if the supplied environment export file doesn't exist", async () => {
+      const args = `${VALID_TEST_ARGS} --env notfound.json`;
+      const { stderr } = await runCLI(args);
+
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("FILE_NOT_FOUND");
+    });
+
+    test("Errors with the code `MALFORMED_ENV_FILE` on supplying a malformed environment export file", async () => {
+      const ENV_PATH = getTestJsonFilePath("malformed-envs.json", "environment");
+      const args = `${VALID_TEST_ARGS} --env ${ENV_PATH}`;
+      const { stderr } = await runCLI(args);
+
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("MALFORMED_ENV_FILE");
+    });
+
+    test("Errors with the code `BULK_ENV_FILE` on supplying an environment export file based on the bulk environment export format", async () => {
+      const ENV_PATH = getTestJsonFilePath("bulk-envs.json", "environment");
+      const args = `${VALID_TEST_ARGS} --env ${ENV_PATH}`;
+      const { stderr } = await runCLI(args);
+
+      const out = getErrorCode(stderr);
+      expect(out).toBe<HoppErrorCode>("BULK_ENV_FILE");
+    });
   });
 
-  test("ENV file not JSON type.", async () => {
-    const args = `${VALID_TEST_ARGS} --env ${getTestJsonFilePath("notjson.txt")}`;
-    const { stderr } = await runCLI(args);
-
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("INVALID_FILE_TYPE");
-  });
-
-  test("ENV file not found.", async () => {
-    const args = `${VALID_TEST_ARGS} --env notfound.json`;
-    const { stderr } = await runCLI(args);
-
-    const out = getErrorCode(stderr);
-    expect(out).toBe<HoppErrorCode>("FILE_NOT_FOUND");
-  });
-
-  test("No errors occured (exit code 0).", async () => {
-    const TESTS_PATH = getTestJsonFilePath("env-flag-tests.json");
-    const ENV_PATH = getTestJsonFilePath("env-flag-envs.json");
+  test("Successfully resolves values from the supplied environment export file", async () => {
+    const TESTS_PATH = getTestJsonFilePath("env-flag-tests-coll.json", "collection");
+    const ENV_PATH = getTestJsonFilePath("env-flag-envs.json", "environment");
     const args = `test ${TESTS_PATH} --env ${ENV_PATH}`;
 
     const { error } = await runCLI(args);
     expect(error).toBeNull();
   });
 
-  test("Correctly resolves environment variables referenced in the request body", async () => {
-    const COLL_PATH = getTestJsonFilePath("req-body-env-vars-coll.json");
-    const ENVS_PATH = getTestJsonFilePath("req-body-env-vars-envs.json");
+  test("Successfully resolves environment variables referenced in the request body", async () => {
+    const COLL_PATH = getTestJsonFilePath("req-body-env-vars-coll.json", "collection");
+    const ENVS_PATH = getTestJsonFilePath("req-body-env-vars-envs.json", "environment");
     const args = `test ${COLL_PATH} --env ${ENVS_PATH}`;
 
     const { error } = await runCLI(args);
     expect(error).toBeNull();
   });
+
+  test("Works with shorth `-e` flag", async () => {
+    const TESTS_PATH = getTestJsonFilePath("env-flag-tests-coll.json", "collection");
+    const ENV_PATH = getTestJsonFilePath("env-flag-envs.json", "environment");
+    const args = `test ${TESTS_PATH} -e ${ENV_PATH}`;
+
+    const { error } = await runCLI(args);
+    expect(error).toBeNull();
+  });
+
+  describe("Secret environment variables", () => {
+    jest.setTimeout(10000);
+
+    // Reads secret environment values from system environment
+    test("Successfully picks the values for secret environment variables from `process.env` and persists the variables set from the pre-request script", async () => {
+      const env = {
+        ...process.env,
+        secretBearerToken: "test-token",
+        secretBasicAuthUsername: "test-user",
+        secretBasicAuthPassword: "test-pass",
+        secretQueryParamValue: "secret-query-param-value",
+        secretBodyValue: "secret-body-value",
+        secretHeaderValue: "secret-header-value",
+      };
+
+      const COLL_PATH = getTestJsonFilePath("secret-envs-coll.json", "collection");
+      const ENVS_PATH = getTestJsonFilePath("secret-envs.json", "environment");
+      const args = `test ${COLL_PATH} --env ${ENVS_PATH}`;
+
+      const { error, stdout } = await runCLI(args, { env });
+
+      expect(stdout).toContain(
+        "https://httpbin.org/basic-auth/*********/*********"
+      );
+      expect(error).toBeNull();
+    });
+
+    // Prefers values specified in the environment export file over values set in the system environment
+    test("Successfully picks the values for secret environment variables set directly in the environment export file and persists the environment variables set from the pre-request script", async () => {
+      const COLL_PATH = getTestJsonFilePath("secret-envs-coll.json", "collection");
+      const ENVS_PATH = getTestJsonFilePath("secret-supplied-values-envs.json", "environment");
+      const args = `test ${COLL_PATH} --env ${ENVS_PATH}`;
+
+      const { error, stdout } = await runCLI(args);
+
+      expect(stdout).toContain(
+        "https://httpbin.org/basic-auth/*********/*********"
+      );
+      expect(error).toBeNull();
+    });
+
+    // Values set from the scripting context takes the highest precedence
+    test("Setting values for secret environment variables from the pre-request script overrides values set at the supplied environment export file", async () => {
+      const COLL_PATH = getTestJsonFilePath(
+        "secret-envs-persistence-coll.json", "collection"
+      );
+      const ENVS_PATH = getTestJsonFilePath("secret-supplied-values-envs.json", "environment");
+      const args = `test ${COLL_PATH} --env ${ENVS_PATH}`;
+
+      const { error, stdout } = await runCLI(args);
+
+      expect(stdout).toContain(
+        "https://httpbin.org/basic-auth/*********/*********"
+      );
+      expect(error).toBeNull();
+    });
+
+    test("Persists secret environment variable values set from the pre-request script for consumption in the request and post-request script context", async () => {
+      const COLL_PATH = getTestJsonFilePath(
+        "secret-envs-persistence-scripting-coll.json", "collection"
+      );
+      const ENVS_PATH = getTestJsonFilePath(
+        "secret-envs-persistence-scripting-envs.json", "environment"
+      );
+      const args = `test ${COLL_PATH} --env ${ENVS_PATH}`;
+
+      const { error } = await runCLI(args);
+      expect(error).toBeNull();
+    });
+  });
 });
 
-describe("Test 'hopp test <file> --delay <delay_in_ms>' command:", () => {
-  const VALID_TEST_ARGS = `test ${getTestJsonFilePath(
-    "passes.json"
-  )}`;
+describe("Test `hopp test <file> --delay <delay_in_ms>` command:", () => {
+  const VALID_TEST_ARGS = `test ${getTestJsonFilePath("passes-coll.json", "collection")}`;
 
-  test("No value passed to delay flag.", async () => {
+  test("Errors with the code `INVALID_ARGUMENT` on not supplying a delay value", async () => {
     const args = `${VALID_TEST_ARGS} --delay`;
     const { stderr } = await runCLI(args);
 
@@ -142,7 +251,7 @@ describe("Test 'hopp test <file> --delay <delay_in_ms>' command:", () => {
     expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
   });
 
-  test("Invalid value passed to delay flag.", async () => {
+  test("Errors with the code `INVALID_ARGUMENT` on supplying an invalid delay value", async () => {
     const args = `${VALID_TEST_ARGS} --delay 'NaN'`;
     const { stderr } = await runCLI(args);
 
@@ -150,10 +259,17 @@ describe("Test 'hopp test <file> --delay <delay_in_ms>' command:", () => {
     expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
   });
 
-  test("Valid value passed to delay flag.", async () => {
+  test("Successfully performs delayed request execution for a valid delay value", async () => {
     const args = `${VALID_TEST_ARGS} --delay 1`;
     const { error } = await runCLI(args);
 
     expect(error).toBeNull();
   });
+
+  test("Works with the short `-d` flag", async () => {
+    const args = `${VALID_TEST_ARGS} -d 1`;
+    const { error } = await runCLI(args);
+
+    expect(error).toBeNull();
+  });
 });
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/collection-level-headers-auth.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/collection-level-headers-auth-coll.json
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/collection-level-headers-auth.json
rename to packages/hoppscotch-cli/src/__tests__/samples/collections/collection-level-headers-auth-coll.json
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/env-flag-tests.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/env-flag-tests-coll.json
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/env-flag-tests.json
rename to packages/hoppscotch-cli/src/__tests__/samples/collections/env-flag-tests-coll.json
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/fails.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/fails-coll.json
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/fails.json
rename to packages/hoppscotch-cli/src/__tests__/samples/collections/fails-coll.json
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/malformed-collection2.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/malformed-coll-2.json
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/malformed-collection2.json
rename to packages/hoppscotch-cli/src/__tests__/samples/collections/malformed-coll-2.json
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/malformed-collection.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/malformed-coll.json
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/malformed-collection.json
rename to packages/hoppscotch-cli/src/__tests__/samples/collections/malformed-coll.json
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/notjson.txt b/packages/hoppscotch-cli/src/__tests__/samples/collections/notjson-coll.txt
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/notjson.txt
rename to packages/hoppscotch-cli/src/__tests__/samples/collections/notjson-coll.txt
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/passes.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/passes-coll.json
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/passes.json
rename to packages/hoppscotch-cli/src/__tests__/samples/collections/passes-coll.json
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/collections/pre-req-script-env-var-persistence-coll.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/pre-req-script-env-var-persistence-coll.json
new file mode 100644
index 000000000..78d16cb82
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/collections/pre-req-script-env-var-persistence-coll.json
@@ -0,0 +1,21 @@
+{
+  "v": 2,
+  "name": "pre-req-script-env-var-persistence-coll",
+  "folders": [],
+  "requests": [
+    {
+      "v": "1",
+      "auth": { "authType": "none", "authActive": true },
+      "body": { "body": null, "contentType": null },
+      "name": "sample-req",
+      "method": "GET",
+      "params": [],
+      "headers": [],
+      "endpoint": "https://echo.hoppscotch.io",
+      "testScript": "pw.expect(pw.env.get(\"variable\")).toBe(\"value\")",
+      "preRequestScript": "pw.env.set(\"variable\", \"value\");"
+    }
+  ],
+  "auth": { "authType": "inherit", "authActive": true },
+  "headers": []
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/req-body-env-vars-coll.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/req-body-env-vars-coll.json
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/req-body-env-vars-coll.json
rename to packages/hoppscotch-cli/src/__tests__/samples/collections/req-body-env-vars-coll.json
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-coll.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-coll.json
new file mode 100644
index 000000000..f07da4d2b
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-coll.json
@@ -0,0 +1,107 @@
+{
+  "v": 2,
+  "name": "secret-envs-coll",
+  "folders": [],
+  "requests": [
+    {
+      "v": "1",
+      "auth": { "authType": "none", "authActive": true },
+      "body": { "body": null, "contentType": null },
+      "name": "test-secret-headers",
+      "method": "GET",
+      "params": [],
+      "headers": [
+        {
+          "key": "Secret-Header-Key",
+          "value": "<<secretHeaderValue>>",
+          "active": true
+        }
+      ],
+      "endpoint": "<<baseURL>>/headers",
+      "testScript": "pw.test(\"Successfully parses secret variable holding the header value\", () => {\n    const secretHeaderValue = pw.env.get(\"secretHeaderValue\")\n    pw.expect(secretHeaderValue).toBe(\"secret-header-value\")\n    \n    if (secretHeaderValue) {\n      pw.expect(pw.response.body.headers[\"Secret-Header-Key\"]).toBe(secretHeaderValue)\n    }\n\n    pw.expect(pw.env.get(\"secretHeaderValueFromPreReqScript\")).toBe(\"secret-header-value\")\n})",
+      "preRequestScript": "const secretHeaderValueFromPreReqScript = pw.env.get(\"secretHeaderValue\")\npw.env.set(\"secretHeaderValueFromPreReqScript\", secretHeaderValueFromPreReqScript)"
+    },
+    {
+      "v": "1",
+      "auth": { "authType": "none", "authActive": true },
+      "body": {
+        "body": "{\n  \"secretBodyKey\": \"<<secretBodyValue>>\"\n}",
+        "contentType": "application/json"
+      },
+      "name": "test-secret-body",
+      "method": "POST",
+      "params": [],
+      "headers": [],
+      "endpoint": "<<baseURL>>/post",
+      "testScript": "pw.test(\"Successfully parses secret variable holding the request body value\", () => {\n    const secretBodyValue = pw.env.get(\"secretBodyValue\")\n    pw.expect(secretBodyValue).toBe(\"secret-body-value\")\n  \n    if (secretBodyValue) {\n      pw.expect(pw.response.body.json.secretBodyKey).toBe(secretBodyValue)\n    }\n\n    pw.expect(pw.env.get(\"secretBodyValueFromPreReqScript\")).toBe(\"secret-body-value\")\n})",
+      "preRequestScript": "const secretBodyValueFromPreReqScript = pw.env.get(\"secretBodyValue\")\npw.env.set(\"secretBodyValueFromPreReqScript\", secretBodyValueFromPreReqScript)"
+    },
+    {
+      "v": "1",
+      "auth": { "authType": "none", "authActive": true },
+      "body": { "body": null, "contentType": null },
+      "name": "test-secret-query-params",
+      "method": "GET",
+      "params": [
+        {
+          "key": "secretQueryParamKey",
+          "value": "<<secretQueryParamValue>>",
+          "active": true
+        }
+      ],
+      "headers": [],
+      "endpoint": "<<baseURL>>/get",
+      "testScript": "pw.test(\"Successfully parses secret variable holding the query param value\", () => {\n    const secretQueryParamValue = pw.env.get(\"secretQueryParamValue\")\n    pw.expect(secretQueryParamValue).toBe(\"secret-query-param-value\")\n    \n    if (secretQueryParamValue) {\n      pw.expect(pw.response.body.args.secretQueryParamKey).toBe(secretQueryParamValue)\n    }\n\n    pw.expect(pw.env.get(\"secretQueryParamValueFromPreReqScript\")).toBe(\"secret-query-param-value\")\n})",
+      "preRequestScript": "const secretQueryParamValueFromPreReqScript = pw.env.get(\"secretQueryParamValue\")\npw.env.set(\"secretQueryParamValueFromPreReqScript\", secretQueryParamValueFromPreReqScript)"
+    },
+    {
+      "v": "1",
+      "auth": {
+        "authType": "basic",
+        "password": "<<secretBasicAuthPassword>>",
+        "username": "<<secretBasicAuthUsername>>",
+        "authActive": true
+      },
+      "body": { "body": null, "contentType": null },
+      "name": "test-secret-basic-auth",
+      "method": "GET",
+      "params": [],
+      "headers": [],
+      "endpoint": "<<baseURL>>/basic-auth/<<secretBasicAuthUsername>>/<<secretBasicAuthPassword>>",
+      "testScript": "pw.test(\"Successfully parses secret variables holding basic auth credentials\", () => {\n\tconst secretBasicAuthUsername = pw.env.get(\"secretBasicAuthUsername\")\n  \tconst secretBasicAuthPassword = pw.env.get(\"secretBasicAuthPassword\")\n\n    pw.expect(secretBasicAuthUsername).toBe(\"test-user\")\n    pw.expect(secretBasicAuthPassword).toBe(\"test-pass\")\n\n    if (secretBasicAuthUsername && secretBasicAuthPassword) {\n      const { authenticated, user } = pw.response.body\n      pw.expect(authenticated).toBe(true)\n      pw.expect(user).toBe(secretBasicAuthUsername)\n    }\n});",
+      "preRequestScript": ""
+    },
+    {
+      "v": "1",
+      "auth": {
+        "token": "<<secretBearerToken>>",
+        "authType": "bearer",
+        "password": "testpassword",
+        "username": "testuser",
+        "authActive": true
+      },
+      "body": { "body": null, "contentType": null },
+      "name": "test-secret-bearer-auth",
+      "method": "GET",
+      "params": [],
+      "headers": [],
+      "endpoint": "<<baseURL>>/bearer",
+      "testScript": "pw.test(\"Successfully parses secret variable holding the bearer token\", () => {\n    const secretBearerToken = pw.env.get(\"secretBearerToken\")\n  const preReqSecretBearerToken = pw.env.get(\"preReqSecretBearerToken\")\n\n    pw.expect(secretBearerToken).toBe(\"test-token\")\n\n    if (secretBearerToken) { \n      pw.expect(pw.response.body.token).toBe(secretBearerToken)\n      pw.expect(preReqSecretBearerToken).toBe(\"test-token\")\n    }\n});",
+      "preRequestScript": "const secretBearerToken = pw.env.get(\"secretBearerToken\")\npw.env.set(\"preReqSecretBearerToken\", secretBearerToken)"
+    },
+    {
+      "v": "1",
+      "auth": { "authType": "none", "authActive": true },
+      "body": { "body": null, "contentType": null },
+      "name": "test-secret-fallback",
+      "method": "GET",
+      "params": [],
+      "headers": [],
+      "endpoint": "<<baseURL>>",
+      "testScript": "pw.test(\"Returns an empty string if the value for a secret environment variable is not found in the system environment\", () => {\n  pw.expect(pw.env.get(\"nonExistentValueInSystemEnv\")).toBe(\"\")\n})",
+      "preRequestScript": ""
+    }
+  ],
+  "auth": { "authType": "inherit", "authActive": false },
+  "headers": []
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-persistence-coll.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-persistence-coll.json
new file mode 100644
index 000000000..809233e85
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-persistence-coll.json
@@ -0,0 +1,143 @@
+{
+  "v": 2,
+  "name": "secret-envs-setters-coll",
+  "folders": [],
+  "requests": [
+    {
+      "v": "1",
+      "auth": {
+        "authType": "none",
+        "authActive": true
+      },
+      "body": {
+        "body": null,
+        "contentType": null
+      },
+      "name": "test-secret-headers",
+      "method": "GET",
+      "params": [],
+      "headers": [
+        {
+          "key": "Secret-Header-Key",
+          "value": "<<secretHeaderValue>>",
+          "active": true
+        }
+      ],
+      "endpoint": "<<baseURL>>/headers",
+      "testScript": "pw.test(\"Successfully parses secret variable holding the header value\", () => {\n    const secretHeaderValue = pw.env.getResolve(\"secretHeaderValue\")\n    pw.expect(secretHeaderValue).toBe(\"secret-header-value\")\n    \n    if (secretHeaderValue) {\n      pw.expect(pw.response.body.headers[\"Secret-Header-Key\"]).toBe(secretHeaderValue)\n    }\n\n    pw.expect(pw.env.getResolve(\"secretHeaderValueFromPreReqScript\")).toBe(\"secret-header-value\")\n})",
+      "preRequestScript": "pw.env.set(\"secretHeaderValue\", \"secret-header-value\")\n\nconst secretHeaderValueFromPreReqScript = pw.env.getResolve(\"secretHeaderValue\")\npw.env.set(\"secretHeaderValueFromPreReqScript\", secretHeaderValueFromPreReqScript)"
+    },
+    {
+      "v": "1",
+      "auth": {
+        "authType": "none",
+        "authActive": true
+      },
+      "body": {
+        "body": null,
+        "contentType": null
+      },
+      "name": "test-secret-headers-overrides",
+      "method": "GET",
+      "params": [],
+      "headers": [
+        {
+          "key": "Secret-Header-Key",
+          "value": "<<secretHeaderValue>>",
+          "active": true
+        }
+      ],
+      "endpoint": "<<baseURL>>/headers",
+      "testScript": "pw.test(\"Value set at the pre-request script takes precedence\", () => {\n    const secretHeaderValue = pw.env.getResolve(\"secretHeaderValue\")\n    pw.expect(secretHeaderValue).toBe(\"secret-header-value-overriden\")\n    \n    if (secretHeaderValue) {\n      pw.expect(pw.response.body.headers[\"Secret-Header-Key\"]).toBe(secretHeaderValue)\n    }\n\n    pw.expect(pw.env.getResolve(\"secretHeaderValueFromPreReqScript\")).toBe(\"secret-header-value-overriden\")\n})",
+      "preRequestScript": "pw.env.set(\"secretHeaderValue\", \"secret-header-value-overriden\")\n\nconst secretHeaderValueFromPreReqScript = pw.env.getResolve(\"secretHeaderValue\")\npw.env.set(\"secretHeaderValueFromPreReqScript\", secretHeaderValueFromPreReqScript)"
+    },
+    {
+      "v": "1",
+      "auth": {
+        "authType": "none",
+        "authActive": true
+      },
+      "body": {
+        "body": "{\n  \"secretBodyKey\": \"<<secretBodyValue>>\"\n}",
+        "contentType": "application/json"
+      },
+      "name": "test-secret-body",
+      "method": "POST",
+      "params": [],
+      "headers": [],
+      "endpoint": "<<baseURL>>/post",
+      "testScript": "pw.test(\"Successfully parses secret variable holding the request body value\", () => {\n    const secretBodyValue = pw.env.get(\"secretBodyValue\")\n    pw.expect(secretBodyValue).toBe(\"secret-body-value\")\n  \n    if (secretBodyValue) {\n      pw.expect(pw.response.body.json.secretBodyKey).toBe(secretBodyValue)\n    }\n\n    pw.expect(pw.env.get(\"secretBodyValueFromPreReqScript\")).toBe(\"secret-body-value\")\n})",
+      "preRequestScript": "const secretBodyValue = pw.env.get(\"secretBodyValue\")\n\nif (!secretBodyValue) { \n  pw.env.set(\"secretBodyValue\", \"secret-body-value\")\n}\n\nconst secretBodyValueFromPreReqScript = pw.env.get(\"secretBodyValue\")\npw.env.set(\"secretBodyValueFromPreReqScript\", secretBodyValueFromPreReqScript)"
+    },
+    {
+      "v": "1",
+      "auth": {
+        "authType": "none",
+        "authActive": true
+      },
+      "body": {
+        "body": null,
+        "contentType": null
+      },
+      "name": "test-secret-query-params",
+      "method": "GET",
+      "params": [
+        {
+          "key": "secretQueryParamKey",
+          "value": "<<secretQueryParamValue>>",
+          "active": true
+        }
+      ],
+      "headers": [],
+      "endpoint": "<<baseURL>>/get",
+      "testScript": "pw.test(\"Successfully parses secret variable holding the query param value\", () => {\n    const secretQueryParamValue = pw.env.get(\"secretQueryParamValue\")\n    pw.expect(secretQueryParamValue).toBe(\"secret-query-param-value\")\n    \n    if (secretQueryParamValue) {\n      pw.expect(pw.response.body.args.secretQueryParamKey).toBe(secretQueryParamValue)\n    }\n\n    pw.expect(pw.env.get(\"secretQueryParamValueFromPreReqScript\")).toBe(\"secret-query-param-value\")\n})",
+      "preRequestScript": "const secretQueryParamValue = pw.env.get(\"secretQueryParamValue\")\n\nif (!secretQueryParamValue) {\n  pw.env.set(\"secretQueryParamValue\", \"secret-query-param-value\")\n}\n\nconst secretQueryParamValueFromPreReqScript = pw.env.get(\"secretQueryParamValue\")\npw.env.set(\"secretQueryParamValueFromPreReqScript\", secretQueryParamValueFromPreReqScript)"
+    },
+    {
+      "v": "1",
+      "auth": {
+        "authType": "basic",
+        "password": "<<secretBasicAuthPassword>>",
+        "username": "<<secretBasicAuthUsername>>",
+        "authActive": true
+      },
+      "body": {
+        "body": null,
+        "contentType": null
+      },
+      "name": "test-secret-basic-auth",
+      "method": "GET",
+      "params": [],
+      "headers": [],
+      "endpoint": "<<baseURL>>/basic-auth/<<secretBasicAuthUsername>>/<<secretBasicAuthPassword>>",
+      "testScript": "pw.test(\"Successfully parses secret variables holding basic auth credentials\", () => {\n\tconst secretBasicAuthUsername = pw.env.get(\"secretBasicAuthUsername\")\n  \tconst secretBasicAuthPassword = pw.env.get(\"secretBasicAuthPassword\")\n\n    pw.expect(secretBasicAuthUsername).toBe(\"test-user\")\n    pw.expect(secretBasicAuthPassword).toBe(\"test-pass\")\n\n    if (secretBasicAuthUsername && secretBasicAuthPassword) {\n      const { authenticated, user } = pw.response.body\n      pw.expect(authenticated).toBe(true)\n      pw.expect(user).toBe(secretBasicAuthUsername)\n    }\n});",
+      "preRequestScript": "let secretBasicAuthUsername = pw.env.get(\"secretBasicAuthUsername\")\n\nlet secretBasicAuthPassword = pw.env.get(\"secretBasicAuthPassword\")\n\nif (!secretBasicAuthUsername) {\n  pw.env.set(\"secretBasicAuthUsername\", \"test-user\")\n}\n\nif (!secretBasicAuthPassword) {\n  pw.env.set(\"secretBasicAuthPassword\", \"test-pass\")\n}"
+    },
+    {
+      "v": "1",
+      "auth": {
+        "token": "<<secretBearerToken>>",
+        "authType": "bearer",
+        "password": "testpassword",
+        "username": "testuser",
+        "authActive": true
+      },
+      "body": {
+        "body": null,
+        "contentType": null
+      },
+      "name": "test-secret-bearer-auth",
+      "method": "GET",
+      "params": [],
+      "headers": [],
+      "endpoint": "<<baseURL>>/bearer",
+      "testScript": "pw.test(\"Successfully parses secret variable holding the bearer token\", () => {\n    const secretBearerToken = pw.env.resolve(\"<<secretBearerToken>>\")\n  const preReqSecretBearerToken = pw.env.resolve(\"<<preReqSecretBearerToken>>\")\n\n    pw.expect(secretBearerToken).toBe(\"test-token\")\n\n    if (secretBearerToken) { \n      pw.expect(pw.response.body.token).toBe(secretBearerToken)\n      pw.expect(preReqSecretBearerToken).toBe(\"test-token\")\n    }\n});",
+      "preRequestScript": "let secretBearerToken = pw.env.resolve(\"<<secretBearerToken>>\")\n\nif (!secretBearerToken) {\n  pw.env.set(\"secretBearerToken\", \"test-token\")\n  secretBearerToken = pw.env.resolve(\"<<secretBearerToken>>\")\n}\n\npw.env.set(\"preReqSecretBearerToken\", secretBearerToken)"
+    }
+  ],
+  "auth": {
+    "authType": "inherit",
+    "authActive": false
+  },
+  "headers": []
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-persistence-scripting-coll.json b/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-persistence-scripting-coll.json
new file mode 100644
index 000000000..0bb77e2b1
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/collections/secret-envs-persistence-scripting-coll.json
@@ -0,0 +1,30 @@
+{
+  "v": 2,
+  "name": "secret-envs-persistence-scripting-req",
+  "folders": [],
+  "requests": [
+    {
+      "v": "1",
+      "endpoint": "https://httpbin.org/post",
+      "name": "req",
+      "params": [],
+      "headers": [
+        {
+          "active": true,
+          "key": "Custom-Header",
+          "value": "<<customHeaderValueFromSecretVar>>"
+        }
+      ],
+      "method": "POST",
+      "auth": { "authType": "none", "authActive": true },
+      "preRequestScript": "pw.env.set(\"preReqVarOne\", \"pre-req-value-one\")\n\npw.env.set(\"preReqVarTwo\", \"pre-req-value-two\")\n\npw.env.set(\"customHeaderValueFromSecretVar\", \"custom-header-secret-value\")\n\npw.env.set(\"customBodyValue\", \"custom-body-value\")",
+      "testScript": "pw.test(\"Secret environment value set from the pre-request script takes precedence\", () => {\n  pw.expect(pw.env.get(\"preReqVarOne\")).toBe(\"pre-req-value-one\")\n})\n\npw.test(\"Successfully sets initial value for the secret variable from the pre-request script\", () => {\n  pw.env.set(\"postReqVarTwo\", \"post-req-value-two\")\n  pw.expect(pw.env.get(\"postReqVarTwo\")).toBe(\"post-req-value-two\")\n})\n\npw.test(\"Successfully resolves secret variable values referred in request headers that are set in pre-request sccript\", () => {\n  pw.expect(pw.response.body.headers[\"Custom-Header\"]).toBe(\"custom-header-secret-value\")\n})\n\npw.test(\"Successfully resolves secret variable values referred in request body that are set in pre-request sccript\", () => {\n  pw.expect(pw.response.body.json.key).toBe(\"custom-body-value\")\n})\n\npw.test(\"Secret environment variable set from the post-request script takes precedence\", () => {\n  pw.env.set(\"postReqVarOne\", \"post-req-value-one\")\n  pw.expect(pw.env.get(\"postReqVarOne\")).toBe(\"post-req-value-one\")\n})\n\npw.test(\"Successfully sets initial value for the secret variable from the post-request script\", () => {\n  pw.env.set(\"postReqVarTwo\", \"post-req-value-two\")\n  pw.expect(pw.env.get(\"postReqVarTwo\")).toBe(\"post-req-value-two\")\n})\n\npw.test(\"Successfully removes environment variables via the pw.env.unset method\", () => {\n  pw.env.unset(\"preReqVarOne\")\n  pw.env.unset(\"postReqVarTwo\")\n\n  pw.expect(pw.env.get(\"preReqVarOne\")).toBe(undefined)\n  pw.expect(pw.env.get(\"postReqVarTwo\")).toBe(undefined)\n})",
+      "body": {
+        "contentType": "application/json",
+        "body": "{\n  \"key\": \"<<customBodyValue>>\"\n}"
+      }
+    }
+  ],
+  "auth": { "authType": "inherit", "authActive": false },
+  "headers": []
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/environments/bulk-envs.json b/packages/hoppscotch-cli/src/__tests__/samples/environments/bulk-envs.json
new file mode 100644
index 000000000..7c5633820
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/environments/bulk-envs.json
@@ -0,0 +1,32 @@
+[
+  {
+    "v": 0,
+    "name": "Env-I",
+    "variables": [
+      {
+        "key": "firstName",
+        "value": "John"
+      },
+      {
+        "key": "lastName",
+        "value": "Doe"
+      }
+    ]
+  },
+  {
+    "v": 1,
+    "id": "2",
+    "name": "Env-II",
+    "variables": [
+      {
+        "key": "baseUrl",
+        "value": "https://echo.hoppscotch.io",
+        "secret": false
+      },
+      {
+        "key": "secretVar",
+        "secret": true
+      }
+    ]
+  }
+]
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/env-flag-envs.json b/packages/hoppscotch-cli/src/__tests__/samples/environments/env-flag-envs.json
similarity index 100%
rename from packages/hoppscotch-cli/src/__tests__/samples/env-flag-envs.json
rename to packages/hoppscotch-cli/src/__tests__/samples/environments/env-flag-envs.json
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/environments/malformed-envs.json b/packages/hoppscotch-cli/src/__tests__/samples/environments/malformed-envs.json
new file mode 100644
index 000000000..7d0752528
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/environments/malformed-envs.json
@@ -0,0 +1,16 @@
+{
+  "id": 123,
+  "v": "1",
+  "name": "secret-envs",
+  "values": [
+    {
+      "key": "secretVar",
+      "secret": true
+    },
+    {
+      "key": "regularVar",
+      "secret": false,
+      "value": "regular-variable"
+    }
+  ]
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/req-body-env-vars-envs.json b/packages/hoppscotch-cli/src/__tests__/samples/environments/req-body-env-vars-envs.json
similarity index 98%
rename from packages/hoppscotch-cli/src/__tests__/samples/req-body-env-vars-envs.json
rename to packages/hoppscotch-cli/src/__tests__/samples/environments/req-body-env-vars-envs.json
index 323bbb881..eb3b90842 100644
--- a/packages/hoppscotch-cli/src/__tests__/samples/req-body-env-vars-envs.json
+++ b/packages/hoppscotch-cli/src/__tests__/samples/environments/req-body-env-vars-envs.json
@@ -1,4 +1,5 @@
 {
+  "v": 0,
   "name": "Response body sample",
   "variables": [
     {
@@ -34,4 +35,4 @@
       "value": "<<salutation>> <<fullName>>"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-envs-persistence-scripting-envs.json b/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-envs-persistence-scripting-envs.json
new file mode 100644
index 000000000..b03e0508c
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-envs-persistence-scripting-envs.json
@@ -0,0 +1,27 @@
+{
+  "v": 1,
+  "id": "2",
+  "name": "secret-envs-persistence-scripting-envs",
+  "variables": [
+    {
+      "key": "preReqVarOne",
+      "secret": true
+    },
+    {
+      "key": "preReqVarTwo",
+      "secret": true
+    },
+    {
+      "key": "postReqVarOne",
+      "secret": true
+    },
+    {
+      "key": "preReqVarTwo",
+      "secret": true
+    },
+    {
+      "key": "customHeaderValueFromSecretVar",
+      "secret": true
+    }
+  ]
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-envs.json b/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-envs.json
new file mode 100644
index 000000000..53d33bb35
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-envs.json
@@ -0,0 +1,40 @@
+{
+  "id": "2",
+  "v": 1,
+  "name": "secret-envs",
+  "variables": [
+    {
+      "key": "secretBearerToken",
+      "secret": true
+    },
+    {
+      "key": "secretBasicAuthUsername",
+      "secret": true
+    },
+    {
+      "key": "secretBasicAuthPassword",
+      "secret": true
+    },
+    {
+      "key": "secretQueryParamValue",
+      "secret": true
+    },
+    {
+      "key": "secretBodyValue",
+      "secret": true
+    },
+    {
+      "key": "secretHeaderValue",
+      "secret": true
+    },
+    {
+      "key": "nonExistentValueInSystemEnv",
+      "secret": true
+    },
+    {
+      "key": "baseURL",
+      "value": "https://httpbin.org",
+      "secret": false
+    }
+  ]
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-supplied-values-envs.json b/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-supplied-values-envs.json
new file mode 100644
index 000000000..fec73a293
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/environments/secret-supplied-values-envs.json
@@ -0,0 +1,46 @@
+{
+  "v": 1,
+  "id": "2",
+  "name": "secret-values-envs",
+  "variables": [
+    {
+      "key": "secretBearerToken",
+      "value": "test-token",
+      "secret": true
+    },
+    {
+      "key": "secretBasicAuthUsername",
+      "value": "test-user",
+      "secret": true
+    },
+    {
+      "key": "secretBasicAuthPassword",
+      "value": "test-pass",
+      "secret": true
+    },
+    {
+      "key": "secretQueryParamValue",
+      "value": "secret-query-param-value",
+      "secret": true
+    },
+    {
+      "key": "secretBodyValue",
+      "value": "secret-body-value",
+      "secret": true
+    },
+    {
+      "key": "secretHeaderValue",
+      "value": "secret-header-value",
+      "secret": true
+    },
+    {
+      "key": "nonExistentValueInSystemEnv",
+      "secret": true
+    },
+    {
+      "key": "baseURL",
+      "value": "https://httpbin.org",
+      "secret": false
+    }
+  ]
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/utils.ts b/packages/hoppscotch-cli/src/__tests__/utils.ts
index afe437136..f6068b2d6 100644
--- a/packages/hoppscotch-cli/src/__tests__/utils.ts
+++ b/packages/hoppscotch-cli/src/__tests__/utils.ts
@@ -3,13 +3,13 @@ import { resolve } from "path";
 
 import { ExecResponse } from "./types";
 
-export const runCLI = (args: string): Promise<ExecResponse> =>
+export const runCLI = (args: string, options = {}): Promise<ExecResponse> =>
   {
     const CLI_PATH = resolve(__dirname, "../../bin/hopp");
     const command = `node ${CLI_PATH} ${args}`
 
     return new Promise((resolve) =>
-      exec(command, (error, stdout, stderr) => resolve({ error, stdout, stderr }))
+      exec(command, options, (error, stdout, stderr) => resolve({ error, stdout, stderr }))
     );
   }
 
@@ -25,7 +25,12 @@ export const getErrorCode = (out: string) => {
   return ansiTrimmedStr.split(" ")[0];
 };
 
-export const getTestJsonFilePath = (file: string) => {
-  const filePath = resolve(__dirname, `../../src/__tests__/samples/${file}`);
+export const getTestJsonFilePath = (file: string, kind: "collection" | "environment") => {
+  const kindDir = {
+    collection: "collections",
+    environment: "environments",
+  }[kind];
+
+  const filePath = resolve(__dirname, `../../src/__tests__/samples/${kindDir}/${file}`);
   return filePath;
 };
diff --git a/packages/hoppscotch-cli/src/interfaces/request.ts b/packages/hoppscotch-cli/src/interfaces/request.ts
index 6dd22576a..9eb3982f7 100644
--- a/packages/hoppscotch-cli/src/interfaces/request.ts
+++ b/packages/hoppscotch-cli/src/interfaces/request.ts
@@ -21,6 +21,7 @@ export interface RequestStack {
  */
 export interface RequestConfig extends AxiosRequestConfig {
   supported: boolean;
+  displayUrl?: string
 }
 
 export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
@@ -30,6 +31,7 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
    * This contains path, params and environment variables all applied to it
    */
   effectiveFinalURL: string;
+  effectiveFinalDisplayURL?: string;
   effectiveFinalHeaders: { key: string; value: string; active: boolean }[];
   effectiveFinalParams: { key: string; value: string; active: boolean }[];
   effectiveFinalBody: FormData | string | null;
diff --git a/packages/hoppscotch-cli/src/options/test/env.ts b/packages/hoppscotch-cli/src/options/test/env.ts
index 1cd8b140b..6e1c45271 100644
--- a/packages/hoppscotch-cli/src/options/test/env.ts
+++ b/packages/hoppscotch-cli/src/options/test/env.ts
@@ -1,34 +1,42 @@
+import { Environment } from "@hoppscotch/data";
+import { entityReference } from "verzod";
+import { z } from "zod";
+
 import { error } from "../../types/errors";
 import {
-  HoppEnvs,
-  HoppEnvPair,
   HoppEnvKeyPairObject,
-  HoppEnvExportObject,
-  HoppBulkEnvExportObject,
+  HoppEnvPair,
+  HoppEnvs
 } from "../../types/request";
 import { readJsonFile } from "../../utils/mutators";
+
 /**
- * Parses env json file for given path and validates the parsed env json object.
- * @param path Path of env.json file to be parsed.
- * @returns For successful parsing we get HoppEnvs object.
+ * Parses env json file for given path and validates the parsed env json object
+ * @param path Path of env.json file to be parsed
+ * @returns For successful parsing we get HoppEnvs object
  */
 export async function parseEnvsData(path: string) {
   const contents = await readJsonFile(path);
-  const envPairs: Array<HoppEnvPair> = [];
-  const HoppEnvKeyPairResult = HoppEnvKeyPairObject.safeParse(contents);
-  const HoppEnvExportObjectResult = HoppEnvExportObject.safeParse(contents);
-  const HoppBulkEnvExportObjectResult =
-    HoppBulkEnvExportObject.safeParse(contents);
+  const envPairs: Array<Environment["variables"][number] | HoppEnvPair> = [];
 
-  // CLI doesnt support bulk environments export.
-  // Hence we check for this case and throw an error if it matches the format.
+  // The legacy key-value pair format that is still supported
+  const HoppEnvKeyPairResult = HoppEnvKeyPairObject.safeParse(contents);
+
+  // Shape of the single environment export object that is exported from the app
+  const HoppEnvExportObjectResult = Environment.safeParse(contents);
+
+  // Shape of the bulk environment export object that is exported from the app
+  const HoppBulkEnvExportObjectResult = z.array(entityReference(Environment)).safeParse(contents)
+
+  // CLI doesnt support bulk environments export
+  // Hence we check for this case and throw an error if it matches the format
   if (HoppBulkEnvExportObjectResult.success) {
     throw error({ code: "BULK_ENV_FILE", path, data: error });
   }
 
-  //  Checks if the environment file is of the correct format.
-  // If it doesnt match either of them, we throw an error.
-  if (!(HoppEnvKeyPairResult.success || HoppEnvExportObjectResult.success)) {
+  //  Checks if the environment file is of the correct format
+  // If it doesnt match either of them, we throw an error
+  if (!HoppEnvKeyPairResult.success && HoppEnvExportObjectResult.type === "err") {
     throw error({ code: "MALFORMED_ENV_FILE", path, data: error });
   }
 
@@ -36,8 +44,8 @@ export async function parseEnvsData(path: string) {
     for (const [key, value] of Object.entries(HoppEnvKeyPairResult.data)) {
       envPairs.push({ key, value });
     }
-  } else if (HoppEnvExportObjectResult.success) {
-    envPairs.push(...HoppEnvExportObjectResult.data.variables);
+  } else if (HoppEnvExportObjectResult.type === "ok") {
+    envPairs.push(...HoppEnvExportObjectResult.value.variables);
   }
 
   return <HoppEnvs>{ global: [], selected: envPairs };
diff --git a/packages/hoppscotch-cli/src/types/request.ts b/packages/hoppscotch-cli/src/types/request.ts
index 2407542f1..21dffbd1c 100644
--- a/packages/hoppscotch-cli/src/types/request.ts
+++ b/packages/hoppscotch-cli/src/types/request.ts
@@ -1,31 +1,18 @@
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
+import { Environment, HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
+import { z } from "zod";
+
 import { TestReport } from "../interfaces/response";
 import { HoppCLIError } from "./errors";
-import { z } from "zod";
 
 export type FormDataEntry = {
   key: string;
   value: string | Blob;
 };
 
-export type HoppEnvPair = { key: string; value: string };
+export type HoppEnvPair = Environment["variables"][number];
 
 export const HoppEnvKeyPairObject = z.record(z.string(), z.string());
 
-// Shape of the single environment export object that is exported from the app.
-export const HoppEnvExportObject = z.object({
-  name: z.string(),
-  variables: z.array(
-    z.object({
-      key: z.string(),
-      value: z.string(),
-    })
-  ),
-});
-
-// Shape of the bulk environment export object that is exported from the app.
-export const HoppBulkEnvExportObject = z.array(HoppEnvExportObject);
-
 export type HoppEnvs = {
   global: HoppEnvPair[];
   selected: HoppEnvPair[];
diff --git a/packages/hoppscotch-cli/src/utils/display.ts b/packages/hoppscotch-cli/src/utils/display.ts
index 8d6e35a69..f2461d109 100644
--- a/packages/hoppscotch-cli/src/utils/display.ts
+++ b/packages/hoppscotch-cli/src/utils/display.ts
@@ -176,7 +176,7 @@ export const printRequestRunner = {
    */
   start: (requestConfig: RequestConfig) => {
     const METHOD = BG_INFO(` ${requestConfig.method} `);
-    const ENDPOINT = requestConfig.url;
+    const ENDPOINT = requestConfig.displayUrl || requestConfig.url;
 
     process.stdout.write(`${METHOD} ${ENDPOINT}`);
   },
diff --git a/packages/hoppscotch-cli/src/utils/pre-request.ts b/packages/hoppscotch-cli/src/utils/pre-request.ts
index b180a4ac6..b576ac9aa 100644
--- a/packages/hoppscotch-cli/src/utils/pre-request.ts
+++ b/packages/hoppscotch-cli/src/utils/pre-request.ts
@@ -36,7 +36,10 @@ import { toFormData } from "./mutators";
 export const preRequestScriptRunner = (
   request: HoppRESTRequest,
   envs: HoppEnvs
-): TE.TaskEither<HoppCLIError, EffectiveHoppRESTRequest> =>
+): TE.TaskEither<
+  HoppCLIError,
+  { effectiveRequest: EffectiveHoppRESTRequest } & { updatedEnvs: HoppEnvs }
+> =>
   pipe(
     TE.of(request),
     TE.chain(({ preRequestScript }) =>
@@ -68,7 +71,10 @@ export const preRequestScriptRunner = (
 export function getEffectiveRESTRequest(
   request: HoppRESTRequest,
   environment: Environment
-): E.Either<HoppCLIError, EffectiveHoppRESTRequest> {
+): E.Either<
+  HoppCLIError,
+  { effectiveRequest: EffectiveHoppRESTRequest } & { updatedEnvs: HoppEnvs }
+> {
   const envVariables = environment.variables;
 
   // Parsing final headers with applied ENVs.
@@ -162,12 +168,30 @@ export function getEffectiveRESTRequest(
   }
   const effectiveFinalURL = _effectiveFinalURL.right;
 
+  // Secret environment variables referenced in the request endpoint should be masked
+  let effectiveFinalDisplayURL;
+  if (envVariables.some(({ secret }) => secret)) {
+    const _effectiveFinalDisplayURL = parseTemplateStringE(
+      request.endpoint,
+      envVariables,
+      true
+    );
+
+    if (E.isRight(_effectiveFinalDisplayURL)) {
+      effectiveFinalDisplayURL = _effectiveFinalDisplayURL.right;
+    }
+  }
+
   return E.right({
-    ...request,
-    effectiveFinalURL,
-    effectiveFinalHeaders,
-    effectiveFinalParams,
-    effectiveFinalBody,
+    effectiveRequest: {
+      ...request,
+      effectiveFinalURL,
+      effectiveFinalDisplayURL,
+      effectiveFinalHeaders,
+      effectiveFinalParams,
+      effectiveFinalBody,
+    },
+    updatedEnvs: { global: [], selected: envVariables },
   });
 }
 
diff --git a/packages/hoppscotch-cli/src/utils/request.ts b/packages/hoppscotch-cli/src/utils/request.ts
index 343e0f199..3e15b2979 100644
--- a/packages/hoppscotch-cli/src/utils/request.ts
+++ b/packages/hoppscotch-cli/src/utils/request.ts
@@ -1,4 +1,4 @@
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
+import { Environment, HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
 import axios, { Method } from "axios";
 import * as A from "fp-ts/Array";
 import * as E from "fp-ts/Either";
@@ -29,6 +29,38 @@ import { getTestScriptParams, hasFailedTestCases, testRunner } from "./test";
 
 // !NOTE: The `config.supported` checks are temporary until OAuth2 and Multipart Forms are supported
 
+/**
+ * Processes given variable, which includes checking for secret variables
+ * and getting value from system environment
+ * @param variable Variable to be processed
+ * @returns Updated variable with value from system environment
+ */
+const processVariables = (variable: Environment["variables"][number]) => {
+  if (variable.secret) {
+    return {
+      ...variable,
+      value:
+        "value" in variable ? variable.value : process.env[variable.key] || "",
+    }
+  }
+  return variable
+}
+
+/**
+ * Processes given envs, which includes processing each variable in global
+ * and selected envs
+ * @param envs Global + selected envs used by requests with in collection
+ * @returns Processed envs with each variable processed
+ */
+const processEnvs = (envs: HoppEnvs) => {
+  const processedEnvs = {
+    global: envs.global.map(processVariables),
+    selected: envs.selected.map(processVariables),
+  }
+
+  return processedEnvs
+}
+
 /**
  * Transforms given request data to request-config used by request-runner to
  * perform HTTP request.
@@ -38,6 +70,7 @@ import { getTestScriptParams, hasFailedTestCases, testRunner } from "./test";
 export const createRequest = (req: EffectiveHoppRESTRequest): RequestConfig => {
   const config: RequestConfig = {
     supported: true,
+    displayUrl: req.effectiveFinalDisplayURL
   };
   const { finalBody, finalEndpoint, finalHeaders, finalParams } = getRequest;
   const reqParams = finalParams(req);
@@ -221,9 +254,13 @@ export const processRequest =
       effectiveFinalParams: [],
       effectiveFinalURL: "",
     };
+    let updatedEnvs = <HoppEnvs>{};
+
+    // Fetch values for secret environment variables from system environment
+    const processedEnvs = processEnvs(envs)
 
     // Executing pre-request-script
-    const preRequestRes = await preRequestScriptRunner(request, envs)();
+    const preRequestRes = await preRequestScriptRunner(request, processedEnvs)();
     if (E.isLeft(preRequestRes)) {
       printPreRequestRunner.fail();
 
@@ -231,8 +268,8 @@ export const processRequest =
       report.errors.push(preRequestRes.left);
       report.result = report.result && false;
     } else {
-      // Updating effective-request
-      effectiveRequest = preRequestRes.right;
+      // Updating effective-request and consuming updated envs after pre-request script execution
+      ({ effectiveRequest, updatedEnvs } = preRequestRes.right);
     }
 
     // Creating request-config for request-runner.
@@ -270,7 +307,7 @@ export const processRequest =
     const testScriptParams = getTestScriptParams(
       _requestRunnerRes,
       request,
-      envs
+      updatedEnvs
     );
 
     // Executing test-runner.
diff --git a/packages/hoppscotch-data/src/environment/index.ts b/packages/hoppscotch-data/src/environment/index.ts
index 94a4f04e1..3f801f2bd 100644
--- a/packages/hoppscotch-data/src/environment/index.ts
+++ b/packages/hoppscotch-data/src/environment/index.ts
@@ -105,6 +105,7 @@ export function parseTemplateStringE(
   while (result.match(REGEX_ENV_VAR) != null && depth <= ENV_MAX_EXPAND_LIMIT) {
     result = decodeURI(encodeURI(result)).replace(REGEX_ENV_VAR, (_, p1) => {
       const variable = variables.find((x) => x && x.key === p1)
+
       if (variable && "value" in variable) {
         // Mask the value if it is a secret and explicitly specified
         if (variable.secret && maskValue) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d673550a9..5c376f6df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -351,6 +351,9 @@ importers:
       typescript:
         specifier: ^5.2.2
         version: 5.2.2
+      verzod:
+        specifier: ^0.2.2
+        version: 0.2.2(zod@3.22.4)
       zod:
         specifier: ^3.22.4
         version: 3.22.4
@@ -25770,7 +25773,6 @@ packages:
       zod: ^3.22.0
     dependencies:
       zod: 3.22.4
-    dev: false
 
   /vite-node@0.34.6(@types/node@18.18.8)(sass@1.69.5)(terser@5.27.0):
     resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}

From c0fae7967844bcbc47826e21fe72edc48ae1fa77 Mon Sep 17 00:00:00 2001
From: James George <jamesgeorge998001@gmail.com>
Date: Thu, 8 Feb 2024 22:16:33 +0530
Subject: [PATCH 08/25] fix(sh-admin): persist active selection in the sidebar
 (#3812)

---
 .../src/components/app/Sidebar.vue             | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
index 5fe0ac5d5..0fb162481 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
@@ -43,12 +43,11 @@
                 ? 'flex items-center justify-center'
                 : 'flex items-center'
             "
-            @click="setActiveTab(navigation.label)"
           >
             <div
               class="flex p-5 w-full font-bold"
               :class="
-                activeTab === navigation.label
+                  currentRouteName.startsWith(navigation.baseRouteName)
                   ? 'bg-primaryDark text-secondaryDark border-l-2 border-l-emerald-600'
                   : 'bg-primary hover:bg-primaryLight hover:text-secondaryDark focus-visible:text-secondaryDark focus-visible:bg-primaryLight focus-visible:outline-none'
               "
@@ -72,7 +71,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type Component } from 'vue';
+import { computed, type Component } from 'vue';
+import { useRoute } from 'vue-router';
 
 import { useI18n } from '~/composables/i18n';
 import { useSidebar } from '~/composables/useSidebar';
@@ -81,6 +81,7 @@ import IconSettings from '~icons/lucide/settings';
 import IconUser from '~icons/lucide/user';
 import IconUsers from '~icons/lucide/users';
 
+const route = useRoute()
 const t = useI18n();
 
 const { isOpen, isExpanded } = useSidebar();
@@ -90,6 +91,7 @@ type NavigationItem = {
   icon: Component;
   to: string;
   exact: boolean;
+  baseRouteName: string;
 };
 
 const primaryNavigations: NavigationItem[] = [
@@ -98,32 +100,32 @@ const primaryNavigations: NavigationItem[] = [
     icon: IconDashboard,
     to: '/dashboard',
     exact: true,
+    baseRouteName: 'dashboard',
   },
   {
     label: t('users.users'),
     icon: IconUser,
     to: '/users',
     exact: false,
+    baseRouteName: 'users'
   },
   {
     label: t('teams.teams'),
     icon: IconUsers,
     to: '/teams',
     exact: false,
+    baseRouteName: 'teams'
   },
   {
     label: t('settings.settings'),
     icon: IconSettings,
     to: '/settings',
     exact: true,
+    baseRouteName: 'settings',
   },
 ];
 
-const activeTab = ref('Dashboard');
-
-const setActiveTab = (tab: string) => {
-  activeTab.value = tab;
-};
+const currentRouteName = computed(() => route.name as string);
 </script>
 
 <style scoped lang="scss">

From 672ee69b2cf13f9584e830a7af271b9cbcddb586 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 8 Feb 2024 22:33:03 +0530
Subject: [PATCH 09/25] chore: correct linting errors

---
 packages/hoppscotch-common/src/helpers/oauth.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/hoppscotch-common/src/helpers/oauth.ts b/packages/hoppscotch-common/src/helpers/oauth.ts
index ce45432be..1e4267a2d 100644
--- a/packages/hoppscotch-common/src/helpers/oauth.ts
+++ b/packages/hoppscotch-common/src/helpers/oauth.ts
@@ -4,16 +4,13 @@ import { PersistenceService } from "~/services/persistence"
 import * as E from "fp-ts/Either"
 import { z } from "zod"
 import { InterceptorService } from "~/services/interceptor.service"
-import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
 
 import { AxiosRequestConfig } from "axios"
-import { until } from "@vueuse/core"
 
 const redirectUri = `${window.location.origin}/oauth`
 
 const interceptorService = getService(InterceptorService)
 const persistenceService = getService(PersistenceService)
-const extensionService = getService(ExtensionInterceptorService)
 
 // GENERAL HELPER FUNCTIONS
 

From 6a0e73fdecf0510b0a7229b60c95c473586453db Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 8 Feb 2024 22:41:59 +0530
Subject: [PATCH 10/25] chore: bump versions

---
 packages/hoppscotch-backend/package.json                       | 2 +-
 packages/hoppscotch-cli/package.json                           | 2 +-
 packages/hoppscotch-common/package.json                        | 2 +-
 packages/hoppscotch-selfhost-desktop/package.json              | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock      | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml      | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json | 2 +-
 packages/hoppscotch-selfhost-web/package.json                  | 2 +-
 packages/hoppscotch-sh-admin/package.json                      | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/hoppscotch-backend/package.json b/packages/hoppscotch-backend/package.json
index 3432639e8..5453bc92e 100644
--- a/packages/hoppscotch-backend/package.json
+++ b/packages/hoppscotch-backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.12.3",
+  "version": "2023.12.4",
   "description": "",
   "author": "",
   "private": true,
diff --git a/packages/hoppscotch-cli/package.json b/packages/hoppscotch-cli/package.json
index 0582952f0..6f33d3025 100644
--- a/packages/hoppscotch-cli/package.json
+++ b/packages/hoppscotch-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/cli",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "A CLI to run Hoppscotch test scripts in CI environments.",
   "homepage": "https://hoppscotch.io",
   "main": "dist/index.js",
diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json
index e281b8a60..82ee627b4 100644
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.12.3",
+  "version": "2023.12.4",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
diff --git a/packages/hoppscotch-selfhost-desktop/package.json b/packages/hoppscotch-selfhost-desktop/package.json
index 8d2b7884e..02ef284d5 100644
--- a/packages/hoppscotch-selfhost-desktop/package.json
+++ b/packages/hoppscotch-selfhost-desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-desktop",
   "private": true,
-  "version": "2023.12.3",
+  "version": "2023.12.4",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
index 833fb5f84..d8806c490 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
@@ -1260,7 +1260,7 @@ dependencies = [
 
 [[package]]
 name = "hoppscotch-desktop"
-version = "23.12.3"
+version = "23.12.4"
 dependencies = [
  "cocoa 0.25.0",
  "hex_color",
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
index d09bf05a0..57366b264 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "hoppscotch-desktop"
-version = "23.12.3"
+version = "23.12.4"
 description = "A Tauri App"
 authors = ["you"]
 license = ""
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json b/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
index e2f2e8414..4ebdb65b2 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Hoppscotch",
-    "version": "23.12.3"
+    "version": "23.12.4"
   },
   "tauri": {
     "allowlist": {
diff --git a/packages/hoppscotch-selfhost-web/package.json b/packages/hoppscotch-selfhost-web/package.json
index a5d2ae784..9c71a9980 100644
--- a/packages/hoppscotch-selfhost-web/package.json
+++ b/packages/hoppscotch-selfhost-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2023.12.3",
+  "version": "2023.12.4",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
diff --git a/packages/hoppscotch-sh-admin/package.json b/packages/hoppscotch-sh-admin/package.json
index 721b28c20..1e98e1bcb 100644
--- a/packages/hoppscotch-sh-admin/package.json
+++ b/packages/hoppscotch-sh-admin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hoppscotch-sh-admin",
   "private": true,
-  "version": "2023.12.3",
+  "version": "2023.12.4",
   "type": "module",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",

From 47226be6d0fc33f9a741ab2e8ef70435222707db Mon Sep 17 00:00:00 2001
From: Muhammed Ajmal M <55492635+ajmalmohad@users.noreply.github.com>
Date: Fri, 9 Feb 2024 14:05:09 +0530
Subject: [PATCH 11/25] feat: persist line wrap setting (#3647)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
---
 .../src/components/cookies/EditCookie.vue     |  10 +-
 .../src/components/graphql/Headers.vue        |  10 +-
 .../src/components/graphql/Query.vue          |  10 +-
 .../src/components/graphql/Response.vue       |  12 +-
 .../src/components/graphql/Sidebar.vue        |  10 +-
 .../src/components/graphql/Variable.vue       |  10 +-
 .../src/components/http/CodegenModal.vue      |  10 +-
 .../src/components/http/Headers.vue           |  11 +-
 .../src/components/http/ImportCurl.vue        |  10 +-
 .../src/components/http/Parameters.vue        |  10 +-
 .../src/components/http/PreRequestScript.vue  |  10 +-
 .../src/components/http/RawBody.vue           |  10 +-
 .../src/components/http/Tests.vue             |  10 +-
 .../src/components/http/URLEncodedParams.vue  |  10 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |  10 +-
 .../lenses/renderers/JSONLensRenderer.vue     |  10 +-
 .../lenses/renderers/RawLensRenderer.vue      |  10 +-
 .../lenses/renderers/XMLLensRenderer.vue      |  10 +-
 .../src/composables/settings.ts               |  31 +++++
 .../src/newstore/settings.ts                  | 111 ++++++++++++++++++
 .../persistence/validation-schemas/index.ts   |  20 ++++
 21 files changed, 273 insertions(+), 72 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/cookies/EditCookie.vue b/packages/hoppscotch-common/src/components/cookies/EditCookie.vue
index 7d1582862..79c80f1a0 100644
--- a/packages/hoppscotch-common/src/components/cookies/EditCookie.vue
+++ b/packages/hoppscotch-common/src/components/cookies/EditCookie.vue
@@ -22,9 +22,9 @@
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('state.linewrap')"
-                :class="{ '!text-accent': linewrapEnabled }"
+                :class="{ '!text-accent': WRAP_LINES }"
                 :icon="IconWrapText"
-                @click.prevent="linewrapEnabled = !linewrapEnabled"
+                @click.prevent="toggleNestedSetting('WRAP_LINES', 'cookie')"
               />
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
@@ -102,6 +102,8 @@ import {
   useCopyResponse,
   useDownloadResponse,
 } from "~/composables/lens-actions"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 // TODO: Build Managed Mode!
 
@@ -122,7 +124,7 @@ const toast = useToast()
 
 const cookieEditor = ref<HTMLElement>()
 const rawCookieString = ref("")
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "cookie")
 
 useCodemirror(
   cookieEditor,
@@ -131,7 +133,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "text/plain",
       placeholder: `${t("cookies.modal.enter_cookie_string")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/graphql/Headers.vue b/packages/hoppscotch-common/src/components/graphql/Headers.vue
index 6e273968b..4c3e9e25b 100644
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -27,9 +27,9 @@
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('state.linewrap')"
-        :class="{ '!text-accent': linewrapEnabled }"
+        :class="{ '!text-accent': WRAP_LINES }"
         :icon="IconWrapText"
-        @click.prevent="linewrapEnabled = !linewrapEnabled"
+        @click.prevent="toggleNestedSetting('WRAP_LINES', 'graphqlHeaders')"
       />
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
@@ -315,6 +315,8 @@ import { commonHeaders } from "~/helpers/headers"
 import { useCodemirror } from "@composables/codemirror"
 import { objRemoveKey } from "~/helpers/functional/object"
 import { useVModel } from "@vueuse/core"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 import { HoppGQLHeader } from "~/helpers/graphql"
 import { throwError } from "~/helpers/functional/error"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
@@ -338,7 +340,7 @@ const request = useVModel(props, "modelValue", emit)
 
 const idTicker = ref(0)
 
-const linewrapEnabled = ref(false)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "graphqlHeaders")
 const bulkMode = ref(false)
 const bulkHeaders = ref("")
 
@@ -353,7 +355,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "text/x-yaml",
       placeholder: `${t("state.bulk_mode_placeholder")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/graphql/Query.vue b/packages/hoppscotch-common/src/components/graphql/Query.vue
index 450c59d0a..ea42bfb7d 100644
--- a/packages/hoppscotch-common/src/components/graphql/Query.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Query.vue
@@ -61,9 +61,9 @@
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('state.linewrap')"
-        :class="{ '!text-accent': linewrapEnabled }"
+        :class="{ '!text-accent': WRAP_LINES }"
         :icon="IconWrapText"
-        @click.prevent="linewrapEnabled = !linewrapEnabled"
+        @click.prevent="toggleNestedSetting('WRAP_LINES', 'graphqlQuery')"
       />
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
@@ -112,6 +112,8 @@ import {
   socketDisconnect,
   subscriptionState,
 } from "~/helpers/graphql/connection"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 // Template refs
 const queryEditor = ref<any | null>(null)
@@ -137,7 +139,7 @@ const prettifyQueryIcon = refAutoReset<
   typeof IconWand | typeof IconCheck | typeof IconInfo
 >(IconWand, 1000)
 
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "graphqlQuery")
 
 const selectedOperation = ref<gql.OperationDefinitionNode | null>(null)
 
@@ -184,7 +186,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "graphql",
       placeholder: `${t("request.query")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: createGQLQueryLinter(schema),
     completer: queryCompleter(schema),
diff --git a/packages/hoppscotch-common/src/components/graphql/Response.vue b/packages/hoppscotch-common/src/components/graphql/Response.vue
index 1a5d31407..67c0639c0 100644
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -16,9 +16,11 @@
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('state.linewrap')"
-            :class="{ '!text-accent': linewrapEnabled }"
+            :class="{ '!text-accent': WRAP_LINES }"
             :icon="IconWrapText"
-            @click.prevent="linewrapEnabled = !linewrapEnabled"
+            @click.prevent="
+              toggleNestedSetting('WRAP_LINES', 'graphqlResponseBody')
+            "
           />
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip', allowHTML: true }"
@@ -99,6 +101,8 @@ import { useI18n } from "@composables/i18n"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { GQLResponseEvent } from "~/helpers/graphql/connection"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 import interfaceLanguages from "~/helpers/utils/interfaceLanguages"
 import {
   useCopyInterface,
@@ -133,8 +137,8 @@ const responseString = computed(() => {
 })
 
 const schemaEditor = ref<any | null>(null)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "graphqlResponseBody")
 const copyInterfaceTippyActions = ref<any | null>(null)
-const linewrapEnabled = ref(true)
 
 useCodemirror(
   schemaEditor,
@@ -143,7 +147,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/ld+json",
       readOnly: true,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
index 8d3def5f4..4ba5e6729 100644
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -127,9 +127,9 @@
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('state.linewrap')"
-            :class="{ '!text-accent': linewrapEnabled }"
+            :class="{ '!text-accent': WRAP_LINES }"
             :icon="IconWrapText"
-            @click.prevent="linewrapEnabled = !linewrapEnabled"
+            @click.prevent="toggleNestedSetting('WRAP_LINES', 'graphqlSchema')"
           />
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
@@ -202,6 +202,8 @@ import {
   subscriptionFields,
 } from "~/helpers/graphql/connection"
 import { platform } from "~/platform"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 type NavigationTabs = "history" | "collection" | "docs" | "schema"
 type GqlTabs = "queries" | "mutations" | "subscriptions" | "types"
@@ -349,7 +351,7 @@ const handleJumpToType = async (type: GraphQLType) => {
 }
 
 const schemaEditor = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "graphqlSchema")
 
 useCodemirror(
   schemaEditor,
@@ -358,7 +360,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "graphql",
       readOnly: true,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/graphql/Variable.vue b/packages/hoppscotch-common/src/components/graphql/Variable.vue
index 13aed9be4..bf5eee3a4 100644
--- a/packages/hoppscotch-common/src/components/graphql/Variable.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Variable.vue
@@ -49,9 +49,9 @@
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('state.linewrap')"
-        :class="{ '!text-accent': linewrapEnabled }"
+        :class="{ '!text-accent': WRAP_LINES }"
         :icon="IconWrapText"
-        @click.prevent="linewrapEnabled = !linewrapEnabled"
+        @click.prevent="toggleNestedSetting('WRAP_LINES', 'graphqlVariables')"
       />
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
@@ -93,6 +93,8 @@ import {
   socketDisconnect,
   subscriptionState,
 } from "~/helpers/graphql/connection"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 const toast = useToast()
@@ -114,7 +116,7 @@ const variableString = useVModel(props, "modelValue", emit)
 
 const variableEditor = ref<any | null>(null)
 
-const linewrapEnabled = ref(false)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "graphqlVariables")
 
 const copyVariablesIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
   IconCopy,
@@ -131,7 +133,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/ld+json",
       placeholder: `${t("request.variables")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: computed(() =>
       variableString.value.length > 0 ? jsonLinter : null
diff --git a/packages/hoppscotch-common/src/components/http/CodegenModal.vue b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
index 6747a1c13..1c7fa178f 100644
--- a/packages/hoppscotch-common/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
@@ -86,9 +86,9 @@
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('state.linewrap')"
-                :class="{ '!text-accent': linewrapEnabled }"
+                :class="{ '!text-accent': WRAP_LINES }"
                 :icon="IconWrapText"
-                @click.prevent="linewrapEnabled = !linewrapEnabled"
+                @click.prevent="toggleNestedSetting('WRAP_LINES', 'codeGen')"
               />
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
@@ -161,6 +161,8 @@ import cloneDeep from "lodash-es/cloneDeep"
 import { platform } from "~/platform"
 import { RESTTabService } from "~/services/tab/rest"
 import { useService } from "dioc/vue"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 
@@ -224,7 +226,7 @@ const requestCode = computed(() => {
 // Template refs
 const tippyActions = ref<any | null>(null)
 const generatedCode = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "codeGen")
 
 useCodemirror(
   generatedCode,
@@ -233,7 +235,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "text/plain",
       readOnly: true,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index 49ec74461..60ef81c6c 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -29,9 +29,9 @@
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpHeaders')"
         />
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -332,6 +332,9 @@ import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { InspectionService, InspectorResult } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
+import { toggleSetting } from "~/newstore/settings"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 
 const t = useI18n()
@@ -346,7 +349,7 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkHeaders = ref("")
 const bulkEditor = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpHeaders")
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
@@ -371,7 +374,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "text/x-yaml",
       placeholder: `${t("state.bulk_mode_placeholder")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/http/ImportCurl.vue b/packages/hoppscotch-common/src/components/http/ImportCurl.vue
index 3ec3c8d21..cb60686c8 100644
--- a/packages/hoppscotch-common/src/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-common/src/components/http/ImportCurl.vue
@@ -22,9 +22,9 @@
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('state.linewrap')"
-                :class="{ '!text-accent': linewrapEnabled }"
+                :class="{ '!text-accent': WRAP_LINES }"
                 :icon="IconWrapText"
-                @click.prevent="linewrapEnabled = !linewrapEnabled"
+                @click.prevent="toggleNestedSetting('WRAP_LINES', 'importCurl')"
               />
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
@@ -96,6 +96,8 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import { platform } from "~/platform"
 import { RESTTabService } from "~/services/tab/rest"
 import { useService } from "dioc/vue"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 
@@ -106,7 +108,7 @@ const tabs = useService(RESTTabService)
 const curl = ref("")
 
 const curlEditor = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "importCurl")
 
 const props = defineProps<{ show: boolean; text: string }>()
 
@@ -117,7 +119,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/x-sh",
       placeholder: `${t("request.enter_curl")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index 3c9179440..5f0507d64 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -24,9 +24,9 @@
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpParams')"
         />
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -205,6 +205,8 @@ import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { InspectionService, InspectorResult } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const colorMode = useColorMode()
 
@@ -217,7 +219,7 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkParams = ref("")
 const bulkEditor = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpParams")
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
@@ -228,7 +230,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "text/x-yaml",
       placeholder: `${t("state.bulk_mode_placeholder")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
index 08c80a11e..31c88bbf2 100644
--- a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
@@ -23,9 +23,9 @@
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpPreRequest')"
         />
       </div>
     </div>
@@ -72,6 +72,8 @@ import linter from "~/helpers/editor/linting/preRequest"
 import completer from "~/helpers/editor/completion/preRequest"
 import { useI18n } from "@composables/i18n"
 import { useVModel } from "@vueuse/core"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 
@@ -85,7 +87,7 @@ const emit = defineEmits<{
 const preRequestScript = useVModel(props, "modelValue", emit)
 
 const preRequestEditor = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpPreRequest")
 
 useCodemirror(
   preRequestEditor,
@@ -93,7 +95,7 @@ useCodemirror(
   reactive({
     extendedEditorConfig: {
       mode: "application/javascript",
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
       placeholder: `${t("preRequest.javascript_code")}`,
     },
     linter,
diff --git a/packages/hoppscotch-common/src/components/http/RawBody.vue b/packages/hoppscotch-common/src/components/http/RawBody.vue
index f829eef17..72b420793 100644
--- a/packages/hoppscotch-common/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-common/src/components/http/RawBody.vue
@@ -23,9 +23,9 @@
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpRequestBody')"
         />
         <HoppButtonSecondary
           v-if="
@@ -85,6 +85,8 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { readFileAsText } from "~/helpers/functional/files"
 import xmlFormat from "xml-formatter"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 type PossibleContentTypes = Exclude<
   ValidContentTypes,
@@ -122,7 +124,7 @@ const langLinter = computed(() =>
   isJSONContentType(body.value.contentType) ? jsonLinter : null
 )
 
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpRequestBody")
 const rawBodyParameters = ref<any | null>(null)
 
 const codemirrorValue: Ref<string | undefined> =
@@ -148,7 +150,7 @@ useCodemirror(
   codemirrorValue,
   reactive({
     extendedEditorConfig: {
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
       mode: rawInputEditorLang,
       placeholder: t("request.raw_body").toString(),
     },
diff --git a/packages/hoppscotch-common/src/components/http/Tests.vue b/packages/hoppscotch-common/src/components/http/Tests.vue
index 63316fe59..28cb128ca 100644
--- a/packages/hoppscotch-common/src/components/http/Tests.vue
+++ b/packages/hoppscotch-common/src/components/http/Tests.vue
@@ -23,9 +23,9 @@
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpTest')"
         />
       </div>
     </div>
@@ -72,6 +72,8 @@ import linter from "~/helpers/editor/linting/testScript"
 import completer from "~/helpers/editor/completion/testScript"
 import { useI18n } from "@composables/i18n"
 import { useVModel } from "@vueuse/core"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 
@@ -81,7 +83,7 @@ const props = defineProps<{
 const emit = defineEmits(["update:modelValue"])
 const testScript = useVModel(props, "modelValue", emit)
 const testScriptEditor = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpTest")
 
 useCodemirror(
   testScriptEditor,
@@ -89,7 +91,7 @@ useCodemirror(
   reactive({
     extendedEditorConfig: {
       mode: "application/javascript",
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
       placeholder: `${t("test.javascript_code")}`,
     },
     linter,
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index ee6d4844d..b484ab82b 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -24,9 +24,9 @@
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpUrlEncoded')"
         />
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -196,6 +196,8 @@ import { useColorMode } from "@composables/theming"
 import { objRemoveKey } from "~/helpers/functional/object"
 import { throwError } from "~/helpers/functional/error"
 import { useVModel } from "@vueuse/core"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 type Body = HoppRESTReqBody & {
   contentType: "application/x-www-form-urlencoded"
@@ -220,7 +222,7 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkUrlEncodedParams = ref("")
 const bulkEditor = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpUrlEncoded")
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
@@ -231,7 +233,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "text/x-yaml",
       placeholder: `${t("state.bulk_mode_placeholder")}`,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
index 23a8977a0..7e71fb370 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -11,9 +11,9 @@
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpResponseBody')"
         />
         <HoppButtonSecondary
           v-if="response.body"
@@ -76,6 +76,8 @@ import { useI18n } from "@composables/i18n"
 import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 
@@ -84,7 +86,7 @@ const props = defineProps<{
 }>()
 
 const htmlResponse = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpResponseBody")
 
 const { responseBodyText } = useResponseBody(props.response)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
@@ -104,7 +106,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "htmlmixed",
       readOnly: true,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
index e1faa8c1a..6a2793141 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -14,9 +14,9 @@
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpResponseBody')"
         />
         <HoppButtonSecondary
           v-if="response.body"
@@ -260,6 +260,8 @@ import {
 } from "@composables/lens-actions"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 import interfaceLanguages from "~/helpers/utils/interfaceLanguages"
 
 const t = useI18n()
@@ -371,8 +373,8 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
 // Template refs
 const tippyActions = ref<any | null>(null)
 const jsonResponse = ref<any | null>(null)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpResponseBody")
 const copyInterfaceTippyActions = ref<any | null>(null)
-const linewrapEnabled = ref(true)
 
 const { cursor } = useCodemirror(
   jsonResponse,
@@ -381,7 +383,7 @@ const { cursor } = useCodemirror(
     extendedEditorConfig: {
       mode: "application/ld+json",
       readOnly: true,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
index f8a6dff19..8d328c5c8 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
@@ -11,9 +11,9 @@
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpResponseBody')"
         />
         <HoppButtonSecondary
           v-if="response.body"
@@ -58,6 +58,8 @@ import {
 import { objFieldMatches } from "~/helpers/functional/object"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 
@@ -97,7 +99,7 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
 const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
 
 const rawResponse = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpResponseBody")
 
 useCodemirror(
   rawResponse,
@@ -106,7 +108,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "text/plain",
       readOnly: true,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
index cef6aedad..6567862bb 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -11,9 +11,9 @@
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
-          :class="{ '!text-accent': linewrapEnabled }"
+          :class="{ '!text-accent': WRAP_LINES }"
           :icon="IconWrapText"
-          @click.prevent="linewrapEnabled = !linewrapEnabled"
+          @click.prevent="toggleNestedSetting('WRAP_LINES', 'httpResponseBody')"
         />
         <HoppButtonSecondary
           v-if="response.body"
@@ -58,6 +58,8 @@ import {
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { objFieldMatches } from "~/helpers/functional/object"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 
@@ -91,7 +93,7 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
 const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
 
 const xmlResponse = ref<any | null>(null)
-const linewrapEnabled = ref(true)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "httpResponseBody")
 
 useCodemirror(
   xmlResponse,
@@ -100,7 +102,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/xml",
       readOnly: true,
-      lineWrapping: linewrapEnabled,
+      lineWrapping: WRAP_LINES,
     },
     linter: null,
     completer: null,
diff --git a/packages/hoppscotch-common/src/composables/settings.ts b/packages/hoppscotch-common/src/composables/settings.ts
index 9aef1545a..8cfce63b6 100644
--- a/packages/hoppscotch-common/src/composables/settings.ts
+++ b/packages/hoppscotch-common/src/composables/settings.ts
@@ -13,7 +13,36 @@ export function useSetting<K extends keyof SettingsDef>(
       settingsStore.dispatch({
         dispatcher: "applySetting",
         payload: {
+          // @ts-expect-error TS is not able to understand the type semantics here
           settingKey,
+          // @ts-expect-error TS is not able to understand the type semantics here
+          value,
+        },
+      })
+    }
+  )
+}
+
+export function useNestedSetting<
+  K extends keyof SettingsDef,
+  P extends keyof SettingsDef[K],
+>(settingKey: K, property: P): Ref<SettingsDef[K][P]> {
+  return useStream(
+    settingsStore.subject$.pipe(
+      pluck(settingKey),
+      pluck(property),
+      distinctUntilChanged()
+    ),
+    settingsStore.value[settingKey][property],
+    (value: SettingsDef[K][P]) => {
+      settingsStore.dispatch({
+        dispatcher: "applyNestedSetting",
+        payload: {
+          // @ts-expect-error TS is not able to understand the type semantics here
+          settingKey,
+          // @ts-expect-error TS is not able to understand the type semantics here
+          property,
+          // @ts-expect-error TS is not able to understand the type semantics here
           value,
         },
       })
@@ -35,7 +64,9 @@ export function useSettingStatic<K extends keyof SettingsDef>(
       settingsStore.dispatch({
         dispatcher: "applySetting",
         payload: {
+          // @ts-expect-error TS is not able to understand the type semantics here
           settingKey,
+          // @ts-expect-error TS is not able to understand the type semantics here
           value,
         },
       })
diff --git a/packages/hoppscotch-common/src/newstore/settings.ts b/packages/hoppscotch-common/src/newstore/settings.ts
index 1b695ed27..eb5249bf6 100644
--- a/packages/hoppscotch-common/src/newstore/settings.ts
+++ b/packages/hoppscotch-common/src/newstore/settings.ts
@@ -30,6 +30,24 @@ export type SettingsDef = {
 
   PROXY_URL: string
 
+  WRAP_LINES: {
+    httpRequestBody: boolean
+    httpResponseBody: boolean
+    httpHeaders: boolean
+    httpParams: boolean
+    httpUrlEncoded: boolean
+    httpPreRequest: boolean
+    httpTest: boolean
+    graphqlQuery: boolean
+    graphqlResponseBody: boolean
+    graphqlHeaders: boolean
+    graphqlVariables: boolean
+    graphqlSchema: boolean
+    importCurl: boolean
+    codeGen: boolean
+    cookie: boolean
+  }
+
   CURRENT_INTERCEPTOR_ID: string
 
   URL_EXCLUDES: {
@@ -53,6 +71,24 @@ export const getDefaultSettings = (): SettingsDef => ({
   syncHistory: true,
   syncEnvironments: true,
 
+  WRAP_LINES: {
+    httpRequestBody: true,
+    httpResponseBody: true,
+    httpHeaders: true,
+    httpParams: true,
+    httpUrlEncoded: true,
+    httpPreRequest: true,
+    httpTest: true,
+    graphqlQuery: true,
+    graphqlResponseBody: true,
+    graphqlHeaders: false,
+    graphqlVariables: false,
+    graphqlSchema: true,
+    importCurl: true,
+    codeGen: true,
+    cookie: true,
+  },
+
   CURRENT_INTERCEPTOR_ID: "browser", // TODO: Allow the platform definition to take this place
 
   // TODO: Interceptor related settings should move under the interceptor systems
@@ -80,6 +116,16 @@ type ApplySettingPayload = {
   }
 }[keyof SettingsDef]
 
+type ApplyNestedSettingPayload = {
+  [K in KeysMatching<SettingsDef, Record<string, any>>]: {
+    [P in keyof SettingsDef[K]]: {
+      settingKey: K
+      property: P
+      value: SettingsDef[K][P]
+    }
+  }[keyof SettingsDef[K]]
+}[KeysMatching<SettingsDef, Record<string, any>>]
+
 const dispatchers = defineDispatchers({
   bulkApplySettings(_currentState: SettingsDef, payload: Partial<SettingsDef>) {
     return payload
@@ -100,6 +146,29 @@ const dispatchers = defineDispatchers({
 
     return result
   },
+  toggleNestedSetting(
+    currentState: SettingsDef,
+    {
+      settingKey,
+      property,
+    }: {
+      settingKey: KeysMatching<SettingsDef, Record<string, boolean>>
+      property: KeysMatching<SettingsDef[typeof settingKey], boolean>
+    }
+  ) {
+    if (!has(currentState, [settingKey, property])) {
+      return {}
+    }
+
+    const result: Partial<SettingsDef> = {
+      [settingKey]: {
+        ...currentState[settingKey],
+        [property]: !currentState[settingKey][property],
+      },
+    }
+
+    return result
+  },
   applySetting(
     _currentState: SettingsDef,
     { settingKey, value }: ApplySettingPayload
@@ -108,6 +177,18 @@ const dispatchers = defineDispatchers({
       [settingKey]: value,
     }
 
+    return result
+  },
+  applyNestedSetting(
+    _currentState: SettingsDef,
+    { settingKey, property, value }: ApplyNestedSettingPayload
+  ) {
+    const result: Partial<SettingsDef> = {
+      [settingKey]: {
+        [property]: value,
+      },
+    }
+
     return result
   },
 })
@@ -144,6 +225,20 @@ export function toggleSetting(settingKey: KeysMatching<SettingsDef, boolean>) {
   })
 }
 
+export function toggleNestedSetting<
+  K extends KeysMatching<SettingsDef, Record<string, boolean>>,
+  P extends keyof SettingsDef[K],
+>(settingKey: K, property: P) {
+  settingsStore.dispatch({
+    dispatcher: "toggleNestedSetting",
+    payload: {
+      settingKey,
+      // @ts-expect-error TS is not able to understand the type semantics here
+      property,
+    },
+  })
+}
+
 export function applySetting<K extends keyof SettingsDef>(
   settingKey: K,
   value: SettingsDef[K]
@@ -159,6 +254,22 @@ export function applySetting<K extends keyof SettingsDef>(
   })
 }
 
+export function applyNestedSetting<
+  K extends KeysMatching<SettingsDef, Record<string, any>>,
+  P extends keyof SettingsDef[K],
+  R extends SettingsDef[K][P],
+>(settingKey: K, property: P, value: R) {
+  settingsStore.dispatch({
+    dispatcher: "applyNestedSetting",
+    payload: {
+      settingKey,
+      // @ts-expect-error TS is not able to understand the type semantics here
+      property,
+      value,
+    },
+  })
+}
+
 export function performSettingsDataMigrations(data: any): SettingsDef {
   const source = cloneDeep(data)
 
diff --git a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
index f91194e15..ff7e975ec 100644
--- a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
@@ -45,6 +45,26 @@ const SettingsDefSchema = z.object({
   SIDEBAR: z.boolean(),
   SIDEBAR_ON_LEFT: z.boolean(),
   COLUMN_LAYOUT: z.boolean(),
+
+  WRAP_LINES: z.optional(
+    z.object({
+      httpRequestBody: z.boolean(),
+      httpResponseBody: z.boolean(),
+      httpHeaders: z.boolean(),
+      httpParams: z.boolean(),
+      httpUrlEncoded: z.boolean(),
+      httpPreRequest: z.boolean(),
+      httpTest: z.boolean(),
+      graphqlQuery: z.boolean(),
+      graphqlResponseBody: z.boolean(),
+      graphqlHeaders: z.boolean(),
+      graphqlVariables: z.boolean(),
+      graphqlSchema: z.boolean(),
+      importCurl: z.boolean(),
+      codeGen: z.boolean(),
+      cookie: z.boolean(),
+    })
+  ),
 })
 
 // Common properties shared across REST & GQL collections

From ecca3d2032d6d40cc34e169582de0c6d7f6db676 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 9 Feb 2024 14:42:12 +0530
Subject: [PATCH 12/25] chore: correct linting errors

---
 packages/hoppscotch-common/src/components/http/Headers.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index 60ef81c6c..c9e3992d8 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -332,7 +332,6 @@ import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { InspectionService, InspectorResult } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
-import { toggleSetting } from "~/newstore/settings"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"

From 41bad1f3dc627992b27fd3eb4bb64780ad8fcff7 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Sat, 10 Feb 2024 20:22:10 +0530
Subject: [PATCH 13/25] fix: secret environment flow bugs (#3817)

---
 packages/hoppscotch-common/locales/en.json    |  4 ++--
 .../components/environments/my/Details.vue    |  2 +-
 .../components/environments/teams/Details.vue |  2 +-
 .../editor/extensions/HoppEnvironment.ts      | 24 +++++++++++++------
 .../src/newstore/environments.ts              |  4 ++--
 .../inspectors/environment.inspector.ts       | 13 ++++++++--
 .../services/secret-environment.service.ts    | 15 ++++++++++++
 7 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 45b5420c8..5dce84485 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -240,7 +240,7 @@
     "profile": "Login to view your profile",
     "protocols": "Protocols are empty",
     "schema": "Connect to a GraphQL endpoint to view schema",
-    "secret_environments": "Secret environments are not synced to Hoppscotch hence user has to provide it's value during run-time.",
+    "secret_environments": "Secrets are not synced to Hoppscotch",
     "shared_requests": "Shared requests are empty",
     "shared_requests_logout": "Login to view your shared requests or create a new one",
     "subscription": "Subscriptions are empty",
@@ -272,7 +272,7 @@
     "quick_peek": "Environment Quick Peek",
     "replace_with_variable": "Replace with variable",
     "scope": "Scope",
-    "secret": "Secret",
+    "secrets": "Secrets",
     "secret_value": "Secret value",
     "select": "Select environment",
     "set": "Set environment",
diff --git a/packages/hoppscotch-common/src/components/environments/my/Details.vue b/packages/hoppscotch-common/src/components/environments/my/Details.vue
index 28f9f3da3..8327e8dd3 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -224,7 +224,7 @@ const tabsData: ComputedRef<
     },
     {
       id: "secret",
-      label: t("environment.secret"),
+      label: t("environment.secrets"),
       emptyStateLabel: t("empty.secret_environments"),
       isSecret: true,
       variables: secretVars.value,
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Details.vue b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
index 906a7a608..1f9673e2a 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -229,7 +229,7 @@ const tabsData: ComputedRef<
     },
     {
       id: "secret",
-      label: t("environment.secret"),
+      label: t("environment.secrets"),
       emptyStateLabel: t("empty.secret_environments"),
       isSecret: true,
       variables: secretVars.value,
diff --git a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
index c949595e5..06ca1b012 100644
--- a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
@@ -67,7 +67,6 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
       const envName = tooltipEnv?.sourceEnv ?? "Choose an Environment"
 
       let envValue = "Not Found"
-
       if (!tooltipEnv?.secret && tooltipEnv?.value) envValue = tooltipEnv.value
       else if (tooltipEnv?.secret && tooltipEnv.value) {
         envValue = "******"
@@ -92,11 +91,23 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
         editIcon.className =
           "ml-2 cursor-pointer text-accent hover:text-accentDark"
         editIcon.addEventListener("click", () => {
-          const isPersonalEnv =
-            envName === "Global" || selectedEnvType !== "TEAM_ENV"
-          const action = isPersonalEnv ? "my" : "team"
-          invokeAction(`modals.${action}.environment.edit`, {
-            envName,
+          let invokeActionType:
+            | "modals.my.environment.edit"
+            | "modals.team.environment.edit"
+            | "modals.global.environment.update" = "modals.my.environment.edit"
+
+          if (tooltipEnv?.sourceEnv === "Global") {
+            invokeActionType = "modals.global.environment.update"
+          } else if (selectedEnvType === "MY_ENV") {
+            invokeActionType = "modals.my.environment.edit"
+          } else if (selectedEnvType === "TEAM_ENV") {
+            invokeActionType = "modals.team.environment.edit"
+          } else {
+            invokeActionType = "modals.my.environment.edit"
+          }
+
+          invokeAction(invokeActionType, {
+            envName: tooltipEnv?.sourceEnv !== "Global" ? envName : "Global",
             variableName: parsedEnvKey,
             isSecret: tooltipEnv?.secret,
           })
@@ -185,7 +196,6 @@ export class HoppEnvironmentPlugin {
 
     subscribeToStream(aggregateEnvsWithSecrets$, (envs) => {
       this.envs = envs
-
       this.editorView.value?.dispatch({
         effects: this.compartment.reconfigure([
           cursorTooltipField(this.envs),
diff --git a/packages/hoppscotch-common/src/newstore/environments.ts b/packages/hoppscotch-common/src/newstore/environments.ts
index 4659c8144..a63206582 100644
--- a/packages/hoppscotch-common/src/newstore/environments.ts
+++ b/packages/hoppscotch-common/src/newstore/environments.ts
@@ -367,7 +367,8 @@ export const currentEnvironment$: Observable<Environment | undefined> =
         return environments[selectedEnvironmentIndex.index]
       }
       return selectedEnvironmentIndex.environment
-    })
+    }),
+    distinctUntilChanged()
   )
 
 export type AggregateEnvironment = {
@@ -476,7 +477,6 @@ export const aggregateEnvsWithSecrets$: Observable<AggregateEnvironment[]> =
   combineLatest([currentEnvironment$, globalEnv$]).pipe(
     map(([selectedEnv, globalVars]) => {
       const results: AggregateEnvironment[] = []
-
       selectedEnv?.variables.map((x, index) => {
         let value
         if (x.secret) {
diff --git a/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts b/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
index c3a9c7912..e26b57c0d 100644
--- a/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
+++ b/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
@@ -17,6 +17,7 @@ import {
 import { invokeAction } from "~/helpers/actions"
 import { computed } from "vue"
 import { useStreamStatic } from "~/composables/stream"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
 
 const HOPP_ENVIRONMENT_REGEX = /(<<[a-zA-Z0-9-_]+>>)/g
 
@@ -39,6 +40,7 @@ export class EnvironmentInspectorService extends Service implements Inspector {
   public readonly inspectorID = "environment"
 
   private readonly inspection = this.bind(InspectionService)
+  private readonly secretEnvs = this.bind(SecretEnvironmentService)
 
   private aggregateEnvsWithSecrets = useStreamStatic(
     aggregateEnvsWithSecrets$,
@@ -141,10 +143,18 @@ export class EnvironmentInspectorService extends Service implements Inspector {
         if (extractedEnv) {
           extractedEnv.forEach((exEnv: string) => {
             const formattedExEnv = exEnv.slice(2, -2)
+            const currentSelectedEnvironment = getCurrentEnvironment()
 
             this.aggregateEnvsWithSecrets.value.forEach((env) => {
+              const hasSecretEnv = this.secretEnvs.hasSecretValue(
+                env.sourceEnv !== "Global"
+                  ? currentSelectedEnvironment.id
+                  : "Global",
+                env.key
+              )
+
               if (env.key === formattedExEnv) {
-                if (env.value === "") {
+                if (env.secret ? !hasSecretEnv : env.value === "") {
                   const itemLocation: InspectorLocation = {
                     type: locations.type,
                     position:
@@ -157,7 +167,6 @@ export class EnvironmentInspectorService extends Service implements Inspector {
                     key: element,
                   }
 
-                  const currentSelectedEnvironment = getCurrentEnvironment()
                   const currentEnvironmentType = getSelectedEnvironmentType()
 
                   let invokeActionType:
diff --git a/packages/hoppscotch-common/src/services/secret-environment.service.ts b/packages/hoppscotch-common/src/services/secret-environment.service.ts
index ff6ff7641..971853c48 100644
--- a/packages/hoppscotch-common/src/services/secret-environment.service.ts
+++ b/packages/hoppscotch-common/src/services/secret-environment.service.ts
@@ -117,6 +117,21 @@ export class SecretEnvironmentService extends Service {
     this.secretEnvironments.delete(oldID)
   }
 
+  /**
+   *
+   * @param id ID of the environment
+   * @param key Key of the variable to check the value exists
+   * @returns true if the key has a secret value
+   */
+  public hasSecretValue(id: string, key: string) {
+    return (
+      this.secretEnvironments.has(id) &&
+      this.secretEnvironments
+        .get(id)!
+        .some((secretVar) => secretVar.key === key && secretVar.value !== "")
+    )
+  }
+
   /**
    * Used to update the value of a secret environment variable.
    */

From de4635df23d4eb21db90ac5d039eb6fc4d5c5b79 Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Tue, 13 Feb 2024 17:38:11 +0530
Subject: [PATCH 14/25] chore: add workspace type property in request run
 analytics event (#3820)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 packages/hoppscotch-common/src/components/http/Request.vue | 4 ++++
 packages/hoppscotch-common/src/platform/analytics.ts       | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue
index d71ad238e..9191057ff 100644
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -263,6 +263,7 @@ import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
 import { RESTTabService } from "~/services/tab/rest"
 import { getMethodLabelColor } from "~/helpers/rest/labelColoring"
+import { WorkspaceService } from "~/services/workspace.service"
 
 const t = useI18n()
 const interceptorService = useService(InterceptorService)
@@ -326,6 +327,8 @@ const inspectionService = useService(InspectionService)
 
 const tabs = useService(RESTTabService)
 
+const workspaceService = useService(WorkspaceService)
+
 const newSendRequest = async () => {
   if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
     toast.error(`${t("empty.endpoint")}`)
@@ -341,6 +344,7 @@ const newSendRequest = async () => {
     type: "HOPP_REQUEST_RUN",
     platform: "rest",
     strategy: interceptorService.currentInterceptorID.value!,
+    workspaceType: workspaceService.currentWorkspace.value.type,
   })
 
   const [cancel, streamPromise] = runRESTRequest$(tab)
diff --git a/packages/hoppscotch-common/src/platform/analytics.ts b/packages/hoppscotch-common/src/platform/analytics.ts
index cd230cc30..60ddd4cf2 100644
--- a/packages/hoppscotch-common/src/platform/analytics.ts
+++ b/packages/hoppscotch-common/src/platform/analytics.ts
@@ -1,6 +1,11 @@
 export type HoppRequestEvent =
   | {
-      platform: "rest" | "graphql-query" | "graphql-schema"
+      platform: "rest"
+      strategy: string
+      workspaceType: "personal" | "team"
+    }
+  | {
+      platform: "graphql-query" | "graphql-schema"
       strategy: string
     }
   | { platform: "wss" | "sse" | "socketio" | "mqtt" }

From 45b532747ec015c829531f34591714796c2f544f Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Tue, 13 Feb 2024 17:42:02 +0530
Subject: [PATCH 15/25] fix: environment tooltip update bug (#3819)

---
 .../editor/extensions/HoppEnvironment.ts      | 19 ++++++++++++++++++-
 .../persistence/validation-schemas/index.ts   | 12 ++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
index 06ca1b012..9a1ab8a3a 100644
--- a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
@@ -14,12 +14,15 @@ import {
   AggregateEnvironment,
   aggregateEnvsWithSecrets$,
   getAggregateEnvsWithSecrets,
+  getCurrentEnvironment,
   getSelectedEnvironmentType,
 } from "~/newstore/environments"
 import { invokeAction } from "~/helpers/actions"
 import IconUser from "~icons/lucide/user?raw"
 import IconUsers from "~icons/lucide/users?raw"
 import IconEdit from "~icons/lucide/edit?raw"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
+import { getService } from "~/modules/dioc"
 
 const HOPP_ENVIRONMENT_REGEX = /(<<[a-zA-Z0-9-_]+>>)/g
 
@@ -28,6 +31,8 @@ const HOPP_ENV_HIGHLIGHT =
 const HOPP_ENV_HIGHLIGHT_FOUND = "env-found"
 const HOPP_ENV_HIGHLIGHT_NOT_FOUND = "env-not-found"
 
+const secretEnvironmentService = getService(SecretEnvironmentService)
+
 const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
   hoverTooltip(
     (view, pos, side) => {
@@ -67,9 +72,21 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
       const envName = tooltipEnv?.sourceEnv ?? "Choose an Environment"
 
       let envValue = "Not Found"
+
+      const currentSelectedEnvironment = getCurrentEnvironment()
+
+      const hasSecretEnv = secretEnvironmentService.hasSecretValue(
+        tooltipEnv?.sourceEnv !== "Global"
+          ? currentSelectedEnvironment.id
+          : "Global",
+        tooltipEnv?.key ?? ""
+      )
+
       if (!tooltipEnv?.secret && tooltipEnv?.value) envValue = tooltipEnv.value
-      else if (tooltipEnv?.secret && tooltipEnv.value) {
+      else if (tooltipEnv?.secret && hasSecretEnv) {
         envValue = "******"
+      } else if (tooltipEnv?.secret && !hasSecretEnv) {
+        envValue = "Empty"
       } else if (!tooltipEnv?.sourceEnv) {
         envValue = "Not Found"
       } else if (!tooltipEnv?.value) {
diff --git a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
index ff7e975ec..b5854403d 100644
--- a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
@@ -374,6 +374,10 @@ const EnvironmentVariablesSchema = z.union([
     key: z.string(),
     secret: z.literal(true),
   }),
+  z.object({
+    key: z.string(),
+    value: z.string(),
+  }),
 ])
 
 export const SECRET_ENVIRONMENT_VARIABLE_SCHEMA = z.union([
@@ -405,7 +409,9 @@ const HoppTestResultSchema = z
           .object({
             additions: z.array(EnvironmentVariablesSchema),
             updations: z.array(
-              EnvironmentVariablesSchema.refine((x) => !x.secret).and(
+              EnvironmentVariablesSchema.refine(
+                (x) => "secret" in x && !x.secret
+              ).and(
                 z.object({
                   previousValue: z.string(),
                 })
@@ -418,7 +424,9 @@ const HoppTestResultSchema = z
           .object({
             additions: z.array(EnvironmentVariablesSchema),
             updations: z.array(
-              EnvironmentVariablesSchema.refine((x) => !x.secret).and(
+              EnvironmentVariablesSchema.refine(
+                (x) => "secret" in x && !x.secret
+              ).and(
                 z.object({
                   previousValue: z.string(),
                 })

From fc34871dae1e5b5e91fc74cffd926a570e37d718 Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Thu, 15 Feb 2024 21:32:50 +0530
Subject: [PATCH 16/25] fix: accessing undefined property `variables` (#3831)

---
 .../src/components/http/OAuth2Authorization.vue                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
index b2aca464f..ee9d2f1c0 100644
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
@@ -112,7 +112,7 @@ const handleAccessTokenRequest = async () => {
   }
 
   const envs = getCombinedEnvVariables()
-  const envVars = [...envs.selected.variables, ...envs.global]
+  const envVars = [...envs.selected, ...envs.global]
 
   try {
     const tokenReqParams = {

From dfdd44b4ed587b2a6206546ce2b5b375c5cc6a27 Mon Sep 17 00:00:00 2001
From: James George <jamesgeorge998001@gmail.com>
Date: Thu, 15 Feb 2024 21:40:31 +0530
Subject: [PATCH 17/25] fix(persistence-service): update global environment
 variables schema (#3829)

---
 .../src/services/persistence/index.ts         |  4 +-
 .../persistence/validation-schemas/index.ts   | 48 +++++++------------
 2 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/packages/hoppscotch-common/src/services/persistence/index.ts b/packages/hoppscotch-common/src/services/persistence/index.ts
index 84d318476..74291bebb 100644
--- a/packages/hoppscotch-common/src/services/persistence/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/index.ts
@@ -628,7 +628,7 @@ export class PersistenceService extends Service {
 
   private setupGlobalEnvsPersistence() {
     const globalEnvKey = "globalEnv"
-    let globalEnvData: Environment["variables"] = JSON.parse(
+    let globalEnvData: z.infer<typeof GLOBAL_ENV_SCHEMA> = JSON.parse(
       window.localStorage.getItem(globalEnvKey) || "[]"
     )
 
@@ -644,7 +644,7 @@ export class PersistenceService extends Service {
       )
     }
 
-    setGlobalEnvVariables(globalEnvData)
+    setGlobalEnvVariables(globalEnvData as Environment["variables"])
 
     globalEnv$.subscribe((vars) => {
       window.localStorage.setItem(globalEnvKey, JSON.stringify(vars))
diff --git a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
index b5854403d..b6ac61ac5 100644
--- a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
@@ -229,24 +229,24 @@ export const MQTT_REQUEST_SCHEMA = z.nullable(
     .strict()
 )
 
-export const GLOBAL_ENV_SCHEMA = z.union([
-  z.array(z.never()),
-
-  z.array(
-    z.union([
-      z.object({
-        key: z.string(),
-        secret: z.literal(true),
-      }),
-      z.object({
-        key: z.string(),
-        value: z.string(),
-        secret: z.literal(false),
-      }),
-    ])
-  ),
+const EnvironmentVariablesSchema = z.union([
+  z.object({
+    key: z.string(),
+    value: z.string(),
+    secret: z.literal(false),
+  }),
+  z.object({
+    key: z.string(),
+    secret: z.literal(true),
+  }),
+  z.object({
+    key: z.string(),
+    value: z.string(),
+  }),
 ])
 
+export const GLOBAL_ENV_SCHEMA = z.array(EnvironmentVariablesSchema)
+
 const OperationTypeSchema = z.enum([
   "subscription",
   "query",
@@ -364,22 +364,6 @@ const HoppTestDataSchema = z.lazy(() =>
     .strict()
 )
 
-const EnvironmentVariablesSchema = z.union([
-  z.object({
-    key: z.string(),
-    value: z.string(),
-    secret: z.literal(false),
-  }),
-  z.object({
-    key: z.string(),
-    secret: z.literal(true),
-  }),
-  z.object({
-    key: z.string(),
-    value: z.string(),
-  }),
-])
-
 export const SECRET_ENVIRONMENT_VARIABLE_SCHEMA = z.union([
   z.object({}).strict(),
 

From ed6e9b695405546383da387550ca9086ea0a3cd8 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 15 Feb 2024 21:47:58 +0530
Subject: [PATCH 18/25] chore: bump version to 2023.12.5

---
 packages/hoppscotch-backend/package.json                       | 2 +-
 packages/hoppscotch-common/package.json                        | 2 +-
 packages/hoppscotch-selfhost-desktop/package.json              | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock      | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml      | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json | 2 +-
 packages/hoppscotch-selfhost-web/package.json                  | 2 +-
 packages/hoppscotch-sh-admin/package.json                      | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-backend/package.json b/packages/hoppscotch-backend/package.json
index 5453bc92e..e560ede1a 100644
--- a/packages/hoppscotch-backend/package.json
+++ b/packages/hoppscotch-backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.12.4",
+  "version": "2023.12.5",
   "description": "",
   "author": "",
   "private": true,
diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json
index 82ee627b4..e8c3217ea 100644
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.12.4",
+  "version": "2023.12.5",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
diff --git a/packages/hoppscotch-selfhost-desktop/package.json b/packages/hoppscotch-selfhost-desktop/package.json
index 02ef284d5..eeaf89e71 100644
--- a/packages/hoppscotch-selfhost-desktop/package.json
+++ b/packages/hoppscotch-selfhost-desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-desktop",
   "private": true,
-  "version": "2023.12.4",
+  "version": "2023.12.5",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
index d8806c490..88b409c9d 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
@@ -1260,7 +1260,7 @@ dependencies = [
 
 [[package]]
 name = "hoppscotch-desktop"
-version = "23.12.4"
+version = "23.12.5"
 dependencies = [
  "cocoa 0.25.0",
  "hex_color",
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
index 57366b264..c0c266de8 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "hoppscotch-desktop"
-version = "23.12.4"
+version = "23.12.5"
 description = "A Tauri App"
 authors = ["you"]
 license = ""
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json b/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
index 4ebdb65b2..206282edd 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Hoppscotch",
-    "version": "23.12.4"
+    "version": "23.12.5"
   },
   "tauri": {
     "allowlist": {
diff --git a/packages/hoppscotch-selfhost-web/package.json b/packages/hoppscotch-selfhost-web/package.json
index 9c71a9980..4e33f8758 100644
--- a/packages/hoppscotch-selfhost-web/package.json
+++ b/packages/hoppscotch-selfhost-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2023.12.4",
+  "version": "2023.12.5",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
diff --git a/packages/hoppscotch-sh-admin/package.json b/packages/hoppscotch-sh-admin/package.json
index 1e98e1bcb..d7ab231c1 100644
--- a/packages/hoppscotch-sh-admin/package.json
+++ b/packages/hoppscotch-sh-admin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hoppscotch-sh-admin",
   "private": true,
-  "version": "2023.12.4",
+  "version": "2023.12.5",
   "type": "module",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",

From 4bd54b12cde4aa67a760dd85ccd2af81db533e03 Mon Sep 17 00:00:00 2001
From: James George <jamesgeorge998001@gmail.com>
Date: Thu, 15 Feb 2024 23:38:56 +0530
Subject: [PATCH 19/25] fix(persistence-service): add fallbacks for
 environments related schemas (#3832)

---
 .../hoppscotch-common/src/newstore/environments.ts  | 13 ++++++++++++-
 .../src/services/persistence/index.ts               |  5 ++++-
 .../persistence/validation-schemas/index.ts         |  2 +-
 packages/hoppscotch-data/src/environment/v/1.ts     |  2 +-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-common/src/newstore/environments.ts b/packages/hoppscotch-common/src/newstore/environments.ts
index a63206582..3c5672655 100644
--- a/packages/hoppscotch-common/src/newstore/environments.ts
+++ b/packages/hoppscotch-common/src/newstore/environments.ts
@@ -568,7 +568,18 @@ export function getLegacyGlobalEnvironment(): Environment | null {
 }
 
 export function getGlobalVariables(): Environment["variables"] {
-  return environmentsStore.value.globals
+  return environmentsStore.value.globals.map(
+    (env: Environment["variables"][number]) => {
+      if (env.key && "value" in env && !("secret" in env)) {
+        return {
+          ...(env as Environment["variables"][number]),
+          secret: false,
+        }
+      }
+
+      return env
+    }
+  ) as Environment["variables"]
 }
 
 export function getGlobalVariableID() {
diff --git a/packages/hoppscotch-common/src/services/persistence/index.ts b/packages/hoppscotch-common/src/services/persistence/index.ts
index 74291bebb..d96b722f0 100644
--- a/packages/hoppscotch-common/src/services/persistence/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/index.ts
@@ -425,7 +425,10 @@ export class PersistenceService extends Service {
 
     if (globalIndex !== -1) {
       const globalEnv = environmentsData[globalIndex]
-      globalEnv.variables.forEach((variable) => addGlobalEnvVariable(variable))
+      globalEnv.variables.forEach(
+        (variable: Environment["variables"][number]) =>
+          addGlobalEnvVariable(variable)
+      )
 
       // Remove global from environments
       environmentsData.splice(globalIndex, 1)
diff --git a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
index b6ac61ac5..bb4c03799 100644
--- a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
@@ -233,7 +233,7 @@ const EnvironmentVariablesSchema = z.union([
   z.object({
     key: z.string(),
     value: z.string(),
-    secret: z.literal(false),
+    secret: z.literal(false).catch(false),
   }),
   z.object({
     key: z.string(),
diff --git a/packages/hoppscotch-data/src/environment/v/1.ts b/packages/hoppscotch-data/src/environment/v/1.ts
index 6ab68d79f..01562abe9 100644
--- a/packages/hoppscotch-data/src/environment/v/1.ts
+++ b/packages/hoppscotch-data/src/environment/v/1.ts
@@ -15,7 +15,7 @@ export const V1_SCHEMA = z.object({
       z.object({
         key: z.string(),
         value: z.string(),
-        secret: z.literal(false),
+        secret: z.literal(false).catch(false),
       }),
     ])
   ),

From 342532c9b1d5ace0cd8fa3679d223f3072dd6de8 Mon Sep 17 00:00:00 2001
From: James George <jamesgeorge998001@gmail.com>
Date: Wed, 21 Feb 2024 11:06:45 -0800
Subject: [PATCH 20/25] fix(common): prevent exceptions with open shared
 requests in new tab action (#3835)

---
 .../hoppscotch-common/src/components/share/Request.vue    | 3 ++-
 packages/hoppscotch-common/src/components/share/index.vue | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-common/src/components/share/Request.vue b/packages/hoppscotch-common/src/components/share/Request.vue
index 44a04c473..97ac09e71 100644
--- a/packages/hoppscotch-common/src/components/share/Request.vue
+++ b/packages/hoppscotch-common/src/components/share/Request.vue
@@ -62,7 +62,7 @@
                 :shortcut="['T']"
                 @click="
                   () => {
-                    openInNewTab()
+                    emit('open-shared-request', parseRequest)
                     hide()
                   }
                 "
@@ -128,6 +128,7 @@ const emit = defineEmits<{
     embedProperties?: string | null
   ): void
   (e: "delete-shared-request", codeID: string): void
+  (e: "open-shared-request", request: HoppRESTRequest): void
 }>()
 
 const tippyActions = ref<TippyComponent | null>(null)
diff --git a/packages/hoppscotch-common/src/components/share/index.vue b/packages/hoppscotch-common/src/components/share/index.vue
index bfdbb64c0..34fc95967 100644
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/packages/hoppscotch-common/src/components/share/index.vue
@@ -53,6 +53,7 @@
           :request="request"
           @customize-shared-request="customizeSharedRequest"
           @delete-shared-request="deleteSharedRequest"
+          @open-shared-request="openRequestInNewTab"
         />
         <HoppSmartIntersection
           v-if="hasMoreSharedRequests"
@@ -483,6 +484,13 @@ const getErrorMessage = (err: GQLError<string>) => {
   }
 }
 
+const openRequestInNewTab = (request: HoppRESTRequest) => {
+  restTab.createNewTab({
+    isDirty: false,
+    request,
+  })
+}
+
 defineActionHandler("share.request", ({ request }) => {
   requestToShare.value = request
   displayShareRequestModal(true)

From 291f18591efc0c39e37db9c409dcfdec67802eea Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Thu, 22 Feb 2024 00:41:30 +0530
Subject: [PATCH 21/25] fix: perfomance in safari (#3848)

---
 packages/hoppscotch-common/assets/scss/styles.scss    |  5 +++++
 .../src/components/graphql/RequestOptions.vue         |  2 +-
 .../src/components/graphql/Response.vue               |  4 +++-
 .../src/components/graphql/Sidebar.vue                |  8 +++-----
 .../src/components/graphql/Variable.vue               |  4 +++-
 .../hoppscotch-common/src/components/http/Headers.vue |  4 +++-
 .../src/components/http/Parameters.vue                |  4 +++-
 .../src/components/http/PreRequestScript.vue          |  4 ++--
 .../hoppscotch-common/src/components/http/RawBody.vue |  4 +++-
 .../src/components/http/RequestTab.vue                |  2 +-
 .../hoppscotch-common/src/components/http/Tests.vue   |  4 ++--
 .../src/components/http/URLEncodedParams.vue          |  4 +++-
 .../components/lenses/renderers/HTMLLensRenderer.vue  |  8 +++-----
 .../components/lenses/renderers/JSONLensRenderer.vue  | 11 ++++++-----
 .../components/lenses/renderers/RawLensRenderer.vue   |  4 +++-
 .../components/lenses/renderers/XMLLensRenderer.vue   |  4 +++-
 .../src/components/realtime/Communication.vue         |  4 +++-
 .../src/helpers/editor/themes/baseTheme.ts            |  6 ------
 18 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/packages/hoppscotch-common/assets/scss/styles.scss b/packages/hoppscotch-common/assets/scss/styles.scss
index b6ba91726..5b898b127 100644
--- a/packages/hoppscotch-common/assets/scss/styles.scss
+++ b/packages/hoppscotch-common/assets/scss/styles.scss
@@ -429,6 +429,11 @@ pre.ace_editor {
   }
 }
 
+.splitpanes__pane {
+  @apply will-change-auto;
+  transform: translateZ(0);
+}
+
 .smart-splitter .splitpanes__splitter {
   @apply relative;
   @apply before:absolute;
diff --git a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
index 62cd4fbbd..8392fec8e 100644
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-1 flex-col">
+  <div class="h-full">
     <HoppSmartTabs
       v-model="selectedOptionTab"
       styles="sticky top-0 bg-primary z-10 border-b-0"
diff --git a/packages/hoppscotch-common/src/components/graphql/Response.vue b/packages/hoppscotch-common/src/components/graphql/Response.vue
index 67c0639c0..9a84d8f6f 100644
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -72,7 +72,9 @@
           </tippy>
         </div>
       </div>
-      <div ref="schemaEditor" class="flex flex-1 flex-col"></div>
+      <div class="h-full">
+        <div ref="schemaEditor"></div>
+      </div>
     </div>
     <component
       :is="response[0].error.component"
diff --git a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
index 4ba5e6729..0bc34cd64 100644
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -145,11 +145,9 @@
           />
         </div>
       </div>
-      <div
-        v-if="schemaString"
-        ref="schemaEditor"
-        class="flex flex-1 flex-col"
-      ></div>
+      <div v-if="schemaString" class="h-full relative w-full">
+        <div ref="schemaEditor" class="absolute inset-0"></div>
+      </div>
       <HoppSmartPlaceholder
         v-else
         :src="`/images/states/${colorMode.value}/blockchain.svg`"
diff --git a/packages/hoppscotch-common/src/components/graphql/Variable.vue b/packages/hoppscotch-common/src/components/graphql/Variable.vue
index bf5eee3a4..0547edcd2 100644
--- a/packages/hoppscotch-common/src/components/graphql/Variable.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Variable.vue
@@ -67,7 +67,9 @@
       />
     </div>
   </div>
-  <div ref="variableEditor" class="flex flex-1 flex-col"></div>
+  <div class="h-full relative">
+    <div ref="variableEditor" class="flex flex-1 flex-col"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index c9e3992d8..fb46c4aee 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -49,7 +49,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative w-full">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingHeaders"
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index 5f0507d64..202cbf631 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -44,7 +44,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingParams"
diff --git a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
index 31c88bbf2..1646cfeca 100644
--- a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
@@ -30,8 +30,8 @@
       </div>
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
-        <div ref="preRequestEditor" class="h-full"></div>
+      <div class="w-2/3 border-r border-dividerLight h-full relative">
+        <div ref="preRequestEditor" class="h-full absolute inset-0"></div>
       </div>
       <div
         class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
diff --git a/packages/hoppscotch-common/src/components/http/RawBody.vue b/packages/hoppscotch-common/src/components/http/RawBody.vue
index 72b420793..a3bffd95c 100644
--- a/packages/hoppscotch-common/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-common/src/components/http/RawBody.vue
@@ -59,7 +59,9 @@
         />
       </div>
     </div>
-    <div ref="rawBodyParameters" class="flex flex-1 flex-col"></div>
+    <div class="h-full relative">
+      <div ref="rawBodyParameters" class="absolute inset-0"></div>
+    </div>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/http/RequestTab.vue b/packages/hoppscotch-common/src/components/http/RequestTab.vue
index 4d95020ed..f009f96d8 100644
--- a/packages/hoppscotch-common/src/components/http/RequestTab.vue
+++ b/packages/hoppscotch-common/src/components/http/RequestTab.vue
@@ -9,7 +9,7 @@
       />
     </template>
     <template #secondary>
-      <HttpResponse v-model:document="tab.document" />
+      <HttpResponse v-model:document="tab.document" :is-embed="false" />
     </template>
   </AppPaneLayout>
 </template>
diff --git a/packages/hoppscotch-common/src/components/http/Tests.vue b/packages/hoppscotch-common/src/components/http/Tests.vue
index 28cb128ca..a195cc148 100644
--- a/packages/hoppscotch-common/src/components/http/Tests.vue
+++ b/packages/hoppscotch-common/src/components/http/Tests.vue
@@ -30,8 +30,8 @@
       </div>
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
-        <div ref="testScriptEditor" class="h-full"></div>
+      <div class="w-2/3 border-r border-dividerLight h-full relative">
+        <div ref="testScriptEditor" class="h-full absolute inset-0"></div>
       </div>
       <div
         class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index b484ab82b..9f1418249 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -44,7 +44,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingUrlEncodedParams"
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
index 7e71fb370..3a9ac7f7d 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -44,11 +44,9 @@
         />
       </div>
     </div>
-    <div
-      v-show="!previewEnabled"
-      ref="htmlResponse"
-      class="flex flex-1 flex-col"
-    ></div>
+    <div v-show="!previewEnabled" class="h-full">
+      <div ref="htmlResponse" class="flex flex-1 flex-col"></div>
+    </div>
     <iframe
       v-show="previewEnabled"
       ref="previewFrame"
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
index 6a2793141..512932346 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -119,11 +119,12 @@
         />
       </div>
     </div>
-    <div
-      ref="jsonResponse"
-      class="flex h-auto h-full flex-1 flex-col"
-      :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
-    ></div>
+    <div class="h-full">
+      <div
+        ref="jsonResponse"
+        :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
+      ></div>
+    </div>
     <div
       v-if="outlinePath"
       class="sticky bottom-0 z-10 flex flex-shrink-0 flex-nowrap overflow-auto overflow-x-auto border-t border-dividerLight bg-primaryLight px-2"
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
index 8d328c5c8..fdc1d72d9 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
@@ -35,7 +35,9 @@
         />
       </div>
     </div>
-    <div ref="rawResponse" class="flex flex-1 flex-col"></div>
+    <div class="h-full">
+      <div ref="rawResponse" class="flex flex-1 flex-col"></div>
+    </div>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
index 6567862bb..faab1cc91 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -35,7 +35,9 @@
         />
       </div>
     </div>
-    <div ref="xmlResponse" class="flex flex-1 flex-col"></div>
+    <div class="h-full">
+      <div ref="xmlResponse" class="flex flex-1 flex-col"></div>
+    </div>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/realtime/Communication.vue b/packages/hoppscotch-common/src/components/realtime/Communication.vue
index e35126327..6f2b01c37 100644
--- a/packages/hoppscotch-common/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Communication.vue
@@ -130,7 +130,9 @@
         />
       </div>
     </div>
-    <div ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
+    <div class="h-full">
+      <div ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts
index 39c48c1ab..9c074d8fb 100644
--- a/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts
@@ -171,9 +171,6 @@ export const baseTheme = EditorView.theme({
   ".cm-activeLineGutter": {
     backgroundColor: "transparent",
   },
-  ".cm-scroller::-webkit-scrollbar": {
-    display: "none",
-  },
   ".cm-foldPlaceholder": {
     backgroundColor: "var(--divider-light-color)",
     color: "var(--secondary-dark-color)",
@@ -320,9 +317,6 @@ export const inputTheme = EditorView.theme({
   ".cm-activeLineGutter": {
     backgroundColor: "transparent",
   },
-  ".cm-scroller::-webkit-scrollbar": {
-    display: "none",
-  },
   ".cm-foldPlaceholder": {
     backgroundColor: "var(--divider-light-color)",
     color: "var(--secondary-dark-color)",

From 10d20489752d04a1896508f002ff2ebf8899b09b Mon Sep 17 00:00:00 2001
From: amk-dev <akash.k.mohan98@gmail.com>
Date: Mon, 19 Feb 2024 13:31:05 +0530
Subject: [PATCH 22/25] fix: use x-www-form-urlencoded for token exchange
 requests

---
 .../hoppscotch-common/src/helpers/oauth.ts    | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/hoppscotch-common/src/helpers/oauth.ts b/packages/hoppscotch-common/src/helpers/oauth.ts
index 1e4267a2d..7c630d4b1 100644
--- a/packages/hoppscotch-common/src/helpers/oauth.ts
+++ b/packages/hoppscotch-common/src/helpers/oauth.ts
@@ -250,19 +250,23 @@ const handleOAuthRedirect = async () => {
     return E.left("NO_CODE_VERIFIER" as const)
   }
 
+  const data = new URLSearchParams({
+    grant_type: "authorization_code",
+    code: queryParams.code,
+    client_id: clientID,
+    client_secret: clientSecret,
+    redirect_uri: redirectUri,
+    code_verifier: codeVerifier,
+  })
+
   // Exchange the authorization code for an access token
   const tokenResponse = await runRequestThroughInterceptor({
     url: tokenEndpoint,
-    data: JSON.stringify({
-      grant_type: "authorization_code",
-      code: queryParams.code,
-      client_id: clientID,
-      client_secret: clientSecret,
-      redirect_uri: redirectUri,
-      code_verifier: codeVerifier,
-    }),
+    data: data.toString(),
     method: "POST",
-    headers: {},
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
   })
 
   // Clean these up since we don't need them anymore

From 6827e97ec583b2534cdc1c2f33fa44973a0c2bf5 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 23 Feb 2024 01:05:20 +0530
Subject: [PATCH 23/25] refactor: possible links in email templates do not
 highlight (#3851)

---
 .../src/mailer/mailer.service.ts              |   2 +-
 .../src/mailer/templates/team-invitation.hbs  |  10 +-
 .../src/mailer/templates/user-invitation.hbs  | 120 +++++++++---------
 3 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/packages/hoppscotch-backend/src/mailer/mailer.service.ts b/packages/hoppscotch-backend/src/mailer/mailer.service.ts
index b61514225..f71d65fe1 100644
--- a/packages/hoppscotch-backend/src/mailer/mailer.service.ts
+++ b/packages/hoppscotch-backend/src/mailer/mailer.service.ts
@@ -25,7 +25,7 @@ export class MailerService {
   ): string {
     switch (mailDesc.template) {
       case 'team-invitation':
-        return `${mailDesc.variables.invitee} invited you to join ${mailDesc.variables.invite_team_name} in Hoppscotch`;
+        return `A user has invited you to join a team workspace in Hoppscotch`;
 
       case 'user-invitation':
         return 'Sign in to Hoppscotch';
diff --git a/packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs b/packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs
index 3618686ef..32032b45f 100644
--- a/packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs
+++ b/packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs
@@ -27,6 +27,12 @@
       color: #3869D4;
     }
 
+    a.nohighlight {
+      color: inherit !important;
+      text-decoration: none !important;
+      cursor: default !important;
+    }
+
     a img {
       border: none;
     }
@@ -458,7 +464,7 @@
                     <td class="content-cell">
                       <div class="f-fallback">
 <h1>Hi there,</h1>
-<p>{{invitee}} with {{invite_team_name}} has invited you to use Hoppscotch to collaborate with them. Click the button below to set up your account and get started:</p>
+<p><a class="nohighlight" name="invitee" href="#">{{invitee}}</a> with <a class="nohighlight" name="invite_team_name" href="#">{{invite_team_name}}</a> has invited you to use Hoppscotch to collaborate with them. Click the button below to set up your account and get started:</p>
 <!-- Action -->
 <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
   <tr>
@@ -484,7 +490,7 @@
   Welcome aboard, <br />
   Your friends at Hoppscotch
 </p>
-<p><strong>P.S.</strong> If you don't associate with {{invitee}} or {{invite_team_name}}, just ignore this email.</p>
+<p><strong>P.S.</strong> If you don't associate with <a class="nohighlight" name="invitee" href="#">{{invitee}}</a> or <a class="nohighlight" name="invite_team_name" href="#">{{invite_team_name}}</a>, just ignore this email.</p>
 <!-- Sub copy -->
 <table class="body-sub">
   <tr>
diff --git a/packages/hoppscotch-backend/src/mailer/templates/user-invitation.hbs b/packages/hoppscotch-backend/src/mailer/templates/user-invitation.hbs
index c1a252e82..3505f2eef 100644
--- a/packages/hoppscotch-backend/src/mailer/templates/user-invitation.hbs
+++ b/packages/hoppscotch-backend/src/mailer/templates/user-invitation.hbs
@@ -14,7 +14,7 @@
   -->
     <style type="text/css" rel="stylesheet" media="all">
     /* Base ------------------------------ */
-    
+
     @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap");
     body {
       width: 100% !important;
@@ -22,19 +22,25 @@
       margin: 0;
       -webkit-text-size-adjust: none;
     }
-    
+
     a {
       color: #3869D4;
     }
-    
+
+    a.nohighlight {
+      color: inherit !important;
+      text-decoration: none !important;
+      cursor: default !important;
+    }
+
     a img {
       border: none;
     }
-    
+
     td {
       word-break: break-word;
     }
-    
+
     .preheader {
       display: none !important;
       visibility: hidden;
@@ -47,13 +53,13 @@
       overflow: hidden;
     }
     /* Type ------------------------------ */
-    
+
     body,
     td,
     th {
       font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
     }
-    
+
     h1 {
       margin-top: 0;
       color: #333333;
@@ -61,7 +67,7 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     h2 {
       margin-top: 0;
       color: #333333;
@@ -69,7 +75,7 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     h3 {
       margin-top: 0;
       color: #333333;
@@ -77,12 +83,12 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     td,
     th {
       font-size: 16px;
     }
-    
+
     p,
     ul,
     ol,
@@ -91,25 +97,25 @@
       font-size: 16px;
       line-height: 1.625;
     }
-    
+
     p.sub {
       font-size: 13px;
     }
     /* Utilities ------------------------------ */
-    
+
     .align-right {
       text-align: right;
     }
-    
+
     .align-left {
       text-align: left;
     }
-    
+
     .align-center {
       text-align: center;
     }
     /* Buttons ------------------------------ */
-    
+
     .button {
       background-color: #3869D4;
       border-top: 10px solid #3869D4;
@@ -124,7 +130,7 @@
       -webkit-text-size-adjust: none;
       box-sizing: border-box;
     }
-    
+
     .button--green {
       background-color: #22BC66;
       border-top: 10px solid #22BC66;
@@ -132,7 +138,7 @@
       border-bottom: 10px solid #22BC66;
       border-left: 18px solid #22BC66;
     }
-    
+
     .button--red {
       background-color: #FF6136;
       border-top: 10px solid #FF6136;
@@ -140,7 +146,7 @@
       border-bottom: 10px solid #FF6136;
       border-left: 18px solid #FF6136;
     }
-    
+
     @media only screen and (max-width: 500px) {
       .button {
         width: 100% !important;
@@ -148,21 +154,21 @@
       }
     }
     /* Attribute list ------------------------------ */
-    
+
     .attributes {
       margin: 0 0 21px;
     }
-    
+
     .attributes_content {
       background-color: #F4F4F7;
       padding: 16px;
     }
-    
+
     .attributes_item {
       padding: 0;
     }
     /* Related Items ------------------------------ */
-    
+
     .related {
       width: 100%;
       margin: 0;
@@ -171,31 +177,31 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .related_item {
       padding: 10px 0;
       color: #CBCCCF;
       font-size: 15px;
       line-height: 18px;
     }
-    
+
     .related_item-title {
       display: block;
       margin: .5em 0 0;
     }
-    
+
     .related_item-thumb {
       display: block;
       padding-bottom: 10px;
     }
-    
+
     .related_heading {
       border-top: 1px solid #CBCCCF;
       text-align: center;
       padding: 25px 0 10px;
     }
     /* Discount Code ------------------------------ */
-    
+
     .discount {
       width: 100%;
       margin: 0;
@@ -206,33 +212,33 @@
       background-color: #F4F4F7;
       border: 2px dashed #CBCCCF;
     }
-    
+
     .discount_heading {
       text-align: center;
     }
-    
+
     .discount_body {
       text-align: center;
       font-size: 15px;
     }
     /* Social Icons ------------------------------ */
-    
+
     .social {
       width: auto;
     }
-    
+
     .social td {
       padding: 0;
       width: auto;
     }
-    
+
     .social_icon {
       height: 20px;
       margin: 0 8px 10px 8px;
       padding: 0;
     }
     /* Data table ------------------------------ */
-    
+
     .purchase {
       width: 100%;
       margin: 0;
@@ -241,7 +247,7 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .purchase_content {
       width: 100%;
       margin: 0;
@@ -250,50 +256,50 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .purchase_item {
       padding: 10px 0;
       color: #51545E;
       font-size: 15px;
       line-height: 18px;
     }
-    
+
     .purchase_heading {
       padding-bottom: 8px;
       border-bottom: 1px solid #EAEAEC;
     }
-    
+
     .purchase_heading p {
       margin: 0;
       color: #85878E;
       font-size: 12px;
     }
-    
+
     .purchase_footer {
       padding-top: 15px;
       border-top: 1px solid #EAEAEC;
     }
-    
+
     .purchase_total {
       margin: 0;
       text-align: right;
       font-weight: bold;
       color: #333333;
     }
-    
+
     .purchase_total--label {
       padding: 0 15px 0 0;
     }
-    
+
     body {
       background-color: #F2F4F6;
       color: #51545E;
     }
-    
+
     p {
       color: #51545E;
     }
-    
+
     .email-wrapper {
       width: 100%;
       margin: 0;
@@ -303,7 +309,7 @@
       -premailer-cellspacing: 0;
       background-color: #F2F4F6;
     }
-    
+
     .email-content {
       width: 100%;
       margin: 0;
@@ -313,16 +319,16 @@
       -premailer-cellspacing: 0;
     }
     /* Masthead ----------------------- */
-    
+
     .email-masthead {
       padding: 25px 0;
       text-align: center;
     }
-    
+
     .email-masthead_logo {
       width: 94px;
     }
-    
+
     .email-masthead_name {
       font-size: 16px;
       font-weight: bold;
@@ -331,7 +337,7 @@
       text-shadow: 0 1px 0 white;
     }
     /* Body ------------------------------ */
-    
+
     .email-body {
       width: 100%;
       margin: 0;
@@ -340,7 +346,7 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .email-body_inner {
       width: 570px;
       margin: 0 auto;
@@ -350,7 +356,7 @@
       -premailer-cellspacing: 0;
       background-color: #FFFFFF;
     }
-    
+
     .email-footer {
       width: 570px;
       margin: 0 auto;
@@ -360,11 +366,11 @@
       -premailer-cellspacing: 0;
       text-align: center;
     }
-    
+
     .email-footer p {
       color: #A8AAAF;
     }
-    
+
     .body-action {
       width: 100%;
       margin: 30px auto;
@@ -374,25 +380,25 @@
       -premailer-cellspacing: 0;
       text-align: center;
     }
-    
+
     .body-sub {
       margin-top: 25px;
       padding-top: 25px;
       border-top: 1px solid #EAEAEC;
     }
-    
+
     .content-cell {
       padding: 45px;
     }
     /*Media Queries ------------------------------ */
-    
+
     @media only screen and (max-width: 600px) {
       .email-body_inner,
       .email-footer {
         width: 100% !important;
       }
     }
-    
+
     @media (prefers-color-scheme: dark) {
       body,
       .email-body,

From bd406616ec8404a0f3ced41a9b5d29089d69e56c Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Fri, 23 Feb 2024 20:03:08 +0600
Subject: [PATCH 24/25] fix: collection level authorization inheritance issue
 (#3852)

---
 .../src/components/collections/index.vue      |  4 +-
 .../src/components/graphql/Authorization.vue  | 24 +++++-----
 .../src/components/http/Authorization.vue     | 24 +++++-----
 .../helpers/curl/__tests__/curlparser.spec.js | 44 +++++++++----------
 .../src/helpers/graphql/default.ts            |  2 +-
 .../src/helpers/rest/default.ts               |  2 +-
 packages/hoppscotch-data/src/graphql/index.ts |  2 +-
 packages/hoppscotch-data/src/rest/index.ts    |  2 +-
 8 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index 235864360..39b4b74ad 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -614,8 +614,8 @@ const addNewRootCollection = (name: string) => {
         requests: [],
         headers: [],
         auth: {
-          authType: "inherit",
-          authActive: false,
+          authType: "none",
+          authActive: true,
         },
       })
     )
diff --git a/packages/hoppscotch-common/src/components/graphql/Authorization.vue b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
index becac3c56..d1b6505de 100644
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -31,17 +31,6 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <HoppSmartItem
-                label="None"
-                :icon="authName === 'None' ? IconCircleDot : IconCircle"
-                :active="authName === 'None'"
-                @click="
-                  () => {
-                    auth.authType = 'none'
-                    hide()
-                  }
-                "
-              />
               <HoppSmartItem
                 v-if="!isRootCollection"
                 label="Inherit"
@@ -54,6 +43,17 @@
                   }
                 "
               />
+              <HoppSmartItem
+                label="None"
+                :icon="authName === 'None' ? IconCircleDot : IconCircle"
+                :active="authName === 'None'"
+                @click="
+                  () => {
+                    auth.authType = 'none'
+                    hide()
+                  }
+                "
+              />
               <HoppSmartItem
                 label="Basic Auth"
                 :icon="authName === 'Basic Auth' ? IconCircleDot : IconCircle"
@@ -284,7 +284,7 @@ const authActive = pluckRef(auth, "authActive")
 
 const clearContent = () => {
   auth.value = {
-    authType: "none",
+    authType: "inherit",
     authActive: true,
   }
 }
diff --git a/packages/hoppscotch-common/src/components/http/Authorization.vue b/packages/hoppscotch-common/src/components/http/Authorization.vue
index 8dcff55da..f1a7b0a60 100644
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -31,17 +31,6 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <HoppSmartItem
-                label="None"
-                :icon="authName === 'None' ? IconCircleDot : IconCircle"
-                :active="authName === 'None'"
-                @click="
-                  () => {
-                    auth.authType = 'none'
-                    hide()
-                  }
-                "
-              />
               <HoppSmartItem
                 v-if="!isRootCollection"
                 label="Inherit"
@@ -54,6 +43,17 @@
                   }
                 "
               />
+              <HoppSmartItem
+                label="None"
+                :icon="authName === 'None' ? IconCircleDot : IconCircle"
+                :active="authName === 'None'"
+                @click="
+                  () => {
+                    auth.authType = 'none'
+                    hide()
+                  }
+                "
+              />
               <HoppSmartItem
                 label="Basic Auth"
                 :icon="authName === 'Basic Auth' ? IconCircleDot : IconCircle"
@@ -265,7 +265,7 @@ const authActive = pluckRef(auth, "authActive")
 
 const clearContent = () => {
   auth.value = {
-    authType: "none",
+    authType: "inherit",
     authActive: true,
   }
 }
diff --git a/packages/hoppscotch-common/src/helpers/curl/__tests__/curlparser.spec.js b/packages/hoppscotch-common/src/helpers/curl/__tests__/curlparser.spec.js
index bf8d38412..f8f32895d 100644
--- a/packages/hoppscotch-common/src/helpers/curl/__tests__/curlparser.spec.js
+++ b/packages/hoppscotch-common/src/helpers/curl/__tests__/curlparser.spec.js
@@ -18,7 +18,7 @@ const samples = [
       method: "GET",
       name: "Untitled",
       endpoint: "https://echo.hoppscotch.io/",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       body: {
         contentType: "application/x-www-form-urlencoded",
         body: rawKeyValueEntriesToString([
@@ -149,7 +149,7 @@ const samples = [
       method: "GET",
       name: "Untitled",
       endpoint: "https://google.com/",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       body: {
         contentType: null,
         body: null,
@@ -166,7 +166,7 @@ const samples = [
       method: "POST",
       name: "Untitled",
       endpoint: "http://localhost:1111/hello/world/?buzz",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       body: {
         contentType: "application/json",
         body: `{\n  "foo": "bar"\n}`,
@@ -189,7 +189,7 @@ const samples = [
       method: "GET",
       name: "Untitled",
       endpoint: "https://example.com/",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       body: {
         contentType: null,
         body: null,
@@ -217,7 +217,7 @@ const samples = [
       method: "POST",
       name: "Untitled",
       endpoint: "https://bing.com/",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       body: {
         contentType: "multipart/form-data",
         body: [
@@ -301,7 +301,7 @@ const samples = [
       name: "Untitled",
       endpoint: "http://localhost:9900/",
       auth: {
-        authType: "none",
+        authType: "inherit",
         authActive: true,
       },
       body: {
@@ -345,7 +345,7 @@ const samples = [
       endpoint: "https://hoppscotch.io/?io",
       auth: {
         authActive: true,
-        authType: "none",
+        authType: "inherit",
       },
       body: {
         contentType: null,
@@ -380,7 +380,7 @@ const samples = [
       endpoint: "https://someshadywebsite.com/questionable/path/?so",
       auth: {
         authActive: true,
-        authType: "none",
+        authType: "inherit",
       },
       body: {
         contentType: "multipart/form-data",
@@ -441,7 +441,7 @@ const samples = [
       endpoint: "http://localhost/",
       auth: {
         authActive: true,
-        authType: "none",
+        authType: "inherit",
       },
       body: {
         contentType: "multipart/form-data",
@@ -473,7 +473,7 @@ const samples = [
       method: "GET",
       name: "Untitled",
       endpoint: "https://hoppscotch.io/",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       body: {
         contentType: null,
         body: null,
@@ -528,7 +528,7 @@ const samples = [
       method: "GET",
       name: "Untitled",
       endpoint: "https://echo.hoppscotch.io/",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       body: {
         contentType: "application/x-www-form-urlencoded",
         body: rawKeyValueEntriesToString([
@@ -573,7 +573,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://echo.hoppscotch.io/",
       method: "POST",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       headers: [
         {
           active: true,
@@ -615,7 +615,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://muxueqz.top/skybook.html",
       method: "GET",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       headers: [],
       body: { contentType: null, body: null },
       params: [],
@@ -629,7 +629,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://echo.hoppscotch.io/",
       method: "POST",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       headers: [],
       body: {
         contentType: "multipart/form-data",
@@ -653,7 +653,7 @@ const samples = [
       name: "Untitled",
       endpoint: "http://127.0.0.1/",
       method: "CUSTOMMETHOD",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       headers: [],
       body: {
         contentType: null,
@@ -670,7 +670,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://echo.hoppscotch.io/",
       method: "GET",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       headers: [
         {
           active: true,
@@ -693,7 +693,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://echo.hoppscotch.io/",
       method: "GET",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       headers: [],
       body: {
         contentType: null,
@@ -710,7 +710,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://example.org/",
       method: "HEAD",
-      auth: { authType: "none", authActive: true },
+      auth: { authType: "inherit", authActive: true },
       headers: [],
       body: {
         contentType: null,
@@ -756,7 +756,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://google.com/",
       auth: {
-        authType: "none",
+        authType: "inherit",
         authActive: true,
       },
       body: {
@@ -777,7 +777,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://google.com/",
       auth: {
-        authType: "none",
+        authType: "inherit",
         authActive: true,
       },
       body: {
@@ -797,7 +797,7 @@ const samples = [
       name: "Untitled",
       endpoint: "http://192.168.0.24:8080/ping",
       auth: {
-        authType: "none",
+        authType: "inherit",
         authActive: true,
       },
       body: {
@@ -817,7 +817,7 @@ const samples = [
       name: "Untitled",
       endpoint: "https://example.com/",
       auth: {
-        authType: "none",
+        authType: "inherit",
         authActive: true,
       },
       body: {
diff --git a/packages/hoppscotch-common/src/helpers/graphql/default.ts b/packages/hoppscotch-common/src/helpers/graphql/default.ts
index dd08b5f92..88d2321c5 100644
--- a/packages/hoppscotch-common/src/helpers/graphql/default.ts
+++ b/packages/hoppscotch-common/src/helpers/graphql/default.ts
@@ -27,7 +27,7 @@ export const getDefaultGQLRequest = (): HoppGQLRequest => ({
 }`,
   query: DEFAULT_QUERY,
   auth: {
-    authType: "none",
+    authType: "inherit",
     authActive: true,
   },
 })
diff --git a/packages/hoppscotch-common/src/helpers/rest/default.ts b/packages/hoppscotch-common/src/helpers/rest/default.ts
index 873ee2d7d..d5bd45e9f 100644
--- a/packages/hoppscotch-common/src/helpers/rest/default.ts
+++ b/packages/hoppscotch-common/src/helpers/rest/default.ts
@@ -8,7 +8,7 @@ export const getDefaultRESTRequest = (): HoppRESTRequest => ({
   headers: [],
   method: "GET",
   auth: {
-    authType: "none",
+    authType: "inherit",
     authActive: true,
   },
   preRequestScript: "",
diff --git a/packages/hoppscotch-data/src/graphql/index.ts b/packages/hoppscotch-data/src/graphql/index.ts
index 785c7d4b4..ab5823541 100644
--- a/packages/hoppscotch-data/src/graphql/index.ts
+++ b/packages/hoppscotch-data/src/graphql/index.ts
@@ -57,7 +57,7 @@ export function getDefaultGQLRequest(): HoppGQLRequest {
 }`.trim(),
     query: DEFAULT_QUERY,
     auth: {
-      authType: "none",
+      authType: "inherit",
       authActive: true,
     },
   }
diff --git a/packages/hoppscotch-data/src/rest/index.ts b/packages/hoppscotch-data/src/rest/index.ts
index 575daad64..c0be37354 100644
--- a/packages/hoppscotch-data/src/rest/index.ts
+++ b/packages/hoppscotch-data/src/rest/index.ts
@@ -167,7 +167,7 @@ export function getDefaultRESTRequest(): HoppRESTRequest {
     headers: [],
     method: "GET",
     auth: {
-      authType: "none",
+      authType: "inherit",
       authActive: true,
     },
     preRequestScript: "",

From faab1d20fde9a6be660db40fc73dcf28f9038008 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 26 Feb 2024 22:31:58 +0530
Subject: [PATCH 25/25] chore: bump version to 2023.12.6

---
 packages/hoppscotch-backend/package.json                       | 2 +-
 packages/hoppscotch-common/package.json                        | 2 +-
 packages/hoppscotch-selfhost-desktop/package.json              | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock      | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml      | 2 +-
 packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json | 2 +-
 packages/hoppscotch-selfhost-web/package.json                  | 2 +-
 packages/hoppscotch-sh-admin/package.json                      | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-backend/package.json b/packages/hoppscotch-backend/package.json
index e560ede1a..e9f6ad0f2 100644
--- a/packages/hoppscotch-backend/package.json
+++ b/packages/hoppscotch-backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.12.5",
+  "version": "2023.12.6",
   "description": "",
   "author": "",
   "private": true,
diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json
index e8c3217ea..9772698dd 100644
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.12.5",
+  "version": "2023.12.6",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
diff --git a/packages/hoppscotch-selfhost-desktop/package.json b/packages/hoppscotch-selfhost-desktop/package.json
index eeaf89e71..f89a99ed5 100644
--- a/packages/hoppscotch-selfhost-desktop/package.json
+++ b/packages/hoppscotch-selfhost-desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-desktop",
   "private": true,
-  "version": "2023.12.5",
+  "version": "2023.12.6",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
index 88b409c9d..aecb6d45d 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock
@@ -1260,7 +1260,7 @@ dependencies = [
 
 [[package]]
 name = "hoppscotch-desktop"
-version = "23.12.5"
+version = "23.12.6"
 dependencies = [
  "cocoa 0.25.0",
  "hex_color",
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
index c0c266de8..25dcd1440 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "hoppscotch-desktop"
-version = "23.12.5"
+version = "23.12.6"
 description = "A Tauri App"
 authors = ["you"]
 license = ""
diff --git a/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json b/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
index 206282edd..3675cd405 100644
--- a/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
+++ b/packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Hoppscotch",
-    "version": "23.12.5"
+    "version": "23.12.6"
   },
   "tauri": {
     "allowlist": {
diff --git a/packages/hoppscotch-selfhost-web/package.json b/packages/hoppscotch-selfhost-web/package.json
index 4e33f8758..527748d61 100644
--- a/packages/hoppscotch-selfhost-web/package.json
+++ b/packages/hoppscotch-selfhost-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2023.12.5",
+  "version": "2023.12.6",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
diff --git a/packages/hoppscotch-sh-admin/package.json b/packages/hoppscotch-sh-admin/package.json
index d7ab231c1..b76dd4fd3 100644
--- a/packages/hoppscotch-sh-admin/package.json
+++ b/packages/hoppscotch-sh-admin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hoppscotch-sh-admin",
   "private": true,
-  "version": "2023.12.5",
+  "version": "2023.12.6",
   "type": "module",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",