Merge pull request #1220 from LeoMartinDev/feat/filter-graphql-fields

components/graphql/field.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-2 m-2 border-b border-dashed border-brdColor">
-    <div class="field-title">
+    <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
         (
@@ -25,11 +25,19 @@
   </div>
 </template>
 
+<style scoped lang="scss">
+.field-highlighted {
+  @apply border-b-2;
+  @apply border-acColor;
+}
+</style>
+
 <script>
 export default {
   props: {
     gqlField: Object,
     jumpTypeCallback: Function,
+    isHighlighted: { type: Boolean, default: false },
   },
 
   computed: {

components/graphql/type.vue

@@ -1,23 +1,44 @@
 <template>
   <div class="p-2 m-2">
-    <div class="font-bold type-title">{{ gqlType.name }}</div>
+    <div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
+      {{ gqlType.name }}
+    </div>
     <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
       {{ gqlType.description }}
     </div>
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
-        <field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
+        <field
+          :gqlField="field"
+          :isHighlighted="isFieldHighlighted({ field })"
+          :jumpTypeCallback="jumpTypeCallback"
+        />
       </div>
     </div>
   </div>
 </template>
 
+<style scoped lang="scss">
+.type-highlighted {
+  @apply text-acColor;
+}
+</style>
+
 <script>
 export default {
   props: {
     gqlType: {},
     jumpTypeCallback: Function,
+    isHighlighted: { type: Boolean, default: false },
+    highlightedFields: { type: Array, default: [] },
+  },
+  methods: {
+    isFieldHighlighted({ field }) {
+      return !!this.highlightedFields.find(
+        (highlightedField) => highlightedField.name === field.name
+      )
+    },
   },
 }
 </script>

pages/graphql.vue

@@ -262,7 +262,8 @@
       </div>
       <aside class="sticky-inner inner-right lg:max-w-md">
         <pw-section class="purple" :label="$t('docs')" ref="docs">
-          <section>
+          <section class="flex-col">
+            <input type="text" :placeholder="$t('search')" v-model="graphqlFieldsFilterText" />
             <tabs ref="gqlTabs">
               <div class="gqlTabs">
                 <tab
@@ -271,13 +272,13 @@
                   :label="$t('queries')"
                   :selected="true"
                 >
-                  <div v-for="field in queryFields" :key="field.name">
+                  <div v-for="field in filteredQueryFields" :key="field.name">
                     <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
                 <tab v-if="mutationFields.length > 0" :id="'mutations'" :label="$t('mutations')">
-                  <div v-for="field in mutationFields" :key="field.name">
+                  <div v-for="field in filteredMutationFields" :key="field.name">
                     <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
@@ -287,14 +288,19 @@
                   :id="'subscriptions'"
                   :label="$t('subscriptions')"
                 >
-                  <div v-for="field in subscriptionFields" :key="field.name">
+                  <div v-for="field in filteredSubscriptionFields" :key="field.name">
                     <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
                 <tab v-if="gqlTypes.length > 0" :id="'types'" :label="$t('types')" ref="typesTab">
-                  <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
-                    <type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
+                  <div v-for="type in filteredGqlTypes" :key="type.name" :id="`type_${type.name}`">
+                    <type
+                      :gqlType="type"
+                      :isHighlighted="isGqlTypeHighlighted({ gqlType: type })"
+                      :highlightedFields="getGqlTypeHighlightedFields({ gqlType: type })"
+                      :jumpTypeCallback="handleJumpToType"
+                    />
                   </div>
                 </tab>
               </div>
@@ -349,6 +355,7 @@ export default {
       doneButton: '<i class="material-icons">done</i>',
       expandResponse: false,
       responseBodyMaxLines: 16,
+      graphqlFieldsFilterText: undefined,
 
       settings: {
         SCROLL_INTO_ENABLED:
@@ -359,6 +366,30 @@ export default {
     }
   },
   computed: {
+    filteredQueryFields() {
+      return this.getFilteredGraphqlFields({
+        filterText: this.graphqlFieldsFilterText,
+        fields: this.queryFields,
+      })
+    },
+    filteredMutationFields() {
+      return this.getFilteredGraphqlFields({
+        filterText: this.graphqlFieldsFilterText,
+        fields: this.mutationFields,
+      })
+    },
+    filteredSubscriptionFields() {
+      return this.getFilteredGraphqlFields({
+        filterText: this.graphqlFieldsFilterText,
+        fields: this.subscriptionFields,
+      })
+    },
+    filteredGqlTypes() {
+      return this.getFilteredGraphqlTypes({
+        filterText: this.graphqlFieldsFilterText,
+        types: this.gqlTypes,
+      })
+    },
     url: {
       get() {
         return this.$store.state.gql.url
@@ -425,6 +456,70 @@ export default {
     }
   },
   methods: {
+    isGqlTypeHighlighted({ gqlType }) {
+      if (!this.graphqlFieldsFilterText) return false
+
+      return this.isTextFoundInGraphqlFieldObject({
+        text: this.graphqlFieldsFilterText,
+        graphqlFieldObject: gqlType,
+      })
+    },
+    getGqlTypeHighlightedFields({ gqlType }) {
+      if (!this.graphqlFieldsFilterText) return []
+
+      const fields = Object.values(gqlType._fields || {})
+
+      if (!fields || fields.length === 0) return []
+
+      return fields.filter((field) => {
+        return this.isTextFoundInGraphqlFieldObject({
+          text: this.graphqlFieldsFilterText,
+          graphqlFieldObject: field,
+        })
+      })
+    },
+    isTextFoundInGraphqlFieldObject({ text, graphqlFieldObject }) {
+      const normalizedText = text.toLowerCase()
+
+      const isFilterTextFoundInDescription = graphqlFieldObject.description
+        .toLowerCase()
+        .includes(normalizedText)
+      const isFilterTextFoundInName = graphqlFieldObject.name.toLowerCase().includes(normalizedText)
+
+      return isFilterTextFoundInDescription || isFilterTextFoundInName
+    },
+    getFilteredGraphqlFields({ filterText, fields }) {
+      if (!filterText) return fields
+
+      return fields.filter((field) => {
+        return this.isTextFoundInGraphqlFieldObject({ text: filterText, graphqlFieldObject: field })
+      })
+    },
+    getFilteredGraphqlTypes({ filterText, types }) {
+      if (!filterText) return types
+
+      return types.filter((type) => {
+        const isFilterTextMatching = this.isTextFoundInGraphqlFieldObject({
+          text: filterText,
+          graphqlFieldObject: type,
+        })
+
+        if (isFilterTextMatching) {
+          return true
+        }
+
+        const isFilterTextMatchingAtLeastOneField = Object.values(type._fields || {}).some(
+          (field) => {
+            return this.isTextFoundInGraphqlFieldObject({
+              text: filterText,
+              graphqlFieldObject: field,
+            })
+          }
+        )
+
+        return isFilterTextMatchingAtLeastOneField
+      })
+    },
     getSpecialKey: getPlatformSpecialKey,
     doPrettifyQuery() {
       this.$refs.queryEditor.prettifyQuery()