fix: type isssue

package.json

@@ -11,7 +11,7 @@
     "dev": "pnpm -r do-dev",
     "gen-gql": "cross-env GQL_SCHEMA_EMIT_LOCATION='../../../gql-gen/backend-schema.gql' pnpm -r generate-gql-sdl",
     "generate": "pnpm -r do-build-prod",
-    "start": "http-server packages/hoppscotch-selfhost-web/dist -p 3000",
+    "start": "http-server packages/hoppscotch-web/dist -p 3000",
     "lint": "pnpm -r do-lint",
     "typecheck": "pnpm -r do-typecheck",
     "lintfix": "pnpm -r do-lintfix",

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

@@ -46,138 +46,93 @@
             }
           "
         />
-        <HoppSmartTabs
+        <div v-if="environmentType === 'my-environments'" class="flex flex-col">
-          v-model="selectedEnvTab"
+          <hr v-if="myEnvironments.length > 0" />
-          styles="sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary"
+          <HoppSmartItem
-          render-inactive-tabs
+            v-for="(gen, index) in myEnvironments"
-        >
+            :key="`gen-${index}`"
-          <HoppSmartTab
+            :label="gen.name"
-            :id="'my-environments'"
+            :info-icon="index === selectedEnv.index ? IconCheck : undefined"
-            :label="`${t('environment.my_environments')}`"
+            :active-info-icon="index === selectedEnv.index"
+            @click="
+              () => {
+                selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
+                hide()
+              }
+            "
+          />
+        </div>
+        <div v-else class="flex flex-col">
+          <div
+            v-if="teamEnvLoading"
+            class="flex flex-col items-center justify-center p-4"
           >
+            <HoppSmartSpinner class="my-4" />
+            <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+          </div>
+          <hr v-if="teamEnvironmentList.length > 0" />
+          <div v-if="isTeamSelected" class="flex flex-col">
             <HoppSmartItem
-              v-for="(gen, index) in myEnvironments"
+              v-for="(gen, index) in teamEnvironmentList"
-              :key="`gen-${index}`"
+              :key="`gen-team-${index}`"
-              :label="gen.name"
+              :label="gen.environment.name"
-              :info-icon="index === selectedEnv.index ? IconCheck : undefined"
+              :info-icon="
-              :active-info-icon="index === selectedEnv.index"
+                gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
+              "
+              :active-info-icon="gen.id === selectedEnv.teamEnvID"
               @click="
                 () => {
-                  selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
+                  selectedEnvironmentIndex = {
+                    type: 'TEAM_ENV',
+                    teamEnvID: gen.id,
+                    teamID: gen.teamID,
+                    environment: gen.environment,
+                  }
                   hide()
                 }
               "
             />
-            <div
+          </div>
-              v-if="myEnvironments.length === 0"
+          <div
-              class="flex flex-col items-center justify-center text-secondaryLight"
+            v-if="!teamEnvLoading && isAdapterError"
-            >
+            class="flex flex-col items-center py-4"
-              <img
-                :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                loading="lazy"
-                class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
-                :alt="`${t('empty.environments')}`"
-              />
-              <span class="pb-2 text-center">
-                {{ t("empty.environments") }}
-              </span>
-            </div>
-          </HoppSmartTab>
-          <HoppSmartTab
-            :id="'team-environments'"
-            :label="`${t('environment.team_environments')}`"
-            :disabled="!isTeamSelected || workspace.type === 'personal'"
           >
