feat: add option to delete and disable edits for SLA (#9108)

* feat: add delete button for SLA

* chore: remove edit SLA

* chore: remove update related texts from i18n

app/javascript/dashboard/i18n/locale/en/sla.json

@@ -55,11 +55,17 @@
         "ERROR_MESSAGE": "There was an error, please try again"
       }
     },
-    "EDIT": {
+    "DELETE": {
-      "TITLE": "Edit SLA",
+      "TITLE": "Delete SLA",
       "API": {
-        "SUCCESS_MESSAGE": "SLA updated successfully",
+        "SUCCESS_MESSAGE": "SLA deleted successfully",
         "ERROR_MESSAGE": "There was an error, please try again"
+      },
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure you want to delete ",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
       }
     }
   }

app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="h-auto overflow-auto flex flex-col">
-    <woot-modal-header :header-title="pageTitle" />
-    <sla-form
-      :submit-label="$t('SLA.FORM.EDIT')"
-      :selected-response="selectedResponse"
-      @submit="editSLA"
-      @close="onClose"
-    />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import validationMixin from './validationMixin';
-import validations from './validations';
-import SlaForm from './SlaForm.vue';
-
-export default {
-  components: {
-    SlaForm,
-  },
-  mixins: [alertMixin, validationMixin],
-  props: {
-    selectedResponse: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  validations,
-  computed: {
-    ...mapGetters({
-      uiFlags: 'sla/getUIFlags',
-    }),
-    pageTitle() {
-      return `${this.$t('SLA.EDIT.TITLE')} - ${this.selectedResponse.name}`;
-    },
-  },
-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-    async editSLA(payload) {
-      try {
-        await this.$store.dispatch('sla/update', {
-          id: this.selectedResponse.id,
-          ...payload,
-        });
-        this.showAlert(this.$t('SLA.EDIT.API.SUCCESS_MESSAGE'));
-        this.onClose();
-      } catch (error) {
-        const errorMessage =
-          error.message || this.$t('SLA.EDIT.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
-      }
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue

@@ -58,14 +58,14 @@
               </td>
               <td class="button-wrapper">
                 <woot-button
-                  v-tooltip.top="$t('SLA.FORM.EDIT')"
+                  v-tooltip.top="$t('SLA.FORM.DELETE')"
                   variant="smooth"
+                  color-scheme="alert"
                   size="tiny"
-                  color-scheme="secondary"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[sla.id]"
-                  icon="edit"
+                  @click="openDeletePopup(sla)"
-                  @click="openEditPopup(sla)"
                 />
               </td>
             </tr>
@@ -81,9 +81,16 @@
       <add-SLA @close="hideAddPopup" />
     </woot-modal>
 
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-delete-modal
-      <edit-SLA :selected-response="selectedResponse" @close="hideEditPopup" />
+      :show.sync="showDeleteConfirmationPopup"
-    </woot-modal>
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('SLA.DELETE.CONFIRM.TITLE')"
+      :message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
   </div>
 </template>
 <script>
@@ -91,20 +98,18 @@ import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 
 import AddSLA from './AddSLA.vue';
-import EditSLA from './EditSLA.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     AddSLA,
-    EditSLA,
   },
   mixins: [alertMixin],
   data() {
     return {
       loading: {},
       showAddPopup: false,
-      showEditPopup: false,
+      showDeleteConfirmationPopup: false,
       selectedResponse: {},
     };
   },
@@ -113,6 +118,15 @@ export default {
       records: 'sla/getSLA',
       uiFlags: 'sla/getUIFlags',
     }),
+    deleteConfirmText() {
+      return this.$t('SLA.DELETE.CONFIRM.YES');
+    },
+    deleteRejectText() {
+      return this.$t('SLA.DELETE.CONFIRM.NO');
+    },
+    deleteMessage() {
+      return ` ${this.selectedResponse.name}`;
+    },
   },
   mounted() {
     this.$store.dispatch('sla/get');
@@ -124,12 +138,30 @@ export default {
     hideAddPopup() {
       this.showAddPopup = false;
     },
-    openEditPopup(response) {
+    openDeletePopup(response) {
-      this.showEditPopup = true;
+      this.showDeleteConfirmationPopup = true;
       this.selectedResponse = response;
     },
-    hideEditPopup() {
+    closeDeletePopup() {
-      this.showEditPopup = false;
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.loading[this.selectedResponse.id] = true;
+      this.closeDeletePopup();
+      this.deleteSla(this.selectedResponse.id);
+    },
+    deleteSla(id) {
+      this.$store
+        .dispatch('sla/delete', id)
+        .then(() => {
+          this.showAlert(this.$t('SLA.DELETE.API.SUCCESS_MESSAGE'));
+        })
+        .catch(() => {
+          this.showAlert(this.$t('SLA.DELETE.API.ERROR_MESSAGE'));
+        })
+        .finally(() => {
+          this.loading[this.selectedResponse.id] = false;
+        });
     },
     displayTime(threshold) {
       const { time, unit } = convertSecondsToTimeUnit(threshold, {

app/javascript/dashboard/store/modules/sla.js

@@ -50,16 +50,16 @@ export const actions = {
     }
   },
 
-  update: async function update({ commit }, { id, ...updateObj }) {
+  delete: async function deleteSla({ commit }, id) {
-    commit(types.SET_SLA_UI_FLAG, { isUpdating: true });
+    commit(types.SET_SLA_UI_FLAG, { isDeleting: true });
     try {
-      const response = await SlaAPI.update(id, updateObj);
+      await SlaAPI.delete(id);
-      AnalyticsHelper.track(SLA_EVENTS.UPDATE);
+      AnalyticsHelper.track(SLA_EVENTS.DELETED);
-      commit(types.EDIT_SLA, response.data.payload);
+      commit(types.DELETE_SLA, id);
     } catch (error) {
       throwErrorMessage(error);
     } finally {
-      commit(types.SET_SLA_UI_FLAG, { isUpdating: false });
+      commit(types.SET_SLA_UI_FLAG, { isDeleting: false });
     }
   },
 };
@@ -74,7 +74,7 @@ export const mutations = {
 
   [types.SET_SLA]: MutationHelpers.set,
   [types.ADD_SLA]: MutationHelpers.create,
-  [types.EDIT_SLA]: MutationHelpers.update,
+  [types.DELETE_SLA]: MutationHelpers.destroy,
 };
 
 export default {