Adds JS to toggle buttons [ci skip]

2 files changed, 29 insertions, 26 deletions

diff --git a/app/views/projects/clusters/_empty_state.html.haml b/app/views/projects/clusters/_empty_state.html.haml
index 44f13a009b9..4554f5c624d 100644
--- a/app/views/projects/clusters/_empty_state.html.haml
+++ b/app/views/projects/clusters/_empty_state.html.haml
@@ -5,6 +5,6 @@
     %p= s_('ClusterIntegration|Clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way. %{link_to_help_page}').html_safe % { link_to_help_page: link_to_help_page}
 
     %p
-      = link_to s_('ClusterIntegration|Add cluster'), '', class: 'btn btn-success', title: 'Add cluster'
+      = link_to s_('ClusterIntegration|Add cluster'), new_project_cluster_path(@project), class: 'btn btn-success', title: 'Add cluster'
   .svg-content
     = image_tag 'illustrations/labels.svg'
diff --git a/app/views/projects/clusters/index.html.haml b/app/views/projects/clusters/index.html.haml
index 6b7fbb44c4a..d7e0940cb65 100644
--- a/app/views/projects/clusters/index.html.haml
+++ b/app/views/projects/clusters/index.html.haml
@@ -21,8 +21,8 @@
           %span.badge
             0
     .nav-controls
-      = link_to s_('ClusterIntegration|Add cluster'), '', class: 'btn btn-success', title: 'Add cluster'
-  .ci-table
+      = link_to s_('ClusterIntegration|Add cluster'), new_project_cluster_path(@project), class: 'btn btn-success', title: 'Add cluster'
+  .ci-table.js-clusters-list
     .gl-responsive-table-row.table-row-header{ role: 'row' }
       .table-section.section-30{ role: 'rowheader' }
         = s_('ClusterIntegration|Cluster')
@@ -31,27 +31,30 @@
       .table-section.section-30{ role: 'rowheader' }
         = s_('ClusterIntegration|Project namespace')
       .table-section.section-10{ role: 'rowheader' }
-    .gl-responsive-table-row
-      .table-section.section-30
-        .table-mobile-header{ role: 'rowheader' }
-          = s_('ClusterIntegration|Cluster')
-        .table-mobile-content
-          Content goes here
-      .table-section.section-30
-        .table-mobile-header{ role: 'rowheader' }
-          = s_('ClusterIntegration|Environment pattern')
-        .table-mobile-content
-          Content goes here
-      .table-section.section-30
-        .table-mobile-header{ role: 'rowheader' }
-          = s_('ClusterIntegration|Project namespace')
-        .table-mobile-content
-          Content goes here
-      .table-section.section-10
-        .table-mobile-header{ role: 'rowheader' }
-        .table-mobile-content
-          %button{ type: 'button',
-            class: "js-toggle-cluster project-feature-toggle",
-            'aria-label': s_('ClusterIntegration|Toggle Cluster'),
-            data: { 'enabled-text': 'Enabled', 'disabled-text': 'Disabled' } }
+    - @clusters.each do |cluster|
+      .gl-responsive-table-row
+        .table-section.section-30
+          .table-mobile-header{ role: 'rowheader' }= s_('ClusterIntegration|Cluster')
+          .table-mobile-content= cluster.name
+        .table-section.section-30
+          .table-mobile-header{ role: 'rowheader' }
+            = s_('ClusterIntegration|Environment pattern')
+          .table-mobile-content
+            Content goes here
+        .table-section.section-30
+          .table-mobile-header{ role: 'rowheader' }
+            = s_('ClusterIntegration|Project namespace')
+          .table-mobile-content
+            Content goes here
+        .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('loading', class: 'hidden')