-            <div
+            <icon-lucide-help-circle class="mb-4 svg-icons" />
-              v-if="teamListLoading"
+            {{ errorMessage }}
-              class="flex flex-col items-center justify-center p-4"
+          </div>
-            >
+        </div>
-              <HoppSmartSpinner class="my-4" />
-              <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-            </div>
-            <div v-if="isTeamSelected" class="flex flex-col">
-              <HoppSmartItem
-                v-for="(gen, index) in teamEnvironmentList"
-                :key="`gen-team-${index}`"
-                :label="gen.environment.name"
-                :info-icon="
-                  gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
-                "
-                :active-info-icon="gen.id === selectedEnv.teamEnvID"
-                @click="
-                  () => {
-                    selectedEnvironmentIndex = {
-                      type: 'TEAM_ENV',
-                      teamEnvID: gen.id,
-                      teamID: gen.teamID,
-                      environment: gen.environment,
-                    }
-                    hide()
-                  }
-                "
-              />
-              <div
-                v-if="teamEnvironmentList.length === 0"
-                class="flex flex-col items-center justify-center text-secondaryLight"
-              >
-                <img
-                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                  loading="lazy"
-                  class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
-                  :alt="`${t('empty.environments')}`"
-                />
-                <span class="pb-2 text-center">
-                  {{ t("empty.environments") }}
-                </span>
-              </div>
-            </div>
-            <div
-              v-if="!teamListLoading && teamAdapterError"
-              class="flex flex-col items-center py-4"
-            >
-              <icon-lucide-help-circle class="mb-4 svg-icons" />
-              {{ getErrorMessage(teamAdapterError) }}
-            </div>
-          </HoppSmartTab>
-        </HoppSmartTabs>
       </div>
     </template>
   </tippy>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue"
+import { computed, ref } from "vue"
 import IconCheck from "~icons/lucide/check"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
