Adjust display settings for MR widget source branch removal componentsbpj-widget-source-branch-removal-status

11 files changed, 115 insertions, 29 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_source_branch_removal_status.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_source_branch_removal_status.js
new file mode 100644
index 00000000000..47a42e7558c
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_source_branch_removal_status.js
@@ -0,0 +1,21 @@
+import tooltip from '../../vue_shared/directives/tooltip';
+
+export default {
+  directives: {
+    tooltip,
+  },
+  template: `
+    <p class="mr-info-list mr-links source-branch-removal-status">
+      <span class="status-text">
+        <strong>Removes</strong> source branch
+      </span>
+      <i
+        v-tooltip
+        class="fa fa-question-circle"
+        title="A user with write access to the source branch selected this option"
+        aria-label="Source Branch Removal Info"
+      >
+      </i>
+    </p>
+  `,
+};
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 ad709da51ee..69ae8698176 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
@@ -75,9 +75,6 @@ export default {
         || this.isMakingRequest
         || this.mr.preventMerge);
     },
-    isRemoveSourceBranchButtonDisabled() {
-      return this.isMergeButtonDisabled || !this.mr.canRemoveSourceBranch;
-    },
     shouldShowSquashBeforeMerge() {
       const { commitsCount, enableSquashBeforeMerge } = this.mr;
       return enableSquashBeforeMerge && commitsCount > 1;
@@ -270,11 +267,10 @@ export default {
           </span>
           <div class="media-body-wrap space-children">
             <template v-if="shouldShowMergeControls()">
-              <label>
+              <label v-if="mr.canRemoveSourceBranch">
                 <input
                   id="remove-source-branch-input"
                   v-model="removeSourceBranch"
-                  :disabled="isRemoveSourceBranchButtonDisabled"
                   type="checkbox"/> Remove source branch
               </label>
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 49340c232c8..7e8a3895db8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -16,6 +16,7 @@ export { default as WidgetMergeHelp } from './components/mr_widget_merge_help';
 export { default as WidgetPipeline } from './components/mr_widget_pipeline';
 export { default as WidgetDeployment } from './components/mr_widget_deployment';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';
+export { default as WidgetSourceBranchRemovalStatus } from './components/mr_widget_source_branch_removal_status';
 export { default as MergedState } from './components/states/mr_widget_merged';
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge';
 export { default as ClosedState } from './components/states/mr_widget_closed';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 044b664484b..632d8e7e946 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -6,6 +6,7 @@ import {
   WidgetPipeline,
   WidgetDeployment,
   WidgetRelatedLinks,
+  WidgetSourceBranchRemovalStatus,
   MergedState,
   ClosedState,
   MergingState,
@@ -63,6 +64,9 @@ export default {
     shouldRenderRelatedLinks() {
       return this.mr.relatedLinks;
     },
+    shouldRenderSourceBranchRemovalStatus() {
+      return !this.mr.canRemoveSourceBranch && this.mr.shouldRemoveSourceBranch;
+    },
     shouldRenderDeployments() {
       return this.mr.deployments.length;
     },
@@ -211,6 +215,7 @@ export default {
     'mr-widget-pipeline': WidgetPipeline,
     'mr-widget-deployment': WidgetDeployment,
     'mr-widget-related-links': WidgetRelatedLinks,
+    'mr-widget-source-branch-removal-status': WidgetSourceBranchRemovalStatus,
     'mr-widget-merged': MergedState,
     'mr-widget-closed': ClosedState,
     'mr-widget-merging': MergingState,
@@ -250,6 +255,8 @@ export default {
           v-if="shouldRenderRelatedLinks"
           :state="mr.state"
           :related-links="mr.relatedLinks" />
+        <mr-widget-source-branch-removal-status
+          v-if="shouldRenderSourceBranchRemovalStatus" />
       </div>
       <div
         class="mr-widget-footer"
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 09a14578dd3..81b8fe07b8b 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -348,6 +348,10 @@
       color: $gl-text-color;
     }
   }
+
+  .source-branch-removal-status {
+    margin-bottom: 0;
+  }
 }
 
 .mr-state-widget .mr-widget-body {
diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml
index 8f6509a8ce8..8b66158c179 100644
--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -13,5 +13,6 @@
       .checkbox
         = 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', issuable.force_remove_source_branch?
-          Remove source branch when merge request is accepted.
+          - if @merge_request.source_branch_exists? && @merge_request.can_remove_source_branch?(current_user)
+            = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch?
+            Remove source branch when merge request is accepted.
diff --git a/spec/features/merge_requests/widget_spec.rb b/spec/features/merge_requests/widget_spec.rb
index 443b596b3c6..8bf8cadddc1 100644
--- a/spec/features/merge_requests/widget_spec.rb
+++ b/spec/features/merge_requests/widget_spec.rb
@@ -234,7 +234,7 @@ describe 'Merge request', :js do
     end
 
     it 'user cannot remove source branch' do
-      expect(page).to have_field('remove-source-branch-input', disabled: true)
+      expect(page).not_to have_field('remove-source-branch-input')
     end
   end
 
diff --git a/spec/javascripts/helpers/vue_mount_component_helper.js b/spec/javascripts/helpers/vue_mount_component_helper.js
index d7a2e86771c..5ace6bc7221 100644
--- a/spec/javascripts/helpers/vue_mount_component_helper.js
+++ b/spec/javascripts/helpers/vue_mount_component_helper.js
@@ -1,4 +1,15 @@
-export default (Component, props = {}) => new Component({
-  propsData: props,
-}).$mount();
+import Vue from 'vue';
+
+export default (componentConfig, props = {}) => {
+  let Component = componentConfig;
+
+  // Make it instantiatable, if it's a plain config object
+  if (typeof Component !== 'function' && typeof Component === 'object') {
+    Component = Vue.extend(Component);
+  }
+
+  return new Component({
+    propsData: props,
+  }).$mount();
+};
 
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_source_branch_removal_status_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_source_branch_removal_status_spec.js
new file mode 100644
index 00000000000..e00cbb9df11
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_source_branch_removal_status_spec.js
@@ -0,0 +1,24 @@
+import SourceBranchRemovalStatus from '~/vue_merge_request_widget/components/mr_widget_source_branch_removal_status';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('MR Widget Source Branch Removal Status Component', () => {
+  beforeEach(() => {
+    this.component = mountComponent(SourceBranchRemovalStatus);
+  });
+
+  it('renders the message', () => {
+    const $message = this.component.$el;
+    expect($message).not.toBeNull();
+    expect($message.querySelector('.status-text').textContent).toContain('Removes source branch');
+  });
+
+  it('renders the help icon', () => {
+    const $icon = this.component.$el.querySelector('.fa-question-circle');
+    expect($icon).not.toBeNull();
+  });
+
+  it('provides content for the tooltip', () => {
+    const $icon = this.component.$el.querySelector('.fa-question-circle');
+    expect($icon.getAttribute('data-original-title')).toBe('A user with write access to the source branch selected this option');
+  });
+});
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 03a52f1f91c..eb554b886b7 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
@@ -185,30 +185,24 @@ describe('MRWidgetReadyToMerge', () => {
 
     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('checkbox should not be in the rendered output', () => {
+          vm.mr.canRemoveSourceBranch = false;
 
-        it('should be disabled in the rendered output', () => {
-          const checkboxElement = vm.$el.querySelector('#remove-source-branch-input');
-          expect(checkboxElement.getAttribute('disabled')).toBe('disabled');
+          vm.$nextTick(() => {
+            const checkboxElement = vm.$el.querySelector('#remove-source-branch-input');
+            expect(checkboxElement).toBeNull();
+          });
         });
       });
 
       describe('when user can merge and can delete branch', () => {
-        beforeEach(() => {
-          this.customVm = createComponent({
-            mr: { canRemoveSourceBranch: true },
-          });
-        });
+        it('checkbox should be in rendered output', () => {
+          vm.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.querySelector('#remove-source-branch-input');
-          expect(checkboxElement.getAttribute('disabled')).toBeNull();
+          vm.$nextTick(() => {
+            const checkboxElement = vm.$el.querySelector('#remove-source-branch-input');
+            expect(checkboxElement).not.toBeNull();
+          });
         });
       });
     });
diff --git a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
index e4324e91502..e5906036db0 100644
--- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
@@ -83,6 +83,32 @@ describe('mrWidgetOptions', () => {
       });
     });
 
+    describe('shouldRenderSourceBranchRemovalStatus', () => {
+      describe('when user cannot remove source branch and it will be removed', () => {
+        it('should be true', () => {
+          vm.mr.canRemoveSourceBranch = false;
+          vm.mr.shouldRemoveSourceBranch = true;
+          expect(vm.shouldRenderSourceBranchRemovalStatus).toBe(true);
+        });
+      });
+
+      describe('when user can remove source branch and it will be removed', () => {
+        it('should be false', () => {
+          vm.mr.canRemoveSourceBranch = true;
+          vm.mr.shouldRemoveSourceBranch = true;
+          expect(vm.shouldRenderSourceBranchRemovalStatus).toBe(false);
+        });
+      });
+
+      describe('when user cannot remove source branch and it will not be removed', () => {
+        it('should be false', () => {
+          vm.mr.canRemoveSourceBranch = false;
+          vm.mr.shouldRemoveSourceBranch = false;
+          expect(vm.shouldRenderSourceBranchRemovalStatus).toBe(false);
+        });
+      });
+    });
+
     describe('shouldRenderDeployments', () => {
       it('should return false for the initial data', () => {
         expect(vm.shouldRenderDeployments).toBeFalsy();
@@ -344,6 +370,7 @@ describe('mrWidgetOptions', () => {
       expect(comps['mr-widget-pipeline']).toBeDefined();
       expect(comps['mr-widget-deployment']).toBeDefined();
       expect(comps['mr-widget-related-links']).toBeDefined();
+      expect(comps['mr-widget-source-branch-removal-status']).toBeDefined();
       expect(comps['mr-widget-merged']).toBeDefined();
       expect(comps['mr-widget-closed']).toBeDefined();
       expect(comps['mr-widget-merging']).toBeDefined();