Upgrade Remove Source Branch checkbox UX.

5 files changed, 68 insertions, 5 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index 74613a1089e..f30c831fd99 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -13,7 +13,7 @@ export default {
   },
   data() {
     return {
-      removeSourceBranch: true,
+      removeSourceBranch: this.mr.shouldRemoveSourceBranch,
       mergeWhenBuildSucceeds: false,
       useCommitMessageWithDescription: false,
       setToMergeWhenPipelineSucceeds: false,
@@ -69,6 +69,9 @@ export default {
         || this.isMakingRequest
         || this.mr.preventMerge);
     },
+    isRemoveSourceBranchButtonDisabled() {
+      return this.isMergeButtonDisabled || !this.mr.canRemoveSourceBranch;
+    },
     shouldShowSquashBeforeMerge() {
       const { commitsCount, enableSquashBeforeMerge } = this.mr;
       return enableSquashBeforeMerge && commitsCount > 1;
@@ -252,8 +255,9 @@ export default {
       <template v-if="isMergeAllowed()">
         <label class="spacing">
           <input
+            id="remove-source-branch-input"
             v-model="removeSourceBranch"
-            :disabled="isMergeButtonDisabled"
+            :disabled="isRemoveSourceBranchButtonDisabled"
             type="checkbox"/> Remove source branch
         </label>
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 06661b930e3..b3a0d9c0b11 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -11,6 +11,7 @@ export default class MergeRequestStore {
   setData(data) {
     const currentUser = data.current_user;
     const pipelineStatus = data.pipeline ? data.pipeline.details.status : null;
+    const mergeParams = data.merge_params || {};
 
     this.title = data.title;
     this.targetBranch = data.target_branch;
@@ -51,7 +52,8 @@ export default class MergeRequestStore {
     this.cancelAutoMergePath = data.cancel_merge_when_pipeline_succeeds_path;
     this.removeWIPPath = data.remove_wip_path;
     this.sourceBranchRemoved = !data.source_branch_exists;
-    this.shouldRemoveSourceBranch = (data.merge_params || {}).should_remove_source_branch || false;
+    this.shouldRemoveSourceBranch = mergeParams.should_remove_source_branch ||
+      mergeParams.force_remove_source_branch === "1" || false;
     this.onlyAllowMergeIfPipelineSucceeds = data.only_allow_merge_if_pipeline_succeeds || false;
     this.mergeWhenPipelineSucceeds = data.merge_when_pipeline_succeeds || false;
     this.mergePath = data.merge_path;
diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml
index d23f79be2be..271150ed318 100644
--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -5,3 +5,13 @@
 
 -# This check is duplicated below, to avoid conflicts with EE.
 - return unless issuable.can_remove_source_branch?(current_user)
+
+.form-group
+  .col-sm-10.col-sm-offset-2
+    - if issuable.can_remove_source_branch?(current_user)
+      .checkbox
+        - initial_checkbox_value = issuable.merge_params.key?('force_remove_source_branch') ? issuable.force_remove_source_branch? : true
+        = label_tag 'merge_request[force_remove_source_branch]' do
+          = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
+          = check_box_tag 'merge_request[force_remove_source_branch]', '1', initial_checkbox_value
+          Remove source branch when merge request is accepted.
diff --git a/spec/features/merge_requests/edit_mr_spec.rb b/spec/features/merge_requests/edit_mr_spec.rb
index ec87a99b3ab..f4bfe7e19f6 100644
--- a/spec/features/merge_requests/edit_mr_spec.rb
+++ b/spec/features/merge_requests/edit_mr_spec.rb
@@ -29,6 +29,20 @@ feature 'Edit Merge Request', feature: true do
       expect(page).to have_content 'Someone edited the merge request the same time you did'
     end
 
+
+    it 'allows to unselect "Remove source branch"', js: true do
+      merge_request.update(merge_params: { 'force_remove_source_branch' => '1' })
+      expect(merge_request.merge_params['force_remove_source_branch']).to be_truthy
+
+      visit edit_namespace_project_merge_request_path(project.namespace, project, merge_request)
+      uncheck 'Remove source branch when merge request is accepted'
+
+      click_button 'Save changes'
+
+      expect(page).to have_unchecked_field 'remove-source-branch-input'
+      expect(page).to have_content 'Remove source branch'
+    end
+
     it 'should preserve description textarea height', js: true do
       long_description = %q(
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac ornare ligula, ut tempus arcu. Etiam ultricies accumsan dolor vitae faucibus. Donec at elit lacus. Mauris orci ante, aliquam quis lorem eget, convallis faucibus arcu. Aenean at pulvinar lacus. Ut viverra quam massa, molestie ornare tortor dignissim a. Suspendisse tristique pellentesque tellus, id lacinia metus elementum id. Nam tristique, arcu rhoncus faucibus viverra, lacus ipsum sagittis ligula, vitae convallis odio lacus a nibh. Ut tincidunt est purus, ac vestibulum augue maximus in. Suspendisse vel erat et mi ultricies semper. Pellentesque volutpat pellentesque consequat.
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index d043ad38b8b..95c8fb5c78d 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -5,7 +5,7 @@ import * as simplePoll from '~/lib/utils/simple_poll';
 
 const commitMessage = 'This is the commit message';
 const commitMessageWithDescription = 'This is the commit message description';
-const createComponent = () => {
+const createComponent = (customConfig = {}) => {
   const Component = Vue.extend(readyToMergeComponent);
   const mr = {
     isPipelineActive: false,
@@ -17,8 +17,12 @@ const createComponent = () => {
     sha: '12345678',
     commitMessage,
     commitMessageWithDescription,
+    shouldRemoveSourceBranch: true,
+    canRemoveSourceBranch: false,
   };
 
+  Object.assign(mr, customConfig.mr);
+
   const service = {
     merge() {},
     poll() {},
@@ -51,7 +55,6 @@ describe('MRWidgetReadyToMerge', () => {
 
   describe('data', () => {
     it('should have default data', () => {
-      expect(vm.removeSourceBranch).toBeTruthy(true);
       expect(vm.mergeWhenBuildSucceeds).toBeFalsy();
       expect(vm.useCommitMessageWithDescription).toBeFalsy();
       expect(vm.setToMergeWhenPipelineSucceeds).toBeFalsy();
@@ -166,6 +169,36 @@ describe('MRWidgetReadyToMerge', () => {
         expect(vm.isMergeButtonDisabled).toBeTruthy();
       });
     });
+
+    describe('Remove source branch checkbox', () => {
+      describe('when user can merge but cannot delete branch', () => {
+        it('isRemoveSourceBranchButtonDisabled should be true', () => {
+          expect(vm.isRemoveSourceBranchButtonDisabled).toBe(true);
+        });
+
+        it('should be disabled in the rendered output', () => {
+          const checkboxElement = vm.$el.getElementById('remove-source-branch-input');
+          expect(checkboxElement.getAttribute('disabled')).toBe('disabled');
+        });
+      });
+
+      describe('when user can merge and can delete branch', () => {
+        beforeEach(() => {
+          this.customVm = createComponent({
+            mr: { canRemoveSourceBranch: true },
+          });
+        });
+
+        it('isRemoveSourceBranchButtonDisabled should be false', () => {
+          expect(this.customVm.isRemoveSourceBranchButtonDisabled).toBe(false);
+        });
+
+        it('should be enabled in rendered output', () => {
+          const checkboxElement = this.customVm.$el.getElementById('remove-source-branch-input');
+          expect(checkboxElement.getAttribute('disabled')).toBeNull();
+        });
+      });
+    });
   });
 
   describe('methods', () => {