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
-  = page_specific_javascript_tag('lib/ace.js')
+- 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")
-          #ci-editor.ci-editor= @content
+          - 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
         .float-left.gl-mt-3

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,89 +3,119 @@
 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});")
+  shared_examples 'correct ci linting process' do
+    describe 'YAML parsing' do
+      shared_examples 'validates the YAML' do
+        before do
+          click_on 'Validate'
+        end
 
-    # Ace editor updates a hidden textarea and it happens asynchronously
-    wait_for('YAML content') do
-      find('.ace_content').text.present?
-    end
-  end
+        context 'YAML is correct' do
+          let(:yaml_content) do
+            File.read(Rails.root.join('spec/support/gitlab_stubs/gitlab_ci.yml'))
+          end
 
-  describe 'YAML parsing' do
-    shared_examples 'validates the YAML' do
-      before do
-        click_on 'Validate'
-      end
+          it 'parses Yaml and displays the jobs' do
+            expect(page).to have_content('Status: syntax is correct')
 
-      context 'YAML is correct' do
-        let(:yaml_content) do
-          File.read(Rails.root.join('spec/support/gitlab_stubs/gitlab_ci.yml'))
+            within "table" do
+              aggregate_failures do
+                expect(page).to have_content('Job - rspec')
+                expect(page).to have_content('Job - spinach')
+                expect(page).to have_content('Deploy Job - staging')
+                expect(page).to have_content('Deploy Job - production')
+              end
+            end
+          end
         end
 
-        it 'parses Yaml and displays the jobs' do
-          expect(page).to have_content('Status: syntax is correct')
+        context 'YAML is incorrect' do
+          let(:yaml_content) { 'value: cannot have :' }
 
-          within "table" do
-            aggregate_failures do
-              expect(page).to have_content('Job - rspec')
-              expect(page).to have_content('Job - spinach')
-              expect(page).to have_content('Deploy Job - staging')
-              expect(page).to have_content('Deploy Job - production')
-            end
+          it 'displays information about an error' do
+            expect(page).to have_content('Status: syntax is incorrect')
+            expect(page).to have_selector(content_selector, text: yaml_content)
           end
         end
       end
 
-      context 'YAML is incorrect' do
-        let(:yaml_content) { 'value: cannot have :' }
+      it_behaves_like 'validates the YAML'
 
-        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)
+      context 'when Dry Run is checked' do
+        before do
+          check 'Simulate a pipeline created for the default branch'
         end
+
+        it_behaves_like 'validates the YAML'
       end
-    end
 
-    it_behaves_like 'validates the YAML'
+      describe 'YAML revalidate' do
+        let(:yaml_content) { 'my yaml content' }
 
-    context 'when Dry Run is checked' do
+        it 'loads previous YAML content after validation' do
+          expect(page).to have_field('content', with: 'my yaml content', visible: false, type: 'textarea')
+        end
+      end
+    end
+
+    describe 'YAML clearing' do
       before do
-        check 'Simulate a pipeline created for the default branch'
+        click_on 'Clear'
       end
 
-      it_behaves_like 'validates the YAML'
+      context 'YAML is present' do
+        let(:yaml_content) do
+          File.read(Rails.root.join('spec/support/gitlab_stubs/gitlab_ci.yml'))
+        end
+
+        it 'YAML content is cleared' do
+          expect(page).to have_field('content', with: '', visible: false, type: 'textarea')
+        end
+      end
     end
+  end
 
-    describe 'YAML revalidate' do
-      let(:yaml_content) { 'my yaml content' }
+  context 'with ACE editor' do
+    it_behaves_like 'correct ci linting process' do
+      let(:content_selector) { '.ace_content' }
 
-      it 'loads previous YAML content after validation' do
-        expect(page).to have_field('content', with: 'my yaml content', visible: false, type: 'textarea')
+      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
 
-  describe 'YAML clearing' do
-    before do
-      click_on 'Clear'
-    end
+  context 'with Editor Lite' do
+    it_behaves_like 'correct ci linting process' do
+      let(:content_selector) { '.content .view-lines' }
 
-    context 'YAML is present' do
-      let(:yaml_content) do
-        File.read(Rails.root.join('spec/support/gitlab_stubs/gitlab_ci.yml'))
-      end
+      before do
+        stub_feature_flags(monaco_ci: true)
+        project.add_developer(user)
+        sign_in(user)
 
-      it 'YAML content is cleared' do
-        expect(page).to have_field('content', with: '', visible: false, type: 'textarea')
+        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

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