Add separator + confirm modals in the process status actions

src/components/Process/Status/Status.vue

@@ -33,36 +33,38 @@
           <div class="dropdown-menu">
             <div class="dropdown-content">
               <template v-if="finishedProcess">
-                <router-link
-                  v-if="process.element"
-                  class="dropdown-item"
-                  :to="{ name: 'element-details', params: { id: process.element.id } }"
-                >
-                  <i class="icon-arrow-right"></i>
-                  View element
-                </router-link>
                 <a
                   class="dropdown-item"
                   :class="!hasAdminAccess ? 'is-disabled' : ''"
                   v-if="isVerified"
-                  v-on:click="retry"
+                  v-on:click="retryAction"
                   :title="hasAdminAccess ? 'Retry this entire process' : 'An admin access is required to retry this process'"
                 >
                   <i class="icon-undo"></i>
                   Retry process
                 </a>
+                <hr class="navbar-divider" />
+                <router-link
+                  v-if="process.element"
+                  class="dropdown-item"
+                  :to="{ name: 'element-details', params: { id: process.element.id } }"
+                >
+                  <i class="icon-arrow-right"></i>
+                  View element
+                </router-link>
               </template>
               <template v-else-if="activeProcess">
                 <a
                   class="dropdown-item has-text-danger"
                   :class="!isVerified ? 'is-disabled' : ''"
                   v-if="isVerified"
-                  v-on:click="stop"
+                  v-on:click="stopAction"
                   :title="hasAdminAccess ? 'Stop this process' : 'An admin access is required to stop this process'"
                 >
                   <i class="icon-minus"></i>
                   Stop process
                 </a>
+                <hr class="navbar-divider" />
               </template>
               <router-link
                 :to="hasActivities ? { name: 'process-workers-activity', params: { processId: process.id } } : ''"
@@ -148,6 +150,24 @@
         :selected-run="selectedRun"
       />
     </template>
+
+    <Modal v-model="confirmModal" :title="confirmModalTitle">
+      <span>
+        Are you sure you want to <strong>{{ confirmAction }}</strong> process {{ truncateShort(process.name) || process.id }}?
+      </span>
+      <br />
+      <span>This action is irreversible.</span>
+      <template v-slot:footer="{ close }">
+        <button class="button" v-on:click="close">Cancel</button>
+        <button
+          class="button"
+          :class="{ 'is-loading': loading, 'is-danger': confirmAction === 'stop', 'is-primary': confirmAction === 'retry' }"
+          v-on:click="confirmedAction"
+        >
+          {{ confirmAction }}
+        </button>
+      </template>
+    </Modal>
   </main>
 </template>
 
@@ -161,17 +181,19 @@ import {
   PROCESS_STATE_COLORS,
   PROCESS_FINAL_STATES
 } from '@/config'
-import { corporaMixin } from '@/mixins'
+import { corporaMixin, truncateMixin } from '@/mixins'
 import { errorParser } from '@/helpers'
 
 import ItemId from '@/components/ItemId'
 import NameField from '@/components/Process/Status/NameField'
 import Run from '@/components/Process/Status/Run'
 import TemplateCreation from '@/components/Process/TemplateCreation'
+import Modal from '@/components/Modal.vue'
 
 export default {
   mixins: [
-    corporaMixin
+    corporaMixin,
+    truncateMixin
   ],
   props: {
     id: {
@@ -187,13 +209,16 @@ export default {
     ItemId,
     NameField,
     Run,
-    TemplateCreation
+    TemplateCreation,
+    Modal
   },
   data: () => ({
     PENDING_ACTIVITY_STATE: 'pending',
     READY_ACTIVITY_STATE: 'ready',
     loading: false,
-    error: ''
+    error: '',
+    confirmModal: false,
+    confirmAction: ''
   }),
   mounted () {
     if ('Notification' in window) Notification.requestPermission()
@@ -205,6 +230,25 @@ export default {
     ...mapActions('process', ['startPolling']),
     ...mapMutations('process', ['setProcesses', 'stopPolling']),
     ...mapMutations('notifications', ['notify']),
+    retryAction () {
+      this.confirmModal = true
+      this.confirmAction = 'retry'
+    },
+    stopAction () {
+      this.confirmModal = true
+      this.confirmAction = 'stop'
+    },
+    async confirmedAction () {
+      if (this.confirmAction === 'stop') {
+        await this.stop()
+        this.confirmModal = false
+        this.confirmAction = ''
+      } else if (this.confirmAction === 'retry') {
+        await this.retry()
+        this.confirmModal = false
+        this.confirmAction = ''
+      } else this.notify({ type: 'error', text: `Unknown action ${this.confirmAction}` })
+    },
     async retry () {
       if (!this.hasAdminAccess || !this.process.id || this.loading) return
       try {
@@ -320,6 +364,10 @@ export default {
     createTemplateTitle () {
       if (!this.canCreateTemplate) return 'Templates can only be created from worker or dataset processes'
       return 'Create a template based on this process'
+    },
+    confirmModalTitle () {
+      const capitalizedAction = this.confirmAction.charAt(0).toUpperCase() + this.confirmAction.slice(1)
+      return `${capitalizedAction} process ${this.truncateShort(this.process.name) || this.process.id}`
     }
   },
   watch: {