Merge branch 'worker-version-picker' into 'master'

Allow to pick a worker version from the existing components

See merge request teklia/arkindex/frontend!1332

src/components/Process/Configure.vue

@@ -170,7 +170,7 @@
         title="Add worker versions to your process by selecting available ones below"
         is-large
       >
-        <Workers :process-id="id" />
+        <Workers :process-id="id" selectable />
         <template v-slot:footer="{ close }">
           <button class="button is-primary" v-on:click="close">Done</button>
         </template>

src/components/Process/Workers/List.vue

@@ -82,9 +82,11 @@
               :worker-id="selectedWorker"
               :process-id="processId"
               :advanced-mode="advancedVersions"
+              :selectable="selectable"
+              v-on:selected-version="$emit('selected-version', $event)"
             />
           </div>
-          <template v-if="!processId">
+          <template v-if="!processId && !selectable">
             <hr />
             <h2 class="title is-4">Members</h2>
             <ListMembers
@@ -119,13 +121,22 @@ export default {
   mixins: [
     truncateMixin
   ],
+  emits: ['selected-version'],
   props: {
+    /*
+     * Display a button to pick a worker version and emits a selected-version
+     * event containing the worker version object upon selection.
+     * Otherwise, simply list workers with their versions and members.
+     */
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    /*
+     * If a process ID is defined, this component will automatically
+     * add the selected version to the process' workflow.
+     */
     processId: {
-      /*
-       * If a process ID is defined, this component allows to select a worker
-       * and add one of its version to the process workflow.
-       * Otherwise, list workers with their versions and members.
-       */
       type: String,
       default: ''
     }

src/components/Process/Workers/Versions/List.vue

@@ -19,15 +19,17 @@
             <th>Created</th>
             <th>References</th>
             <th>State</th>
-            <th v-if="processId">Actions</th>
+            <th v-if="processId || selectable">Actions</th>
           </tr>
         </thead>
         <tbody>
           <Row
             :process-id="processId"
+            :selectable="selectable"
             :key="version.id"
             :version="version"
             v-for="version in results"
+            v-on:selected-version="$emit('selected-version', $event)"
           />
         </tbody>
       </table>
@@ -45,7 +47,13 @@ export default {
     Paginator,
     Row
   },
+  emits: ['selected-version'],
   props: {
+    // Display a button to pick a worker version
+    selectable: {
+      type: Boolean,
+      default: false
+    },
     // Lists versions related to a specific worker
     workerId: {
       type: String,

src/components/Process/Workers/Versions/Row.vue

@@ -23,10 +23,10 @@
         {{ capitalize(version.state) }}
       </span>
     </td>
-    <td v-if="processId">
-      <!-- Allows to emit a worker selection -->
+    <td v-if="processId || selectable">
+      <!-- Allows to select a worker version -->
       <div class="has-text-centered">
-        <button
+        <a
           v-if="isInProcess"
           class="button is-danger is-small"
           :disabled="!isAvailable || null"
@@ -35,8 +35,8 @@
           :title="isAvailable ? 'Remove this version from the process' : 'This version is not available'"
         >
           <i class="icon-trash"></i>
-        </button>
-        <button
+        </a>
+        <a
           v-else
           class="button is-success is-small"
           :disabled="!isAvailable || null"
@@ -45,7 +45,7 @@
           :title="isAvailable ? 'Add this version to the process' : 'This version is not available'"
         >
           <i class="icon-plus"></i>
-        </button>
+        </a>
       </div>
     </td>
   </tr>
@@ -57,7 +57,17 @@ import { ago } from '@/helpers/text.js'
 import { errorParser } from '@/helpers'
 import { GIT_REF_COLORS, REVISION_STATE_COLORS } from '@/config.js'
 export default {
+  emits: ['selected-version'],
   props: {
+    /*
+     * Allow to select a worker version
+     * Emits a selected-version event, and update
+     * the process by creating a new worker run
+     */
+    selectable: {
+      type: Boolean,
+      default: false
+    },
     version: {
       type: Object,
       required: true
@@ -88,6 +98,8 @@ export default {
       return ago(new Date(date))
     },
     async addWorkerRun () {
+      if (!this.selectable) return
+      this.$emit('selected-version', this.version)
       if (this.loading || !this.processId || !this.isAvailable) return
       this.loading = true
       try {