refactor: make global environment a versioned entity (#4216)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -205,7 +205,7 @@
                 </span>
               </div>
               <div
-                v-for="(variable, index) in globalEnvs"
+                v-for="(variable, index) in globalEnvs.variables"
                 :key="index"
                 class="flex flex-1 space-x-4"
               >
@@ -219,7 +219,10 @@
                   </template>
                 </span>
               </div>
-              <div v-if="globalEnvs.length === 0" class="text-secondaryLight">
+              <div
+                v-if="globalEnvs.variables.length === 0"
+                class="text-secondaryLight"
+              >
                 {{ t("environment.empty_variables") }}
               </div>
             </div>
@@ -292,37 +295,36 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue"
-import IconCheck from "~icons/lucide/check"
-import IconLayers from "~icons/lucide/layers"
-import IconEye from "~icons/lucide/eye"
-import IconEdit from "~icons/lucide/edit"
-import IconGlobe from "~icons/lucide/globe"
+import { useColorMode } from "@composables/theming"
+import { Environment, GlobalEnvironment } from "@hoppscotch/data"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+import { useService } from "dioc/vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
-import { GQLError } from "~/helpers/backend/GQLClient"
 import { useReadonlyStream, useStream } from "~/composables/stream"
+import { invokeAction } from "~/helpers/actions"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import {
   environments$,
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
-import { useColorMode } from "@composables/theming"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
-import { invokeAction } from "~/helpers/actions"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
-import { Environment } from "@hoppscotch/data"
-import { onMounted } from "vue"
 import { useLocalState } from "~/newstore/localstate"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { useService } from "dioc/vue"
 import { WorkspaceService } from "~/services/workspace.service"
 import {
   sortPersonalEnvironmentsAlphabetically,
   sortTeamEnvironmentsAlphabetically,
 } from "~/helpers/utils/sortEnvironmentsAlphabetically"
+import IconCheck from "~icons/lucide/check"
+import IconEdit from "~icons/lucide/edit"
+import IconEye from "~icons/lucide/eye"
+import IconGlobe from "~icons/lucide/globe"
+import IconLayers from "~icons/lucide/layers"
 
 type Scope =
   | {
@@ -600,7 +602,7 @@ const getErrorMessage = (err: GQLError<string>) => {
   }
 }
 
-const globalEnvs = useReadonlyStream(globalEnv$, [])
+const globalEnvs = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
 
 const environmentVariables = computed(() => {
   if (selectedEnv.value.variables) {

packages/hoppscotch-common/src/components/environments/index.vue

@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 import { useReadonlyStream, useStream } from "@composables/stream"
-import { Environment } from "@hoppscotch/data"
+import { Environment, GlobalEnvironment } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
 import * as TE from "fp-ts/TaskEither"
 import { pipe } from "fp-ts/function"
@@ -86,13 +86,13 @@ const environmentType = ref<EnvironmentsChooseType>({
   selectedTeam: undefined,
 })
 
-const globalEnv = useReadonlyStream(globalEnv$, [])
+const globalEnv = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
 
-const globalEnvironment = computed(() => ({
+const globalEnvironment = computed<GlobalEnvironment>(() => ({
   v: 1 as const,
   id: "Global",
   name: "Global",
-  variables: globalEnv.value,
+  variables: globalEnv.value.variables,
 }))
 
 const isPersonalEnvironmentType = computed(
@@ -252,7 +252,7 @@ defineActionHandler("modals.environment.delete-selected", () => {
 
 const additionalVars = ref<Environment["variables"]>([])
 
-const envVars = () => [...globalEnv.value, ...additionalVars.value]
+const envVars = () => [...globalEnv.value.variables, ...additionalVars.value]
 
 defineActionHandler(
   "modals.global.environment.update",

packages/hoppscotch-common/src/components/environments/my/Details.vue

@@ -133,21 +133,27 @@
 </template>
 
 <script setup lang="ts">
-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 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"
-import { pipe, flow } from "fp-ts/function"
-import { Environment, parseTemplateStringE } from "@hoppscotch/data"
+import { useI18n } from "@composables/i18n"
+import { useReadonlyStream } from "@composables/stream"
+import { useColorMode } from "@composables/theming"
+import { useToast } from "@composables/toast"
+import {
+  Environment,
+  GlobalEnvironment,
+  parseTemplateStringE,
+} from "@hoppscotch/data"
 import { refAutoReset } from "@vueuse/core"
+import { useService } from "dioc/vue"
+import * as A from "fp-ts/Array"
+import * as E from "fp-ts/Either"
+import * as O from "fp-ts/Option"
+import { flow, pipe } from "fp-ts/function"
+import { ComputedRef, computed, ref, watch } from "vue"
+import { uniqueID } from "~/helpers/utils/uniqueID"
 import {
   createEnvironment,
   environments$,
+  environmentsStore,
   getEnvironment,
   getGlobalVariables,
   globalEnv$,
@@ -155,15 +161,13 @@ import {
   setSelectedEnvironmentIndex,
   updateEnvironment,
 } from "~/newstore/environments"
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
-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 "~/helpers/utils/uniqueID"
+import IconDone from "~icons/lucide/check"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import IconPlus from "~icons/lucide/plus"
+import IconTrash from "~icons/lucide/trash"
+import IconTrash2 from "~icons/lucide/trash-2"
 
 type EnvironmentVariable = {
   id: number
@@ -257,7 +261,7 @@ const clearIcon = refAutoReset<typeof IconTrash2 | typeof IconDone>(
   1000
 )
 
-const globalVars = useReadonlyStream(globalEnv$, [])
+const globalVars = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
 
 type SelectedEnv = "variables" | "secret"
 
@@ -315,10 +319,20 @@ const liveEnvs = computed(() => {
   }
   return [
     ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
-    ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
+    ...globalVars.value.variables.map((x) => ({ ...x, source: "Global" })),
   ]
 })
 
+const workingEnvID = computed(() => {
+  const activeEnv = workingEnv.value
+
+  if (activeEnv && "id" in activeEnv) {
+    return activeEnv.id
+  }
+
+  return uniqueID()
+})
+
 watch(
   () => props.show,
   (show) => {
@@ -329,7 +343,7 @@ watch(
         : "variables"
 
       if (props.editingEnvironmentIndex !== "Global") {
-        editingID.value = workingEnv.value?.id || uniqueID()
+        editingID.value = workingEnvID.value
       }
       vars.value = pipe(
         workingEnv.value?.variables ?? [],
@@ -341,7 +355,7 @@ watch(
               ? secretEnvironmentService.getSecretEnvironmentVariable(
                   props.editingEnvironmentIndex === "Global"
                     ? "Global"
-                    : workingEnv.value?.id,
+                    : workingEnvID.value,
                   index
                 )?.value ?? ""
               : e.value,
@@ -448,7 +462,7 @@ const saveEnvironment = () => {
     })
   } else if (props.editingEnvironmentIndex === "Global") {
     // Editing the Global environment
-    setGlobalEnvVariables(environmentUpdated.variables)
+    setGlobalEnvVariables(environmentUpdated)
     toast.success(`${t("environment.updated")}`)
   } else if (props.editingEnvironmentIndex !== null) {
     const envID =

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -204,27 +204,28 @@
 </template>
 
 <script setup lang="ts">
-import { computed, Ref, ref } from "vue"
-import { isEqual } from "lodash-es"
-import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
+import { useReadonlyStream, useStream } from "@composables/stream"
+import { isEqual } from "lodash-es"
+import { computed, ref } from "vue"
+import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 import {
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 
-import IconTrash2 from "~icons/lucide/trash-2"
-import IconExternalLink from "~icons/lucide/external-link"
 import IconCheck from "~icons/lucide/check"
+import IconExternalLink from "~icons/lucide/external-link"
+import IconTrash2 from "~icons/lucide/trash-2"
 import IconClose from "~icons/lucide/x"
 
-import { useColorMode } from "~/composables/theming"
+import { GlobalEnvironment } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
-import { WorkspaceService } from "~/services/workspace.service"
+import { useColorMode } from "~/composables/theming"
 import { invokeAction } from "~/helpers/actions"
+import { WorkspaceService } from "~/services/workspace.service"
 
 const props = defineProps<{
   modelValue: HoppTestResult | null | undefined
@@ -282,12 +283,7 @@ const selectedEnvironmentIndex = useStream(
   setSelectedEnvironmentIndex
 )
 
-const globalEnvVars = useReadonlyStream(globalEnv$, []) as Ref<
-  Array<{
-    key: string
-    value: string
-  }>
->
+const globalEnvVars = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
 
 const noEnvSelected = computed(
   () => selectedEnvironmentIndex.value.type === "NO_ENV_SELECTED"
@@ -297,7 +293,8 @@ const globalHasAdditions = computed(() => {
   if (!testResults.value?.envDiff.selected.additions) return false
   return (
     testResults.value.envDiff.selected.additions.every(
-      (x) => globalEnvVars.value.findIndex((y) => isEqual(x, y)) !== -1
+      (x) =>
+        globalEnvVars.value.variables.findIndex((y) => isEqual(x, y)) !== -1
     ) ?? false
   )
 })