feat(ui): Settings > Indent size

flawiddsouza · Sep 11, 2024 · 9b1c9c3 · 9b1c9c3
1 parent fd5e843
commit 9b1c9c3
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 17 deletions.
diff --git 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
@@ -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
@@ -246,7 +246,7 @@ import {
     generateId,
     getObjectPaths,
     getAlertConfirmPromptContainer,
-    setEnvironmentVariable,
+    setEnvironmentVariable, jsonStringify,
 } from '@/helpers'
 import getObjectPathValue from 'lodash.get'
 import Tabs from './Tabs.vue'
@@ -429,15 +429,15 @@ 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)
             }
         }
 
         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
@@ -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
@@ -34,6 +34,12 @@
                     Note that the default user agent <strong>Restfox/{{ getVersion() }}</strong> is used when no global user agent is set here or on request level.
                 </div>
             </div>
+            <div>
+                <div style="margin-top: 1rem">
+                    <div style="margin-bottom: var(--label-margin-bottom);">Editor Indent Size</div>
+                    <input type="number" v-model="indentSize" class="full-width-input" placeholder="4">
+                </div>
+            </div>
             <div style="padding-top: 1rem"></div>
             <div>
                 <label style="display: flex;">
@@ -105,6 +111,7 @@ export default {
             disableIframeSandbox: false,
             disableAutoUpdate: false,
             globalUserAgent: '',
+            indentSize: constants.EDITOR_CONFIG.indent_size,
         }
     },
     computed: {
@@ -151,6 +158,9 @@ export default {
         },
         globalUserAgent() {
             localStorage.setItem(constants.LOCAL_STORAGE_KEY.GLOBAL_USER_AGENT, this.globalUserAgent)
+        },
+        indentSize() {
+            localStorage.setItem(constants.LOCAL_STORAGE_KEY.INDENT_SIZE, this.indentSize)
         }
     },
     methods: {
@@ -214,6 +224,7 @@ export default {
             const savedDisableIframeSandbox = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_IFRAME_SANDBOX)
             const savedDisableAutoUpdate = localStorage.getItem(constants.LOCAL_STORAGE_KEY.DISABLE_AUTO_UPDATE)
             const savedGlobalUserAgent = localStorage.getItem(constants.LOCAL_STORAGE_KEY.GLOBAL_USER_AGENT)
+            const savedIndentSize = localStorage.getItem(constants.LOCAL_STORAGE_KEY.INDENT_SIZE) || 4
 
             if(savedSidebarWidth) {
                 this.sidebarWidth = savedSidebarWidth
@@ -267,6 +278,9 @@ export default {
             if(savedGlobalUserAgent) {
                 this.globalUserAgent = savedGlobalUserAgent
             }
+            if(savedIndentSize) {
+                this.indentSize = savedIndentSize
+            }
         },
         getCurentUserAgent() {
             this.globalUserAgent = navigator.userAgent

diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
@@ -29,6 +29,7 @@ export default {
         GENERATE_CODE_LANGUAGE: 'Restfox-GenerateCodeLanguage',
         GENERATE_CODE_CLIENT: 'Restfox-GenerateCodeClient',
         GLOBAL_USER_AGENT: 'Restfox-GlobalUserAgent',
+        INDENT_SIZE: 'Restfox-IndentSize',
     },
     HOTKEYS: {
         SEND_REQUEST: 'Ctrl + Enter',
@@ -305,4 +306,7 @@ export default {
         name: 'Default',
         color: 'var(--text-color)',
     },
+    EDITOR_CONFIG: {
+        indent_size: 4,
+    }
 }
diff --git a/packages/ui/src/helpers.ts b/packages/ui/src/helpers.ts
@@ -1750,3 +1750,13 @@ export function covertPostmanAuthToRestfoxAuth(request: any) {
 
     return authentication
 }
+
+export function getEditorConfig(): any {
+    return {
+        indentSize: localStorage.getItem(constants.LOCAL_STORAGE_KEY.INDENT_SIZE)
+    }
+}
+
+export function jsonStringify(data: any, replacer = null, space = getEditorConfig().indentSize): any {
+    return JSON.stringify(data, replacer, parseInt(space, 10))
+}