updates to component

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

 <script>
-  import { mapState } from 'vuex';
-  import { sprintf, __ } from '~/locale';
-  import * as consts from '../../stores/modules/commit/constants';
-  import RadioGroup from './radio_group.vue';
+import { mapState } from 'vuex';
+import { sprintf, __ } from '~/locale';
+import * as consts from '../../stores/modules/commit/constants';
+import RadioGroup from './radio_group.vue';
 
-  export default {
+export default {
   components: {
     RadioGroup,
   },
   computed: {
-      ...mapState([
-        'currentBranchId',
-      ]),
-      newMergeRequestHelpText() {
-        return sprintf(
-          __('Creates a new branch from %{branchName} and re-directs to create a new merge request'),
-          { branchName: this.currentBranchId },
-        );
-      },
+    ...mapState(['currentBranchId']),
     commitToCurrentBranchText() {
       return sprintf(
         __('Commit to %{branchName} branch'),
@@ -25,17 +17,11 @@
         false,
       );
     },
-      commitToNewBranchText() {
-        return sprintf(
-          __('Creates a new branch from %{branchName}'),
-          { branchName: this.currentBranchId },
-        );
-      },
   },
   commitToCurrentBranch: consts.COMMIT_TO_CURRENT_BRANCH,
   commitToNewBranch: consts.COMMIT_TO_NEW_BRANCH,
   commitToNewBranchMR: consts.COMMIT_TO_NEW_BRANCH_MR,
-  };
+};
 </script>
 
 <template>
@@ -53,13 +39,11 @@
       :value="$options.commitToNewBranch"
       :label="__('Create a new branch')"
       :show-input="true"
-      :help-text="commitToNewBranchText"
     />
     <radio-group
       :value="$options.commitToNewBranchMR"
       :label="__('Create a new branch and merge request')"
       :show-input="true"
-      :help-text="newMergeRequestHelpText"
     />
   </div>
 </template>

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

 <script>
-import { __ } from '../../../locale';
+import { __, sprintf } from '../../../locale';
+import Icon from '../../../vue_shared/components/icon.vue';
 import popover from '../../../vue_shared/directives/popover';
-
-export const MAX_TITLE_LENGTH = 50;
-export const MAX_BODY_LENGTH = 72;
+import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants';
 
 export default {
   directives: {
     popover,
   },
+  components: {
+    Icon,
+  },
   props: {
     text: {
       type: String,
@@ -45,13 +47,15 @@ export default {
     },
   },
   popoverOptions: {
-    html: true,
     trigger: 'hover',
     placement: 'top',
-    content: __(`
-      The character highligher helps you keep the subject line to 50 characters
-      and wrap the body at 72 so they are readable in git.
+    content: sprintf(
+      __(`
+        The character highligher helps you keep the subject line to %{titleLength} characters
+        and wrap the body at %{bodyLength} so they are readable in git.
       `),
+      { titleLength: MAX_TITLE_LENGTH, bodyLength: MAX_BODY_LENGTH },
+    ),
   },
 };
 </script>
@@ -75,10 +79,9 @@ export default {
               v-popover="$options.popoverOptions"
               class="help-block prepend-left-10"
             >
-              <i
-                aria-hidden="true"
-                class="fa fa-question-circle"
-              ></i>
+              <icon
+                name="question"
+              />
             </span>
           </li>
         </ul>
@@ -99,7 +102,7 @@ export default {
                 v-text="line.substr(0, getLineLength(index)) || ' '"
               >
               </span><mark
-                v-if="line.length > getLineLength(index)"
+                v-show="line.length > getLineLength(index)"
                 v-text="line.substr(getLineLength(index))"
               >
               </mark>

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

 <script>
-  import { mapActions, mapState, mapGetters } from 'vuex';
-  import tooltip from '~/vue_shared/directives/tooltip';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import tooltip from '~/vue_shared/directives/tooltip';
 
-  export default {
+export default {
   directives: {
     tooltip,
   },
@@ -26,27 +26,15 @@
       required: false,
       default: false,
     },
-      helpText: {
-        type: String,
-        required: false,
-        default: null,
-      },
   },
   computed: {
-      ...mapState('commit', [
-        'commitAction',
-      ]),
-      ...mapGetters('commit', [
-        'newBranchName',
-      ]),
+    ...mapState('commit', ['commitAction']),
+    ...mapGetters('commit', ['newBranchName']),
   },
   methods: {
-      ...mapActions('commit', [
-        'updateCommitAction',
-        'updateBranchName',
-      ]),
+    ...mapActions('commit', ['updateCommitAction', 'updateBranchName']),
   },
-  };
+};
 </script>
 
 <template>
@@ -65,18 +53,6 @@
           {{ label }}
         </template>
         <slot v-else></slot>
-        <span
-          v-if="helpText"
-          v-tooltip
-          class="help-block inline"
-          :title="helpText"
-        >
-          <i
-            class="fa fa-question-circle"
-            aria-hidden="true"
-          >
-          </i>
-        </span>
       </span>
     </label>
     <div

app/assets/javascripts/ide/constants.js

+// Fuzzy file finder
+export const MAX_TITLE_LENGTH = 50;
+export const MAX_BODY_LENGTH = 72;

app/assets/stylesheets/pages/repo.scss

@@ -850,7 +850,7 @@
   }
 
   .help-block {
-    margin-top: 0;
+    margin-top: 2px;
     color: $blue-500;
     cursor: pointer;
   }

spec/javascripts/ide/components/commit_sidebar/message_field_spec.js

@@ -75,7 +75,7 @@ describe('IDE commit message field', () => {
             expect(vm.$el.querySelector('.highlights span').textContent).toContain(
               'text less than 50 chars',
             );
-            expect(vm.$el.querySelector('mark')).toBeNull();
+            expect(vm.$el.querySelector('mark').style.display).toBe('none');
           })
           .then(done)
           .catch(done.fail);
@@ -91,7 +91,7 @@ describe('IDE commit message field', () => {
             expect(vm.$el.querySelector('.highlights span').textContent).toContain(
               'text less than 50 chars that should not highlighte',
             );
-            expect(vm.$el.querySelector('mark')).not.toBeNull();
+            expect(vm.$el.querySelector('mark').style.display).not.toBe('none');
             expect(vm.$el.querySelector('mark').textContent).toBe(
               'd. text more than 50 should be highlighted',
             );
@@ -109,7 +109,7 @@ describe('IDE commit message field', () => {
           .$nextTick()
           .then(() => {
             expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-            expect(vm.$el.querySelector('mark')).toBeNull();
+            expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none');
           })
           .then(done)
           .catch(done.fail);
@@ -123,8 +123,8 @@ describe('IDE commit message field', () => {
           .$nextTick()
           .then(() => {
             expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-            expect(vm.$el.querySelector('mark')).not.toBeNull();
-            expect(vm.$el.querySelector('mark').textContent).toBe(' in length');
+            expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none');
+            expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
           })
           .then(done)
           .catch(done.fail);