nocodb/packages/nc-gui/components/project/tableTabs/Webhooks.vue

<template>
  <div>
    <v-toolbar flat height="42" class="toolbar-border-bottom">
      <v-toolbar-title>
        <v-breadcrumbs
          :items="[
            {
              text: nodes.env,
              disabled: true,
              href: '#',
            },
            {
              text: nodes.dbAlias,
              disabled: true,
              href: '#',
            },
            {
              text: nodes.title + ' (Webhooks)',
              disabled: true,
              href: '#',
            },
          ]"
          divider=">"
          small
        >
          <template #divider>
            <v-icon small color="grey lighten-2"> forward </v-icon>
          </template>
        </v-breadcrumbs>
      </v-toolbar-title>
      <v-spacer />

      <!--tooltip="Close webhooks modal"-->
      <x-btn outlined small @click.prevent="$emit('close')">
        <v-icon small left> mdi-close-circle-outline </v-icon>
        <!-- Close -->
        {{ $t('general.close') }}
      </x-btn>

      <!--tooltip="Reload hooks"-->
      <x-btn v-ge="['hooks', 'reload']" outlined color="primary" small @click.prevent="loadHooksList">
        <v-icon small left> mdi-reload </v-icon>
        <!-- Reload -->
        {{ $t('general.reload') }}
      </x-btn>

      <!--:tooltip="$t('tooltip.saveChanges')"-->
      <x-btn v-ge="['hooks', 'add new']" outlined color="primary" small @click.prevent="addNewHook">
        <v-icon small left> mdi-plus </v-icon>
        <!--Add New-->
        {{ $t('activity.addWebhook') }}
      </x-btn>

      <!--      <x-btn outlined tooltip="Save Changes"
                   color="primary"
                   small
                   :disabled="loading || !valid || !hook.event"

                   v-ge="['hooks','save']"
                   @click.prevent="saveHooks">
              <v-icon small left>save</v-icon>
              {{ $t('general.save') }}
            </x-btn>-->
    </v-toolbar>

    <v-form ref="form" v-model="valid" class="mx-auto" lazy-validation>
      <v-container fluid>
        <v-row>
          <v-col cols="7">
            <v-radio-group v-model="selectedHook" @change="onEventChange">
              <template #default>
                <v-simple-table dense>
                  <template #default>
                    <thead>
                      <tr>
                        <th />
                        <th>
                          <!--Title-->
                          {{ $t('general.title') }}
                        </th>
                        <th>
                          <!--Event-->
                          {{ $t('general.event') }}
                        </th>
                        <th>
                          <!--Condition-->
                          {{ $t('general.condition') }}
                        </th>
                        <th>
                          <!--Notify Via-->
                          {{ $t('labels.notifyVia') }}
                        </th>
                        <th>
                          <!--Action-->
                          {{ $t('labels.action') }}
                        </th>
                      </tr>
                    </thead>

                    <tbody>
                      <template v-if="hooks && hooks.length">
                        <tr v-for="(item, i) in hooks" :key="i">
                          <td>
                            <v-radio :value="i" />
                          </td>
                          <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>
                            <!--              <x-icon small :color="loading || !valid || !hook.event ?  'grey' : 'primary'"
                                                @click.stop="(!loading && valid && hook.event) && saveHooks()">save
                                        </x-icon>-->
                          </td>
                        </tr>
                      </template>
                      <tr v-else>
                        <td colspan="6" class="text-center py-5">
                          <!--:tooltip="$t('tooltip.saveChanges')"-->
                          <x-btn v-ge="['hooks', 'add new']" outlined color="primary" small @click.prevent="addNewHook">
                            <v-icon small left> mdi-plus </v-icon>
                            <!--Add New Webhook-->
                            {{ $t('activity.addWebhook') }}
                          </x-btn>
                        </td>
                      </tr>
                    </tbody>
                  </template>
                </v-simple-table>
              </template>
            </v-radio-group>
          </v-col>
          <v-col cols="5">
            <v-card v-if="hook" class="">
              <v-card-title>
                Webhook
                <v-spacer />
                <x-btn
                  v-ge="['hooks', 'save']"
                  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') }}
                </x-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/Webhooks.vue">
                    <!--Document Reference-->
                    {{ $t('labels.docReference') }}
                  </a>
                </span>

                <webhooks-test
                  :model-id="meta.id"
                  :hook="{
                    ...hook,
                    filters,
                    notification: {
                      ...hook.notification,
                      payload: notification,
                    },
                  }"
                />
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </div>
</template>

<script>
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/webhook/WebhookEvent';
import WebhooksTest from '~/components/project/tableTabs/webhook/WebhooksTest';

