1 files changed, 20 insertions, 16 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index 7006d05e7b2..b86e95f0b4a 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -27,13 +27,6 @@
    * }
    */
   export default {
-    props: {
-      job: {
-        type: Object,
-        required: true,
-      },
-    },
-
     directives: {
       tooltip,
     },
@@ -43,12 +36,23 @@
       jobNameComponent,
     },
 
+    props: {
+      job: {
+        type: Object,
+        required: true,
+      },
+    },
+
     computed: {
       tooltipText() {
         return `${this.job.name} - ${this.job.status.label}`;
       },
     },
 
+    mounted() {
+      this.stopDropdownClickPropagation();
+    },
+
     methods: {
       /**
      * When the user right clicks or cmd/ctrl + click in the job name
@@ -59,16 +63,13 @@
      * target the click event of this component.
      */
       stopDropdownClickPropagation() {
-        $(this.$el.querySelectorAll('.js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item'))
+        $(this.$el
+          .querySelectorAll('.js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item'))
           .on('click', (e) => {
             e.stopPropagation();
           });
       },
     },
-
-    mounted() {
-      this.stopDropdownClickPropagation();
-    },
   };
 </script>
 <template>
@@ -83,22 +84,25 @@
 
       <job-name-component
         :name="job.name"
-        :status="job.status" />
+        :status="job.status"
+      />
 
       <span class="dropdown-counter-badge">
-        {{job.size}}
+        {{ job.size }}
       </span>
     </button>
 
     <ul class="dropdown-menu big-pipeline-graph-dropdown-menu js-grouped-pipeline-dropdown">
       <li class="scrollable-menu">
         <ul>
-          <li v-for="item in job.jobs">
+          <li
+            v-for="(item, i) in job.jobs"
+            :key="i">
             <job-component
               :job="item"
               :is-dropdown="true"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
-              />
+            />
           </li>
         </ul>
       </li>