Merge pull request #526 from j0k3r/feature/prettify-graphql

Add "Prettify GraphQL" button

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"
-        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>
+      </>
     );
   }