feat(#2265): Support GraphQL variables formatting (#2267)

* feat: support GraphQL variables formatting

* Update index.js

* revert codeeditor component changes

* revert codeeditor component

---------

Co-authored-by: lohit <lohxt.space@gmail.com>

packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js

@@ -6,6 +6,9 @@ import { updateRequestGraphqlVariables } from 'providers/ReduxStore/slices/colle
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
+import { format, applyEdits } from 'jsonc-parser';
+import { IconWand } from '@tabler/icons';
+import toast from 'react-hot-toast';
 
 const GraphQLVariables = ({ variables, item, collection }) => {
   const dispatch = useDispatch();
@@ -13,6 +16,25 @@ const GraphQLVariables = ({ variables, item, collection }) => {
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  const onPrettify = () => {
+    if (!variables) return;
+    try {
+      const edits = format(variables, undefined, { tabSize: 2, insertSpaces: true });
+      const prettyVariables = applyEdits(variables, edits);
+      dispatch(
+        updateRequestGraphqlVariables({
+          variables: prettyVariables,
+          itemUid: item.uid,
+          collectionUid: collection.uid
+        })
+      );
+      toast.success('Variables prettified');
+    } catch (error) {
+      console.error(error);
+      toast.error('Error occurred while prettifying GraphQL variables');
+    }
+  };
+
   const onEdit = (value) => {
     dispatch(
       updateRequestGraphqlVariables({
@@ -27,7 +49,14 @@ const GraphQLVariables = ({ variables, item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <StyledWrapper className="w-full">
+    <StyledWrapper className="w-full relative">
+      <button
+        className="btn-add-param text-link px-4 py-4 select-none absolute top-0 right-0 z-10"
+        onClick={onPrettify}
+        title={'Prettify'}
+      >
+        <IconWand size={20} strokeWidth={1.5} />
+      </button>
       <CodeEditor
         collection={collection}
         value={variables || ''}