3 files changed, 23 insertions, 4 deletions
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 6b7e0aa001f..2d41f0f118e 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -20,7 +20,12 @@ export default {
   },
   computed: {
     ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing']),
-    ...mapGetters(['currentMergeRequest', 'getStagedFile']),
+    ...mapGetters([
+      'currentMergeRequest',
+      'getStagedFile',
+      'isReviewModeActive',
+      'isCommitModeActive',
+    ]),
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.content;
     },
@@ -102,7 +107,7 @@ export default {
         if (this.viewer === 'editor') {
           this.editor.createInstance(this.$refs.editor);
         } else {
-          this.editor.createDiffInstance(this.$refs.editor);
+          this.editor.createDiffInstance(this.$refs.editor, !this.isReviewModeActive);
         }
 
         this.setupEditor();
@@ -167,7 +172,10 @@ export default {
     id="ide"
     class="blob-viewer-container blob-editor-container"
   >
-    <div class="ide-mode-tabs clearfix">
+    <div
+      v-show="!isReviewModeActive && !isCommitModeActive"
+      class="ide-mode-tabs clearfix"
+    >
       <ul
         class="nav-links pull-left"
         v-if="!shouldHideEditor">
@@ -203,6 +211,9 @@ export default {
       v-show="!shouldHideEditor && file.viewMode === 'edit'"
       ref="editor"
       class="multi-file-editor-holder"
+      :class="{
+        'is-readonly': isCommitModeActive,
+      }"
     >
     </div>
     <content-viewer
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 489c7c1a03a..9c3bb9cc17d 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -61,7 +61,7 @@ export default class Editor {
     }
   }
 
-  createDiffInstance(domElement) {
+  createDiffInstance(domElement, readOnly = true) {
     if (!this.instance) {
       clearDomElement(domElement);
 
@@ -71,6 +71,9 @@ export default class Editor {
           quickSuggestions: false,
           occurrencesHighlight: false,
           renderSideBySide: Editor.renderSideBySide(domElement),
+          readOnly,
+          renderLineHighlight: readOnly ? 'all' : 'none',
+          hideCursorInOverviewRuler: !readOnly,
         })),
       );
 
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index a3a711cf096..0a5371fd5bb 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -1,3 +1,5 @@
+import { activityBarViews } from '../constants';
+
 export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
@@ -52,5 +54,8 @@ export const allBlobs = state =>
 
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
 
+export const isReviewModeActive = state => state.currentActivityView === activityBarViews.review;
+export const isCommitModeActive = state => state.currentActivityView === activityBarViews.commit;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};