Merge branch '33095-mr-widget-ui' into 'master'

Merge Request widget Improvements

Closes #33095

See merge request !12601

spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js

@@ -12,7 +12,7 @@ describe('MRWidgetArchived', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
       expect(el.querySelector('button').disabled).toBeTruthy();
-      expect(el.innerText).toContain('This project is archived, write access has been disabled.');
+      expect(el.innerText).toContain('This project is archived, write access has been disabled');
     });
   });
 });

spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js

@@ -24,8 +24,8 @@ describe('MRWidgetAutoMergeFailed', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically.');
+      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeFalsy();
+      expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically');
       expect(vm.$el.innerText).toContain(mergeError);
     });
   });

spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js

@@ -12,7 +12,7 @@ describe('MRWidgetChecking', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
       expect(el.querySelector('button').disabled).toBeTruthy();
-      expect(el.innerText).toContain('Checking ability to merge automatically.');
+      expect(el.innerText).toContain('Checking ability to merge automatically');
       expect(el.querySelector('i')).toBeDefined();
     });
   });

spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js

@@ -29,15 +29,16 @@ describe('MRWidgetConflicts', () => {
   describe('template', () => {
     it('should have correct elements', () => {
       const el = createComponent().$el;
-      const resolveButton = el.querySelectorAll('.btn-group .btn')[0];
-      const mergeLocallyButton = el.querySelectorAll('.btn-group .btn')[1];
-      expect(el.textContent).toContain('There are merge conflicts.');
+      const resolveButton = el.querySelector('.js-resolve-conflicts-button');
+      const mergeButton = el.querySelector('.mr-widget-body .btn');
+      const mergeLocallyButton = el.querySelector('.js-merge-locally-button');
+      expect(el.textContent).toContain('There are merge conflicts');
       expect(el.textContent).not.toContain('ask someone with write access');
       expect(el.querySelector('.btn-success').disabled).toBeTruthy();
-      expect(el.querySelectorAll('.btn-group .btn').length).toBe(2);
       expect(resolveButton.textContent).toContain('Resolve conflicts');
       expect(resolveButton.getAttribute('href')).toEqual(path);
+      expect(mergeButton.textContent).toContain('Merge');
       expect(mergeLocallyButton.textContent).toContain('Merge locally');
     });
@@ -59,8 +60,8 @@ describe('MRWidgetConflicts', () => {
       it('should not have action buttons', (done) => {
         Vue.nextTick(() => {
           expect(vm.$el.querySelectorAll('.btn').length).toBe(1);
-          expect(vm.$el.querySelector('a.js-resolve-conflicts-button')).toEqual(null);
-          expect(vm.$el.querySelector('a.js-merge-locally-button')).toEqual(null);
+          expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toEqual(null);
+          expect(vm.$el.querySelector('.js-merge-locally-button')).toEqual(null);
           done();
         });
       });

spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js

@@ -94,7 +94,7 @@ describe('MRWidgetFailedToMerge', () => {
       expect(el.querySelector('button').innerText).toContain('Merge');
       expect(el.querySelector('.js-refresh-button').innerText).toContain('Refresh now');
       expect(el.querySelector('.js-refresh-label')).toEqual(null);
-      expect(el.innerText).not.toContain('Refreshing now...');
+      expect(el.innerText).not.toContain('Refreshing now');
       setTimeout(() => {
         expect(el.innerText).toContain('Refreshing in 9 seconds');
         done();
@@ -115,7 +115,7 @@ describe('MRWidgetFailedToMerge', () => {
       vm.refresh();
       Vue.nextTick(() => {
         expect(el.innerText).not.toContain('Merge failed. Refreshing');
-        expect(el.innerText).toContain('Refreshing now...');
+        expect(el.innerText).toContain('Refreshing now');
       });
     });
   });

spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js

@@ -162,10 +162,10 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
     it('should have correct elements', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds.');
+      expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds');
       expect(el.innerText).toContain('The changes will be merged into');
       expect(el.innerText).toContain(targetBranch);
-      expect(el.innerText).toContain('The source branch will not be removed.');
+      expect(el.innerText).toContain('The source branch will not be removed');
       expect(el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge');
       expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy();
       expect(el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch');
@@ -186,8 +186,8 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
       Vue.nextTick(() => {
         const normalizedText = el.innerText.replace(/\s+/g, ' ');
-        expect(normalizedText).toContain('The source branch will be removed.');
-        expect(normalizedText).not.toContain('The source branch will not be removed.');
+        expect(normalizedText).toContain('The source branch will be removed');
+        expect(normalizedText).not.toContain('The source branch will not be removed');
         done();
       });
     });

spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js

@@ -142,19 +142,19 @@ describe('MRWidgetMerged', () => {
       expect(el.querySelector('.js-mr-widget-author')).toBeDefined();
       expect(el.innerText).toContain('The changes were merged into');
       expect(el.innerText).toContain(targetBranch);
-      expect(el.innerText).toContain('The source branch has been removed.');
+      expect(el.innerText).toContain('The source branch has been removed');
       expect(el.innerText).toContain('Revert');
       expect(el.innerText).toContain('Cherry-pick');
-      expect(el.innerText).not.toContain('You can remove source branch now.');
-      expect(el.innerText).not.toContain('The source branch is being removed.');
+      expect(el.innerText).not.toContain('You can remove source branch now');
+      expect(el.innerText).not.toContain('The source branch is being removed');
     });
     it('should not show source branch removed text', (done) => {
       vm.mr.sourceBranchRemoved = false;
       Vue.nextTick(() => {
-        expect(el.innerText).toContain('You can remove source branch now.');
-        expect(el.innerText).not.toContain('The source branch has been removed.');
+        expect(el.innerText).toContain('You can remove source branch now');
+        expect(el.innerText).not.toContain('The source branch has been removed');
         done();
       });
     });
@@ -164,9 +164,9 @@ describe('MRWidgetMerged', () => {
       vm.mr.sourceBranchRemoved = false;
       Vue.nextTick(() => {
-        expect(el.innerText).toContain('The source branch is being removed.');
-        expect(el.innerText).not.toContain('You can remove source branch now.');
-        expect(el.innerText).not.toContain('The source branch has been removed.');
+        expect(el.innerText).toContain('The source branch is being removed');
+        expect(el.innerText).not.toContain('You can remove source branch now');
+        expect(el.innerText).not.toContain('The source branch has been removed');
         done();
       });
     });

spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js

@@ -49,7 +49,7 @@ describe('MRWidgetMissingBranch', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(content).toContain('source branch does not exist.');
-      expect(content).toContain('Please restore the source branch or use a different source branch.');
+      expect(content).toContain('Please restore it or use a different source branch');
     });
   });
 });

spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js

@@ -11,7 +11,7 @@ describe('MRWidgetNotAllowed', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(vm.$el.innerText).toContain('Ready to be merged automatically.');
-      expect(vm.$el.innerText).toContain('Ask someone with write access to this repository to merge this request.');
+      expect(vm.$el.innerText).toContain('Ask someone with write access to this repository to merge this request');
     });
   });
 });

spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js

@@ -10,7 +10,7 @@ describe('MRWidgetPipelineBlocked', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed.');
+      expect(vm.$el.innerText).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed');
     });
   });
 });

spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js

@@ -10,7 +10,7 @@ describe('MRWidgetPipelineFailed', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.');
+      expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure');
     });
   });
 });

spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -72,7 +72,7 @@ describe('MRWidgetReadyToMerge', () => {
       const withDesc = 'Include description in commit message';
       const withoutDesc = "Don't include description in commit message";
-      it('should return message wit description', () => {
+      it('should return message with description', () => {
         expect(vm.commitMessageLinkTitle).toEqual(withDesc);
       });

spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js

@@ -10,7 +10,7 @@ describe('MRWidgetSHAMismatch', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging.');
+      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging');
     });
   });
 });

spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js

@@ -78,7 +78,7 @@ describe('MRWidgetWIP', () => {
     it('should have correct elements', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('This merge request is currently Work In Progress and therefore unable to merge');
+      expect(el.innerText).toContain('This is a Work in Progress');
       expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(el.querySelector('button').innerText).toContain('Merge');
       expect(el.querySelector('.js-remove-wip').innerText).toContain('Resolve WIP status');

spec/javascripts/vue_mr_widget/mock_data.js

@@ -30,6 +30,7 @@ export default {
   "merge_user_id": null,
   "merge_when_pipeline_succeeds": false,
   "source_branch": "daaaa",
+  "source_branch_link": "daaaa",
   "source_project_id": 19,
   "target_branch": "master",
   "target_project_id": 19,