nocodb/packages/nc-gui/components/webhook/Editor.vue

<script setup lang="ts">
import type { Ref } from 'vue'
import type { HookReqType, HookType } from 'nocodb-sdk'
import {
  Form,
  MetaInj,
  computed,
  extractSdkResponseErrorMsg,
  fieldRequiredValidator,
  iconMap,
  inject,
  isEeUI,
  message,
  onMounted,
  parseProp,
  reactive,
  ref,
  useApi,
  // useGlobal,
  useI18n,
  useNuxtApp,
  watch,
} from '#imports'
import { extractNextDefaultName } from '~/helpers/parsers/parserHelpers'

interface Props {
  hook?: HookType
}

const props = defineProps<Props>()

const emit = defineEmits(['close', 'delete'])

const { t } = useI18n()

const { $e } = useNuxtApp()

const { api, isLoading: loading } = useApi()

// const { appInfo } = useGlobal()

const { hooks } = storeToRefs(useWebhooksStore())

const { base } = storeToRefs(useBase())

const meta = inject(MetaInj, ref())

const titleDomRef = ref<HTMLInputElement | undefined>()

// const hookTabKey = ref('hook-edit')

const useForm = Form.useForm

const defaultHookName = t('labels.webhook')

let hookRef = reactive<
  Omit<HookType, 'notification'> & { notification: Record<string, any>; eventOperation?: string; condition: boolean }
>({
  id: '',
  title: defaultHookName,
  event: undefined,
  operation: undefined,
  eventOperation: undefined,
  notification: {
    type: 'URL',
    payload: {
      method: 'POST',
      body: '{{ json event }}',
      headers: [{}],
      parameters: [{}],
      path: '',
    },
  },
  condition: false,
  active: true,
  version: 'v2',
})

const isBodyShown = ref(hookRef.version === 'v1' || isEeUI)

const urlTabKey = ref<'params' | 'headers' | 'body'>('params')

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 filterRef = ref()

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 isRenaming = ref(false)

// TODO: Add back when show logs is working
const showLogs = computed(
  () => false,
  // !(
  //   appInfo.automationLogLevel === AutomationLogLevel.OFF ||
  //   (appInfo.automationLogLevel === AutomationLogLevel.ALL && !appInfo.ee)
  // ),
)

const eventList = ref<Record<string, any>[]>([
  { text: [t('general.after'), t('general.insert')], value: ['after', 'insert'] },
  { text: [t('general.after'), t('general.update')], value: ['after', 'update'] },
  { text: [t('general.after'), t('general.delete')], value: ['after', 'delete'] },
  { text: [t('general.after'), t('general.bulkInsert')], value: ['after', 'bulkInsert'] },
  { text: [t('general.after'), t('general.bulkUpdate')], value: ['after', 'bulkUpdate'] },
  { text: [t('general.after'), t('general.bulkDelete')], value: ['after', 'bulkDelete'] },
])

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 validators = computed(() => {
  return {
    'title': [fieldRequiredValidator()],
    'eventOperation': [fieldRequiredValidator()],
    'notification.type': [fieldRequiredValidator()],
    ...(hookRef.notification.type === 'URL' && {
      'notification.payload.method': [fieldRequiredValidator()],
      'notification.payload.path': [fieldRequiredValidator()],
    }),
    ...(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()],
    }),
  }
})
const { validate, validateInfos } = useForm(hookRef, validators)

const isValid = computed(() => {
  // Recursively check if all the fields are valid
  const check = (obj: Record<string, any>) => {
    for (const key in obj) {
      if (typeof obj[key] === 'object') {
        if (!check(obj[key])) {
          return false
        }
      } else if (obj && key === 'validateStatus' && obj[key] === 'error') {
        return false
      }
    }
    return true
  }

  return hookRef && check(validateInfos)
})

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 = (apps.value && apps.value.Slack && apps.value.Slack.parsedInput) || []
  }

  if (hookRef.notification.type === 'Microsoft Teams') {
    teamsChannels.value = (apps.value && apps.value['Microsoft Teams'] && apps.value['Microsoft Teams'].parsedInput) || []
  }

  if (hookRef.notification.type === 'Discord') {
    discordChannels.value = (apps.value && apps.value.Discord && apps.value.Discord.parsedInput) || []
  }

  if (hookRef.notification.type === 'Mattermost') {
    mattermostChannels.value = (apps.value && apps.value.Mattermost && apps.value.Mattermost.parsedInput) || []
  }

  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.auth = hookRef.notification.payload.auth || ''
  }
}

