changed mutations, update single object instead of returning new array

bunch of i18n stuff 🙈

app/assets/javascripts/ide/components/pipelines/list.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
+import _ from 'underscore';
 import { sprintf, __ } from '../../../locale';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Icon from '../../../vue_shared/components/icon.vue';
@@ -28,12 +29,15 @@ export default {
       return sprintf(
         __('You can also test your .gitlab-ci.yml in the %{linkStart}Lint%{linkEnd}'),
         {
-          linkStart: `<a href="${this.currentProject.web_url}/-/ci/lint">`,
+          linkStart: `<a href="${_.escape(this.currentProject.web_url)}/-/ci/lint">`,
           linkEnd: '</a>',
         },
         false,
       );
     },
+    showLoadingIcon() {
+      return this.isLoadingPipeline && this.latestPipeline === null;
+    },
   },
   created() {
     this.fetchLatestPipeline();
@@ -47,7 +51,7 @@ export default {
 <template>
   <div class="ide-pipeline">
     <loading-icon
-      v-if="isLoadingPipeline && latestPipeline === null"
+      v-if="showLoadingIcon"
       class="prepend-top-default"
       size="2"
     />
@@ -62,7 +66,7 @@ export default {
         />
         <span class="prepend-left-8">
           <strong>
-            Pipeline
+            {{ __('Pipeline') }}
           </strong>
           <a
             :href="latestPipeline.path"
@@ -88,7 +92,7 @@ export default {
         class="bs-callout bs-callout-danger"
       >
         <p class="append-bottom-0">
-          Found errors in your .gitlab-ci.yml:
+          {{ __('Found errors in your .gitlab-ci.yml:') }}
         </p>
         <p class="append-bottom-0">
           {{ latestPipeline.yamlError }}
@@ -106,7 +110,7 @@ export default {
           :active="!pipelineFailed"
         >
           <template slot="title">
-            Jobs
+            {{ __('Jobs') }}
             <span
               v-if="jobsCount"
               class="badge badge-pill"
@@ -123,7 +127,7 @@ export default {
           :active="pipelineFailed"
         >
           <template slot="title">
-            Failed Jobs
+            {{ __('Failed Jobs') }}
             <span
               v-if="failedJobsCount"
               class="badge badge-pill"

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

+// eslint-disable-next-line import/prefer-default-export
+export const states = {
+  failed: 'failed',
+};

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

+import { states } from './constants';
+
 export const hasLatestPipeline = state => !state.isLoadingPipeline && !!state.latestPipeline;
 
 export const pipelineFailed = state =>
-  state.latestPipeline && state.latestPipeline.details.status.text === 'failed';
+  state.latestPipeline && state.latestPipeline.details.status.text === states.failed;
 
 export const failedStages = state =>
-  state.stages.filter(stage => stage.status.text.toLowerCase() === 'failed').map(stage => ({
+  state.stages.filter(stage => stage.status.text.toLowerCase() === states.failed).map(stage => ({
     ...stage,
-    jobs: stage.jobs.filter(job => job.status.text.toLowerCase() === 'failed'),
+    jobs: stage.jobs.filter(job => job.status.text.toLowerCase() === states.failed),
   }));
 
 export const failedJobsCount = state =>
   state.stages.reduce(
-    (acc, stage) => acc + stage.jobs.filter(j => j.status.text === 'failed').length,
+    (acc, stage) => acc + stage.jobs.filter(j => j.status.text === states.failed).length,
     0,
   );
 
 export const jobsCount = state => state.stages.reduce((acc, stage) => acc + stage.jobs.length, 0);
+
+export default () => {};

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

 /* eslint-disable no-param-reassign */
 import * as types from './mutation_types';
+import { normalizeJob } from './utils';
 
 export default {
   [types.REQUEST_LATEST_PIPELINE](state) {
@@ -38,39 +39,20 @@ export default {
     }
   },
   [types.REQUEST_JOBS](state, id) {
-    state.stages = state.stages.map(stage =>
-      Object.assign(stage, {
-        isLoading: id === stage.id ? true : stage.isLoading,
-      }),
-    );
+    const stage = state.stages.find(s => s.id === id);
+    stage.isLoading = true;
   },
   [types.RECEIVE_JOBS_ERROR](state, id) {
-    state.stages = state.stages.map(stage =>
-      Object.assign(stage, {
-        isLoading: id === stage.id ? false : stage.isLoading,
-      }),
-    );
+    const stage = state.stages.find(s => s.id === id);
+    stage.isLoading = false;
   },
   [types.RECEIVE_JOBS_SUCCESS](state, { id, data }) {
-    const normalizeData = job => ({
-      id: job.id,
-      name: job.name,
-      status: job.status,
-      path: job.build_path,
-    });
-
-    state.stages = state.stages.map(stage =>
-      Object.assign(stage, {
-        isLoading: id === stage.id ? false : stage.isLoading,
-        jobs: id === stage.id ? data.latest_statuses.map(normalizeData) : stage.jobs,
-      }),
-    );
+    const stage = state.stages.find(s => s.id === id);
+    stage.isLoading = false;
+    stage.jobs = data.latest_statuses.map(normalizeJob);
   },
   [types.TOGGLE_STAGE_COLLAPSE](state, id) {
-    state.stages = state.stages.map(stage =>
-      Object.assign(stage, {
-        isCollapsed: stage.id === id ? !stage.isCollapsed : stage.isCollapsed,
-      }),
-    );
+    const stage = state.stages.find(s => s.id === id);
+    stage.isCollapsed = !stage.isCollapsed;
   },
 };

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

+// eslint-disable-next-line import/prefer-default-export
+export const normalizeJob = job => ({
+  id: job.id,
+  name: job.name,
+  status: job.status,
+  path: job.build_path,
+});

spec/javascripts/ide/components/jobs/stage_spec.js

@@ -16,14 +16,18 @@ describe('IDE pipeline stage', () => {
     const store = createStore();
     mock = new MockAdapter(axios);
 
-    store.state.pipelines.stages = stages.map((mappedState, i) => ({
-      ...mappedState,
-      id: i,
-      dropdownPath: mappedState.dropdown_path,
-      jobs: [],
-      isLoading: false,
-      isCollapsed: false,
-    }));
+    Vue.set(
+      store.state.pipelines,
+      'stages',
+      stages.map((mappedState, i) => ({
+        ...mappedState,
+        id: i,
+        dropdownPath: mappedState.dropdown_path,
+        jobs: [],
+        isLoading: false,
+        isCollapsed: false,
+      })),
+    );
 
     stage = store.state.pipelines.stages[0];
 
@@ -35,7 +39,7 @@ describe('IDE pipeline stage', () => {
       stage,
     }).$mount();
 
-    setTimeout(done);
+    setTimeout(done, 500);
   });
 
   afterEach(() => {