Shortcut to create MR in web IDE

Before the user had to choose between committing to a new branch,
committing to a new branch AND creating an MR, or committing to the
current branch regardless of whether or not it already has an MR.

This commit separates the creation of an MR from whether or not they
commit to an existing or new branch

3 files changed, 138 insertions, 28 deletions

diff --git a/spec/javascripts/ide/components/commit_sidebar/actions_spec.js b/spec/javascripts/ide/components/commit_sidebar/actions_spec.js
index 3a5d6c8a90b..23e6a055518 100644
--- a/spec/javascripts/ide/components/commit_sidebar/actions_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/actions_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import store from '~/ide/stores';
+import consts from '~/ide/stores/modules/commit/constants';
 import commitActions from '~/ide/components/commit_sidebar/actions.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { resetStore } from 'spec/ide/helpers';
@@ -7,20 +8,33 @@ import { projectData } from 'spec/ide/mock_data';
 
 describe('IDE commit sidebar actions', () => {
   let vm;
-
-  beforeEach(done => {
+  const createComponent = ({
+    hasMR = false,
+    commitAction = consts.COMMIT_TO_NEW_BRANCH,
+    mergeRequestsEnabled = true,
+    currentBranchId = 'master',
+    shouldCreateMR = false,
+  } = {}) => {
     const Component = Vue.extend(commitActions);
 
     vm = createComponentWithStore(Component, store);
 
-    vm.$store.state.currentBranchId = 'master';
+    vm.$store.state.currentBranchId = currentBranchId;
     vm.$store.state.currentProjectId = 'abcproject';
+    vm.$store.state.commit.commitAction = commitAction;
     Vue.set(vm.$store.state.projects, 'abcproject', { ...projectData });
+    vm.$store.state.projects.abcproject.merge_requests_enabled = mergeRequestsEnabled;
+    vm.$store.state.commit.shouldCreateMR = shouldCreateMR;
 
-    vm.$mount();
+    if (hasMR) {
+      vm.$store.state.currentMergeRequestId = '1';
+      vm.$store.state.projects[store.state.currentProjectId].mergeRequests[
+        store.state.currentMergeRequestId
+      ] = { foo: 'bar' };
+    }
 
-    Vue.nextTick(done);
-  });
+    return vm.$mount();
+  };
 
   afterEach(() => {
     vm.$destroy();
@@ -28,16 +42,20 @@ describe('IDE commit sidebar actions', () => {
     resetStore(vm.$store);
   });
 
-  it('renders 3 groups', () => {
-    expect(vm.$el.querySelectorAll('input[type="radio"]').length).toBe(3);
+  it('renders 2 groups', () => {
+    createComponent();
+
+    expect(vm.$el.querySelectorAll('input[type="radio"]').length).toBe(2);
   });
 
   it('renders current branch text', () => {
+    createComponent();
+
     expect(vm.$el.textContent).toContain('Commit to master branch');
   });
 
   it('hides merge request option when project merge requests are disabled', done => {
-    vm.$store.state.projects.abcproject.merge_requests_enabled = false;
+    createComponent({ mergeRequestsEnabled: false });
 
     vm.$nextTick(() => {
       expect(vm.$el.querySelectorAll('input[type="radio"]').length).toBe(2);
@@ -49,9 +67,53 @@ describe('IDE commit sidebar actions', () => {
 
   describe('commitToCurrentBranchText', () => {
     it('escapes current branch', () => {
-      vm.$store.state.currentBranchId = '<img src="x" />';
+      const injectedSrc = '<img src="x" />';
+      createComponent({ currentBranchId: injectedSrc });
+
+      expect(vm.commitToCurrentBranchText).not.toContain(injectedSrc);
+    });
+  });
+
+  describe('create new MR checkbox', () => {
+    it('disables `createMR` button when an MR already exists and committing to current branch', () => {
+      createComponent({ hasMR: true, commitAction: consts.COMMIT_TO_CURRENT_BRANCH });
+
+      expect(vm.$el.querySelector('input[type="checkbox"]').disabled).toBe(true);
+    });
+
+    it('does not disable checkbox if MR does not exist', () => {
+      createComponent({ hasMR: false });
+
+      expect(vm.$el.querySelector('input[type="checkbox"]').disabled).toBe(false);
+    });
+
+    it('does not disable checkbox when creating a new branch', () => {
+      createComponent({ commitAction: consts.COMMIT_TO_NEW_BRANCH });
+
+      expect(vm.$el.querySelector('input[type="checkbox"]').disabled).toBe(false);
+    });
+
+    it('toggles off new MR when switching back to commit to current branch and MR exists', () => {
+      createComponent({
+        commitAction: consts.COMMIT_TO_NEW_BRANCH,
+        shouldCreateMR: true,
+      });
+      const currentBranchRadio = vm.$el.querySelector(
+        `input[value="${consts.COMMIT_TO_CURRENT_BRANCH}"`,
+      );
+      currentBranchRadio.click();
+
+      vm.$nextTick(() => {
+        expect(vm.$store.state.commit.shouldCreateMR).toBe(false);
+      });
+    });
+
+    it('toggles `shouldCreateMR` when clicking checkbox', () => {
+      createComponent();
+      const el = vm.$el.querySelector('input[type="checkbox"]');
+      el.dispatchEvent(new Event('change'));
 
-      expect(vm.commitToCurrentBranchText).not.toContain('<img src="x" />');
+      expect(vm.$store.state.commit.shouldCreateMR).toBe(true);
     });
   });
 });
diff --git a/spec/javascripts/ide/stores/modules/commit/actions_spec.js b/spec/javascripts/ide/stores/modules/commit/actions_spec.js
index 34d97347438..abc97f3072c 100644
--- a/spec/javascripts/ide/stores/modules/commit/actions_spec.js
+++ b/spec/javascripts/ide/stores/modules/commit/actions_spec.js
@@ -3,7 +3,7 @@ import store from '~/ide/stores';
 import service from '~/ide/services';
 import router from '~/ide/ide_router';
 import eventHub from '~/ide/eventhub';
-import * as consts from '~/ide/stores/modules/commit/constants';
+import consts from '~/ide/stores/modules/commit/constants';
 import { resetStore, file } from 'spec/ide/helpers';
 
 describe('IDE commit module actions', () => {
@@ -389,7 +389,8 @@ describe('IDE commit module actions', () => {
         it('redirects to new merge request page', done => {
           spyOn(eventHub, '$on');
 
-          store.state.commit.commitAction = '3';
+          store.state.commit.commitAction = consts.COMMIT_TO_NEW_BRANCH;
+          store.state.commit.shouldCreateMR = true;
 
           store
             .dispatch('commit/commitChanges')
@@ -405,6 +406,21 @@ describe('IDE commit module actions', () => {
             .catch(done.fail);
         });
 
+        it('does not redirect to new merge request page when shouldCreateMR is not checked', done => {
+          spyOn(eventHub, '$on');
+
+          store.state.commit.commitAction = consts.COMMIT_TO_NEW_BRANCH;
+          store.state.commit.shouldCreateMR = false;
+
+          store
+            .dispatch('commit/commitChanges')
+            .then(() => {
+              expect(visitUrl).not.toHaveBeenCalled();
+              done();
+            })
+            .catch(done.fail);
+        });
+
         it('resets changed files before redirecting', done => {
           spyOn(eventHub, '$on');
 
diff --git a/spec/javascripts/ide/stores/modules/commit/getters_spec.js b/spec/javascripts/ide/stores/modules/commit/getters_spec.js
index 702e78ef773..e00fd7199d7 100644
--- a/spec/javascripts/ide/stores/modules/commit/getters_spec.js
+++ b/spec/javascripts/ide/stores/modules/commit/getters_spec.js
@@ -1,5 +1,5 @@
 import commitState from '~/ide/stores/modules/commit/state';
-import * as consts from '~/ide/stores/modules/commit/constants';
+import consts from '~/ide/stores/modules/commit/constants';
 import * as getters from '~/ide/stores/modules/commit/getters';
 
 describe('IDE commit module getters', () => {
@@ -46,7 +46,7 @@ describe('IDE commit module getters', () => {
       currentBranchId: 'master',
     };
     const localGetters = {
-      placeholderBranchName: 'newBranchName',
+      placeholderBranchName: 'placeholder-branch-name',
     };
 
     beforeEach(() => {
@@ -59,25 +59,28 @@ describe('IDE commit module getters', () => {
       expect(getters.branchName(state, null, rootState)).toBe('master');
     });
 
-    ['COMMIT_TO_NEW_BRANCH', 'COMMIT_TO_NEW_BRANCH_MR'].forEach(type => {
-      describe(type, () => {
-        beforeEach(() => {
-          Object.assign(state, {
-            commitAction: consts[type],
-          });
+    describe('COMMIT_TO_NEW_BRANCH', () => {
+      beforeEach(() => {
+        Object.assign(state, {
+          commitAction: consts.COMMIT_TO_NEW_BRANCH,
         });
+      });
 
-        it('uses newBranchName when not empty', () => {
-          expect(getters.branchName(state, localGetters, rootState)).toBe('state-newBranchName');
+      it('uses newBranchName when not empty', () => {
+        const newBranchName = 'nonempty-branch-name';
+        Object.assign(state, {
+          newBranchName,
         });
 
-        it('uses placeholderBranchName when state newBranchName is empty', () => {
-          Object.assign(state, {
-            newBranchName: '',
-          });
+        expect(getters.branchName(state, localGetters, rootState)).toBe(newBranchName);
+      });
 
-          expect(getters.branchName(state, localGetters, rootState)).toBe('newBranchName');
+      it('uses placeholderBranchName when state newBranchName is empty', () => {
+        Object.assign(state, {
+          newBranchName: '',
         });
+
+        expect(getters.branchName(state, localGetters, rootState)).toBe('placeholder-branch-name');
       });
     });
   });
@@ -141,4 +144,33 @@ describe('IDE commit module getters', () => {
       });
     });
   });
+
+  describe('shouldDisableNewMrOption', () => {
+    it('returns false if commitAction `COMMIT_TO_NEW_BRANCH`', () => {
+      state.commitAction = consts.COMMIT_TO_NEW_BRANCH;
+      const rootState = {
+        currentMergeRequest: { foo: 'bar' },
+      };
+
+      expect(getters.shouldDisableNewMrOption(state, null, null, rootState)).toBeFalsy();
+    });
+
+    it('returns false if there is no current merge request', () => {
+      state.commitAction = consts.COMMIT_TO_CURRENT_BRANCH;
+      const rootState = {
+        currentMergeRequest: null,
+      };
+
+      expect(getters.shouldDisableNewMrOption(state, null, null, rootState)).toBeFalsy();
+    });
+
+    it('returns true an MR exists and commit action is `COMMIT_TO_CURRENT_BRANCH`', () => {
+      state.commitAction = consts.COMMIT_TO_CURRENT_BRANCH;
+      const rootState = {
+        currentMergeRequest: { foo: 'bar' },
+      };
+
+      expect(getters.shouldDisableNewMrOption(state, null, null, rootState)).toBeTruthy();
+    });
+  });
 });