fix: team environments import (#2770)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

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

@@ -25,7 +25,7 @@
             <span
               v-tippy="{ theme: 'tooltip' }"
               :title="`${t('collection.select_team')}`"
-              class="bg-transparent border-t border-dividerLight select-wrapper"
+              class="bg-transparent border-b border-dividerLight select-wrapper"
             >
               <ButtonSecondary
                 v-if="environmentType.selectedTeam"

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

@@ -116,7 +116,6 @@ import {
   environments$,
   replaceEnvironments,
   appendEnvironments,
-  getSelectedEnvironmentType,
 } from "~/newstore/environments"
 import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
 import * as TE from "fp-ts/TaskEither"
@@ -129,6 +128,7 @@ const props = defineProps<{
   show: boolean
   teamEnvironments?: TeamEnvironment[]
   teamId?: string | undefined
+  environmentType: "MY_ENV" | "TEAM_ENV"
 }>()
 
 const emit = defineEmits<{
@@ -143,23 +143,13 @@ const loading = ref(false)
 const myEnvironments = useReadonlyStream(environments$, [])
 const currentUser = useReadonlyStream(currentUser$, null)
 
-const selectedEnvType = getSelectedEnvironmentType()
-
-const currentSelectedEnvionmentType = computed(() => {
-  if (selectedEnvType === "MY_ENV" || props.teamEnvironments === undefined) {
-    return "MY_ENV"
-  } else {
-    return "TEAM_ENV"
-  }
-})
-
 // Template refs
 const tippyActions = ref<TippyComponent | null>(null)
 const inputChooseFileToImportFrom = ref<HTMLInputElement>()
 
 const environmentJson = computed(() => {
   if (
-    currentSelectedEnvionmentType.value === "TEAM_ENV" &&
+    props.environmentType === "TEAM_ENV" &&
     props.teamEnvironments !== undefined
   ) {
     const teamEnvironments = props.teamEnvironments.map(
@@ -233,7 +223,7 @@ const readEnvironmentGist = async () => {
     }
     const environments = JSON.parse(Object.values(files)[0].content)
 
-    if (currentSelectedEnvionmentType.value === "MY_ENV") {
+    if (props.environmentType === "MY_ENV") {
       replaceEnvironments(environments)
       fileImported()
     } else {
@@ -258,9 +248,24 @@ const importToTeams = async (content: Environment[]) => {
   loading.value = true
   for (const [i, env] of content.entries()) {
     if (i === content.length - 1) {
-      loading.value = false
-      hideModal()
-      fileImported()
+      await pipe(
+        createTeamEnvironment(
+          JSON.stringify(env.variables),
+          props.teamId as string,
+          env.name
+        ),
+        TE.match(
+          (err: GQLError<string>) => {
+            console.error(err)
+            toast.error(`${getErrorMessage(err)}`)
+          },
+          () => {
+            loading.value = false
+            hideModal()
+            fileImported()
+          }
+        )
+      )()
     } else {
       await pipe(
         createTeamEnvironment(
@@ -326,7 +331,7 @@ const importFromJSON = () => {
 }
 
 const importFromHoppscotch = (environments: Environment[]) => {
-  if (currentSelectedEnvionmentType.value === "MY_ENV") {
+  if (props.environmentType === "MY_ENV") {
     appendEnvironments(environments)
     fileImported()
   } else {

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

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="flex justify-between flex-1 border-b border-dividerLight">
+    <div
+      class="sticky z-10 top-upperPrimaryStickyFold flex justify-between flex-1 border-b border-dividerLight bg-primary"
+    >
       <ButtonSecondary
         :icon="IconPlus"
         :label="`${t('action.new')}`"
@@ -53,6 +55,7 @@
       <ButtonSecondary
         :label="`${t('add.new')}`"
         filled
+        outline
         class="mb-4"
         @click="displayModalAdd(true)"
       />
@@ -65,6 +68,7 @@
     />
     <EnvironmentsImportExport
       :show="showModalImportExport"
+      environment-type="MY_ENV"
       @hide-modal="displayModalImportExport(false)"
     />
   </div>

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

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="flex justify-between flex-1 border-y border-dividerLight">
+    <div
+      class="sticky z-10 top-upperSecondaryStickyFold flex justify-between flex-1 border-b border-dividerLight bg-primary"
+    >
       <ButtonSecondary
         v-if="team === undefined || team.myRole === 'VIEWER'"
         v-tippy="{ theme: 'tooltip' }"
@@ -68,6 +70,7 @@
         v-else
         :label="`${t('add.new')}`"
         filled
+        outline
         class="mb-4"
         @click="displayModalAdd(true)"
       />
@@ -106,6 +109,7 @@
       :show="showModalImportExport"
       :team-environments="teamEnvironments"
       :team-id="team?.id"
+      environment-type="TEAM_ENV"
       @hide-modal="displayModalImportExport(false)"
     />
   </div>