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>
This commit is contained in:
Adrian Riedel 2024-09-04 23:27:28 +02:00 committed by GitHub
parent bcc8811f65
commit 4bd31fb083
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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 || ''}