Move fast-forward MR widget states around for CE port

See https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14272

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js

@@ -10,27 +10,40 @@ export default {
   },
   template: `
     <div class="mr-widget-body media">
-      <status-icon status="failed" showDisabledButton />
+      <status-icon
+        ref="statusIcon"
+        status="failed"
+        showDisabledButton />
       <div class="media-body space-children">
-        <span class="bold">
-          There are merge conflicts<span v-if="!mr.canMerge">.</span>
-          <span v-if="!mr.canMerge">
-            Resolve these conflicts or ask someone with write access to this repository to merge it locally
+        <template v-if="mr.ffOnlyEnabled">
+          <span class="bold">
+            Fast-forward merge is not possible.
+            To merge this request, first rebase locally
           </span>
-        </span>
-        <a
-          v-if="mr.canMerge && mr.conflictResolutionPath"
-          :href="mr.conflictResolutionPath"
-          class="btn btn-default btn-xs js-resolve-conflicts-button">
-          Resolve conflicts
-        </a>
-        <a
-          v-if="mr.canMerge"
-          class="btn btn-default btn-xs js-merge-locally-button"
-          data-toggle="modal"
-          href="#modal_merge_info">
-          Merge locally
-        </a>
+        </template>
+        <template v-else>
+          <span class="bold">
+            There are merge conflicts<span v-if="!mr.canMerge">.</span>
+            <span v-if="!mr.canMerge">
+              Resolve these conflicts or ask someone with write access to this repository to merge it locally
+            </span>
+          </span>
+          <a
+            v-if="mr.canMerge && mr.conflictResolutionPath"
+            ref="resolveConflictsButton"
+            :href="mr.conflictResolutionPath"
+            class="btn btn-default btn-xs">
+            Resolve conflicts
+          </a>
+          <a
+            v-if="mr.canMerge"
+            ref="mergeLocallyButton"
+            class="btn btn-default btn-xs"
+            data-toggle="modal"
+            href="#modal_merge_info">
+            Merge locally
+          </a>
+        </template>
       </div>
     </div>
   `,

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -59,6 +59,7 @@ export default class MergeRequestStore {
     this.onlyAllowMergeIfPipelineSucceeds = data.only_allow_merge_if_pipeline_succeeds || false;
     this.mergeWhenPipelineSucceeds = data.merge_when_pipeline_succeeds || false;
     this.mergePath = data.merge_path;
+    this.ffOnlyEnabled = data.ff_only_enabled;
     this.statusPath = data.status_path;
     this.emailPatchesPath = data.email_patches_path;
     this.plainDiffPath = data.plain_diff_path;

ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -28,7 +28,6 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     this.rebaseInProgress = data.rebase_in_progress;
     this.approvalsLeft = !data.approved;
     this.rebasePath = data.rebase_path;
-    this.ffOnlyEnabled = data.ff_only_enabled;
   }
 
   initGeo(data) {

ee/app/views/projects/ee/_merge_request_rebase_settings.html.haml

 - form = local_assigns.fetch(:form)
-- project = local_assigns.fetch(:project)
 
 .radio
-  = label_tag :project_merge_method_ff do
-    = form.radio_button :merge_method, :ff, class: "js-merge-method-radio"
-    %strong Fast-forward merge
+  = label_tag :project_merge_method_rebase_merge do
+    = form.radio_button :merge_method, :rebase_merge, class: "js-merge-method-radio"
+    %strong Merge commit with semi-linear history
     %br
     %span.descr
-      No merge commits are created and all merges are fast-forwarded, which means that merging is only allowed if the branch could be fast-forwarded.
-    - if project.feature_available?(:merge_request_rebase)
-      %br
-      %span.descr
-        When fast-forward merge is not possible, the user is given the option to rebase.
+      A merge commit is created for every merge, but merging is only allowed if fast-forward merge is possible.
+      This way you could make sure that if this merge request would build, after merging to target branch it would also build.
+    %br
+    %span.descr
+      When fast-forward merge is not possible, the user is given the option to rebase.

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

@@ -2,17 +2,16 @@ import Vue from 'vue';
 import conflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts';
 
 const path = '/conflicts';
-const createComponent = () => {
+const createComponent = (customConfig = {}) => {
   const Component = Vue.extend(conflictsComponent);
 
+  const config = Object.assign({
+    mr: {},
+  }, customConfig);
+
   return new Component({
     el: document.createElement('div'),
-    propsData: {
-      mr: {
-        canMerge: true,
-        conflictResolutionPath: path,
-      },
-    },
+    propsData: config,
   });
 };
 
@@ -27,44 +26,78 @@ describe('MRWidgetConflicts', () => {
   });
 
   describe('template', () => {
-    it('should have correct elements', () => {
-      const el = createComponent().$el;
-      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(resolveButton.textContent).toContain('Resolve conflicts');
-      expect(resolveButton.getAttribute('href')).toEqual(path);
-      expect(mergeButton.textContent).toContain('Merge');
-      expect(mergeLocallyButton.textContent).toContain('Merge locally');
+    describe('when allowed to merge', () => {
+      let vm;
+
+      beforeEach(() => {
+        vm = createComponent({
+          mr: {
+            canMerge: true,
+            conflictResolutionPath: path,
+          },
+        });
+      });
+
+      it('should tell you about conflicts without bothering other people', () => {
+        expect(vm.$el.textContent).toContain('There are merge conflicts');
+        expect(vm.$el.textContent).not.toContain('ask someone with write access');
+      });
+
+      it('should allow you to resolve the conflicts', () => {
+        const resolveButton = vm.$refs.resolveConflictsButton;
+
+        expect(resolveButton.textContent).toContain('Resolve conflicts');
+        expect(resolveButton.getAttribute('href')).toEqual(path);
+      });
+
+      it('should have merge buttons', () => {
+        const mergeButton = vm.$refs.statusIcon.$refs.mergeButton;
+        const mergeLocallyButton = vm.$refs.mergeLocallyButton;
+
+        expect(mergeButton.textContent).toContain('Merge');
+        expect(mergeButton.disabled).toBeTruthy();
+        expect(mergeButton.classList.contains('btn-success')).toBeTruthy();
+        expect(mergeLocallyButton.textContent).toContain('Merge locally');
+      });
     });
 
     describe('when user does not have permission to merge', () => {
       let vm;
 
       beforeEach(() => {
-        vm = createComponent();
-        vm.mr.canMerge = false;
+        vm = createComponent({
+          mr: {
+            canMerge: false,
+          },
+        });
       });
 
-      it('should show proper message', (done) => {
-        Vue.nextTick(() => {
-          expect(vm.$el.textContent).toContain('ask someone with write access');
-          done();
-        });
+      it('should show proper message', () => {
+        expect(vm.$el.textContent).toContain('ask someone with write access');
+      });
+
+      it('should not have action buttons', () => {
+        expect(vm.$refs.statusIcon.$refs.mergeButton).toBeDefined();
+        expect(vm.$refs.resolveConflictsButton).toBeUndefined();
+        expect(vm.$refs.mergeLocallyButton).toBeUndefined();
       });
+    });
+
+    describe('when fast-forward merge enabled', () => {
+      let vm;
 
-      it('should not have action buttons', (done) => {
-        Vue.nextTick(() => {
-          expect(vm.$el.querySelectorAll('.btn').length).toBe(1);
-          expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toEqual(null);
-          expect(vm.$el.querySelector('.js-merge-locally-button')).toEqual(null);
-          done();
+      beforeEach(() => {
+        vm = createComponent({
+          mr: {
+            ffOnlyEnabled: true,
+          },
         });
       });
+
+      it('should tell you to rebase locally', () => {
+        expect(vm.$el.textContent).toContain('Fast-forward merge is not possible.');
+        expect(vm.$el.textContent).toContain('To merge this request, first rebase locally');
+      });
     });
   });
 });

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

@@ -169,36 +169,6 @@ 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.querySelector('#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.querySelector('#remove-source-branch-input');
-          expect(checkboxElement.getAttribute('disabled')).toBeNull();
-        });
-      });
-    });
   });
 
   describe('methods', () => {
@@ -419,4 +389,54 @@ 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('should be disabled in the rendered output', () => {
+        const checkboxElement = vm.$el.querySelector('#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.querySelector('#remove-source-branch-input');
+        expect(checkboxElement.getAttribute('disabled')).toBeNull();
+      });
+    });
+  });
+
+  describe('Commit message area', () => {
+    it('when using merge commits, should show "Modify commit message" button', () => {
+      const customVm = createComponent({
+        mr: { ffOnlyEnabled: false },
+      });
+
+      expect(customVm.$refs.fastForwardMessage).toBeUndefined();
+      expect(customVm.$refs.modifyCommitMessageButton).toBeDefined();
+    });
+
+    it('when fast-forward merge is enabled, only show fast-forward message', () => {
+      const customVm = createComponent({
+        mr: { ffOnlyEnabled: true },
+      });
+
+      expect(customVm.$refs.fastForwardMessage).toBeDefined();
+      expect(customVm.$refs.modifyCommitMessageButton).toBeUndefined();
+    });
+  });
 });