Add latest changes from gitlab-org/gitlab@master

3 files changed, 36 insertions, 21 deletions

diff --git a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
index 11cc85c659d..e4ad0bf8e76 100644
--- a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
+++ b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
@@ -36,6 +36,8 @@ const setupDomElement = ({ injectToEl = null } = {}) => {
   return previewEl;
 };
 
+let dimResize = false;
+
 export class EditorMarkdownPreviewExtension {
   static get extensionName() {
     return 'EditorMarkdownPreview';
@@ -50,6 +52,7 @@ export class EditorMarkdownPreviewExtension {
       },
       shown: false,
       modelChangeListener: undefined,
+      layoutChangeListener: undefined,
       path: setupOptions.previewMarkdownPath,
       actionShowPreviewCondition: instance.createContextKey('toggleLivePreview', true),
     };
@@ -59,6 +62,14 @@ export class EditorMarkdownPreviewExtension {
     if (instance.toolbar) {
       this.setupToolbar(instance);
     }
+
+    this.preview.layoutChangeListener = instance.onDidLayoutChange(() => {
+      if (instance.markdownPreview?.shown && !dimResize) {
+        const { width } = instance.getLayoutInfo();
+        const newWidth = width * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH;
+        EditorMarkdownPreviewExtension.resizePreviewLayout(instance, newWidth);
+      }
+    });
   }
 
   onBeforeUnuse(instance) {
@@ -70,6 +81,9 @@ export class EditorMarkdownPreviewExtension {
   }
 
   cleanup(instance) {
+    if (this.preview.layoutChangeListener) {
+      this.preview.layoutChangeListener.dispose();
+    }
     if (this.preview.modelChangeListener) {
       this.preview.modelChangeListener.dispose();
     }
@@ -82,6 +96,15 @@ export class EditorMarkdownPreviewExtension {
     this.preview.shown = false;
   }
 
+  static resizePreviewLayout(instance, width) {
+    const { height } = instance.getLayoutInfo();
+    dimResize = true;
+    instance.layout({ width, height });
+    window.requestAnimationFrame(() => {
+      dimResize = false;
+    });
+  }
+
   setupToolbar(instance) {
     this.toolbarButtons = [
       {
@@ -99,11 +122,11 @@ export class EditorMarkdownPreviewExtension {
   }
 
   togglePreviewLayout(instance) {
-    const { width, height } = instance.getLayoutInfo();
+    const { width } = instance.getLayoutInfo();
     const newWidth = this.preview.shown
       ? width / EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH
       : width * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH;
-    instance.layout({ width: newWidth, height });
+    EditorMarkdownPreviewExtension.resizePreviewLayout(instance, newWidth);
   }
 
   togglePreviewPanel(instance) {
diff --git a/app/assets/javascripts/editor/extensions/source_editor_webide_ext.js b/app/assets/javascripts/editor/extensions/source_editor_webide_ext.js
index 4e8c11bac54..6270517b3f3 100644
--- a/app/assets/javascripts/editor/extensions/source_editor_webide_ext.js
+++ b/app/assets/javascripts/editor/extensions/source_editor_webide_ext.js
@@ -7,7 +7,6 @@
  * @property {Object} options The Monaco editor options
  */
 
-import { debounce } from 'lodash';
 import { KeyCode, KeyMod, Range } from 'monaco-editor';
 import { EDITOR_TYPE_DIFF } from '~/editor/constants';
 import Disposable from '~/ide/lib/common/disposable';
@@ -59,13 +58,10 @@ const renderSideBySide = (domElement) => {
   return domElement.offsetWidth >= 700;
 };
 
-const updateInstanceDimensions = (instance) => {
-  instance.layout();
-  if (isDiffEditorType(instance)) {
-    instance.updateOptions({
-      renderSideBySide: renderSideBySide(instance.getDomNode()),
-    });
-  }
+const updateDiffInstanceRendering = (instance) => {
+  instance.updateOptions({
+    renderSideBySide: renderSideBySide(instance.getDomNode()),
+  });
 };
 
 export class EditorWebIdeExtension {
@@ -85,15 +81,14 @@ export class EditorWebIdeExtension {
     this.options = setupOptions.options;
 
     this.disposable = new Disposable();
-    this.debouncedUpdate = debounce(() => {
-      updateInstanceDimensions(instance);
-    }, UPDATE_DIMENSIONS_DELAY);
-
     addActions(instance, setupOptions.store);
-  }
 
-  onUse(instance) {
-    window.addEventListener('resize', this.debouncedUpdate, false);
+    if (isDiffEditorType(instance)) {
+      updateDiffInstanceRendering(instance);
+      instance.getModifiedEditor().onDidLayoutChange(() => {
+        updateDiffInstanceRendering(instance);
+      });
+    }
 
     instance.onDidDispose(() => {
       this.onUnuse();
@@ -101,8 +96,6 @@ export class EditorWebIdeExtension {
   }
 
   onUnuse() {
-    window.removeEventListener('resize', this.debouncedUpdate);
-
     // catch any potential errors with disposing the error
     // this is mainly for tests caused by elements not existing
     try {
@@ -149,7 +142,6 @@ export class EditorWebIdeExtension {
           modified: model.getModel(),
         });
       },
-      updateDimensions: (instance) => updateInstanceDimensions(instance),
       setPos: (instance, { lineNumber, column }) => {
         instance.revealPositionInCenter({
           lineNumber,
diff --git a/app/assets/javascripts/editor/schema/ci.json b/app/assets/javascripts/editor/schema/ci.json
index 2f8719ee6af..0a950cd1057 100644
--- a/app/assets/javascripts/editor/schema/ci.json
+++ b/app/assets/javascripts/editor/schema/ci.json
@@ -912,7 +912,7 @@
         "cache": { "$ref": "#/definitions/cache" },
         "secrets": { "$ref": "#/definitions/secrets" },
         "script": {
-          "description": "Shell scripts executed by the Runner. The only required property of jobs. Be careful with special characters (e.g. `:`, `{`, `}`, `&`) and use single or double quotes to avoid issues.",
+          "markdownDescription": "Shell scripts executed by the Runner. The only required property of jobs. Be careful with special characters (e.g. `:`, `{`, `}`, `&`) and use single or double quotes to avoid issues. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#script)",
           "oneOf": [
             {
               "type": "string",