diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2019-06-27 12:42:02 -0500 |
---|---|---|
committer | Paul Slaughter <pslaughter@gitlab.com> | 2019-06-28 10:38:24 -0500 |
commit | 9e185534b7ae983d5dddad6c821770e2c9046d47 (patch) | |
tree | 840405d81ab83e7558951d11e7287663e125e055 | |
parent | 87b468c254e3e1e3b6b1d86e003f1f90a39935a2 (diff) | |
download | gitlab-ce-9e185534b7ae983d5dddad6c821770e2c9046d47.tar.gz |
Fix IDE editor to update dimensions on show change45120-fix-ide-editor-to-update-size-on-show-change
3 files changed, 88 insertions, 14 deletions
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index b0c4969c5e4..f952b1e7b80 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -40,27 +40,36 @@ export default { }, showContentViewer() { return ( - (this.shouldHideEditor || this.file.viewMode === 'preview') && + (this.shouldHideEditor || this.isPreviewViewMode) && (this.viewer !== viewerTypes.mr || !this.file.mrChange) ); }, showDiffViewer() { return this.shouldHideEditor && this.file.mrChange && this.viewer === viewerTypes.mr; }, + isEditorViewMode() { + return this.file.viewMode === 'editor'; + }, + isPreviewViewMode() { + return this.file.viewMode === 'preview'; + }, editTabCSS() { return { - active: this.file.viewMode === 'editor', + active: this.isEditorViewMode, }; }, previewTabCSS() { return { - active: this.file.viewMode === 'preview', + active: this.isPreviewViewMode, }; }, fileType() { const info = viewerInformationForPath(this.file.path); return (info && info.id) || ''; }, + showEditor() { + return !this.shouldHideEditor && this.isEditorViewMode; + }, }, watch: { file(newVal, oldVal) { @@ -89,7 +98,7 @@ export default { } }, rightPanelCollapsed() { - this.editor.updateDimensions(); + this.refreshEditorDimensions(); }, viewer() { if (!this.file.pending) { @@ -98,11 +107,17 @@ export default { }, panelResizing() { if (!this.panelResizing) { - this.editor.updateDimensions(); + this.refreshEditorDimensions(); } }, rightPaneIsOpen() { - this.editor.updateDimensions(); + this.refreshEditorDimensions(); + }, + showEditor(val) { + if (val) { + // We need to wait for the editor to actually be rendered. + this.$nextTick(() => this.refreshEditorDimensions()); + } }, }, beforeDestroy() { @@ -212,6 +227,11 @@ export default { eol: this.model.eol, }); }, + refreshEditorDimensions() { + if (this.showEditor) { + this.editor.updateDimensions(); + } + }, }, viewerTypes, }; @@ -249,7 +269,7 @@ export default { </div> <file-templates-bar v-if="showFileTemplatesBar(file.name)" /> <div - v-show="!shouldHideEditor && file.viewMode === 'editor'" + v-show="showEditor" ref="editor" :class="{ 'is-readonly': isCommitModeActive, diff --git a/changelogs/unreleased/45120-fix-ide-editor-to-update-size-on-show-change.yml b/changelogs/unreleased/45120-fix-ide-editor-to-update-size-on-show-change.yml new file mode 100644 index 00000000000..592612c2615 --- /dev/null +++ b/changelogs/unreleased/45120-fix-ide-editor-to-update-size-on-show-change.yml @@ -0,0 +1,5 @@ +--- +title: Fix IDE editor not showing when switching back from preview +merge_request: 30135 +author: +type: fixed diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js index 002b5a005b8..f832096701f 100644 --- a/spec/javascripts/ide/components/repo_editor_spec.js +++ b/spec/javascripts/ide/components/repo_editor_spec.js @@ -14,7 +14,10 @@ describe('RepoEditor', () => { let vm; beforeEach(done => { - const f = file(); + const f = { + ...file(), + viewMode: 'editor', + }; const RepoEditor = Vue.extend(repoEditor); vm = createComponentWithStore(RepoEditor, store, { @@ -41,12 +44,17 @@ describe('RepoEditor', () => { Editor.editorInstance.dispose(); }); - it('renders an ide container', done => { - Vue.nextTick(() => { - expect(vm.shouldHideEditor).toBeFalsy(); + const findEditor = () => vm.$el.querySelector('.multi-file-editor-holder'); + const changeRightPanelCollapsed = () => { + const { state } = vm.$store; - done(); - }); + state.rightPanelCollapsed = !state.rightPanelCollapsed; + }; + + it('renders an ide container', () => { + expect(vm.shouldHideEditor).toBeFalsy(); + expect(vm.showEditor).toBe(true); + expect(findEditor()).not.toHaveCss({ display: 'none' }); }); it('renders only an edit tab', done => { @@ -283,7 +291,7 @@ describe('RepoEditor', () => { }); it('calls updateDimensions when rightPanelCollapsed is changed', done => { - vm.$store.state.rightPanelCollapsed = true; + changeRightPanelCollapsed(); vm.$nextTick(() => { expect(vm.editor.updateDimensions).toHaveBeenCalled(); @@ -358,6 +366,47 @@ describe('RepoEditor', () => { }); }); + describe('when files view mode is preview', () => { + beforeEach(done => { + spyOn(vm.editor, 'updateDimensions'); + vm.file.viewMode = 'preview'; + vm.$nextTick(done); + }); + + it('should hide editor', () => { + expect(vm.showEditor).toBe(false); + expect(findEditor()).toHaveCss({ display: 'none' }); + }); + + it('should not update dimensions', done => { + changeRightPanelCollapsed(); + + vm.$nextTick() + .then(() => { + expect(vm.editor.updateDimensions).not.toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + describe('when file view mode changes to editor', () => { + beforeEach(done => { + vm.file.viewMode = 'editor'; + + // one tick to trigger watch + vm.$nextTick() + // another tick needed until we can update dimensions + .then(() => vm.$nextTick()) + .then(done) + .catch(done.fail); + }); + + it('should update dimensions', () => { + expect(vm.editor.updateDimensions).toHaveBeenCalled(); + }); + }); + }); + it('calls removePendingTab when old file is pending', done => { spyOnProperty(vm, 'shouldHideEditor').and.returnValue(true); spyOn(vm, 'removePendingTab'); |