refactor: add optional ids to environments (#2974)

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

@@ -147,6 +147,7 @@ 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"
 
 type EnvironmentVariable = {
   id: number
@@ -315,8 +316,21 @@ const saveEnvironment = () => {
     setGlobalEnvVariables(environmentUpdated.variables)
     toast.success(`${t("environment.updated")}`)
   } else if (props.editingEnvironmentIndex !== null) {
+    const envID =
+      environmentsStore.value.environments[props.editingEnvironmentIndex].id
+
     // Editing an environment
-    updateEnvironment(props.editingEnvironmentIndex, environmentUpdated)
+    updateEnvironment(
+      props.editingEnvironmentIndex,
+      envID
+        ? {
+            ...environmentUpdated,
+            id: envID,
+          }
+        : {
+            ...environmentUpdated,
+          }
+    )
     toast.success(`${t("environment.updated")}`)
   }
 

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

@@ -144,8 +144,9 @@ const deleteAction = ref<typeof HoppSmartItem>()
 
 const removeEnvironment = () => {
   if (props.environmentIndex === null) return
-  if (props.environmentIndex !== "Global")
-    deleteEnvironment(props.environmentIndex)
+  if (props.environmentIndex !== "Global") {
+    deleteEnvironment(props.environmentIndex, props.environment.id)
+  }
   toast.success(`${t("state.deleted")}`)
 }
 

packages/hoppscotch-common/src/helpers/RequestRunner.ts

@@ -122,7 +122,7 @@ export const runRESTRequest$ = (
                 updateEnvironment(
                   environmentsStore.value.selectedEnvironmentIndex.index,
                   {
-                    name: env.name,
+                    ...env,
                     variables: runResult.right.envs.selected,
                   }
                 )

packages/hoppscotch-common/src/newstore/environments.ts

@@ -24,6 +24,8 @@ const defaultEnvironmentsState = {
     },
   ] as Environment[],
 
+  // as a temp fix for identifying global env when syncing
+  globalEnvID: undefined as string | undefined,
   globals: [] as Environment["variables"],
 
   selectedEnvironmentIndex: {
@@ -62,15 +64,25 @@ const dispatchers = defineDispatchers({
   },
   createEnvironment(
     { environments }: EnvironmentStore,
-    { name, variables }: { name: string; variables: Environment["variables"] }
+    {
+      name,
+      variables,
+      envID,
+    }: { name: string; variables: Environment["variables"]; envID?: string }
   ) {
     return {
       environments: [
         ...environments,
-        {
-          name,
-          variables: variables,
-        },
+        envID
+          ? {
+              id: envID,
+              name,
+              variables,
+            }
+          : {
+              name,
+              variables,
+            },
       ],
     }
   },
@@ -84,6 +96,10 @@ const dispatchers = defineDispatchers({
         environments,
       }
     }
+
+    // remove the id, because this is a new environment & it will get its own id when syncing
+    delete newEnvironment["id"]
+
     return {
       environments: [
         ...environments,
@@ -100,7 +116,9 @@ const dispatchers = defineDispatchers({
       // currentEnvironmentIndex,
       selectedEnvironmentIndex,
     }: EnvironmentStore,
-    { envIndex }: { envIndex: number }
+    // the envID is used in the syncing code, so disabling the lint rule
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    { envIndex, envID }: { envIndex: number; envID?: string }
   ) {
     let newCurrEnvIndex = selectedEnvironmentIndex
 
@@ -266,6 +284,25 @@ const dispatchers = defineDispatchers({
       globals: globals.map((x, i) => (i !== envIndex ? x : updatedEntry)),
     }
   },
+  setGlobalEnvID(_, { id }: { id: string }) {
+    return {
+      globalEnvID: id,
+    }
+  },
+  // only used for environments.sync.ts to prevent double insertion of environments from storeSync and Subscriptions
+  removeDuplicateEntry({ environments }, { id }: { id: string }) {
+    const entries = environments.filter((e) => e.id === id)
+
+    const newEnvironments = [...environments]
+
+    if (entries.length == 2) {
+      const indexToRemove = environments.findIndex((e) => e.id === id)
+      newEnvironments.splice(indexToRemove, 1)
+    }
+    return {
+      environments: newEnvironments,
+    }
+  },
 })
 
 export const environmentsStore = new DispatchingStore(
@@ -404,6 +441,18 @@ export function getGlobalVariables(): Environment["variables"] {
   return environmentsStore.value.globals
 }
 
+export function getGlobalVariableID() {
+  return environmentsStore.value.globalEnvID
+}
+
+export function getLocalIndexByEnvironmentID(id: string) {
+  const envIndex = environmentsStore.value.environments.findIndex(
+    (env) => env.id === id
+  )
+
+  return envIndex != -1 ? envIndex : null
+}
+
 export function addGlobalEnvVariable(entry: Environment["variables"][number]) {
   environmentsStore.dispatch({
     dispatcher: "addGlobalVariable",
@@ -471,13 +520,15 @@ export function appendEnvironments(envs: Environment[]) {
 
 export function createEnvironment(
   envName: string,
-  variables?: Environment["variables"]
+  variables?: Environment["variables"],
+  envID?: string
 ) {
   environmentsStore.dispatch({
     dispatcher: "createEnvironment",
     payload: {
       name: envName,
       variables: variables ?? [],
+      envID,
     },
   })
 }
@@ -491,11 +542,12 @@ export function duplicateEnvironment(envIndex: number) {
   })
 }
 
-export function deleteEnvironment(envIndex: number) {
+export function deleteEnvironment(envIndex: number, envID?: string) {
   environmentsStore.dispatch({
     dispatcher: "deleteEnvironment",
     payload: {
       envIndex,
+      envID,
     },
   })
 }
@@ -576,6 +628,24 @@ export function updateEnvironmentVariable(
   })
 }
 
+export function setGlobalEnvID(id: string) {
+  environmentsStore.dispatch({
+    dispatcher: "setGlobalEnvID",
+    payload: {
+      id,
+    },
+  })
+}
+
+export function removeDuplicateEntry(id: string) {
+  environmentsStore.dispatch({
+    dispatcher: "removeDuplicateEntry",
+    payload: {
+      id,
+    },
+  })
+}
+
 type SelectedEnv =
   | { type: "NO_ENV_SELECTED" }
   | { type: "MY_ENV"; index: number }

packages/hoppscotch-data/src/environment.ts

@@ -2,6 +2,7 @@ import { pipe } from "fp-ts/function"
 import * as E from "fp-ts/Either"
 
 export type Environment = {
+  id?: string
   name: string
   variables: {
     key: string