Nc feat(nc-gui): disable webhook bulk events while editing webhook (#7914)

* feat(nc-gui): disable webhook bulk events while editing webhook instead of removing it from dropdown

* fix(nc-gui): add missing condition in webhook edit event options

* fix(nc-gui): disable webhook bulk op events in v1 only

* fix(nc-gui): make webhook parameter tab as current tab by default

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

@@ -79,7 +79,7 @@ let hookRef = reactive<
 const isBodyShownEasterEgg = ref(false)
 const isBodyShown = ref(hookRef.version === 'v1' || isEeUI)
 
-const urlTabKey = ref(isBodyShownEasterEgg.value && isBodyShown.value ? 'body' : 'params')
+const urlTabKey = ref<'params' | 'headers' | 'body'>('params')
 
 const apps: Record<string, any> = ref()
 
@@ -321,14 +321,6 @@ function setHook(newHook: HookType) {
       payload: notification.payload,
     },
   })
-  if (hookRef.version === 'v1' || isEeUI) {
-    urlTabKey.value = 'body'
-    eventList.value = [
-      { text: ['After', 'Insert'], value: ['after', 'insert'] },
-      { text: ['After', 'Update'], value: ['after', 'update'] },
-      { text: ['After', 'Delete'], value: ['after', 'delete'] },
-    ]
-  }
 }
 
 function onEventChange() {
@@ -486,6 +478,13 @@ const getDefaultHookName = (hooks: HookType[]) => {
   return extractNextDefaultName([...hooks.map((el) => el?.title || '')], defaultHookName)
 }
 
+const handleToggleEasterEgg = () => {
+  isBodyShownEasterEgg.value = !isBodyShownEasterEgg.value
+  if (!(isBodyShown.value && isBodyShownEasterEgg.value) && urlTabKey.value === 'body') {
+    urlTabKey.value = 'params'
+  }
+}
+
 watch(
   () => hookRef.eventOperation,
   () => {
@@ -592,7 +591,13 @@ onMounted(async () => {
                   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(' ')">
+                  <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
@@ -657,7 +662,7 @@ onMounted(async () => {
                 size="large"
                 class="nc-select-hook-url-method"
                 dropdown-class-name="nc-dropdown-hook-notification-url-method"
-                @dblclick="isBodyShownEasterEgg = !isBodyShownEasterEgg"
+                @dblclick="handleToggleEasterEgg"
               >
                 <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">
                   <div class="flex items-center gap-2 justify-between">
@@ -687,6 +692,14 @@ onMounted(async () => {
 
             <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 && isBodyShownEasterEgg" key="body" tab="Body">
                   <LazyMonacoEditor
                     v-model="hookRef.notification.payload.body"
@@ -696,14 +709,6 @@ onMounted(async () => {
                   />
                 </a-tab-pane>
 
-                <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>
-
                 <!-- 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" /> -->