Add "Prettify GraphQL" button

The goal is to achieve the same behavior from Insomnia which allow to format a GraphQL query using prettier (see 264177b56f/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

@@ -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",

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",

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"
+        <StyledWrapper
-        aria-label="Query Editor"
+          className="h-full w-full"
-        ref={(node) => {
+          aria-label="Query Editor"
-          this._node = node;
+          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>
+      </>
     );
   }