correctly commits changes

app/assets/javascripts/ide/components/commit_sidebar/actions.vue

 <script>
-  import { mapActions, mapState, mapGetters } from 'vuex';
+  import { mapState } from 'vuex';
   import * as consts from '../../stores/modules/commit/constants';
+  import RadioGroup from './radio_group.vue';
 
   export default {
+    components: {
+      RadioGroup,
+    },
     data() {
       return {
         COMMIT_TO_CURRENT_BRANCH: consts.COMMIT_TO_CURRENT_BRANCH,
@@ -14,65 +18,26 @@
       ...mapState([
         'currentBranchId',
       ]),
-      ...mapState('commit', [
-        'commitAction',
-      ]),
-      ...mapGetters('commit', [
-        'newBranchName',
-      ]),
-    },
-    methods: {
-      ...mapActions('commit', [
-        'updateCommitAction',
-        'updateBranchName',
-      ]),
     },
   };
 </script>
 
 <template>
-  <div>
-    <fieldset>
-      <label>
-        <input
-          type="radio"
-          name="commit-action"
-          :value="COMMIT_TO_CURRENT_BRANCH"
-          @change="updateCommitAction($event.target.value)"
-          checked
-        />
-        Commit to <strong>{{ currentBranchId }}</strong> branch
-      </label>
-    </fieldset>
-    <fieldset>
-      <label>
-        <input
-          type="radio"
-          name="commit-action"
-          :value="COMMIT_TO_NEW_BRANCH"
-          @change="updateCommitAction($event.target.value)"
-        />
-        Create a new branch
-      </label>
-      <template v-if="commitAction === '2'">
-        <input
-          type="text"
-          class="form-control input-sm"
-          :placeholder="newBranchName"
-          @input="updateBranchName($event.target.value)"
-        />
-      </template>
-    </fieldset>
-    <fieldset>
-      <label>
-        <input
-          type="radio"
-          name="commit-action"
-          :value="COMMIT_TO_NEW_BRANCH_MR"
-          @change="updateCommitAction($event.target.value)"
-        />
-        Create a new branch and merge request
-      </label>
-    </fieldset>
+  <div class="append-bottom-15">
+    <radio-group
+      :value="COMMIT_TO_CURRENT_BRANCH"
+      :label="`Commit to ${currentBranchId} branch`"
+      :checked="true"
+    />
+    <radio-group
+      :value="COMMIT_TO_NEW_BRANCH"
+      label="Create a new branch"
+      :show-input="true"
+    />
+    <radio-group
+      :value="COMMIT_TO_NEW_BRANCH_MR"
+      label="Create a new branch and merge request"
+      :show-input="true"
+    />
   </div>
 </template>

app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue

+<script>
+  import { mapActions, mapState, mapGetters } from 'vuex';
+
+  export default {
+    props: {
+      value: {
+        type: String,
+        required: true,
+      },
+      label: {
+        type: String,
+        required: true,
+      },
+      checked: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      showInput: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      ...mapState('commit', [
+        'commitAction',
+      ]),
+      ...mapGetters('commit', [
+        'newBranchName',
+      ]),
+    },
+    methods: {
+      ...mapActions('commit', [
+        'updateCommitAction',
+      ]),
+    },
+  };
+</script>
+
+<template>
+  <fieldset>
+    <label>
+      <input
+        type="radio"
+        name="commit-action"
+        :value="value"
+        @change="updateCommitAction($event.target.value)"
+        :checked="checked"
+        v-once
+      />
+      {{ label }}
+    </label>
+    <template
+      v-if="commitAction === value && showInput"
+    >
+      <input
+        type="text"
+        class="form-control input-sm"
+        :placeholder="newBranchName"
+        @input="updateBranchName($event.target.value)"
+      />
+    </template>
+  </fieldset>
+</template>

app/assets/javascripts/ide/components/repo_commit_section.vue

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
+import * as consts from '../stores/modules/commit/constants';
 import tooltip from '../../vue_shared/directives/tooltip';
 import icon from '../../vue_shared/components/icon.vue';
 import modal from '../../vue_shared/components/modal.vue';
@@ -28,11 +29,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      showNewBranchModal: false,
-    };
-  },
   computed: {
     ...mapState([
       'currentProjectId',
@@ -56,7 +52,6 @@ export default {
   },
   methods: {
     ...mapActions([
-      'checkCommitStatus',
       'getTreeData',
       'setPanelCollapsedStatus',
     ]),
@@ -64,31 +59,18 @@ export default {
       'updateCommitMessage',
       'discardDraft',
       'commitChanges',
+      'updateCommitAction',
     ]),
-    makeCommit() {
-      this.commitChanges();
-    },
-    tryCommit() {
-      this.submitCommitLoading = true;
-
-      this.checkCommitStatus()
-        .then((branchChanged) => {
-          if (branchChanged) {
-            this.showNewBranchModal = true;
-          } else {
-            this.makeCommit();
-          }
-        })
-        .catch(() => {
-          this.submitCommitLoading = false;
-        });
-    },
     toggleCollapsed() {
       this.setPanelCollapsedStatus({
         side: 'right',
         collapsed: !this.rightPanelCollapsed,
       });
     },
+    forceCreateNewBranch() {
+      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH)
+        .then(() => this.commitChanges());
+    },
   },
 };
 </script>
