refactor: switch workspace after creation (#4015)

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

packages/hoppscotch-common/src/components/collections/ImportExport.vue

@@ -32,7 +32,6 @@ import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
 import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
 import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 
 import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconOpenAPI from "~icons/lucide/file"
@@ -55,16 +54,15 @@ import { teamCollectionsExporter } from "~/helpers/import-export/export/teamColl
 
 import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
 import { ImporterOrExporter } from "~/components/importExport/types"
+import { TeamWorkspace } from "~/services/workspace.service"
 
 const t = useI18n()
 const toast = useToast()
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type CollectionType =
   | {
       type: "team-collections"
-      selectedTeam: SelectedTeam
+      selectedTeam: TeamWorkspace
     }
   | { type: "my-collections" }
 
@@ -433,7 +431,7 @@ const HoppTeamCollectionsExporter: ImporterOrExporter = {
       props.collectionsType.selectedTeam
     ) {
       const res = await teamCollectionsExporter(
-        props.collectionsType.selectedTeam.id
+        props.collectionsType.selectedTeam.teamID
       )
 
       if (E.isRight(res)) {
@@ -569,26 +567,26 @@ const hasTeamWriteAccess = computed(() => {
   }
 
   return (
-    collectionsType.selectedTeam.myRole === "EDITOR" ||
-    collectionsType.selectedTeam.myRole === "OWNER"
+    collectionsType.selectedTeam.role === "EDITOR" ||
+    collectionsType.selectedTeam.role === "OWNER"
   )
 })
 
 const selectedTeamID = computed(() => {
   const { collectionsType } = props
 
   return collectionsType.type === "team-collections"
-    ? collectionsType.selectedTeam?.id
+    ? collectionsType.selectedTeam?.teamID
     : undefined
 })
 
 const getCollectionJSON = async () => {
   if (
     props.collectionsType.type === "team-collections" &&
-    props.collectionsType.selectedTeam?.id
+    props.collectionsType.selectedTeam?.teamID
   ) {
     const res = await getTeamCollectionJSON(
-      props.collectionsType.selectedTeam?.id
+      props.collectionsType.selectedTeam?.teamID
     )
 
     return E.isRight(res)

packages/hoppscotch-common/src/components/collections/SaveRequest.vue

@@ -56,49 +56,47 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, reactive, ref, watch } from "vue"
-import { cloneDeep } from "lodash-es"
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
 import {
   HoppGQLRequest,
   HoppRESTRequest,
   isHoppRESTRequest,
 } from "@hoppscotch/data"
-import { pipe } from "fp-ts/function"
+import { computedWithControl } from "@vueuse/core"
+import { useService } from "dioc/vue"
 import * as TE from "fp-ts/TaskEither"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { pipe } from "fp-ts/function"
+import { cloneDeep } from "lodash-es"
+import { computed, nextTick, reactive, ref, watch } from "vue"
+import { GQLError } from "~/helpers/backend/GQLClient"
 import {
   createRequestInCollection,
   updateTeamRequest,
 } from "~/helpers/backend/mutations/TeamRequest"
 import { Picked } from "~/helpers/types/HoppPicked"
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
 import {
   cascadeParentCollectionForHeaderAuth,
   editGraphqlRequest,
   editRESTRequest,
   saveGraphqlRequestAs,
   saveRESTRequestAs,
 } from "~/newstore/collections"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { computedWithControl } from "@vueuse/core"
 import { platform } from "~/platform"
-import { useService } from "dioc/vue"
-import { RESTTabService } from "~/services/tab/rest"
 import { GQLTabService } from "~/services/tab/graphql"
+import { RESTTabService } from "~/services/tab/rest"
+import { TeamWorkspace } from "~/services/workspace.service"
 
 const t = useI18n()
 const toast = useToast()
 
 const RESTTabs = useService(RESTTabService)
 const GQLTabs = useService(GQLTabService)
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type CollectionType =
   | {
       type: "team-collections"
-      selectedTeam: SelectedTeam
+      selectedTeam: TeamWorkspace
     }
   | { type: "my-collections"; selectedTeam: undefined }
 
@@ -192,7 +190,7 @@ watch(
   }
 )
 
-const updateTeam = (newTeam: SelectedTeam) => {
+const updateTeam = (newTeam: TeamWorkspace) => {
   collectionsType.value.selectedTeam = newTeam
 }
 
@@ -493,7 +491,7 @@ const updateTeamCollectionOrFolder = (
   const data = {
     title: requestUpdated.name,
     request: JSON.stringify(requestUpdated),
-    teamID: collectionsType.value.selectedTeam.id,
+    teamID: collectionsType.value.selectedTeam.teamID,
   }
   pipe(
     createRequestInCollection(collectionID, data),

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -387,7 +387,6 @@ import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
 import { computed, PropType, Ref, toRef } from "vue"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { TeamCollection } from "~/helpers/teams/TeamCollection"
@@ -400,17 +399,16 @@ import * as O from "fp-ts/Option"
 import { Picked } from "~/helpers/types/HoppPicked.js"
 import { RESTTabService } from "~/services/tab/rest"
 import { useService } from "dioc/vue"
+import { TeamWorkspace } from "~/services/workspace.service"
 
 const t = useI18n()
 const colorMode = useColorMode()
 const tabs = useService(RESTTabService)
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type CollectionType =
   | {
       type: "team-collections"
-      selectedTeam: SelectedTeam
+      selectedTeam: TeamWorkspace
     }
   | { type: "my-collections"; selectedTeam: undefined }
 
@@ -614,7 +612,7 @@ const hasNoTeamAccess = computed(
   () =>
     props.collectionsType.type === "team-collections" &&
     (props.collectionsType.selectedTeam === undefined ||
-      props.collectionsType.selectedTeam.myRole === "VIEWER")
+      props.collectionsType.selectedTeam.role === "VIEWER")
 )
 
 const isSelected = ({

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -200,7 +200,7 @@ const toast = useToast()
 defineProps<{
   // Whether to activate the ability to pick items (activates 'select' events)
   saveRequest: boolean
-  picked: Picked
+  picked: Picked | null
 }>()
 
 const collections = useReadonlyStream(graphqlCollections$, [], "deep")

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

@@ -178,7 +178,6 @@ import { useI18n } from "@composables/i18n"
 import { Picked } from "~/helpers/types/HoppPicked"
 import { useReadonlyStream } from "~/composables/stream"
 import { useLocalState } from "~/newstore/localstate"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import {
@@ -245,7 +244,7 @@ import {
 } from "~/helpers/collection/collection"
 import { currentReorderingStatus$ } from "~/newstore/reordering"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
-import { WorkspaceService } from "~/services/workspace.service"
+import { TeamWorkspace, WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
@@ -274,16 +273,14 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (event: "select", payload: Picked | null): void
-  (event: "update-team", team: SelectedTeam): void
+  (event: "update-team", team: TeamWorkspace): void
   (event: "update-collection-type", type: CollectionType["type"]): void
 }>()
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type CollectionType =
   | {
       type: "team-collections"
-      selectedTeam: SelectedTeam
+      selectedTeam: TeamWorkspace
     }
   | { type: "my-collections"; selectedTeam: undefined }
 
@@ -330,9 +327,7 @@ const requestMoveLoading = ref<string[]>([])
 // TeamList-Adapter
 const workspaceService = useService(WorkspaceService)
 const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
-const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
-const teamListFetched = ref(false)
 
 // Team Collection Adapter
 const teamCollectionAdapter = new TeamCollectionAdapter(null)
@@ -378,7 +373,7 @@ watch(
   filterTexts,
   (newFilterText) => {
     if (collectionsType.value.type === "team-collections") {
-      const selectedTeamID = collectionsType.value.selectedTeam?.id
+      const selectedTeamID = collectionsType.value.selectedTeam?.teamID
 
       selectedTeamID &&
         debouncedSearch(newFilterText, selectedTeamID)?.catch(() => {})
@@ -435,28 +430,6 @@ onMounted(() => {
   }
 })
 
-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)
-      }
-    }
-  }
-)
-
-watch(
-  () => collectionsType.value.selectedTeam,
-  (newTeam) => {
-    if (newTeam) {
-      teamCollectionAdapter.changeTeamID(newTeam.id)
-    }
-  }
-)
-
 const switchToMyCollections = () => {
   collectionsType.value.type = "my-collections"
   collectionsType.value.selectedTeam = undefined
@@ -488,11 +461,12 @@ const expandTeamCollection = (collectionID: string) => {
   teamCollectionAdapter.expandCollection(collectionID)
 }
 
-const updateSelectedTeam = (team: SelectedTeam) => {
+const updateSelectedTeam = (team: TeamWorkspace) => {
   if (team) {
     collectionsType.value.type = "team-collections"
+    teamCollectionAdapter.changeTeamID(team.teamID)
     collectionsType.value.selectedTeam = team
-    REMEMBERED_TEAM_ID.value = team.id
+    REMEMBERED_TEAM_ID.value = team.teamID
     emit("update-team", team)
     emit("update-collection-type", "team-collections")
   }
@@ -501,23 +475,14 @@ const updateSelectedTeam = (team: SelectedTeam) => {
 const workspace = workspaceService.currentWorkspace
 
 // Used to switch collection type and team when user switch workspace in the global workspace switcher
-// Check if there is a teamID in the workspace, if yes, switch to team collections and select the team
-// If there is no teamID, switch to my collections
 watch(
-  () => {
-    const space = workspace.value
-    return space.type === "personal" ? undefined : space.teamID
-  },
-  (teamID) => {
-    if (teamID) {
-      const team = myTeams.value?.find((t) => t.id === teamID)
-      if (team) {
-        updateSelectedTeam(team)
-      }
-      return
+  workspace,
+  (newWorkspace) => {
+    if (newWorkspace.type === "personal") {
+      switchToMyCollections()
+    } else if (newWorkspace.type === "team") {
+      updateSelectedTeam(newWorkspace)
     }
-
-    return switchToMyCollections()
   },
   {
     immediate: true,
@@ -545,7 +510,7 @@ const hasTeamWriteAccess = computed(() => {
     return false
   }
 
-  const role = collectionsType.value.selectedTeam?.myRole
+  const role = collectionsType.value.selectedTeam?.role
   return role === "OWNER" || role === "EDITOR"
 })
 
@@ -760,7 +725,7 @@ const addNewRootCollection = (name: string) => {
     })
 
     pipe(
-      createNewRootCollection(name, collectionsType.value.selectedTeam.id),
+      createNewRootCollection(name, collectionsType.value.selectedTeam.teamID),
       TE.match(
         (err: GQLError<string>) => {
           toast.error(`${getErrorMessage(err)}`)
@@ -831,7 +796,7 @@ const onAddRequest = (requestName: string) => {
 
     const data = {
       request: JSON.stringify(newRequest),
-      teamID: collectionsType.value.selectedTeam.id,
+      teamID: collectionsType.value.selectedTeam.teamID,
       title: requestName,
     }
 
@@ -1158,7 +1123,7 @@ const duplicateRequest = (payload: {
 
     const data = {
       request: JSON.stringify(newRequest),
-      teamID: collectionsType.value.selectedTeam.id,
+      teamID: collectionsType.value.selectedTeam.teamID,
       title: `${request.name} - ${t("action.duplicate")}`,
     }
 

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(