Add separator + confirm modals in the process status actions

closes #1409 (closed)

src/components/Process/Status/Status.vue

@@ -32,46 +32,13 @@
           </div>
           <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"
-                  :title="hasAdminAccess ? 'Retry this entire process' : 'An admin access is required to retry this process'"
-                >
-                  <i class="icon-undo"></i>
-                  Retry process
-                </a>
-              </template>
-              <template v-else-if="activeProcess">
-                <a
-                  class="dropdown-item has-text-danger"
-                  :class="!isVerified ? 'is-disabled' : ''"
-                  v-if="isVerified"
-                  v-on:click="stop"
-                  :title="hasAdminAccess ? 'Stop this process' : 'An admin access is required to stop this process'"
-                >
-                  <i class="icon-minus"></i>
-                  Stop process
-                </a>
-              </template>
               <router-link
-                :to="hasActivities ? { name: 'process-workers-activity', params: { processId: process.id } } : ''"
+                v-if="finishedProcess && process.element"
                 class="dropdown-item"
-                :class="!hasActivities ? 'is-disabled' : ''"
-                :title="hasActivities ? 'Display statistics about workers activity' : 'This process has no workers activity tracking'"
+                :to="{ name: 'element-details', params: { id: process.element.id } }"
               >
-                <i class="icon-chart"></i>
-                Workers activity
+                <i class="icon-arrow-right"></i>
+                View element
               </router-link>
               <router-link
                 :to="hasConfiguration ? { name: 'process-configure', params: { processId: process.id } } : ''"
@@ -82,6 +49,15 @@
                 <i class="icon-arrow-left"></i>
                 Process configuration
               </router-link>
+              <router-link
+                :to="hasActivities ? { name: 'process-workers-activity', params: { processId: process.id } } : ''"
+                class="dropdown-item"
+                :class="!hasActivities ? 'is-disabled' : ''"
+                :title="hasActivities ? 'Display statistics about workers activity' : 'This process has no workers activity tracking'"
+              >
+                <i class="icon-chart"></i>
+                Workers activity
+              </router-link>
               <TemplateCreation
                 :process-id="process.id"
                 v-if="process.state === 'completed'"
@@ -98,6 +74,27 @@
                   </a>
                 </template>
               </TemplateCreation>
+              <hr class="dropdown-divider" />
+              <a
+                class="dropdown-item"
+                :class="!hasAdminAccess ? 'is-disabled' : ''"
+                v-if="finishedProcess && isVerified"
+                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>
+              <a
+                class="dropdown-item has-text-danger"
+                :class="!isVerified ? 'is-disabled' : ''"
+                v-if="activeProcess && isVerified"
+                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>
             </div>
           </div>
         </div>
@@ -148,6 +145,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 ml-auto"
+          :class="{ 'is-loading': loading, 'is-danger': confirmAction === 'stop', 'is-primary': confirmAction === 'retry' }"
+          v-on:click="confirmedAction"
+        >
+          {{ confirmAction }}
+        </button>
+      </template>
+    </Modal>
   </main>
 </template>
 
@@ -161,17 +176,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 +204,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 +225,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 throw new Error(`Unsupported action ${this.confirmAction}`)
+    },
     async retry () {
       if (!this.hasAdminAccess || !this.process.id || this.loading) return
       try {
@@ -320,6 +359,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: {