Merge branch '59995-ide-status-bar-vue-render-error' into 'master'

Fix vue render error for IDE status bar

Closes #59995

See merge request gitlab-org/gitlab-ce!26979

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

@@ -24,7 +24,13 @@ export default {
     ...mapState(['pipelinesEmptyStateSvgPath', 'links']),
     ...mapGetters(['currentProject']),
     ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages', 'pipelineFailed']),
-    ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline', 'stages', 'isLoadingJobs']),
+    ...mapState('pipelines', [
+      'isLoadingPipeline',
+      'hasLoadedPipeline',
+      'latestPipeline',
+      'stages',
+      'isLoadingJobs',
+    ]),
     ciLintText() {
       return sprintf(
         __('You can test your .gitlab-ci.yml in %{linkStart}CI Lint%{linkEnd}.'),
@@ -36,7 +42,7 @@ export default {
       );
     },
     showLoadingIcon() {
-      return this.isLoadingPipeline && this.latestPipeline === null;
+      return this.isLoadingPipeline && !this.hasLoadedPipeline;
     },
   },
   created() {
@@ -51,7 +57,7 @@ export default {
 <template>
   <div class="ide-pipeline">
     <gl-loading-icon v-if="showLoadingIcon" :size="2" class="prepend-top-default" />
-    <template v-else-if="latestPipeline !== null">
+    <template v-else-if="hasLoadedPipeline">
       <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
         <ci-icon :status="latestPipeline.details.status" :size="24" />
         <span class="prepend-left-8">
@@ -62,7 +68,7 @@ export default {
         </span>
       </header>
       <empty-state
-        v-if="latestPipeline === false"
+        v-if="!latestPipeline"
         :help-page-path="links.ciHelpPagePath"
         :empty-state-svg-path="pipelinesEmptyStateSvgPath"
         :can-set-ci="true"

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

@@ -10,6 +10,7 @@ export default {
   },
   [types.RECEIVE_LASTEST_PIPELINE_SUCCESS](state, pipeline) {
     state.isLoadingPipeline = false;
+    state.hasLoadedPipeline = true;
 
     if (pipeline) {
       state.latestPipeline = {
@@ -34,7 +35,7 @@ export default {
         };
       });
     } else {
-      state.latestPipeline = false;
+      state.latestPipeline = null;
     }
   },
   [types.REQUEST_JOBS](state, id) {

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

 export default () => ({
   isLoadingPipeline: true,
+  hasLoadedPipeline: false,
   isLoadingJobs: false,
   latestPipeline: null,
   stages: [],

spec/javascripts/ide/components/pipelines/list_spec.js

@@ -11,6 +11,8 @@ describe('IDE pipelines list', () => {
   let vm;
   let mock;
 
+  const findLoadingState = () => vm.$el.querySelector('.loading-container');
+
   beforeEach(done => {
     const store = createStore();
 
@@ -95,7 +97,7 @@ describe('IDE pipelines list', () => {
 
   describe('empty state', () => {
     it('renders pipelines empty state', done => {
-      vm.$store.state.pipelines.latestPipeline = false;
+      vm.$store.state.pipelines.latestPipeline = null;
 
       vm.$nextTick(() => {
         expect(vm.$el.querySelector('.empty-state')).not.toBe(null);
@@ -106,15 +108,30 @@ describe('IDE pipelines list', () => {
   });
 
   describe('loading state', () => {
-    it('renders loading state when there is no latest pipeline', done => {
-      vm.$store.state.pipelines.latestPipeline = null;
+    beforeEach(() => {
       vm.$store.state.pipelines.isLoadingPipeline = true;
+    });
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
+    it('does not render when pipeline has loaded before', done => {
+      vm.$store.state.pipelines.hasLoadedPipeline = true;
 
-        done();
+      vm.$nextTick()
+        .then(() => {
+          expect(findLoadingState()).toBe(null);
+        })
+        .then(done)
+        .catch(done.fail);
     });
+
+    it('renders loading state when there is no latest pipeline', done => {
+      vm.$store.state.pipelines.hasLoadedPipeline = false;
+
+      vm.$nextTick()
+        .then(() => {
+          expect(findLoadingState()).not.toBe(null);
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 });

spec/javascripts/ide/stores/modules/pipelines/mutations_spec.js

@@ -27,21 +27,27 @@ describe('IDE pipelines mutations', () => {
   });
 
   describe(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, () => {
-    it('sets loading to false on success', () => {
-      mutations[types.RECEIVE_LASTEST_PIPELINE_SUCCESS](
-        mockedState,
-        fullPipelinesResponse.data.pipelines[0],
-      );
+    const itSetsPipelineLoadingStates = () => {
+      it('sets has loaded to true', () => {
+        expect(mockedState.hasLoadedPipeline).toBe(true);
+      });
 
+      it('sets loading to false on success', () => {
         expect(mockedState.isLoadingPipeline).toBe(false);
       });
+    };
 
-    it('sets latestPipeline', () => {
+    describe('with pipeline', () => {
+      beforeEach(() => {
         mutations[types.RECEIVE_LASTEST_PIPELINE_SUCCESS](
           mockedState,
           fullPipelinesResponse.data.pipelines[0],
         );
+      });
 
+      itSetsPipelineLoadingStates();
+
+      it('sets latestPipeline', () => {
         expect(mockedState.latestPipeline).toEqual({
           id: '51',
           path: 'test',
@@ -51,18 +57,7 @@ describe('IDE pipelines mutations', () => {
         });
       });
 
-    it('does not set latest pipeline if pipeline is null', () => {
-      mutations[types.RECEIVE_LASTEST_PIPELINE_SUCCESS](mockedState, null);
-
-      expect(mockedState.latestPipeline).toEqual(false);
-    });
-
       it('sets stages', () => {
-      mutations[types.RECEIVE_LASTEST_PIPELINE_SUCCESS](
-        mockedState,
-        fullPipelinesResponse.data.pipelines[0],
-      );
-
         expect(mockedState.stages.length).toBe(2);
         expect(mockedState.stages).toEqual([
           {
@@ -87,6 +82,19 @@ describe('IDE pipelines mutations', () => {
       });
     });
 
+    describe('with null', () => {
+      beforeEach(() => {
+        mutations[types.RECEIVE_LASTEST_PIPELINE_SUCCESS](mockedState, null);
+      });
+
+      itSetsPipelineLoadingStates();
+
+      it('does not set latest pipeline if pipeline is null', () => {
+        expect(mockedState.latestPipeline).toEqual(null);
+      });
+    });
+  });
+
   describe(types.REQUEST_JOBS, () => {
     beforeEach(() => {
       mockedState.stages = stages.map((stage, i) => ({