1 files changed, 58 insertions, 58 deletions

diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index d6d64fa32f7..1c15af55a8b 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -1,8 +1,8 @@
 <script>
+  import _ from 'underscore';
   import CiIcon from '~/vue_shared/components/ci_icon.vue';
   import Icon from '~/vue_shared/components/icon.vue';
-
-  import { sprintf, __ } from '~/locale';
+  import { __ } from '~/locale';
 
   export default {
     components: {
@@ -10,30 +10,14 @@
       Icon,
     },
     props: {
-      pipelineId: {
-        type: Number,
-        required: true,
-      },
-      pipelinePath: {
-        type: String,
-        required: true,
-      },
-      pipelineRef: {
-        type: String,
-        required: true,
-      },
-      pipelineRefPath: {
-        type: String,
+      pipeline: {
+        type: Object,
         required: true,
       },
       stages: {
         type: Array,
         required: true,
       },
-      pipelineStatus: {
-        type: Object,
-        required: true,
-      },
     },
     data() {
       return {
@@ -41,57 +25,73 @@
       };
     },
     computed: {
-      pipelineLink() {
-        return sprintf(__('Pipeline %{pipelineLinkStart} #%{pipelineId} %{pipelineLinkEnd} from %{pipelineLinkRefStart} %{pipelineRef} %{pipelineLinkRefEnd}'), {
-          pipelineLinkStart: `<a href=${this.pipelinePath} class="js-pipeline-path link-commit">`,
-          pipelineId: this.pipelineId,
-          pipelineLinkEnd: '</a>',
-          pipelineLinkRefStart: `<a href=${this.pipelineRefPath} class="link-commit ref-name">`,
-          pipelineRef: this.pipelineRef,
-          pipelineLinkRefEnd: '</a>',
-        }, false);
+      hasRef() {
+        return !_.isEmpty(this.pipeline.ref);
+      },
+    },
+    watch: {
+      // When the component is initially mounted it may start with an empty stages array.
+      // Once the prop is updated, we set the first stage as the selected one
+      stages(newVal) {
+        if (newVal.length) {
+          this.selectedStage = newVal[0].name;
+        }
       },
     },
     methods: {
       onStageClick(stage) {
-        // todo: consider moving into store
-        this.selectedStage = stage.name;
-
-        // update dropdown with jobs
-        // jobs container is a new component.
         this.$emit('requestSidebarStageDropdown', stage);
+        this.selectedStage = stage.name;
       },
     },
   };
 </script>
 <template>
-  <div class="block-last">
-    <ci-icon :status="pipelineStatus" />
+  <div class="block-last dropdown">
+    <ci-icon
+      :status="pipeline.details.status"
+      class="vertical-align-middle"
+    />
+
+    {{ __('Pipeline') }}
+    <a
+      :href="pipeline.path"
+      class="js-pipeline-path link-commit"
+    >
+      #{{ pipeline.id }}
+    </a>
+    <template v-if="hasRef">
+      {{ __('from') }}
+      <a
+        :href="pipeline.ref.path"
+        class="link-commit ref-name"
+      >
+        {{ pipeline.ref.name }}
+      </a>
+    </template>
 
-    <p v-html="pipelineLink"></p>
+    <button
+      type="button"
+      data-toggle="dropdown"
+      class="js-selected-stage dropdown-menu-toggle prepend-top-8"
+    >
+      {{ selectedStage }}
+      <i class="fa fa-chevron-down" ></i>
+    </button>
 
-    <div class="dropdown">
-      <button
-        type="button"
-        data-toggle="dropdown"
+    <ul class="dropdown-menu">
+      <li
+        v-for="stage in stages"
+        :key="stage.name"
       >
-        {{ selectedStage }}
-        <icon name="chevron-down" />
-      </button>
-      <ul class="dropdown-menu">
-        <li
-          v-for="(stage, index) in stages"
-          :key="index"
+        <button
+          type="button"
+          class="js-stage-item stage-item"
+          @click="onStageClick(stage)"
         >
-          <button
-            type="button"
-            class="stage-item"
-            @click="onStageClick(stage)"
-          >
-            {{ stage.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+          {{ stage.name }}
+        </button>
+      </li>
+    </ul>
   </div>
 </template>