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

Change IDE diff view responsively

Closes #44305

See merge request gitlab-org/gitlab-ce!18049
This commit is contained in:
Filipa Lacerda 2018-04-05 15:23:00 +00:00
commit 0c60e781c0
5 changed files with 115 additions and 40 deletions

View file

@ -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();

View file

@ -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;
}
}

View file

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

View file

@ -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();
});
});
});
});

View file

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