From 7dd4db13a10784c2b2b6106b7f57e1531193dc8e Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 5 Mar 2020 14:20:15 -0500
Subject: [PATCH 1/6] Added prettifying to GQL Query Editor

---
 components/graphql/queryeditor.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index 6378f5f09..52cfcae21 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -147,6 +147,15 @@ export default {
       },
     })
 
+    editor.commands.addCommand({
+      name: "prettifyGQLQuery",
+      exec: () => this.prettifyQuery(),
+      bindKey: {
+        mac: "cmd-g",
+        win: "ctrl-g",
+      },
+    })
+
     editor.on("change", () => {
       const content = editor.getValue()
       this.$emit("input", content)
@@ -158,6 +167,10 @@ export default {
   },
 
   methods: {
+    prettifyQuery() {
+      this.value = gql.print(gql.parse(this.editor.getValue()))
+    },
+
     defineTheme() {
       if (this.theme) {
         return this.theme

From a9ba2b50f9167b41c397ddc30057e8a6ac7234d7 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 5 Mar 2020 14:24:48 -0500
Subject: [PATCH 2/6] Added error handling to query prettify to prevent event
 propagation

---
 components/graphql/queryeditor.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index 52cfcae21..e351bf5b3 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -151,8 +151,8 @@ export default {
       name: "prettifyGQLQuery",
       exec: () => this.prettifyQuery(),
       bindKey: {
-        mac: "cmd-g",
-        win: "ctrl-g",
+        mac: "cmd-p",
+        win: "ctrl-p",
       },
     })
 
@@ -168,7 +168,12 @@ export default {
 
   methods: {
     prettifyQuery() {
-      this.value = gql.print(gql.parse(this.editor.getValue()))
+      try {
+        this.value = gql.print(gql.parse(this.editor.getValue()))
+      } catch (e) {
+        // Catching the exception to avoid the event to be passed to the browser
+        // Prevents the print dialog from appearing
+      }
     },
 
     defineTheme() {

From cb0de46e7dbbf7ff15fee793f1899e03acb1c382 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 5 Mar 2020 14:35:34 -0500
Subject: [PATCH 3/6] Added i10n entry for invalid GQL Query prettification

---
 lang/en-US.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lang/en-US.js b/lang/en-US.js
index 811b98210..bb1b421b7 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -182,6 +182,8 @@ export default {
   waiting_send_req: "(waiting to send request)",
   waiting_receive_response: "(waiting to receive response)",
   waiting_receive_schema: "(waiting to receive schema)",
+  gql_prettify_invalid_query:
+    "Couldn't prettify an invalid query, solve query syntax errors and try again",
   cancel: "Cancel",
   save: "Save",
   dismiss: "Dismiss",

From 64091c1f29585a7e5bcc899b1d658cb916b208f6 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 5 Mar 2020 14:36:30 -0500
Subject: [PATCH 4/6] GQL Query Editor shows toast on prettifying invalid
 queries

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

diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index e351bf5b3..8503c1804 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -171,8 +171,9 @@ export default {
       try {
         this.value = gql.print(gql.parse(this.editor.getValue()))
       } catch (e) {
-        // Catching the exception to avoid the event to be passed to the browser
-        // Prevents the print dialog from appearing
+        this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
+          icon: "error",
+        })
       }
     },
 

From 30ee570ef7daa06794182f8082a651ffba044b90 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 5 Mar 2020 14:53:27 -0500
Subject: [PATCH 5/6] Added i10n entry for prettify query

---
 lang/en-US.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lang/en-US.js b/lang/en-US.js
index bb1b421b7..261eb18c0 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -184,6 +184,7 @@ export default {
   waiting_receive_schema: "(waiting to receive schema)",
   gql_prettify_invalid_query:
     "Couldn't prettify an invalid query, solve query syntax errors and try again",
+  prettify_query: "Prettify Query",
   cancel: "Cancel",
   save: "Save",
   dismiss: "Dismiss",

From e4abe4efd558b3cac50f920e878a45073acbde9f Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 5 Mar 2020 14:58:32 -0500
Subject: [PATCH 6/6] Added prettify query button for GraphQL queries

---
 pages/graphql.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index cce5689ae..1a2f52508 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -178,6 +178,13 @@
               >
                 <i class="material-icons">file_copy</i>
               </button>
+              <button
+                class="icon"
+                @click="doPrettifyQuery"
+                v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
+              >
+                <i class="material-icons">photo_filter</i>
+              </button>
             </div>
           </div>
           <QueryEditor
@@ -452,6 +459,9 @@ export default {
   },
   methods: {
     getSpecialKey: getPlatformSpecialKey,
+    doPrettifyQuery() {
+      this.$refs.queryEditor.prettifyQuery()
+    },
     handleJumpToType(type) {
       const typesTab = document.getElementById("gqltypes-tab")
       typesTab.checked = true