refactor: switch workspace after creation (#4015)

Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>

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

@@ -364,6 +364,7 @@ const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
     teamID: team.id,
     teamName: team.name,
     type: "team",
+    role: team.myRole,
   })
 }
 watch(

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

@@ -46,41 +46,38 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue"
-import { isEqual } from "lodash-es"
-import { platform } from "~/platform"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useReadonlyStream, useStream } from "@composables/stream"
+import { Environment } from "@hoppscotch/data"
+import { useService } from "dioc/vue"
+import * as TE from "fp-ts/TaskEither"
+import { pipe } from "fp-ts/function"
+import { isEqual } from "lodash-es"
+import { computed, ref, watch } from "vue"
 import { useI18n } from "~/composables/i18n"
+import { useToast } from "~/composables/toast"
+import { defineActionHandler } from "~/helpers/actions"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import {
+  deleteEnvironment,
   getSelectedEnvironmentIndex,
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
-import { defineActionHandler } from "~/helpers/actions"
 import { useLocalState } from "~/newstore/localstate"
-import { pipe } from "fp-ts/function"
-import * as TE from "fp-ts/TaskEither"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { deleteEnvironment } from "~/newstore/environments"
-import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
-import { useToast } from "~/composables/toast"
-import { WorkspaceService } from "~/services/workspace.service"
-import { useService } from "dioc/vue"
-import { Environment } from "@hoppscotch/data"
+import { platform } from "~/platform"
+import { TeamWorkspace, WorkspaceService } from "~/services/workspace.service"
 
 const t = useI18n()
 const toast = useToast()
 
 type EnvironmentType = "my-environments" | "team-environments"
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type EnvironmentsChooseType = {
   type: EnvironmentType
-  selectedTeam: SelectedTeam
+  selectedTeam: TeamWorkspace | undefined
 }
 
 const environmentType = ref<EnvironmentsChooseType>({
@@ -102,11 +99,7 @@ const currentUser = useReadonlyStream(
   platform.auth.getCurrentUser()
 )
 
-// TeamList-Adapter
 const workspaceService = useService(WorkspaceService)
-const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
-const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
-const teamListFetched = ref(false)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
 
 const adapter = new TeamEnvironmentAdapter(undefined)
@@ -118,29 +111,17 @@ const loading = computed(
   () => adapterLoading.value && teamEnvironmentList.value.length === 0
 )
 
-watch(
-  () => myTeams.value,
-  (newTeams) => {
-    if (newTeams && !teamListFetched.value) {
-      teamListFetched.value = true
-      if (REMEMBERED_TEAM_ID.value && currentUser.value) {
-        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
-        if (team) updateSelectedTeam(team)
-      }
-    }
-  }
-)
-
 const switchToMyEnvironments = () => {
   environmentType.value.selectedTeam = undefined
   updateEnvironmentType("my-environments")
   adapter.changeTeamID(undefined)
 }
 
-const updateSelectedTeam = (newSelectedTeam: SelectedTeam | undefined) => {
+const updateSelectedTeam = (newSelectedTeam: TeamWorkspace | undefined) => {
   if (newSelectedTeam) {
+    adapter.changeTeamID(newSelectedTeam.teamID)
     environmentType.value.selectedTeam = newSelectedTeam
-    REMEMBERED_TEAM_ID.value = newSelectedTeam.id
+    REMEMBERED_TEAM_ID.value = newSelectedTeam.teamID
     updateEnvironmentType("team-environments")
   }
 }
@@ -148,15 +129,6 @@ const updateEnvironmentType = (newEnvironmentType: EnvironmentType) => {
   environmentType.value.type = newEnvironmentType
 }
 
-watch(
-  () => environmentType.value.selectedTeam,
-  (newTeam) => {
-    if (newTeam) {
-      adapter.changeTeamID(newTeam.id)
-    }
-  }
-)
-
 const workspace = workspaceService.currentWorkspace
 
 // Switch to my environments if workspace is personal and to team environments if workspace is team
@@ -170,8 +142,7 @@ watch(workspace, (newWorkspace) => {
       })
     }
   } else if (newWorkspace.type === "team") {
-    const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
-    updateSelectedTeam(team)
+    updateSelectedTeam(newWorkspace)
   }
 })
 

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

@@ -4,7 +4,7 @@
       class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
     >
       <HoppButtonSecondary
-        v-if="team === undefined || team.myRole === 'VIEWER'"
+        v-if="team === undefined || team.role === 'VIEWER'"
         v-tippy="{ theme: 'tooltip' }"
         disabled
         class="!rounded-none"
@@ -28,7 +28,7 @@
           :icon="IconHelpCircle"
         />
         <HoppButtonSecondary
-          v-if="team !== undefined && team.myRole === 'VIEWER'"
+          v-if="team !== undefined && team.role === 'VIEWER'"
           v-tippy="{ theme: 'tooltip' }"
           disabled
           :icon="IconImport"
@@ -84,7 +84,7 @@
         )"
         :key="`environment-${index}`"
         :environment="environment"
-        :is-viewer="team?.myRole === 'VIEWER'"
+        :is-viewer="team?.role === 'VIEWER'"
         @edit-environment="editEnvironment(environment)"
       />
     </div>
@@ -103,16 +103,16 @@
       :show="showModalDetails"
       :action="action"
       :editing-environment="editingEnvironment"
-      :editing-team-id="team?.id"
+      :editing-team-id="team?.teamID"
       :editing-variable-name="editingVariableName"
       :is-secret-option-selected="secretOptionSelected"
-      :is-viewer="team?.myRole === 'VIEWER'"
+      :is-viewer="team?.role === 'VIEWER'"
       @hide-modal="displayModalEdit(false)"
     />
     <EnvironmentsImportExport
       v-if="showModalImportExport"
       :team-environments="teamEnvironments"
-      :team-id="team?.id"
+      :team-id="team?.teamID"
       environment-type="TEAM_ENV"
       @hide-modal="displayModalImportExport(false)"
     />
@@ -129,16 +129,14 @@ import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
 import { defineActionHandler } from "~/helpers/actions"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { TeamWorkspace } from "~/services/workspace.service"
 
 const t = useI18n()
 
 const colorMode = useColorMode()
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 const props = defineProps<{
-  team: SelectedTeam
+  team: TeamWorkspace | undefined
   teamEnvironments: TeamEnvironment[]
   adapterError: GQLError<string> | null
   loading: boolean
@@ -151,7 +149,7 @@ const editingEnvironment = ref<TeamEnvironment | null>(null)
 const editingVariableName = ref("")
 const secretOptionSelected = ref(false)
 
-const isTeamViewer = computed(() => props.team?.myRole === "VIEWER")
+const isTeamViewer = computed(() => props.team?.role === "VIEWER")
 
 const displayModalAdd = (shouldDisplay: boolean) => {
   action.value = "new"