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

1 files changed, 27 insertions, 7 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,