Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

2 files changed, 48 insertions, 88 deletions

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index c9972f0b43c..2d426ee663a 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -2,19 +2,17 @@
 
 import $ from 'jquery';
 import NewCommitForm from '../new_commit_form';
-import EditBlob from './edit_blob';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
 import { disableButtonIfEmptyField, setCookie } from '~/lib/utils/common_utils';
 import Tracking from '~/tracking';
-import initWebIdeAlert from '~/blob/suggest_web_ide_ci';
 
 export default () => {
   const editBlobForm = $('.js-edit-blob-form');
   const uploadBlobForm = $('.js-upload-blob-form');
   const deleteBlobForm = $('.js-delete-blob-form');
   const suggestEl = document.querySelector('.js-suggest-gitlab-ci-yml');
-  const alertEl = document.getElementById('js-suggest-web-ide-ci');
 
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relativeUrlRoot');
@@ -26,6 +24,18 @@ export default () => {
     const commitButton = $('.js-commit-button');
     const cancelLink = $('.btn.btn-cancel');
 
+    import('./edit_blob')
+      .then(({ default: EditBlob } = {}) => {
+        new EditBlob({
+          assetsPath: `${urlRoot}${assetsPath}`,
+          filePath,
+          currentAction,
+          projectId,
+          isMarkdown,
+        });
+      })
+      .catch(e => createFlash(e));
+
     cancelLink.on('click', () => {
       window.onbeforeunload = null;
     });
@@ -34,13 +44,6 @@ export default () => {
       window.onbeforeunload = null;
     });
 
-    new EditBlob({
-      assetsPath: `${urlRoot}${assetsPath}`,
-      filePath,
-      currentAction,
-      projectId,
-      isMarkdown,
-    });
     new NewCommitForm(editBlobForm);
 
     // returning here blocks page navigation
@@ -85,8 +88,4 @@ export default () => {
       });
     }
   }
-
-  if (alertEl) {
-    initWebIdeAlert(alertEl);
-  }
 };
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 2a4ab4b8827..e6b0a6fc1c5 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -1,91 +1,56 @@
-/* global ace */
-
 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants';
 import TemplateSelectorMediator from '../blob/file_template_mediator';
-import getModeByFileExtension from '~/lib/utils/ace_utils';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
-
-const monacoEnabledGlobally = window.gon.features?.monacoBlobs;
+import EditorLite from '~/editor/editor_lite';
+import FileTemplateExtension from '~/editor/editor_file_template_ext';
 
 export default class EditBlob {
   // The options object has:
   // assetsPath, filePath, currentAction, projectId, isMarkdown
   constructor(options) {
     this.options = options;
-    this.options.monacoEnabled = this.options.monacoEnabled ?? monacoEnabledGlobally;
-    const { isMarkdown, monacoEnabled } = this.options;
-    return Promise.resolve()
-      .then(() => {
-        return monacoEnabled ? this.configureMonacoEditor() : this.configureAceEditor();
-      })
-      .then(() => {
-        this.initModePanesAndLinks();
-        this.initFileSelectors();
-        this.initSoftWrap();
-        if (isMarkdown) {
+    this.configureMonacoEditor();
+
+    if (this.options.isMarkdown) {
+      import('~/editor/editor_markdown_ext')
+        .then(MarkdownExtension => {
+          this.editor.use(MarkdownExtension.default);
           addEditorMarkdownListeners(this.editor);
-        }
-        this.editor.focus();
-      })
-      .catch(() => createFlash(BLOB_EDITOR_ERROR));
+        })
+        .catch(() => createFlash(BLOB_EDITOR_ERROR));
+    }
+
+    this.initModePanesAndLinks();
+    this.initFileSelectors();
+    this.initSoftWrap();
+    this.editor.focus();
   }
 
   configureMonacoEditor() {
-    const EditorPromise = import(
-      /* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite'
-    );
-    const MarkdownExtensionPromise = this.options.isMarkdown
-      ? import('~/editor/editor_markdown_ext')
-      : Promise.resolve(false);
-    const FileTemplateExtensionPromise = import('~/editor/editor_file_template_ext');
-
-    return Promise.all([EditorPromise, MarkdownExtensionPromise, FileTemplateExtensionPromise])
-      .then(([EditorModule, MarkdownExtension, FileTemplateExtension]) => {
-        const EditorLite = EditorModule.default;
-        const editorEl = document.getElementById('editor');
-        const fileNameEl =
-          document.getElementById('file_path') || document.getElementById('file_name');
-        const fileContentEl = document.getElementById('file-content');
-        const form = document.querySelector('.js-edit-blob-form');
-
-        const rootEditor = new EditorLite();
-
-        this.editor = rootEditor.createInstance({
-          el: editorEl,
-          blobPath: fileNameEl.value,
-          blobContent: editorEl.innerText,
-        });
-
-        rootEditor.use([MarkdownExtension.default, FileTemplateExtension.default], this.editor);
-
-        fileNameEl.addEventListener('change', () => {
-          this.editor.updateModelLanguage(fileNameEl.value);
-        });
-
-        form.addEventListener('submit', () => {
-          fileContentEl.value = this.editor.getValue();
-        });
-      })
-      .catch(() => createFlash(BLOB_EDITOR_ERROR));
-  }
+    const editorEl = document.getElementById('editor');
+    const fileNameEl = document.getElementById('file_path') || document.getElementById('file_name');
+    const fileContentEl = document.getElementById('file-content');
+    const form = document.querySelector('.js-edit-blob-form');
 
-  configureAceEditor() {
-    const { filePath, assetsPath } = this.options;
-    ace.config.set('modePath', `${assetsPath}/ace`);
-    ace.config.loadModule('ace/ext/searchbox');
-    ace.config.loadModule('ace/ext/modelist');
+    const rootEditor = new EditorLite();
 
-    this.editor = ace.edit('editor');
+    this.editor = rootEditor.createInstance({
+      el: editorEl,
+      blobPath: fileNameEl.value,
+      blobContent: editorEl.innerText,
+    });
+    this.editor.use(FileTemplateExtension);
 
-    // This prevents warnings re: automatic scrolling being logged
-    this.editor.$blockScrolling = Infinity;
+    fileNameEl.addEventListener('change', () => {
+      this.editor.updateModelLanguage(fileNameEl.value);
+    });
 
-    if (filePath) {
-      this.editor.getSession().setMode(getModeByFileExtension(filePath));
-    }
+    form.addEventListener('submit', () => {
+      fileContentEl.value = this.editor.getValue();
+    });
   }
 
   initFileSelectors() {
@@ -137,7 +102,7 @@ export default class EditBlob {
   }
 
   initSoftWrap() {
-    this.isSoftWrapped = Boolean(this.options.monacoEnabled);
+    this.isSoftWrapped = true;
     this.$toggleButton = $('.soft-wrap-toggle');
     this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
     this.$toggleButton.on('click', () => this.toggleSoftWrap());
@@ -146,10 +111,6 @@ export default class EditBlob {
   toggleSoftWrap() {
     this.isSoftWrapped = !this.isSoftWrapped;
     this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
-    if (this.options.monacoEnabled) {
-      this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' });
-    } else {
-      this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
-    }
+    this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' });
   }
 }