added empty state & YAML error state

7 files changed, 63 insertions, 9 deletions

diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 4f474b00af1..b8d05e95a7d 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -1,10 +1,12 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { sprintf, __ } from '../../../locale';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
 import Tab from '../../../vue_shared/components/tabs/tab.vue';
+import EmptyState from '../../../pipelines/components/empty_state.vue';
 import JobsList from '../jobs/list.vue';
 
 export default {
@@ -15,10 +17,23 @@ export default {
     Tabs,
     Tab,
     JobsList,
+    EmptyState,
   },
   computed: {
+    ...mapState(['pipelinesEmptyStateSvgPath']),
+    ...mapGetters(['currentProject']),
     ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages', 'pipelineFailed']),
     ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline', 'stages', 'isLoadingJobs']),
+    ciLintText() {
+      return sprintf(
+        __('You can also test your .gitlab-ci.yml in the %{linkStart}Lint%{linkEnd}'),
+        {
+          linkStart: `<a href="${this.currentProject.web_url}/-/ci/lint">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
   },
   created() {
     this.fetchLatestPipeline();
@@ -32,12 +47,13 @@ export default {
 <template>
   <div class="ide-pipeline">
     <loading-icon
-      v-if="isLoadingPipeline && !latestPipeline"
+      v-if="isLoadingPipeline && latestPipeline === null"
       class="prepend-top-default"
       size="2"
     />
-    <template v-else-if="latestPipeline">
+    <template v-else-if="latestPipeline !== null">
       <header
+        v-if="latestPipeline"
         class="ide-tree-header ide-pipeline-header"
       >
         <ci-icon
@@ -61,7 +77,31 @@ export default {
           </a>
         </span>
       </header>
-      <tabs class="ide-pipeline-list">
+      <empty-state
+        v-if="latestPipeline === false"
+        help-page-path="a"
+        :empty-state-svg-path="pipelinesEmptyStateSvgPath"
+        :can-set-ci="true"
+      />
+      <div
+        v-else-if="latestPipeline.yamlError"
+        class="bs-callout bs-callout-danger"
+      >
+        <p class="append-bottom-0">
+          Found errors in your .gitlab-ci.yml:
+        </p>
+        <p class="append-bottom-0">
+          {{ latestPipeline.yamlError }}
+        </p>
+        <p
+          class="append-bottom-0"
+          v-html="ciLintText"
+        ></p>
+      </div>
+      <tabs
+        v-else
+        class="ide-pipeline-list"
+      >
         <tab
           :active="!pipelineFailed"
         >
@@ -105,6 +145,7 @@ export default {
 .ide-pipeline {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .ide-pipeline-list {
@@ -121,4 +162,9 @@ export default {
 .ide-pipeline-header .ci-status-icon {
   display: flex;
 }
+
+.ide-pipeline .empty-state {
+  margin-top: auto;
+  margin-bottom: auto;
+}
 </style>
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index c5835cd3b06..e7b98a9533f 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -21,6 +21,7 @@ export function initIde(el) {
         emptyStateSvgPath: el.dataset.emptyStateSvgPath,
         noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
         committedStateSvgPath: el.dataset.committedStateSvgPath,
+        pipelinesEmptyStateSvgPath: el.dataset.pipelinesEmptyStateSvgPath,
       });
     },
     render(createElement) {
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
index 71e9a1b0751..bb72a180f0d 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
@@ -19,12 +19,14 @@ export const receiveLatestPipelineError = ({ commit, dispatch }) => {
   dispatch('stopPipelinePolling');
 };
 export const receiveLatestPipelineSuccess = ({ rootGetters, commit }, { pipelines }) => {
+  let lastCommitPipeline = false;
+
   if (pipelines && pipelines.length) {
     const lastCommitHash = rootGetters.lastCommit && rootGetters.lastCommit.id;
-    const lastCommitPipeline = pipelines.find(pipeline => pipeline.commit.id === lastCommitHash);
-
-    commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, lastCommitPipeline);
+    lastCommitPipeline = pipelines.find(pipeline => pipeline.commit.id === lastCommitHash);
   }
+
+  commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, lastCommitPipeline);
 };
 
 export const fetchLatestPipeline = ({ dispatch, rootGetters }) => {
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
index b4944cae551..419be989901 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
@@ -19,6 +19,7 @@ export default {
         details: {
           status: pipeline.details.status,
         },
+        yamlError: pipeline.yaml_errors,
       };
       state.stages = pipeline.details.stages.map((stage, i) => {
         const foundStage = state.stages.find(s => s.id === i);
@@ -32,6 +33,8 @@ export default {
           jobs: foundStage ? foundStage.jobs : [],
         };
       });
+    } else {
+      state.latestPipeline = false;
     }
   },
   [types.REQUEST_JOBS](state, id) {
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/state.js b/app/assets/javascripts/ide/stores/modules/pipelines/state.js
index 6f22542aaea..0f83b315fff 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/state.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/state.js
@@ -1,5 +1,5 @@
 export default () => ({
-  isLoadingPipeline: false,
+  isLoadingPipeline: true,
   isLoadingJobs: false,
   latestPipeline: null,
   stages: [],
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 633c93ed0a8..20f655f2321 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -114,12 +114,13 @@ export default {
   },
   [types.SET_EMPTY_STATE_SVGS](
     state,
-    { emptyStateSvgPath, noChangesStateSvgPath, committedStateSvgPath },
+    { emptyStateSvgPath, noChangesStateSvgPath, committedStateSvgPath, pipelinesEmptyStateSvgPath },
   ) {
     Object.assign(state, {
       emptyStateSvgPath,
       noChangesStateSvgPath,
       committedStateSvgPath,
+      pipelinesEmptyStateSvgPath,
     });
   },
   [types.TOGGLE_FILE_FINDER](state, fileFindVisible) {
diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml
index da9331b45dd..3e553fb7bd9 100644
--- a/app/views/ide/index.html.haml
+++ b/app/views/ide/index.html.haml
@@ -3,7 +3,8 @@
 
 #ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'),
   "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
-  "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg') } }
+  "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg'),
+  "pipelines-empty-state-svg-path": image_path('illustrations/pipelines_empty.svg') } }
   .text-center
     = icon('spinner spin 2x')
     %h2.clgray= _('Loading the GitLab IDE...')