clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-01 10:07:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nc-gui): update webhok payload copy btn

Browse Source
This commit is contained in:
Ramesh Mane
2025-06-28 16:30:12 +00:00
parent 2789fd3524
commit 3615ceb08d
2 changed files with 17 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/nc-gui/components/webhook/CallLog/ReqResDetailCard.vue
View File

@@ -12,14 +12,9 @@ const { copy } = useCopy()
const { t } = useI18n()
const copyPayload = async () => {
try {
await copy(typeof props.payload === 'object' ? JSON.stringify(props.payload, null, 2) : props.payload)
message.success(t('msg.info.copiedToClipboard'))
} catch (e) {
message.error(e.message)
}
}
const copyPayloadContent = computed(() => {
return typeof props.payload === 'object' ? JSON.stringify(props.payload, null, 2) : props.payload?.toString()
})
const formattedPayload = computed(() => {
try {
@@ -37,14 +32,14 @@ const formattedPayload = computed(() => {
<div class="detail-title font-weight-bold">{{ title }}</div>
<div class="content">
<div v-if="headers" class="detail-headers">
<span class="text-gray-500 font-weight-bold text-xs leading-[18px]">Header</span>
<span class="text-gray-500 font-weight-bold text-small1">Header</span>
<div class="log-details">
<div v-for="(value, key) in headers" :key="key" class="log-detail-item">
<NcTooltip class="text-small1 min-w-40">
<NcTooltip class="text-small1 min-w-40" show-on-truncate-only>
<template #title>{{ key }}</template>
<span class="label"> {{ key }}</span>
<span class="label"> {{ key }} </span>
</NcTooltip>
<NcTooltip class="text-small1">
<NcTooltip class="text-small1 max-w-[calc(100%_-_160px)] truncate" show-on-truncate-only>
<template #title>{{ value }}</template>
<span class="value"> {{ value }}</span>
</NcTooltip>
@@ -52,14 +47,14 @@ const formattedPayload = computed(() => {
</div>
</div>
<div v-if="params && Object.keys(params).length" class="detail-params">
<span class="text-gray-500 font-weight-bold text-xs leading-[18px]">Params</span>
<span class="text-gray-500 font-weight-bold text-small1">Params</span>
<div class="log-details">
<div v-for="(value, key) in params" :key="key" class="log-detail-item">
<NcTooltip class="text-small1 min-w-40">
<NcTooltip class="text-small1 min-w-40" show-on-truncate-only>
<template #title>{{ key }}</template>
<span class="label"> {{ key }}</span>
</NcTooltip>
<NcTooltip class="text-small1">
<NcTooltip class="text-small1 max-w-[calc(100%_-_160px)]" show-on-truncate-only>
<template #title>{{ value }}</template>
<span class="value"> {{ value }}</span>
</NcTooltip>
@@ -69,7 +64,7 @@ const formattedPayload = computed(() => {
<div v-if="payload && Object.keys(payload).length" class="detail-payload">
<div class="text-sm text-gray-500 font-weight-bold pb-2 flex justify-between">
<span class="text-xs leading-[18px]">Payload</span>
<GeneralIcon icon="copy" class="cursor-pointer" @click="copyPayload" />
<GeneralCopyButton :content="copyPayloadContent" />
</div>
<LazyMonacoEditor
:model-value="formattedPayload"
@@ -101,7 +96,7 @@ const formattedPayload = computed(() => {
@apply flex flex-col w-full border-1 border-gray-200 rounded-lg bg-gray-50 h-full;
& > .detail-title {
@apply border-b border-gray-200 px-3 py-2;
@apply border-b border-nc-border-gray-medium px-3 py-2;
}
.content {
@@ -120,11 +115,11 @@ const formattedPayload = computed(() => {
.log-detail-item {
@apply flex flex-row w-full;
.label {
@apply min-w-40 font-weight-600 text-gray-700 overflow-ellipsis whitespace-nowrap overflow-hidden text-small1 lowercase overflow-ellipsis whitespace-nowrap overflow-hidden;
@apply min-w-40 font-weight-600 text-gray-700 text-small1 lowercase;
}
.value {
@apply min-w-0 overflow-ellipsis whitespace-nowrap overflow-hidden text-gray-600 text-small1;
@apply min-w-0 text-nc-content-gray-subtle2 font-500 text-small1;
}
}
}
@@ -134,8 +129,9 @@ const formattedPayload = computed(() => {
}
.detail-params,
.detail-headers {
@apply flex-grow;
.detail-headers,
.detail-payload {
@apply flex-grow min-w-80;
}
}
}