From d1a8f59c79a9e8ed6940b0f55f3fd6b4b17cc844 Mon Sep 17 00:00:00 2001
From: Jeremy Benoist <jeremy.benoist@gmail.com>
Date: Mon, 26 Feb 2024 17:02:04 +0100
Subject: [PATCH] Add "Prettify GraphQL" button

The goal is to achieve the same behavior from Insomnia which allow to format a GraphQL query using prettier (see https://github.com/Kong/insomnia/blob/264177b56fcf0a663bebfc8325eb95adb2a2f70e/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx#L260-L266).

I moved the `prettier` deps from `devDependencies` to `dependencies` because it's now used within the application.
I was forced to import `prettier/standalone` & `prettier/parser-graphql` (as it is explained here: https://prettier.io/docs/en/browser.html) otherwise I got that error:

> Couldn't resolve parser "graphql". Parsers must be explicitly added to the standalone bundle.
---
 package-lock.json                             |  7 ++--
 packages/bruno-app/package.json               |  2 +-
 .../RequestPane/QueryEditor/index.js          | 36 +++++++++++++++----
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f3b6e097e..b8af3e32a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16530,7 +16530,6 @@
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-      "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -20695,6 +20694,7 @@
         "pdfjs-dist": "^3.11.174",
         "platform": "^1.3.6",
         "posthog-node": "^2.1.0",
+        "prettier": "^2.7.1",
         "qs": "^6.11.0",
         "query-string": "^7.0.1",
         "react": "18.2.0",
@@ -20732,7 +20732,6 @@
         "html-webpack-plugin": "^5.5.0",
         "mini-css-extract-plugin": "^2.4.5",
         "postcss": "^8.4.35",
-        "prettier": "^2.7.1",
         "style-loader": "^3.3.1",
         "tailwindcss": "^3.4.1",
         "webpack": "^5.64.4",
@@ -20913,12 +20912,14 @@
     },
     "packages/bruno-cli": {
       "name": "@usebruno/cli",
-      "version": "1.9.0",
+      "version": "1.9.2",
       "license": "MIT",
       "dependencies": {
+        "@aws-sdk/credential-providers": "^3.425.0",
         "@usebruno/common": "0.1.0",
         "@usebruno/js": "0.10.1",
         "@usebruno/lang": "0.10.0",
+        "aws4-axios": "^3.3.0",
         "axios": "^1.5.1",
         "chai": "^4.3.7",
         "chalk": "^3.0.0",
diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
index 90c45038f..fc80bb552 100644
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -53,6 +53,7 @@
     "pdfjs-dist": "^3.11.174",
     "platform": "^1.3.6",
     "posthog-node": "^2.1.0",
+    "prettier": "^2.7.1",
     "qs": "^6.11.0",
     "query-string": "^7.0.1",
     "react": "18.2.0",
@@ -90,7 +91,6 @@
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "^8.4.35",
-    "prettier": "^2.7.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",
diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
index 622a34329..ee8a4321f 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
@@ -8,8 +8,11 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
 import MD from 'markdown-it';
+import { format } from 'prettier/standalone';
+import prettierPluginGraphql from 'prettier/parser-graphql';
 import { getAllVariables } from 'utils/collections';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
+import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
 
 import onHasCompletion from './onHasCompletion';
@@ -178,6 +181,19 @@ export default class QueryEditor extends React.Component {
     }
   }
 
+  beautifyRequestBody = () => {
+    try {
+      const prettyQuery = format(this.props.value, {
+        parser: 'graphql',
+        plugins: [prettierPluginGraphql]
+      });
+
+      this.editor.setValue(prettyQuery);
+    } catch (e) {
+      toast.error('Error occurred while prettifying GraphQL query');
+    }
+  };
+
   // Todo: Overlay is messing up with schema hint
   // Fix this
   addOverlay = () => {
@@ -189,13 +205,19 @@ export default class QueryEditor extends React.Component {
 
   render() {
     return (
-      <StyledWrapper
-        className="h-full w-full"
-        aria-label="Query Editor"
-        ref={(node) => {
-          this._node = node;
-        }}
-      />
+      <>
+        <StyledWrapper
+          className="h-full w-full"
+          aria-label="Query Editor"
+          ref={(node) => {
+            this._node = node;
+          }}
+        >
+          <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={this.beautifyRequestBody}>
+            Prettify GraphQL
+          </button>
+        </StyledWrapper>
+      </>
     );
   }