Manage empty states in Pipelines page

Adds i18n
Adds test

Fix broken tests

Fixes empty tab state for external CI

10 files changed, 309 insertions, 222 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index ce19069f103..3b3072ebd3e 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -20,10 +20,6 @@
         type: String,
         required: true,
       },
-      emptyStateSvgPath: {
-        type: String,
-        required: true,
-      },
       errorStateSvgPath: {
         type: String,
         required: true,
@@ -45,23 +41,14 @@
     },
 
     computed: {
-      /**
-       * Empty state is only rendered if after the first request we receive no pipelines.
-       *
-       * @return {Boolean}
-       */
-      shouldRenderEmptyState() {
-        return !this.state.pipelines.length &&
-          !this.isLoading &&
-          this.hasMadeRequest &&
-          !this.hasError;
-      },
-
       shouldRenderTable() {
         return !this.isLoading &&
           this.state.pipelines.length > 0 &&
           !this.hasError;
       },
+      shouldRenderErrorState() {
+        return this.hasError && !this.isLoading;
+      },
     },
     created() {
       this.service = new PipelinesService(this.endpoint);
@@ -92,25 +79,22 @@
   <div class="content-list pipelines">
 
     <loading-icon
-      label="Loading pipelines"
+      :label="s__('Pipelines|Loading Pipelines')"
       size="3"
       v-if="isLoading"
+      class="prepend-top-20"
     />
 
-    <empty-state
-      v-if="shouldRenderEmptyState"
-      :help-page-path="helpPagePath"
-      :empty-state-svg-path="emptyStateSvgPath"
-    />
-
-    <error-state
-      v-if="shouldRenderErrorState"
-      :error-state-svg-path="errorStateSvgPath"
+    <svg-blank-state
+      v-else-if="shouldRenderErrorState"
+      :svg-path="errorStateSvgPath"
+      :message="s__(`Pipelines|There was an error with fetching the pipelines.
+      Try again in a few moments or contact your support team.`)"
     />
 
     <div
       class="table-holder"
-      v-if="shouldRenderTable"
+      v-else-if="shouldRenderTable"
     >
       <pipelines-table-component
         :pipelines="state.pipelines"
diff --git a/app/assets/javascripts/pages/projects/pipelines/index/index.js b/app/assets/javascripts/pages/projects/pipelines/index/index.js
index 25dfa99ad9c..4c092c60e72 100644
--- a/app/assets/javascripts/pages/projects/pipelines/index/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/index/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import PipelinesStore from '../../../../pipelines/stores/pipelines_store';
 import pipelinesComponent from '../../../../pipelines/components/pipelines.vue';
 import Translate from '../../../../vue_shared/translate';
+import { convertPermissionToBoolean } from '../../../../lib/utils/common_utils';
 
 Vue.use(Translate);
 
@@ -15,12 +16,25 @@ document.addEventListener('DOMContentLoaded', () => new Vue({
 
     return {
       store,
+      dataset: document.querySelector(this.$options.el).dataset,
     };
   },
+
   render(createElement) {
     return createElement('pipelines-component', {
       props: {
         store: this.store,
+        endpoint: this.dataset.endpoint,
+        helpPagePath: this.dataset.helpPagePath,
+        emptyStateSvgPath: this.dataset.emptyStateSvgPath,
+        errorStateSvgPath: this.dataset.errorStateSvgPath,
+        noPipelinesSvgPath: this.dataset.noPipelinesSvgPath,
+        autoDevopsPath: this.dataset.helpAutoDevopsPath,
+        newPipelinePath: this.dataset.newPipelinePath,
+        canCreatePipeline: convertPermissionToBoolean(this.dataset.canCreatePipeline),
+        hasGitlabCi: convertPermissionToBoolean(this.dataset.hasGitlabCi),
+        ciLintPath: this.dataset.ciLintPath,
+        resetCachePath: this.dataset.resetCachePath,
       },
     });
   },
diff --git a/app/assets/javascripts/pipelines/components/blank_state.vue b/app/assets/javascripts/pipelines/components/blank_state.vue
new file mode 100644
index 00000000000..8d3d6223d7b
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/blank_state.vue
@@ -0,0 +1,32 @@
+<script>
+  export default {
+    name: 'PipelinesSvgState',
+    props: {
+      svgPath: {
+        type: String,
+        required: true,
+      },
+
+      message: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="row empty-state">
+    <div class="col-xs-12">
+      <div class="svg-content">
+        <img :src="svgPath" />
+      </div>
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>{{ message }}</h4>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index dfaa2574091..51f05c7827e 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -1,5 +1,6 @@
 <script>
   export default {
+    name: 'PipelinesEmptyState',
     props: {
       helpPagePath: {
         type: String,
@@ -9,6 +10,10 @@
         type: String,
         required: true,
       },
+      canSetCi: {
+        type: Boolean,
+        required: true,
+      },
     },
   };
 </script>
@@ -22,22 +27,36 @@
 
     <div class="col-xs-12">
       <div class="text-content">
-        <h4 class="text-center">
-          {{ s__("Pipelines|Build with confidence") }}
-        </h4>
-        <p>
-          {{ s__(`Pipelines|Continous Integration can help
-catch bugs by running your tests automatically,
-while Continuous Deployment can help you deliver code to your product environment.`) }}
+
+        <template v-if="canSetCi">
+          <h4 class="text-center">
+            {{ s__('Pipelines|Build with confidence') }}
+          </h4>
+
+          <p>
+            {{ s__(`Pipelines|Continous Integration can help
+                catch bugs by running your tests automatically,
+                while Continuous Deployment can help you deliver
+                code to your product environment.`) }}
+          </p>
+
+          <div class="text-center">
+            <a
+              :href="helpPagePath"
+              class="btn btn-info js-get-started-pipelines"
+            >
+              {{ s__('Pipelines|Get started with Pipelines') }}
+            </a>
+          </div>
+        </template>
+
+        <p
+          v-else
+          class="text-center"
+        >
+          {{ s__('Pipelines|This project is not currently set up to run pipelines.') }}
         </p>
-        <div class="text-center">
-          <a
-            :href="helpPagePath"
-            class="btn btn-info"
-          >
-            {{ s__("Pipelines|Get started with Pipelines") }}
-          </a>
-        </div>
+
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/error_state.vue b/app/assets/javascripts/pipelines/components/error_state.vue
deleted file mode 100644
index 012853b201d..00000000000
--- a/app/assets/javascripts/pipelines/components/error_state.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-export default {
-  props: {
-    errorStateSvgPath: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="row empty-state js-pipelines-error-state">
-    <div class="col-xs-12">
-      <div class="svg-content">
-        <img :src="errorStateSvgPath"/>
-      </div>
-    </div>
-
-    <div class="col-xs-12 text-center">
-      <div class="text-content">
-        <h4>The API failed to fetch the pipelines.</h4>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index f31a91c3403..383ab51fe56 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -1,67 +1,52 @@
 <script>
-export default {
-  name: 'PipelineNavControls',
-  props: {
-    newPipelinePath: {
-      type: String,
-      required: true,
+  export default {
+    name: 'PipelineNavControls',
+    props: {
+      newPipelinePath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+
+      resetCachePath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+
+      ciLintPath: {
+        type: String,
+        required: false,
+        default: null,
+      },
     },
-
-    hasCiEnabled: {
-      type: Boolean,
-      required: true,
-    },
-
-    helpPagePath: {
-      type: String,
-      required: true,
-    },
-
-    resetCachePath: {
-      type: String,
-      required: true,
-    },
-
-    ciLintPath: {
-      type: String,
-      required: true,
-    },
-
-    canCreatePipeline: {
-      type: Boolean,
-      required: true,
-    },
-  },
-};
+  };
 </script>
 <template>
   <div class="nav-controls">
     <a
-      v-if="canCreatePipeline"
+      v-if="newPipelinePath"
       :href="newPipelinePath"
-      class="btn btn-create">
-      Run Pipeline
-    </a>
-
-    <a
-      v-if="!hasCiEnabled"
-      :href="helpPagePath"
-      class="btn btn-info">
-      Get started with Pipelines
+      class="btn btn-create js-run-pipeline"
+    >
+      {{ s__('Pipelines|Run Pipeline') }}
     </a>
 
     <a
+      v-if="resetCachePath"
       data-method="post"
-      rel="nofollow"
       :href="resetCachePath"
-      class="btn btn-default">
-      Clear runner caches
+      class="btn btn-default js-clear-cache"
+    >
+      {{ s__('Pipelines|Clear Runner Caches') }}
     </a>
 
     <a
+      v-if="ciLintPath"
       :href="ciLintPath"
-      class="btn btn-default">
-      CI Lint
+      class="btn btn-default js-ci-lint"
+    >
+      {{ s__('Pipelines|CI Lint') }}
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 90930d5ff44..d983d8c0af8 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -1,12 +1,12 @@
 <script>
   import _ from 'underscore';
+  import { __, sprintf, s__ } from '../../locale';
   import PipelinesService from '../services/pipelines_service';
   import pipelinesMixin from '../mixins/pipelines';
-  import tablePagination from '../../vue_shared/components/table_pagination.vue';
-  import navigationTabs from '../../vue_shared/components/navigation_tabs.vue';
-  import navigationControls from './nav_controls.vue';
+  import TablePagination from '../../vue_shared/components/table_pagination.vue';
+  import NavigationTabs from '../../vue_shared/components/navigation_tabs.vue';
+  import NavigationControls from './nav_controls.vue';
   import {
-    convertPermissionToBoolean,
     getParameterByName,
     parseQueryStringIntoObject,
   } from '../../lib/utils/common_utils';
@@ -14,9 +14,9 @@
 
   export default {
     components: {
-      tablePagination,
-      navigationTabs,
-      navigationControls,
+      TablePagination,
+      NavigationTabs,
+      NavigationControls,
     },
     mixins: [
       pipelinesMixin,
@@ -36,111 +36,186 @@
         required: false,
         default: 'root',
       },
+      endpoint: {
+        type: String,
+        required: true,
+      },
+      helpPagePath: {
+        type: String,
+        required: true,
+      },
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      errorStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      noPipelinesSvgPath: {
+        type: String,
+        required: true,
+      },
+      autoDevopsPath: {
+        type: String,
+        required: true,
+      },
+      hasGitlabCi: {
+        type: Boolean,
+        required: true,
+      },
+      canCreatePipeline: {
+        type: Boolean,
+        required: true,
+      },
+      ciLintPath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      resetCachePath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      newPipelinePath: {
+        type: String,
+        required: false,
+        default: null,
+      },
     },
     data() {
-      const pipelinesData = document.querySelector('#pipelines-list-vue').dataset;
-
       return {
-        endpoint: pipelinesData.endpoint,
-        helpPagePath: pipelinesData.helpPagePath,
-        emptyStateSvgPath: pipelinesData.emptyStateSvgPath,
-        errorStateSvgPath: pipelinesData.errorStateSvgPath,
-        autoDevopsPath: pipelinesData.helpAutoDevopsPath,
-        newPipelinePath: pipelinesData.newPipelinePath,
-        canCreatePipeline: pipelinesData.canCreatePipeline,
-        hasCi: pipelinesData.hasCi,
-        ciLintPath: pipelinesData.ciLintPath,
-        resetCachePath: pipelinesData.resetCachePath,
+        // Start with loading state to avoid a glitch when the empty state will be rendered
+        isLoading: true,
         state: this.store.state,
         scope: getParameterByName('scope') || 'all',
         page: getParameterByName('page') || '1',
         requestData: {},
       };
     },
-    computed: {
-      canCreatePipelineParsed() {
-        return convertPermissionToBoolean(this.canCreatePipeline);
-      },
+    stateMap: {
+      // with tabs
+      loading: 'loading',
+      tableList: 'tableList',
+      error: 'error',
+      emptyTab: 'emptyTab',
 
+      // without tabs
+      emptyState: 'emptyState',
+    },
+    scopes: {
+      all: 'all',
+      pending: 'pending',
+      running: 'running',
+      finished: 'finished',
+      branches: 'branches',
+      tags: 'tags',
+    },
+    computed: {
       /**
-      * The empty state should only be rendered when the request is made to fetch all pipelines
-      * and none is returned.
-      *
-      * @return {Boolean}
-      */
-      shouldRenderEmptyState() {
-        return !this.isLoading &&
-          !this.hasError &&
-          this.hasMadeRequest &&
-          !this.state.pipelines.length &&
-          (this.scope === 'all' || this.scope === null);
+       * `hasGitlabCi` handles both internal and external CI.
+       * The order on which  the checks are made in this method is
+       * important to guarantee we handle all the corner cases.
+       */
+      stateToRender() {
+        const { stateMap } = this.$options;
+
+        if (this.isLoading) {
+          return stateMap.loading;
+        }
+
+        if (this.hasError) {
+          return stateMap.error;
+        }
+
+        if (this.state.pipelines.length) {
+          return stateMap.tableList;
+        }
+
+        if (this.hasGitlabCi) {
+          return stateMap.emptyTab;
+        }
+
+        return stateMap.emptyState;
       },
       /**
-       * When a specific scope does not have pipelines we render a message.
-       *
-       * @return {Boolean}
+       * Tabs are rendered in all states except empty state.
+       * They are not rendered before the first request to avoid a flicker on first load.
        */
-      shouldRenderNoPipelinesMessage() {
-        return !this.isLoading &&
-          !this.hasError &&
-          !this.state.pipelines.length &&
-          this.scope !== 'all' &&
-          this.scope !== null;
+      shouldRenderTabs() {
+        const { stateMap } = this.$options;
+        return this.hasMadeRequest &&
+          [
+            stateMap.loading,
+            stateMap.tableList,
+            stateMap.error,
+            stateMap.emptyTab,
+          ].includes(this.stateToRender);
       },
 
-      shouldRenderTable() {
-        return !this.hasError &&
-          !this.isLoading && this.state.pipelines.length;
+      shouldRenderButtons() {
+        return (this.newPipelinePath ||
+          this.resetCachePath ||
+          this.ciLintPath) && this.shouldRenderTabs;
       },
-      /**
-      * Pagination should only be rendered when there is more than one page.
-      *
-      * @return {Boolean}
-      */
+
       shouldRenderPagination() {
         return !this.isLoading &&
           this.state.pipelines.length &&
           this.state.pageInfo.total > this.state.pageInfo.perPage;
       },
-      hasCiEnabled() {
-        return this.hasCi !== undefined;
+
+      emptyTabMessage() {
+        const { scopes } = this.$options;
+        const possibleScopes = [scopes.pending, scopes.running, scopes.finished];
+
+        if (possibleScopes.includes(this.scope)) {
+          return sprintf(s__('Pipelines|There are currently no %{scope} pipelines.'), {
+            scope: this.scope,
+          });
+        }
+
+        return s__('Pipelines|There are currently no pipelines.');
       },
 
       tabs() {
         const { count } = this.state;
+        const { scopes } = this.$options;
+
         return [
           {
-            name: 'All',
-            scope: 'all',
+            name: __('All'),
+            scope: scopes.all,
             count: count.all,
             isActive: this.scope === 'all',
           },
           {
-            name: 'Pending',
-            scope: 'pending',
+            name: __('Pending'),
+            scope: scopes.pending,
             count: count.pending,
             isActive: this.scope === 'pending',
           },
           {
-            name: 'Running',
-            scope: 'running',
+            name: __('Running'),
+            scope: scopes.running,
             count: count.running,
             isActive: this.scope === 'running',
           },
           {
-            name: 'Finished',
-            scope: 'finished',
+            name: __('Finished'),
+            scope: scopes.finished,
             count: count.finished,
             isActive: this.scope === 'finished',
           },
           {
-            name: 'Branches',
-            scope: 'branches',
+            name: __('Branches'),
+            scope: scopes.branches,
             isActive: this.scope === 'branches',
           },
           {
-            name: 'Tags',
-            scope: 'tags',
+            name: __('Tags'),
+            scope: scopes.tags,
             isActive: this.scope === 'tags',
           },
         ];
@@ -187,7 +262,7 @@
             this.errorCallback();
 
             // restart polling
-            this.poll.restart();
+            this.poll.restart({ data: this.requestData });
           });
       },
     },
@@ -197,69 +272,70 @@
   <div class="pipelines-container">
     <div
       class="top-area scrolling-tabs-container inner-page-scroll-tabs"
-      v-if="!shouldRenderEmptyState"
+      v-if="shouldRenderTabs || shouldRenderButtons"
     >
       <div class="fade-left">
         <i
           class="fa fa-angle-left"
-          aria-hidden="true">
+          aria-hidden="true"
+        >
         </i>
       </div>
       <div class="fade-right">
         <i
           class="fa fa-angle-right"
-          aria-hidden="true">
+          aria-hidden="true"
+        >
         </i>
       </div>
 
       <navigation-tabs
+        v-if="shouldRenderTabs"
         :tabs="tabs"
         @onChangeTab="onChangeTab"
         scope="pipelines"
       />
 
       <navigation-controls
+        v-if="shouldRenderButtons"
         :new-pipeline-path="newPipelinePath"
-        :has-ci-enabled="hasCiEnabled"
-        :help-page-path="helpPagePath"
         :reset-cache-path="resetCachePath"
         :ci-lint-path="ciLintPath"
-        :can-create-pipeline="canCreatePipelineParsed "
       />
     </div>
 
     <div class="content-list pipelines">
 
       <loading-icon
-        label="Loading Pipelines"
+        v-if="stateToRender === $options.stateMap.loading"
+        :label="s__('Pipelines|Loading Pipelines')"
         size="3"
-        v-if="isLoading"
         class="prepend-top-20"
       />
 
       <empty-state
-        v-if="shouldRenderEmptyState"
+        v-else-if="stateToRender === $options.stateMap.emptyState"
         :help-page-path="helpPagePath"
         :empty-state-svg-path="emptyStateSvgPath"
+        :can-set-ci="canCreatePipeline"
       />
 
-      <error-state
-        v-if="shouldRenderErrorState"
-        :error-state-svg-path="errorStateSvgPath"
+      <svg-blank-state
+        v-else-if="stateToRender === $options.stateMap.error"
+        :svg-path="errorStateSvgPath"
+        :message="s__(`Pipelines|There was an error with fetching the pipelines.
+        Try again in a few moments or contact your support team.`)"
       />
 
-      <div
-        class="blank-state-row"
-        v-if="shouldRenderNoPipelinesMessage"
-      >
-        <div class="blank-state-center">
-          <h2 class="blank-state-title js-blank-state-title">No pipelines to show.</h2>
-        </div>
-      </div>
+      <svg-blank-state
+        v-else-if="stateToRender === $options.stateMap.emptyTab"
+        :svg-path="noPipelinesSvgPath"
+        :message="emptyTabMessage"
+      />
 
       <div
         class="table-holder"
-        v-if="shouldRenderTable"
+        v-else-if="stateToRender === $options.stateMap.tableList"
       >
 
         <pipelines-table-component
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 50bdf80c3e3..9fcc07abee5 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -1,23 +1,19 @@
 import Visibility from 'visibilityjs';
+import { __ } from '../../locale';
 import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
-import emptyState from '../components/empty_state.vue';
-import errorState from '../components/error_state.vue';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-import pipelinesTableComponent from '../components/pipelines_table.vue';
+import EmptyState from '../components/empty_state.vue';
+import SvgBlankState from '../components/blank_state.vue';
+import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
+import PipelinesTableComponent from '../components/pipelines_table.vue';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    pipelinesTableComponent,
-    errorState,
-    emptyState,
-    loadingIcon,
-  },
-  computed: {
-    shouldRenderErrorState() {
-      return this.hasError && !this.isLoading;
-    },
+    PipelinesTableComponent,
+    SvgBlankState,
+    EmptyState,
+    LoadingIcon,
   },
   data() {
     return {
@@ -85,6 +81,7 @@ export default {
       this.hasError = true;
       this.isLoading = false;
       this.updateGraphDropdown = false;
+      this.hasMadeRequest = true;
     },
     setIsMakingRequest(isMakingRequest) {
       this.isMakingRequest = isMakingRequest;
@@ -96,7 +93,7 @@ export default {
     postAction(endpoint) {
       this.service.postAction(endpoint)
         .then(() => eventHub.$emit('refreshPipelines'))
-        .catch(() => new Flash('An error occurred while making the request.'));
+        .catch(() => Flash(__('An error occurred while making the request.')));
     },
   },
 };
diff --git a/app/assets/javascripts/pipelines/stores/pipelines_store.js b/app/assets/javascripts/pipelines/stores/pipelines_store.js
index 651251d2623..2f738edd241 100644
--- a/app/assets/javascripts/pipelines/stores/pipelines_store.js
+++ b/app/assets/javascripts/pipelines/stores/pipelines_store.js
@@ -5,7 +5,12 @@ export default class PipelinesStore {
     this.state = {};
 
     this.state.pipelines = [];
-    this.state.count = {};
+    this.state.count = {
+      all: 0,
+      finished: 0,
+      pending: 0,
+      running: 0,
+    };
     this.state.pageInfo = {};
   }
 
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index cf95cdbfec2..3e6b3346787 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -7,8 +7,9 @@
     "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
     "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
     "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
-    "new-pipeline-path" => new_project_pipeline_path(@project),
+    "no-pipelines-svg-path" => image_path('illustrations/pipelines_pending.svg'),
     "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
-    "has-ci" => @repository.gitlab_ci_yml,
-    "ci-lint-path" => ci_lint_path,
-    "reset-cache-path" => reset_cache_project_settings_ci_cd_path(@project) } }
+    "new-pipeline-path" => can?(current_user, :create_pipeline, @project) && new_project_pipeline_path(@project),
+    "ci-lint-path" => can?(current_user, :create_pipeline, @project) && ci_lint_path,
+    "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project) ,
+    "has-gitlab-ci" => (@project.has_ci? && @project.builds_enabled?).to_s } }