Merge branch 'master' into fix-cache-clear-windows

6 files changed, 93 insertions, 77 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 637d0dbde23..4dddb6eb0d6 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -14,6 +14,7 @@ import {
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import applications from './components/applications.vue';
+import setupToggleButtons from '../toggle_buttons';
 
 /**
  * Cluster page has 2 separate parts:
@@ -48,12 +49,9 @@ export default class Clusters {
       installPrometheusEndpoint: installPrometheusPath,
     });
 
-    this.toggle = this.toggle.bind(this);
     this.installApplication = this.installApplication.bind(this);
     this.showToken = this.showToken.bind(this);
 
-    this.toggleButton = document.querySelector('.js-toggle-cluster');
-    this.toggleInput = document.querySelector('.js-toggle-input');
     this.errorContainer = document.querySelector('.js-cluster-error');
     this.successContainer = document.querySelector('.js-cluster-success');
     this.creatingContainer = document.querySelector('.js-cluster-creating');
@@ -63,6 +61,7 @@ export default class Clusters {
     this.tokenField = document.querySelector('.js-cluster-token');
 
     initSettingsPanels();
+    setupToggleButtons(document.querySelector('.js-cluster-enable-toggle-area'));
     this.initApplications();
 
     if (this.store.state.status !== 'created') {
@@ -101,13 +100,11 @@ export default class Clusters {
   }
 
   addListeners() {
-    this.toggleButton.addEventListener('click', this.toggle);
     if (this.showTokenButton) this.showTokenButton.addEventListener('click', this.showToken);
     eventHub.$on('installApplication', this.installApplication);
   }
 
   removeListeners() {
-    this.toggleButton.removeEventListener('click', this.toggle);
     if (this.showTokenButton) this.showTokenButton.removeEventListener('click', this.showToken);
     eventHub.$off('installApplication', this.installApplication);
   }
@@ -151,11 +148,6 @@ export default class Clusters {
     this.updateContainer(prevStatus, this.store.state.status, this.store.state.statusReason);
   }
 
-  toggle() {
-    this.toggleButton.classList.toggle('is-checked');
-    this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('is-checked').toString());
-  }
-
   showToken() {
     const type = this.tokenField.getAttribute('type');
 
diff --git a/app/assets/javascripts/clusters/clusters_index.js b/app/assets/javascripts/clusters/clusters_index.js
index 6844d1dbd83..2e3ad244375 100644
--- a/app/assets/javascripts/clusters/clusters_index.js
+++ b/app/assets/javascripts/clusters/clusters_index.js
@@ -1,58 +1,20 @@
 import Flash from '../flash';
 import { s__ } from '../locale';
+import setupToggleButtons from '../toggle_buttons';
 import ClustersService from './services/clusters_service';
-/**
- * Toggles loading and disabled classes.
- * @param {HTMLElement} button
- */
-const toggleLoadingButton = (button) => {
-  if (button.getAttribute('disabled')) {
-    button.removeAttribute('disabled');
-  } else {
-    button.setAttribute('disabled', true);
-  }
-
-  button.classList.toggle('is-loading');
-};
 
-/**
- * Toggles checked class for the given button
- * @param {HTMLElement} button
- */
-const toggleValue = (button) => {
-  button.classList.toggle('is-checked');
+export default () => {
+  const clusterList = document.querySelector('.js-clusters-list');
+  // The empty state won't have a clusterList
+  if (clusterList) {
+    setupToggleButtons(
+      document.querySelector('.js-clusters-list'),
+      (value, toggle) =>
+        ClustersService.updateCluster(toggle.dataset.endpoint, { cluster: { enabled: value } })
+          .catch((err) => {
+            Flash(s__('ClusterIntegration|Something went wrong on our end.'));
+            throw err;
+          }),
+    );
+  }
 };
-
-/**
- * Handles toggle buttons in the cluster's table.
- *
- * When the user clicks the toggle button for each cluster, it:
- * - toggles the button
- * - shows a loading and disables button
- * - Makes a put request to the given endpoint
- * Once we receive the response, either:
- * 1) Show updated status in case of successfull response
- * 2) Show initial status in case of failed response
- */
-export default function setClusterTableToggles() {
-  document.querySelectorAll('.js-toggle-cluster-list')
-    .forEach(button => button.addEventListener('click', (e) => {
-      const toggleButton = e.currentTarget;
-      const endpoint = toggleButton.getAttribute('data-endpoint');
-
-      toggleValue(toggleButton);
-      toggleLoadingButton(toggleButton);
-
-      const value = toggleButton.classList.contains('is-checked');
-
-      ClustersService.updateCluster(endpoint, { cluster: { enabled: value } })
-        .then(() => {
-          toggleLoadingButton(toggleButton);
-        })
-        .catch(() => {
-          toggleLoadingButton(toggleButton);
-          toggleValue(toggleButton);
-          Flash(s__('ClusterIntegration|Something went wrong on our end.'));
-        });
-    }));
-}
diff --git a/app/assets/javascripts/toggle_buttons.js b/app/assets/javascripts/toggle_buttons.js
new file mode 100644
index 00000000000..974dc3ee052
--- /dev/null
+++ b/app/assets/javascripts/toggle_buttons.js
@@ -0,0 +1,61 @@
+import $ from 'jquery';
+import Flash from './flash';
+import { __ } from './locale';
+import { convertPermissionToBoolean } from './lib/utils/common_utils';
+
+/*
+ example HAML:
+ ```
+  %button.js-project-feature-toggle.project-feature-toggle{ type: "button",
+    class: "#{'is-checked' if enabled?}",
+    'aria-label': _('Toggle Cluster') }
+    %input{ type: "hidden", class: 'js-project-feature-toggle-input', value: enabled? }
+  ```
+*/
+
+function updatetoggle(toggle, isOn) {
+  toggle.classList.toggle('is-checked', isOn);
+}
+
+function onToggleClicked(toggle, input, clickCallback) {
+  const previousIsOn = convertPermissionToBoolean(input.value);
+
+  // Visually change the toggle and start loading
+  updatetoggle(toggle, !previousIsOn);
+  toggle.setAttribute('disabled', true);
+  toggle.classList.toggle('is-loading', true);
+
+  Promise.resolve(clickCallback(!previousIsOn, toggle))
+    .then(() => {
+      // Actually change the input value
+      input.setAttribute('value', !previousIsOn);
+    })
+    .catch(() => {
+      // Revert the visuals if something goes wrong
+      updatetoggle(toggle, previousIsOn);
+    })
+    .then(() => {
+      // Remove the loading indicator in any case
+      toggle.removeAttribute('disabled');
+      toggle.classList.toggle('is-loading', false);
+
+      $(input).trigger('trigger-change');
+    })
+    .catch(() => {
+      Flash(__('Something went wrong when toggling the button'));
+    });
+}
+
+export default function setupToggleButtons(container, clickCallback = () => {}) {
+  const toggles = container.querySelectorAll('.js-project-feature-toggle');
+
+  toggles.forEach((toggle) => {
+    const input = toggle.querySelector('.js-project-feature-toggle-input');
+    const isOn = convertPermissionToBoolean(input.value);
+
+    // Get the visible toggle in sync with the hidden input
+    updatetoggle(toggle, isOn);
+
+    toggle.addEventListener('click', onToggleClicked.bind(null, toggle, input, clickCallback));
+  });
+}
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index b8692009225..fdd72ead2cb 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -5,15 +5,16 @@
   = markdown_field(current_application_settings, :help_page_text)
   %hr
 
-- unless current_application_settings.help_page_hide_commercial_content?
-  %h1
-    GitLab
-    Community Edition
-    - if user_signed_in?
-      %span= Gitlab::VERSION
-      %small= link_to Gitlab::REVISION, Gitlab::COM_URL + namespace_project_commits_path('gitlab-org', 'gitlab-ce', Gitlab::REVISION)
-      = version_status_badge
+%h1
+  GitLab
+  Community Edition
+  - if user_signed_in?
+    %span= Gitlab::VERSION
+    %small= link_to Gitlab::REVISION, Gitlab::COM_URL + namespace_project_commits_path('gitlab-org', 'gitlab-ce', Gitlab::REVISION)
+    = version_status_badge
+  %hr
 
+- unless current_application_settings.help_page_hide_commercial_content?
   %p.slead
     GitLab is open source software to collaborate on code.
     %br
diff --git a/app/views/projects/clusters/_cluster.html.haml b/app/views/projects/clusters/_cluster.html.haml
index 3943dfc0856..20ee8086f93 100644
--- a/app/views/projects/clusters/_cluster.html.haml
+++ b/app/views/projects/clusters/_cluster.html.haml
@@ -12,11 +12,12 @@
   .table-section.section-10
     .table-mobile-header{ role: "rowheader" }
     .table-mobile-content
-      %button{ type: "button",
-        class: "js-toggle-cluster-list project-feature-toggle #{'is-checked' if cluster.enabled?} #{'is-disabled' if !cluster.can_toggle_cluster?}",
+      %button.js-project-feature-toggle.project-feature-toggle{ type: "button",
+        class: "#{'is-checked' if cluster.enabled?} #{'is-disabled' if !cluster.can_toggle_cluster?}",
         "aria-label": s_("ClusterIntegration|Toggle Cluster"),
         disabled: !cluster.can_toggle_cluster?,
         data: { endpoint: namespace_project_cluster_path(@project.namespace, @project, cluster, format: :json) } }
+        %input.js-project-feature-toggle-input{ type: "hidden", value: cluster.enabled? }
         = icon("spinner spin", class: "loading-icon")
         %span.toggle-icon
           = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
diff --git a/app/views/projects/clusters/_integration_form.html.haml b/app/views/projects/clusters/_integration_form.html.haml
index 9d593ffc021..0af6e6e0577 100644
--- a/app/views/projects/clusters/_integration_form.html.haml
+++ b/app/views/projects/clusters/_integration_form.html.haml
@@ -10,13 +10,12 @@
           = s_('ClusterIntegration|Cluster integration is enabled for this project.')
       - else
         = s_('ClusterIntegration|Cluster integration is disabled for this project.')
-    %label.append-bottom-10
-      = field.hidden_field :enabled, { class: 'js-toggle-input'}
-
+    %label.append-bottom-10.js-cluster-enable-toggle-area
       %button{ type: 'button',
-        class: "js-toggle-cluster project-feature-toggle #{'is-checked' unless !@cluster.enabled?} #{'is-disabled' unless can?(current_user, :update_cluster, @cluster)}",
+        class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if @cluster.enabled?} #{'is-disabled' unless can?(current_user, :update_cluster, @cluster)}",
         "aria-label": s_("ClusterIntegration|Toggle Cluster"),
         disabled: !can?(current_user, :update_cluster, @cluster) }
+        = field.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
         %span.toggle-icon
           = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
           = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')