Merge branch '45120-fix-ide-editor-to-update-size-on-show-change' into 'master'

Fix IDE editor to update dimensions on show change Closes #45120 See merge request gitlab-org/gitlab-ce!30135

Merge branch '45120-fix-ide-editor-to-update-size-on-show-change' into 'master'
Fix IDE editor to update dimensions on show change Closes #45120 See merge request gitlab-org/gitlab-ce!30135
d5cf738c · Phil Hughes · 2f4fbca2 · 9e185534 · d5cf738c · d5cf738c
--- 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,

--- 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
+---
+title: Fix IDE editor not showing when switching back from preview
+merge_request: 30135
+author:
+type: fixed
--- 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');