[ci skip] Merge branch 'master' into fl-vue-mr-widget

* master: (21 commits)
  normalize headers correctly i18n flash message
  fixed dashboard projects not being filterable
  Converted filterable_list to axios
  Converted due_date_select to axios
  Converted dropzone_input to axios
  Converted create_merge_request_dropdown to axios
  converted compare_autocomplete to axios
  Convered compare.js to axios
  Set alternate object directories in run_git
  Digital Ocean Spaces now supports AWS v4 streaming API
  Fix spec failures in issues_spec.rb
  Fix #42486.
  Generalize toggle_buttons.js
  update code based on feedback
  add changelog
  fix spec
  add spec
  disable retry attempts for Import/Export until that is fixed
  add an extra spec
  fix validation error on services
  ...

10 files changed, 228 insertions, 252 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/compare.js b/app/assets/javascripts/compare.js
index 144caf1d278..e2a008e8904 100644
--- a/app/assets/javascripts/compare.js
+++ b/app/assets/javascripts/compare.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, object-shorthand, consistent-return, no-unused-vars, comma-dangle, vars-on-top, prefer-template, max-len */
 import { localTimeAgo } from './lib/utils/datetime_utility';
+import axios from './lib/utils/axios_utils';
 
 export default class Compare {
   constructor(opts) {
@@ -41,17 +42,14 @@ export default class Compare {
   }
 
   getTargetProject() {
-    return $.ajax({
-      url: this.opts.targetProjectUrl,
-      data: {
-        target_project_id: $("input[name='merge_request[target_project_id]']").val()
-      },
-      beforeSend: function() {
-        return $('.mr_target_commit').empty();
+    $('.mr_target_commit').empty();
+
+    return axios.get(this.opts.targetProjectUrl, {
+      params: {
+        target_project_id: $("input[name='merge_request[target_project_id]']").val(),
       },
-      success: function(html) {
-        return $('.js-target-branch-dropdown .dropdown-content').html(html);
-      }
+    }).then(({ data }) => {
+      $('.js-target-branch-dropdown .dropdown-content').html(data);
     });
   }
 
@@ -68,22 +66,19 @@ export default class Compare {
     });
   }
 
-  static sendAjax(url, loading, target, data) {
-    var $target;
-    $target = $(target);
-    return $.ajax({
-      url: url,
-      data: data,
-      beforeSend: function() {
-        loading.show();
-        return $target.empty();
-      },
-      success: function(html) {
-        loading.hide();
-        $target.html(html);
-        var className = '.' + $target[0].className.replace(' ', '.');
-        localTimeAgo($('.js-timeago', className));
-      }
+  static sendAjax(url, loading, target, params) {
+    const $target = $(target);
+
+    loading.show();
+    $target.empty();
+
+    return axios.get(url, {
+      params,
+    }).then(({ data }) => {
+      loading.hide();
+      $target.html(data);
+      const className = '.' + $target[0].className.replace(' ', '.');
+      localTimeAgo($('.js-timeago', className));
     });
   }
 }
diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js
index e633ef8a29e..59899e97be1 100644
--- a/app/assets/javascripts/compare_autocomplete.js
+++ b/app/assets/javascripts/compare_autocomplete.js
@@ -1,4 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, object-shorthand, comma-dangle, prefer-arrow-callback, no-else-return, newline-per-chained-call, wrap-iife, max-len */
+import { __ } from './locale';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
 
 export default function initCompareAutocomplete() {
   $('.js-compare-dropdown').each(function() {
@@ -10,15 +13,14 @@ export default function initCompareAutocomplete() {
     const $filterInput = $('input[type="search"]', $dropdownContainer);
     $dropdown.glDropdown({
       data: function(term, callback) {
-        return $.ajax({
-          url: $dropdown.data('refs-url'),
-          data: {
+        axios.get($dropdown.data('refsUrl'), {
+          params: {
             ref: $dropdown.data('ref'),
             search: term,
-          }
-        }).done(function(refs) {
-          return callback(refs);
-        });
+          },
+        }).then(({ data }) => {
+          callback(data);
+        }).catch(() => flash(__('Error fetching refs')));
       },
       selectable: true,
       filterable: true,
diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index bc23a72762f..482d83621e2 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-new */
 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 import Flash from './flash';
 import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
@@ -74,60 +75,52 @@ export default class CreateMergeRequestDropdown {
   }
 
   checkAbilityToCreateBranch() {
-    return $.ajax({
-      type: 'GET',
-      dataType: 'json',
-      url: this.canCreatePath,
-      beforeSend: () => this.setUnavailableButtonState(),
-    })
-    .done((data) => {
-      this.setUnavailableButtonState(false);
-
-      if (data.can_create_branch) {
-        this.available();
-        this.enable();
-
-        if (!this.droplabInitialized) {
-          this.droplabInitialized = true;
-          this.initDroplab();
-          this.bindEvents();
+    this.setUnavailableButtonState();
+
+    axios.get(this.canCreatePath)
+      .then(({ data }) => {
+        this.setUnavailableButtonState(false);
+
+        if (data.can_create_branch) {
+          this.available();
+          this.enable();
+
+          if (!this.droplabInitialized) {
+            this.droplabInitialized = true;
+            this.initDroplab();
+            this.bindEvents();
+          }
+        } else if (data.has_related_branch) {
+          this.hide();
         }
-      } else if (data.has_related_branch) {
-        this.hide();
-      }
-    }).fail(() => {
-      this.unavailable();
-      this.disable();
-      new Flash('Failed to check if a new branch can be created.');
-    });
+      })
+      .catch(() => {
+        this.unavailable();
+        this.disable();
+        Flash('Failed to check if a new branch can be created.');
+      });
   }
 
   createBranch() {
-    return $.ajax({
-      method: 'POST',
-      dataType: 'json',
-      url: this.createBranchPath,
-      beforeSend: () => (this.isCreatingBranch = true),
-    })
-    .done((data) => {
-      this.branchCreated = true;
-      window.location.href = data.url;
-    })
-    .fail(() => new Flash('Failed to create a branch for this issue. Please try again.'));
+    this.isCreatingBranch = true;
+
+    return axios.post(this.createBranchPath)
+      .then(({ data }) => {
+        this.branchCreated = true;
+        window.location.href = data.url;
+      })
+      .catch(() => Flash('Failed to create a branch for this issue. Please try again.'));
   }
 
   createMergeRequest() {
-    return $.ajax({
-      method: 'POST',
-      dataType: 'json',
-      url: this.createMrPath,
-      beforeSend: () => (this.isCreatingMergeRequest = true),
-    })
-    .done((data) => {
-      this.mergeRequestCreated = true;
-      window.location.href = data.url;
-    })
-    .fail(() => new Flash('Failed to create Merge Request. Please try again.'));
+    this.isCreatingMergeRequest = true;
+
+    return axios.post(this.createMrPath)
+      .then(({ data }) => {
+        this.mergeRequestCreated = true;
+        window.location.href = data.url;
+      })
+      .catch(() => Flash('Failed to create Merge Request. Please try again.'));
   }
 
   disable() {
@@ -200,39 +193,33 @@ export default class CreateMergeRequestDropdown {
   getRef(ref, target = 'all') {
     if (!ref) return false;
 
-    return $.ajax({
-      method: 'GET',
-      dataType: 'json',
-      url: this.refsPath + ref,
-      beforeSend: () => {
-        this.isGettingRef = true;
-      },
-    })
-    .always(() => {
-      this.isGettingRef = false;
-    })
-    .done((data) => {
-      const branches = data[Object.keys(data)[0]];
-      const tags = data[Object.keys(data)[1]];
-      let result;
+    return axios.get(this.refsPath + ref)
+      .then(({ data }) => {
+        const branches = data[Object.keys(data)[0]];
+        const tags = data[Object.keys(data)[1]];
+        let result;
+
+        if (target === 'branch') {
+          result = CreateMergeRequestDropdown.findByValue(branches, ref);
+        } else {
+          result = CreateMergeRequestDropdown.findByValue(branches, ref, true) ||
+            CreateMergeRequestDropdown.findByValue(tags, ref, true);
+          this.suggestedRef = result;
+        }
 
-      if (target === 'branch') {
-        result = CreateMergeRequestDropdown.findByValue(branches, ref);
-      } else {
-        result = CreateMergeRequestDropdown.findByValue(branches, ref, true) ||
-          CreateMergeRequestDropdown.findByValue(tags, ref, true);
-        this.suggestedRef = result;
-      }
+        this.isGettingRef = false;
 
-      return this.updateInputState(target, ref, result);
-    })
-    .fail(() => {
-      this.unavailable();
-      this.disable();
-      new Flash('Failed to get ref.');
+        return this.updateInputState(target, ref, result);
+      })
+      .catch(() => {
+        this.unavailable();
+        this.disable();
+        new Flash('Failed to get ref.');
 
-      return false;
-    });
+        this.isGettingRef = false;
+
+        return false;
+      });
   }
 
   getTargetData(target) {
@@ -332,12 +319,12 @@ export default class CreateMergeRequestDropdown {
       xhr = this.createBranch();
     }
 
-    xhr.fail(() => {
+    xhr.catch(() => {
       this.isCreatingMergeRequest = false;
       this.isCreatingBranch = false;
-    });
 
-    xhr.always(() => this.enable());
+      this.enable();
+    });
 
     this.disable();
   }
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index 550dbdda922..ba89e5726fa 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -2,6 +2,7 @@ import Dropzone from 'dropzone';
 import _ from 'underscore';
 import './preview_markdown';
 import csrf from './lib/utils/csrf';
+import axios from './lib/utils/axios_utils';
 
 Dropzone.autoDiscover = false;
 
@@ -235,25 +236,21 @@ export default function dropzoneInput(form) {
   uploadFile = (item, filename) => {
     const formData = new FormData();
     formData.append('file', item, filename);
-    return $.ajax({
-      url: uploadsPath,
-      type: 'POST',
-      data: formData,
-      dataType: 'json',
-      processData: false,
-      contentType: false,
-      headers: csrf.headers,
-      beforeSend: () => {
-        showSpinner();
-        return closeAlertMessage();
-      },
-      success: (e, text, response) => {
-        const md = response.responseJSON.link.markdown;
+
+    showSpinner();
+    closeAlertMessage();
+
+    axios.post(uploadsPath, formData)
+      .then(({ data }) => {
+        const md = data.link.markdown;
+
         insertToTextArea(filename, md);
-      },
-      error: response => showError(response.responseJSON.message),
-      complete: () => closeSpinner(),
-    });
+        closeSpinner();
+      })
+      .catch((e) => {
+        showError(e.response.data.message);
+        closeSpinner();
+      });
   };
 
   updateAttachingMessage = (files, messageContainer) => {
diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
index ada985913bb..bd4c58b7cb1 100644
--- a/app/assets/javascripts/due_date_select.js
+++ b/app/assets/javascripts/due_date_select.js
@@ -1,6 +1,7 @@
 /* global dateFormat */
 
 import Pikaday from 'pikaday';
+import axios from './lib/utils/axios_utils';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
 
 class DueDateSelect {
@@ -125,37 +126,30 @@ class DueDateSelect {
   }
 
   submitSelectedDate(isDropdown) {
-    return $.ajax({
-      type: 'PUT',
-      url: this.issueUpdateURL,
-      data: this.datePayload,
-      dataType: 'json',
-      beforeSend: () => {
-        const selectedDateValue = this.datePayload[this.abilityName].due_date;
-        const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
+    const selectedDateValue = this.datePayload[this.abilityName].due_date;
+    const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
 
-        this.$loading.removeClass('hidden').fadeIn();
+    this.$loading.removeClass('hidden').fadeIn();
 
-        if (isDropdown) {
-          this.$dropdown.trigger('loading.gl.dropdown');
-          this.$selectbox.hide();
-        }
+    if (isDropdown) {
+      this.$dropdown.trigger('loading.gl.dropdown');
+      this.$selectbox.hide();
+    }
 
-        this.$value.css('display', '');
-        this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
-        this.$sidebarValue.html(this.displayedDate);
+    this.$value.css('display', '');
+    this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
+    this.$sidebarValue.html(this.displayedDate);
 
-        return selectedDateValue.length ?
-          $('.js-remove-due-date-holder').removeClass('hidden') :
-          $('.js-remove-due-date-holder').addClass('hidden');
-      },
-    }).done(() => {
-      if (isDropdown) {
-        this.$dropdown.trigger('loaded.gl.dropdown');
-        this.$dropdown.dropdown('toggle');
-      }
-      return this.$loading.fadeOut();
-    });
+    $('.js-remove-due-date-holder').toggleClass('hidden', selectedDateValue.length);
+
+    return axios.put(this.issueUpdateURL, this.datePayload)
+      .then(() => {
+        if (isDropdown) {
+          this.$dropdown.trigger('loaded.gl.dropdown');
+          this.$dropdown.dropdown('toggle');
+        }
+        return this.$loading.fadeOut();
+      });
   }
 }
 
diff --git a/app/assets/javascripts/filterable_list.js b/app/assets/javascripts/filterable_list.js
index 9e91f72b2ea..a10f027de53 100644
--- a/app/assets/javascripts/filterable_list.js
+++ b/app/assets/javascripts/filterable_list.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import axios from './lib/utils/axios_utils';
 
 /**
  * Makes search request for content when user types a value in the search input.
@@ -54,32 +55,26 @@ export default class FilterableList {
     this.listFilterElement.removeEventListener('input', this.debounceFilter);
   }
 
-  filterResults(queryData) {
+  filterResults(params) {
     if (this.isBusy) {
       return false;
     }
 
     $(this.listHolderElement).fadeTo(250, 0.5);
 
-    return $.ajax({
-      url: this.getFilterEndpoint(),
-      data: queryData,
-      type: 'GET',
-      dataType: 'json',
-      context: this,
-      complete: this.onFilterComplete,
-      beforeSend: () => {
-        this.isBusy = true;
-      },
-      success: (response, textStatus, xhr) => {
-        this.onFilterSuccess(response, xhr, queryData);
-      },
-    });
+    this.isBusy = true;
+
+    return axios.get(this.getFilterEndpoint(), {
+      params,
+    }).then((res) => {
+      this.onFilterSuccess(res, params);
+      this.onFilterComplete();
+    }).catch(() => this.onFilterComplete());
   }
 
-  onFilterSuccess(response, xhr, queryData) {
-    if (response.html) {
-      this.listHolderElement.innerHTML = response.html;
+  onFilterSuccess(response, queryData) {
+    if (response.data.html) {
+      this.listHolderElement.innerHTML = response.data.html;
     }
 
     // Change url so if user reload a page - search results are saved
diff --git a/app/assets/javascripts/groups/groups_filterable_list.js b/app/assets/javascripts/groups/groups_filterable_list.js
index 2db233b09da..31d56d15c23 100644
--- a/app/assets/javascripts/groups/groups_filterable_list.js
+++ b/app/assets/javascripts/groups/groups_filterable_list.js
@@ -1,6 +1,6 @@
 import FilterableList from '~/filterable_list';
 import eventHub from './event_hub';
-import { getParameterByName } from '../lib/utils/common_utils';
+import { normalizeHeaders, getParameterByName } from '../lib/utils/common_utils';
 
 export default class GroupFilterableList extends FilterableList {
   constructor({ form, filter, holder, filterEndpoint, pagePath, dropdownSel, filterInputField }) {
@@ -94,23 +94,14 @@ export default class GroupFilterableList extends FilterableList {
     this.form.querySelector(`[name="${this.filterInputField}"]`).value = '';
   }
 
-  onFilterSuccess(data, xhr, queryData) {
+  onFilterSuccess(res, queryData) {
     const currentPath = this.getPagePath(queryData);
 
-    const paginationData = {
-      'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
-      'X-Page': xhr.getResponseHeader('X-Page'),
-      'X-Total': xhr.getResponseHeader('X-Total'),
-      'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
-      'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
-      'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
-    };
-
     window.history.replaceState({
       page: currentPath,
     }, document.title, currentPath);
 
-    eventHub.$emit('updateGroups', data, Object.prototype.hasOwnProperty.call(queryData, this.filterInputField));
-    eventHub.$emit('updatePagination', paginationData);
+    eventHub.$emit('updateGroups', res.data, Object.prototype.hasOwnProperty.call(queryData, this.filterInputField));
+    eventHub.$emit('updatePagination', normalizeHeaders(res.headers));
   }
 }
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));
+  });
+}