Merge branch 'fix-protected-branch-delete-modal' into 'master'

Fix the input confirmation validation for the delete branches modal

Closes #44985

See merge request gitlab-org/gitlab-ce!18176

3 files changed, 56 insertions, 0 deletions

diff --git a/app/assets/javascripts/branches/branches_delete_modal.js b/app/assets/javascripts/branches/branches_delete_modal.js
index 839e369eaf6..f34496f84c6 100644
--- a/app/assets/javascripts/branches/branches_delete_modal.js
+++ b/app/assets/javascripts/branches/branches_delete_modal.js
@@ -16,6 +16,7 @@ class DeleteModal {
   bindEvents() {
     this.$toggleBtns.on('click', this.setModalData.bind(this));
     this.$confirmInput.on('input', this.setDeleteDisabled.bind(this));
+    this.$deleteBtn.on('click', this.setDisableDeleteButton.bind(this));
   }
 
   setModalData(e) {
@@ -30,6 +31,16 @@ class DeleteModal {
     this.$deleteBtn.attr('disabled', e.currentTarget.value !== this.branchName);
   }
 
+  setDisableDeleteButton(e) {
+    if (this.$deleteBtn.is('[disabled]')) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    return true;
+  }
+
   updateModal() {
     this.$branchName.text(this.branchName);
     this.$confirmInput.val('');
diff --git a/changelogs/unreleased/44985-fix-protected-branch-delete-modal.yml b/changelogs/unreleased/44985-fix-protected-branch-delete-modal.yml
new file mode 100644
index 00000000000..4af2af2a561
--- /dev/null
+++ b/changelogs/unreleased/44985-fix-protected-branch-delete-modal.yml
@@ -0,0 +1,5 @@
+---
+title: Fix confirmation modal for deleting a protected branch
+merge_request: 18176
+author: Paul Bonaud @PaulRbR
+type: fixed
diff --git a/spec/javascripts/branches/branches_delete_modal_spec.js b/spec/javascripts/branches/branches_delete_modal_spec.js
new file mode 100644
index 00000000000..b223b8e2c0a
--- /dev/null
+++ b/spec/javascripts/branches/branches_delete_modal_spec.js
@@ -0,0 +1,40 @@
+import $ from 'jquery';
+import DeleteModal from '~/branches/branches_delete_modal';
+
+describe('branches delete modal', () => {
+  describe('setDisableDeleteButton', () => {
+    let submitSpy;
+    let $deleteButton;
+
+    beforeEach(() => {
+      setFixtures(`
+        <div id="modal-delete-branch">
+          <form>
+            <button type="submit" class="js-delete-branch">Delete</button>
+          </form>
+        </div>
+      `);
+      $deleteButton = $('.js-delete-branch');
+      submitSpy = jasmine.createSpy('submit').and.callFake(event => event.preventDefault());
+      $('#modal-delete-branch form').on('submit', submitSpy);
+      // eslint-disable-next-line no-new
+      new DeleteModal();
+    });
+
+    it('does not submit if button is disabled', () => {
+      $deleteButton.attr('disabled', true);
+
+      $deleteButton.click();
+
+      expect(submitSpy).not.toHaveBeenCalled();
+    });
+
+    it('submits if button is not disabled', () => {
+      $deleteButton.attr('disabled', false);
+
+      $deleteButton.click();
+
+      expect(submitSpy).toHaveBeenCalled();
+    });
+  });
+});