styling updates

split out part of commit method

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

@@ -23,12 +23,16 @@
 </script>
 
 <template>
-  <div class="append-bottom-15">
+  <div class="append-bottom-15 ide-commit-radios">
     <radio-group
       :value="COMMIT_TO_CURRENT_BRANCH"
-      :label="`Commit to ${currentBranchId} branch`"
       :checked="true"
-    />
+    >
+      <span
+        v-html="`Commit to <strong>${currentBranchId}</strong> branch`"
+      >
+      </span>
+    </radio-group>
     <radio-group
       :value="COMMIT_TO_NEW_BRANCH"
       label="Create a new branch"

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

@@ -9,7 +9,8 @@
       },
       label: {
         type: String,
-        required: true,
+        required: false,
+        default: null,
       },
       checked: {
         type: Boolean,
@@ -49,10 +50,16 @@
         :checked="checked"
         v-once
       />
-      {{ label }}
+      <span class="prepend-left-10">
+        <template v-if="label">
+          {{ label }}
+        </template>
+        <slot v-else></slot>
+      </span>
     </label>
-    <template
+    <div
       v-if="commitAction === value && showInput"
+      class="prepend-left-20"
     >
       <input
         type="text"
@@ -60,6 +67,6 @@
         :placeholder="newBranchName"
         @input="updateBranchName($event.target.value)"
       />
-    </template>
+    </div>
   </fieldset>
 </template>

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

@@ -90,7 +90,8 @@ export default {
       @submit="forceCreateNewBranch"
     >
       <template slot="body">
-        {{ __(`This branch has changed since you started editing. Would you like to create a new branch?`) }}
+        {{ __(`This branch has changed since you started editing.
+          Would you like to create a new branch?`) }}
       </template>
     </modal>
     <commit-files-list

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

@@ -38,9 +38,48 @@ export const checkCommitStatus = ({ rootState }) =>
     })
     .catch(() => flash('Error checking branch data. Please try again.', 'alert', document, null, false, true));
 
-export const commitChanges = ({
-  commit, state, getters, dispatch, rootState, rootGetters,
-}) => {
+export const updateFilesAfterCommit = (
+  { commit, dispatch, state, rootState, rootGetters },
+  { data, branch },
+) => {
+  const selectedProject = rootState.projects[rootState.currentProjectId];
+  const lastCommit = {
+    commit_path: `${selectedProject.web_url}/commit/${data.id}`,
+    commit: {
+      id: data.id,
+      message: data.message,
+      authored_date: data.committed_date,
+      author_name: data.committer_name,
+    },
+  };
+
+  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 });
+  });
+
+  commit(rootTypes.REMOVE_ALL_CHANGES_FILES, null, { root: true });
+
+  if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH) {
+    const fileUrl = rootGetters.activeFile.url.replace(rootState.currentBranchId, branch);
+
+    router.push(`/project${fileUrl}`);
+  }
+
+  window.scrollTo(0, 0);
+
+  dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH);
+};
+
+export const commitChanges = ({ commit, state, getters, dispatch, rootState }) => {
   const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
   const payload = {
     branch: getters.branchName,
@@ -76,15 +115,6 @@ export const commitChanges = ({
       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,
-      },
-    };
-
     let commitMsg = `Your changes have been committed. Commit ${data.short_id}`;
 
     if (data.stats) {
@@ -94,37 +124,15 @@ export const commitChanges = ({
     commit(rootTypes.SET_LAST_COMMIT_MSG, commitMsg, { root: true });
 
     if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR) {
-      dispatch('discardAllChanges', null, { root: true });
+      const selectedProject = rootState.projects[rootState.currentProjectId];
+
       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 });
-      });
-
-      commit(rootTypes.REMOVE_ALL_CHANGES_FILES, null, { root: true });
-
-      if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH) {
-        const fileUrl = rootGetters.activeFile.url.replace(rootState.currentBranchId, branch);
-
-        router.push(`/project${fileUrl}`);
-      }
-
-      dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH);
-
-      window.scrollTo(0, 0);
+      dispatch('updateFilesAfterCommit', { data, branch });
     }
   })
   .catch((err) => {

app/assets/stylesheets/pages/repo.scss

@@ -630,3 +630,9 @@ table.table tr td.multi-file-table-name {
     left: 0;
   }
 }
+
+.ide-commit-radios {
+  label {
+    font-weight: normal;
+  }
+}