refactor: move global environment selector to top (#2848)

* refactor: moved global env to top

* fix: change to my collection and env when logedout

* fix: merge fix

* refactor: change v-show to v-if

* chore: minor type change

* chore: pass variable name to edit

* chore: improve logic

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

* chore: minor ui improvements

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

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

@@ -55,6 +55,7 @@ declare module '@vue/runtime-core' {
     CollectionsTeamsRequest: typeof import('./components/collections/teams/Request.vue')['default']
     Environments: typeof import('./components/environments/index.vue')['default']
     EnvironmentsChooseType: typeof import('./components/environments/ChooseType.vue')['default']
+    EnvironmentsDetail: typeof import('./components/environments/Detail.vue')['default']
     EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
     EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
     EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
@@ -100,6 +101,7 @@ declare module '@vue/runtime-core' {
     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']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideInfo: typeof import('~icons/lucide/info')['default']
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
@@ -108,7 +110,6 @@ declare module '@vue/runtime-core' {
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    IconLucideVerified: typeof import('~icons/lucide/verified')['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-app/src/components/collections/ChooseType.vue

@@ -130,6 +130,15 @@ onLoggedIn(() => {
   adapter.initialize()
 })
 
+watch(
+  () => currentUser.value,
+  (user) => {
+    if (!user) {
+      selectedCollectionTab.value = "my-collections"
+    }
+  }
+)
+
 const onTeamSelectIntersect = () => {
   // Load team data as soon as intersection
   adapter.fetchList()

packages/hoppscotch-app/src/components/environments/ChooseType.vue

@@ -77,7 +77,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from "vue"
-import { Team } from "~/helpers/backend/graphql"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { onLoggedIn } from "@composables/auth"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
@@ -89,7 +89,9 @@ import IconUsers from "~icons/lucide/users"
 
 const t = useI18n()
 
-type SelectedTeam = Team | undefined
+type TeamData = GetMyTeamsQuery["myTeams"][number]
+
+type SelectedTeam = TeamData | undefined
 
 type EnvironmentTabs = "my-environments" | "team-environments"
 
@@ -126,6 +128,15 @@ watch(myTeams, (teams) => {
   }
 })
 
+watch(
+  () => currentUser.value,
+  (user) => {
+    if (!user) {
+      selectedEnvironmentTab.value = "my-environments"
+    }
+  }
+)
+
 onLoggedIn(() => {
   adapter.initialize()
 })

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

@@ -149,20 +149,33 @@
           </div>
         </template>
       </tippy>
+      <EnvironmentsMyEnvironment
+        environment-index="Global"
+        :environment="globalEnvironment"
+        class="border-b border-dividerLight"
+        @edit-environment="editEnvironment('Global')"
+      />
       <EnvironmentsChooseType
         :environment-type="environmentType"
         @update-environment-type="updateEnvironmentType"
         @update-selected-team="updateSelectedTeam"
       />
     </div>
-    <EnvironmentsMy v-show="environmentType.type === 'my-environments'" />
+    <EnvironmentsMy v-if="environmentType.type === 'my-environments'" />
     <EnvironmentsTeams
-      v-show="environmentType.type === 'team-environments'"
+      v-if="environmentType.type === 'team-environments'"
       :team="environmentType.selectedTeam"
       :team-environments="teamEnvironmentList"
       :loading="loading"
       :adapter-error="adapterError"
     />
+    <EnvironmentsMyDetails
+      :show="showModalDetails"
+      :action="action"
+      :editing-environment-index="editingEnvironmentIndex"
+      :editing-variable-name="editingVariableName"
+      @hide-modal="displayModalEdit(false)"
+    />
   </div>
 </template>
 
@@ -175,6 +188,7 @@ import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "~/composables/i18n"
 import {
   environments$,
+  globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
@@ -182,6 +196,7 @@ import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import IconCheck from "~icons/lucide/check"
 import { TippyComponent } from "vue-tippy"
+import { defineActionHandler } from "~/helpers/actions"
 
 const t = useI18n()
 
@@ -199,6 +214,13 @@ const environmentType = ref<EnvironmentsChooseType>({
   selectedTeam: undefined,
 })
 
+const globalEnv = useReadonlyStream(globalEnv$, [])
+
+const globalEnvironment = computed(() => ({
+  name: "Global",
+  variables: globalEnv.value,
+}))
+
 const currentUser = useReadonlyStream(currentUser$, null)
 
 const updateSelectedTeam = (newSelectedTeam: SelectedTeam) => {
@@ -233,6 +255,36 @@ watch(
   }
 )
 
+const showModalDetails = ref(false)
+const action = ref<"new" | "edit">("edit")
+const editingEnvironmentIndex = ref<"Global" | null>(null)
+const editingVariableName = ref("")
+
+const displayModalEdit = (shouldDisplay: boolean) => {
+  action.value = "edit"
+  showModalDetails.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const editEnvironment = (environmentIndex: "Global") => {
+  editingEnvironmentIndex.value = environmentIndex
+  action.value = "edit"
+  displayModalEdit(true)
+}
+
+const resetSelectedData = () => {
+  editingEnvironmentIndex.value = null
+}
+
+defineActionHandler(
+  "modals.my.environment.edit",
+  ({ envName, variableName }) => {
+    editingVariableName.value = variableName
+    envName === "Global" && editEnvironment("Global")
+  }
+)
+
 const myEnvironments = useReadonlyStream(environments$, [])
 
 const selectedEnvironmentIndex = useStream(

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

@@ -172,6 +172,7 @@ const props = withDefaults(
     show: false,
     action: "edit",
     editingEnvironmentIndex: null,
+    editingVariableName: null,
     envVars: () => [],
   }
 )

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

@@ -4,6 +4,14 @@
     @contextmenu.prevent="options!.tippy.show()"
   >
     <span
+      v-if="environmentIndex === 'Global'"
+      class="flex items-center justify-center px-4 cursor-pointer"
+      @click="emit('edit-environment')"
+    >
+      <icon-lucide-globe class="svg-icons" />
+    </span>
+    <span
+      v-else
       class="flex items-center justify-center px-4 cursor-pointer"
       @click="emit('edit-environment')"
     >
@@ -70,7 +78,7 @@
               "
             />
             <SmartItem
-              v-if="!(environmentIndex === 'Global')"
+              v-if="environmentIndex !== 'Global'"
               ref="deleteAction"
               :icon="IconTrash2"
               :label="`${t('action.delete')}`"

packages/hoppscotch-app/src/components/environments/my/index.vue

@@ -25,12 +25,6 @@
         />
       </div>
     </div>
-    <EnvironmentsMyEnvironment
-      environment-index="Global"
-      :environment="globalEnvironment"
-      class="border-b border-dashed border-dividerLight"
-      @edit-environment="editEnvironment('Global')"
-    />
     <EnvironmentsMyEnvironment
       v-for="(environment, index) in environments"
       :key="`environment-${index}`"
@@ -38,7 +32,6 @@
       :environment="environment"
       @edit-environment="editEnvironment(index)"
     />
-
     <div
       v-if="environments.length === 0"
       class="flex flex-col items-center justify-center p-4 text-secondaryLight"
@@ -76,8 +69,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
+import { ref } from "vue"
-import { environments$, globalEnv$ } from "~/newstore/environments"
+import { environments$ } from "~/newstore/environments"
 import { useColorMode } from "~/composables/theming"
 import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "~/composables/i18n"
@@ -90,19 +83,12 @@ import { defineActionHandler } from "~/helpers/actions"
 const t = useI18n()
 const colorMode = useColorMode()
 
-const globalEnv = useReadonlyStream(globalEnv$, [])
-
-const globalEnvironment = computed(() => ({
-  name: "Global",
-  variables: globalEnv.value,
-}))
-
 const environments = useReadonlyStream(environments$, [])
 
 const showModalImportExport = ref(false)
 const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
-const editingEnvironmentIndex = ref<number | "Global" | null>(null)
+const editingEnvironmentIndex = ref<number | null>(null)
 const editingVariableName = ref("")
 
 const displayModalAdd = (shouldDisplay: boolean) => {
@@ -118,7 +104,7 @@ const displayModalEdit = (shouldDisplay: boolean) => {
 const displayModalImportExport = (shouldDisplay: boolean) => {
   showModalImportExport.value = shouldDisplay
 }
-const editEnvironment = (environmentIndex: number | "Global") => {
+const editEnvironment = (environmentIndex: number) => {
   editingEnvironmentIndex.value = environmentIndex
   action.value = "edit"
   displayModalEdit(true)
@@ -136,7 +122,7 @@ defineActionHandler(
         return environment.name === envName
       }
     )
-    editEnvironment(envIndex >= 0 ? envIndex : "Global")
+    if (envName !== "Global") editEnvironment(envIndex)
   }
 )
 </script>