Commit 0c60e781 authored by Filipa Lacerda's avatar Filipa Lacerda

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

Change IDE diff view responsively

Closes #44305

See merge request gitlab-org/gitlab-ce!18049
parents 2693edc4 8a043b6b
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
}, },
}, },
computed: { computed: {
...mapState(['leftPanelCollapsed', 'rightPanelCollapsed', 'viewer', 'delayViewerUpdated']), ...mapState(['rightPanelCollapsed', 'viewer', 'delayViewerUpdated', 'panelResizing']),
...mapGetters(['currentMergeRequest']), ...mapGetters(['currentMergeRequest']),
shouldHideEditor() { shouldHideEditor() {
return this.file && this.file.binary && !this.file.raw; return this.file && this.file.binary && !this.file.raw;
...@@ -42,15 +42,17 @@ export default { ...@@ -42,15 +42,17 @@ export default {
this.initMonaco(); this.initMonaco();
} }
}, },
leftPanelCollapsed() {
this.editor.updateDimensions();
},
rightPanelCollapsed() { rightPanelCollapsed() {
this.editor.updateDimensions(); this.editor.updateDimensions();
}, },
viewer() { viewer() {
this.createEditorInstance(); this.createEditorInstance();
}, },
panelResizing() {
if (!this.panelResizing) {
this.editor.updateDimensions();
}
},
}, },
beforeDestroy() { beforeDestroy() {
this.editor.dispose(); this.editor.dispose();
......
...@@ -69,6 +69,7 @@ export default class Editor { ...@@ -69,6 +69,7 @@ export default class Editor {
occurrencesHighlight: false, occurrencesHighlight: false,
renderLineHighlight: 'none', renderLineHighlight: 'none',
hideCursorInOverviewRuler: true, hideCursorInOverviewRuler: true,
renderSideBySide: Editor.renderSideBySide(domElement),
})), })),
); );
...@@ -81,7 +82,7 @@ export default class Editor { ...@@ -81,7 +82,7 @@ export default class Editor {
} }
attachModel(model) { attachModel(model) {
if (this.instance.getEditorType() === 'vs.editor.IDiffEditor') { if (this.isDiffEditorType) {
this.instance.setModel({ this.instance.setModel({
original: model.getOriginalModel(), original: model.getOriginalModel(),
modified: model.getModel(), modified: model.getModel(),
...@@ -153,6 +154,7 @@ export default class Editor { ...@@ -153,6 +154,7 @@ export default class Editor {
updateDimensions() { updateDimensions() {
this.instance.layout(); this.instance.layout();
this.updateDiffView();
} }
setPosition({ lineNumber, column }) { setPosition({ lineNumber, column }) {
...@@ -171,4 +173,20 @@ export default class Editor { ...@@ -171,4 +173,20 @@ export default class Editor {
this.disposable.add(this.instance.onDidChangeCursorPosition(e => cb(this.instance, e))); 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;
}
} }
...@@ -6,7 +6,7 @@ export const defaultEditorOptions = { ...@@ -6,7 +6,7 @@ export const defaultEditorOptions = {
minimap: { minimap: {
enabled: false, enabled: false,
}, },
wordWrap: 'bounded', wordWrap: 'on',
}; };
export default [ export default [
......
...@@ -199,47 +199,49 @@ describe('RepoEditor', () => { ...@@ -199,47 +199,49 @@ describe('RepoEditor', () => {
}); });
}); });
describe('setup editor for merge request viewing', () => { describe('editor updateDimensions', () => {
beforeEach(done => { beforeEach(() => {
// Resetting as the main test setup has already done it spyOn(vm.editor, 'updateDimensions').and.callThrough();
vm.$destroy(); spyOn(vm.editor, 'updateDiffView');
resetStore(vm.$store);
Editor.editorInstance.modelManager.dispose();
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,
}); });
vm.$store.state.openFiles.push(f); it('calls updateDimensions when rightPanelCollapsed is changed', done => {
vm.$store.state.entries[f.path] = f; vm.$store.state.rightPanelCollapsed = true;
vm.$store.state.viewer = 'mrdiff'; vm.$nextTick(() => {
expect(vm.editor.updateDimensions).toHaveBeenCalled();
expect(vm.editor.updateDiffView).toHaveBeenCalled();
vm.monaco = true; done();
});
});
vm.$mount(); it('calls updateDimensions when panelResizing is false', done => {
vm.$store.state.panelResizing = true;
monacoLoader(['vs/editor/editor.main'], () => { vm
setTimeout(done, 0); .$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);
}); });
it('attaches merge request model to editor when merge request diff', () => { it('does not call updateDimensions when panelResizing is true', done => {
spyOn(vm.editor, 'attachMergeRequestModel').and.callThrough(); vm.$store.state.panelResizing = true;
vm.setupEditor(); vm.$nextTick(() => {
expect(vm.editor.updateDimensions).not.toHaveBeenCalled();
expect(vm.editor.updateDiffView).not.toHaveBeenCalled();
expect(vm.editor.attachMergeRequestModel).toHaveBeenCalledWith(vm.model); done();
});
}); });
}); });
}); });
...@@ -76,7 +76,8 @@ describe('Multi-file editor library', () => { ...@@ -76,7 +76,8 @@ describe('Multi-file editor library', () => {
occurrencesHighlight: false, occurrencesHighlight: false,
renderLineHighlight: 'none', renderLineHighlight: 'none',
hideCursorInOverviewRuler: true, hideCursorInOverviewRuler: true,
wordWrap: 'bounded', wordWrap: 'on',
renderSideBySide: true,
}); });
}); });
}); });
...@@ -215,4 +216,56 @@ describe('Multi-file editor library', () => { ...@@ -215,4 +216,56 @@ describe('Multi-file editor library', () => {
expect(instance.decorationsController.dispose).not.toHaveBeenCalled(); 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);
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment