hide edit/preview tabs in review & commit mode

only make diff mode editable in review mode

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

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

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

+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 () => {};

app/assets/stylesheets/pages/repo.scss

@@ -227,6 +227,17 @@
     display: none;
   }
 
+  .is-readonly,
+  .editor.original {
+    .view-lines {
+      cursor: default;
+    }
+
+    .cursors-layer {
+      display: none;
+    }
+  }
+
   .monaco-diff-editor.vs {
     .editor.modified {
       box-shadow: none;
@@ -285,16 +296,6 @@
     .margin-view-overlays .delete-sign {
       opacity: 0.4;
     }
-
-    .editor.original {
-      .view-lines {
-        cursor: default;
-      }
-
-      .cursors-layer {
-        display: none;
-      }
-    }
   }
 }
 

spec/javascripts/ide/lib/editor_spec.js

@@ -70,12 +70,14 @@ describe('Multi-file editor library', () => {
         minimap: {
           enabled: false,
         },
-        readOnly: false,
+        readOnly: true,
         scrollBeyondLastLine: false,
         quickSuggestions: false,
         occurrencesHighlight: false,
         wordWrap: 'on',
         renderSideBySide: true,
+        renderLineHighlight: 'all',
+        hideCursorInOverviewRuler: false,
       });
     });
   });