Merge pull request #479 from AndrewBastin/feat/graphql_highlight

GraphQL Type Highlight and Links
hoppscotch · Jan 9, 2020 · 355688a · 355688a
2 parents 725fa31 + f5efb42
commit 355688a
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 9 deletions.
diff --git a/components/graphql/argument.vue b/components/graphql/argument.vue
@@ -0,0 +1,44 @@
+<template>
+  <span>
+    <span class="argumentName">
+      {{ argName }}
+    </span>
+    :
+    <typelink 
+      :type="argType"
+      :jumpTypeCallback="jumpCallback"
+    />
+  </span>
+</template>
+
+<style>
+</style>
+
+<script>
+import typelink from './typelink';
+
+export default {
+  components: {
+    typelink: typelink
+  },
+
+  props: {
+    gqlArg: Object
+  },
+
+  computed: {
+    argName() {
+      return this.gqlArg.name;
+    },
+    argType() {
+      return this.gqlArg.type;
+    }
+  },
+
+  methods: {
+    jumpCallback(typeName) {
+
+    }
+  }
+}
+</script>
diff --git a/components/graphql/field.vue b/components/graphql/field.vue
@@ -1,13 +1,26 @@
 <template>
   <div class="field-box">
-    <div class="field-title">{{ fieldString }}</div>
+    <div class="field-title">
+      {{ fieldName }}
+      <span v-if="fieldArgs.length > 0">
+        (
+          <span v-for="(field, index) in fieldArgs" :key="index">
+            {{ field.name }}: <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
+            <span v-if="index !== fieldArgs.length - 1">
+              ,
+            </span>
+          </span>
+        )
+      </span>: <typelink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
+    </div>
     <div class="field-desc" v-if="gqlField.description">
       {{ gqlField.description }}
     </div>
 
     <div class="field-deprecated" v-if="gqlField.isDeprecated">
       DEPRECATED
     </div>
+
   </div>
 </template>
 
@@ -36,9 +49,17 @@
 </style>
 
 <script>
+import typelink from './typelink';
+
 export default {
+  components: {
+    typelink: typelink
+  },
+
   props: {
-    gqlField: Object
+    gqlField: Object,
+
+    jumpTypeCallback: Function
   },
 
   computed: {
@@ -56,6 +77,14 @@ export default {
       return `${
         this.gqlField.name
       }${argsString}: ${this.gqlField.type.toString()}`;
+    },
+
+    fieldName() {
+      return this.gqlField.name;
+    },
+
+    fieldArgs() {
+      return this.gqlField.args || [];
     }
   }
 };

diff --git a/components/graphql/type.vue b/components/graphql/type.vue
@@ -8,7 +8,7 @@
     <div v-if="gqlType.getFields">
       <h5>FIELDS</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
-        <gql-field :gqlField="field" />
+        <gql-field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
       </div>
     </div>
   </div>
@@ -36,7 +36,9 @@ export default {
     "gql-field": () => import("./field")
   },
   props: {
-    gqlType: {}
+    gqlType: {},
+
+    jumpTypeCallback: Function
   }
 };
 </script>
diff --git a/components/graphql/typelink.vue b/components/graphql/typelink.vue
@@ -0,0 +1,33 @@
+<template>
+  <span class="typelink" @click="jumpToType">{{ typeString }}</span>
+</template>
+
+<style>
+  .typelink {
+    color: red
+  }
+</style>
+
+<script>
+export default {
+  props: {
+    gqlType: null,
+
+    // (typeName: string) => void
+    jumpTypeCallback: Function
+  },
+
+  computed: {
+    typeString() {
+      return this.gqlType.toString();
+    }
+  },
+
+  methods: {
+    jumpToType() {
+      this.jumpTypeCallback(this.gqlType);
+    }
+  }
+}
+</script>
+
diff --git a/pages/graphql.vue b/pages/graphql.vue
@@ -288,7 +288,7 @@
             </label>
             <div v-if="queryFields.length > 0" class="tab">
               <div v-for="field in queryFields" :key="field.name">
-                <gql-field :gqlField="field" />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -304,7 +304,7 @@
             </label>
             <div v-if="mutationFields.length > 0" class="tab">
               <div v-for="field in mutationFields" :key="field.name">
-                <gql-field :gqlField="field" />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -320,7 +320,7 @@
             </label>
             <div v-if="subscriptionFields.length > 0" class="tab">
               <div v-for="field in subscriptionFields" :key="field.name">
-                <gql-field :gqlField="field" />
+                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
 
@@ -335,8 +335,8 @@
               {{ $t("types") }}
             </label>
             <div v-if="gqlTypes.length > 0" class="tab">
-              <div v-for="type in gqlTypes" :key="type.name">
-                <gql-type :gqlType="type" />
+              <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
+                <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
               </div>
             </div>
           </section>
@@ -563,6 +563,24 @@ export default {
     }
   },
   methods: {
+    handleJumpToType(type) {
+      const typesTab = document.getElementById("gqltypes-tab");
+      typesTab.checked = true;
+
+      const rootTypeName = this.resolveRootType(type).name;
+
+      const target = document.getElementById(`type_${rootTypeName}`);
+      if (target) {
+        target.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
+    },
+    resolveRootType(type) {
+      let t = type;
+      while (t.ofType != null) t = t.ofType;
+      return t;
+    },
     copySchema() {
       this.$refs.copySchemaCode.innerHTML = this.doneButton;
       const aux = document.createElement("textarea");