Merge branch '198609-removed-monaco_blobs' into 'master'

Removed :monaco_blobs feature flag

See merge request gitlab-org/gitlab!45094

app/assets/javascripts/blob_edit/edit_blob.js

-/* 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' });
   }
 }

app/assets/javascripts/lib/utils/text_markdown.js

@@ -42,9 +42,7 @@ function convertMonacoSelectionToAceFormat(sel) {
 }
 
 function getEditorSelectionRange(editor) {
-  return window.gon.features?.monacoBlobs
-    ? convertMonacoSelectionToAceFormat(editor.getSelection())
-    : editor.getSelectionRange();
+  return convertMonacoSelectionToAceFormat(editor.getSelection());
 }
 
 function editorBlockTagText(text, blockTag, selected, editor) {
@@ -56,9 +54,6 @@ function editorBlockTagText(text, blockTag, selected, editor) {
 
   if (shouldRemoveBlock) {
     if (blockTag !== null) {
-      // ace is globally defined
-      // eslint-disable-next-line no-undef
-      const { Range } = ace.require('ace/range');
       const lastLine = lines[selectionRange.end.row + 1];
       const rangeWithBlockTags = new Range(
         lines[selectionRange.start.row - 1],
@@ -110,12 +105,7 @@ function moveCursor({
       const endPosition = startPosition + select.length;
       return textArea.setSelectionRange(startPosition, endPosition);
     } else if (editor) {
-      if (window.gon.features?.monacoBlobs) {
-        editor.selectWithinSelection(select, tag);
-      } else {
-        editor.navigateLeft(tag.length - tag.indexOf(select));
-        editor.getSelection().selectAWord();
-      }
+      editor.selectWithinSelection(select, tag);
       return;
     }
   }
@@ -139,11 +129,7 @@ function moveCursor({
     }
   } else if (editor && editorSelectionStart.row === editorSelectionEnd.row) {
     if (positionBetweenTags) {
-      if (window.gon.features?.monacoBlobs) {
-        editor.moveCursor(tag.length * -1);
-      } else {
-        editor.navigateLeft(tag.length);
-      }
+      editor.moveCursor(tag.length * -1);
     }
   }
 }
@@ -266,11 +252,7 @@ export function insertMarkdownText({
   }
 
   if (editor) {
-    if (window.gon.features?.monacoBlobs) {
-      editor.replaceSelectedText(textToInsert, select);
-    } else {
-      editor.insert(textToInsert);
-    }
+    editor.replaceSelectedText(textToInsert, select);
   } else {
     insertText(textArea, textToInsert);
   }

config/feature_flags/development/monaco_blobs.yml

----
-name: monaco_blobs
-introduced_by_url:
-rollout_issue_url:
-group: group::editor
-type: development
-default_enabled: true

lib/gitlab/gon_helper.rb

@@ -43,7 +43,6 @@ module Gitlab
 
       # Initialize gon.features with any flags that should be
       # made globally available to the frontend
-      push_frontend_feature_flag(:monaco_blobs, default_enabled: true)
       push_frontend_feature_flag(:webperf_experiment, default_enabled: false)
       push_frontend_feature_flag(:snippets_binary_blob, default_enabled: false)
       push_frontend_feature_flag(:usage_data_api, default_enabled: false)

spec/frontend/blob_edit/edit_blob_spec.js

+import waitForPromises from 'helpers/wait_for_promises';
 import EditBlob from '~/blob_edit/edit_blob';
 import EditorLite from '~/editor/editor_lite';
 import MarkdownExtension from '~/editor/editor_markdown_ext';
@@ -7,7 +8,12 @@ jest.mock('~/editor/editor_lite');
 jest.mock('~/editor/editor_markdown_ext');
 
 describe('Blob Editing', () => {
-  const mockInstance = 'foo';
+  const useMock = jest.fn();
+  const mockInstance = {
+    use: useMock,
+    getValue: jest.fn(),
+    focus: jest.fn(),
+  };
   beforeEach(() => {
     setFixtures(
       `<div class="js-edit-blob-form"><div id="file_path"></div><div id="editor"></div><input id="file-content"></div>`,
@@ -15,36 +21,33 @@ describe('Blob Editing', () => {
     jest.spyOn(EditorLite.prototype, 'createInstance').mockReturnValue(mockInstance);
   });
 
-  const initEditor = (isMarkdown = false) => {
+  const editorInst = isMarkdown => {
     return new EditBlob({
       isMarkdown,
-      monacoEnabled: true,
     });
   };
 
+  const initEditor = async (isMarkdown = false) => {
+    editorInst(isMarkdown);
+    await waitForPromises();
+  };
+
   it('loads FileTemplateExtension by default', async () => {
     await initEditor();
-    expect(EditorLite.prototype.use).toHaveBeenCalledWith(
-      expect.arrayContaining([FileTemplateExtension]),
-      mockInstance,
-    );
+    expect(useMock).toHaveBeenCalledWith(FileTemplateExtension);
   });
 
   describe('Markdown', () => {
     it('does not load MarkdownExtension by default', async () => {
       await initEditor();
-      expect(EditorLite.prototype.use).not.toHaveBeenCalledWith(
-        expect.arrayContaining([MarkdownExtension]),
-        mockInstance,
-      );
+      expect(useMock).not.toHaveBeenCalledWith(MarkdownExtension);
     });
 
     it('loads MarkdownExtension only for the markdown files', async () => {
       await initEditor(true);
-      expect(EditorLite.prototype.use).toHaveBeenCalledWith(
-        [MarkdownExtension, FileTemplateExtension],
-        mockInstance,
-      );
+      expect(useMock).toHaveBeenCalledTimes(2);
+      expect(useMock).toHaveBeenNthCalledWith(1, FileTemplateExtension);
+      expect(useMock).toHaveBeenNthCalledWith(2, MarkdownExtension);
     });
   });
 });

spec/frontend/lib/utils/text_markdown_spec.js

@@ -268,88 +268,10 @@ describe('init markdown', () => {
     });
   });
 
-  describe('Ace Editor', () => {
-    let editor;
-
-    beforeEach(() => {
-      editor = {
-        getSelectionRange: jest.fn().mockReturnValue({
-          start: 0,
-          end: 0,
-        }),
-        getValue: jest.fn().mockReturnValue('this is text \n in two lines'),
-        insert: jest.fn(),
-        navigateLeft: jest.fn(),
-      };
-    });
-
-    it('uses ace editor insert text when editor is passed in', () => {
-      insertMarkdownText({
-        text: editor.getValue,
-        tag: '*',
-        blockTag: null,
-        selected: '',
-        wrap: false,
-        editor,
-      });
-
-      expect(editor.insert).toHaveBeenCalled();
-    });
-
-    it('adds block tags on line above and below selection', () => {
-      const selected = 'this text \n is multiple \n lines';
-      const text = `before \n ${selected} \n after`;
-
-      insertMarkdownText({
-        text,
-        tag: '',
-        blockTag: '***',
-        selected,
-        wrap: true,
-        editor,
-      });
-
-      expect(editor.insert).toHaveBeenCalledWith(`***\n${selected}\n***`);
-    });
-
-    it('uses ace editor to navigate back tag length when nothing is selected', () => {
-      insertMarkdownText({
-        text: editor.getValue,
-        tag: '*',
-        blockTag: null,
-        selected: '',
-        wrap: true,
-        editor,
-      });
-
-      expect(editor.navigateLeft).toHaveBeenCalledWith(1);
-    });
-
-    it('ace editor does not navigate back when there is selected text', () => {
-      insertMarkdownText({
-        text: editor.getValue,
-        tag: '*',
-        blockTag: null,
-        selected: 'foobar',
-        wrap: true,
-        editor,
-      });
-
-      expect(editor.navigateLeft).not.toHaveBeenCalled();
-    });
-  });
-
   describe('Editor Lite', () => {
     let editor;
-    let origGon;
 
     beforeEach(() => {
-      origGon = window.gon;
-      window.gon = {
-        features: {
-          monacoBlobs: true,
-        },
-      };
       editor = {
         getSelection: jest.fn().mockReturnValue({
           startLineNumber: 1,
@@ -364,10 +286,6 @@ describe('init markdown', () => {
       };
     });
 
-    afterEach(() => {
-      window.gon = origGon;
-    });
-
     it('replaces selected text', () => {
       insertMarkdownText({
         text: editor.getValue,