Adds JS unit tests

Finishes tabs & table
Updates e2e tests

8 files changed, 74 insertions, 67 deletions

diff --git a/app/assets/javascripts/clusters/clusters_index.js b/app/assets/javascripts/clusters/clusters_index.js
index efdf2de5583..6249943da43 100644
--- a/app/assets/javascripts/clusters/clusters_index.js
+++ b/app/assets/javascripts/clusters/clusters_index.js
@@ -18,11 +18,11 @@ export default class ClusterTable {
     this.container = '.js-clusters-list';
     document.querySelectorAll(`${this.container} .js-toggle-cluster-list`).forEach(button => button.addEventListener('click', e => ClusterTable.updateCluster(e)));
   }
-
-  removeListeners() {
-    document.querySelectorAll(`${this.container} .js-toggle-cluster-list`).forEach(button => button.removeEventListener('click'));
-  }
-
+  /**
+   * When the toggle button is clicked,
+   * updates the status and makes a request to the API to update the cluster
+   * @param {Event} e
+   */
   static updateCluster(e) {
     const toggleButton = e.currentTarget;
     const value = toggleButton.classList.contains('checked').toString();
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index e5b9e1f2de6..88395325fd2 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -8,3 +8,9 @@
   // Wait for the Vue to kick-in and render the applications block
   min-height: 302px;
 }
+
+.clusters-container {
+  .nav-bar-right {
+    padding: $gl-padding-top $gl-padding;
+  }
+}
diff --git a/app/controllers/projects/clusters_controller.rb b/app/controllers/projects/clusters_controller.rb
index eb93dfabf3a..675f0dfb645 100644
--- a/app/controllers/projects/clusters_controller.rb
+++ b/app/controllers/projects/clusters_controller.rb
@@ -103,7 +103,7 @@ class Projects::ClustersController < Projects::ApplicationController
 
   def clusters
     scope = params[:scope] || :all
-    @clusters = ClustersFinder.new(project, user, scope).execute
+    @clusters = ClustersFinder.new(project, current_user, scope).execute
   end
 
   def create_params
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 66146e61263..2476e93a2f0 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -193,7 +193,7 @@
               = nav_link(controller: :clusters) do
                 = link_to project_clusters_path(@project), title: 'Cluster', class: 'shortcuts-cluster' do
                   %span
-                    Cluster
+                    Clusters
 
       - if project_nav_tab? :wiki
         = nav_link(controller: :wikis) do
diff --git a/app/views/projects/clusters/_cluster.html.haml b/app/views/projects/clusters/_cluster.html.haml
new file mode 100644
index 00000000000..98d08554af1
--- /dev/null
+++ b/app/views/projects/clusters/_cluster.html.haml
@@ -0,0 +1,22 @@
+.gl-responsive-table-row
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('ClusterIntegration|Cluster')
+    .table-mobile-content
+      = link_to cluster.name, namespace_project_cluster_path(@project.namespace, @project, cluster)
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('ClusterIntegration|Environment pattern')
+    .table-mobile-content= cluster.environment_scope
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('ClusterIntegration|Project namespace')
+    .table-mobile-content= cluster.platform_kubernetes&.namespace
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' }
+    .table-mobile-content
+      %button{ type: 'button',
+        class: "js-toggle-cluster-list project-feature-toggle #{'checked' unless !cluster.enabled?} #{'disabled' unless can?(current_user, :update_cluster, cluster)}",
+        'aria-label': s_('ClusterIntegration|Toggle Cluster'),
+        disabled: !can?(current_user, :update_cluster, cluster),
+        data: { 'enabled-text': 'Enabled',
+          'disabled-text': 'Disabled',
+          endpoint: namespace_project_cluster_path(@project.namespace, @project, cluster, format: :json) } }
+        = icon('spinner spin', class: 'hidden loading-icon')
diff --git a/app/views/projects/clusters/_empty_state.html.haml b/app/views/projects/clusters/_empty_state.html.haml
index 07e26cd9021..24454012845 100644
--- a/app/views/projects/clusters/_empty_state.html.haml
+++ b/app/views/projects/clusters/_empty_state.html.haml
@@ -1,6 +1,6 @@
 .row.empty-state
   .col-xs-12
-    .svg-content= image_tag 'illustrations/labels.svg'
+    .svg-content= image_tag 'illustrations/clusters_empty.svg'
   .col-xs-12.text-center
     .text-content
       %h4= s_('ClusterIntegration|Integrate cluster automation')
