added help block

fixed commit section spec

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

@@ -37,11 +37,13 @@
       :value="COMMIT_TO_NEW_BRANCH"
       label="Create a new branch"
       :show-input="true"
+      :help-text="`Creates a new branch from ${currentBranchId}`"
     />
     <radio-group
       :value="COMMIT_TO_NEW_BRANCH_MR"
       label="Create a new branch and merge request"
       :show-input="true"
+      :help-text="`Creates a new branch from ${currentBranchId} and re-directs to create a new merge request`"
     />
   </div>
 </template>

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

 <script>
   import { mapActions, mapState, mapGetters } from 'vuex';
+  import tooltip from '../../../vue_shared/directives/tooltip';
 
   export default {
+    directives: {
+      tooltip,
+    },
     props: {
       value: {
         type: String,
@@ -22,6 +26,11 @@
         required: false,
         default: false,
       },
+      helpText: {
+        type: String,
+        required: false,
+        default: null,
+      }
     },
     computed: {
       ...mapState('commit', [
@@ -55,11 +64,19 @@
           {{ label }}
         </template>
         <slot v-else></slot>
+        <span
+          v-if="helpText"
+          v-tooltip
+          class="help-block inline"
+          :title="helpText"
+        >
+          <i class="fa fa-question-circle"></i>
+        </span>
       </span>
     </label>
     <div
       v-if="commitAction === value && showInput"
-      class="prepend-left-20"
+      class="ide-commit-new-branch"
     >
       <input
         type="text"

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

@@ -110,7 +110,7 @@ export default {
       >
         <div class="multi-file-commit-fieldset">
           <textarea
-            class="form-control multi-file-commit-message"
+            class="form-control input-sm multi-file-commit-message"
             name="commit-message"
             :value="commitMessage"
             placeholder="Write a commit message..."

app/assets/stylesheets/pages/repo.scss

@@ -635,4 +635,13 @@ table.table tr td.multi-file-table-name {
   label {
     font-weight: normal;
   }
+
+  .help-block {
+    margin-top: 0;
+    line-height: 0;
+  }
+}
+
+.ide-commit-new-branch {
+  margin-left: 25px;
 }

spec/javascripts/repo/components/repo_commit_section_spec.js

@@ -116,7 +116,7 @@ describe('RepoCommitSection', () => {
     });
 
     it('resets commitMessage when clicking discard button', (done) => {
-      vm.$store.state.commitMessage = 'testinig commit message';
+      vm.$store.state.commit.commitMessage = 'testing commit message';
 
       getSetTimeoutPromise()
         .then(() => {
@@ -133,14 +133,17 @@ describe('RepoCommitSection', () => {
 
   describe('when submitting', () => {
     beforeEach(() => {
-      vm.$store.state.commitMessage = 'testing';
+      spyOn(vm, 'commitChanges');
     });
 
-    it('calls store', (done) => {
-      spyOn(vm, 'commitChanges');
-      vm.$el.querySelector('.multi-file-commit-form .btn-success').click();
+    it('calls commitChanges', (done) => {
+      vm.$store.state.commit.commitMessage = 'testing commit message';
 
-      Vue.nextTick()
+      getSetTimeoutPromise()
+        .then(() => {
+          vm.$el.querySelector('.multi-file-commit-form .btn-success').click();
+        })
+        .then(Vue.nextTick)
         .then(() => {
           expect(vm.commitChanges).toHaveBeenCalled();
         })

spec/javascripts/repo/helpers.js

@@ -3,10 +3,11 @@ import state from '~/ide/stores/state';
 import commitState from '~/ide/stores/modules/commit/state';
 
 export const resetStore = (store) => {
-  store.replaceState(state());
-  Object.assign(store.state, {
+  const newState = {
+    ...state(),
     commit: commitState(),
-  });
+  };
+  store.replaceState(newState);
 };
 
 export const file = (name = 'name', id = name, type = '') => decorateData({