Moves tabs into Vue Component

app/assets/javascripts/vue_pipelines_index/index.js

@@ -7,13 +7,10 @@ require('../vue_shared/vue_resource_interceptor');
 require('./pipelines');
 $(() => new Vue({
-  el: document.querySelector('.vue-pipelines-index'),
+  el: document.querySelector('#pipelines-list-vue'),
   data() {
-    const project = document.querySelector('.pipelines');
-
     return {
-      scope: project.dataset.url,
       store: new gl.PipelineStore(),
     };
   },
@@ -21,9 +18,6 @@ $(() => new Vue({
     'vue-pipelines': gl.VuePipelines,
   },
   template: `
-    <vue-pipelines
-      :scope="scope"
-      :store="store">
-    </vue-pipelines>
+    <vue-pipelines :store="store"/>
   `,
 }));

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -18,10 +18,11 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
     },
     data() {
+      const pipelinesData = document.querySelector('#pipelines-list-vue').dataset;
+
       return {
+        ...pipelinesData,
         pipelines: [],
-        timeLoopInterval: '',
-        intervalId: '',
         apiScope: 'all',
         pageInfo: {},
         pagenum: 1,
@@ -39,7 +40,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
       if (pagenum) this.pagenum = pagenum;
       if (scope) this.apiScope = scope;
-      this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
+      this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.endpoint, this.apiScope);
     },
     beforeUpdate() {
@@ -49,12 +50,56 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
     },
     computed: {
+      canCreatePipelineParsed() {
+        return gl.utils.convertPermissionToBoolean(this.canCreatePipeline);
+      },
+
+      scope() {
+        return gl.utils.getParameterByName('scope');
+      },
+
       shouldRenderErrorState() {
         return this.hasError && !this.pageRequest;
       },
+
+      /**
+       * 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.hasError && !this.pageRequest && !this.pipelines.length;
+        return !this.hasError &&
+          !this.pageRequest && (
+            !this.pipelines.length && (this.scope === 'all' || this.scope === null)
+          );
+      },
+
+      shouldRenderTable() {
+        return !this.hasError &&
+          !this.pageRequest && this.pipelines.length;
+      },
+
+      /**
+       * Header tabs should only be rendered when we receive an error or a successfull response with
+       * pipelines.
+       *
+       * @return {Boolean}
+       */
+      shouldRenderTabs() {
+        return !this.pageRequest && !this.hasError && this.pipelines.length;
+      },
+
+      /**
+       * Pagination should only be rendered when there is more than one page.
+       *
+       * @return {Boolean}
+       */
+      shouldRenderPagination() {
+        return !this.pageRequest &&
+          this.pipelines.length &&
+          this.pageInfo.total > this.pageInfo.perPage;
       },
     },
@@ -72,14 +117,80 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
       },
     },
     template: `
-      <div>
-        <div class="pipelines realtime-loading" v-if='pageRequest'>
-          <i class="fa fa-spinner fa-spin"></i>
+      <div :class="cssClass">
+        <div class="top-area" v-if="!shouldRenderEmptyState">
+          <ul
+            class="nav-links">
+
+            <li :class="{ 'active': scope === null || scope === 'all'}">
+              <a :href="allPath">
+                All
+              </a>
+              <span class="badge js-totalbuilds-count">
+              </span>
+            </li>
+            <li
+              class="js-pipelines-tab-pending"
+              :class="{ 'active': scope === 'pending'}">
+              <a :href="pendingPath">
+                Pending
+              </a>
+              <span class="badge"></span>
+            </li>
+            <li
+              class="js-pipelines-tab-running"
+              :class="{ 'active': scope === 'running'}">
+              <a :href="runningPath">Running</a>
+              <span class="badge"></span>
+            </li>
+            <li
+              class="js-pipelines-tab-finished"
+              :class="{ 'active': scope === 'finished'}">
+              <a :href="finishedPath">Finished</a>
+              <span class="badge"></span>
+            </li>
+            <li
+            class="js-pipelines-tab-branches"
+            :class="{ 'active': scope === 'branches'}">
+              <a :href="branchesPath">Branches</a>
+            </li>
+            <li
+              class="js-pipelines-tab-tags"
+              :class="{ 'active': scope === 'tags'}">
+              <a :href="tagsPath">Tags</a>
+            </li>
+          </ul>
+
+          <div class="nav-controls">
+            <a
+              v-if="canCreatePipelineParsed"
+              :href="newPipelinePath"
+              class="btn btn-create">
+              Run Pipeline
+            </a>
+
+            <a
+              v-if="!hasCi"
+              :href="helpPagePath"
+              class="btn btn-info">
+              Get started with Pipelines
+            </a>
+
+            <a
+              :href="ciLintPath"
+              class="btn btn-default">
+              CI Lint
+            </a>
+          </div>
+        </div>
+
+        <div class="pipelines realtime-loading"
+          v-if="pageRequest">
+          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
         </div>
         <div v-if="shouldRenderEmptyState"
           class="row empty-state">
-
           <div class="col-xs-12 pull-right">
             <div class="svg-content">
               ${pipelinesEmptyStateSVG}
@@ -92,8 +203,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
               <p>
                 Continous Integration can help catch bugs by running your tests automatically,
                 while Continuous Deployment can help you deliver code to your product environment.
-
-                <a href="" class="btn btn-info">
+                <a :href="helpPagePath" class="btn btn-info">
                   Get started with Pipelines
                 </a>
               </p>
@@ -103,7 +213,6 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         <div v-if="shouldRenderErrorState"
           class="row empty-state">
-
           <div class="col-xs-12 pull-right">
             <div class="svg-content">
               ${pipelinesErrorStateSVG}
@@ -117,16 +226,17 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
           </div>
         </div>
-        <div class="table-holder" v-if='!pageRequest && pipelines.length'>
+        <div class="table-holder"
+          v-if="shouldRenderTable">
           <pipelines-table-component :pipelines='pipelines'/>
         </div>
         <gl-pagination
-          v-if='!pageRequest && pipelines.length && pageInfo.total > pageInfo.perPage'
-          :pagenum='pagenum'
-          :change='change'
-          :count='count.all'
-          :pageInfo='pageInfo'/>
+          v-if="shouldRenderPagination"
+          :pagenum="pagenum"
+          :change="change"
+          :count="count.all"
+          :pageInfo="pageInfo"/>
       </div>
     `,
   });

