change editor when opening file from sidebar

app/assets/stylesheets/pages/repo.scss

@@ -231,7 +231,6 @@
   }
 
   .monaco-diff-editor.vs .diffOverview {
-    margin-top: -1px;
     background-color: $white-light;
     border-left: 1px solid $white-dark;
   }
@@ -239,6 +238,14 @@
   .monaco-diff-editor.vs .diffViewport {
     display: none;
   }
+
+  .monaco-diff-editor .char-insert {
+    background-color: #c7f0d2;
+  }
+
+  .monaco-diff-editor .char-delete {
+    background-color: #fac5cd;
+  }
 }
 
 .multi-file-editor-holder {

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

@@ -16,6 +16,7 @@ export default {
       'rightPanelCollapsed',
       'panelResizing',
       'viewer',
+      'delayViewerUpdated',
     ]),
     shouldHideEditor() {
       return this.activeFile && this.activeFile.binary && !this.activeFile.raw;
@@ -63,6 +64,8 @@ export default {
       'setFileLanguage',
       'setEditorPosition',
       'setFileEOL',
+      'updateViewer',
+      'updateDelayViewerUpdated',
     ]),
     initMonaco() {
       if (this.shouldHideEditor) return;
@@ -70,7 +73,15 @@ export default {
       this.editor.clearEditor();
 
       this.getRawFileData(this.activeFile)
-        .then(() => this.createEditorInstance())
+        .then(() => {
+          const viewerPromise = this.delayViewerUpdated ? this.updateViewer('editor') : Promise.resolve();
+
+          return viewerPromise;
+        })
+        .then(() => {
+          this.updateDelayViewerUpdated(false);
+          this.createEditorInstance();
+        })
         .catch((err) => {
           flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true);
           throw err;

ee/app/assets/javascripts/ide/components/repo_file.vue

 <script>
-  import { mapState } from 'vuex';
+  import { mapActions, mapState } from 'vuex';
 
   import timeAgoMixin from '~/vue_shared/mixins/timeago';
   import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
@@ -70,6 +70,9 @@
       }
     },
     methods: {
+      ...mapActions([
+        'updateDelayViewerUpdated',
+      ]),
       clickFile(row) {
         // Manual Action if a tree is selected/opened
         if (this.file.type === 'tree' && this.$router.currentRoute.path === `/project${row.url}`) {
@@ -78,7 +81,13 @@
             tree: this.file,
           });
         }
-        this.$router.push(`/project${row.url}`);
+
+        const delayPromise = this.file.changed ?
+          Promise.resolve() : this.updateDelayViewerUpdated(true);
+
+        return delayPromise.then(() => {
+          this.$router.push(`/project${row.url}`);
+        });
       },
     },
   };

ee/app/assets/javascripts/ide/lib/themes/gl_theme.js

@@ -6,6 +6,8 @@ export default {
     rules: [],
     colors: {
       'editorLineNumber.foreground': '#CCCCCC',
+      'diffEditor.insertedTextBackground': '#ecfdf0',
+      'diffEditor.removedTextBackground': '#fbe9eb',
     },
   },
 };

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

@@ -88,6 +88,10 @@ export const updateViewer = ({ commit }, viewer) => {
   commit(types.UPDATE_VIEWER, viewer);
 };
 
+export const updateDelayViewerUpdated = ({ commit }, delay) => {
+  commit(types.UPDATE_DELAY_VIEWER_CHANGE, delay);
+};
+
 export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/project';

ee/app/assets/javascripts/ide/stores/mutation_types.js

@@ -48,3 +48,4 @@ export const TOGGLE_EDIT_MODE = 'TOGGLE_EDIT_MODE';
 export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH';
 
 export const UPDATE_VIEWER = 'UPDATE_VIEWER';
+export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';

ee/app/assets/javascripts/ide/stores/mutations.js

@@ -62,6 +62,11 @@ export default {
       viewer,
     });
   },
+  [types.UPDATE_DELAY_VIEWER_CHANGE](state, delayViewerUpdated) {
+    Object.assign(state, {
+      delayViewerUpdated,
+    });
+  },
   ...projectMutations,
   ...fileMutations,
   ...treeMutations,

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

@@ -21,4 +21,5 @@ export default () => ({
   rightPanelCollapsed: false,
   panelResizing: false,
   viewer: 'editor',
+  delayViewerUpdated: false,
 });

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

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import store from 'ee/ide/stores';
 import service from 'ee/ide/services';
 import router from 'ee/ide/ide_router';
+import eventHub from 'ee/ide/eventhub';
 import { file, resetStore } from '../../helpers';
 
 describe('Multi-file store file actions', () => {
@@ -457,6 +458,8 @@ describe('Multi-file store file actions', () => {
     let tmpFile;
 
     beforeEach(() => {
+      spyOn(eventHub, '$on');
+
       tmpFile = file();
       tmpFile.content = 'testing';
 

spec/javascripts/ide/stores/modules/commit/actions_spec.js

@@ -401,6 +401,8 @@ describe('IDE commit module actions', () => {
       });
 
       it('redirects to new merge request page', (done) => {
+        spyOn(eventHub, '$on');
+
         store.state.commit.commitAction = '3';
 
         store.dispatch('commit/commitChanges')