create constant for viewer type

i18n

4 files changed, 25 insertions, 14 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index ad4713c40d5..deabe719e5b 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -3,6 +3,7 @@ import { mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import StageButton from './stage_button.vue';
 import UnstageButton from './unstage_button.vue';
+import { viewerTypes } from '../../constants';
 
 export default {
   components: {
@@ -53,7 +54,7 @@ export default {
         keyPrefix: this.keyPrefix.toLowerCase(),
       }).then(changeViewer => {
         if (changeViewer) {
-          this.updateViewer('diff');
+          this.updateViewer(viewerTypes.diff);
         }
       });
     },
diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index fe90d5be063..b9af4d27145 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -1,5 +1,6 @@
 <script>
 import { __, sprintf } from '~/locale';
+import { viewerTypes } from '../constants';
 
 export default {
   props: {
@@ -24,6 +25,7 @@ export default {
       this.$emit('click', mode);
     },
   },
+  viewerTypes,
 };
 </script>
 
@@ -36,16 +38,16 @@ export default {
       class="btn btn-link"
       data-toggle="dropdown"
     >
-      Edit
+      {{ __('Edit') }}
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
       <ul>
         <li>
           <a
             href="#"
-            @click.prevent="changeMode('mrdiff')"
+            @click.prevent="changeMode($options.viewerTypes.mr)"
             :class="{
-              'is-active': viewer === 'mrdiff',
+              'is-active': viewer === $options.viewerTypes.mr,
             }"
           >
             <strong class="dropdown-menu-inner-title">
@@ -59,9 +61,9 @@ export default {
         <li>
           <a
             href="#"
-            @click.prevent="changeMode('diff')"
+            @click.prevent="changeMode($options.viewerTypes.diff)"
             :class="{
-              'is-active': viewer === 'diff',
+              'is-active': viewer === $options.viewerTypes.diff,
             }"
           >
             <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index cf8a4f4d0e6..0c9ec3b00f0 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -2,6 +2,7 @@
 import { mapGetters, mapState, mapActions } from 'vuex';
 import IdeTreeList from './ide_tree_list.vue';
 import EditorModeDropdown from './editor_mode_dropdown.vue';
+import { viewerTypes } from '../constants';
 
 export default {
   components: {
@@ -11,10 +12,16 @@ export default {
   computed: {
     ...mapGetters(['currentMergeRequest']),
     ...mapState(['viewer']),
+    showLatestChangesText() {
+      return !this.currentMergeRequest || this.viewer === viewerTypes.diff;
+    },
+    showMergeRequestText() {
+      return this.currentMergeRequest && this.viewer === viewerTypes.mr;
+    },
   },
   mounted() {
     this.$nextTick(() => {
-      this.updateViewer(this.currentMergeRequest ? 'mrdiff' : 'diff');
+      this.updateViewer(this.currentMergeRequest ? viewerTypes.mr : viewerTypes.diff);
     });
   },
   methods: {
@@ -42,11 +49,11 @@ export default {
         />
       </div>
       <div class="prepend-top-5 ide-review-sub-header">
-        <template v-if="!currentMergeRequest || viewer === 'diff'">
+        <template v-if="showLatestChangesText">
           {{ __('Latest changes') }}
         </template>
-        <template v-else-if="currentMergeRequest && viewer === 'mrdiff'">
-          Merge request
+        <template v-else-if="showMergeRequestText">
+          {{ __('Merge request') }}
           (<a :href="currentMergeRequest.web_url">!{{ currentMergeRequest.iid }}</a>)
         </template>
       </div>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 8a08f9fc7db..ff7e546fb9c 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -3,7 +3,7 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import flash from '~/flash';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
-import { activityBarViews } from '../constants';
+import { activityBarViews, viewerTypes } from '../constants';
 import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
 import IdeFileButtons from './ide_file_buttons.vue';
@@ -121,7 +121,7 @@ export default {
       this.editor.dispose();
 
       this.$nextTick(() => {
-        if (this.viewer === 'editor') {
+        if (this.viewer === viewerTypes.edit) {
           this.editor.createInstance(this.$refs.editor);
         } else {
           this.editor.createDiffInstance(this.$refs.editor, !this.isReviewModeActive);
@@ -140,7 +140,7 @@ export default {
         this.file.staged && this.file.key.indexOf('unstaged-') === 0 ? head : null,
       );
 
-      if (this.viewer === 'mrdiff') {
+      if (this.viewer === viewerTypes.mr) {
         this.editor.attachMergeRequestModel(this.model);
       } else {
         this.editor.attachModel(this.model);
@@ -181,6 +181,7 @@ export default {
       });
     },
   },
+  viewerTypes,
 };
 </script>
 
@@ -199,7 +200,7 @@ export default {
             href="javascript:void(0);"
             role="button"
             @click.prevent="setFileViewMode({ file, viewMode: 'edit' })">
-            <template v-if="viewer === 'editor'">
+            <template v-if="viewer === $options.viewerTypes.edit">
               {{ __('Edit') }}
             </template>
             <template v-else>