function setHook(newHook: HookType) {
  const notification = newHook.notification as Record<string, any>
  Object.assign(hookRef, {
    ...newHook,
    notification: {
      ...notification,
      payload: notification.payload,
    },
  })
}

function onEventChange() {
  const { notification: { payload = {}, type = {} } = {} } = hookRef

  Object.assign(hookRef, {
    ...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.eventOperation && !hookRef.eventOperation.includes('bulk')
})

async function saveHooks() {
  loading.value = true
  try {
    await validate()
  } catch (_: any) {
    message.error(t('msg.error.invalidForm'))

    loading.value = false

    return
  }

  try {
    let res
    if (hookRef.id) {
      res = await api.dbTableWebhook.update(hookRef.id, {
        ...hookRef,
        notification: {
          ...hookRef.notification,
          payload: hookRef.notification.payload,
        },
      })
    } else {
      res = await api.dbTableWebhook.create(meta.value!.id!, {
        ...hookRef,
        notification: {
          ...hookRef.notification,
          payload: hookRef.notification.payload,
        },
      } as HookReqType)

      hooks.value.push(res)
    }

    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
    })

    emit('close')
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  } finally {
    loading.value = false
  }

  $e('a:webhook:add', {
    operation: hookRef.operation,
    condition: hookRef.condition,
    notification: hookRef.notification.type,
  })
}

async function testWebhook() {
  await webhookTestRef.value.testWebhook()
}

const getDefaultHookName = (hooks: HookType[]) => {
  return extractNextDefaultName([...hooks.map((el) => el?.title || '')], defaultHookName)
}

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)
    }
  },
  { immediate: true },
)

onMounted(async () => {
  await loadPluginList()

  if (hookRef.event && hookRef.operation) {
    hookRef.eventOperation = `${hookRef.event} ${hookRef.operation}`
  } else {
    hookRef.eventOperation = eventList.value[0].value.join(' ')
  }

  onNotificationTypeChange()

  setTimeout(() => {
    if (hookRef.id === '') {
      titleDomRef.value?.click()
      titleDomRef.value?.select()
    }
  }, 50)
})
</script>

