changed mutation to return new array

this makes the component completly unaware of the store, instead it emits
events to the parent which knows about the store

3 files changed, 29 insertions, 15 deletions

diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue
index fd6bfdf86d0..bdd0364c9b9 100644
--- a/app/assets/javascripts/ide/components/jobs/list.vue
+++ b/app/assets/javascripts/ide/components/jobs/list.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapActions } from 'vuex';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Stage from './stage.vue';
 
@@ -17,6 +18,9 @@ export default {
       required: true,
     },
   },
+  methods: {
+    ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']),
+  },
 };
 </script>
 
@@ -32,6 +36,8 @@ export default {
         v-for="stage in stages"
         :key="stage.id"
         :stage="stage"
+        @fetch="fetchJobs"
+        @toggleCollapsed="toggleStageCollapsed"
       />
     </template>
   </div>
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index 370bb61bae8..5b24bb1f5a7 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -1,5 +1,4 @@
 <script>
-import { mapActions } from 'vuex';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
@@ -38,16 +37,17 @@ export default {
       return this.stage.jobs.length;
     },
   },
-  created() {
-    this.fetchJobs(this.stage);
-  },
   mounted() {
     const { stageTitle } = this.$refs;
 
     this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth;
+
+    this.$emit('fetch', this.stage);
   },
   methods: {
-    ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']),
+    toggleCollapsed() {
+      this.$emit('toggleCollapsed', this.stage.id);
+    },
   },
 };
 </script>
@@ -61,7 +61,7 @@ export default {
       :class="{
         'border-bottom-0': stage.isCollapsed
       }"
-      @click="toggleStageCollapsed(stage.id)"
+      @click="toggleCollapsed"
     >
       <ci-icon
         :status="stage.status"
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
index 38459dfbe77..3c50279642b 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
@@ -39,20 +39,28 @@ export default {
     }
   },
   [types.REQUEST_JOBS](state, id) {
-    const stage = state.stages.find(s => s.id === id);
-    stage.isLoading = true;
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isLoading: stage.id === id ? true : stage.isLoading,
+    }));
   },
   [types.RECEIVE_JOBS_ERROR](state, id) {
-    const stage = state.stages.find(s => s.id === id);
-    stage.isLoading = false;
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isLoading: stage.id === id ? false : stage.isLoading,
+    }));
   },
   [types.RECEIVE_JOBS_SUCCESS](state, { id, data }) {
-    const stage = state.stages.find(s => s.id === id);
-    stage.isLoading = false;
-    stage.jobs = data.latest_statuses.map(normalizeJob);
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isLoading: stage.id === id ? false : stage.isLoading,
+      jobs: data.latest_statuses.map(normalizeJob),
+    }));
   },
   [types.TOGGLE_STAGE_COLLAPSE](state, id) {
-    const stage = state.stages.find(s => s.id === id);
-    stage.isCollapsed = !stage.isCollapsed;
+    state.stages = state.stages.map(stage => ({
+      ...stage,
+      isCollapsed: stage.id === id ? !stage.isCollapsed : stage.isCollapsed,
+    }));
   },
 };