updates to template text to be i18n ready

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

@@ -2,6 +2,7 @@
 import tooltip from '~/vue_shared/directives/tooltip';
 import icon from '~/vue_shared/components/icon.vue';
 import { pluralize } from '~/lib/utils/text_utility';
+import { __, sprintf } from '~/locale';
 
 export default {
   components: {
@@ -34,11 +35,17 @@ export default {
       const type = this.file.tempFile ? 'addition' : 'modification';
 
       if (this.file.changed && !this.file.staged) {
-        return `Unstaged ${type}`;
+        return sprintf(__('Unstaged %{type}'), {
+          type,
+        });
       } else if (!this.file.changed && this.file.staged) {
-        return `Staged ${type}`;
+        return sprintf(__('Staged %{type}'), {
+          type,
+        });
       } else if (this.file.changed && this.file.staged) {
-        return `Unstaged and staged ${pluralize(type)}`;
+        return sprintf(__('Unstaged and staged %{type}'), {
+          type: pluralize(type),
+        });
       }
 
       return undefined;

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

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
-import icon from '~/vue_shared/components/icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
-import listItem from './list_item.vue';
-import listCollapsed from './list_collapsed.vue';
+import ListItem from './list_item.vue';
+import ListCollapsed from './list_collapsed.vue';
+import { __, sprintf } from '~/locale';
 
 export default {
   components: {
-    icon,
-    listItem,
-    listCollapsed,
+    Icon,
+    ListItem,
+    ListCollapsed,
   },
   directives: {
     tooltip,
@@ -48,6 +49,11 @@ export default {
   computed: {
     ...mapState(['rightPanelCollapsed']),
     ...mapGetters(['collapseButtonIcon', 'collapseButtonTooltip']),
+    titleText() {
+      return sprintf(__('%{title} changes'), {
+        title: this.title,
+      });
+    },
   },
   methods: {
     ...mapActions(['toggleRightPanelCollapsed', 'stageAllChanges', 'unstageAllChanges']),
@@ -83,7 +89,7 @@ export default {
           :name="icon"
           :size="18"
         />
-        {{ title }} changes
+        {{ titleText }}
         <button
           type="button"
           class="btn btn-blank btn-link ide-staged-action-btn"

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

 <script>
 import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
-import { sprintf, n__ } from '~/locale';
+import { sprintf, n__, __ } from '~/locale';
 
 export default {
   components: {
@@ -38,27 +38,18 @@ export default {
       return this.modifiedFilesLength ? 'multi-file-modified' : '';
     },
     additionsTooltip() {
-      return sprintf(
-        n__(
-          '1 %{type} addition',
-          '%d %{type} additions',
-          this.addedFilesLength,
-        ),
-        { type: this.title.toLowerCase() },
-      );
+      return sprintf(n__('1 %{type} addition', '%d %{type} additions', this.addedFilesLength), {
+        type: this.title.toLowerCase(),
+      });
     },
     modifiedTooltip() {
       return sprintf(
-        n__(
-          '1 %{type} modification',
-          '%d %{type} modifications',
-          this.modifiedFilesLength,
-        ),
+        n__('1 %{type} modification', '%d %{type} modifications', this.modifiedFilesLength),
         { type: this.title.toLowerCase() },
       );
     },
     titleTooltip() {
-      return `${this.title} changes`;
+      return sprintf(__('%{title} changes'), { title: this.title });
     },
   },
 };

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

+import { __ } from '~/locale';
+
 export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
@@ -36,6 +38,6 @@ export const hasChanges = state => !!state.changedFiles.length || !!state.staged
 
 // eslint-disable-next-line no-confusing-arrow
 export const collapseButtonTooltip = state =>
-  state.rightPanelCollapsed ? 'Expand sidebar' : 'Collapse sidebar';
+  state.rightPanelCollapsed ? __('Expand sidebar') : __('Collapse sidebar');
 
 export const hasMergeRequest = state => !!state.currentMergeRequestId;

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

 import * as consts from './constants';
 
+const BRANCH_SUFFIX_COUNT = 5;
+
 export const discardDraftButtonDisabled = state =>
   state.commitMessage === '' || state.submitCommitLoading;
 
@@ -8,7 +10,7 @@ export const commitButtonDisabled = (state, getters, rootState) =>
 
 export const newBranchName = (state, _, rootState) =>
   `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(
-    -5,
+    -BRANCH_SUFFIX_COUNT,
   )}`;
 
 export const branchName = (state, getters, rootState) => {