<template>
  <div class="flex nc-webhook-header pb-3 gap-x-2 items-start">
    <div class="flex flex-1">
      <a-form-item v-bind="validateInfos.title" class="flex flex-grow">
        <div
          class="flex flex-grow px-1.5 py-0.125 items-center rounded-md border-gray-200 bg-gray-50 outline-gray-200"
          style="outline-style: solid; outline-width: thin"
        >
          <input
            ref="titleDomRef"
            v-model="hookRef.title"
            class="flex flex-grow text-lg font-medium capitalize outline-none bg-inherit nc-text-field-hook-title"
            :placeholder="$t('placeholder.webhookTitle')"
            :contenteditable="true"
            @blur="isRenaming = false"
            @focus="isRenaming = true"
            @keydown.enter.prevent="titleDomRef?.blur()"
          />
        </div>
      </a-form-item>
    </div>
    <div class="flex flex-row gap-2">
      <NcButton class="nc-btn-webhook-test" type="secondary" size="small" @click="testWebhook">
        <div class="flex items-center px-1">{{ $t('activity.testWebhook') }}</div>
      </NcButton>

      <NcButton
        class="nc-btn-webhook-save"
        type="primary"
        :loading="loading"
        size="small"
        :disabled="!isValid"
        @click.prevent="saveHooks"
      >
        <template #loading> {{ $t('general.saving') }} </template>
        <div class="flex items-center px-1">{{ $t('general.save') }}</div>
      </NcButton>
    </div>
  </div>

  <div class="flex flex-row">
    <div
      class="nc-webhook-form flex flex-col"
      :class="{
        'w-1/2': showLogs,
        'w-full': !showLogs,
      }"
    >
      <a-form :model="hookRef" name="create-or-edit-webhook">
        <a-form-item>
          <div class="form-field-header">{{ $t('general.event') }}</div>
          <a-row type="flex" :gutter="[16, 16]">
            <a-col :span="12">
              <a-form-item v-bind="validateInfos.eventOperation">
                <NcSelect
                  v-model:value="hookRef.eventOperation"
                  size="large"
                  :placeholder="$t('general.event')"
                  class="nc-text-field-hook-event capitalize"
                  dropdown-class-name="nc-dropdown-webhook-event"
                >
                  <a-select-option
                    v-for="(event, i) in eventList"
                    :key="i"
                    class="capitalize"
                    :value="event.value.join(' ')"
                    :disabled="hookRef.version === 'v1' && ['bulkInsert', 'bulkUpdate', 'bulkDelete'].includes(event.value[1])"
                  >
                    <div class="flex items-center gap-2 justify-between">
                      <div>{{ event.text.join(' ') }}</div>
                      <component
                        :is="iconMap.check"
                        v-if="hookRef.eventOperation === event.value.join(' ')"
                        id="nc-selected-item-icon"
                        class="text-primary w-4 h-4"
                      />
                    </div>
                  </a-select-option>
                </NcSelect>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item v-bind="validateInfos['notification.type']">
                <NcSelect
                  v-model:value="hookRef.notification.type"
                  size="large"
                  class="nc-select-hook-notification-type"
                  :placeholder="$t('general.notification')"
                  dropdown-class-name="nc-dropdown-webhook-notification"
                  @change="onNotificationTypeChange(true)"
                >
                  <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
                    <div class="flex items-center gap-2">
                      <component :is="iconMap.link" v-if="notificationOption.type === 'URL'" class="mr-2" />

                      <component :is="iconMap.email" v-if="notificationOption.type === 'Email'" class="mr-2" />

                      <MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" />

                      <MdiMicrosoftTeams v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" />

                      <MdiDiscord v-if="notificationOption.type === 'Discord'" class="mr-2" />

                      <MdiChat v-if="notificationOption.type === 'Mattermost'" class="mr-2" />

                      <MdiWhatsapp v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" />

                      <MdiCellphoneMessage v-if="notificationOption.type === 'Twilio'" class="mr-2" />

                      <div class="flex-1">{{ notificationOption.text }}</div>
                      <component
                        :is="iconMap.check"
                        v-if="hookRef.notification.type === notificationOption.type"
                        id="nc-selected-item-icon"
                        class="text-primary w-4 h-4"
                      />
                    </div>
                  </a-select-option>
                </NcSelect>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row v-if="hookRef.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
            <a-col :span="6">
              <div>Action</div>
              <NcSelect
                v-model:value="hookRef.notification.payload.method"
                size="large"
                class="nc-select-hook-url-method"
                dropdown-class-name="nc-dropdown-hook-notification-url-method"
              >
                <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">
                  <div class="flex items-center gap-2 justify-between">
                    <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"
                    />
                  </div>
                </a-select-option>
              </NcSelect>
            </a-col>

            <a-col :span="18">
              <div>Link</div>
              <a-form-item v-bind="validateInfos['notification.payload.path']">
                <a-input
                  v-model:value="hookRef.notification.payload.path"
                  size="large"
                  placeholder="http://example.com"
                  class="nc-text-field-hook-url-path !rounded-md"
                />
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <NcTabs v-model:activeKey="urlTabKey" type="card" closeable="false" class="border-1 !pb-2 !rounded-lg">
                <a-tab-pane key="params" :tab="$t('title.parameter')" force-render>
                  <LazyApiClientParams v-model="hookRef.notification.payload.parameters" class="p-4" />
                </a-tab-pane>

                <a-tab-pane key="headers" :tab="$t('title.headers')" class="nc-tab-headers">
                  <LazyApiClientHeaders v-model="hookRef.notification.payload.headers" class="!p-4" />
                </a-tab-pane>

                <a-tab-pane v-if="isBodyShown" key="body" tab="Body">
                  <LazyMonacoEditor
                    v-model="hookRef.notification.payload.body"
                    disable-deep-compare
                    :validate="false"
                    class="min-h-60 max-h-80"
                  />
                </a-tab-pane>

                <!-- No in use at this moment -->
                <!--            <a-tab-pane key="auth" tab="Auth"> -->
                <!--              <LazyMonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" /> -->

                <!--              <span class="text-gray-500 prose-sm p-2"> -->
                <!--                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> -->
              </NcTabs>
            </a-col>
          </a-row>

          <a-row v-if="hookRef.notification.type === 'Slack'" type="flex">
            <a-col :span="24">
              <a-form-item v-bind="validateInfos['notification.payload.channels']">
                <LazyWebhookChannelMultiSelect
                  v-model="hookRef.notification.payload.channels"
                  :selected-channel-list="hookRef.notification.payload.channels"
                  :available-channel-list="slackChannels"
                  :placeholder="$t('placeholder.selectSlackChannels')"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row v-if="hookRef.notification.type === 'Microsoft Teams'" type="flex">
            <a-col :span="24">
              <a-form-item v-bind="validateInfos['notification.payload.channels']">
                <LazyWebhookChannelMultiSelect
                  v-model="hookRef.notification.payload.channels"
                  :selected-channel-list="hookRef.notification.payload.channels"
                  :available-channel-list="teamsChannels"
                  :placeholder="$t('placeholder.selectTeamsChannels')"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row v-if="hookRef.notification.type === 'Discord'" type="flex">
            <a-col :span="24">
              <a-form-item v-bind="validateInfos['notification.payload.channels']">
                <LazyWebhookChannelMultiSelect
                  v-model="hookRef.notification.payload.channels"
                  :selected-channel-list="hookRef.notification.payload.channels"
                  :available-channel-list="discordChannels"
                  :placeholder="$t('placeholder.selectDiscordChannels')"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row v-if="hookRef.notification.type === 'Mattermost'" type="flex">
            <a-col :span="24">
              <a-form-item v-bind="validateInfos['notification.payload.channels']">
                <LazyWebhookChannelMultiSelect
                  v-model="hookRef.notification.payload.channels"
                  :selected-channel-list="hookRef.notification.payload.channels"
                  :available-channel-list="mattermostChannels"
                  :placeholder="$t('placeholder.selectMattermostChannels')"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row v-if="formInput[hookRef.notification.type] && hookRef.notification.payload" type="flex">
            <a-col v-for="(input, i) in formInput[hookRef.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="hookRef.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="hookRef.notification.payload[input.key]" :placeholder="input.label" size="large" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-show="isConditionSupport" class="mb-5" type="flex">
            <a-col :span="24">
              <div class="rounded-lg border-1 p-6">
                <a-checkbox
                  :checked="Boolean(hookRef.condition)"
                  class="nc-check-box-hook-condition"
                  @update:checked="hookRef.condition = $event"
                >
                  {{ $t('activity.onCondition') }}
                </a-checkbox>

                <LazySmartsheetToolbarColumnFilter
                  v-if="hookRef.condition"
                  ref="filterRef"
                  class="!p-0 mt-4"
                  :auto-save="false"
                  :show-loading="false"
                  :hook-id="hookRef.id"
                  :web-hook="true"
                  @update:filters-length="hookRef.condition = $event > 0"
                />
              </div>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <div v-if="isBodyShown" class="text-gray-600">
                <div class="flex items-center">
                  <em
                    >{{ $t('msg.webhookBodyMsg1') }} <strong>{{ $t('msg.webhookBodyMsg2') }}</strong>
                    {{ $t('msg.webhookBodyMsg3') }}</em
                  >

                  <a-tooltip bottom>
                    <template #title>
                      <span>
                        <strong>{{ $t('general.data') }}</strong> : {{ $t('title.rowData') }} <br />
                      </span>
                    </template>
                    <component :is="iconMap.info" class="ml-2" />
                  </a-tooltip>
                </div>

                <div class="my-3">
                  <a
                    href="https://docs.nocodb.com/automation/webhook/create-webhook/#webhook-with-custom-payload-"
                    target="_blank"
                    rel="noopener"
                  >
                    <!-- Document Reference -->
                    {{ $t('labels.docReference') }}
                  </a>
                </div>
              </div>

              <LazyWebhookTest
                ref="webhookTestRef"
                :hook="{
                  ...hookRef,
                  notification: {
                    ...hookRef.notification,
                    payload: hookRef.notification.payload,
                  },
                }"
              />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </div>
    <div v-if="showLogs" class="nc-webhook-calllog flex w-1/2">
      <LazyWebhookCallLog :hook="hookRef" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.circle {
  width: 0.6rem;
  height: 0.6rem;
  background-color: #ffffff;
  border-radius: 50%;
  position: relative;
}

.dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-52.5%, -52.5%);
}

:deep(.ant-tabs-tab) {
  @apply border-r-0 border-l-0 border-t-0 !px-4 !bg-inherit !border-b-2 border-transparent text-gray-600;
}
:deep(.ant-tabs-tab-active) {
  @apply !px-4 !border-primary;
}

.form-field-header {
  @apply mb-1;
}
</style>