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

Change IDE diff view responsively

Closes #44305

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

3 files changed, 26 insertions, 6 deletions

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 99423362924..8a709b31ea0 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/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();
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 6b4ba30e086..001737d6ee8 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/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;
+  }
 }
diff --git a/app/assets/javascripts/ide/lib/editor_options.js b/app/assets/javascripts/ide/lib/editor_options.js
index a213862f9b3..9f895d49f2e 100644
--- a/app/assets/javascripts/ide/lib/editor_options.js
+++ b/app/assets/javascripts/ide/lib/editor_options.js
@@ -6,7 +6,7 @@ export const defaultEditorOptions = {
   minimap: {
     enabled: false,
   },
-  wordWrap: 'bounded',
+  wordWrap: 'on',
 };
 
 export default [