wip: improved webhook gui

Signed-off-by: Pranav C <pranavxc@gmail.com>
3 years ago · eca26a5f3e
7 changed files with 738 additions and 9 deletions
--- a/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
@ -82,7 +82,7 @@
          v-if="_isUIAllowed('webhook') && !isView"
          v-t="['c:actions:webhook']"
          dense
-          @click="$emit('webhook')"
+          @click="webhookModal = true"
        >
          <v-list-item-title>
            <v-icon small class="mr-1" color="">
@ -104,6 +104,7 @@
      :parsed-csv="parsedCsv"
      @import="importData"
    />
    <webhook-modal v-model="webhookModal" :meta="meta" />
  </div>
 </template>
@ -115,10 +116,12 @@ import DropOrSelectFileModal from '~/components/import/dropOrSelectFileModal'
 import ColumnMappingModal from '~/components/project/spreadsheet/components/importExport/columnMappingModal'
 import CSVTemplateAdapter from '~/components/import/templateParsers/CSVTemplateAdapter'
 import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
 import WebhookModal from '~/components/project/tableTabs/webhook/webhookModal'
 export default {
  name: 'ExportImport',
  components: {
    WebhookModal,
    ColumnMappingModal,
    DropOrSelectFileModal
  },
@ -135,7 +138,8 @@ export default {
    return {
      importModal: false,
      columnMappingModal: false,
-      parsedCsv: {}
+      parsedCsv: {},
      webhookModal: false
    }
  },
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhookEditor.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/webhookEditor.vue
@ -0,0 +1,524 @@
 <template>
  <v-form v-if="hook" ref="form" v-model="valid" class="mx-auto" lazy-validation>
    <v-card-title>
      Webhook / {{ hook.id ? hook.title : 'New' }}
      <v-spacer />
      <v-btn
        outlined
        tooltip="Save"
        small
        :disabled="loading || !valid || !hook.event"
        @click.prevent="$refs.webhookTest.testWebhook()"
      >
        Test webhook
      </v-btn>
      <v-btn
        outlined
        tooltip="Save"
        color="primary"
        small
        :disabled="loading || !valid || !hook.event"
        @click.prevent="saveHooks"
      >
        <v-icon small left>
          save
        </v-icon>
        <!-- Save -->
        {{ $t("general.save") }}
      </v-btn>
    </v-card-title>
    <v-card-text>
      <v-text-field
        v-model="hook.title"
        class="caption"
        outlined
        dense
        :label="$t('general.title')"
        required
        :rules="[(v) => !!v || `${$t('general.required')}`]"
      />
      <webhook-event
        :event.sync="hook.event"
        :operation.sync="hook.operation"
      />
      <v-card class="mb-8">
        <v-card-text>
          <v-checkbox
            v-model="hook.condition"
            dense
            hide-details
            class="mt-1"
            label="On Condition"
            @change="checkConditionAvail"
          />
          <column-filter
            v-if="hook.condition"
            :key="key"
            ref="filter"
            v-model="filters"
            :meta="meta"
            :field-list="fieldList"
            dense
            style="max-width: 100%"
            :hook-id="hook.id"
            web-hook
          />
        </v-card-text>
      </v-card>
      <v-select
        v-model="hook.notification.type"
        outlined
        dense
        :label="$t('general.notification')"
        required
        :items="notificationList"
        :rules="[(v) => !!v || `${$t('general.required')}`]"
        class="caption"
        :prepend-inner-icon="notificationIcon[hook.notification.type]"
        @change="onNotTypeChange"
      >
        <template #item="{ item }">
          <v-list-item-icon>
            <v-icon small>
              {{ notificationIcon[item] }}
            </v-icon>
          </v-list-item-icon>
          <v-list-item-title>
            {{ item }}
          </v-list-item-title>
        </template>
      </v-select>
      <template v-if="hook.notification.type === 'URL'">
        <http-webhook v-model="notification" />
      </template>
      <template v-if="hook.notification.type === 'Slack'">
        <v-combobox
          v-if="slackChannels"
          v-model="notification.channels"
          :rules="[(v) => !!v || `${$t('general.required')}`]"
          :items="slackChannels"
          item-text="channel"
          label="Select Slack channels"
          multiple
          outlined
          dense
          class="caption"
        />
      </template>
      <template v-if="hook.notification.type === 'Microsoft Teams'">
        <v-combobox
          v-if="teamsChannels"
          v-model="notification.channels"
          :rules="[(v) => !!v || `${$t('general.required')}`]"
          :items="teamsChannels"
          item-text="channel"
          label="Select Teams channels"
          multiple
          outlined
          dense
          class="caption"
        />
      </template>
      <template v-if="hook.notification.type === 'Discord'">
        <v-combobox
          v-if="discordChannels"
          v-model="notification.channels"
          :rules="[(v) => !!v || `${$t('general.required')}`]"
          :items="discordChannels"
          item-text="channel"
          label="Select Discord channels"
          multiple
          outlined
          dense
          class="caption"
        />
      </template>
      <template v-if="hook.notification.type === 'Mattermost'">
        <v-combobox
          v-if="mattermostChannels"
          v-model="notification.channels"
          :rules="[(v) => !!v || `${$t('general.required')}`]"
          :items="mattermostChannels"
          item-text="channel"
          label="Select Mattermost channels"
          multiple
          outlined
          dense
          class="caption"
        />
      </template>
      <template v-if="inputs[hook.notification.type] && notification">
        <template v-for="input in inputs[hook.notification.type]">
          <v-textarea
            v-if="input.type === 'LongText'"
            :key="input.key"
            v-model="notification[input.key]"
            class="caption"
            dense
            outlined
            :label="input.label"
            :rules="[
              (v) =>
                !input.required || !!v || `${$t('general.required')}`,
            ]"
          />
          <v-text-field
            v-else
            :key="input.key"
            v-model="notification[input.key]"
            class="caption"
            dense
            outlined
            :label="input.label"
            :rules="[
              (v) =>
                !input.required || !!v || `${$t('general.required')}`,
            ]"
          />
        </template>
      </template>
    </v-card-text>
    <v-card-text>
      <span class="caption grey--text">
        <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">
            <strong>data</strong> : Row data <br>
            <strong>user</strong> : User information<br>
          </span>
        </v-tooltip>
        <br>
        <a
          href="https://docs.nocodb.com/developer-resources/webhooks/"
        >
          <!--Document Reference-->
          {{ $t("labels.docReference") }}
        </a>
      </span>
      <webhooks-test
        ref="webhookTest"
        class="mt-3"
        :model-id="meta.id"
        hide-test-btn
        :hook="{
                    ...hook,
                    filters,
                    notification: {
                      ...hook.notification,
                      payload: notification,
                    },
        }"
      />
    </v-card-text>
  </v-form>
  <span v-else />
 </template>
 <script>
 import WebhooksTest from '~/components/project/tableTabs/webhook/webhooksTest'
 import WebhookEvent from '~/components/project/tableTabs/webhook/webhookEvent'
 import HttpWebhook from '~/components/project/tableTabs/webhook/httpWebhook'
 export default {
  name: 'WebhookEditor',
  components: { HttpWebhook, WebhookEvent, WebhooksTest },
  props: {
    meta: Object
  },
  data: () => ({
    hook: {
      notification: {
      }
    },
    valid: false,
    apps: {},
    slackChannels: null,
    teamsChannels: null,
    discordChannels: null,
    mattermostChannels: null,
    enableCondition: false,
    notificationList: [
      'URL',
      'Email',
      'Slack',
      'Microsoft Teams',
      'Discord',
      'Mattermost',
      'Twilio',
      'Whatsapp Twilio'
    ],
    filters: [],
    notificationIcon: {
      URL: 'mdi-link',
      Email: 'mdi-email',
      Slack: 'mdi-slack',
      'Microsoft Teams': 'mdi-microsoft-teams',
      Discord: 'mdi-discord',
      Mattermost: 'mdi-chat',
      'Whatsapp Twilio': 'mdi-whatsapp',
      Twilio: 'mdi-cellphone-message'
    },
    inputs: {
      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
        }
      ]
    }
  }),
  created() {
    this.loadPluginList()
  },
  methods: {
    async loadPluginList() {
      try {
        // const plugins = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginList'])
        const plugins = (await this.$api.plugin.list()).list
        // plugins.push(...plugins.splice(0, 3))
        this.apps = plugins.reduce((o, p) => {
          p.tags = p.tags ? p.tags.split(',') : []
          p.parsedInput = p.input && JSON.parse(p.input)
          o[p.title] = p
          return o
        }, {})
      } catch (e) {}
    },
    addNewHook() {
      this.onEventChange()
      this.$refs.form.resetValidation()
    },
    async onNotTypeChange() {
      this.notification = {}
      if (this.hook.notification.type === 'Slack') {
        this.slackChannels =
          (this.apps && this.apps.Slack && this.apps.Slack.parsedInput) || []
      }
      if (this.hook.notification.type === 'Microsoft Teams') {
        this.teamsChannels =
          (this.apps &&
            this.apps['Microsoft Teams'] &&
            this.apps['Microsoft Teams'].parsedInput) ||
          []
      }
      if (this.hook.notification.type === 'Discord') {
        this.discordChannels =
          (this.apps && this.apps.Discord && this.apps.Discord.parsedInput) ||
          []
      }
      if (this.hook.notification.type === 'Mattermost') {
        this.mattermostChannels =
          (this.apps &&
            this.apps.Mattermost &&
            this.apps.Mattermost.parsedInput) ||
          []
      }
      this.$nextTick(() => this.$refs.form.validate())
    },
    async onEventChange() {
      this.key++
      if (!this.hooks || !this.hooks.length) {
        return
      }
      const { notification: { payload, type } = {}, ...hook } =
      this.hooks[this.selectedHook] || {}
      this.hook = {
        ...hook,
        notification: {
          type
        }
      }
      // this.enableCondition = !!(this.hook && this.hook.condition && Object.keys(this.hook.condition).length)
      await this.onNotTypeChange()
      this.notification = payload
      if (this.hook.notification.type === 'Slack') {
        this.notification.webhook_url =
          this.notification.webhook_url &&
          this.notification.webhook_url.map(v =>
            this.slackChannels.find(s => v.webhook_url === s.webhook_url)
          )
      }
      if (this.hook.notification.type === 'Microsoft Teams') {
        this.notification.webhook_url =
          this.notification.webhook_url &&
          this.notification.webhook_url.map(v =>
            this.teamsChannels.find(s => v.webhook_url === s.webhook_url)
          )
      }
      if (this.hook.notification.type === 'Discord') {
        this.notification.webhook_url =
          this.notification.webhook_url &&
          this.notification.webhook_url.map(v =>
            this.discordChannels.find(s => v.webhook_url === s.webhook_url)
          )
      }
      if (this.hook.notification.type === 'Mattermost') {
        this.notification.webhook_url =
          this.notification.webhook_url &&
          this.notification.webhook_url.map(v =>
            this.mattermostChannels.find(s => v.webhook_url === s.webhook_url)
          )
      }
      if (this.hook.notification.type === 'URL') {
        //
      }
    },
    async saveHooks() {
      if (!this.$refs.form.validate() || !this.valid || !this.hook.event) {
        return
      }
      this.loading = true
      try {
        let res
        if (this.hook.id) {
          res = await this.$api.dbTableWebhook.update(this.hook.id, {
            ...this.hook,
            notification: {
              ...this.hook.notification,
              payload: this.notification
            }
          })
        } else {
          res = await this.$api.dbTableWebhook.create(this.meta.id, {
            ...this.hook,
            notification: {
              ...this.hook.notification,
              payload: this.notification
            }
          })
        }
        if (!this.hook.id && res) {
          this.hook.id = res.id
        }
        if (this.$refs.filter) {
          await this.$refs.filter.applyChanges(false, {
            hookId: this.hook.id
          })
        }
        this.$toast
          .success('Webhook details updated successfully')
          .goAway(3000)
      } catch (e) {
        this.$toast.error(e.message).goAway(3000)
      }
      this.loading = false
      this.$e('a:webhook:add', {
        operation: this.hook.operation,
        condition: this.hook.condition,
        notification: this.hook.notification.type
      })
    }
  }
 }
 </script>
 <style scoped>
 </style>
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhookEvent.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/webhookEvent.vue
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhookList.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/webhookList.vue
@ -0,0 +1,140 @@
 <template>
  <div>
    <v-card-title>
      Webhook
      <v-spacer />
      <v-btn
        outlined
        tooltip="Save"
        small
      >
        Create webhook
      </v-btn>
    </v-card-title>
    <div v-if="hooks" class="pa-4">
      <v-card v-for="hook in hooks" v-ripple class="elevation-0 backgroundColor">
        <div class="pa-4 ">
          <h4 class="nc-text">
            {{ hook.title }}
          </h4>
          <div class="d-flex">
            <!--Title-->
            <span class="caption textColor1--text">{{ $t("general.event") }} : {{ hook.event }} {{ hook.operation }}</span>
            <v-spacer />
            <!--Notify Via-->
            <span class="caption textColor1--text">{{ $t("labels.notifyVia") }} : {{ hook.notification && hook.notification.type }}
            </span>
          </div>
        </div>
      </v-card>
    </div>
    <!--    <v-simple-table dense>
      <template #default>
        <thead>
          <tr>
            <th>
              &lt;!&ndash;Title&ndash;&gt;
              {{ $t("general.title") }}
            </th>
            <th>
              &lt;!&ndash;Event&ndash;&gt;
              {{ $t("general.event") }}
            </th>
            <th>
              &lt;!&ndash;Condition&ndash;&gt;
              {{ $t("general.condition") }}
            </th>
            <th>
              &lt;!&ndash;Notify Via&ndash;&gt;
              {{ $t("labels.notifyVia") }}
            </th>
            <th>
              &lt;!&ndash;Action&ndash;&gt;
              {{ $t("labels.action") }}
            </th>
          </tr>
        </thead>
        <tbody>
          <template v-if="hooks && hooks.length">
            <tr v-for="(item, i) in hooks" :key="i">
              <td>{{ item.title }}</td>
              <td>{{ item.event }} {{ item.operation }}</td>
              <td>
                <v-icon v-if="item.condition" color="success" small>
                  mdi-check-bold
                </v-icon>
              </td>
              <td>
                {{ item.notification && item.notification.type }}
              </td>
              <td>
                <x-icon
                  small
                  color="error"
                  @click.stop="deleteHook(item, i)"
                >
                  mdi-delete
                </x-icon>
              &lt;!&ndash;              <x-icon small :color="loading || !valid || !hook.event ?  'grey' : 'primary'"
                                  @click.stop="(!loading && valid && hook.event) && saveHooks()">save
                          </x-icon>&ndash;&gt;
              </td>
            </tr>
          </template>
          <tr>
            <td colspan="6" class="text-center py-5">
              &lt;!&ndash;:tooltip="$t('tooltip.saveChanges')"&ndash;&gt;
              <x-btn
                v-ge="['hooks', 'add new']"
                outlined
                color="primary"
                small
                @click.prevent="$emit('add')"
              >
                <v-icon small left>
                  mdi-plus
                </v-icon>
                &lt;!&ndash;Add New Webhook&ndash;&gt;
                {{ $t("activity.addWebhook") }}
              </x-btn>
            </td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>-->
  </div>
 </template>
 <script>
 export default {
  name: 'WebhookList',
  props: { meta: Object },
  data: () => ({
    hooks: null, loading: false
  }),
  mounted() {
    this.loadHooksList()
  },
  methods: {
    async loadHooksList() {
      this.key++
      this.loading = true
      const hooks = await this.$api.dbTableWebhook.list(this.meta.id)
      this.hooks = hooks.list.map((h) => {
        h.notification = h.notification && JSON.parse(h.notification)
        return h
      })
      this.loading = false
    }
  }
 }
 </script>
 <style scoped>
 </style>
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhookModal.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/webhookModal.vue
@ -0,0 +1,44 @@
 <template>
  <v-dialog v-model="webhookModal" width="min(700px,90%)" overlay-opacity=".9">
    <v-card
      v-if="webhookModal"
      width="100%"
      min-height="350px"
      class="pa-4"
    >
      <webhook-editor v-if="editOrAdd" :meta="meta" />
      <webhook-list v-else :meta="meta" @edit="editOrAdd=true" @add="editOrAdd=true" />
    </v-card>
  </v-dialog>
 </template>
 <script>
 import WebhookList from '~/components/project/tableTabs/webhook/webhookList'
 import WebhookEditor from '~/components/project/tableTabs/webhook/webhookEditor'
 export default {
  name: 'WebhookModal',
  components: { WebhookEditor, WebhookList },
  props: {
    meta: Object,
    value: Boolean
  },
  data: () => ({
    editOrAdd: false,
    activePage: 'role'
  }),
  computed: {
    webhookModal: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      }
    }
  }
 }
 </script>
 <style scoped lang="scss">
 </style>
