Merge branch 'ide-diff-inline' into 'master'

Change IDE diff view responsively

Closes #44305

See merge request gitlab-org/gitlab-ce!18049

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

@@ -19,7 +19,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['leftPanelCollapsed', 'rightPanelCollapsed', 'viewer', 'delayViewerUpdated']),
+    ...mapState(['rightPanelCollapsed', 'viewer', 'delayViewerUpdated', 'panelResizing']),
     ...mapGetters(['currentMergeRequest']),
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.raw;
@@ -42,15 +42,17 @@ export default {
         this.initMonaco();
       }
     },
-    leftPanelCollapsed() {
-      this.editor.updateDimensions();
-    },
     rightPanelCollapsed() {
       this.editor.updateDimensions();
     },
     viewer() {
       this.createEditorInstance();
     },
+    panelResizing() {
+      if (!this.panelResizing) {
+        this.editor.updateDimensions();
+      }
+    },
   },
   beforeDestroy() {
     this.editor.dispose();

app/assets/javascripts/ide/lib/editor.js

@@ -69,6 +69,7 @@ export default class Editor {
           occurrencesHighlight: false,
           renderLineHighlight: 'none',
           hideCursorInOverviewRuler: true,
+          renderSideBySide: Editor.renderSideBySide(domElement),
         })),
       );
 
@@ -81,7 +82,7 @@ export default class Editor {
   }
 
   attachModel(model) {
-    if (this.instance.getEditorType() === 'vs.editor.IDiffEditor') {
+    if (this.isDiffEditorType) {
       this.instance.setModel({
         original: model.getOriginalModel(),
         modified: model.getModel(),
@@ -153,6 +154,7 @@ export default class Editor {
 
   updateDimensions() {
     this.instance.layout();
+    this.updateDiffView();
   }
 
   setPosition({ lineNumber, column }) {
@@ -171,4 +173,20 @@ export default class Editor {
 
     this.disposable.add(this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)));
   }
+
+  updateDiffView() {
+    if (!this.isDiffEditorType) return;
+
+    this.instance.updateOptions({
+      renderSideBySide: Editor.renderSideBySide(this.instance.getDomNode()),
+    });
+  }
+
+  get isDiffEditorType() {
+    return this.instance.getEditorType() === 'vs.editor.IDiffEditor';
+  }
+
+  static renderSideBySide(domElement) {
+    return domElement.offsetWidth >= 700;
+  }
 }

app/assets/javascripts/ide/lib/editor_options.js

@@ -6,7 +6,7 @@ export const defaultEditorOptions = {
   minimap: {
     enabled: false,
   },
-  wordWrap: 'bounded',
+  wordWrap: 'on',
 };
 
 export default [

spec/javascripts/ide/components/repo_editor_spec.js

@@ -199,47 +199,49 @@ describe('RepoEditor', () => {
     });
   });
 
-  describe('setup editor for merge request viewing', () => {
-    beforeEach(done => {
-      // Resetting as the main test setup has already done it
-      vm.$destroy();
-      resetStore(vm.$store);
-      Editor.editorInstance.modelManager.dispose();
+  describe('editor updateDimensions', () => {
+    beforeEach(() => {
+      spyOn(vm.editor, 'updateDimensions').and.callThrough();
+      spyOn(vm.editor, 'updateDiffView');
+    });
 
-      const f = {
-        ...file(),
-        active: true,
-        tempFile: true,
-        html: 'testing',
-        mrChange: { diff: 'ABC' },
-        baseRaw: 'testing',
-        content: 'test',
-      };
-      const RepoEditor = Vue.extend(repoEditor);
-      vm = createComponentWithStore(RepoEditor, store, {
-        file: f,
-      });
+    it('calls updateDimensions when rightPanelCollapsed is changed', done => {
+      vm.$store.state.rightPanelCollapsed = true;
 
-      vm.$store.state.openFiles.push(f);
-      vm.$store.state.entries[f.path] = f;
+      vm.$nextTick(() => {
+        expect(vm.editor.updateDimensions).toHaveBeenCalled();
+        expect(vm.editor.updateDiffView).toHaveBeenCalled();
 
-      vm.$store.state.viewer = 'mrdiff';
-
-      vm.monaco = true;
-
-      vm.$mount();
-
-      monacoLoader(['vs/editor/editor.main'], () => {
-        setTimeout(done, 0);
+        done();
       });
     });
 
-    it('attaches merge request model to editor when merge request diff', () => {
-      spyOn(vm.editor, 'attachMergeRequestModel').and.callThrough();
+    it('calls updateDimensions when panelResizing is false', done => {
+      vm.$store.state.panelResizing = true;
 
-      vm.setupEditor();
+      vm
+        .$nextTick()
+        .then(() => {
+          vm.$store.state.panelResizing = false;
+        })
+        .then(vm.$nextTick)
+        .then(() => {
+          expect(vm.editor.updateDimensions).toHaveBeenCalled();
+          expect(vm.editor.updateDiffView).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
 
-      expect(vm.editor.attachMergeRequestModel).toHaveBeenCalledWith(vm.model);
+    it('does not call updateDimensions when panelResizing is true', done => {
+      vm.$store.state.panelResizing = true;
+
+      vm.$nextTick(() => {
+        expect(vm.editor.updateDimensions).not.toHaveBeenCalled();
+        expect(vm.editor.updateDiffView).not.toHaveBeenCalled();
+
+        done();
+      });
     });
   });
 });

spec/javascripts/ide/lib/editor_spec.js

@@ -76,7 +76,8 @@ describe('Multi-file editor library', () => {
         occurrencesHighlight: false,
         renderLineHighlight: 'none',
         hideCursorInOverviewRuler: true,
-        wordWrap: 'bounded',
+        wordWrap: 'on',
+        renderSideBySide: true,
       });
     });
   });
@@ -215,4 +216,56 @@ describe('Multi-file editor library', () => {
       expect(instance.decorationsController.dispose).not.toHaveBeenCalled();
     });
   });
+
+  describe('updateDiffView', () => {
+    describe('edit mode', () => {
+      it('does not update options', () => {
+        instance.createInstance(holder);
+
+        spyOn(instance.instance, 'updateOptions');
+
+        instance.updateDiffView();
+
+        expect(instance.instance.updateOptions).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('diff mode', () => {
+      beforeEach(() => {
+        instance.createDiffInstance(holder);
+
+        spyOn(instance.instance, 'updateOptions').and.callThrough();
+      });
+
+      it('sets renderSideBySide to false if el is less than 700 pixels', () => {
+        spyOnProperty(instance.instance.getDomNode(), 'offsetWidth').and.returnValue(600);
+
+        expect(instance.instance.updateOptions).not.toHaveBeenCalledWith({
+          renderSideBySide: false,
+        });
+      });
+
+      it('sets renderSideBySide to false if el is more than 700 pixels', () => {
+        spyOnProperty(instance.instance.getDomNode(), 'offsetWidth').and.returnValue(800);
+
+        expect(instance.instance.updateOptions).not.toHaveBeenCalledWith({
+          renderSideBySide: true,
+        });
+      });
+    });
+  });
+
+  describe('isDiffEditorType', () => {
+    it('returns true when diff editor', () => {
+      instance.createDiffInstance(holder);
+
+      expect(instance.isDiffEditorType).toBe(true);
+    });
+
+    it('returns false when not diff editor', () => {
+      instance.createInstance(holder);
+
+      expect(instance.isDiffEditorType).toBe(false);
+    });
+  });
 });