[hooks] Disable auto close on drawer submission

Author: widatama

plugins/hooks/frontend/public/javascripts/countly.models.js

@@ -274,20 +274,29 @@
             saveHook: function(context, record) {
                 delete record._canUpdate;
                 delete record._canDelete;
-                return CV.$.ajax({
-                    type: "POST",
-                    url: countlyCommon.API_PARTS.data.w + "/hook/save?" + "app_id=" + record.apps[0],
-                    data: {
-                        "hook_config": JSON.stringify(record)
-                    },
-                    dataType: "json",
-                    success: function() {
-                        context.dispatch("countlyHooks/table/fetchAll", null, {root: true});
-                        context.dispatch("countlyHooks/initializeDetail", record._id, {root: true});
-                    },
-                    error: function() {
-                        CountlyHelpers.notify({type: "error", message: jQuery.i18n.map["hooks.trigger-save-failed"]});
-                    }
+                return new Promise(function(resolve, reject) {
+                    CV.$.ajax({
+                        type: 'POST',
+                        url: countlyCommon.API_PARTS.data.w + '/hook/save?' + 'app_id=' + record.apps[0],
+                        data: {
+                            'hook_config': JSON.stringify(record)
+                        },
+                        dataType: 'json',
+                        success: function() {
+                            context.dispatch('countlyHooks/table/fetchAll', null, {root: true});
+                            context.dispatch('countlyHooks/initializeDetail', record._id, {root: true});
+                            resolve();
+                        },
+                        error: function(err) {
+                            var msg = jQuery.i18n.map['hooks.trigger-save-failed'];
+                            if (err.responseJSON && err.responseJSON.result) {
+                                msg = err.responseJSON.result;
+                            }
+
+                            CountlyHelpers.notify({type: 'error', message: msg});
+                            reject(err);
+                        },
+                    });
                 });
             },
             deleteHook: function(context, id) {
@@ -326,7 +335,15 @@
                             });
                             context.commit("setTestResult", res.result);
                         }
-                    }
+                    },
+                    error: function(err) {
+                        var msg = jQuery.i18n.map['hooks.test-hook-failed'];
+                        if (err.responseJSON && err.responseJSON.result) {
+                            msg = err.responseJSON.result;
+                        }
+
+                        CountlyHelpers.notify({type: "error", message: msg});
+                    },
                 });
             },
             resetTestResult: function(context) {

plugins/hooks/frontend/public/javascripts/countly.views.js

@@ -800,8 +800,14 @@
             }
         },
         methods: {
-            onSubmit: function(doc) {
-                this.$store.dispatch("countlyHooks/saveHook", doc);
+            onSubmit: function(doc, callback) {
+                this.$store.dispatch("countlyHooks/saveHook", doc)
+                    .then(function() {
+                        callback();
+                    })
+                    .catch(function(err) {
+                        callback(err);
+                    });
             },
             onClose: function($event) {
                 this.$emit("close", $event);
@@ -822,7 +828,6 @@
             removeEffect: function(index) {
                 this.$refs.drawerData.editedObject.effects.splice(index, 1);
             },
-
             testHook: function() {
                 var hookData = this.$refs.drawerData.editedObject;
                 this.$data.newTest = true;

plugins/hooks/frontend/public/localization/hooks.properties

@@ -114,6 +114,7 @@ hooks.effects-intro = Select the actions the hook will perform upon being trigge
 hooks.test-hook = HOOK TESTING
 hooks.test-hook-intro = Test your hooks to verify payloads or check if your hook setup is working properly before taking it live.
 hooks.test-hook-button = Test your hook setup
+hooks.test-hook-failed = Hook test failed.
 hooks.remove-action = Remove action
 hooks.send-email =  Email addresses to send the data to
 hooks.http-intro = Query string (for GET) or request body (for POST)

plugins/hooks/frontend/public/templates/vue-drawer.html

@@ -1,13 +1,14 @@
     <cly-drawer
-		@submit="onSubmit"
-		@close="onClose"
-		@copy="onCopy"
+        @submit="onSubmit"
+        @close="onClose"
+        @copy="onCopy"
         :size="6"
-		:title="title"
+        :title="title"
+        :requiresAsyncSubmit="true"
         ref="drawerData"
-		:saveButtonLabel="saveButtonLabel"
+        :saveButtonLabel="saveButtonLabel"
         toggle-transition="stdt-fade"
- 		v-bind="$props.controls">
+        v-bind="$props.controls">
         <template v-slot:default="drawerScope" >
             <cly-form-step id="step1" :name="i18n('hooks.step1')">
                 <cly-form-field name="hooksName" :label="i18n('hooks.name')" rules="required">