moved the collapsing method into a store action

normalized the data into a nicer format

app/assets/javascripts/ide/components/jobs/item.vue

@@ -29,7 +29,7 @@ export default {
     <span class="prepend-left-8">
       {{ job.name }}
       <a
-        :href="job.build_path"
+        :href="job.path"
         target="_blank"
         v-text="jobId"
       >

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -47,7 +47,7 @@ export default {
     this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth;
   },
   methods: {
-    ...mapActions('pipelines', ['fetchJobs']),
+    ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']),
   },
 };
 </script>
@@ -58,7 +58,7 @@ export default {
   >
     <div
       class="panel-heading"
-      @click="() => stage.isCollapsed = !stage.isCollapsed"
+      @click="toggleStageCollapsed(stage.id)"
     >
       <ci-icon
         :status="stage.status"

app/assets/javascripts/ide/stores/modules/pipelines/actions.js

@@ -65,9 +65,12 @@ export const fetchJobs = ({ dispatch }, stage) => {
   dispatch('requestJobs', stage.id);
 
   axios
-    .get(stage.dropdown_path)
+    .get(stage.dropdownPath)
     .then(({ data }) => dispatch('receiveJobsSuccess', { id: stage.id, data }))
     .catch(() => dispatch('receiveJobsError', stage.id));
 };
 
+export const toggleStageCollapsed = ({ commit }, stageId) =>
+  commit(types.TOGGLE_STAGE_COLLAPSE, stageId);
+
 export default () => {};

app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js

@@ -5,3 +5,5 @@ export const RECEIVE_LASTEST_PIPELINE_SUCCESS = 'RECEIVE_LASTEST_PIPELINE_SUCCES
 export const REQUEST_JOBS = 'REQUEST_JOBS';
 export const RECEIVE_JOBS_ERROR = 'RECEIVE_JOBS_ERROR';
 export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS';
+
+export const TOGGLE_STAGE_COLLAPSE = 'TOGGLE_STAGE_COLLAPSE';

app/assets/javascripts/ide/stores/modules/pipelines/mutations.js

@@ -23,8 +23,10 @@ export default {
       state.stages = pipeline.details.stages.map((stage, i) => {
         const foundStage = state.stages.find(s => s.id === i);
         return {
-          ...stage,
           id: i,
+          dropdownPath: stage.dropdown_path,
+          name: stage.name,
+          status: stage.status,
           isCollapsed: foundStage ? foundStage.isCollapsed : false,
           isLoading: foundStage ? foundStage.isLoading : false,
           jobs: foundStage ? foundStage.jobs : [],
@@ -33,34 +35,35 @@ export default {
     }
   },
   [types.REQUEST_JOBS](state, id) {
-    state.stages = state.stages.reduce(
-      (acc, stage) =>
-        acc.concat({
+    state.stages = state.stages.map(stage => ({
       ...stage,
       isLoading: id === stage.id ? true : stage.isLoading,
-        }),
-      [],
-    );
+    }));
   },
   [types.RECEIVE_JOBS_ERROR](state, id) {
-    state.stages = state.stages.reduce(
-      (acc, stage) =>
-        acc.concat({
+    state.stages = state.stages.map(stage => ({
       ...stage,
-          isLoading: id === stage.id ? false : stage.isLoading,
-        }),
-      [],
-    );
+      isLoading: id === stage.id ? true : stage.isLoading,
+    }));
   },
   [types.RECEIVE_JOBS_SUCCESS](state, { id, data }) {
-    state.stages = state.stages.reduce(
-      (acc, stage) =>
-        acc.concat({
+    const normalizeData = job => ({
+      id: job.id,
+      name: job.name,
+      status: job.status,
+      path: job.build_path,
+    });
+
+    state.stages = state.stages.map(stage => ({
       ...stage,
       isLoading: id === stage.id ? false : stage.isLoading,
-          jobs: id === stage.id ? data.latest_statuses : stage.jobs,
-        }),
-      [],
-    );
+      jobs: id === stage.id ? data.latest_statuses.map(normalizeData) : stage.jobs,
+    }));
+  },
+  [types.TOGGLE_STAGE_COLLAPSE](state, id) {
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isCollapsed: stage.id === id ? !stage.isCollapsed : stage.isCollapsed,
+    }));
   },
 };

app/assets/stylesheets/pages/repo.scss

@@ -911,6 +911,9 @@
     }
 
     &.is-right {
+      padding-right: $gl-padding;
+      padding-left: $gl-padding + 1px;
+
       &::after {
         right: auto;
         left: -1px;