--- a/packages/nc-gui/components/project/tableTabs/webhook/webhooksTest.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/webhooksTest.vue
@ -1,8 +1,14 @@
 <template>
  <div>
-    <h5>Sample payload</h5>
+    <h5 @click="isVisible=!isVisible">
-    <monaco-json-object-editor v-model="sampleData" read-only style="min-height: 300px" class="caption mb-2" />
+      Sample payload <v-icon x-small>
-    <v-btn small @click="testWebhook">
+        mdi-chevron-{{ isVisible? 'up' : 'down' }}
      </v-icon>
    </h5>
    <div :class="{active:isVisible}" class="nc-sample-data">
      <monaco-json-object-editor v-model="sampleData" read-only style="min-height: 300px" class="caption mb-2 " />
    </div>
    <v-btn v-if="!hideTestBtn" small @click="testWebhook">
      Test webhook
    </v-btn>
  </div>
@ -16,10 +22,12 @@ export default {
  components: { MonacoJsonObjectEditor },
  props: {
    modelId: String,
-    hook: Object
+    hook: Object,
    hideTestBtn: Boolean
  },
  data: () => ({
-    sampleData: null
+    sampleData: null,
    isVisible: false
  }),
  watch: {
    async 'hook.operation'() {
@ -61,6 +69,15 @@ export default {
 /deep/ label {
  font-size: 0.75rem !important
 }
 .nc-sample-data{
  overflow-y: hidden;
  height:0;
  transition: .3s height;
 }
 .nc-sample-data.active{
  height:300px
 }
 </style>
 <!--
 /**
--- a/packages/nc-gui/components/project/tableTabs/webhooks.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhooks.vue
@ -402,8 +402,8 @@
 import HttpWebhook from './webhook/httpWebhook'
 import ColumnFilter from '~/components/project/spreadsheet/components/columnFilter'
 // import FormInput from '~/components/project/appStore/FormInput'
-import WebhookEvent from '~/components/project/tableTabs/webhookEvent'
+import WebhookEvent from '~/components/project/tableTabs/webhook/webhookEvent'
-import WebhooksTest from '~/components/project/tableTabs/webhooksTest'
+import WebhooksTest from '~/components/project/tableTabs/webhook/webhooksTest'
 export default {
  name: 'Webhooks',