Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

2 files changed, 47 insertions, 43 deletions

diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index d4b52860261..16eb5c3de32 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -5,6 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import AccessDropdown from '~/projects/settings/access_dropdown';
+import { initToggle } from '~/toggles';
 import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
 
 export default class ProtectedBranchCreate {
@@ -15,25 +16,18 @@ export default class ProtectedBranchCreate {
     this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
     this.currentProjectUserDefaults = {};
     this.buildDropdowns();
-    this.$forcePushToggle = this.$form.find('.js-force-push-toggle');
-    this.$codeOwnerToggle = this.$form.find('.js-code-owner-toggle');
-    this.bindEvents();
-  }
 
-  bindEvents() {
-    this.$forcePushToggle.on('click', this.onForcePushToggleClick.bind(this));
+    this.forcePushToggle = initToggle(document.querySelector('.js-force-push-toggle'));
+
     if (this.hasLicense) {
-      this.$codeOwnerToggle.on('click', this.onCodeOwnerToggleClick.bind(this));
+      this.codeOwnerToggle = initToggle(document.querySelector('.js-code-owner-toggle'));
     }
-    this.$form.on('submit', this.onFormSubmit.bind(this));
-  }
 
-  onForcePushToggleClick() {
-    this.$forcePushToggle.toggleClass('is-checked');
+    this.bindEvents();
   }
 
-  onCodeOwnerToggleClick() {
-    this.$codeOwnerToggle.toggleClass('is-checked');
+  bindEvents() {
+    this.$form.on('submit', this.onFormSubmit.bind(this));
   }
 
   buildDropdowns() {
@@ -92,8 +86,8 @@ export default class ProtectedBranchCreate {
       authenticity_token: this.$form.find('input[name="authenticity_token"]').val(),
       protected_branch: {
         name: this.$form.find('input[name="protected_branch[name]"]').val(),
-        allow_force_push: this.$forcePushToggle.hasClass('is-checked'),
-        code_owner_approval_required: this.$codeOwnerToggle.hasClass('is-checked'),
+        allow_force_push: this.forcePushToggle.value,
+        code_owner_approval_required: this.codeOwnerToggle?.value ?? false,
       },
     };
 
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js b/app/assets/javascripts/protected_branches/protected_branch_edit.js
index 86273cfdda6..15e706e38c6 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js
@@ -3,6 +3,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import AccessDropdown from '~/projects/settings/access_dropdown';
+import { initToggle } from '~/toggles';
 import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
 
 export default class ProtectedBranchEdit {
@@ -14,8 +15,6 @@ export default class ProtectedBranchEdit {
     this.$wrap = options.$wrap;
     this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
     this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
-    this.$forcePushToggle = this.$wrap.find('.js-force-push-toggle');
-    this.$codeOwnerToggle = this.$wrap.find('.js-code-owner-toggle');
 
     this.$wraps[ACCESS_LEVELS.MERGE] = this.$allowedToMergeDropdown.closest(
       `.${ACCESS_LEVELS.MERGE}-container`,
@@ -25,36 +24,47 @@ export default class ProtectedBranchEdit {
     );
 
     this.buildDropdowns();
-    this.bindEvents();
+    this.initToggles();
   }
 
-  bindEvents() {
-    this.$forcePushToggle.on('click', this.onForcePushToggleClick.bind(this));
-    if (this.hasLicense) {
-      this.$codeOwnerToggle.on('click', this.onCodeOwnerToggleClick.bind(this));
+  initToggles() {
+    const wrap = this.$wrap.get(0);
+
+    const forcePushToggle = initToggle(wrap.querySelector('.js-force-push-toggle'));
+    if (forcePushToggle) {
+      forcePushToggle.$on('change', (value) => {
+        forcePushToggle.isLoading = true;
+        forcePushToggle.disabled = true;
+        this.updateProtectedBranch(
+          {
+            allow_force_push: value,
+          },
+          () => {
+            forcePushToggle.isLoading = false;
+            forcePushToggle.disabled = false;
+          },
+        );
+      });
     }
-  }
-
-  onForcePushToggleClick() {
-    this.$forcePushToggle.toggleClass('is-checked');
-    this.$forcePushToggle.prop('disabled', true);
-
-    const formData = {
-      allow_force_push: this.$forcePushToggle.hasClass('is-checked'),
-    };
-
-    this.updateProtectedBranch(formData, () => this.$forcePushToggle.prop('disabled', false));
-  }
 
-  onCodeOwnerToggleClick() {
-    this.$codeOwnerToggle.toggleClass('is-checked');
-    this.$codeOwnerToggle.prop('disabled', true);
-
-    const formData = {
-      code_owner_approval_required: this.$codeOwnerToggle.hasClass('is-checked'),
-    };
-
-    this.updateProtectedBranch(formData, () => this.$codeOwnerToggle.prop('disabled', false));
+    if (this.hasLicense) {
+      const codeOwnerToggle = initToggle(wrap.querySelector('.js-code-owner-toggle'));
+      if (codeOwnerToggle) {
+        codeOwnerToggle.$on('change', (value) => {
+          codeOwnerToggle.isLoading = true;
+          codeOwnerToggle.disabled = true;
+          this.updateProtectedBranch(
+            {
+              code_owner_approval_required: value,
+            },
+            () => {
+              codeOwnerToggle.isLoading = false;
+              codeOwnerToggle.disabled = false;
+            },
+          );
+        });
+      }
+    }
   }
 
   updateProtectedBranch(formData, callback) {