Encapsulate file view modes with constants

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

@@ -4,7 +4,12 @@ import { viewerInformationForPath } from '~/vue_shared/components/content_viewer
 import flash from '~/flash';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
-import { activityBarViews, viewerTypes } from '../constants';
+import {
+  activityBarViews,
+  viewerTypes,
+  FILE_VIEW_MODE_EDITOR,
+  FILE_VIEW_MODE_PREVIEW,
+} from '../constants';
 import Editor from '../lib/editor';
 import ExternalLink from './external_link.vue';
 import FileTemplatesBar from './file_templates/bar.vue';
@@ -49,10 +54,10 @@ export default {
       return this.shouldHideEditor && this.file.mrChange && this.viewer === viewerTypes.mr;
     },
     isEditorViewMode() {
-      return this.file.viewMode === 'editor';
+      return this.file.viewMode === FILE_VIEW_MODE_EDITOR;
     },
     isPreviewViewMode() {
-      return this.file.viewMode === 'preview';
+      return this.file.viewMode === FILE_VIEW_MODE_PREVIEW;
     },
     editTabCSS() {
       return {
@@ -85,7 +90,7 @@ export default {
         if (this.currentActivityView !== activityBarViews.edit) {
           this.setFileViewMode({
             file: this.file,
-            viewMode: 'editor',
+            viewMode: FILE_VIEW_MODE_EDITOR,
           });
         }
       }
@@ -94,7 +99,7 @@ export default {
       if (this.currentActivityView !== activityBarViews.edit) {
         this.setFileViewMode({
           file: this.file,
-          viewMode: 'editor',
+          viewMode: FILE_VIEW_MODE_EDITOR,
         });
       }
     },
@@ -244,6 +249,8 @@ export default {
     },
   },
   viewerTypes,
+  FILE_VIEW_MODE_EDITOR,
+  FILE_VIEW_MODE_PREVIEW,
 };
 </script>
 
@@ -255,7 +262,7 @@ export default {
           <a
             href="javascript:void(0);"
             role="button"
-            @click.prevent="setFileViewMode({ file, viewMode: 'editor' })"
+            @click.prevent="setFileViewMode({ file, viewMode: $options.FILE_VIEW_MODE_EDITOR })"
           >
             <template v-if="viewer === $options.viewerTypes.edit">{{ __('Edit') }}</template>
             <template v-else>{{ __('Review') }}</template>
@@ -265,7 +272,7 @@ export default {
           <a
             href="javascript:void(0);"
             role="button"
-            @click.prevent="setFileViewMode({ file, viewMode: 'preview' })"
+            @click.prevent="setFileViewMode({ file, viewMode: $options.FILE_VIEW_MODE_PREVIEW })"
             >{{ file.previewMode.previewTitle }}</a
           >
         </li>

app/assets/javascripts/ide/constants.js

@@ -4,6 +4,10 @@ export const MAX_WINDOW_HEIGHT_COMPACT = 750;
 export const MAX_TITLE_LENGTH = 50;
 export const MAX_BODY_LENGTH = 72;
 
+// File view modes
+export const FILE_VIEW_MODE_EDITOR = 'editor';
+export const FILE_VIEW_MODE_PREVIEW = 'preview';
+
 export const activityBarViews = {
   edit: 'ide-tree',
   commit: 'commit-section',

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

-import { commitActionTypes } from '../constants';
+import { commitActionTypes, FILE_VIEW_MODE_EDITOR } from '../constants';
 
 export const dataStructure = () => ({
   id: '',
@@ -43,7 +43,7 @@ export const dataStructure = () => ({
   editorColumn: 1,
   fileLanguage: '',
   eol: '',
-  viewMode: 'editor',
+  viewMode: FILE_VIEW_MODE_EDITOR,
   previewMode: null,
   size: 0,
   parentPath: null,

spec/javascripts/ide/components/repo_editor_spec.js

@@ -5,7 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import store from '~/ide/stores';
 import repoEditor from '~/ide/components/repo_editor.vue';
 import Editor from '~/ide/lib/editor';
-import { activityBarViews } from '~/ide/constants';
+import { activityBarViews, FILE_VIEW_MODE_EDITOR, FILE_VIEW_MODE_PREVIEW } from '~/ide/constants';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 import { file, resetStore } from '../helpers';
@@ -16,7 +16,7 @@ describe('RepoEditor', () => {
   beforeEach(done => {
     const f = {
       ...file(),
-      viewMode: 'editor',
+      viewMode: FILE_VIEW_MODE_EDITOR,
     };
     const RepoEditor = Vue.extend(repoEditor);
 
@@ -370,7 +370,7 @@ describe('RepoEditor', () => {
   describe('when files view mode is preview', () => {
     beforeEach(done => {
       spyOn(vm.editor, 'updateDimensions');
-      vm.file.viewMode = 'preview';
+      vm.file.viewMode = FILE_VIEW_MODE_PREVIEW;
       vm.$nextTick(done);
     });
 
@@ -392,7 +392,7 @@ describe('RepoEditor', () => {
 
     describe('when file view mode changes to editor', () => {
       beforeEach(done => {
-        vm.file.viewMode = 'editor';
+        vm.file.viewMode = FILE_VIEW_MODE_EDITOR;
 
         // one tick to trigger watch
         vm.$nextTick()

spec/javascripts/ide/stores/mutations/file_spec.js

 import mutations from '~/ide/stores/mutations/file';
 import state from '~/ide/stores/state';
+import { FILE_VIEW_MODE_PREVIEW } from '~/ide/constants';
 import { file } from '../../helpers';
 
 describe('IDE store file mutations', () => {
@@ -425,10 +426,10 @@ describe('IDE store file mutations', () => {
     it('updates file view mode', () => {
       mutations.SET_FILE_VIEWMODE(localState, {
         file: localFile,
-        viewMode: 'preview',
+        viewMode: FILE_VIEW_MODE_PREVIEW,
       });
 
-      expect(localFile.viewMode).toBe('preview');
+      expect(localFile.viewMode).toBe(FILE_VIEW_MODE_PREVIEW);
     });
   });