feat: codemirror for graphql query, scheme and response

components/graphql/RequestOptions.vue

@@ -55,20 +55,7 @@
               />
             </div>
           </div>
-          <GraphqlQueryEditor
+          <div ref="queryEditor" class="w-full block"></div>
-            ref="queryEditor"
-            v-model="gqlQueryString"
-            :on-run-g-q-l-query="runQuery"
-            :options="{
-              maxLines: Infinity,
-              minLines: 16,
-              autoScrollEditorIntoView: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
-            styles="border-b border-dividerLight"
-            @update-query="updateQuery"
-          />
         </AppSection>
       </SmartTab>
 
@@ -284,6 +271,7 @@
 <script setup lang="ts">
 import { onMounted, ref, useContext, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
+import * as gql from "graphql"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
   useNuxt,
@@ -312,6 +300,9 @@ import { getCurrentStrategyID } from "~/helpers/network"
 import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import "codemirror/mode/javascript/javascript"
+import jsonLinter from "~/helpers/editor/linting/json"
+import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
+import queryCompleter from "~/helpers/editor/completion/gqlQuery"
 
 const props = defineProps<{
   conn: GQLConnection
@@ -363,13 +354,22 @@ const variableEditor = ref<any | null>(null)
 
 useCodemirror(variableEditor, variableString, {
   extendedEditorConfig: {
-    mode: "javascript",
+    mode: "application/ld+json",
   },
-  linter: null,
+  linter: jsonLinter,
   completer: null,
 })
 
 const queryEditor = ref<any | null>(null)
+const schemaString = useReadonlyStream(props.conn.schema$, null)
+
+useCodemirror(queryEditor, gqlQueryString, {
+  extendedEditorConfig: {
+    mode: "application/ld+json",
+  },
+  linter: createGQLQueryLinter(schemaString),
+  completer: queryCompleter(schemaString),
+})
 
 const copyQueryIcon = ref("copy")
 const prettifyQueryIcon = ref("align-left")
@@ -466,7 +466,13 @@ const hideRequestModal = () => {
 }
 
 const prettifyQuery = () => {
-  queryEditor.value.prettifyQuery()
+  try {
+    gqlQueryString.value = gql.print(gql.parse(gqlQueryString.value))
+  } catch (e) {
+    $toast.error(t("error.gql_prettify_invalid_query").toString(), {
+      icon: "error_outline",
+    })
+  }
   prettifyQueryIcon.value = "check"
   setTimeout(() => (prettifyQueryIcon.value = "align-left"), 1000)
 }
@@ -475,11 +481,6 @@ const saveRequest = () => {
   showSaveRequestModal.value = true
 }
 
-// Why ?
-const updateQuery = (updatedQuery: string) => {
-  gqlQueryString.value = updatedQuery
-}
-
 const copyVariables = () => {
   copyToClipboard(variableString.value)
   copyVariablesIcon.value = "check"

components/graphql/Response.vue

@@ -18,6 +18,13 @@
         {{ $t("response.title") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
@@ -34,21 +41,7 @@
         />
       </div>
     </div>
-    <SmartAceEditor
+    <div v-if="responseString" ref="schemaEditor" class="w-full block"></div>
-      v-if="responseString"
-      :value="responseString"
-      :lang="'json'"
-      :lint="false"
-      :options="{
-        maxLines: Infinity,
-        minLines: 16,
-        autoScrollEditorIntoView: true,
-        readOnly: true,
-        showPrintMargin: false,
-        useWorker: false,
-      }"
-      styles="border-b border-dividerLight"
-    />
     <div
       v-else
       class="
@@ -72,19 +65,12 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, useContext } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
-import { GQLConnection } from "~/helpers/GQLConnection"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { gqlResponse$ } from "~/newstore/GQLSession"
 
-defineProps({
-  conn: {
-    type: Object as PropType<GQLConnection>,
-    required: true,
-  },
-})
-
 const {
   $toast,
   app: { i18n },
@@ -93,6 +79,23 @@ const t = i18n.t.bind(i18n)
 
 const responseString = useReadonlyStream(gqlResponse$, "")
 
+const schemaEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
+
+useCodemirror(
+  schemaEditor,
+  responseString,
+  reactive({
+    extendedEditorConfig: {
+      mode: "application/ld+json",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+  })
+)
+
 const downloadResponseIcon = ref("download")
 const copyResponseIcon = ref("copy")
 

components/graphql/Sidebar.vue

@@ -149,6 +149,13 @@
                 :title="$t('app.wiki')"
                 svg="help-circle"
               />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('state.linewrap')"
+                :class="{ '!text-accent': linewrapEnabled }"
+                svg="corner-down-left"
+                @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+              />
               <ButtonSecondary
                 ref="downloadSchema"
                 v-tippy="{ theme: 'tooltip' }"
@@ -165,20 +172,11 @@
               />
             </div>
           </div>
-          <SmartAceEditor
+          <div
             v-if="schemaString"
-            v-model="schemaString"
+            ref="schemaEditor"
-            :lang="'graphqlschema'"
+            class="w-full block"
-            :options="{
+          ></div>
-              maxLines: Infinity,
-              minLines: 16,
-              autoScrollEditorIntoView: true,
-              readOnly: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
-            styles="border-b border-dividerLight"
-          />
           <div
             v-else
             class="
@@ -200,17 +198,17 @@
   </aside>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   computed,
-  defineComponent,
   nextTick,
-  PropType,
+  reactive,
   ref,
   useContext,
 } from "@nuxtjs/composition-api"
 import { GraphQLField, GraphQLType } from "graphql"
 import { map } from "rxjs/operators"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { GQLHeader } from "~/helpers/types/HoppGQLRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -285,14 +283,10 @@ type GQLHistoryEntry = {
   variables: string
 }
 
-export default defineComponent({
+const props = defineProps<{
-  props: {
+  conn: GQLConnection
-    conn: {
+}>()
-      type: Object as PropType<GQLConnection>,
+
-      required: true,
-    },
-  },
-  setup(props) {
 const {
   $toast,
   app: { i18n },
@@ -303,14 +297,17 @@ export default defineComponent({
   props.conn.queryFields$.pipe(map((x) => x ?? [])),
   []
 )
+
 const mutationFields = useReadonlyStream(
   props.conn.mutationFields$.pipe(map((x) => x ?? [])),
   []
 )
+
 const subscriptionFields = useReadonlyStream(
   props.conn.subscriptionFields$.pipe(map((x) => x ?? [])),
   []
 )
+
 const graphqlTypes = useReadonlyStream(
   props.conn.graphqlTypes$.pipe(map((x) => x ?? [])),
   []
@@ -368,10 +365,7 @@ export default defineComponent({
   if (!fields || fields.length === 0) return []
 
   return fields.filter((field) =>
-        isTextFoundInGraphqlFieldObject(
+    isTextFoundInGraphqlFieldObject(graphqlFieldsFilterText.value, field as any)
-          graphqlFieldsFilterText.value,
-          field as any
-        )
   )
 }
 
@@ -388,20 +382,36 @@ export default defineComponent({
       .scrollTo({ top: target.offsetTop, behavior: "smooth" })
   }
 }
+
 const schemaString = useReadonlyStream(
   props.conn.schemaString$.pipe(map((x) => x ?? "")),
   ""
 )
 
+const schemaEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
+
+useCodemirror(
+  schemaEditor,
+  schemaString,
+  reactive({
+    extendedEditorConfig: {
+      mode: "application/ld+json",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+  })
+)
+
 const downloadSchema = () => {
   const dataToWrite = JSON.stringify(schemaString.value, null, 2)
   const file = new Blob([dataToWrite], { type: "application/graphql" })
   const a = document.createElement("a")
   const url = URL.createObjectURL(file)
   a.href = url
-      a.download = `${
+  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.graphql`
-        url.split("/").pop()!.split("#")[0].split("?")[0]
-      }.graphql`
   document.body.appendChild(a)
   a.click()
   downloadSchemaIcon.value = "check"
@@ -437,34 +447,4 @@ export default defineComponent({
   setGQLResponse(responseText)
   props.conn.reset()
 }
-
-    return {
-      queryFields,
-      mutationFields,
-      subscriptionFields,
-      graphqlTypes,
-      schemaString,
-
-      graphqlFieldsFilterText,
-
-      filteredQueryFields,
-      filteredMutationFields,
-      filteredSubscriptionFields,
-      filteredGraphqlTypes,
-
-      isGqlTypeHighlighted,
-      getGqlTypeHighlightedFields,
-
-      gqlTabs,
-      typesTab,
-      handleJumpToType,
-
-      downloadSchema,
-      downloadSchemaIcon,
-      copySchemaIcon,
-      copySchema,
-      handleUseHistory,
-    }
-  },
-})
 </script>

layouts/default.vue

@@ -24,7 +24,7 @@
             >
               <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
                 <main class="flex flex-1 w-full">
-                  <nuxt class="flex flex-1" />
+                  <nuxt class="flex overflow-y-auto flex-1" />
                 </main>
               </Pane>
             </Splitpanes>