From 9b1c9c33850295c9f0f5898ca7e183a5c071f7db Mon Sep 17 00:00:00 2001 From: kobenguyent Date: Wed, 11 Sep 2024 10:25:31 +0200 Subject: [PATCH] feat(ui): Settings > Indent size --- packages/ui/src/components/RequestPanel.vue | 8 ++++---- packages/ui/src/components/ResponsePanel.vue | 4 ++-- packages/ui/src/components/SocketPanel.vue | 10 +++++----- .../ui/src/components/modals/EnvironmentModal.vue | 13 +++++++------ .../ui/src/components/modals/SettingsModal.vue | 14 ++++++++++++++ packages/ui/src/constants.ts | 4 ++++ packages/ui/src/helpers.ts | 10 ++++++++++ 7 files changed, 46 insertions(+), 17 deletions(-) diff --git a/packages/ui/src/components/RequestPanel.vue b/packages/ui/src/components/RequestPanel.vue index 2e8d302e..3bca3f53 100644 --- a/packages/ui/src/components/RequestPanel.vue +++ b/packages/ui/src/components/RequestPanel.vue @@ -407,7 +407,7 @@ import { emitter } from '@/event-bus' import { jsonPrettify } from '../utils/prettify-json' import { convertCurlCommandToRestfoxCollection, - debounce, + debounce, jsonStringify, substituteEnvironmentVariables, toggleDropdown } from '@/helpers' @@ -666,10 +666,10 @@ export default { try { graphqlVariables = JSON.parse(this.graphql.variables) } catch {} - this.activeTab.body.text = JSON.stringify({ + this.activeTab.body.text = jsonStringify({ query: this.graphql.query, variables: graphqlVariables - }, null, 4) + }) }, deep: true }, @@ -817,7 +817,7 @@ export default { const parsedBodyText = JSON.parse(this.activeTab.body.text) this.graphql = { query: parsedBodyText.query ?? '', - variables: JSON.stringify(typeof parsedBodyText.variables === 'object' ? parsedBodyText.variables : {}, null, 4) + variables: jsonStringify(typeof parsedBodyText.variables === 'object' ? parsedBodyText.variables : {}) } } catch { this.graphql = { diff --git a/packages/ui/src/components/ResponsePanel.vue b/packages/ui/src/components/ResponsePanel.vue index b60f1fe6..a7a8df29 100644 --- a/packages/ui/src/components/ResponsePanel.vue +++ b/packages/ui/src/components/ResponsePanel.vue @@ -178,7 +178,7 @@ import { getStatusText, bufferToString, timeAgo, - responseStatusColorMapping, + responseStatusColorMapping, jsonStringify, } from '@/helpers' import { emitter } from '@/event-bus' import {JSONPath} from 'jsonpath-plus' @@ -471,7 +471,7 @@ export default { bufferToJSONString(buffer) { const responseText = this.bufferToString(buffer) try { - return JSON.stringify(JSON.parse(responseText), null, 4) + return jsonStringify(JSON.parse(responseText)) } catch { return responseText } diff --git a/packages/ui/src/components/SocketPanel.vue b/packages/ui/src/components/SocketPanel.vue index 3a7e0fe5..465166e5 100644 --- a/packages/ui/src/components/SocketPanel.vue +++ b/packages/ui/src/components/SocketPanel.vue @@ -246,7 +246,7 @@ import { generateId, getObjectPaths, getAlertConfirmPromptContainer, - setEnvironmentVariable, + setEnvironmentVariable, jsonStringify, } from '@/helpers' import getObjectPathValue from 'lodash.get' import Tabs from './Tabs.vue' @@ -429,7 +429,7 @@ async function connect(client: Client) { socket.onevent = function(packet) { const event = packet.data[0] const args = packet.data.slice(1) - const receivedMessage = `[${event}] ${typeof args[0] === 'object' ? JSON.stringify(args[0], null, 4) : args[0]}` + const receivedMessage = `[${event}] ${typeof args[0] === 'object' ? jsonStringify(args[0]) : args[0]}` clientMessageHandler(client, receivedMessage) originalOnevent.call(this, packet) } @@ -437,7 +437,7 @@ async function connect(client: Client) { if (client.type === 'Socket.IO-v3' || client.type === 'Socket.IO') { socket.onAny(async(event, ...args) => { - const receivedMessage = `[${event}] ${typeof args[0] === 'object' ? JSON.stringify(args[0], null, 4) : args[0]}` + const receivedMessage = `[${event}] ${typeof args[0] === 'object' ? jsonStringify(args[0]) : args[0]}` clientMessageHandler(client, receivedMessage) }) } @@ -476,7 +476,7 @@ function addClientMessage(client: Client, clientMessage: ClientMessage) { function beautifyJSON(client: Client) { try { const parsedMessage = JSON.parse(client.message) - client.message = JSON.stringify(parsedMessage, null, 4) + client.message = jsonStringify(parsedMessage) client.payloads.find(payload => payload.id === client.currentPayloadId)!.payload = client.message } catch { $toast.error('Invalid JSON') @@ -565,7 +565,7 @@ function disconnect(client: Client) { function parseAndFormatMessage(message: string) { let parsedMessage = null try { - parsedMessage = JSON.stringify(JSON.parse(message), null, 4) + parsedMessage = jsonStringify(JSON.parse(message)) } catch {} if (parsedMessage) { return parsedMessage diff --git a/packages/ui/src/components/modals/EnvironmentModal.vue b/packages/ui/src/components/modals/EnvironmentModal.vue index 3bd5905d..ed49ed01 100644 --- a/packages/ui/src/components/modals/EnvironmentModal.vue +++ b/packages/ui/src/components/modals/EnvironmentModal.vue @@ -69,6 +69,7 @@ import CodeMirrorEditor from '@/components/CodeMirrorEditor.vue' import { nextTick } from 'vue' import { emitter } from '@/event-bus' import constants from '@/constants' +import { jsonStringify } from '@/helpers' export default { props: { @@ -140,10 +141,10 @@ export default { }, watch: { collectionItem() { - this.environment = this.collectionItem.environment ? JSON.stringify(this.collectionItem.environment, null, 4) : '{}' + this.environment = this.collectionItem.environment ? jsonStringify(this.collectionItem.environment) : '{}' }, workspace() { - this.environment = this.workspace.environment ? JSON.stringify(this.workspace.environment, null, 4) : '{}' + this.environment = this.workspace.environment ? jsonStringify(this.workspace.environment) : '{}' }, environment() { let environment = {} @@ -161,10 +162,10 @@ export default { if(this.showModal) { this.parseError = '' if(this.collectionItem) { - this.environment = this.collectionItem.environment ? JSON.stringify(this.collectionItem.environment, null, 4) : '{}' + this.environment = this.collectionItem.environment ? jsonStringify(this.collectionItem.environment) : '{}' } if(this.workspace) { - this.environment = this.workspace.environment ? JSON.stringify(this.workspace.environment, null, 4) : '{}' + this.environment = this.workspace.environment ? jsonStringify(this.workspace.environment) : '{}' } nextTick(() => { this.$refs['environment-' + this.currentEnvironment][0].scrollIntoView({ @@ -268,7 +269,7 @@ export default { this.saveCurrentEnvironment() - const environmentString = JSON.stringify(environment.environment, null, 4) + const environmentString = jsonStringify(environment.environment) let manuallyTriggerSave = false @@ -466,7 +467,7 @@ export default { }, exportEnvironment() { const environment = this.environments.find(environment => environment.name === this.currentEnvironment) - const blob = new Blob([JSON.stringify(environment, null, 4)], { type: 'application/json' }) + const blob = new Blob([jsonStringify(environment)], { type: 'application/json' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url diff --git a/packages/ui/src/components/modals/SettingsModal.vue b/packages/ui/src/components/modals/SettingsModal.vue index 0d232423..3696dd4f 100644 --- a/packages/ui/src/components/modals/SettingsModal.vue +++ b/packages/ui/src/components/modals/SettingsModal.vue @@ -34,6 +34,12 @@ Note that the default user agent Restfox/{{ getVersion() }} is used when no global user agent is set here or on request level. +
+
+
Editor Indent Size
+ +
+