Break removal status into its own component.33264_mr_branch_ui

4 files changed, 62 insertions, 15 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..2e4478de9df
--- /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">
+      <strong>Removes</strong> source branch
+      <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>
+  
+  
+  `,
+};
\ No newline at end of file
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 6bd207d5cf9..8ffd6dbb605 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,
@@ -32,7 +33,6 @@ import {
   notify,
 } from './dependencies';
 import { setFavicon } from '../lib/utils/common_utils';
-import tooltip from '../vue_shared/directives/tooltip';
 
 export default {
   el: '#js-vue-mr-widget',
@@ -212,6 +212,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,
@@ -251,19 +252,8 @@ export default {
           v-if="shouldRenderRelatedLinks"
           :state="mr.state"
           :related-links="mr.relatedLinks" />
-        <p
-          class="mr-info-list mr-links"
-          v-if="!mr.canRemoveSourceBranch && mr.shouldRemoveSourceBranch"
-        >
-          <strong>Removes</strong> source branch
-          <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>
+        <mr-widget-source-branch-removal-status
+          v-if="!mr.canRemoveSourceBranch && mr.shouldRemoveSourceBranch" />
       </div>
       <div
         class="mr-widget-footer"
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 0b29fdf487b..d2098a83d18 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
@@ -183,7 +183,7 @@ describe('MRWidgetReadyToMerge', () => {
       });
     });
 
-    describe('Remove source branch checkbox', () => {
+    fdescribe('Remove source branch checkbox', () => {
       describe('when user can merge but cannot delete branch', () => {
         it('checkbox should not be in the rendered output', () => {
           const checkboxElement = vm.$el.querySelector('#remove-source-branch-input');
@@ -204,6 +204,41 @@ describe('MRWidgetReadyToMerge', () => {
         });
       });
     });
+
+    fdescribe('Remove source branch message', () => {
+      describe('when user cannot remove source branch and it will be removed', () => {
+        beforeEach(() => {
+          this.customVm = createComponent({
+            mr: {
+              canRemoveSourceBranch: false,
+              removeSourceBranch: true,
+            },
+          });
+        });
+      });
+
+      describe('when user can remove source branch and it will be removed', () => {
+        beforeEach(() => {
+          this.customVm = createComponent({
+            mr: {
+              canRemoveSourceBranch: true,
+              removeSourceBranch: true,
+            },
+          });
+        });
+      });
+
+      describe('when user cannot remove source branch and it will not be removed', () => {
+        beforeEach(() => {
+          this.customVm = createComponent({
+            mr: {
+              canRemoveSourceBranch: false,
+              removeSourceBranch: false,
+            },
+          });
+        });
+      });
+    });
   });
 
   describe('methods', () => {