Ace to Editor Lite on CI linting

Replaced the old ACE with the new Editor Lite

app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js

+import createFlash from '~/flash';
+import { BLOB_EDITOR_ERROR } from '~/blob_edit/constants';
+
 export default class CILintEditor {
   constructor() {
-    this.editor = window.ace.edit('ci-editor');
-    this.textarea = document.querySelector('#content');
+    const monacoEnabled = window?.gon?.features?.monacoCi;
     this.clearYml = document.querySelector('.clear-yml');
-
-    this.editor.getSession().setMode('ace/mode/yaml');
-    this.editor.on('input', () => {
-      const content = this.editor.getSession().getValue();
-      this.textarea.value = content;
-    });
-
     this.clearYml.addEventListener('click', this.clear.bind(this));
+
+    return monacoEnabled ? this.initEditorLite() : this.initAce();
   }
 
   clear() {
     this.editor.setValue('');
   }
+
+  initEditorLite() {
+    import(/* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite')
+      .then(({ default: EditorLite }) => {
+        const editorEl = document.getElementById('editor');
+        const fileContentEl = document.getElementById('content');
+        const form = document.querySelector('.js-ci-lint-form');
+
+        const rootEditor = new EditorLite();
+
+        this.editor = rootEditor.createInstance({
+          el: editorEl,
+          blobPath: '.gitlab-ci.yml',
+          blobContent: editorEl.innerText,
+        });
+
+        form.addEventListener('submit', () => {
+          fileContentEl.value = this.editor.getValue();
+        });
+      })
+      .catch(() => createFlash({ message: BLOB_EDITOR_ERROR }));
+  }
+
+  initAce() {
+    this.editor = window.ace.edit('ci-editor');
+    this.textarea = document.getElementById('content');
+
+    this.editor.getSession().setMode('ace/mode/yaml');
+    this.editor.on('input', () => {
+      this.textarea.value = this.editor.getSession().getValue();
+    });
+  }
 }

app/views/projects/ci/lints/show.html.haml

 - page_title _("CI Lint")
 - page_description _("Validate your GitLab CI configuration file")
-- content_for :library_javascripts do
+- unless Feature.enabled?(:monaco_ci)
+  - content_for :library_javascripts do
     = page_specific_javascript_tag('lib/ace.js')
 
 %h2.pt-3.pb-3= _("Validate your GitLab CI configuration")
 
 .project-ci-linter
-  = form_tag project_ci_lint_path(@project), method: :post do
+  = form_tag project_ci_lint_path(@project), method: :post, class: 'js-ci-lint-form' do
     .row
       .col-sm-12
         .file-holder
           .js-file-title.file-title.clearfix
             = _("Contents of .gitlab-ci.yml")
+          - if Feature.enabled?(:monaco_ci)
+            .file-editor.code
+              .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<
+                %pre.editor-loading-content= params[:content]
+          - else
             #ci-editor.ci-editor= @content
         = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
       .col-sm-12

changelogs/unreleased/198606-editor-lite-ci-linting.yml

+---
+title: Replaced ACE with Editor Lite on CI linting view
+merge_request: 41895
+author:
+type: changed

spec/features/projects/ci/lint_spec.rb

@@ -3,23 +3,12 @@
 require 'spec_helper'
 
 RSpec.describe 'CI Lint', :js do
+  include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+
   let(:project) { create(:project, :repository) }
   let(:user) { create(:user) }
 
-  before do
-    project.add_developer(user)
-    sign_in(user)
-
-    visit project_ci_lint_path(project)
-    find('#ci-editor')
-    execute_script("ace.edit('ci-editor').setValue(#{yaml_content.to_json});")
-
-    # Ace editor updates a hidden textarea and it happens asynchronously
-    wait_for('YAML content') do
-      find('.ace_content').text.present?
-    end
-  end
-
+  shared_examples 'correct ci linting process' do
     describe 'YAML parsing' do
       shared_examples 'validates the YAML' do
         before do
@@ -50,7 +39,7 @@ RSpec.describe 'CI Lint', :js do
 
           it 'displays information about an error' do
             expect(page).to have_content('Status: syntax is incorrect')
-          expect(page).to have_selector('.ace_content', text: yaml_content)
+            expect(page).to have_selector(content_selector, text: yaml_content)
           end
         end
       end
@@ -89,4 +78,45 @@ RSpec.describe 'CI Lint', :js do
         end
       end
     end
+  end
+
+  context 'with ACE editor' do
+    it_behaves_like 'correct ci linting process' do
+      let(:content_selector) { '.ace_content' }
+
+      before do
+        stub_feature_flags(monaco_ci: false)
+        project.add_developer(user)
+        sign_in(user)
+
+        visit project_ci_lint_path(project)
+        find('#ci-editor')
+        execute_script("ace.edit('ci-editor').setValue(#{yaml_content.to_json});")
+
+        # Ace editor updates a hidden textarea and it happens asynchronously
+        wait_for('YAML content') do
+          find(content_selector).text.present?
+        end
+      end
+    end
+  end
+
+  context 'with Editor Lite' do
+    it_behaves_like 'correct ci linting process' do
+      let(:content_selector) { '.content .view-lines' }
+
+      before do
+        stub_feature_flags(monaco_ci: true)
+        project.add_developer(user)
+        sign_in(user)
+
+        visit project_ci_lint_path(project)
+        editor_set_value(yaml_content)
+
+        wait_for('YAML content') do
+          find(content_selector).text.present?
+        end
+      end
+    end
+  end
 end

spec/support/helpers/features/editor_lite_spec_helpers.rb

+# frozen_string_literal: true
+
+# These helpers help you interact within the Editor Lite (single-file editor, snippets, etc.).
+#
+module Spec
+  module Support
+    module Helpers
+      module Features
+        module EditorLiteSpecHelpers
+          include ActionView::Helpers::JavaScriptHelper
+
+          def editor_set_value(value)
+            editor = find('.monaco-editor')
+            uri = editor['data-uri']
+
+            execute_script("monaco.editor.getModel('#{uri}').setValue('#{escape_javascript(value)}')")
+          end
+
+          def editor_get_value
+            editor = find('.monaco-editor')
+            uri = editor['data-uri']
+
+            evaluate_script("monaco.editor.getModel('#{uri}').getValue()")
+          end
+        end
+      end
+    end
+  end
+end