From 4bd31fb083523930cda86ae64b17107301d96b88 Mon Sep 17 00:00:00 2001
From: Adrian Riedel <Eynorey@users.noreply.github.com>
Date: Wed, 4 Sep 2024 23:27:28 +0200
Subject: [PATCH] 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>
---
 .../RequestPane/GraphQLVariables/index.js     | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
index 2062c7bd1..91fea0134 100644
--- a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
+++ b/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 || ''}