From c9e542d6d590e5892c39f8b464f288285ebef705 Mon Sep 17 00:00:00 2001
From: "Igor Stuzhuk (KoHcoJlb)" <fujitsuigor@gmail.com>
Date: Sun, 7 Feb 2021 19:07:09 +0200
Subject: [PATCH 1/4] graphql: show enums and interfaces

make scalars not clickable
---
 components/graphql/type.vue     | 36 ++++++++++++++++++++++++++++++++-
 components/graphql/typelink.vue | 17 +++++++++++++++-
 lang/en-US.json                 |  3 +++
 pages/graphql.vue               | 17 +++++++++-------
 4 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index 3634fc2d7..8e5ce989b 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -2,11 +2,25 @@
   <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>
+      <span v-else-if="isInterface" class="text-acColor font-normal">interface </span>
+      <span v-else-if="isEnum" class="text-acColor font-normal">enum </span>
       {{ gqlType.name }}
     </div>
     <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
       {{ gqlType.description }}
     </div>
+    <div v-if="interfaces.length > 0" class="mb-2">
+      <h5>{{ $t("interfaces") }}</h5>
+      <div v-for="gqlInterface in interfaces" :key="gqlInterface.name" class="m-2 ml-4">
+        <typelink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
+      </div>
+    </div>
+    <div v-if="children.length > 0" class="mb-2">
+      <h5>{{ $t("children") }}</h5>
+      <div v-for="child in children" :key="child.name" class="m-2 ml-4">
+        <typelink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
+      </div>
+    </div>
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
@@ -17,6 +31,10 @@
         />
       </div>
     </div>
+    <div v-if="isEnum">
+      <h5>{{ $t("values") }}</h5>
+      <div v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
+    </div>
   </div>
 </template>
 
@@ -27,11 +45,12 @@
 </style>
 
 <script>
