Skip to content

Commit

Permalink
feat(ui): Settings > Indent size (#240)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kobenguyent
kobenguyent authored Sep 13, 2024
1 parent a0e2df3 commit 7dabab4
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 15 deletions.
7 changes: 4 additions & 3 deletions packages/ui/src/components/RequestPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,7 @@ import { jsonPrettify } from '../utils/prettify-json'
import {
convertCurlCommandToRestfoxCollection,
debounce,
jsonStringify,
substituteEnvironmentVariables,
toggleDropdown
} from '@/helpers'
Expand Down Expand Up @@ -666,10 +667,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
},
Expand Down Expand Up @@ -817,7 +818,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 = {
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/components/ResponsePanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@ import {
bufferToString,
timeAgo,
responseStatusColorMapping,
jsonStringify,
} from '@/helpers'
import { emitter } from '@/event-bus'
import {JSONPath} from 'jsonpath-plus'
Expand Down Expand Up @@ -471,7 +472,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
}
Expand Down
9 changes: 5 additions & 4 deletions packages/ui/src/components/SocketPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,7 @@ import {
getObjectPaths,
getAlertConfirmPromptContainer,
setEnvironmentVariable,
jsonStringify,
} from '@/helpers'
import getObjectPathValue from 'lodash.get'
import Tabs from './Tabs.vue'
Expand Down Expand Up @@ -429,15 +430,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)
})
}
Expand Down Expand Up @@ -476,7 +477,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')
Expand Down Expand Up @@ -565,7 +566,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
Expand Down
13 changes: 7 additions & 6 deletions packages/ui/src/components/modals/EnvironmentModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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 = {}
Expand All @@ -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({
Expand Down Expand Up @@ -268,7 +269,7 @@ export default {
this.saveCurrentEnvironment()
const environmentString = JSON.stringify(environment.environment, null, 4)
const environmentString = jsonStringify(environment.environment)
let manuallyTriggerSave = false
Expand Down Expand Up @@ -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
Expand Down
19 changes: 18 additions & 1 deletion packages/ui/src/components/modals/SettingsModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,15 @@
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>
<select class="full-width-input" v-model="indentSize">
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div style="padding-top: 1rem"></div>
<div>
<label style="display: flex;">
Expand Down Expand Up @@ -87,7 +96,7 @@
<script>
import Modal from '@/components/Modal.vue'
import constants from '../../constants'
import {getVersion} from '@/helpers'
import { getVersion } from '@/helpers'
export default {
props: {
Expand All @@ -107,6 +116,7 @@ export default {
disableIframeSandbox: false,
disableAutoUpdate: false,
globalUserAgent: '',
indentSize: constants.EDITOR_CONFIG.indent_size,
}
},
computed: {
Expand Down Expand Up @@ -153,6 +163,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: {
Expand Down Expand Up @@ -216,6 +229,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
Expand Down Expand Up @@ -269,6 +283,9 @@ export default {
if(savedGlobalUserAgent) {
this.globalUserAgent = savedGlobalUserAgent
}
if(savedIndentSize) {
this.indentSize = savedIndentSize
}
},
getCurentUserAgent() {
this.globalUserAgent = navigator.userAgent
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -305,4 +306,7 @@ export default {
name: 'Default',
color: 'var(--text-color)',
},
EDITOR_CONFIG: {
indent_size: '4',
}
}
12 changes: 12 additions & 0 deletions packages/ui/src/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1751,3 +1751,15 @@ export function covertPostmanAuthToRestfoxAuth(request: any) {

return authentication
}

export function getEditorConfig(): {
indentSize: number
} {
return {
indentSize: parseInt(localStorage.getItem(constants.LOCAL_STORAGE_KEY.INDENT_SIZE) || constants.EDITOR_CONFIG.indent_size.toString(), 10)
}
}

export function jsonStringify(data: any, space = getEditorConfig().indentSize): any {
return JSON.stringify(data, null, space)
}

0 comments on commit 7dabab4

Please sign in to comment.