mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-01 07:16:40 +00:00
1907 lines
63 KiB
Vue
1907 lines
63 KiB
Vue
<script setup lang="ts">
|
|
import { diff } from 'deep-object-diff'
|
|
import { defineAsyncComponent } from 'vue'
|
|
import {
|
|
type HookReqType,
|
|
type HookTestReqType,
|
|
type HookType,
|
|
PlanLimitTypes,
|
|
hasInputCalls,
|
|
removeUndefinedFromObj,
|
|
} from 'nocodb-sdk'
|
|
import type { Ref } from 'vue'
|
|
import { onKeyDown } from '@vueuse/core'
|
|
import { UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
|
|
import { extractNextDefaultName } from '~/helpers/parsers/parserHelpers'
|
|
import { jsonThemeDark, jsonThemeLight } from '~/components/monaco/json'
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emits = defineEmits(['close', 'update:value', 'cancel'])
|
|
|
|
// Define Monaco Editor as an async component
|
|
const MonacoEditor = defineAsyncComponent(() => import('~/components/monaco/Editor.vue'))
|
|
|
|
interface Props {
|
|
value: boolean
|
|
eventList: Record<string, any>[]
|
|
hook?: HookType
|
|
showUpgradeModal?: boolean
|
|
sampleDataV2?: any
|
|
stickyScroll?: boolean
|
|
initialTab?: string
|
|
}
|
|
|
|
enum HookTab {
|
|
Configuration = 'configuration',
|
|
Log = 'log',
|
|
Settings = 'settings',
|
|
}
|
|
|
|
const { eventList, showUpgradeModal, sampleDataV2 } = toRefs(props)
|
|
|
|
const { t } = useI18n()
|
|
|
|
const { $e, $api } = useNuxtApp()
|
|
|
|
const { isDark } = useTheme()
|
|
|
|
const { api, isLoading: loading } = useApi()
|
|
|
|
const modalVisible = useVModel(props, 'value')
|
|
|
|
const { clone } = useUndoRedo()
|
|
|
|
const { hooks } = storeToRefs(useWebhooksStore())
|
|
|
|
const { base } = storeToRefs(useBase())
|
|
|
|
const meta = inject(MetaInj, ref())
|
|
|
|
const { getMeta } = useMetas()
|
|
|
|
const { appInfo } = useGlobal()
|
|
|
|
const { activeTable } = toRefs(useTablesStore())
|
|
|
|
const { updateStatLimit, showWebhookLogsFeatureAccessModal } = useEeConfig()
|
|
|
|
const defaultHookName = t('labels.webhook')
|
|
|
|
const testSuccess = ref()
|
|
|
|
const testConnectionError = ref('')
|
|
|
|
const useForm = Form.useForm
|
|
|
|
const triggerByFieldColumns = computed(() => {
|
|
if (!meta.value?.columns) {
|
|
return []
|
|
}
|
|
return meta.value.columns.filter((col) => {
|
|
return [UITypes.ID].includes(col.uidt as UITypes) || isLinksOrLTAR(col) || (!isSystemColumn(col) && !isVirtualCol(col))
|
|
})
|
|
})
|
|
|
|
const eventsLabelMap = computed(() => {
|
|
const result: any = {}
|
|
for (const event of eventList.value) {
|
|
if (!result[event.value[0]]) {
|
|
result[event.value[0]] = {}
|
|
}
|
|
result[event.value[0]][event.value[1]] = event
|
|
}
|
|
return result
|
|
})
|
|
const eventsEnum = computed(() => {
|
|
const result: { text: string; value: string }[] = []
|
|
for (const event of eventList.value) {
|
|
if (!result.some((k) => k.value === event.value[0])) {
|
|
result.push({
|
|
text: event.text[0],
|
|
value: event.value[0],
|
|
})
|
|
}
|
|
}
|
|
return result
|
|
})
|
|
|
|
const oldHookRef = ref<HookType | undefined>()
|
|
|
|
let hookRef = reactive<
|
|
Omit<HookType, 'notification'> & {
|
|
notification: Record<string, any> & {
|
|
include_user: boolean
|
|
trigger_form?: boolean
|
|
trigger_form_id?: string
|
|
}
|
|
eventOperation?: string
|
|
condition: boolean
|
|
}
|
|
>({
|
|
id: '',
|
|
title: defaultHookName,
|
|
event: undefined,
|
|
operation: ['insert', 'update', 'delete'],
|
|
eventOperation: undefined,
|
|
notification: {
|
|
type: 'URL',
|
|
include_user: false,
|
|
payload: {
|
|
method: 'POST',
|
|
body: '{{ json event }}',
|
|
headers: [
|
|
{
|
|
enabled: true,
|
|
name: '',
|
|
value: '',
|
|
},
|
|
],
|
|
parameters: [
|
|
{
|
|
enabled: true,
|
|
name: '',
|
|
value: '',
|
|
},
|
|
],
|
|
path: '',
|
|
},
|
|
trigger_form: false,
|
|
trigger_form_id: undefined,
|
|
},
|
|
condition: false,
|
|
trigger_field: false,
|
|
trigger_fields: [],
|
|
active: true,
|
|
version: 'v3',
|
|
})
|
|
|
|
const operationsEnum = computed(() => {
|
|
if (!hookRef.event) {
|
|
return [] as {
|
|
text: string
|
|
value: string
|
|
}[]
|
|
}
|
|
const result: { text: string; value: string }[] = eventList.value
|
|
.filter((event) => event.value[0] === hookRef.event)
|
|
.map((event) => {
|
|
return {
|
|
text: event.text[1],
|
|
value: event.value[1],
|
|
}
|
|
})
|
|
return result
|
|
})
|
|
|
|
const urlTabKey = ref<'params' | 'headers' | 'body'>('params')
|
|
|
|
const apps: Record<string, any> = ref()
|
|
|
|
const slackChannels = ref<Record<string, any>[]>([])
|
|
|
|
const teamsChannels = ref<Record<string, any>[]>([])
|
|
|
|
const discordChannels = ref<Record<string, any>[]>([])
|
|
|
|
const mattermostChannels = ref<Record<string, any>[]>([])
|
|
const sendMeEverythingChecked = ref(true)
|
|
|
|
const filterRef = ref()
|
|
|
|
const isDropdownOpen = ref()
|
|
|
|
const titleDomRef = ref<HTMLInputElement | undefined>()
|
|
|
|
const hasUnsavedChanges = computed(() => {
|
|
if (!props.hook || !hookRef.id || !oldHookRef.value || !hookRef || showUpgradeModal.value || filterRef.value?.isFilterUpdated)
|
|
return true
|
|
|
|
return !ncIsEmptyObject(diff(removeUndefinedFromObj(oldHookRef.value), removeUndefinedFromObj(hookRef)))
|
|
})
|
|
|
|
const notificationTypes = computed(() => {
|
|
return [
|
|
{
|
|
type: 'URL',
|
|
label: 'HTTP Webhook',
|
|
},
|
|
...(hookRef.event !== 'view'
|
|
? [
|
|
{
|
|
type: 'Script',
|
|
label: 'Run Script',
|
|
},
|
|
]
|
|
: []),
|
|
]
|
|
})
|
|
|
|
const filterScripts = (script: any) => {
|
|
if (hasInputCalls(script.script)) {
|
|
return {
|
|
...script,
|
|
ncItemDisabled: true,
|
|
ncItemTooltip: `Script with user inputs can't be used with webhooks`,
|
|
}
|
|
}
|
|
return script
|
|
}
|
|
|
|
const toggleOperation = (operation: string) => {
|
|
const ops = [...hookRef.operation]
|
|
const index = ops?.indexOf(operation) ?? -1
|
|
|
|
if (index >= 0) {
|
|
ops?.splice(index, 1)
|
|
} else {
|
|
ops?.push(operation)
|
|
}
|
|
if (!ops.includes('update')) {
|
|
hookRef.trigger_field = false
|
|
hookRef.trigger_fields = []
|
|
}
|
|
if (!ops.includes('insert')) {
|
|
hookRef.notification.trigger_form = false
|
|
hookRef.notification.trigger_form_id = undefined
|
|
}
|
|
hookRef.operation = ops // this will trigger hookRef.operation watch
|
|
// event other than 'field', 'view', 'after' has no 'send me everything'
|
|
sendMeEverythingChecked.value =
|
|
['field', 'view', 'after'].includes(hookRef.event) && ops?.length === operationsEnum.value?.length
|
|
}
|
|
|
|
const toggleSendMeEverythingChecked = (_evt: Event) => {
|
|
sendMeEverythingChecked.value = !sendMeEverythingChecked.value
|
|
hookRef.operation = sendMeEverythingChecked.value ? [...operationsEnum.value.map((k) => k.value)] : []
|
|
if (!sendMeEverythingChecked.value) {
|
|
hookRef.trigger_field = false
|
|
hookRef.trigger_fields = []
|
|
hookRef.notification.trigger_form = false
|
|
hookRef.notification.trigger_form_id = undefined
|
|
}
|
|
}
|
|
const handleEventChange = (e: string) => {
|
|
sendMeEverythingChecked.value = false
|
|
hookRef.operation = []
|
|
hookRef.event = e as any
|
|
if (!['field', 'view', 'after'].includes(e)) {
|
|
hookRef.operation = ['trigger']
|
|
hookRef.trigger_field = false
|
|
hookRef.trigger_fields = []
|
|
hookRef.notification.trigger_form = false
|
|
hookRef.notification.trigger_form_id = undefined
|
|
} else {
|
|
sendMeEverythingChecked.value = true
|
|
hookRef.operation = sendMeEverythingChecked.value ? [...operationsEnum.value.map((k) => k.value)] : []
|
|
}
|
|
|
|
// Automatically set active to true when event type is manual
|
|
if (hookRef.event === 'manual') {
|
|
hookRef.active = true
|
|
}
|
|
}
|
|
|
|
const formInput = ref({
|
|
'Email': [
|
|
{
|
|
key: 'to',
|
|
label: t('labels.toAddress'),
|
|
placeholder: t('labels.toAddress'),
|
|
type: 'SingleLineText',
|
|
required: true,
|
|
},
|
|
{
|
|
key: 'subject',
|
|
label: t('labels.subject'),
|
|
placeholder: t('labels.subject'),
|
|
type: 'SingleLineText',
|
|
required: true,
|
|
},
|
|
{
|
|
key: 'body',
|
|
label: t('labels.body'),
|
|
placeholder: t('labels.body'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
],
|
|
'Slack': [
|
|
{
|
|
key: 'body',
|
|
label: t('labels.body'),
|
|
placeholder: t('labels.body'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
],
|
|
'Microsoft Teams': [
|
|
{
|
|
key: 'body',
|
|
label: t('labels.body'),
|
|
placeholder: t('labels.body'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
],
|
|
'Discord': [
|
|
{
|
|
key: 'body',
|
|
label: t('labels.body'),
|
|
placeholder: t('labels.body'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
],
|
|
'Mattermost': [
|
|
{
|
|
key: 'body',
|
|
label: t('labels.body'),
|
|
placeholder: t('labels.body'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
],
|
|
'Twilio': [
|
|
{
|
|
key: 'body',
|
|
label: t('labels.body'),
|
|
placeholder: t('labels.body'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
{
|
|
key: 'to',
|
|
label: t('labels.commaSeparatedMobileNumber'),
|
|
placeholder: t('labels.commaSeparatedMobileNumber'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
],
|
|
'Whatsapp Twilio': [
|
|
{
|
|
key: 'body',
|
|
label: t('labels.body'),
|
|
placeholder: t('labels.body'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
{
|
|
key: 'to',
|
|
label: t('labels.commaSeparatedMobileNumber'),
|
|
placeholder: t('labels.commaSeparatedMobileNumber'),
|
|
type: 'LongText',
|
|
required: true,
|
|
},
|
|
],
|
|
})
|
|
|
|
const _notificationList = computed(() => {
|
|
return isEeUI
|
|
? [{ type: 'URL', text: t('datatype.URL') }]
|
|
: [
|
|
{ type: 'URL', text: t('datatype.URL') },
|
|
{ type: 'Email', text: t('datatype.Email') },
|
|
{ type: 'Slack', text: t('general.slack') },
|
|
{ type: 'Microsoft Teams', text: t('general.microsoftTeams') },
|
|
{ type: 'Discord', text: t('general.discord') },
|
|
{ type: 'Mattermost', text: t('general.matterMost') },
|
|
{ type: 'Twilio', text: t('general.twilio') },
|
|
{ type: 'Whatsapp Twilio', text: t('general.whatsappTwilio') },
|
|
]
|
|
})
|
|
|
|
const methodList = [
|
|
{ title: 'GET' },
|
|
{ title: 'POST' },
|
|
{ title: 'DELETE' },
|
|
{ title: 'PUT' },
|
|
{ title: 'HEAD' },
|
|
{ title: 'PATCH' },
|
|
]
|
|
|
|
const showCyclicCallsWarning = ref(false)
|
|
|
|
const validators = computed(() => {
|
|
return {
|
|
'title': [fieldRequiredValidator()],
|
|
'notification.type': [fieldRequiredValidator()],
|
|
...(hookRef.notification.type === 'URL' && {
|
|
'notification.payload.method': [fieldRequiredValidator()],
|
|
'notification.payload.path': [
|
|
fieldRequiredValidator(),
|
|
{
|
|
validator: (_: any, path: string) => {
|
|
return new Promise<void>((resolve, reject) => {
|
|
showCyclicCallsWarning.value = false
|
|
const siteUrl = appInfo.value?.ncSiteUrl
|
|
|
|
if (!path || !siteUrl) {
|
|
resolve()
|
|
return
|
|
}
|
|
|
|
let matched = false
|
|
try {
|
|
const webhookUrl = new URL(hookRef.notification.payload.path)
|
|
const siteUrlObj = new URL(siteUrl)
|
|
|
|
// Check if the hostname matches exactly
|
|
matched = webhookUrl.hostname === siteUrlObj.hostname
|
|
} catch (e) {
|
|
// If URL parsing fails, fall back to simple includes check
|
|
matched = path.includes(siteUrl)
|
|
}
|
|
|
|
if (matched) {
|
|
if (appInfo.value?.isCloud) {
|
|
reject(new Error(t('msg.internalUrlsNotAllowed')))
|
|
} else {
|
|
showCyclicCallsWarning.value = true
|
|
}
|
|
}
|
|
|
|
resolve()
|
|
})
|
|
},
|
|
},
|
|
],
|
|
}),
|
|
...(hookRef.notification.type === 'Email' && {
|
|
'notification.payload.to': [fieldRequiredValidator()],
|
|
'notification.payload.subject': [fieldRequiredValidator()],
|
|
'notification.payload.body': [fieldRequiredValidator()],
|
|
}),
|
|
...(['Slack', 'Microsoft Teams', 'Discord', 'Mattermost'].includes(hookRef.notification.type) && {
|
|
'notification.payload.channels': [fieldRequiredValidator()],
|
|
'notification.payload.body': [fieldRequiredValidator()],
|
|
}),
|
|
...((hookRef.notification.type === 'Twilio' || hookRef.notification.type === 'Whatsapp Twilio') && {
|
|
'notification.payload.body': [fieldRequiredValidator()],
|
|
'notification.payload.to': [fieldRequiredValidator()],
|
|
}),
|
|
...(hookRef.notification.type === 'Script' && {
|
|
'notification.payload.scriptId': [fieldRequiredValidator()],
|
|
}),
|
|
}
|
|
})
|
|
const { validate, validateInfos } = useForm(hookRef, validators)
|
|
|
|
const getChannelsArray = (val: unknown) => {
|
|
if (val) {
|
|
if (Array.isArray(val)) {
|
|
return val
|
|
} else if (typeof val === 'object' && Object.keys(val).length > 0) {
|
|
return [val]
|
|
}
|
|
}
|
|
return []
|
|
}
|
|
|
|
function onNotificationTypeChange(reset = false) {
|
|
if (reset) {
|
|
hookRef.notification.payload = {} as Record<string, any>
|
|
if (['Slack', 'Microsoft Teams', 'Discord', 'Mattermost'].includes(hookRef.notification.type)) {
|
|
hookRef.notification.payload.channels = []
|
|
hookRef.notification.payload.body = ''
|
|
}
|
|
}
|
|
|
|
if (hookRef.notification.type === 'Slack') {
|
|
slackChannels.value = getChannelsArray(apps?.value?.Slack?.parsedInput)
|
|
}
|
|
|
|
if (hookRef.notification.type === 'Microsoft Teams') {
|
|
teamsChannels.value = getChannelsArray(apps?.value?.['Microsoft Teams']?.parsedInput)
|
|
}
|
|
|
|
if (hookRef.notification.type === 'Discord') {
|
|
discordChannels.value = getChannelsArray(apps?.value?.Discord?.parsedInput)
|
|
}
|
|
|
|
if (hookRef.notification.type === 'Mattermost') {
|
|
mattermostChannels.value = getChannelsArray(apps?.value?.Mattermost?.parsedInput)
|
|
}
|
|
|
|
if (hookRef.notification.type === 'Script') {
|
|
hookRef.notification.payload.scriptId = hookRef.notification.payload.scriptId || undefined
|
|
}
|
|
|
|
if (hookRef.notification.type === 'URL') {
|
|
const body = hookRef.notification.payload.body
|
|
hookRef.notification.payload.body = body ? (body === '{{ json data }}' ? '{{ json event }}' : body) : '{{ json event }}'
|
|
hookRef.notification.payload.parameters = hookRef.notification.payload.parameters || [{}]
|
|
hookRef.notification.payload.headers = hookRef.notification.payload.headers || [{}]
|
|
hookRef.notification.payload.method = hookRef.notification.payload.method || 'POST'
|
|
hookRef.notification.payload.path = hookRef.notification.payload.path || ''
|
|
hookRef.notification.payload.auth = hookRef.notification.payload.auth ?? ''
|
|
}
|
|
}
|
|
|
|
function setHook(newHook: HookType) {
|
|
const toAssign = { ...newHook }
|
|
if (newHook.version === 'v2') {
|
|
toAssign.version = 'v3'
|
|
toAssign.operation =
|
|
typeof newHook.operation === 'string'
|
|
? ([(newHook.operation as string).replace('bulk', '').toLowerCase()] as any[])
|
|
: newHook.operation
|
|
}
|
|
const notification = newHook.notification as Record<string, any>
|
|
Object.assign(hookRef, {
|
|
...toAssign,
|
|
notification: {
|
|
...notification,
|
|
include_user: notification?.include_user ?? false,
|
|
payload: notification.payload,
|
|
},
|
|
})
|
|
if (
|
|
['field', 'view', 'after'].includes(toAssign.event) &&
|
|
toAssign.operation &&
|
|
toAssign.operation.length === eventList.value.filter((k) => k.value[0] === toAssign.event).length
|
|
) {
|
|
sendMeEverythingChecked.value = true
|
|
} else {
|
|
sendMeEverythingChecked.value = false
|
|
}
|
|
|
|
hookRef.trigger_field = !!hookRef?.trigger_field
|
|
|
|
oldHookRef.value = clone(hookRef)
|
|
|
|
loadSampleData()
|
|
}
|
|
|
|
function onEventChange() {
|
|
const { notification: { payload = {}, type = {} } = {} } = hookRef
|
|
|
|
Object.assign(hookRef, {
|
|
...hookRef,
|
|
notification: {
|
|
...hookRef.notification,
|
|
type,
|
|
payload,
|
|
},
|
|
})
|
|
hookRef.notification.payload = payload
|
|
|
|
const channels: Ref<Record<string, any>[] | null> = ref(null)
|
|
|
|
switch (hookRef.notification.type) {
|
|
case 'Slack':
|
|
channels.value = slackChannels.value
|
|
break
|
|
case 'Microsoft Teams':
|
|
channels.value = teamsChannels.value
|
|
break
|
|
case 'Discord':
|
|
channels.value = discordChannels.value
|
|
break
|
|
case 'Mattermost':
|
|
channels.value = mattermostChannels.value
|
|
break
|
|
}
|
|
|
|
if (channels) {
|
|
hookRef.notification.payload.webhook_url =
|
|
hookRef.notification.payload.webhook_url &&
|
|
hookRef.notification.payload.webhook_url.map((v: { webhook_url: string }) =>
|
|
channels.value?.find((s) => v.webhook_url === s.webhook_url),
|
|
)
|
|
}
|
|
|
|
if (hookRef.notification.type === 'URL') {
|
|
hookRef.notification.payload = hookRef.notification.payload || {}
|
|
hookRef.notification.payload.parameters = hookRef.notification.payload.parameters || [{}]
|
|
hookRef.notification.payload.headers = hookRef.notification.payload.headers || [{}]
|
|
hookRef.notification.payload.method = hookRef.notification.payload.method || 'POST'
|
|
}
|
|
}
|
|
|
|
async function loadPluginList() {
|
|
if (isEeUI) return
|
|
try {
|
|
const plugins = (
|
|
await api.plugin.webhookList({
|
|
query: {
|
|
base_id: base.value.id,
|
|
},
|
|
})
|
|
).list!
|
|
|
|
apps.value = plugins.reduce((o, p) => {
|
|
const plugin: { title: string; tags: string[]; parsedInput: Record<string, any> } = {
|
|
title: '',
|
|
tags: [],
|
|
parsedInput: {},
|
|
...(p as any),
|
|
}
|
|
plugin.tags = p.tags ? p.tags.split(',') : []
|
|
plugin.parsedInput = parseProp(p.input)
|
|
o[plugin.title] = plugin
|
|
|
|
return o
|
|
}, {} as Record<string, any>)
|
|
} catch (e: any) {
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
}
|
|
}
|
|
|
|
const isConditionSupport = computed(() => {
|
|
return hookRef.event && !['field', 'view', 'manual'].includes(hookRef.event)
|
|
})
|
|
|
|
async function saveHooks() {
|
|
loading.value = true
|
|
try {
|
|
await validate()
|
|
if (hookRef.operation?.length === 0 && sendMeEverythingChecked.value === false) {
|
|
message.error('At least one operation need to be selected')
|
|
throw new Error('At least one operation need to be selected')
|
|
}
|
|
if (hookRef.notification.trigger_form && !hookRef.notification.trigger_form_id) {
|
|
message.error('You must select a trigger form')
|
|
throw new Error('You must select a trigger form')
|
|
}
|
|
} catch (error: any) {
|
|
console.error('validation error', error)
|
|
|
|
loading.value = false
|
|
|
|
return
|
|
}
|
|
|
|
let operations = [...(hookRef.operation ?? [])]
|
|
if (sendMeEverythingChecked.value === true) {
|
|
operations = eventList.value.filter((k) => k.value[0] === hookRef.event).map((k) => k.value[1])
|
|
}
|
|
|
|
try {
|
|
let res
|
|
if (hookRef.id) {
|
|
res = await $api.internal.postOperation(
|
|
base.value!.fk_workspace_id!,
|
|
base.value!.id!,
|
|
{
|
|
operation: 'hookUpdate',
|
|
hookId: hookRef.id,
|
|
},
|
|
{
|
|
...hookRef,
|
|
title: hookRef.title?.trim(),
|
|
operation: operations,
|
|
notification: {
|
|
...hookRef.notification,
|
|
payload: hookRef.notification.payload,
|
|
},
|
|
},
|
|
)
|
|
} else {
|
|
res = await $api.internal.postOperation(
|
|
base.value!.fk_workspace_id!,
|
|
base.value!.id!,
|
|
{
|
|
operation: 'hookCreate',
|
|
tableId: meta.value!.id!,
|
|
},
|
|
{
|
|
...hookRef,
|
|
title: hookRef.title?.trim(),
|
|
operation: operations,
|
|
notification: {
|
|
...hookRef.notification,
|
|
payload: hookRef.notification.payload,
|
|
},
|
|
} as HookReqType,
|
|
)
|
|
|
|
hooks.value.push(res)
|
|
updateStatLimit(PlanLimitTypes.LIMIT_WEBHOOK_PER_WORKSPACE, 1)
|
|
}
|
|
|
|
if (res && typeof res.notification === 'string') {
|
|
res.notification = JSON.parse(res.notification)
|
|
}
|
|
|
|
if (!hookRef.id && res) {
|
|
hookRef = { ...hookRef, ...res } as any
|
|
}
|
|
|
|
if (filterRef.value) {
|
|
await filterRef.value.applyChanges(hookRef.id, false, isConditionSupport.value)
|
|
}
|
|
|
|
// Webhook details updated successfully
|
|
hooks.value = hooks.value.map((h) => {
|
|
if (h.id === hookRef.id) {
|
|
return hookRef
|
|
}
|
|
return h
|
|
})
|
|
|
|
$e('a:webhook:add', {
|
|
operation: hookRef.operation,
|
|
condition: hookRef.condition,
|
|
notification: hookRef.notification.type,
|
|
})
|
|
|
|
emits('close', hookRef)
|
|
|
|
if (showUpgradeModal.value) {
|
|
message.success('Webhook upgraded to v3 successfully!')
|
|
}
|
|
} catch (e: any) {
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
} finally {
|
|
getMeta(activeTable.value.base_id!, activeTable.value.id, true)
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const closeModal = () => {
|
|
emits('close', hookRef)
|
|
}
|
|
|
|
const isTestLoading = ref(false)
|
|
|
|
const sampleData = ref()
|
|
|
|
const containerElem = ref()
|
|
|
|
const resolveInitialTab = (): HookTab => {
|
|
if (props.initialTab && props.hook) {
|
|
if (props.initialTab === 'log') return HookTab.Log
|
|
if (props.initialTab === 'settings') return HookTab.Settings
|
|
}
|
|
return HookTab.Configuration
|
|
}
|
|
|
|
const activeTab = ref<HookTab>(resolveInitialTab())
|
|
|
|
const [isVisible, toggleVisibility] = useToggle()
|
|
|
|
const toggleSamplePayload = () => {
|
|
toggleVisibility()
|
|
nextTick(() => {
|
|
if (isVisible.value) {
|
|
containerElem.value.scrollTop = containerElem.value.scrollHeight
|
|
}
|
|
})
|
|
}
|
|
|
|
async function testWebhook() {
|
|
try {
|
|
testConnectionError.value = ''
|
|
testSuccess.value = false
|
|
isTestLoading.value = true
|
|
await $api.internal.postOperation(
|
|
base.value!.fk_workspace_id!,
|
|
base.value!.id!,
|
|
{
|
|
operation: 'hookTest',
|
|
tableId: meta.value?.id as string,
|
|
},
|
|
{
|
|
hook: hookRef,
|
|
payload: sampleData.value,
|
|
} as HookTestReqType,
|
|
)
|
|
testSuccess.value = true
|
|
} catch (e: any) {
|
|
testConnectionError.value = await extractSdkResponseErrorMsg(e)
|
|
} finally {
|
|
isTestLoading.value = false
|
|
}
|
|
}
|
|
|
|
const supportedDocs: SupportedDocsType[] = [
|
|
{
|
|
title: 'Getting started',
|
|
href: 'https://nocodb.com/docs/product-docs/automation/webhook/create-webhook',
|
|
},
|
|
{
|
|
title: 'Create webhook',
|
|
href: 'https://nocodb.com/docs/product-docs/automation/webhook',
|
|
},
|
|
{
|
|
title: 'Custom payload',
|
|
href: 'https://nocodb.com/docs/product-docs/automation/webhook/create-webhook#webhook-with-custom-payload-',
|
|
},
|
|
{
|
|
title: 'Trigger on condition',
|
|
href: 'https://nocodb.com/docs/product-docs/automation/webhook/create-webhook#webhook-with-conditions',
|
|
},
|
|
]
|
|
|
|
watch(
|
|
() => hookRef?.event,
|
|
async () => {
|
|
await loadSampleData()
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
watch(
|
|
() => hookRef?.operation,
|
|
async () => {
|
|
await loadSampleData()
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
async function loadSampleData() {
|
|
const samplePayload = await $api.internal.getOperation(base.value!.fk_workspace_id!, base.value!.id!, {
|
|
operation: 'tableSampleData',
|
|
tableId: meta?.value?.id as string,
|
|
hookOperation: ((hookRef?.operation && hookRef?.operation[0]) as any) || 'insert',
|
|
version: hookRef.version!,
|
|
includeUser: (!!hookRef.notification?.include_user).toString(),
|
|
event: hookRef?.event ?? 'after',
|
|
})
|
|
// if non-URL based hook and version is v2, then return the newRowData as payload
|
|
// this is for backward compatibility
|
|
if (hookRef.notification.type !== 'URL' && ['v2', 'v3'].includes(hookRef.version)) {
|
|
sampleData.value = {
|
|
event: sampleData.value?.data?.rows,
|
|
}
|
|
} else {
|
|
sampleData.value = samplePayload
|
|
}
|
|
}
|
|
|
|
const getDefaultHookName = (hooks: HookType[]) => {
|
|
return extractNextDefaultName([...hooks.map((el) => el?.title || '')], defaultHookName)
|
|
}
|
|
|
|
const _getNotificationIconName = (type: string): keyof typeof iconMap => {
|
|
switch (type) {
|
|
case 'URL':
|
|
return 'link2'
|
|
case 'Email':
|
|
return 'mail'
|
|
case 'Slack':
|
|
return 'slack'
|
|
case 'Microsoft Teams':
|
|
return 'microsoftTeams'
|
|
case 'Discord':
|
|
return 'discord'
|
|
case 'Mattermost':
|
|
return 'mattermost'
|
|
case 'Twilio':
|
|
return 'twilio'
|
|
case 'Whatsapp Twilio':
|
|
return 'whatsapp'
|
|
}
|
|
}
|
|
|
|
const handleChangeTab = (tab: HookTab) => {
|
|
if (tab === HookTab.Log && showWebhookLogsFeatureAccessModal()) return
|
|
|
|
activeTab.value = tab
|
|
}
|
|
|
|
onKeyDown('Escape', () => {
|
|
modalVisible.value = false
|
|
})
|
|
|
|
watch(
|
|
() => hookRef.eventOperation,
|
|
() => {
|
|
if (!hookRef.eventOperation) return
|
|
|
|
const [event, operation] = hookRef.eventOperation.split(' ')
|
|
hookRef.event = event as HookType['event']
|
|
hookRef.operation = operation as HookType['operation']
|
|
},
|
|
)
|
|
|
|
watch(
|
|
() => props.hook,
|
|
() => {
|
|
if (props.hook) {
|
|
setHook(props.hook)
|
|
onEventChange()
|
|
} else {
|
|
// Set the default hook title only when creating a new hook.
|
|
hookRef.title = getDefaultHookName(hooks.value)
|
|
hookRef.event = eventList.value?.[0]?.value[0]
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
onMounted(async () => {
|
|
await loadPluginList()
|
|
|
|
onNotificationTypeChange()
|
|
|
|
if (!showUpgradeModal.value) {
|
|
until(() => titleDomRef.value as HTMLInputElement)
|
|
.toBeTruthy()
|
|
.then(() => {
|
|
titleDomRef.value?.focus()
|
|
titleDomRef.value?.select()
|
|
})
|
|
}
|
|
})
|
|
|
|
const toggleIncludeUser = async () => {
|
|
hookRef.notification.include_user = !hookRef.notification.include_user
|
|
await loadSampleData()
|
|
}
|
|
|
|
const triggerSubType = computed(() => {
|
|
if (sendMeEverythingChecked.value) {
|
|
return t('labels.sendAllEvents')
|
|
}
|
|
|
|
if (!hookRef.operation?.length) {
|
|
return 'Select operation'
|
|
}
|
|
|
|
const operations = hookRef.operation.map((o) => eventsLabelMap.value[hookRef.event]?.[o]?.text[1])
|
|
|
|
if (operations.length === 1) {
|
|
return `${hookRef.event === 'after' ? `${t('general.after')} ` : ''}${operations[0]}`
|
|
}
|
|
|
|
const lastOperation = operations.pop()
|
|
return `${hookRef.event === 'after' ? `${t('general.after')} ` : ''}${operations.join(', ')} ${t(
|
|
'general.or',
|
|
).toLowerCase()} ${lastOperation}`
|
|
})
|
|
|
|
const formatData = (data: any) => {
|
|
try {
|
|
return typeof data === 'object' ? JSON.stringify(data, null, 2) : JSON.stringify(JSON.parse(data), null, 2)
|
|
} catch {
|
|
return data
|
|
}
|
|
}
|
|
|
|
const webhookV2AndV3Diff = computed(() => {
|
|
return [
|
|
{
|
|
title: 'Webhook v2 response',
|
|
response: formatData(sampleDataV2.value ?? ''),
|
|
},
|
|
{
|
|
title: 'Webhook v3 response',
|
|
response: formatData(sampleData.value),
|
|
},
|
|
]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NcModal v-model:visible="modalVisible" :show-separator="true" size="large" wrap-class-name="nc-modal-webhook-create-edit">
|
|
<template #header>
|
|
<div class="flex w-full items-center pl-4 pr-3 py-3 justify-between">
|
|
<div class="flex items-center gap-3 flex-1">
|
|
<GeneralIcon class="text-nc-content-gray-emphasis h-5 w-5" icon="ncWebhook" />
|
|
<span class="text-nc-content-gray-emphasis font-semibold text-xl">
|
|
<template v-if="activeTab === HookTab.Configuration">
|
|
{{ showUpgradeModal ? hookRef.title : !hook ? $t('activity.newWebhook') : 'Webhook Settings' }}
|
|
</template>
|
|
<template v-else-if="activeTab === HookTab.Log">
|
|
{{ $t('activity.webhookLogs') }}
|
|
</template>
|
|
<template v-else-if="activeTab === HookTab.Settings"> Webhook Settings </template>
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
v-if="hook && appInfo.ee && !showUpgradeModal"
|
|
class="flex flex-row p-1 bg-nc-bg-gray-medium rounded-lg gap-x-0.5 nc-view-sidebar-tab"
|
|
>
|
|
<div
|
|
v-e="['c:webhook:edit']"
|
|
class="tab"
|
|
:class="{
|
|
active: activeTab === HookTab.Configuration,
|
|
}"
|
|
@click="handleChangeTab(HookTab.Configuration)"
|
|
>
|
|
<div class="tab-title nc-tab">{{ $t('general.details') }}</div>
|
|
</div>
|
|
<div
|
|
v-e="['c:webhook:log']"
|
|
class="tab"
|
|
:class="{
|
|
active: activeTab === HookTab.Log,
|
|
}"
|
|
@click="handleChangeTab(HookTab.Log)"
|
|
>
|
|
<div class="tab-title nc-tab">{{ $t('general.logs') }}</div>
|
|
</div>
|
|
<div
|
|
v-e="['c:webhook:settings']"
|
|
class="tab"
|
|
:class="{
|
|
active: activeTab === HookTab.Settings,
|
|
}"
|
|
@click="handleChangeTab(HookTab.Settings)"
|
|
>
|
|
<div class="tab-title nc-tab">{{ $t('labels.settings') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end items-center gap-3 flex-1">
|
|
<template v-if="activeTab === HookTab.Configuration">
|
|
<NcTooltip v-if="!showUpgradeModal" :disabled="!testConnectionError && hookRef.notification.type !== 'Script'">
|
|
<template v-if="hookRef.notification.type === 'Script'" #title> Test webhook is disabled for scripts </template>
|
|
<template v-else #title>
|
|
{{ testConnectionError }}
|
|
</template>
|
|
<NcButton
|
|
:loading="isTestLoading"
|
|
type="secondary"
|
|
size="small"
|
|
icon-position="right"
|
|
:disabled="hookRef.notification.type === 'Script'"
|
|
@click="testWebhook"
|
|
>
|
|
<template #icon>
|
|
<GeneralIcon v-if="testSuccess" icon="circleCheckSolid" class="!text-green-700 w-4 h-4 flex-none" />
|
|
<GeneralIcon
|
|
v-else-if="testConnectionError"
|
|
icon="alertTriangleSolid"
|
|
class="!text-red-700 w-4 h-4 flex-none"
|
|
/>
|
|
</template>
|
|
<span>
|
|
{{ testSuccess ? 'Test Successful' : $t('activity.testWebhook') }}
|
|
</span>
|
|
</NcButton>
|
|
</NcTooltip>
|
|
<NcButton v-else type="secondary" size="small" @click.stop="emits('cancel')">
|
|
{{ $t('general.cancel') }}
|
|
</NcButton>
|
|
|
|
<NcButton
|
|
:loading="loading"
|
|
type="primary"
|
|
size="small"
|
|
:disabled="!hasUnsavedChanges"
|
|
data-testid="nc-save-webhook"
|
|
@click.stop="saveHooks"
|
|
>
|
|
{{
|
|
showUpgradeModal
|
|
? $t('general.upgrade')
|
|
: hook
|
|
? $t('labels.multiField.saveChanges')
|
|
: $t('activity.createWebhook')
|
|
}}
|
|
</NcButton>
|
|
</template>
|
|
<NcButton type="text" size="small" data-testid="nc-close-webhook-modal" @click.stop="closeModal">
|
|
<GeneralIcon icon="close" />
|
|
</NcButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div v-if="activeTab === HookTab.Configuration" class="flex bg-nc-bg-default rounded-b-2xl h-[calc(100%_-_56px)]">
|
|
<div v-if="showUpgradeModal" class="h-full w-full overflow-auto nc-scrollbar-thin">
|
|
<div class="h-full w-full max-w-[1040] min-w-[640px] px-6 md:px-12 py-6 flex flex-col">
|
|
<div class="flex flex-col gap-2 mb-8">
|
|
<div class="text-base font-bold text-nc-content-gray-emphasis">Change in webhook response</div>
|
|
<div class="text-sm font-normal text-nc-content-gray-subtle2">
|
|
For more information on webhooks v3 visit
|
|
<a
|
|
href="https://nocodb.com/docs/product-docs/automation/webhook/webhook-v2-vs-v3#upgrade-to-webhook-v3"
|
|
class="nc-link"
|
|
target="_blank"
|
|
>
|
|
NocoDB Docs.
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nc-webhook-version-diff">
|
|
<div v-for="(item, idx) of webhookV2AndV3Diff" :key="idx" class="nc-item">
|
|
<div class="nc-item-title">{{ item.title }}</div>
|
|
<div class="nc-item-response">
|
|
<Suspense>
|
|
<template #default>
|
|
<MonacoEditor
|
|
:model-value="item.response"
|
|
class="flex-1 min-h-50 resize-y overflow-auto expanded-editor"
|
|
hide-minimap
|
|
disable-deep-compare
|
|
read-only
|
|
:monaco-config="{
|
|
lineNumbers: 'on',
|
|
scrollbar: {
|
|
verticalScrollbarSize: 6,
|
|
horizontalScrollbarSize: 6,
|
|
},
|
|
padding: {
|
|
top: 12,
|
|
bottom: 12,
|
|
},
|
|
scrollBeyondLastLine: false,
|
|
}"
|
|
:monaco-custom-theme="{
|
|
base: 'vs',
|
|
inherit: true,
|
|
rules: [],
|
|
colors: {
|
|
'editor.background': '#f9f9fa',
|
|
},
|
|
}"
|
|
@keydown.enter.stop
|
|
@keydown.alt.stop
|
|
/>
|
|
</template>
|
|
<template #fallback>
|
|
<MonacoLoading class="flex-1 min-h-50 w-full" />
|
|
</template>
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<!-- Just to maintain bottom padding -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-else>
|
|
<div
|
|
ref="containerElem"
|
|
class="h-full flex-1 flex flex-col overflow-y-auto scroll-smooth nc-scrollbar-thin px-6 md:px-12 py-6 mx-auto"
|
|
>
|
|
<div class="max-w-[640px] min-w-[564px] w-full mx-auto gap-8 flex flex-col">
|
|
<a-form-item v-bind="validateInfos.title">
|
|
<div
|
|
class="flex flex-grow px-2 py-1 title-input items-center border-b-1 rounded-t-md border-nc-border-gray-medium bg-nc-bg-gray-light"
|
|
@click.prevent="titleDomRef?.focus()"
|
|
>
|
|
<input
|
|
ref="titleDomRef"
|
|
v-model="hookRef.title"
|
|
class="flex flex-grow text-lg px-2 font-medium capitalize outline-none bg-inherit nc-text-field-hook-title"
|
|
:placeholder="$t('placeholder.webhookTitle')"
|
|
:contenteditable="true"
|
|
@keydown.enter="titleDomRef?.blur()"
|
|
/>
|
|
<GeneralIcon icon="rename" class="cursor-text" @click="titleDomRef?.focus()" />
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<a-form class="flex flex-col gap-8" :model="hookRef" name="create-or-edit-webhook">
|
|
<div class="flex flex-col">
|
|
<div class="text-nc-content-gray text-base font-bold leading-6">
|
|
{{ $t('general.trigger') }}
|
|
</div>
|
|
<div
|
|
class="mt-3 p-4 border-1 border-nc-border-gray-medium"
|
|
:class="{
|
|
'border-b-0 rounded-t-2xl': isConditionSupport,
|
|
'rounded-2xl': !isConditionSupport,
|
|
}"
|
|
>
|
|
<div class="w-full flex gap-3">
|
|
<a-form-item class="w-full !my-0">
|
|
<NcSelect
|
|
v-model:value="hookRef.event"
|
|
class="w-full webhook-event-select nc-select-shadow"
|
|
data-testid="nc-dropdown-hook-event"
|
|
dropdown-class-name="nc-modal-hook-event"
|
|
@change="handleEventChange"
|
|
>
|
|
<a-select-option v-for="event of eventsEnum" :key="event.value"> {{ event.text }}</a-select-option>
|
|
</NcSelect>
|
|
</a-form-item>
|
|
<NcDropdown v-if="['field', 'view', 'after'].includes(hookRef.event)" v-model:visible="isDropdownOpen">
|
|
<div
|
|
class="rounded-lg border-1 w-full transition-all cursor-pointer flex items-center border-nc-border-gray-medium h-8 py-1 gap-2 px-4 py-2 h-[36px] shadow-default"
|
|
data-testid="nc-dropdown-hook-operation"
|
|
:class="{
|
|
'!border-nc-border-brand !shadow-selected': isDropdownOpen,
|
|
'!hover:shadow-hover': !isDropdownOpen,
|
|
}"
|
|
>
|
|
<div class="text-nc-content-gray flex-1">
|
|
{{ triggerSubType }}
|
|
</div>
|
|
|
|
<GeneralIcon
|
|
:class="{
|
|
'transform rotate-180': isDropdownOpen,
|
|
}"
|
|
class="transition-all"
|
|
style="width: 12.5px; height: 12.5px; margin-right: -6px"
|
|
icon="ncChevronDown"
|
|
/>
|
|
</div>
|
|
|
|
<template #overlay>
|
|
<NcMenu
|
|
class="webhook-trigger-selection"
|
|
variant="medium"
|
|
data-testid="nc-dropdown-hook-operation-modal"
|
|
data-testvalue="send_everything"
|
|
>
|
|
<template v-if="['field', 'view', 'after'].includes(hookRef.event)">
|
|
<NcMenuItem
|
|
data-testid="nc-dropdown-hook-operation-option"
|
|
data-testvalue="sendMeEverything"
|
|
@click.stop="toggleSendMeEverythingChecked"
|
|
>
|
|
<div class="flex-1 w-full text-sm">
|
|
{{ $t('labels.sendAllEvents') }}
|
|
</div>
|
|
<NcCheckbox :checked="sendMeEverythingChecked" />
|
|
</NcMenuItem>
|
|
|
|
<NcDivider />
|
|
</template>
|
|
|
|
<NcMenuItem
|
|
v-for="operation of operationsEnum"
|
|
:key="operation.value"
|
|
data-testid="nc-dropdown-hook-operation-option"
|
|
:data-testvalue="operation.value"
|
|
@click.prevent="toggleOperation(operation.value)"
|
|
>
|
|
<div class="flex-1 w-full text-sm">
|
|
<template v-if="['field', 'view', 'after'].includes(hookRef.event)">
|
|
{{ $t('general.after') }}
|
|
</template>
|
|
{{ operation.text }}
|
|
</div>
|
|
<NcCheckbox :checked="hookRef.operation!.includes(operation.value as any)" />
|
|
</NcMenuItem>
|
|
</NcMenu>
|
|
</template>
|
|
</NcDropdown>
|
|
</div>
|
|
</div>
|
|
<div v-if="isConditionSupport" class="border-1 border-nc-border-gray-medium rounded-b-2xl px-4 pt-4">
|
|
<div class="w-full flex items-center justify-between h-[28px]">
|
|
<label class="cursor-pointer flex items-center" @click.prevent="hookRef.condition = !hookRef.condition">
|
|
<NcSwitch :checked="Boolean(hookRef.condition)" class="nc-check-box-hook-condition">
|
|
<span class="!text-nc-content-gray-subtle font-semibold"> Trigger only when conditions match </span>
|
|
</NcSwitch>
|
|
</label>
|
|
|
|
<div v-if="hookRef.condition" class="flex gap-2">
|
|
<NcButton
|
|
size="xs"
|
|
type="secondary"
|
|
class="nc-btn-focus"
|
|
data-testid="add-filter"
|
|
@click.stop="filterRef.addFilter()"
|
|
>
|
|
<div class="flex items-center gap-1">
|
|
<component :is="iconMap.plus" />
|
|
<!-- Add Filter -->
|
|
{{ $t('activity.addFilter') }}
|
|
</div>
|
|
</NcButton>
|
|
|
|
<NcButton
|
|
class="nc-btn-focus"
|
|
type="secondary"
|
|
size="xs"
|
|
data-testid="add-filter-group"
|
|
@click.stop="filterRef.addFilterGroup()"
|
|
>
|
|
<div class="flex items-center gap-1">
|
|
<!-- Add Filter Group -->
|
|
<component :is="iconMap.plus" />
|
|
{{ $t('activity.addFilterGroup') }}
|
|
</div>
|
|
</NcButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="mb-4"
|
|
:class="{
|
|
'nc-filter-ref-wrapper': hookRef.condition,
|
|
}"
|
|
>
|
|
<LazySmartsheetToolbarColumnFilter
|
|
v-if="hookRef.condition"
|
|
ref="filterRef"
|
|
:hidden-add-new-filter="true"
|
|
class="w-full !py-0"
|
|
:auto-save="false"
|
|
:show-loading="false"
|
|
:hook-id="hookRef.id"
|
|
:web-hook="true"
|
|
action-btn-type="secondary"
|
|
@update:filters-length="hookRef.condition = $event > 0"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="appInfo.ee && hookRef.event === 'after' && hookRef.operation?.includes('update')" class="mb-4">
|
|
<WebhookTriggerByField
|
|
v-model:trigger-fields="hookRef.trigger_fields"
|
|
v-model:trigger-field="hookRef.trigger_field"
|
|
:columns="triggerByFieldColumns"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
v-if="appInfo.ee && meta?.id && hookRef.event === 'after' && hookRef.operation?.includes('insert')"
|
|
v-bind="validateInfos['notification.trigger_form_id']"
|
|
class="w-full mb-4"
|
|
>
|
|
<WebhookTriggerByForm
|
|
v-model:trigger-form="hookRef.notification.trigger_form"
|
|
v-model:trigger-form-id="hookRef.notification.trigger_form_id"
|
|
:table-id="meta.id"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-nc-content-gray text-base mt-6 font-bold leading-6">
|
|
{{ $t('general.action') }}
|
|
</div>
|
|
|
|
<div
|
|
class="mt-3 border-1 custom-select border-nc-border-gray-medium p-4"
|
|
:class="{
|
|
'rounded-t-2xl border-b-0': hookRef.notification.type !== 'Script',
|
|
'rounded-2xl': hookRef.notification.type === 'Script',
|
|
}"
|
|
>
|
|
<div v-if="appInfo.ee" class="flex w-full my-3">
|
|
<a-form-item v-bind="validateInfos['notification.type']" class="w-full">
|
|
<NcSelect
|
|
v-model:value="hookRef.notification.type"
|
|
class="w-full nc-select-shadow nc-select-hook-notification-type"
|
|
data-testid="nc-dropdown-hook-notification-type"
|
|
@change="onNotificationTypeChange(true)"
|
|
>
|
|
<a-select-option v-for="type in notificationTypes" :key="type.type" :value="type.type">
|
|
<div class="flex items-center">
|
|
<component :is="iconMap[type.type]" class="text-nc-content-gray-subtle mr-2" />
|
|
{{ type.label }}
|
|
</div>
|
|
</a-select-option>
|
|
</NcSelect>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<template v-if="appInfo.ee && hookRef.notification.type === 'Script'">
|
|
<a-form-item class="flex w-full my-3" v-bind="validateInfos['notification.payload.scriptId']">
|
|
<NcListScriptSelector
|
|
v-model:value="hookRef.notification.payload.scriptId"
|
|
data-testid="nc-dropdown-hook-notification-type"
|
|
class="nc-select-hook-scrip-type"
|
|
:base-id="activeTable?.base_id"
|
|
:disable-label="true"
|
|
:map-script="filterScripts"
|
|
:auto-select="false"
|
|
/>
|
|
</a-form-item>
|
|
</template>
|
|
|
|
<template v-if="hookRef.notification.type === 'URL'">
|
|
<div class="flex gap-3">
|
|
<a-form-item class="w-1/3">
|
|
<a-select
|
|
v-model:value="hookRef.notification.payload.method"
|
|
size="medium"
|
|
class="nc-select-hook-url-method"
|
|
dropdown-class-name="nc-dropdown-hook-notification-url-method"
|
|
show-search
|
|
:filter-option="(input, option) => antSelectFilterOption(input, option, ['value'])"
|
|
>
|
|
<template #suffixIcon>
|
|
<GeneralIcon icon="arrowDown" class="text-nc-content-gray-subtle" />
|
|
</template>
|
|
|
|
<a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">
|
|
<div class="flex items-center gap-2 justify-between w-full">
|
|
<div>{{ method.title }}</div>
|
|
<component
|
|
:is="iconMap.check"
|
|
v-if="hookRef.notification.payload.method === method.title"
|
|
id="nc-selected-item-icon"
|
|
class="text-primary w-4 h-4 flex-none"
|
|
/>
|
|
</div>
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item class="w-2/3" v-bind="validateInfos['notification.payload.path']">
|
|
<div class="flex flex-col gap-2">
|
|
<a-input
|
|
v-model:value="hookRef.notification.payload.path"
|
|
size="medium"
|
|
placeholder="http://example.com"
|
|
class="nc-text-field-hook-url-path nc-input-shadow h-9 !rounded-lg"
|
|
/>
|
|
<div v-if="showCyclicCallsWarning" class="text-xs text-warning pl-2">
|
|
{{ $t('msg.cyclicCallsWarning') }}
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div
|
|
v-if="hookRef.notification.type === 'URL'"
|
|
class="border-1 border-nc-border-gray-medium rounded-b-2xl pt-4 px-4 pb-2"
|
|
>
|
|
<NcTabs v-model:active-key="urlTabKey">
|
|
<a-tab-pane key="params" :tab="$t('title.parameter')" force-render>
|
|
<LazyApiClientParams v-model="hookRef.notification.payload.parameters" />
|
|
</a-tab-pane>
|
|
|
|
<a-tab-pane key="headers" :tab="$t('title.headers')" class="nc-tab-headers">
|
|
<LazyApiClientHeaders v-model="hookRef.notification.payload.headers" />
|
|
</a-tab-pane>
|
|
|
|
<a-tab-pane key="body" tab="Body">
|
|
<div
|
|
style="
|
|
box-shadow: 0px 0px 4px 0px rgba(var(--rgb-base), 0.08), 0px 0px 4px 0px rgba(var(--rgb-base), 0.08);
|
|
"
|
|
class="my-3 mx-1 rounded-lg overflow-hidden"
|
|
>
|
|
<Suspense>
|
|
<template #default>
|
|
<MonacoEditor
|
|
v-model="hookRef.notification.payload.body"
|
|
lang="handlebars"
|
|
disable-deep-compare
|
|
:validate="false"
|
|
class="min-h-60 max-h-80 !rounded-lg"
|
|
:monaco-config="{
|
|
minimap: {
|
|
enabled: false,
|
|
},
|
|
padding: {
|
|
top: 8,
|
|
bottom: 8,
|
|
},
|
|
fontSize: 14.5,
|
|
overviewRulerBorder: false,
|
|
overviewRulerLanes: 0,
|
|
hideCursorInOverviewRuler: true,
|
|
lineDecorationsWidth: 8,
|
|
lineNumbersMinChars: 0,
|
|
roundedSelection: false,
|
|
selectOnLineNumbers: false,
|
|
scrollBeyondLastLine: false,
|
|
contextmenu: false,
|
|
glyphMargin: false,
|
|
folding: false,
|
|
bracketPairColorization: {
|
|
enabled: false,
|
|
},
|
|
wordWrap: 'on',
|
|
scrollbar: {
|
|
horizontal: 'hidden',
|
|
verticalScrollbarSize: 6,
|
|
},
|
|
wrappingStrategy: 'advanced',
|
|
renderLineHighlight: 'none',
|
|
tabSize: 4,
|
|
stickyScroll: {
|
|
enabled: props.stickyScroll,
|
|
},
|
|
}"
|
|
/>
|
|
</template>
|
|
<template #fallback>
|
|
<MonacoLoading class="min-h-60 max-h-80 !rounded-lg w-full" />
|
|
</template>
|
|
</Suspense>
|
|
</div>
|
|
</a-tab-pane>
|
|
</NcTabs>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="['Slack', 'Microsoft Teams', 'Discord', 'Mattermost'].includes(hookRef.notification.type)"
|
|
class="flex flex-col gap-4"
|
|
>
|
|
<div v-if="hookRef.notification.type === 'Slack'" class="flex flex-col w-full gap-3">
|
|
<a-form-item v-bind="validateInfos['notification.payload.channels']">
|
|
<WebhookChannelMultiSelect
|
|
v-model="hookRef.notification.payload.channels"
|
|
:selected-channel-list="hookRef.notification.payload.channels"
|
|
:available-channel-list="slackChannels"
|
|
:placeholder="$t('placeholder.selectSlackChannels')"
|
|
/>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<div v-if="hookRef.notification.type === 'Microsoft Teams'" class="flex flex-col w-full gap-3">
|
|
<a-form-item v-bind="validateInfos['notification.payload.channels']">
|
|
<WebhookChannelMultiSelect
|
|
v-model="hookRef.notification.payload.channels"
|
|
:selected-channel-list="hookRef.notification.payload.channels"
|
|
:available-channel-list="teamsChannels"
|
|
:placeholder="$t('placeholder.selectTeamsChannels')"
|
|
/>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<div v-if="hookRef.notification.type === 'Discord'" class="flex flex-col w-full gap-3">
|
|
<a-form-item v-bind="validateInfos['notification.payload.channels']">
|
|
<WebhookChannelMultiSelect
|
|
v-model="hookRef.notification.payload.channels"
|
|
:selected-channel-list="hookRef.notification.payload.channels"
|
|
:available-channel-list="discordChannels"
|
|
:placeholder="$t('placeholder.selectDiscordChannels')"
|
|
/>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<div v-if="hookRef.notification.type === 'Mattermost'" class="flex flex-col w-full gap-3">
|
|
<a-form-item v-bind="validateInfos['notification.payload.channels']">
|
|
<WebhookChannelMultiSelect
|
|
v-model="hookRef.notification.payload.channels"
|
|
:selected-channel-list="hookRef.notification.payload.channels"
|
|
:available-channel-list="mattermostChannels"
|
|
:placeholder="$t('placeholder.selectMattermostChannels')"
|
|
/>
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="appInfo.ee && hookRef.notification.type !== 'Script'">
|
|
<div>
|
|
<div class="w-full cursor-pointer flex items-center" @click.prevent="toggleIncludeUser">
|
|
<NcSwitch :checked="Boolean(hookRef.notification.include_user)" class="nc-check-box-include-user">
|
|
<span class="!text-nc-content-gray-subtle font-semibold">{{ $t('labels.includeUser') }}</span>
|
|
</NcSwitch>
|
|
<NcTooltip class="flex">
|
|
<template #title>
|
|
{{ $t('tooltip.includeUserHint') }}
|
|
</template>
|
|
<GeneralIcon icon="info" class="text-nc-content-gray-disabled ml-1" />
|
|
</NcTooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a-form-item v-if="formInput[hookRef.notification.type] && hookRef.notification.payload">
|
|
<div class="flex flex-col gap-4">
|
|
<div v-for="(input, i) in formInput[hookRef.notification.type]" :key="i">
|
|
<a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]">
|
|
<a-textarea
|
|
v-model:value="hookRef.notification.payload[input.key]"
|
|
class="!rounded-lg !min-h-[120px] nc-scrollbar-thin nc-input-shadow"
|
|
:placeholder="input.label"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]">
|
|
<a-input
|
|
v-model:value="hookRef.notification.payload[input.key]"
|
|
class="!rounded-lg nc-input-shadow !h-9"
|
|
:placeholder="input.label"
|
|
/>
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<div v-if="hookRef.notification.type !== 'Script'">
|
|
<NcDivider />
|
|
<div class="flex items-center justify-between -ml-1.5 !mt-[32px]">
|
|
<NcButton type="text" class="mb-3" size="small" @click="toggleSamplePayload()">
|
|
<div class="flex items-center gap-3">
|
|
Sample Payload
|
|
|
|
<GeneralIcon
|
|
class="transition-transform"
|
|
:class="{
|
|
'transform rotate-180': isVisible,
|
|
}"
|
|
icon="arrowDown"
|
|
/>
|
|
</div>
|
|
</NcButton>
|
|
</div>
|
|
<div v-show="isVisible">
|
|
<Suspense>
|
|
<template #default>
|
|
<MonacoEditor
|
|
v-model="sampleData"
|
|
read-only
|
|
:monaco-config="{
|
|
minimap: {
|
|
enabled: false,
|
|
},
|
|
fontSize: 14.5,
|
|
overviewRulerBorder: false,
|
|
overviewRulerLanes: 0,
|
|
hideCursorInOverviewRuler: true,
|
|
lineDecorationsWidth: 12,
|
|
lineNumbersMinChars: 0,
|
|
scrollBeyondLastLine: false,
|
|
renderLineHighlight: 'none',
|
|
lineNumbers: 'off',
|
|
glyphMargin: false,
|
|
folding: false,
|
|
bracketPairColorization: { enabled: false },
|
|
wordWrap: 'on',
|
|
scrollbar: {
|
|
horizontal: 'hidden',
|
|
verticalScrollbarSize: 6,
|
|
},
|
|
wrappingStrategy: 'advanced',
|
|
tabSize: 4,
|
|
readOnly: true,
|
|
}"
|
|
:monaco-custom-theme="isDark ? jsonThemeDark : jsonThemeLight"
|
|
class="transition-all border-1 rounded-lg"
|
|
style="
|
|
box-shadow: 0px 0px 4px 0px rgba(var(--rgb-base), 0.08), 0px 0px 4px 0px rgba(var(--rgb-base), 0.08);
|
|
"
|
|
:class="{
|
|
'w-0 min-w-0': !isVisible,
|
|
'min-h-60 max-h-80': isVisible,
|
|
}"
|
|
/>
|
|
</template>
|
|
<template #fallback>
|
|
<MonacoLoading class="min-h-60 max-h-80 w-full" />
|
|
</template>
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
|
|
<NcModalSupportedDocsSidebar>
|
|
<NcModalSupportedDocs :docs="supportedDocs"> </NcModalSupportedDocs>
|
|
</NcModalSupportedDocsSidebar>
|
|
</template>
|
|
</div>
|
|
<div v-else-if="activeTab === HookTab.Log" class="h-[calc(100%_-_57px)]">
|
|
<WebhookCallLog :hook="hook" />
|
|
</div>
|
|
<div v-else-if="appInfo.ee && activeTab === HookTab.Settings" class="h-[calc(100%_-_57px)]">
|
|
<WebhookErrorNotifications v-if="hook?.id" :hook-id="hook.id" />
|
|
</div>
|
|
</NcModal>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.nc-modal-webhook-create-edit {
|
|
z-index: 1050;
|
|
a:not(.nc-link) {
|
|
@apply !no-underline !text-nc-content-gray-subtle !hover:text-primary;
|
|
}
|
|
.nc-modal {
|
|
@apply !p-0;
|
|
height: min(calc(100vh - 100px), 1024px);
|
|
max-height: min(calc(100vh - 100px), 1024px) !important;
|
|
}
|
|
|
|
.nc-modal-header {
|
|
@apply !mb-0 !pb-0;
|
|
}
|
|
|
|
.webhook-event-select div.ant-select-selector {
|
|
height: 36px !important;
|
|
.ant-select-selection-item {
|
|
@apply font-500 text-nc-content-gray;
|
|
}
|
|
}
|
|
|
|
.nc-webhook-version-diff {
|
|
.monaco-editor {
|
|
@apply !border-t-0 !rounded-none pr-3;
|
|
}
|
|
.overflow-guard {
|
|
@apply !border-0 !rounded-none;
|
|
}
|
|
.monaco-editor,
|
|
.monaco-diff-editor,
|
|
.monaco-component {
|
|
--vscode-editor-background: var(--color-gray-50);
|
|
--vscode-editorGutter-background: var(--color-gray-50);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
.webhook-trigger-selection {
|
|
:deep(.nc-menu-item-inner) {
|
|
@apply !w-full;
|
|
}
|
|
}
|
|
|
|
.nc-button :not(.nc-icon):not(.material-symbols) {
|
|
@apply !w-full;
|
|
}
|
|
|
|
.title-input {
|
|
&:focus-within {
|
|
@apply transition-all duration-0.3s border-b-nc-border-brand;
|
|
box-shadow: 0px 2px 0px 0px rgba(51, 102, 255, 0.24);
|
|
}
|
|
}
|
|
|
|
:deep(.ant-radio-group .ant-radio-wrapper) {
|
|
@apply transition-all duration-0.3s;
|
|
|
|
&.ant-radio-wrapper-checked:not(.ant-radio-wrapper-disabled):focus-within {
|
|
@apply shadow-selected;
|
|
}
|
|
|
|
&.ant-radio-wrapper-disabled {
|
|
@apply pointer-events-none !bg-[#f5f5f5];
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&:not(.ant-radio-wrapper-disabled):not(:hover):not(:focus-within):not(.shadow-selected) {
|
|
box-shadow: 0px 0px 4px 0px rgba(var(--rgb-base), 0.08);
|
|
}
|
|
|
|
&:hover:not(:focus-within):not(.ant-radio-wrapper-disabled) {
|
|
box-shadow: 0px 0px 4px 0px rgba(var(--rgb-base), 0.24);
|
|
}
|
|
}
|
|
|
|
.custom-select {
|
|
:deep(.ant-select) {
|
|
.ant-select-selector {
|
|
@apply !h-9;
|
|
|
|
.ant-select-selection-placeholder {
|
|
@apply leading-[36px];
|
|
}
|
|
}
|
|
|
|
.ant-select-selection-item {
|
|
@apply !h-9;
|
|
}
|
|
|
|
&:not(.ant-select-disabled):not(:hover):not(.ant-select-focused) .ant-select-selector,
|
|
&:not(.ant-select-disabled):hover.ant-select-disabled .ant-select-selector {
|
|
box-shadow: 0px 0px 4px 0px rgba(var(--rgb-base), 0.08);
|
|
}
|
|
|
|
&:hover:not(.ant-select-focused):not(.ant-select-disabled) .ant-select-selector {
|
|
@apply border-nc-border-gray-dark;
|
|
box-shadow: 0px 0px 4px 0px rgba(var(--rgb-base), 0.24);
|
|
}
|
|
|
|
&.ant-select-disabled .ant-select-selector {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.ant-form-item-label > label) {
|
|
@apply !text-small !leading-[18px] mb-2 text-nc-content-gray-subtle flex;
|
|
|
|
&.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
|
|
@apply content-[''] m-0;
|
|
}
|
|
}
|
|
|
|
:deep(.ant-form-item-label) {
|
|
@apply !pb-0 text-small leading-[18px] text-nc-content-gray-subtle;
|
|
}
|
|
|
|
:deep(.ant-form-item-control-input) {
|
|
@apply !min-h-min;
|
|
}
|
|
|
|
:deep(.ant-form-item) {
|
|
@apply !mb-0;
|
|
}
|
|
|
|
:deep(.ant-select-selection-item) {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
:deep(.ant-form-item-explain) {
|
|
@apply !text-[10px] leading-normal;
|
|
|
|
& > div:first-child {
|
|
@apply mt-0.5;
|
|
}
|
|
}
|
|
|
|
:deep(.ant-form-item-explain) {
|
|
@apply !min-h-[15px];
|
|
}
|
|
|
|
:deep(.ant-alert) {
|
|
@apply !rounded-lg !bg-transparent !border-none !p-0;
|
|
|
|
.ant-alert-message {
|
|
@apply text-sm text-nc-content-gray font-weight-600;
|
|
}
|
|
|
|
.ant-alert-description {
|
|
@apply text-small text-nc-content-gray-muted font-weight-500;
|
|
}
|
|
}
|
|
|
|
:deep(.ant-select) {
|
|
.ant-select-selector {
|
|
@apply !rounded-lg;
|
|
}
|
|
}
|
|
|
|
:deep(input::placeholder),
|
|
:deep(textarea::placeholder) {
|
|
@apply text-nc-content-gray-muted;
|
|
}
|
|
:deep(.nc-tabs .ant-tabs-nav) {
|
|
@apply pl-0;
|
|
.ant-tabs-tab {
|
|
@apply pt-1 pb-1.5;
|
|
}
|
|
}
|
|
:deep(.ant-select-multiple .ant-select-selection-item-remove > .anticon) {
|
|
vertical-align: 0px !important;
|
|
}
|
|
|
|
.tab {
|
|
@apply flex flex-row items-center h-6 justify-center px-2 py-1 rounded-md gap-x-2 text-nc-content-gray-subtle2 hover:text-nc-content-gray-extreme cursor-pointer transition-all duration-300 select-none;
|
|
}
|
|
|
|
.tab-icon {
|
|
font-size: 1rem !important;
|
|
@apply w-4;
|
|
}
|
|
.tab .tab-title {
|
|
@apply min-w-0 text-sm;
|
|
word-break: keep-all;
|
|
white-space: nowrap;
|
|
display: inline;
|
|
line-height: 0.95;
|
|
}
|
|
|
|
.active {
|
|
@apply bg-nc-bg-default text-nc-content-brand-disabled hover:text-nc-content-brand-disabled;
|
|
|
|
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.nc-filter-ref-wrapper {
|
|
@apply mb-4;
|
|
|
|
&:has(.nc-filter-top-wrapper) {
|
|
@apply mb-1;
|
|
}
|
|
}
|
|
|
|
.nc-webhook-version-diff {
|
|
@apply flex-1 !w-full flex items-stretch space-x-6 children:w-[calc(50%_-_12px)];
|
|
|
|
.nc-item {
|
|
@apply bg-nc-bg-gray-extralight rounded-lg border-1 border-nc-border-gray-medium flex flex-col;
|
|
|
|
.nc-item-title {
|
|
@apply px-3 py-1.5 border-b-1 border-nc-border-gray-medium font-bold text-nc-content-gray-subtle2 text-small1;
|
|
}
|
|
|
|
.nc-item-response {
|
|
@apply flex-1 flex overflow-hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.nc-filter-field-select .ant-select-selector .field-selection-tooltip-wrapper) {
|
|
@apply !max-w-none;
|
|
}
|
|
</style>
|