diff --git a/app/views/projects/clusters/_tabs.html.haml b/app/views/projects/clusters/_tabs.html.haml
new file mode 100644
index 00000000000..87b86b02e5a
--- /dev/null
+++ b/app/views/projects/clusters/_tabs.html.haml
@@ -0,0 +1,19 @@
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left= icon("angle-left")
+  .fade-right= icon("angle-right")
+  %ul.nav-links.scrolling-tabs
+    %li{ class: ('active' if @scope == 'enabled') }>
+      = link_to project_clusters_path(@project, scope: :enabled), class: "js-active-tab" do
+        = s_("ClusterIntegration|Active")
+        %span.badge= @active_count
+
+    %li{ class: ('active' if @scope == 'disabled') }>
+      = link_to project_clusters_path(@project, scope: :disabled), class: "js-inactive-tab #{'active' if @scope == 'disabled'}" do
+        = s_("ClusterIntegration|Inactive")
+        %span.badge= @inactive_count
+    %li{ class: ('active' if @scope.nil? || @scope == 'all') }>
+      = link_to project_clusters_path(@project, scope: :all), class: "js-all-tab #{'active' if @scope == 'all' || @scope.nil?}" do
+        = s_("ClusterIntegration|All")
+        %span.badge= @inactive_count
+  .pull-right.nav-bar-right
+    = link_to s_("ClusterIntegration|Add cluster"), new_project_cluster_path(@project), class: "btn btn-success disabled has-tooltip js-add-cluster", title: s_("ClusterIntegration|Multiple clusters are available in GitLab Entreprise Edition Premium and Ultimate")
diff --git a/app/views/projects/clusters/index.html.haml b/app/views/projects/clusters/index.html.haml
index be6efbaa38b..d34601f3e3f 100644
--- a/app/views/projects/clusters/index.html.haml
+++ b/app/views/projects/clusters/index.html.haml
@@ -1,60 +1,20 @@
-- if @clusters.empty?
-  = render "empty_state"
-- else
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-    .fade-left= icon("angle-left")
-    .fade-right= icon("angle-right")
-    %ul.nav-links.scrolling-tabs
-      %li
-        %a.js-active-tab
-          =s_("ClusterIntegration|Active")
-          %span.badge
-            TODO
-
-      %li
-        %a.js-inactive-tab
-          = s_("ClusterIntegration|Inactive")
-          %span.badge
-            TODO
-      %li
-        %a.js-all-tab
-          = s_("ClusterIntegration|All")
-          %span.badge= @clusters_count
-    .nav-controls
-      = link_to s_('ClusterIntegration|Add cluster'), new_project_cluster_path(@project), class: "btn btn-success disabled has-tooltip js-add-cluster", title: s_("ClusterIntegration|Multiple clusters are available in GitLab Entreprise Edition Premium and Ultimate")
-  .ci-table.js-clusters-list
-    .gl-responsive-table-row.table-row-header{ role: 'row' }
-      .table-section.section-30{ role: 'rowheader' }
-        = s_('ClusterIntegration|Cluster')
-      .table-section.section-30{ role: 'rowheader' }
-        = s_('ClusterIntegration|Environment pattern')
-      .table-section.section-30{ role: 'rowheader' }
-        = s_('ClusterIntegration|Project namespace')
-      .table-section.section-10{ role: 'rowheader' }
-    - @clusters.each do |cluster|
-      .gl-responsive-table-row
-        .table-section.section-30
-          .table-mobile-header{ role: 'rowheader' }= s_('ClusterIntegration|Cluster')
-          .table-mobile-content
-            = link_to cluster.name, namespace_project_cluster_path(@project.namespace, @project, cluster)
-        .table-section.section-30
-          .table-mobile-header{ role: 'rowheader' }
-            = s_('ClusterIntegration|Environment pattern')
-          .table-mobile-content= cluster.environment_scope
-        .table-section.section-30
-          .table-mobile-header{ role: 'rowheader' }
-            = s_('ClusterIntegration|Project namespace')
-          .table-mobile-content
-            Content goes here - TODO
-        .table-section.section-10
-          .table-mobile-header{ role: 'rowheader' }
-          .table-mobile-content
-            %button{ type: 'button',
-              class: "js-toggle-cluster-list project-feature-toggle #{'checked' unless !cluster.enabled?} #{'disabled' unless can?(current_user, :update_cluster, cluster)}",
-              'aria-label': s_('ClusterIntegration|Toggle Cluster'),
-              disabled: !can?(current_user, :update_cluster, cluster),
-              data: { 'enabled-text': 'Enabled',
-                'disabled-text': 'Disabled',
-                endpoint: namespace_project_cluster_path(@project.namespace, @project, cluster, format: :json) } }
-              = icon('spinner spin', class: 'hidden loading-icon')
+- breadcrumb_title "Clusters"
+- page_title "Clusters"
 
+.clusters-container
+  - if @clusters.empty?
+    = render "empty_state"
+  - else
+    = render "tabs"
+    .ci-table.js-clusters-list
+      .gl-responsive-table-row.table-row-header{ role: "row" }
+        .table-section.section-30{ role: "rowheader" }
+          = s_("ClusterIntegration|Cluster")
+        .table-section.section-30{ role: "rowheader" }
+          = s_("ClusterIntegration|Environment pattern")
+        .table-section.section-30{ role: "rowheader" }
+          = s_("ClusterIntegration|Project namespace")
+        .table-section.section-10{ role: "rowheader" }
+      - @clusters.each do |cluster|
+        = render "cluster", cluster: cluster
+    = paginate @clusters, theme: 'gitlab'