export default {
  name: 'Webhooks',
  components: {
    WebhooksTest,
    HttpWebhook,
    WebhookEvent,
    // FormInput,
    ColumnFilter,
  },
  props: ['nodes'],
  data: () => ({
    key: 0,
    apps: {},
    slackChannels: null,
    teamsChannels: null,
    discordChannels: null,
    mattermostChannels: null,
    selectedHook: null,
    enableCondition: false,
    hooks: null,
    valid: false,
    meta: null,
    loading: false,
    notificationList: [
      'URL',
      'Email',
      'Slack',
      'Microsoft Teams',
      'Discord',
      'Mattermost',
      'Twilio',
      'Whatsapp Twilio',
    ],
    filters: [],
    hook: null,
    notification: {},
    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',
    },
    urlRules: [v => !v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || 'Not a valid URL'],
    fieldList: [],
    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,
        },
      ],
    },
  }),
  async created() {
    await this.loadMeta();
    await this.loadHooksList();
    // todo: load only necessary plugins
    await this.loadPluginList();
    this.selectedHook = 0;
    this.onEventChange();
  },
  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) {}
    },
    checkConditionAvail() {
      // if (!process.env.EE) {
      //   this.enableCondition = false
      //   this.$toast.info('For webhook condition : Upgrade to Enterprise Edition').goAway(3000)
      // }
      // this.hook.condition = []
    },
    async onNotTypeChange() {
      this.notification = {};
      if (this.hook.notification.type === 'Slack') {
        // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
        //   title: 'Slack'
        // }])
        // this.slackChannels = JSON.parse(plugin.input) || []

        this.slackChannels = (this.apps && this.apps.Slack && this.apps.Slack.parsedInput) || [];
      }
      if (this.hook.notification.type === 'Microsoft Teams') {
        // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
        //   title: 'Microsoft Teams'
        // }])
        // this.teamsChannels = JSON.parse(plugin.input) || []
        this.teamsChannels =
          (this.apps && this.apps['Microsoft Teams'] && this.apps['Microsoft Teams'].parsedInput) || [];
      }
      if (this.hook.notification.type === 'Discord') {
        // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
        //   title: 'Discord'
        // }])
        this.discordChannels = (this.apps && this.apps.Discord && this.apps.Discord.parsedInput) || [];
      }
      if (this.hook.notification.type === 'Mattermost') {
        // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
        //   title: 'Mattermost'
        // }])
        // this.mattermostChannels = JSON.parse(plugin.input) || []
        this.mattermostChannels = (this.apps && this.apps.Mattermost && this.apps.Mattermost.parsedInput) || [];
      }
    },
    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') {
        // eslint-disable-next-line no-self-assign
        this.notification.api = this.notification.api;
      }
    },
    async saveHooks() {
      if (!this.$refs.form.validate() || !this.valid || !this.hook.event) {
        return;
      }
      this.loading = true;
      try {
        // const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [
        //   {
        //     env: this.nodes.env,
        //     dbAlias: this.nodes.dbAlias
        //   }, 'tableXcHooksSet', {
        //     tn: this.nodes.table_name,
        //     data: {
        //       ...this.hook,
        //       notification: {
        //         ...this.hook.notification,
        //         payload: this.notification
        //       }
        //     }
        //   }
        // ])
        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;
      await this.loadHooksList();

      this.$e('a:webhook:add', {
        operation: this.hook.operation,
        condition: this.hook.condition,
        notification: this.hook.notification.type,
      });
    },
    async loadMeta() {
      this.loadingMeta = true;
      // const tableMeta = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
      //   env: this.nodes.env,
      //   dbAlias: this.nodes.dbAlias
      // }, 'tableXcModelGet', {
      //   tn: this.nodes.table_name
      // }] )
      this.meta = await this.$store.dispatch('meta/ActLoadMeta', {
        table_name: this.nodes.table_name,
      }); // JSON.parse(tableMeta.meta)
      this.fieldList = this.meta.columns.map(c => c.column_name);
      this.loadingMeta = false;
    },
    async loadHooksList() {
      this.key++;
      this.loading = true;
      // const hooks = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
      //   env: this.nodes.env,
      //   dbAlias: this.nodes.dbAlias
      // }, 'tableXcHooksList', {
      //   tn: this.nodes.table_name
      // }])

      const hooks = await this.$api.dbTableWebhook.list(this.meta.id);

      this.hooks = hooks.list.map(h => {
        h.notification = h.notification && JSON.parse(h.notification);
        // h.condition = h.condition && JSON.parse(h.condition)

        return h;
      });
      this.loading = false;
    },
    addNewHook() {
      this.key++;
      this.selectedHook = this.hooks.length;
      this.hooks.push({
        notification: {
          // type:'Email'
        },
      });
      this.onEventChange();
      this.$refs.form.resetValidation();

      this.$e('c:webhook:add', { count: this.hooks.length });
    },
    async deleteHook(item, i) {
      try {
        if (item.id) {
          await this.$api.dbTableWebhook.delete(item.id);
          this.hooks.splice(i, 1);
        } else {
          this.hooks.splice(i, 1);
        }
        this.$toast.success('Hook deleted successfully').goAway(3000);
        if (!this.hooks.length) {
          this.hook = null;
        }
      } catch (e) {
        this.$toast.error(e.message).goAway(3000);
      }

      this.$e('a:webhook:delete');
    },
  },
};
</script>

<style scoped>
/*tr.selected{*/
/*  background: #8ceaf6;*/
/*}*/

/deep/ label {
  font-size: 0.75rem !important;
}
</style>
<!--
/**
 * @copyright Copyright (c) 2021, Xgene Cloud Ltd
 *
 * @author Naveen MR <oof1lab@gmail.com>
 * @author Pranav C Balan <pranavxc@gmail.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 */
-->