fix: selected env changed while sidebar collapsed (#3002)

packages/hoppscotch-common/src/components.d.ts

@@ -73,6 +73,25 @@ declare module '@vue/runtime-core' {
     History: typeof import('./components/history/index.vue')['default']
     HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
     HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
+    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
+    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
+    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
+    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
+    HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
+    HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
     HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
     HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default']
     HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default']
@@ -98,6 +117,18 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
+    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideInfo: typeof import('~icons/lucide/info')['default']
+    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
+    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideSearch: typeof import('~icons/lucide/search')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
+    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']

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

@@ -408,11 +408,9 @@ const selectedEnv = computed(() => {
         teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
       }
     } else {
-      selectedEnvironmentIndex.value = { type: "NO_ENV_SELECTED" }
       return { type: "NO_ENV_SELECTED" }
     }
   } else {
-    selectedEnvironmentIndex.value = { type: "NO_ENV_SELECTED" }
     return { type: "NO_ENV_SELECTED" }
   }
 })

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

@@ -1,8 +1,6 @@
 /* eslint-disable no-restricted-globals, no-restricted-syntax */
 
 import { clone, assign, isEmpty } from "lodash-es"
-import * as O from "fp-ts/Option"
-import { pipe } from "fp-ts/function"
 import {
   translateToNewRESTCollection,
   translateToNewGQLCollection,
@@ -51,7 +49,30 @@ import {
 } from "~/helpers/rest/tab"
 
 function checkAndMigrateOldSettings() {
+  if (window.localStorage.getItem("selectedEnvIndex")) {
+    const index = window.localStorage.getItem("selectedEnvIndex")
+    if (index) {
+      if (index === "-1") {
+        window.localStorage.setItem(
+          "selectedEnvIndex",
+          JSON.stringify({
+            type: "NO_ENV_SELECTED",
+          })
+        )
+      } else if (Number(index) >= 0) {
+        window.localStorage.setItem(
+          "selectedEnvIndex",
+          JSON.stringify({
+            type: "MY_ENV",
+            index: parseInt(index),
+          })
+        )
+      }
+    }
+  }
+
   const vuexData = JSON.parse(window.localStorage.getItem("vuex") || "{}")
+
   if (isEmpty(vuexData)) return
 
   const { postwoman } = vuexData
@@ -210,35 +231,21 @@ function setupEnvironmentsPersistence() {
 }
 
 function setupSelectedEnvPersistence() {
-  const selectedEnvIndex = pipe(
+  const selectedEnvIndex = JSON.parse(
-    // Value from local storage can be nullable
+    window.localStorage.getItem("selectedEnvIndex") ?? "null"
-    O.fromNullable(window.localStorage.getItem("selectedEnvIndex")),
-    O.map(parseInt), // If not null, parse to integer
-    O.chain(
-      O.fromPredicate(
-        Number.isInteger // Check if the number is proper int (not NaN)
-      )
-    ),
-    O.getOrElse(() => -1) // If all the above conditions pass, we are good, else set default value (-1)
   )
-  // Check if current environment index is -1 ie. no environment is selected
+
-  if (selectedEnvIndex === -1) {
+  // If there is a selected env index, set it to the store else set it to null
-    setSelectedEnvironmentIndex({
+  if (selectedEnvIndex) {
-      type: "NO_ENV_SELECTED",
+    setSelectedEnvironmentIndex(selectedEnvIndex)
-    })
   } else {
     setSelectedEnvironmentIndex({
-      type: "MY_ENV",
+      type: "NO_ENV_SELECTED",
-      index: selectedEnvIndex,
     })
   }
 
   selectedEnvironmentIndex$.subscribe((envIndex) => {
-    if (envIndex.type === "MY_ENV") {
+    window.localStorage.setItem("selectedEnvIndex", JSON.stringify(envIndex))
-      window.localStorage.setItem("selectedEnvIndex", envIndex.index.toString())
-    } else {
-      window.localStorage.setItem("selectedEnvIndex", "-1")
-    }
   })
 }