Shortcut to create MR in web IDE57482-shortcut-to-create-merge-request-from-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

2 files changed, 23 insertions, 14 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index d360dc42cd3..1824a0f6147 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -1,17 +1,23 @@
 <script>
 import _ from 'underscore';
-import { mapActions, mapState, mapGetters } from 'vuex';
+import { mapActions, mapState, mapGetters, createNamespacedHelpers } from 'vuex';
 import { sprintf, __ } from '~/locale';
-import * as consts from '../../stores/modules/commit/constants';
+import consts from '../../stores/modules/commit/constants';
 import RadioGroup from './radio_group.vue';
 
+const { mapState: mapCommitState, mapGetters: mapCommitGetters } = createNamespacedHelpers(
+  'commit',
+);
+
 export default {
   components: {
     RadioGroup,
   },
   computed: {
     ...mapState(['currentBranchId', 'changedFiles', 'stagedFiles']),
-    ...mapGetters(['currentProject', 'currentBranch']),
+    ...mapCommitState(['commitAction', 'shouldCreateMR', 'shouldDisableNewMrOption']),
+    ...mapGetters(['currentProject', 'currentBranch', 'currentMergeRequest']),
+    ...mapCommitGetters(['shouldDisableNewMrOption']),
     commitToCurrentBranchText() {
       return sprintf(
         __('Commit to %{branchName} branch'),
@@ -32,7 +38,7 @@ export default {
     this.updateSelectedCommitAction();
   },
   methods: {
-    ...mapActions('commit', ['updateCommitAction']),
+    ...mapActions('commit', ['updateCommitAction', 'toggleShouldCreateMR']),
     updateSelectedCommitAction() {
       if (this.currentBranch && !this.currentBranch.can_push) {
         this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH);
@@ -43,7 +49,6 @@ export default {
   },
   commitToCurrentBranch: consts.COMMIT_TO_CURRENT_BRANCH,
   commitToNewBranch: consts.COMMIT_TO_NEW_BRANCH,
-  commitToNewBranchMR: consts.COMMIT_TO_NEW_BRANCH_MR,
   currentBranchPermissionsTooltip: __(
     "This option is disabled as you don't have write permissions for the current branch",
   ),
@@ -64,13 +69,17 @@ export default {
       :label="__('Create a new branch')"
       :show-input="true"
     />
-    <radio-group
-      v-if="currentProject.merge_requests_enabled"
-      :value="$options.commitToNewBranchMR"
-      :label="__('Create a new branch and merge request')"
-      :title="__('This option is disabled while you still have unstaged changes')"
-      :show-input="true"
-      :disabled="disableMergeRequestRadio"
-    />
+    <hr class="my-2" />
+    <label class="mb-0">
+      <input
+        :checked="shouldCreateMR"
+        :disabled="shouldDisableNewMrOption"
+        type="checkbox"
+        @change="toggleShouldCreateMR"
+      />
+      <span class="prepend-left-10" :class="{ 'text-secondary': shouldDisableNewMrOption }">
+        {{ __('Start a new merge request') }}
+      </span>
+    </label>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 8dd88f187d4..99f1d4a573d 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -5,7 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
-import * as consts from '../stores/modules/commit/constants';
+import consts from '../stores/modules/commit/constants';
 import { activityBarViews, stageKeys } from '../constants';
 
 export default {