Add stage name in job.json response

5 files changed, 28 insertions, 22 deletions

diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 047cc4fb663..8f3c6aced23 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -36,7 +36,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['job', 'isLoading', 'stages', 'jobs']),
+    ...mapState(['job', 'isLoading', 'stages', 'jobs', 'selectedStage']),
     coverage() {
       return `${this.job.coverage}%`;
     },
@@ -276,6 +276,7 @@ export default {
           <stages-dropdown
             :stages="stages"
             :pipeline="job.pipeline"
+            :selected-stage="selectedStage"
             @requestSidebarStageDropdown="fetchJobsForStage"
           />
 
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 34d47b3a3bb..e5e1d56e287 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -2,7 +2,6 @@
 import _ from 'underscore';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
-import { __ } from '~/locale';
 
 export default {
   components: {
@@ -18,30 +17,20 @@ export default {
       type: Array,
       required: true,
     },
+    selectedStage: {
+      type: String,
+      required: true,
+    },
   },
-  data() {
-    return {
-      selectedStage: this.stages.length > 0 ? this.stages[0].name : __('More'),
-    };
-  },
+
   computed: {
     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) {
       this.$emit('requestSidebarStageDropdown', stage);
-      this.selectedStage = stage.name;
     },
   },
 };
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index c8e1090bcc5..d0040161dc3 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -141,8 +141,10 @@ export const fetchStages = ({ state, dispatch }) => {
   axios
     .get(`${state.job.pipeline.path}.json`)
     .then(({ data }) => {
+      // Set selected stage
       dispatch('receiveStagesSuccess', data.details.stages);
-      dispatch('fetchJobsForStage', data.details.stages[0]);
+      const selectedStage = data.details.stages.find(stage => stage.name === state.selectedStage);
+      dispatch('fetchJobsForStage', selectedStage);
     })
     .catch(() => dispatch('receiveStagesError'));
 };
@@ -156,11 +158,12 @@ export const receiveStagesError = ({ commit }) => {
 /**
  * Jobs list on sidebar - depend on stages dropdown
  */
-export const requestJobsForStage = ({ commit }) => commit(types.REQUEST_JOBS_FOR_STAGE);
+export const requestJobsForStage = ({ commit }, stage) =>
+  commit(types.REQUEST_JOBS_FOR_STAGE, stage);
 
 // On stage click, set selected stage + fetch job
 export const fetchJobsForStage = ({ dispatch }, stage) => {
-  dispatch('requestJobsForStage');
+  dispatch('requestJobsForStage', stage);
 
   axios
     .get(stage.dropdown_path, {
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index c3f2359fa4d..f00e06e1a6c 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -53,6 +53,16 @@ export default {
     state.isLoading = false;
     state.hasError = false;
     state.job = job;
+
+    /**
+     * We only update it on the first request
+     * The dropdown can be changed by the user
+     * after the first request,
+     * and we do not want to hijack that
+     */
+    if (state.selectedStage === 'More' && job.stage) {
+      state.selectedStage = job.stage;
+    }
   },
   [types.RECEIVE_JOB_ERROR](state) {
     state.isLoading = false;
@@ -81,8 +91,9 @@ export default {
     state.stages = [];
   },
 
-  [types.REQUEST_JOBS_FOR_STAGE](state) {
+  [types.REQUEST_JOBS_FOR_STAGE](state, stage) {
     state.isLoadingJobs = true;
+    state.selectedStage = stage.name;
   },
   [types.RECEIVE_JOBS_FOR_STAGE_SUCCESS](state, jobs) {
     state.isLoadingJobs = false;
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index 509cb69a5d3..afbc959bb71 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -1,3 +1,5 @@
+import { __ } from '~/locale';
+
 export default () => ({
   jobEndpoint: null,
   traceEndpoint: null,
@@ -34,7 +36,7 @@ export default () => ({
   // sidebar dropdown
   isLoadingStages: false,
   isLoadingJobs: false,
-  selectedStage: null,
+  selectedStage: __('More'),
   stages: [],
   jobs: [],
 });