Adjust to route change

Adjust toggle status
Add confirmation box
Adds permissions checks

app/assets/javascripts/clusters.js

@@ -4,6 +4,7 @@ import axios from 'axios';
 import Poll from './lib/utils/poll';
 import { s__ } from './locale';
 import './flash';
+import { convertPermissionToBoolean } from './lib/utils/common_utils';
 
 class ClusterService {
   constructor(options = {}) {
@@ -25,8 +26,16 @@ class ClusterService {
   }
 }
 /**
- * Handles visibily toggle
- * Polls the state
+ * Cluster page has 2 separate parts:
+ * - Update form with toggle button
+ * -- Check initial state and set the toggle button
+ * -- Listen to changes
+ * -- Check permissions in order to disable
+ * -- Update cluster based on toggle status
+ *
+ * - Polling status while creating or scheduled
+ * -- Update status area with the response result
+ *
  */
 export default class ClusterEdit {
   constructor() {
@@ -37,8 +46,9 @@ export default class ClusterEdit {
         checkStatus: dataset.checkStatus,
         editPath: dataset.editPath,
       },
-      canUpdate: dataset.canUpdate,
+      canUpdate: convertPermissionToBoolean(dataset.canUpdate),
       clusterStatus: dataset.clusterStatus,
+      toggleStatus: dataset.toggleStatus,
     };
 
     this.service = new ClusterService({ endpoints: this.state.endpoints });
@@ -46,42 +56,29 @@ export default class ClusterEdit {
     this.errorContainer = document.querySelector('.js-cluster-error');
     this.successContainer = document.querySelector('.js-cluster-success');
     this.creatingContainer = document.querySelector('.js-cluster-creating');
-    this.bindEvents();
-  }
 
-  bindEvents() {
-    if (!this.canUpdate) {
-      this.disableToggle();
-    }
+    this.initEditForm();
 
-    if (this.clusterStatus) {
-      // update to enable or disabled!
+    if (this.clusterStatus === 'scheduled' || this.clusterStatus === 'creating') {
+      this.initPoling();
+    }
   }
 
+  initEditForm() {
     this.toggleButton.addEventListener('click', this.toggle.bind(this));
-
     document.querySelector('.js-edit-cluster-button').addEventListener('click', this.updateData.bind(this));
-
-    this.initPoling();
   }
 
   toggle() {
     this.toggleButton.classList.toggle('checked');
-    this.toggleStatus = this.toggleButton.classList.contains('checked').toString();
+    this.state.toggleStatus = this.toggleButton.classList.contains('checked').toString();
   }
 
   updateData() {
     this.service.updateData(this.state.toggleStatus);
   }
 
-  disableToggle(disable = true) {
-    this.toggleButton.classList.toggle('disabled', disable);
-    this.toggleButton.setAttribute('disabled', disable);
-  }
-
   initPoling() {
-    if (this.state.clusterStatus === 'created') return;
-
     this.poll = new Poll({
       resource: this.service,
       method: 'fetchData',
@@ -89,8 +86,8 @@ export default class ClusterEdit {
         const { status } = data.data;
         this.updateContainer(status);
       },
-      errorCallback: () => {
-        this.updateContainer('error');
+      errorCallback: (error) => {
+        this.updateContainer('error', error);
         Flash(s__('ClusterIntegration|Something went wrong on our end.'));
       },
     });
@@ -116,7 +113,7 @@ export default class ClusterEdit {
     this.creatingContainer.classList.add('hidden');
   }
 
-  updateContainer(status) {
+  updateContainer(status, error) {
     this.hideAll();
     switch (status) {
       case 'created':
@@ -124,6 +121,7 @@ export default class ClusterEdit {
         break;
       case 'error':
         this.errorContainer.classList.remove('hidden');
+        this.errorContainer.querySelector('.js-error-reason').textContent = error.status_reason;
         break;
       case 'creating':
         this.creatingContainer.classList.add('hidden');

app/assets/javascripts/dispatcher.js

@@ -524,7 +524,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
         case 'admin:impersonation_tokens:index':
           new gl.DueDateSelectors();
           break;
-        case 'projects:clusters:edit':
+        case 'projects:clusters:show':
           import(/* webpackChunkName: "clusters" */ './clusters')
             .then(cluster => new cluster.default()) // eslint-disable-line new-cap
             .catch(() => {});

app/views/projects/clusters/show.html.haml

 .row.prepend-top-default.edit-cluster-form.js-edit-cluster-form{ data: { check_status: status_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster.id, format: :json),
   edit_path: namespace_project_cluster_path(@project.namespace, @project, @cluster.id, format: :json),
-  can_update: 'true',
-  cluster_status: '' }}
+  can_update: can?(current_user, :update_cluster, @cluster),
+  toggle_status: @cluster.enabled? ? 'true': 'false',
+  cluster_status: @cluster.status }}
   = render 'sidebar'
   .col-lg-8
     %h4.prepend-top-0
       = s_('ClusterIntegration|Enable cluster integration')
     %p
-      -#TODO: if  can?(current_user, :update_cluster, @cluster)
-      -#  if :enabled
-      = s_('ClusterIntegration|Disabling cluster integration will not affect your cluster. It will only temporarily turn off GitLab\'s conection to it.')
-      -# else
-      = s_('ClusterIntegration|Missing test/state in mockups.')
-      -# else !can?(current_user, :update_cluster, @cluster)
-      -# if :enabled
+      - if @cluster.enabled?
+        - if can?(current_user, :update_cluster, @cluster)
+          = s_('ClusterIntegration|Cluster integration is enabled for this project. Disabling this integration will not affect your cluster, it will only temporarily turn off GitLab\'s connection to it.')
+        - else
           = s_('ClusterIntegration|Cluster integration is enabled for this project.')
-      -# else
+      - else
         = s_('ClusterIntegration|Cluster integration is disabled for this project.')
 
     %label.toggle-wrapper
-      %button{ type: 'button', class: 'js-toggle-cluster project-feature-toggle', 'aria-label': 'Toggle', data: { 'enabled-text': 'Enabled', 'disabled-text': 'Disabled' } }
+      %button{ type: 'button',
+        class: "js-toggle-cluster project-feature-toggle #{'checked' unless !@cluster.enabled?} #{'disabled' unless can?(current_user, :update_cluster, @cluster)}",
+        'aria-label': 'Toggle',
+        disabled: !can?(current_user, :update_cluster, @cluster),
+        data: { 'enabled-text': 'Enabled', 'disabled-text': 'Disabled' } }
 
-    -# if can?(current_user, :update_cluster, @cluster)
+    - if can?(current_user, :update_cluster, @cluster)
       .form-group
         %button{ type: 'button', class: 'js-edit-cluster-button btn btn-success'}
           = s_('ClusterIntegration|Save changes')
 
 
-    -# if can?(current_user, :update_cluster, @cluster)
+    - if can?(current_user, :update_cluster, @cluster) && @cluster.scheduled? || @cluster.creating?
       .form_group
         %label
           = s_('ClusterIntegration|Google container engine')
-
-        - link_gke = link_to(s_('ClusterIntegration|Manage your cluster on GKE'), '', target: '_blank', rel: 'noopener noreferrer')
-      .hidden.js-cluster-error
           %p
-          = s_('ClusterIntegration|This cluster was set up on Google Container Engine. %{link_gke}').html_safe % { link_gke: link_gke }
-        .alert.alert-info{ role: 'alert' }
+            - link_gke = link_to(s_('ClusterIntegration|Google Container Engine'), '', target: '_blank', rel: 'noopener noreferrer')
+            = s_('ClusterIntegration|Manage your cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke }
+
+      .hidden.js-cluster-error.alert.alert-danger{ role: 'alert' }
         = s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine.')
+        %code.js-error-reason
 
-      .hidden.js-cluster-success
-        %p
-          = s_('ClusterIntegration|This cluster was set up on Google Container Engine. %{link_gke}').html_safe % { link_gke: link_gke }
-        .alert.alert-info{ role: 'alert' }
+      .hidden.js-cluster-success.alert.alert-info{ role: 'alert' }
         = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine.')
 
-      .hidden.js-cluster-creating
-        %p
-          = s_('ClusterIntegration|This cluster was set up on Google Container Engine. %{link_gke}').html_safe % { link_gke: link_gke }
-        .alert.alert-info{ role: 'alert' }
+      .hidden.js-cluster-creating.alert.alert-info{ role: 'alert' }
         = s_('ClusterIntegration|Cluster is being created on Google Container Engine...')
 
     .form_group
@@ -60,17 +56,10 @@
           = clipboard_button(text: @cluster.gcp_cluster_name, title: s_('ClusterIntegration|Copy cluster name'))
 
     %br
-    -# - if can?(current_user, :admin_cluster, @cluster)
+    - if can?(current_user, :admin_cluster, @cluster)
       .well.form_group
         %label.text-danger
           = s_('ClusterIntegration|Remove cluster integration')
         %p
           = s_('ClusterIntegration|Removing cluster integration will remove the cluster configuration you have added to this project. It will not delete your project.')
-      = link_to(s_('ClusterIntegration|Remove integration'), namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :delete, class: 'btn btn-danger')
-
-
-
-%br
-= link_to "Enable", namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :put
-%br
-= link_to "Disable", namespace_project_cluster_path(@project.namespace, @project, @cluster.id, cluster: {enabled: 'false'}), method: :put
+        = link_to(s_('ClusterIntegration|Remove integration'), namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :delete, class: 'btn btn-danger', data: { confirm: "Are you sure you want to remove cluster integration from this project? This will not delete your cluster on Google Container Engine"})