@@ -101,15 +83,16 @@ export default {
     }"
   >
     <modal
-      v-if="showNewBranchModal"
+      id="ide-create-branch-modal"
       :primary-button-label="__('Create new branch')"
-      kind="primary"
+      kind="success"
       :title="__('Branch has changed')"
-      :text="__(`This branch has changed since
-you started editing. Would you like to create a new branch?`)"
-      @cancel="showNewBranchModal = false"
-      @submit="makeCommit(true)"
-    />
+      @submit="forceCreateNewBranch"
+    >
+      <template slot="body">
+        {{ __(`This branch has changed since you started editing. Would you like to create a new branch?`) }}
+      </template>
+    </modal>
     <commit-files-list
       title="Staged"
       :file-list="changedFiles"
@@ -121,7 +104,7 @@ you started editing. Would you like to create a new branch?`)"
     >
       <form
         class="form-horizontal multi-file-commit-form"
-        @submit.prevent.stop="makeCommit"
+        @submit.prevent.stop="commitChanges"
         v-if="!rightPanelCollapsed"
       >
         <div class="multi-file-commit-fieldset">
@@ -141,7 +124,7 @@ you started editing. Would you like to create a new branch?`)"
             :disabled="commitButtonDisabled"
             container-class="btn btn-success btn-sm pull-left"
             :label="__('Commit')"
-            @click="makeCommit"
+            @click="commitChanges"
           />
           <button
             type="button"

app/assets/javascripts/ide/stores/actions.js

@@ -50,22 +50,6 @@ export const setResizingStatus = ({ commit }, resizing) => {
   commit(types.SET_RESIZING_STATUS, resizing);
 };
 
-export const checkCommitStatus = ({ state }) =>
-  service
-    .getBranchData(state.currentProjectId, state.currentBranchId)
-    .then(({ data }) => {
-      const { id } = data.commit;
-      const selectedBranch =
-        state.projects[state.currentProjectId].branches[state.currentBranchId];
-
-      if (selectedBranch.workingReference !== id) {
-        return true;
-      }
-
-      return false;
-    })
-    .catch(() => flash('Error checking branch data. Please try again.', 'alert', document, null, false, true));
-
 export const createTempEntry = (
   { state, dispatch },
   { projectId, branchId, parent, name, type, content = '', base64 = false },

app/assets/javascripts/ide/stores/modules/commit/actions.js

 import * as types from './mutation_types';
+import * as consts from './constants';
 import * as rootTypes from '../../mutation_types';
 import service from '../../../services';
 import flash from '../../../../flash';
@@ -20,7 +21,24 @@ export const updateBranchName = ({ commit }, branchName) => {
   commit(types.UPDATE_NEW_BRANCH_NAME, branchName);
 };
 
+export const checkCommitStatus = ({ rootState }) =>
+  service
+    .getBranchData(rootState.currentProjectId, rootState.currentBranchId)
+    .then(({ data }) => {
+      const { id } = data.commit;
+      const selectedBranch =
+        rootState.projects[rootState.currentProjectId].branches[rootState.currentBranchId];
+
+      if (selectedBranch.workingReference !== id) {
+        return true;
+      }
+
+      return false;
+    })
+    .catch(() => flash('Error checking branch data. Please try again.', 'alert', document, null, false, true));
+
 export const commitChanges = ({ commit, state, getters, dispatch, rootState }) => {
+  const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
   const payload = {
     branch: getters.branchName,
     commit_message: state.commitMessage,
@@ -30,71 +48,78 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState }) =
       content: f.content,
       encoding: f.base64 ? 'base64' : 'text',
     })),
-    start_branch: undefined,
+    start_branch: newBranch ? rootState.currentBranchId : undefined,
   };
+  const getCommitStatus = newBranch ? Promise.resolve(false) : dispatch('checkCommitStatus');
 
   commit(types.UPDATE_LOADING, true);
 
-  console.log(payload);
+  getCommitStatus.then(branchChanged => new Promise((resolve) => {
+    if (branchChanged) {
+      // show the modal with a Bootstrap call
+      $('#ide-create-branch-modal').modal('show');
+    } else {
+      resolve();
+    }
+  }))
+  .then(() => service.commit(rootState.currentProjectId, payload))
+  .then(({ data }) => {
+    const { branch } = payload;
 
-  return;
+    if (!data.short_id) {
+      flash(data.message, 'alert', document, null, false, true);
+      return;
+    }
 
-  service
-    .commit(state.currentProjectId, payload)
-    .then(({ data }) => {
-      const { branch } = payload;
-      if (!data.short_id) {
-        flash(data.message, 'alert', document, null, false, true);
-        return;
-      }
+    const selectedProject = rootState.projects[rootState.currentProjectId];
+    const lastCommit = {
+      commit_path: `${selectedProject.web_url}/commit/${data.id}`,
+      commit: {
+        message: data.message,
+        authored_date: data.committed_date,
+      },
+    };
 
-      const selectedProject = state.projects[state.currentProjectId];
-      const lastCommit = {
-        commit_path: `${selectedProject.web_url}/commit/${data.id}`,
-        commit: {
-          message: data.message,
-          authored_date: data.committed_date,
-        },
-      };
-
-      let commitMsg = `Your changes have been committed. Commit ${data.short_id}`;
-      if (data.stats) {
-        commitMsg += ` with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`;
-      }
-      commit(rootTypes.SET_LAST_COMMIT_MSG, commitMsg, { root: true });
-
-      if (false) {
-        dispatch('discardAllChanges', null, { root: true });
-        dispatch(
-          'redirectToUrl',
-          `${selectedProject.web_url}/merge_requests/new?merge_request[source_branch]=${branch}&merge_request[target_branch]=${rottState.currentBranchId}`,
-          { root: true },
-        );
-      } else {
-        commit(rootTypes.SET_BRANCH_WORKING_REFERENCE, {
-          projectId: state.currentProjectId,
-          branchId: state.currentBranchId,
-          reference: data.id,
-        }, { root: true });
+    let commitMsg = `Your changes have been committed. Commit ${data.short_id}`;
 
-        state.changedFiles.forEach((entry) => {
-          commit(rootTypes.SET_LAST_COMMIT_DATA, {
-            entry,
-            lastCommit,
-          }, { root: true });
-        });
+    if (data.stats) {
+      commitMsg += ` with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`;
+    }
 
-        dispatch('discardAllChanges', null, { root: true });
+    commit(rootTypes.SET_LAST_COMMIT_MSG, commitMsg, { root: true });
 
-        window.scrollTo(0, 0);
-      }
-    })
-    .catch((err) => {
-      let errMsg = 'Error committing changes. Please try again.';
-      if (err.response.data && err.response.data.message) {
-        errMsg += ` (${stripHtml(err.response.data.message)})`;
-      }
-      flash(errMsg, 'alert', document, null, false, true);
-      window.dispatchEvent(new Event('resize'));
-    });
+    if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR) {
+      dispatch('discardAllChanges', null, { root: true });
+      dispatch(
+        'redirectToUrl',
+        `${selectedProject.web_url}/merge_requests/new?merge_request[source_branch]=${branch}&merge_request[target_branch]=${rootState.currentBranchId}`,
+        { root: true },
+      );
+    } else {
+      commit(rootTypes.SET_BRANCH_WORKING_REFERENCE, {
+        projectId: rootState.currentProjectId,
+        branchId: rootState.currentBranchId,
+        reference: data.id,
+      }, { root: true });
+
+      rootState.changedFiles.forEach((entry) => {
+        commit(rootTypes.SET_LAST_COMMIT_DATA, {
+          entry,
+          lastCommit,
+        }, { root: true });
+      });
+
+      dispatch('discardAllChanges', null, { root: true });
+
+      window.scrollTo(0, 0);
+    }
+  })
+  .catch((err) => {
+    let errMsg = 'Error committing changes. Please try again.';
+    if (err.response.data && err.response.data.message) {
+      errMsg += ` (${stripHtml(err.response.data.message)})`;
+    }
+    flash(errMsg, 'alert', document, null, false, true);
+    window.dispatchEvent(new Event('resize'));
+  });
 };