github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #2838 from nocodb/feat/gui-v2-webhooks 

feat(gui-v2): webhooks
pull/2961/head
աɨռɢӄաօռɢ 2 years ago committed by GitHub
parent
75683fcd7f 1a2ec5d2c0
commit
7178d322dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 1063 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 120
      packages/nc-gui-v2/components/api-client/Headers.vue
  2. 74
      packages/nc-gui-v2/components/api-client/Params.vue
  3. 57
      packages/nc-gui-v2/components/monaco/Editor.vue
  4. 14
      packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
  5. 35
      packages/nc-gui-v2/components/webhook/Drawer.vue
  6. 613
      packages/nc-gui-v2/components/webhook/Editor.vue
  7. 99
      packages/nc-gui-v2/components/webhook/List.vue
  8. 67
      packages/nc-gui-v2/components/webhook/Test.vue

120
packages/nc-gui-v2/components/api-client/Headers.vue
Unescape View File

@ -0,0 +1,120 @@
<script setup lang="ts">
import MdiPlusIcon from '~icons/mdi/plus'
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
interface Props {
modelValue: Record<string, any>[]
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const vModel = useVModel(props, 'modelValue', emits)
const headerList = ref([
'A-IM',
'Accept',
'Accept-Charset',
'Accept-Encoding',
'Accept-Language',
'Accept-Datetime',
'Access-Control-Request-Method',
'Access-Control-Request-Headers',
'Authorization',
'Cache-Control',
'Connection',
'Content-Length',
'Content-Type',
'Cookie',
'Date',
'Expect',
'Forwarded',
'From',
'Host',
'If-Match',
'If-Modified-Since',
'If-None-Match',
'If-Range',
'If-Unmodified-Since',
'Max-Forwards',
'Origin',
'Pragma',
'Proxy-Authorization',
'Range',
'Referer',
'TE',
'User-Agent',
'Upgrade',
'Via',
'Warning',
'Non-standard headers',
'Dnt',
'X-Requested-With',
'X-CSRF-Token',
])
const addHeaderRow = () => vModel.value.push({})
const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
</script>
<template>
<div class="flex flex-row justify-center">
<table>
<thead>
<tr>
<th>
<!-- Intended to be empty - For checkbox -->
</th>
<th>
<div class="text-center font-normal mb-2">Header Name</div>
</th>
<th>
<div class="text-center font-normal mb-2">Value</div>
</th>
<th>
<!-- Intended to be empty - For delete button -->
</th>
</tr>
</thead>
<tbody>
<tr v-for="(headerRow, idx) in vModel" :key="idx">
<td class="px-2">
<a-form-item>
<a-checkbox v-model:checked="headerRow.enabled" />
</a-form-item>
</td>
<td class="px-2">
<a-form-item>
<a-select v-model:value="headerRow.name" size="large" placeholder="Key">
<a-select-option v-for="(header, i) in headerList" :key="i" :value="header">
{{ header }}
</a-select-option>
</a-select>
</a-form-item>
</td>
<td class="px-2">
<a-form-item>
<a-input v-model:value="headerRow.value" size="large" placeholder="Value" />
</a-form-item>
</td>
<td class="relative">
<div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
<MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteHeaderRow(idx)" />
</div>
</td>
</tr>
<tr>
<td :colspan="12" class="text-center">
<a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addHeaderRow">
<template #icon>
<MdiPlusIcon class="flex mx-auto" />
</template>
</a-button>
</td>
</tr>
</tbody>
</table>
</div>
</template>

74
packages/nc-gui-v2/components/api-client/Params.vue
Unescape View File

@ -0,0 +1,74 @@
<script setup lang="ts">
import MdiPlusIcon from '~icons/mdi/plus'
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
interface Props {
modelValue: Record<string, any>[]
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const vModel = useVModel(props, 'modelValue', emits)
const addParamRow = () => vModel.value.push({})
const deleteParamRow = (idx: number) => vModel.value.splice(idx, 1)
</script>
<template>
<div class="flex flex-row justify-center">
<table>
<thead>
<tr>
<th>
<!-- Intended to be empty - For checkbox -->
</th>
<th>
<div class="text-center font-normal mb-2">Param Name</div>
</th>
<th>
<div class="text-center font-normal mb-2">Value</div>
</th>
<th>
<!-- Intended to be empty - For delete button -->
</th>
</tr>
</thead>
<tbody>
<tr v-for="(paramRow, idx) in vModel" :key="idx">
<td class="px-2">
<a-form-item>
<a-checkbox v-model:checked="paramRow.enabled" />
</a-form-item>
</td>
<td class="px-2">
<a-form-item>
<a-input v-model:value="paramRow.name" size="large" placeholder="Key" />
</a-form-item>
</td>
<td class="px-2">
<a-form-item>
<a-input v-model:value="paramRow.value" size="large" placeholder="Value" />
</a-form-item>
</td>
<td class="relative">
<div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
<MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteParamRow(idx)" />
</div>
</td>
</tr>
<tr>
<td :colspan="12" class="text-center">
<a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addParamRow">
<template #icon>
<MdiPlusIcon class="flex mx-auto" />
</template>
</a-button>
</td>
</tr>
</tbody>
</table>
</div>
</template>

57
packages/nc-gui-v2/components/monaco/Editor.vue
Unescape View File

@ -2,12 +2,20 @@
import * as monaco from 'monaco-editor'
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import { onMounted } from '#imports'
import { deepCompare } from '~/utils'
const { modelValue } = defineProps<{ modelValue: any }>()
interface Props {
modelValue: string
lang?: string
validate?: boolean
}
const { modelValue, lang = 'json', validate = true } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const isValid = ref(true)
/**
@ -16,10 +24,14 @@ const isValid = ref(true)
* @ts-expect-error */
self.MonacoEnvironment = {
getWorker(_: any, label: string) {
if (label === 'json') {
return new JsonWorker()
switch (label) {
case 'json':
return new JsonWorker()
case 'typescript':
return new TypescriptWorker()
default:
return new EditorWorker()
}
return new EditorWorker()
},
}
@ -36,13 +48,14 @@ defineExpose({
})
onMounted(() => {
if (root.value) {
const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), 'json')
// configure the JSON language support with schemas and schema associations
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
})
if (root.value && lang) {
const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), lang)
if (lang === 'json') {
// configure the JSON language support with schemas and schema associations
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: validate as boolean,
})
}
editor = monaco.editor.create(root.value, {
model,
@ -60,8 +73,15 @@ onMounted(() => {
editor.onDidChangeModelContent(async (e) => {
try {
isValid.value = true
const obj = JSON.parse(editor.getValue())
if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj)
const value = editor?.getValue()
if (typeof modelValue === 'object') {
if (!value || !deepCompare(modelValue, JSON.parse(value))) {
emit('update:modelValue', JSON.stringify(modelValue, null, 2))
}
} else {
if (value !== modelValue) emit('update:modelValue', value)
}
} catch (e) {
isValid.value = false
console.log(e)
@ -73,8 +93,15 @@ onMounted(() => {
watch(
() => modelValue,
(v) => {
if (editor && v && !deepCompare(v, JSON.parse(editor?.getValue() as string))) {
editor.setValue(JSON.stringify(v, null, 2))
if (editor && v) {
const value = editor?.getValue()
if (typeof v === 'object') {
if (!value || !deepCompare(v, JSON.parse(value))) {
editor.setValue(JSON.stringify(v, null, 2))
}
} else {
if (value !== v) editor.setValue(v)
}
}
},
)

14
packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
Unescape View File

@ -17,14 +17,24 @@ const sharedViewListDlg = ref(false)
// todo : replace with inject
const publicViewId = null
// TODO:: identify based on meta
const isView = ref(false)
const { isUIAllowed } = useUIPermission()
const { project } = useProject()
const { $api } = useNuxtApp()
const toast = useToast()
const meta = inject(MetaInj)
const selectedView = inject(ActiveViewInj)
const showWebhookDrawer = ref(false)
const exportCsv = async () => {
let offset = 0
let c = 1
@ -117,7 +127,7 @@ const exportCsv = async () => {
<!-- Shared View List -->
{{ $t('activity.listSharedView') }}
</div>
<div class="nc-menu-item" @click.stop>
<div class="nc-menu-item" @click="showWebhookDrawer = true">
<MdiHookIcon />
<!-- todo: i18n -->
Webhook
@ -127,6 +137,8 @@ const exportCsv = async () => {
</template>
</a-dropdown>
<WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
<a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
<SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
</a-modal>

35
packages/nc-gui-v2/components/webhook/Drawer.vue
Unescape View File

@ -0,0 +1,35 @@
<script setup lang="ts">
interface Props {
modelValue: boolean
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])
const editOrAdd = ref(false)
const webhookEditorRef = ref()
const vModel = useVModel(props, 'modelValue', emits)
async function editHook(hook: Record<string, any>) {
editOrAdd.value = true
nextTick(async () => {
webhookEditorRef.value.setHook(hook)
await webhookEditorRef.value.onEventChange()
})
}
</script>
<template>
<a-drawer v-model:visible="vModel" :closable="false" placement="right" width="700px" @keydown.esc="vModel = false">
<WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
<WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
<div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
<a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
🚀 We are Hiring! 🚀
</a-button>
</div>
</a-drawer>
</template>

613
packages/nc-gui-v2/components/webhook/Editor.vue
Unescape View File

@ -0,0 +1,613 @@
<script setup lang="ts">
import { Form } from 'ant-design-vue'
import { useToast } from 'vue-toastification'
import { MetaInj } from '~/context'
import MdiContentSaveIcon from '~icons/mdi/content-save'
import MdiLinkIcon from '~icons/mdi/link'
import MdiEmailIcon from '~icons/mdi/email'
import MdiSlackIcon from '~icons/mdi/slack'
import MdiMicrosoftTeamsIcon from '~icons/mdi/microsoft-teams'
import MdiDiscordIcon from '~icons/mdi/discord'
import MdiChatIcon from '~icons/mdi/chat'
import MdiWhatsAppIcon from '~icons/mdi/whatsapp'
import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
import MdiGestureDoubleTapIcon from '~icons/mdi/gesture-double-tap'
import MdiInformationIcon from '~icons/mdi/information'
import MdiArrowLeftBoldIcon from '~icons/mdi/arrow-left-bold'
import { fieldRequiredValidator } from '~/utils/validation'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
interface Option {
label: string
value: string
}
const emit = defineEmits(['backToList', 'editOrAdd'])
const { $state, $api, $e } = useNuxtApp()
const toast = useToast()
const meta = inject(MetaInj)
const useForm = Form.useForm
const hook = reactive({
id: '',
title: '',
event: '',
operation: '',
eventOperation: undefined,
notification: {
type: 'URL',
payload: {
method: 'POST',
body: '{{ json data }}',
headers: [{}],
parameters: [{}],
} as any,
},
condition: false,
})
const urlTabKey = ref('body')
const apps: Record<string, any> = ref()
const webhookTestRef = 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 loading = ref(false)
const filters = ref([])
const formInput = ref({
'Email': [
{
key: 'to',
label: 'To Address',
placeholder: 'To Address',
type: 'SingleLineText',
required: true,
},
{
key: 'subject',
label: 'Subject',
placeholder: 'Subject',
type: 'SingleLineText',
required: true,
},
{
key: 'body',
label: 'Body',
placeholder: 'Body',
type: 'LongText',
required: true,
},
],
'Slack': [
{
key: 'body',
label: 'Body',
placeholder: 'Body',
type: 'LongText',
required: true,
},
],
'Microsoft Teams': [
{
key: 'body',
label: 'Body',
placeholder: 'Body',
type: 'LongText',
required: true,
},
],
'Discord': [
{
key: 'body',
label: 'Body',
placeholder: 'Body',
type: 'LongText',
required: true,
},
],
'Mattermost': [
{
key: 'body',
label: 'Body',
placeholder: 'Body',
type: 'LongText',
required: true,
},
],
'Twilio': [
{
key: 'body',
label: 'Body',
placeholder: 'Body',
type: 'LongText',
required: true,
},
{
key: 'to',
label: 'Comma separated Mobile #',
placeholder: 'Comma separated Mobile #',
type: 'LongText',
required: true,
},
],
'Whatsapp Twilio': [
{
key: 'body',
label: 'Body',
placeholder: 'Body',
type: 'LongText',
required: true,
},
{
key: 'to',
label: 'Comma separated Mobile #',
placeholder: 'Comma separated Mobile #',
type: 'LongText',
required: true,
},
],
})
const eventList = ref([
// {text: ["Before", "Insert"], value: ['before', 'insert']},
{ text: ['After', 'Insert'], value: ['after', 'insert'] },
// {text: ["Before", "Update"], value: ['before', 'update']},
{ text: ['After', 'Update'], value: ['after', 'update'] },
// {text: ["Before", "Delete"], value: ['before', 'delete']},
{ text: ['After', 'Delete'], value: ['after', 'delete'] },
])
const notificationList = ref([
{ type: 'URL' },
{ type: 'Email' },
{ type: 'Slack' },
{ type: 'Microsoft Teams' },
{ type: 'Discord' },
{ type: 'Mattermost' },
{ type: 'Twilio' },
{ type: 'Whatsapp Twilio' },
])
const methodList = ref([
{ title: 'GET' },
{ title: 'POST' },
{ title: 'DELETE' },
{ title: 'PUT' },
{ title: 'HEAD' },
{ title: 'PATCH' },
])
const validators = computed(() => {
return {
'title': [fieldRequiredValidator],
'eventOperation': [fieldRequiredValidator],
'notification.type': [fieldRequiredValidator],
...(hook.notification.type === 'URL' && {
'notification.payload.method': [fieldRequiredValidator],
'notification.payload.path': [fieldRequiredValidator],
}),
...(hook.notification.type === 'Email' && {
'notification.payload.to': [fieldRequiredValidator],
'notification.payload.subject': [fieldRequiredValidator],
'notification.payload.body': [fieldRequiredValidator],
}),
...((hook.notification.type === 'Slack' ||
hook.notification.type === 'Microsoft Teams' ||
hook.notification.type === 'Discord' ||
hook.notification.type === 'Mattermost') && {
'notification.payload.channels': [fieldRequiredValidator],
'notification.payload.body': [fieldRequiredValidator],
}),
...((hook.notification.type === 'Twilio' || hook.notification.type === 'Whatsapp Twilio') && {
'notification.payload.body': [fieldRequiredValidator],
'notification.payload.to': [fieldRequiredValidator],
}),
}
})
const { resetFields, validate, validateInfos } = useForm(hook, validators)
function onNotTypeChange() {
hook.notification.payload = {} as any
if (hook.notification.type === 'Slack') {
slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || []
}
if (hook.notification.type === 'Microsoft Teams') {
teamsChannels.value = (apps && apps['Microsoft Teams'] && apps['Microsoft Teams'].parsedInput) || []
}
if (hook.notification.type === 'Discord') {
discordChannels.value = (apps && apps.Discord && apps.Discord.parsedInput) || []
}
if (hook.notification.type === 'Mattermost') {
mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || []
}
if (hook.notification.type === 'URL') {
hook.notification.payload.body = '{{ json data }}'
hook.notification.payload.parameters = [{}]
hook.notification.payload.headers = [{}]
hook.notification.payload.method = 'POST'
}
}
function filterOption(input: string, option: Option) {
return option.value.toUpperCase().includes(input.toUpperCase())
}
function setHook(newHook: any) {
Object.assign(hook, {
...newHook,
notification: {
...newHook.notification,
payload: newHook.notification.payload,
},
})
}
async function onEventChange() {
const { notification: { payload = {}, type = {} } = {}, ...rest } = hook
Object.assign(hook, {
...hook,
notification: {
type,
payload,
},
})
hook.notification.payload = payload
let channels: Record<string, any>[] | null = null
switch (hook.notification.type) {
case 'Slack':
channels = slackChannels as any
break
case 'Microsoft Teams':
channels = teamsChannels as any
break
case 'Discord':
channels = discordChannels as any
break
case 'Mattermost':
channels = mattermostChannels as any
break
}
if (channels) {
hook.notification.payload.webhook_url =
hook.notification.payload.webhook_url &&
hook.notification.payload.webhook_url.map((v: Record<string, any>) =>
channels?.find((s: Record<string, any>) => v.webhook_url === s.webhook_url),
)
}
if (hook.notification.type === 'URL') {
hook.notification.payload = hook.notification.payload || {}
hook.notification.payload.parameters = hook.notification.payload.parameters || [{}]
hook.notification.payload.headers = hook.notification.payload.headers || [{}]
hook.notification.payload.method = hook.notification.payload.method || 'POST'
}
}
async function loadPluginList() {
try {
const plugins = (await $api.plugin.list()).list as any
apps.value = plugins.reduce((o: Record<string, any>[], p: Record<string, any>) => {
p.tags = p.tags ? p.tags.split(',') : []
p.parsedInput = p.input && JSON.parse(p.input)
o[p.title] = p
return o
}, {})
if (hook.event && hook.operation) {
hook.eventOperation = `${hook.event} ${hook.operation}`
}
} catch (e: any) {
toast.error(extractSdkResponseErrorMsg(e))
}
}
async function saveHooks() {
loading.value = true
try {
await validate()
} catch (_: any) {
toast.error('Invalid Form')
loading.value = false
return
}
try {
let res
if (hook.id) {
res = await $api.dbTableWebhook.update(hook.id, {
...hook,
notification: {
...hook.notification,
payload: hook.notification.payload,
},
} as any)
} else {
res = await $api.dbTableWebhook.create(
meta?.value.id as string,
{
...hook,
notification: {
...hook.notification,
payload: hook.notification.payload,
},
} as any,
)
}
if (!hook.id && res) {
hook.id = res.id
}
// TODO: wait for filter implementation
// if ($refs.filter) {
// await $refs.filter.applyChanges(false, {
// hookId: hook.id,
// });
// }
toast.success('Webhook details updated successfully')
} catch (e: any) {
toast.error(extractSdkResponseErrorMsg(e))
} finally {
loading.value = false
}
$e('a:webhook:add', {
operation: hook.operation,
condition: hook.condition,
notification: hook.notification.type,
})
}
async function testWebhook() {
await webhookTestRef.value.testWebhook()
}
defineExpose({
onEventChange,
setHook,
})
watch(
() => hook.eventOperation,
(v) => {
const [event, operation] = hook.eventOperation.split(' ')
hook.event = event
hook.operation = operation
},
)
onMounted(() => {
loadPluginList()
})
</script>
<template>
<div class="mb-4">
<div class="float-left mt-2">
<div class="flex items-center">
<MdiArrowLeftBoldIcon class="mr-3 text-xl cursor-pointer" @click="emit('backToList')" />
<span class="inline text-xl font-bold">{{ meta.title }} : {{ hook.title || 'Webhooks' }} </span>
</div>
</div>
<div class="float-right mb-5">
<a-button class="mr-3" size="large" @click="testWebhook">
<div class="flex items-center">
<MdiGestureDoubleTapIcon class="mr-2" />
<!-- TODO: i18n -->
Test Webhook
</div>
</a-button>
<a-button type="primary" size="large" @click.prevent="saveHooks">
<div class="flex items-center">
<MdiContentSaveIcon class="mr-2" />
<!-- Save -->
{{ $t('general.save') }}
</div>
</a-button>
</div>
</div>
<a-divider />
<a-form :model="hook" name="create-or-edit-webhook">
<a-form-item>
<a-row type="flex">
<a-col :span="24">
<a-form-item v-bind="validateInfos.title">
<a-input v-model:value="hook.title" size="large" :placeholder="$t('general.title')" />
</a-form-item>
</a-col>
</a-row>
<a-row type="flex" :gutter="[16, 16]">
<a-col :span="12">
<a-form-item v-bind="validateInfos.eventOperation">
<a-select v-model:value="hook.eventOperation" size="large" :placeholder="$t('general.event')">
<a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')">
{{ event.text.join(' ') }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item v-bind="validateInfos['notification.type']">
<a-select
v-model:value="hook.notification.type"
size="large"
:placeholder="$t('general.notification')"
@change="onNotTypeChange"
>
<a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
<div class="flex items-center">
<MdiLinkIcon v-if="notificationOption.type === 'URL'" class="mr-2" />
<MdiEmailIcon v-if="notificationOption.type === 'Email'" class="mr-2" />
<MdiSlackIcon v-if="notificationOption.type === 'Slack'" class="mr-2" />
<MdiMicrosoftTeamsIcon v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" />
<MdiDiscordIcon v-if="notificationOption.type === 'Discord'" class="mr-2" />
<MdiChatIcon v-if="notificationOption.type === 'Mattermost'" class="mr-2" />
<MdiWhatsAppIcon v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" />
<MdiCellPhoneMessageIcon v-if="notificationOption.type === 'Twilio'" class="mr-2" />
{{ notificationOption.type }}
</div>
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
<a-col :span="6">
<a-select v-model:value="hook.notification.payload.method" size="large">
<a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
</a-select>
</a-col>
<a-col :span="18">
<a-form-item v-bind="validateInfos['notification.payload.path']">
<a-input v-model:value="hook.notification.payload.path" size="large" placeholder="http://example.com" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-tabs v-model:activeKey="urlTabKey" centered>
<a-tab-pane key="body" tab="Body">
<MonacoEditor v-model="hook.notification.payload.body" :validate="false" class="min-h-60 max-h-80" />
</a-tab-pane>
<a-tab-pane key="params" tab="Params" force-render>
<ApiClientParams v-model="hook.notification.payload.parameters" />
</a-tab-pane>
<a-tab-pane key="headers" tab="Headers">
<ApiClientHeaders v-model="hook.notification.payload.headers" />
</a-tab-pane>
<a-tab-pane key="auth" tab="Auth">
<MonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" />
<span class="text-gray-600 prose-sm">
For more about auth option refer
<a class="prose-sm" href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>.
</span>
</a-tab-pane>
</a-tabs>
</a-col>
</a-row>
<a-row v-if="hook.notification.type === 'Slack'" type="flex">
<a-col :span="24">
<a-form-item v-bind="validateInfos['notification.channels']">
<a-auto-complete
v-model:value="hook.notification.payload.channels"
size="large"
:options="slackChannels"
placeholder="Select Slack channels"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
</a-row>
<a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
<a-col :span="24">
<a-form-item v-bind="validateInfos['notification.channels']">
<a-auto-complete
v-model:value="hook.notification.payload.channels"
size="large"
:options="teamsChannels"
placeholder="Select Microsoft Teams channels"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
</a-row>
<a-row v-if="hook.notification.type === 'Discord'" type="flex">
<a-col :span="24">
<a-form-item v-bind="validateInfos['notification.channels']">
<a-auto-complete
v-model:value="hook.notification.payload.channels"
size="large"
:options="discordChannels"
placeholder="Select Discord channels"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
</a-row>
<a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
<a-col :span="24">
<a-form-item v-bind="validateInfos['notification.channels']">
<a-auto-complete
v-model:value="hook.notification.payload.channels"
size="large"
:options="mattermostChannels"
placeholder="Select Mattermost channels"
:filter-option="filterOption"
/>
</a-form-item>
</a-col>
</a-row>
<a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex">
<a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
<a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]">
<a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
</a-form-item>
<a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]">
<a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
</a-form-item>
</a-col>
</a-row>
<a-row class="mb-5" type="flex">
<a-col :span="24">
<a-card>
<a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox>
<SmartsheetToolbarColumnFilter v-if="hook.condition" />
</a-card>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<div class="text-gray-600">
<em>Available context variables are <strong>data and user</strong></em>
<a-tooltip bottom>
<template #title>
<span>
<strong>data</strong> : Row data <br />
<strong>user</strong> : User information<br />
</span>
</template>
<MdiInformationIcon class="ml-2" />
</a-tooltip>
<div class="mt-3">
<a href="https://docs.nocodb.com/developer-resources/webhooks/" target="_blank">
<!-- Document Reference -->
{{ $t('labels.docReference') }}
</a>
</div>
</div>
<WebhookTest
ref="webhookTestRef"
:hook="{
...hook,
filters,
notification: {
...hook.notification,
payload: hook.notification.payload,
},
}"
/>
</a-col>
</a-row>
</a-form-item>
</a-form>
</template>

99
packages/nc-gui-v2/components/webhook/List.vue
Unescape View File

@ -0,0 +1,99 @@
<script setup lang="ts">
import { useToast } from 'vue-toastification'
import { onMounted } from '@vue/runtime-core'
import { MetaInj } from '~/context'
import MdiHookIcon from '~icons/mdi/hook'
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
const emit = defineEmits(['edit'])
const { $api, $e } = useNuxtApp()
const toast = useToast()
const hooks = ref<Record<string, any>[]>([])
const meta = inject(MetaInj)
async function loadHooksList() {
try {
const hookList = (await $api.dbTableWebhook.list(meta?.value.id as string)).list as Record<string, any>[]
hooks.value = hookList.map((hook) => {
hook.notification = hook.notification && JSON.parse(hook.notification)
return hook
})
} catch (e: any) {
toast.error(e.message)
}
}
async function deleteHook(item: Record<string, any>, index: number) {
try {
if (item.id) {
await $api.dbTableWebhook.delete(item.id)
hooks.value.splice(index, 1)
} else {
hooks.value.splice(index, 1)
}
toast.success('Hook deleted successfully')
if (!hooks.value.length) {
hooks.value = []
}
} catch (e: any) {
toast.error(e.message)
}
$e('a:webhook:delete')
}
onMounted(() => {
loadHooksList()
})
</script>
<template>
<div class="h-5/6">
<div class="mb-4">
<div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
<a-button class="float-right" type="primary" size="large" @click="emit('add')">
{{ $t('activity.addWebhook') }}
</a-button>
</div>
<a-divider />
<div v-if="hooks.length">
<a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer pl-5 pr-5 pt-2 pb-2">
<template #renderItem="{ item, index }">
<a-list-item class="pa-2" @click="emit('edit', item)">
<a-list-item-meta>
<template #description>
<span class="uppercase"> {{ item.event }} {{ item.operation }}</span>
</template>
<template #title>
<span class="text-xl normal-case">
{{ item.title }}
</span>
</template>
<template #avatar>
<div class="mt-4">
<MdiHookIcon class="text-xl" />
</div>
</template>
</a-list-item-meta>
<template #extra>
<div>
<!-- Notify Via -->
<div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div>
<div class="float-right pt-2 pr-1">
<MdiDeleteOutlineIcon class="text-xl" @click.stop="deleteHook(item, index)" />
</div>
</div>
</template>
</a-list-item>
</template>
</a-list>
</div>
<div v-else class="pa-4 bg-gray-100 text-gray-600">
Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
</div>
</div>
</template>

67
packages/nc-gui-v2/components/webhook/Test.vue
Unescape View File

@ -0,0 +1,67 @@
<script setup lang="ts">
import { onMounted } from '@vue/runtime-core'
import { useToast } from 'vue-toastification'
import { MetaInj } from '~/context'
import { extractSdkResponseErrorMsg } from '~/utils'
interface Props {
hook: Record<string, any>
}
const { hook } = defineProps<Props>()
const { $state, $api, $e } = useNuxtApp()
const toast = useToast()
const meta = inject(MetaInj)
const sampleData = ref({
data: {},
user: {},
})
const activeKey = ref(0)
watch(
() => hook?.operation,
async (v) => {
await loadSampleData()
},
)
async function loadSampleData() {
sampleData.value = {
data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation),
user: $state.user.value as Record<string, any>,
}
}
async function testWebhook() {
try {
await $api.dbTableWebhook.test(meta?.value.id as string, {
hook,
payload: sampleData.value,
})
toast.success('Webhook tested successfully')
} catch (e: any) {
toast.error(await extractSdkResponseErrorMsg(e))
}
}
defineExpose({
testWebhook,
})
onMounted(async () => {
await loadSampleData()
})
</script>
<template>
<a-collapse v-model:activeKey="activeKey" ghost>
<a-collapse-panel key="1" header="Sample Payload">
<MonacoEditor v-model="sampleData" class="min-h-60 max-h-80" />
</a-collapse-panel>
</a-collapse>
</template>
Write Preview
Loading…
Cancel
Save