From 7ea482b7ed1ec3c055ab494df3fa387b61f1832c Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 24 Mar 2022 19:59:59 +0530
Subject: [PATCH] fix: tab switching side effect

---
 .../components/collections/ChooseType.vue     |   6 +-
 .../components/graphql/Sidebar.vue            | 128 ++++++++----------
 2 files changed, 62 insertions(+), 72 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/ChooseType.vue b/packages/hoppscotch-app/components/collections/ChooseType.vue
index c5f366495..ab8fcc489 100644
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="show">
-    <SmartTabs :id="'collections_tab'" v-model="collectionTab">
+    <SmartTabs :id="'collections_tab'" v-model="selectedCollectionTab">
       <SmartTab
         :id="'my-collections'"
         :label="`${$t('collection.my_collections')}`"
@@ -75,7 +75,7 @@ type TeamData = GetMyTeamsQuery["myTeams"][number]
 
 type CollectionTabs = "my-collections" | "team-collections"
 
-const collectionTab = ref<CollectionTabs>("my-collections")
+const selectedCollectionTab = ref<CollectionTabs>("my-collections")
 
 defineProps<{
   doc: boolean
@@ -116,7 +116,7 @@ const updateSelectedTeam = (team: TeamData | undefined) => {
 }
 
 watch(
-  () => collectionTab.value,
+  () => selectedCollectionTab.value,
   (newValue: string) => {
     updateCollectionsType(newValue)
   }
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index 34a28e58d..3328cc424 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -11,7 +11,6 @@
         @useHistory="handleUseHistory"
       />
     </SmartTab>
-
     <SmartTab
       :id="'collections'"
       icon="folder"
@@ -19,7 +18,6 @@
     >
       <CollectionsGraphql />
     </SmartTab>
-
     <SmartTab
       :id="'docs'"
       icon="book-open"
@@ -64,75 +62,70 @@
           </div>
         </div>
         <SmartTabs
-          ref="gqlTabs"
           v-model="selectedGqlTab"
           styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
         >
-          <div class="gqlTabs">
-            <SmartTab
-              v-if="queryFields.length > 0"
-              :id="'queries'"
-              :label="`${t('tab.queries')}`"
-              class="divide-y divide-dividerLight"
-            >
-              <GraphqlField
-                v-for="(field, index) in filteredQueryFields"
-                :key="`field-${index}`"
-                :gql-field="field"
-                :jump-type-callback="handleJumpToType"
-                class="p-4"
-              />
-            </SmartTab>
-            <SmartTab
-              v-if="mutationFields.length > 0"
-              :id="'mutations'"
-              :label="`${t('graphql.mutations')}`"
-              class="divide-y divide-dividerLight"
-            >
-              <GraphqlField
-                v-for="(field, index) in filteredMutationFields"
-                :key="`field-${index}`"
-                :gql-field="field"
-                :jump-type-callback="handleJumpToType"
-                class="p-4"
-              />
-            </SmartTab>
-            <SmartTab
-              v-if="subscriptionFields.length > 0"
-              :id="'subscriptions'"
-              :label="`${t('graphql.subscriptions')}`"
-              class="divide-y divide-dividerLight"
-            >
-              <GraphqlField
-                v-for="(field, index) in filteredSubscriptionFields"
-                :key="`field-${index}`"
-                :gql-field="field"
-                :jump-type-callback="handleJumpToType"
-                class="p-4"
-              />
-            </SmartTab>
-            <SmartTab
-              v-if="graphqlTypes.length > 0"
-              :id="'types'"
-              ref="typesTab"
-              :label="`${t('tab.types')}`"
-              class="divide-y divide-dividerLight"
-            >
-              <GraphqlType
-                v-for="(type, index) in filteredGraphqlTypes"
-                :key="`type-${index}`"
-                :gql-type="type"
-                :gql-types="graphqlTypes"
-                :is-highlighted="isGqlTypeHighlighted(type)"
-                :highlighted-fields="getGqlTypeHighlightedFields(type)"
-                :jump-type-callback="handleJumpToType"
-              />
-            </SmartTab>
-          </div>
+          <SmartTab
+            v-if="queryFields.length > 0"
+            :id="'queries'"
+            :label="`${t('tab.queries')}`"
+            class="divide-y divide-dividerLight"
+          >
+            <GraphqlField
+              v-for="(field, index) in filteredQueryFields"
+              :key="`field-${index}`"
+              :gql-field="field"
+              :jump-type-callback="handleJumpToType"
+              class="p-4"
+            />
+          </SmartTab>
+          <SmartTab
+            v-if="mutationFields.length > 0"
+            :id="'mutations'"
+            :label="`${t('graphql.mutations')}`"
+            class="divide-y divide-dividerLight"
+          >
+            <GraphqlField
+              v-for="(field, index) in filteredMutationFields"
+              :key="`field-${index}`"
+              :gql-field="field"
+              :jump-type-callback="handleJumpToType"
+              class="p-4"
+            />
+          </SmartTab>
+          <SmartTab
+            v-if="subscriptionFields.length > 0"
+            :id="'subscriptions'"
+            :label="`${t('graphql.subscriptions')}`"
+            class="divide-y divide-dividerLight"
+          >
+            <GraphqlField
+              v-for="(field, index) in filteredSubscriptionFields"
+              :key="`field-${index}`"
+              :gql-field="field"
+              :jump-type-callback="handleJumpToType"
+              class="p-4"
+            />
+          </SmartTab>
+          <SmartTab
+            v-if="graphqlTypes.length > 0"
+            :id="'types'"
+            :label="`${t('tab.types')}`"
+            class="divide-y divide-dividerLight"
+          >
+            <GraphqlType
+              v-for="(type, index) in filteredGraphqlTypes"
+              :key="`type-${index}`"
+              :gql-type="type"
+              :gql-types="graphqlTypes"
+              :is-highlighted="isGqlTypeHighlighted(type)"
+              :highlighted-fields="getGqlTypeHighlightedFields(type)"
+              :jump-type-callback="handleJumpToType"
+            />
+          </SmartTab>
         </SmartTabs>
       </div>
     </SmartTab>
-
     <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
       <div
         v-if="schemaString"
@@ -318,9 +311,6 @@ const copySchemaIcon = ref("copy")
 
 const graphqlFieldsFilterText = ref("")
 
-const gqlTabs = ref<any | null>(null)
-const typesTab = ref<any | null>(null)
-
 const filteredQueryFields = computed(() => {
   return getFilteredGraphqlFields(
     graphqlFieldsFilterText.value,
@@ -370,7 +360,7 @@ const getGqlTypeHighlightedFields = (gqlType: GraphQLType) => {
 }
 
 const handleJumpToType = async (type: GraphQLType) => {
-  gqlTabs.value.selectTab(typesTab.value)
+  selectedGqlTab.value = "types"
   await nextTick()
 
   const rootTypeName = resolveRootType(type).name