app/views/projects/pipelines/index.html.haml

@@ -2,53 +2,20 @@
 - page_title "Pipelines"
 = render "projects/pipelines/head"
-%div{ class: container_class }
-  .top-area
-    %ul.nav-links
-      %li.js-pipelines-tab-all{ class: active_when(@scope.nil?) }>
-        = link_to project_pipelines_path(@project) do
-          All
-          %span.badge.js-totalbuilds-count
-            = number_with_delimiter(@pipelines_count)
-
-      %li.js-pipelines-tab-pending{ class: active_when(@scope == 'pending') }>
-        = link_to project_pipelines_path(@project, scope: :pending) do
-          Pending
-          %span.badge
-            = number_with_delimiter(@pending_count)
-
-      %li.js-pipelines-tab-running{ class: active_when(@scope == 'running') }>
-        = link_to project_pipelines_path(@project, scope: :running) do
-          Running
-          %span.badge.js-running-count
-            = number_with_delimiter(@running_count)
-
-      %li.js-pipelines-tab-finished{ class: active_when(@scope == 'finished') }>
-        = link_to project_pipelines_path(@project, scope: :finished) do
-          Finished
-          %span.badge
-            = number_with_delimiter(@finished_count)
-
-      %li.js-pipelines-tab-branches{ class: active_when(@scope == 'branches') }>
-        = link_to project_pipelines_path(@project, scope: :branches) do
-          Branches
-
-      %li.js-pipelines-tab-tags{ class: active_when(@scope == 'tags') }>
-        = link_to project_pipelines_path(@project, scope: :tags) do
-          Tags
-
-    .nav-controls
-      - if can? current_user, :create_pipeline, @project
-        = link_to new_namespace_project_pipeline_path(@project.namespace, @project), class: 'btn btn-create' do
-          Run pipeline
-
-        - unless @repository.gitlab_ci_yml
-          = link_to 'Get started with Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
-
-        = link_to ci_lint_path, class: 'btn btn-default' do
-          %span CI Lint
-  .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
-    .vue-pipelines-index
-
-= page_specific_javascript_bundle_tag('common_vue')
-= page_specific_javascript_bundle_tag('vue_pipelines')
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag("common_vue")
+  = page_specific_javascript_bundle_tag("vue_pipelines")
+
+#pipelines-list-vue{ data: { endpoint: namespace_project_pipelines_path(@project.namespace, @project, format: :json),
+  "css-class" => container_class,
+  "help-page-path" => help_page_path('ci/quick_start/README'),
+  "new-pipeline-path" => new_namespace_project_pipeline_path(@project.namespace, @project),
+  "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
+  "all-path" =>  project_pipelines_path(@project),
+  "pending-path" => project_pipelines_path(@project, scope: :pending),
+  "running-path" => project_pipelines_path(@project, scope: :running),
+  "finished-path" => project_pipelines_path(@project, scope: :finished),
+  "branches-path" => project_pipelines_path(@project, scope: :branches),
+  "tags-path" => project_pipelines_path(@project, scope: :tags),
+  "has-ci" => @repository.gitlab_ci_yml,
+  "ci-lint-path" => ci_lint_path } }