feat: secret variables in environments (#3779)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

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()
   }
 
   /**