-import { GraphQLInputObjectType } from "graphql"
+import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType } from "graphql"
 
 export default {
   props: {
     gqlType: {},
+    gqlTypes: Array,
     jumpTypeCallback: Function,
     isHighlighted: { type: Boolean, default: false },
     highlightedFields: { type: Array, default: () => [] },
@@ -45,6 +64,21 @@ export default {
     isInput() {
       return this.gqlType instanceof GraphQLInputObjectType
     },
+    isInterface() {
+      return this.gqlType instanceof GraphQLInterfaceType
+    },
+    isEnum() {
+      return this.gqlType instanceof GraphQLEnumType
+    },
+    interfaces() {
+      let type = this.gqlType
+      return (type.getInterfaces && type.getInterfaces()) || []
+    },
+    children() {
+      return this.gqlTypes.filter(
+        (type) => type.getInterfaces && type.getInterfaces().includes(this.gqlType)
+      )
+    },
   },
 }
 </script>
diff --git a/components/graphql/typelink.vue b/components/graphql/typelink.vue
index b9af63cb1..7e0b50de9 100644
--- a/components/graphql/typelink.vue
+++ b/components/graphql/typelink.vue
@@ -1,10 +1,16 @@
 <template>
-  <span class="font-mono font-normal cursor-pointer text-acColor" @click="jumpToType">
+  <span
+    :class="{ 'cursor-pointer': !isScalar }"
+    class="font-mono font-normal text-acColor"
+    @click="jumpToType"
+  >
     {{ typeString }}
   </span>
 </template>
 
 <script>
+import { GraphQLScalarType } from "graphql"
+
 export default {
   props: {
     gqlType: null,
@@ -16,12 +22,21 @@ export default {
     typeString() {
       return this.gqlType.toString()
     },
+    isScalar() {
+      return this.resolveRootType(this.gqlType) instanceof GraphQLScalarType
+    },
   },
 
   methods: {
     jumpToType() {
+      if (this.isScalar) return
       this.jumpTypeCallback(this.gqlType)
     },
+    resolveRootType(type) {
+      let t = type
+      while (t.ofType != null) t = t.ofType
+      return t
+    },
   },
 }
 </script>
diff --git a/lang/en-US.json b/lang/en-US.json
index e18fc8fc8..2fadffde3 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -199,7 +199,10 @@
   "docs": "Docs",
   "reset_default": "Reset to default",
   "fields": "FIELDS",
+  "interfaces": "INTERFACES",
+  "children": "CHILDREN",
   "deprecated": "DEPRECATED",
+  "values": "VALUES",
   "add_one_header": "(add at least one header)",
   "add_one_parameter": "(add at least one parameter)",
   "header_count": "header {count}",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 3bc80175b..e7e19f065 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -364,6 +364,7 @@
                   <div v-for="type in filteredGraphqlTypes" :key="type.name">
                     <type
                       :gqlType="type"
+                      :gqlTypes="graphqlTypes"
                       :isHighlighted="isGqlTypeHighlighted({ gqlType: type })"
                       :highlightedFields="getGqlTypeHighlightedFields({ gqlType: type })"
                       :jumpTypeCallback="handleJumpToType"
@@ -740,14 +741,17 @@ export default {
         ? schema.getSubscriptionType().name
         : ""
 
-      for (const type in typeMap) {
+      for (const typeName in typeMap) {
+        let type = typeMap[typeName]
         if (
-          !typeMap[type].name.startsWith("__") &&
-          ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
-          (typeMap[type] instanceof gql.GraphQLObjectType ||
-            typeMap[type] instanceof gql.GraphQLInputObjectType)
+          !type.name.startsWith("__") &&
+          ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(type.name) &&
+          (type instanceof gql.GraphQLObjectType ||
+            type instanceof gql.GraphQLInputObjectType ||
+            type instanceof gql.GraphQLEnumType ||
+            type instanceof gql.GraphQLInterfaceType)
         ) {
-          types.push(typeMap[type])
+          types.push(type)
         }
       }
       this.graphqlTypes = types
@@ -828,7 +832,6 @@ export default {
       }
 
       this.$nuxt.$loading.finish()
-
     },
     async getSchema() {
       const startTime = Date.now()

From 09719a4ad37245c54ba694679eafcfc1c3244441 Mon Sep 17 00:00:00 2001
From: "Igor Stuzhuk (KoHcoJlb)" <fujitsuigor@gmail.com>
Date: Mon, 8 Feb 2021 14:02:01 +0200
Subject: [PATCH 2/4] fix type tests

---
 components/graphql/__tests__/type.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/graphql/__tests__/type.spec.js b/components/graphql/__tests__/type.spec.js
index 4960a9b4f..50610d2c2 100644
--- a/components/graphql/__tests__/type.spec.js
+++ b/components/graphql/__tests__/type.spec.js
@@ -13,7 +13,7 @@ const factory = (props) =>
     mocks: {
       $t: (text) => text,
     },
-    propsData: props,
+    propsData: { gqlTypes: [], ...props },
     stubs: ["field"],
   })
 

From e8e855a36ce830bcd812b747836555e8feab307c Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 8 Feb 2021 21:08:30 -0500
Subject: [PATCH 3/4] Added tests for the added functionality in type.vue and
 typelink.vue

---
 components/graphql/__tests__/type.spec.js     | 161 +++++++++++++++++-
 components/graphql/__tests__/typelink.spec.js |  14 ++
 2 files changed, 174 insertions(+), 1 deletion(-)

diff --git a/components/graphql/__tests__/type.spec.js b/components/graphql/__tests__/type.spec.js
index 50610d2c2..da094ca71 100644
--- a/components/graphql/__tests__/type.spec.js
+++ b/components/graphql/__tests__/type.spec.js
@@ -1,6 +1,7 @@
 import type from "../type"
 
 import { shallowMount } from "@vue/test-utils"
+import {GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType, GraphQLObjectType} from "graphql"
 
 const gqlType = {
   name: "TestType",
@@ -14,7 +15,7 @@ const factory = (props) =>
       $t: (text) => text,
     },
     propsData: { gqlTypes: [], ...props },
-    stubs: ["field"],
+    stubs: ["field", "typelink"],
   })
 
 describe("type", () => {
@@ -72,4 +73,162 @@ describe("type", () => {
 
     expect(wrapper.findAll("field-stub").length).toEqual(2)
   })
+
+  test("prepends 'input' to type name for Input Types", () => {
+    const testType = new GraphQLInputObjectType({
+      name: "TestType",
+      fields: {}
+    })
+
+    const wrapper = factory({
+      gqlType: testType 
+    })
+
+    expect(wrapper.find(".type-title").text().startsWith("input")).toEqual(true)
+  })
+
+  test("prepends 'interface' to type name for Interface Types", () => {
+    const testType = new GraphQLInterfaceType({
+      name: "TestType",
+      fields: {}
+    })
+
+    const wrapper = factory({
+      gqlType: testType
+    })
+
+    expect(wrapper.find(".type-title").text().startsWith("interface")).toEqual(true)
+  })
+
+  test("prepends 'enum' to type name for Enum Types", () => {
+    const testType = new GraphQLEnumType({
+      name: "TestType",
+      values: {}
+    })
+
+    const wrapper = factory({
+      gqlType: testType
+    })
+
+    expect(wrapper.find(".type-title").text().startsWith("enum")).toEqual(true)
+  })
+
+  test("'interfaces' computed property returns all the related interfaces", () => {
+    const testInterfaceA = new GraphQLInterfaceType({
+      name: "TestInterfaceA",
+      fields: {}
+    })
+    const testInterfaceB = new GraphQLInterfaceType({
+      name: "TestInterfaceB",
+      fields: {}
+    })
+
+    const type = new GraphQLObjectType({
+      name: "TestType",
+      interfaces: [testInterfaceA, testInterfaceB],
+      fields: {}
+    })
+
+    const wrapper = factory({
+      gqlType: type
+    })
+
+    expect(wrapper.vm.interfaces).toEqual(expect.arrayContaining([testInterfaceA, testInterfaceB]))
+  })
+
+  test("'interfaces' computed property returns an empty array if there are no interfaces", () => {
+    const type = new GraphQLObjectType({
+      name: "TestType",
+      fields: {}
+    })
+
+    const wrapper = factory({
+      gqlType: type
+    })
+
+    expect(wrapper.vm.interfaces).toEqual([])
+  })
+
+  test("'interfaces' computed property returns an empty array if the type is an enum", () => {
+    const type = new GraphQLEnumType({
+      name: "TestType",
+      values: {}
+    })
+
+    const wrapper = factory({
+      gqlType: type
+    })
+
+    expect(wrapper.vm.interfaces).toEqual([])
+  })
+
+  test("'children' computed property returns all the types implementing an interface", () => {
+    const testInterface = new GraphQLInterfaceType({
+      name: "TestInterface",
+      fields: {}
+    })
+
+    const typeA = new GraphQLObjectType({
+      name: "TypeA",
+      interfaces: [testInterface],
+      fields: {}
+    })
+
+    const typeB = new GraphQLObjectType({
+      name: "TypeB",
+      interfaces: [testInterface],
+      fields: {}
+    })
+
+    const wrapper = factory({
+      gqlType: testInterface,
+      gqlTypes: [testInterface, typeA, typeB]
+    })
+
+    expect(wrapper.vm.children).toEqual(expect.arrayContaining([typeA, typeB]))
+  })
+
+  test("'children' computed property returns an empty array if there are no types implementing the interface", () => {
+    const testInterface = new GraphQLInterfaceType({
+      name: "TestInterface",
+      fields: {}
+    })
+
+    const typeA = new GraphQLObjectType({
+      name: "TypeA",
+      fields: {}
+    })
+
+    const typeB = new GraphQLObjectType({
+      name: "TypeB",
+      fields: {}
+    })
+
+    const wrapper = factory({
+      gqlType: testInterface,
+      gqlTypes: [testInterface, typeA, typeB]
+    })
+
+    expect(wrapper.vm.children).toEqual([])
+  })
+
+  test("'children' computed property returns an empty array if the type is an enum", () => {
+    const testInterface = new GraphQLInterfaceType({
+      name: "TestInterface",
+      fields: {}
+    })
+
+    const testType = new GraphQLEnumType({
+      name: "TestEnum",
+      values: {}
+    })
+
+    const wrapper = factory({
+      gqlType: testType,
+      gqlTypes: [testInterface, testType]
+    })
+
+    expect(wrapper.vm.children).toEqual([])
+  })
+
 })
