Change CI template linter textarea with Ace Editor

app/assets/javascripts/ci_lint_editor.js.es6

+(() => {
+  window.gl = window.gl || {};
+
+  class CILintEditor {
+    constructor() {
+      this.editor = window.ace.edit('ci-editor');
+      this.textarea = document.querySelector('#content');
+
+      this.editor.getSession().setMode('ace/mode/yaml');
+      this.editor.on('input', () => {
+        const content = this.editor.getSession().getValue();
+        this.textarea.value = content;
+      });
+    }
+  }
+
+  gl.CILintEditor = CILintEditor;
+})();

app/assets/javascripts/dispatcher.js.es6

@@ -275,6 +275,10 @@
         case 'projects:variables:index':
           new gl.ProjectVariables();
           break;
+        case 'ci:lints:create':
+        case 'ci:lints:show':
+          new gl.CILintEditor();
+          break;
       }
       switch (path.first()) {
         case 'admin':

app/assets/stylesheets/pages/lint.scss

@@ -9,3 +9,13 @@
     color: $lint-correct-color;
   }
 }
+
+.ci-linter {
+  .ci-editor {
+    height: 400px;
+  }
+
+  .ci-template pre {
+    white-space: pre-wrap;
+  }
+}

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

@@ -2,19 +2,26 @@
 - page_description "Validate your GitLab CI configuration file"
 
 %h2 Check your .gitlab-ci.yml
-%hr
 
-.row
+.ci-linter
+  .row
     = form_tag ci_lint_path, method: :post do
       .form-group
-      = label_tag(:content, 'Content of .gitlab-ci.yml', class: 'control-label text-nowrap')
         .col-sm-12
-        = text_area_tag(:content, @content, class: 'form-control span1', rows: 7, require: true)
+          .file-holder
+            .file-title.clearfix
+              Content of .gitlab-ci.yml
+            #ci-editor.ci-editor #{@content}
+          = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
       .col-sm-12
         .pull-left.prepend-top-10
           = submit_tag('Validate', class: 'btn btn-success submit-yml')
 
-.row.prepend-top-20
+  .row.prepend-top-20
     .col-sm-12
-    .results
+      .results.ci-template
         = render partial: 'create' if defined?(@status)
+
+
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/ace.js')

changelogs/unreleased/didemacet-ci-lint-page.yml

+---
+title: Change CI template linter textarea with Ace Editor
+merge_request: 8452
+author: Didem Acet

spec/features/ci_lint_spec.rb

 require 'spec_helper'
 
-describe 'CI Lint' do
+describe 'CI Lint', js: true do
   before do
     login_as :user
   end
@@ -8,7 +8,10 @@ describe 'CI Lint' do
   describe 'YAML parsing' do
     before do
       visit ci_lint_path
-      fill_in 'content', with: yaml_content
+      # Ace editor updates a hidden textarea and it happens asynchronously
+      # `sleep 0.1` is actually needed here because of this
+      execute_script("ace.edit('ci-editor').setValue(" + yaml_content.to_json + ");")
+      sleep 0.1
       click_on 'Validate'
     end
 
@@ -40,7 +43,7 @@ describe 'CI Lint' do
       let(:yaml_content) { 'my yaml content' }
 
       it 'loads previous YAML content after validation' do
-        expect(page).to have_field('content', with: 'my yaml content', type: 'textarea')
+        expect(page).to have_field('content', with: 'my yaml content', visible: false, type: 'textarea')
       end
     end
   end