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

Add "Prettify GraphQL" button
This commit is contained in:
Anoop M D 2024-02-27 02:03:28 +05:30 committed by GitHub
commit 6729d718cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 11 deletions

7
package-lock.json generated
View File

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

View File

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

View File

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