diff --git a/components/graphql/__tests__/typelink.spec.js b/components/graphql/__tests__/typelink.spec.js
index 0a3a60885..58761fd8a 100644
--- a/components/graphql/__tests__/typelink.spec.js
+++ b/components/graphql/__tests__/typelink.spec.js
@@ -1,5 +1,6 @@
 import typelink from "../typelink"
 import { shallowMount } from "@vue/test-utils"
+import {GraphQLInt} from "graphql"
 
 const factory = (props) =>
   shallowMount(typelink, {
@@ -33,6 +34,19 @@ describe("typelink", () => {
     expect(callback).toHaveBeenCalledTimes(1)
   })
 
+  test("jumpToType callback is not called if the root type is a scalar", async () => {
+    const callback = jest.fn()
+
+    const wrapper = factory({
+      gqlType: GraphQLInt,
+      jumpTypeCallback: callback
+    })
+
+    await wrapper.trigger("click")
+
+    expect(callback).not.toHaveBeenCalled()
+  })
+
   test("link text is the type string", () => {
     const wrapper = factory({
       gqlType,

From d333a44e1164bd0fc252c18b02c25c6ad5c0c3fc Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 8 Feb 2021 21:11:18 -0500
Subject: [PATCH 4/4] Minor cleanup of type.vue

---
 components/graphql/type.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index 8e5ce989b..6a40387fb 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -33,7 +33,7 @@
     </div>
     <div v-if="isEnum">
       <h5>{{ $t("values") }}</h5>
-      <div v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
+      <div :key="value.name" v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
     </div>
   </div>
 </template>
@@ -71,8 +71,7 @@ export default {
       return this.gqlType instanceof GraphQLEnumType
     },
     interfaces() {
-      let type = this.gqlType
-      return (type.getInterfaces && type.getInterfaces()) || []
+      return (this.gqlType.getInterfaces && this.gqlType.getInterfaces()) || []
     },
     children() {
       return this.gqlTypes.filter(