feat(gui-v2): add column filter to webhook & tooltip

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

@@ -13,6 +13,8 @@ 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 { fieldRequiredValidator } from '~/utils/validation'
 
 interface Option {
@@ -211,7 +213,7 @@ onMounted(() => {
   <div class="float-right mb-5">
     <a-button class="mr-3" type="primary" size="large" @click="emit('editOrAdd')">
       <div class="flex items-center">
-        <MdiContentSaveIcon class="mr-2" />
+        <MdiGestureDoubleTapIcon class="mr-2" />
         <!-- TODO: i18n -->
         Test Webhook
       </div>
@@ -333,7 +335,7 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row v-if="formInput[formState.notification.type] && notification" class="mb-5" type="flex">
+      <a-row v-if="formInput[formState.notification.type] && notification" type="flex">
         <a-col v-for="(input, i) in formInput[formState.notification.type]" :key="i" :span="24">
           <a-form-item v-if="input.type === 'LongText'">
             <!--  TODO: add validator -->
@@ -345,25 +347,34 @@ onMounted(() => {
           </a-form-item>
         </a-col>
       </a-row>
-      <!--  TODO: handle column filter -->
-      <div>
-        <span class="caption grey--text">
+      <a-row class="mb-5" type="flex">
+        <a-col :span="24">
+          <a-checkbox v-model:checked="formState.condition">On Condition</a-checkbox>
+          <SmartsheetToolbarColumnFilter v-if="formState.condition" />
+        </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>
-          <v-tooltip top>
-            <template #activator="{ on }">
-              <v-icon small color="grey" class="ml-2" v-on="on">mdi-information</v-icon>
-            </template>
-            <span class="caption">
+
+            <a-tooltip bottom>
+              <template #title>
+                <span>
                   <strong>data</strong> : Row data <br />
                   <strong>user</strong> : User information<br />
                 </span>
-          </v-tooltip>
-          <br />
+              </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>
-        </span>
+            </div>
+          </div>
           <WebhookTest
             :hook="{
               ...formState,
@@ -374,7 +385,8 @@ onMounted(() => {
               },
             }"
           />
-      </div>
+        </a-col>
+      </a-row>
     </a-form-item>
   </a-form>
 </template>