Set up mock data for stages

app/assets/javascripts/jobs/components/job_app.vue

@@ -122,11 +122,13 @@ export default {
     // fetch the stages for the dropdown on the sidebar
     job(newVal, oldVal) {
       if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
-        this.fetchJobsForStage(
+        const stages = this.job.pipeline.details.stages || [];
-          this.job.pipeline.details.stages.find(
+
-            stage => stage && stage.name === this.selectedStage,
+        const defaultStage = stages.find(stage => stage && stage.name === this.selectedStage);
-          ),
+
-        );
+        if (defaultStage) {
+          this.fetchJobsForStage(defaultStage);
+        }
       }
 
       if (newVal.archived) {
@@ -274,7 +276,6 @@ export default {
           :class="{ 'sticky-top border-bottom-0': hasTrace }"
         >
           <icon name="lock" class="align-text-bottom" />
-
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
         </div>
         <!-- job log -->

app/assets/javascripts/jobs/store/actions.js

@@ -185,7 +185,7 @@ 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) => {
+export const fetchJobsForStage = ({ dispatch }, stage = {}) => {
   dispatch('requestJobsForStage', stage);
 
   axios

app/assets/javascripts/jobs/store/mutations.js

@@ -65,7 +65,10 @@ export default {
     state.isLoading = false;
     state.job = job;
 
-    state.stages = ((job.pipeline || {}).details || {}).stages || [];
+    state.stages =
+      job.pipeline && job.pipeline.details && job.pipeline.details.stages
+        ? job.pipeline.details.stages
+        : [];
 
     /**
      * We only update it on the first request
@@ -103,7 +106,7 @@ export default {
     state.isScrolledToBottomBeforeReceivingTrace = toggle;
   },
 
-  [types.REQUEST_JOBS_FOR_STAGE](state, stage) {
+  [types.REQUEST_JOBS_FOR_STAGE](state, stage = {}) {
     state.isLoadingJobs = true;
     state.selectedStage = stage.name;
   },

locale/gitlab.pot

@@ -874,9 +874,6 @@ msgstr ""
 msgid "An error occurred while fetching sidebar data"
 msgstr ""
 
-msgid "An error occurred while fetching stages."
-msgstr ""
-
 msgid "An error occurred while fetching the board lists. Please try again."
 msgstr ""
 

spec/javascripts/jobs/mock_data.js

@@ -995,7 +995,33 @@ export default {
       },
       duration: 6,
       finished_at: '2017-06-01T17:32:00.042Z',
-      stages,
+      stages: [
+        {
+          dropdown_path: '/jashkenas/underscore/pipelines/16/stage.json?stage=build',
+          name: 'build',
+          path: '/jashkenas/underscore/pipelines/16#build',
+          status: {
+            icon: 'status_success',
+            text: 'passed',
+            label: 'passed',
+            group: 'success',
+            tooltip: 'passed',
+          },
+          title: 'build: passed',
+        },
+        {
+          dropdown_path: '/jashkenas/underscore/pipelines/16/stage.json?stage=test',
+          name: 'test',
+          path: '/jashkenas/underscore/pipelines/16#test',
+          status: {
+            icon: 'status_warning',
+            text: 'passed',
+            label: 'passed with warnings',
+            group: 'success-with-warnings',
+          },
+          title: 'test: passed with warnings',
+        },
+      ],
     },
     ref: {
       name: 'abc',