Merge branch 'main' of https://github.com/hoppscotch/hoppscotch

components/graphql/type.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="p-2 m-2">
+  <div :id="`type_${gqlType.name}`" class="p-2 m-2">
     <div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
+      <span v-if="isInput" class="text-acColor font-normal">input </span>
       {{ gqlType.name }}
     </div>
     <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
@@ -26,6 +27,8 @@
 </style>
 
 <script>
+import { GraphQLInputObjectType } from "graphql"
+
 export default {
   props: {
     gqlType: {},
@@ -38,5 +41,10 @@ export default {
       return !!this.highlightedFields.find(({ name }) => name === field.name)
     },
   },
+  computed: {
+    isInput() {
+      return this.gqlType instanceof GraphQLInputObjectType
+    },
+  },
 }
 </script>

pages/graphql.vue

@@ -394,6 +394,7 @@
 <style scoped lang="scss">
 .gqlTabs {
   max-height: calc(100vh - 192px);
+  position: relative;
   @apply overflow-auto;
 }
 .gqlRunQuery {
@@ -589,16 +590,17 @@ export default {
     doPrettifyQuery() {
       this.$refs.queryEditor.prettifyQuery()
     },
-    handleJumpToType(type) {
+    async handleJumpToType(type) {
       this.$refs.gqlTabs.selectTab(this.$refs.typesTab)
+      await this.$nextTick()
 
       const rootTypeName = this.resolveRootType(type).name
 
       const target = document.getElementById(`type_${rootTypeName}`)
       if (target && this.settings.SCROLL_INTO_ENABLED) {
-        target.scrollIntoView({
-          behavior: "smooth",
-        })
+        this.$refs.gqlTabs.$el
+          .querySelector(".gqlTabs")
+          .scrollTo({ top: target.offsetTop, behavior: "smooth" })
       }
     },
     resolveRootType(type) {
@@ -742,7 +744,8 @@ export default {
         if (
           !typeMap[type].name.startsWith("__") &&
           ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
-          typeMap[type] instanceof gql.GraphQLObjectType
+          (typeMap[type] instanceof gql.GraphQLObjectType ||
+            typeMap[type] instanceof gql.GraphQLInputObjectType)
         ) {
           types.push(typeMap[type])
         }