1 files changed, 43 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue
new file mode 100644
index 00000000000..b2e7b15089c
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue
@@ -0,0 +1,43 @@
+<script>
+import { mapGetters, createNamespacedHelpers } from 'vuex';
+
+const {
+  mapState: mapCommitState,
+  mapGetters: mapCommitGetters,
+  mapActions: mapCommitActions,
+} = createNamespacedHelpers('commit');
+
+export default {
+  computed: {
+    ...mapCommitState(['shouldCreateMR']),
+    ...mapCommitGetters(['isCommittingToCurrentBranch', 'isCommittingToDefaultBranch']),
+    ...mapGetters(['hasMergeRequest', 'isOnDefaultBranch']),
+    currentBranchHasMr() {
+      return this.hasMergeRequest && this.isCommittingToCurrentBranch;
+    },
+    showNewMrOption() {
+      return (
+        this.isCommittingToDefaultBranch || !this.currentBranchHasMr || this.isCommittingToNewBranch
+      );
+    },
+  },
+  mounted() {
+    this.setShouldCreateMR();
+  },
+  methods: {
+    ...mapCommitActions(['toggleShouldCreateMR', 'setShouldCreateMR']),
+  },
+};
+</script>
+
+<template>
+  <div v-if="showNewMrOption">
+    <hr class="my-2" />
+    <label class="mb-0">
+      <input :checked="shouldCreateMR" type="checkbox" @change="toggleShouldCreateMR" />
+      <span class="prepend-left-10">
+        {{ __('Start a new merge request') }}
+      </span>
+    </label>
+  </div>
+</template>