-import { useReadonlyStream, useStream } from "~/composables/stream"
+import { Environment } from "@hoppscotch/data"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import { useStream } from "~/composables/stream"
 import {
-  environments$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import { workspaceStatus$ } from "~/newstore/workspace"
-import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
-import { useColorMode } from "@composables/theming"
 
 const t = useI18n()
 
-const colorMode = useColorMode()
-
 type EnvironmentType = "my-environments" | "team-environments"
 
-const myEnvironments = useReadonlyStream(environments$, [])
+const props = defineProps<{
-
+  environmentType: EnvironmentType
-const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+  myEnvironments: Environment[]
-
+  teamEnvironmentList: TeamEnvironment[]
-const teamEnvListAdapter = new TeamEnvironmentAdapter(undefined)
+  teamEnvLoading: boolean
-const teamListLoading = useReadonlyStream(teamEnvListAdapter.loading$, false)
+  isAdapterError: boolean
-const teamAdapterError = useReadonlyStream(teamEnvListAdapter.error$, null)
+  errorMessage: GQLError<string>
-const teamEnvironmentList = useReadonlyStream(
+  isTeamSelected: boolean
-  teamEnvListAdapter.teamEnvironmentList$,
+}>()
-  []
-)
 
 const selectedEnvironmentIndex = useStream(
   selectedEnvironmentIndex$,
@@ -185,35 +140,15 @@ const selectedEnvironmentIndex = useStream(
   setSelectedEnvironmentIndex
 )
 
-const isTeamSelected = computed(
-  () => workspace.value.type === "team" && workspace.value.teamID !== undefined
-)
-
-const selectedEnvTab = ref<EnvironmentType>("my-environments")
-
-watch(
-  () => workspace.value,
-  (newVal) => {
-    if (newVal.type === "personal") {
-      selectedEnvTab.value = "my-environments"
-    } else {
-      selectedEnvTab.value = "team-environments"
-      if (newVal.teamID) {
-        teamEnvListAdapter.changeTeamID(newVal.teamID)
-      }
-    }
-  }
-)
-
 const selectedEnv = computed(() => {
   if (selectedEnvironmentIndex.value.type === "MY_ENV") {
     return {
       type: "MY_ENV",
       index: selectedEnvironmentIndex.value.index,
-      name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
+      name: props.myEnvironments[selectedEnvironmentIndex.value.index].name,
     }
   } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-    const teamEnv = teamEnvironmentList.value.find(
+    const teamEnv = props.teamEnvironmentList.find(
       (env) =>
         env.id ===
         (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
@@ -235,17 +170,4 @@ const selectedEnv = computed(() => {
 
 // Template refs
 const tippyActions = ref<TippyComponent | null>(null)
-
-const getErrorMessage = (err: GQLError<string>) => {
-  if (err.type === "network_error") {
-    return t("error.network_error")
-  } else {
-    switch (err.error) {
-      case "team_environment/not_found":
-        return t("team_environment.not_found")
-      default:
-        return t("error.something_went_wrong")
-    }
-  }
-}
 </script>

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

@@ -4,6 +4,15 @@
       class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
     >
       <WorkspaceCurrent :section="t('tab.environments')" />
+      <EnvironmentsSelector
+        :environment-type="environmentType.type"
+        :my-environments="myEnvironments"
+        :team-env-loading="loading"
+        :team-environment-list="teamEnvironmentList"
+        :is-adapter-error="adapterError !== null"
+        :error-message="adapterError ? getErrorMessage(adapterError) : ''"
+        :is-team-selected="environmentType.selectedTeam !== undefined"
+      />
       <EnvironmentsMyEnvironment
         environment-index="Global"
         :environment="globalEnvironment"
@@ -37,11 +46,13 @@ import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "~/composables/i18n"
 import {
+  environments$,
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
+import { GQLError } from "~/helpers/backend/GQLClient"
 import { defineActionHandler } from "~/helpers/actions"
 import { workspaceStatus$ } from "~/newstore/workspace"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
@@ -136,19 +147,24 @@ onLoggedIn(() => {
 
 const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
 
-// Switch to my environments if workspace is personal and to team environments if workspace is team
+// Used to switch environment type and team when user switch workspace in the global workspace switcher
-// also resets selected environment if workspace is personal and the previous selected environment was a team environment
+// Check if there is a teamID in the workspace, if yes, switch to team environment and select the team
+// If there is no teamID, switch to my environment
 watch(workspace, (newWorkspace) => {
   if (newWorkspace.type === "personal") {
     switchToMyEnvironments()
+    setSelectedEnvironmentIndex({
+      type: "NO_ENV_SELECTED",
+    })
+  } else if (newWorkspace.type === "team") {
+    const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
+    updateSelectedTeam(team)
+
     if (selectedEnvironmentIndex.value.type !== "MY_ENV") {
       setSelectedEnvironmentIndex({
         type: "NO_ENV_SELECTED",
       })
     }
-  } else if (newWorkspace.type === "team") {
-    const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
-    updateSelectedTeam(team)
   }
 })
 
@@ -191,6 +207,8 @@ defineActionHandler(
   }
 )
 
+const myEnvironments = useReadonlyStream(environments$, [])
+
 const selectedEnvironmentIndex = useStream(
   selectedEnvironmentIndex$,
   { type: "NO_ENV_SELECTED" },
@@ -233,4 +251,17 @@ watch(
   },
   { deep: true }
 )
+
+const getErrorMessage = (err: GQLError<string>) => {
+  if (err.type === "network_error") {
+    return t("error.network_error")
+  } else {
+    switch (err.error) {
+      case "team_environment/not_found":
+        return t("team_environment.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
+  }
+}
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
     >
       <HoppButtonSecondary
         v-if="team === undefined || team.myRole === 'VIEWER'"

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

@@ -1,40 +0,0 @@
-import { distinctUntilChanged, pluck } from "rxjs"
-import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
-
-type SyncState = {
-  isInitialSync: boolean
-  shouldSync: boolean
-}
-
-type CurrentSyncingState = {
-  currentSyncingItem: SyncState
-}
-
-const initialState: CurrentSyncingState = {
-  currentSyncingItem: {
-    isInitialSync: false,
-    shouldSync: false,
-  },
-}
-
-const dispatchers = defineDispatchers({
-  changeCurrentSyncStatus(_, { syncItem }: { syncItem: SyncState }) {
-    return {
-      currentSyncingItem: syncItem,
-    }
-  },
-})
-
-export const currentSyncStore = new DispatchingStore(initialState, dispatchers)
-
-export const currentSyncingStatus$ = currentSyncStore.subject$.pipe(
-  pluck("currentSyncingItem"),
-  distinctUntilChanged()
-)
-
-export function changeCurrentSyncStatus(syncItem: SyncState) {
-  currentSyncStore.dispatch({
-    dispatcher: "changeCurrentSyncStatus",
-    payload: { syncItem },
-  })
-}

packages/hoppscotch-common/src/pages/index.vue

@@ -56,9 +56,6 @@
               @update:model-value="onTabUpdate"
             />
           </HoppSmartWindow>
-          <template #actions>
-            <EnvironmentsSelector class="h-full" />
-          </template>
         </HoppSmartWindows>
       </template>
       <template #sidebar>
@@ -87,7 +84,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, onBeforeMount } from "vue"
+import { ref, onMounted, onBeforeUnmount, watch, onBeforeMount } from "vue"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
 import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
 import { useRoute } from "vue-router"
@@ -123,11 +120,6 @@ import { useToast } from "~/composables/toast"
 import { PersistableRESTTabState } from "~/helpers/rest/tab"
 import { watchDebounced } from "@vueuse/core"
 import { oauthRedirect } from "~/helpers/oauth"
-import { useReadonlyStream } from "~/composables/stream"
-import {
-  changeCurrentSyncStatus,
-  currentSyncingStatus$,
-} from "~/newstore/syncing"
 
 const savingRequest = ref(false)
 const confirmingCloseForTabID = ref<string | null>(null)
@@ -139,10 +131,7 @@ const toast = useToast()
 
 const tabs = getActiveTabs()
 
-const confirmSync = useReadonlyStream(currentSyncingStatus$, {
+const confirmSync = ref(false)
-  isInitialSync: false,
-  shouldSync: true,
-})
 const tabStateForSync = ref<PersistableRESTTabState | null>(null)
 
 function bindRequestToURLParams() {
@@ -237,6 +226,29 @@ const onSaveModalClose = () => {
   }
 }
 
+watch(confirmSync, (newValue) => {
+  if (newValue) {
+    toast.show(t("confirm.sync"), {
+      duration: 0,
+      action: [
+        {
+          text: `${t("action.yes")}`,
+          onClick: (_, toastObject) => {
+            syncTabState()
+            toastObject.goAway(0)
+          },
+        },
+        {
+          text: `${t("action.no")}`,
+          onClick: (_, toastObject) => {
+            toastObject.goAway(0)
+          },
+        },
+      ],
+    })
+  }
+})
+
 const syncTabState = () => {
   if (tabStateForSync.value) loadTabsFromPersistedState(tabStateForSync.value)
 }
@@ -275,35 +287,6 @@ function startTabStateSync(): Subscription {
   return sub
 }
 
-const showSyncToast = () => {
-  toast.show(t("confirm.sync"), {
-    duration: 0,
-    action: [
-      {
-        text: `${t("action.yes")}`,
-        onClick: (_, toastObject) => {
-          syncTabState()
-          changeCurrentSyncStatus({
-            isInitialSync: true,
-            shouldSync: true,
-          })
-          toastObject.goAway(0)
-        },
-      },
-      {
-        text: `${t("action.no")}`,
-        onClick: (_, toastObject) => {
-          changeCurrentSyncStatus({
-            isInitialSync: true,
-            shouldSync: false,
-          })
-          toastObject.goAway(0)
-        },
-      },
-    ],
-  })
-}
-
 function setupTabStateSync() {
   const route = useRoute()
 
@@ -319,15 +302,9 @@ function setupTabStateSync() {
       const tabStateFromSync =
         await platform.sync.tabState.loadTabStateFromSync()
 
-      if (tabStateFromSync && !confirmSync.value.isInitialSync) {
+      if (tabStateFromSync) {
         tabStateForSync.value = tabStateFromSync
-        showSyncToast()
+        confirmSync.value = true
-        // Have to set isInitialSync to true here because the toast is shown
-        // and the user does not click on any of the actions
-        changeCurrentSyncStatus({
-          isInitialSync: true,
-          shouldSync: false,
-        })
       }
     }
 

packages/hoppscotch-ui/src/components/smart/Windows.vue

@@ -100,9 +100,7 @@
         </div>
       </div>
 
-      <div v-if="hasActions" class="w-64">
+      <slot name="actions" />
-        <slot name="actions" />
-      </div>
 
       <input
         type="range"
@@ -113,10 +111,10 @@
         :class="{
           '!block': scrollThumb.show,
         }"
-        :style="[
+        :style="{
-          `--thumb-width: ${scrollThumb.width}px`,
+          '--thumb-width': scrollThumb.width + 'px',
-          `width: calc(100% - ${hasActions ? '19rem' : '3rem'})`,
+        }"
-        ]"
+        style="width: calc(100% - 3rem)"
         id="myRange"
       />
     </div>
@@ -142,7 +140,6 @@ import {
   inject,
   watch,
   nextTick,
-  useSlots,
 } from "vue"
 import { useElementSize } from "@vueuse/core"
 import type { Slot } from "vue"
@@ -194,12 +191,6 @@ const emit = defineEmits<{
   (e: "addTab"): void
 }>()
 
-const slots = useSlots()
-
-const hasActions = computed(() => {
-  return !!slots.actions
-})
-
 const throwError = (message: string): never => {
   throw new Error(message)
 }