create constant for viewer type

i18n

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);
         }
       });
     },

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

 <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>

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>

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>

app/assets/javascripts/ide/constants.js

@@ -12,3 +12,9 @@ export const activityBarViews = {
   commit: 'commit-section',
   review: 'ide-review',
 };
+
+export const viewerTypes = {
+  mr: 'mrdiff',
+  edit: 'editor',
+  diff: 'diff',
+};

app/assets/javascripts/ide/stores/actions/file.js

@@ -5,6 +5,7 @@ import service from '../../services';
 import * as types from '../mutation_types';
 import router from '../../ide_router';
 import { setPageTitle } from '../utils';
+import { viewerTypes } from '../../constants';
 
 export const closeFile = ({ commit, state, dispatch }, file) => {
   const path = file.path;
@@ -23,7 +24,7 @@ export const closeFile = ({ commit, state, dispatch }, file) => {
     const nextFileToOpen = state.openFiles[nextIndexToOpen];
 
     if (nextFileToOpen.pending) {
-      dispatch('updateViewer', 'diff');
+      dispatch('updateViewer', viewerTypes.diff);
       dispatch('openPendingTab', {
         file: nextFileToOpen,
         keyPrefix: nextFileToOpen.staged ? 'staged' : 'unstaged',
@@ -194,7 +195,11 @@ export const unstageChange = ({ commit }, path) => {
 };
 
 export const openPendingTab = ({ commit, getters, dispatch, state }, { file, keyPrefix }) => {
-  if (getters.activeFile && getters.activeFile.path === file.path && state.viewer === 'diff') {
+  if (
+    getters.activeFile &&
+    getters.activeFile.path === file.path &&
+    state.viewer === viewerTypes.diff
+  ) {
     return false;
   }
 

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

-import { activityBarViews } from '../constants';
+import { activityBarViews, viewerTypes } from '../constants';
 
 export default () => ({
   currentProjectId: '',
@@ -18,7 +18,7 @@ export default () => ({
   rightPanelCollapsed: false,
   panelResizing: false,
   entries: {},
-  viewer: 'editor',
+  viewer: viewerTypes.edit,
   delayViewerUpdated: false,
   currentActivityView: activityBarViews.edit,
   unusedSeal: true,