updates to component

4 files changed, 72 insertions, 106 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index 7820f7842d8..45321df191c 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -1,41 +1,27 @@
 <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 {
-    components: {
-      RadioGroup,
+export default {
+  components: {
+    RadioGroup,
+  },
+  computed: {
+    ...mapState(['currentBranchId']),
+    commitToCurrentBranchText() {
+      return sprintf(
+        __('Commit to %{branchName} branch'),
+        { branchName: `<strong class="monospace">${this.currentBranchId}</strong>` },
+        false,
+      );
     },
-    computed: {
-      ...mapState([
-        'currentBranchId',
-      ]),
-      newMergeRequestHelpText() {
-        return sprintf(
-          __('Creates a new branch from %{branchName} and re-directs to create a new merge request'),
-          { branchName: this.currentBranchId },
-        );
-      },
-      commitToCurrentBranchText() {
-        return sprintf(
-          __('Commit to %{branchName} branch'),
-          { branchName: `<strong class="monospace">${this.currentBranchId}</strong>` },
-          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,
-  };
+  },
+  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>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
index 7791e059458..d9f436c0261 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -1,14 +1,16 @@
 <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>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index 747805052a5..b660a2961cb 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -1,52 +1,40 @@
 <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 {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
     },
-    props: {
-      value: {
-        type: String,
-        required: true,
-      },
-      label: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      checked: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      showInput: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      helpText: {
-        type: String,
-        required: false,
-        default: null,
-      },
+    label: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      ...mapState('commit', [
-        'commitAction',
-      ]),
-      ...mapGetters('commit', [
-        'newBranchName',
-      ]),
+    checked: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    methods: {
-      ...mapActions('commit', [
-        'updateCommitAction',
-        'updateBranchName',
-      ]),
+    showInput: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  };
+  },
+  computed: {
+    ...mapState('commit', ['commitAction']),
+    ...mapGetters('commit', ['newBranchName']),
+  },
+  methods: {
+    ...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
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
new file mode 100644
index 00000000000..b60d042e0be
--- /dev/null
+++ b/app/assets/javascripts/ide/constants.js
@@ -0,0 +1,3 @@
+// Fuzzy file finder
+export const MAX_TITLE_LENGTH = 50;
+export const MAX_BODY_LENGTH = 72;