[SER-1886] Deleting Crash group: Warning + Confirmation notification

frontend/express/public/javascripts/countly/vue/components/helpers.js

@@ -1293,6 +1293,63 @@
                     </div>'
     });
 
+    Vue.component("cly-list-drawer", countlyBaseComponent.extend({
+        props: {
+            list: {
+                type: Array,
+                required: true,
+            },
+            dropdownText: {
+                type: String,
+                default: 'Listed item(s) will be affected by this action',
+                required: false,
+            },
+        },
+        data: function() {
+            return {
+                isOpen: false,
+                options: {
+                    vuescroll: {
+                        sizeStrategy: 'number',
+                    },
+                    scrollPanel: {
+                        initialScrollX: false,
+                    },
+                    rail: {
+                        gutterOfSide: "4px",
+                        gutterOfEnds: "16px",
+                        keepShow: false,
+                    },
+                    bar: {
+                        background: "#A7AEB8",
+                        size: "6px",
+                        keepShow: false,
+                    }
+                },
+            };
+        },
+        methods: {
+            toggleList: function() {
+                this.isOpen = !this.isOpen;
+            },
+        },
+        template: '<div class="cly-list-drawer">\
+                        <div class="cly-list-drawer__text-clickable bu-pt-4 bu-pb-3 bu-has-text-weight-medium" @click="toggleList">\
+                            {{ dropdownText }}\
+                            <i class="cly-io-16 cly-io cly-io-chevron-down" :class="{ \'rotate-icon\': isOpen }"></i>\
+                        </div>\
+                        <div v-if="isOpen" class="cly-list-drawer__list">\
+                            <vue-scroll :ops="options">\
+                                <div>\
+                                    <ul>\
+                                        <li v-for="ev in list">{{ev}}</li>\
+                                    </ul>\
+                                </div>\
+                            </vue-scroll>\
+                        </div>\
+                    </div>'
+    }));
+
     Vue.component("cly-auto-refresh-toggle", countlyBaseComponent.extend({
         template: "<div class='cly-vue-auto-refresh-toggle'>\
                         <div v-if='autoRefresh' class='bu-level-item'>\

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4501,6 +4501,47 @@
     }
 }
 
+.cly-list-drawer {
+    .cly-list-drawer__text-clickable {
+        color: #0166D6;
+        cursor: pointer;
+    }
+    .cly-list-drawer__text-clickable i {
+        transition: transform 0.3s, -webkit-transform .3s;
+    }
+    .rotate-icon {
+        transform: rotate(180deg);
+    }
+    .cly-io {
+        display: inline-block;
+    }
+    .__view {
+        min-height: auto !important; 
+    }
+
+    &__list {
+        height: 150px;
+        background-color: #F6F6F6;
+        overflow: auto;
+        border-radius: 4px;
+        ul {
+            list-style: none;
+            padding: 0px;
+            margin: 0px;
+            li {
+                padding-left: 16px;
+                padding-top: 0.5rem;
+            }
+            li:first-child {
+                padding-top: 1rem;
+            }
+            li:last-child {
+                padding-bottom: 1rem;
+            }
+        }
+    }
+}
+
 .cly-vue-device-selector {
     background-color: #FFF;
     border-radius: 10px;

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

@@ -451,7 +451,9 @@
                 formatDate: function(row, col, cell) {
                     return moment(cell * 1000).format("lll");
                 },
-                hasDrillPermission: countlyAuth.validateRead('drill')
+                hasDrillPermission: countlyAuth.validateRead('drill'),
+                showDeleteDialog: false,
+                selectedGroups: [],
             };
         },
         computed: {
@@ -552,7 +554,17 @@
             },
             loading: function() {
                 return this.$store.getters["countlyCrashes/overview/loading"];
-            }
+            },
+            confirmDialogTitle: function() {
+                var title = "crashes.confirm-action-title";
+                title = this.selectedGroups.length > 1 ? title + "-plural" : title;
+                return CV.i18n(title);
+            },
+            confirmDialogText: function() {
+                var text = "crashes.groups-confirm-delete";
+                text = this.selectedGroups.length > 1 ? text + "-plural" : text;
+                return CV.i18n(text, this.selectedGroups.length);
+            },
         },
         methods: {
             refresh: function(force) {
@@ -575,7 +587,9 @@
             },
             handleSelectionChange: function(selectedRows, force = false) {
                 var self = this;
+                this.selectedGroups = [];
                 this.$data.selectedCrashgroups = selectedRows.map(function(row) {
+                    self.selectedGroups.push(row.name);
                     return row._id;
                 });
                 if (force) {
@@ -605,33 +619,30 @@
                     promise = this.$store.dispatch("countlyCrashes/overview/setSelectedAsShown", this.$data.selectedCrashgroups);
                 }
                 else if (state === "delete") {
-                    CountlyHelpers.confirm(jQuery.i18n.prop("crashes.confirm-delete", 1), "red", function(result) {
-                        if (result) {
-                            self.$store.dispatch("countlyCrashes/overview/setSelectedAsDeleted", self.$data.selectedCrashgroups)
-                                .then(function(response) {
-                                    if (Array.isArray(response.result)) {
-                                        var itemList = response.result.reduce(function(acc, curr) {
-                                            acc += "<li>" + curr + "</li>";
-                                            return acc;
-                                        }, "");
-                                        CountlyHelpers.alert("<ul>" + itemList + "</ul>", "red", { title: CV.i18n("crashes.alert-fails") });
-                                    }
-                                    else {
-                                        CountlyHelpers.notify({
-                                            title: jQuery.i18n.map["systemlogs.action.crash_deleted"],
-                                            message: jQuery.i18n.map["systemlogs.action.crash_deleted"]
-                                        });
-                                    }
-                                }).finally(function() {
-                                    // Reset selection if command is delete or hide
-                                    // if (["delete", "hide"].includes(state)) {
-                                    self.selectedCrashgroups = [];
-                                    self.$refs.dataTable.$refs.elTable.clearSelection();
-                                    // }
+                    self.$store.dispatch("countlyCrashes/overview/setSelectedAsDeleted", self.$data.selectedCrashgroups)
+                        .then(function(response) {
+                            if (Array.isArray(response.result)) {
+                                var itemList = response.result.reduce(function(acc, curr) {
+                                    acc += "<li>" + curr + "</li>";
+                                    return acc;
+                                }, "");
+                                CountlyHelpers.alert("<ul>" + itemList + "</ul>", "red", { title: CV.i18n("crashes.alert-fails") });
+                            }
+                            else {
+                                CountlyHelpers.notify({
+                                    title: jQuery.i18n.map["systemlogs.action.crash_deleted"],
+                                    message: jQuery.i18n.map["systemlogs.action.crash_group_deleted"]
                                 });
-                        }
-                    });
-
+                            }
+                        }).finally(function() {
+                            // Reset selection if command is delete or hide
+                            // if (["delete", "hide"].includes(state)) {
+                            self.selectedCrashgroups = [];
+                            self.$refs.dataTable.$refs.elTable.clearSelection();
+                            self.closeDeleteForm();
+                            self.refresh();
+                            // }
+                        });
                 }
 
                 if (typeof promise !== "undefined") {
@@ -676,7 +687,13 @@
             },
             unpatchSelectedGroups: function() {
                 this.handleSelectionChange([], true);
-            }
+            },
+            showDeleteForm: function() {
+                this.showDeleteDialog = true;
+            },
+            closeDeleteForm: function() {
+                this.showDeleteDialog = false;
+            },
         },
         beforeCreate: function() {
             var query = {};

plugins/crashes/frontend/public/localization/crashes.properties

@@ -136,6 +136,9 @@ crashes.confirm-action-hide = Are you sure you want to hide {0} item(s)
 crashes.confirm-action-show = Are you sure you want to unhide {0} item(s)
 crashes.confirm-action-resolving = Are you sure you want to move {0} item(s) to resolving state?
 
+crashes.confirm-action-title = Delete Crash Group
+crashes.confirm-action-title-plural = Delete Crash Groups
+crashes.yes-delete = Yes, delete group
 
 crashes.stacktrace = Stacktrace
 crashes.download-stacktrace = Download stacktrace
@@ -177,6 +180,10 @@ crashes.help-free-users= Number of users who have not experienced a crash for th
 crashes.help-free-sessions = Number of sessions during which the selected crash did not occur in the selected time period, expressed as a percentage of the total number of sessions within that time period.
 crashes.help-crash-fatality = Number of fatal crashes, expressed as a percentage of the total number of crashes that have occurred.
 
+crashes.groups-confirm-delete= 1 item will be affected by this action
+crashes.groups-confirm-delete-plural= {0} items will be affected by this action
+crashes.groups-want-to-delete= Do you want to delete crash group(s) permanently? This action is not reversible.
+
 crashes.report_limit = Amount of reports displayed
 crashes.total_overall=OVERALL
 crashes.fatal_crash_count=Fatal Crash Count
@@ -221,6 +228,7 @@ systemlogs.action.crash_added_comment = Crash Added Comment
 systemlogs.action.crash_edited_comment = Crash Edited Comment
 systemlogs.action.crash_deleted_comment = Crash Deleted Comment
 systemlogs.action.crash_deleted = Crash Deleted
+systemlogs.action.crash_group_deleted = Crash group’s data has been deleted.
 internal-events.[CLY]_crash = Crash
 crashes.show-binary-images = Show binary images
 crashes.binary-images = Binary Images

plugins/crashes/frontend/public/templates/overview.html

@@ -77,7 +77,7 @@
                                         <el-dropdown-item command="hide"><i class="cly-io cly-io-eye-off"></i>{{ i18n('crashes.action-hide') }}</el-dropdown-item>
                                     </cly-more-options>
                                     <span class="vertical-divider bu-mr-4 bu-ml-4"></span>
-                                    <el-button v-if="canUserDelete" class="bu-mr-3" size="small" type="default" @click="setSelectedAs('delete')">
+                                    <el-button v-if="canUserDelete" class="bu-mr-3" size="small" type="default" @click="showDeleteForm">
                                         <i class="cly-io-16 cly-io cly-io-trash" style="color:red"></i>
                                         <span class="ml-1" style="color: red">
                                             {{ i18n('crashes.action-delete') }}
@@ -89,6 +89,21 @@
                                 </div>
                             </template>
                         </cly-diff-helper>
+                        <cly-confirm-dialog 
+                        @cancel="closeDeleteForm" 
+                        @confirm="setSelectedAs('delete')" 
+                        :before-close="closeDeleteForm" 
+                        ref="deleteConfirmDialog" 
+                        :visible.sync="showDeleteDialog" 
+                        dialogType="danger" 
+                        :saveButtonLabel="i18n('crashes.yes-delete')" 
+                        :cancelButtonLabel="i18n('common.no-dont-delete')" 
+                        :title=confirmDialogTitle>
+                            <template slot-scope="scope">
+                                {{i18n('crashes.groups-want-to-delete')}}
+                                <cly-list-drawer :list="selectedGroups" :dropdownText="confirmDialogText"></cly-list-drawer>
+                            </template>
+                        </cly-confirm-dialog>
                     </template>
                 </cly-datatable-n>
             </cly-main>