From 500cf56171dd2d9b34c46d83f7f33863b19df602 Mon Sep 17 00:00:00 2001 From: hasura-bot Date: Fri, 5 Jan 2024 04:14:23 +0530 Subject: [PATCH] console: prettify variable json when clicking on the prettify button, close 9968 GITHUB_PR_NUMBER: 9969 GITHUB_PR_URL: https://github.com/hasura/graphql-engine/pull/9969 PR-URL: https://github.com/hasura/graphql-engine-mono/pull/10454 Co-authored-by: Bert Verhelst <1710840+bertyhell@users.noreply.github.com> GitOrigin-RevId: d3d14fe2ac326f143d50925a0827c8c16e68d420 --- .../GraphiQLWrapper/GraphiQLWrapper.js | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js index 76ceeeacd29..272a77adadc 100644 --- a/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js +++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js @@ -137,10 +137,23 @@ class GraphiQLWrapper extends Component { const handleClickPrettifyButton = () => { trackGraphiQlToolbarButtonClick('Prettify'); - const editor = graphiqlContext.getQueryEditor(); - const currentText = editor.getValue(); - const prettyText = print(sdlParse(currentText)); - editor.setValue(prettyText); + const queryEditor = graphiqlContext.getQueryEditor(); + const currentQueryText = queryEditor.getValue(); + const prettyQueryText = print(sdlParse(currentQueryText)); + queryEditor.setValue(prettyQueryText); + + try { + const variableEditor = graphiqlContext.getVariableEditor(); + const currentVariableText = variableEditor.getValue(); + const prettyVariableText = JSON.stringify( + JSON.parse(currentVariableText), + null, + 2 + ); + variableEditor.setValue(prettyVariableText); + } catch (err) { + // Ignore json parse errors, since we can't format invalid json anyway + } }; const handleToggleHistory = () => {