Added 'clear' button to ci lint editor

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

@@ -2,11 +2,18 @@ export default class CILintEditor {
   constructor() {
     this.editor = window.ace.edit('ci-editor');
     this.textarea = document.querySelector('#content');
+    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));
+  }
+
+  clear() {
+    this.editor.setValue('');
   }
 }

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

@@ -18,6 +18,8 @@
       .col-sm-12
         .pull-left.prepend-top-10
           = submit_tag('Validate', class: 'btn btn-success submit-yml')
+        .pull-right.prepend-top-10
+          = button_tag('Clear', type: 'button', class: 'btn btn-default clear-yml')
 
   .row.prepend-top-20
     .col-sm-12

changelogs/unreleased/feature-26598-clear-button-ci-lint.yml

+---
+title: Added clear button to ci lint editor
+merge_request:
+author: Michael Robinson

spec/features/ci_lint_spec.rb

@@ -3,16 +3,19 @@ require 'spec_helper'
 describe 'CI Lint', :js do
   before do
     sign_in(create(:user))
+
+    visit ci_lint_path
+    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
 
   describe 'YAML parsing' do
     before do
-      visit ci_lint_path
-      # Ace editor updates a hidden textarea and it happens asynchronously
-      # `sleep 0.1` is actually needed here because of this
-      find('#ci-editor')
-      execute_script("ace.edit('ci-editor').setValue(" + yaml_content.to_json + ");")
-      sleep 0.1
       click_on 'Validate'
     end
 
@@ -32,11 +35,10 @@ describe 'CI Lint', :js do
     end
 
     context 'YAML is incorrect' do
-      let(:yaml_content) { '' }
+      let(:yaml_content) { 'value: cannot have :' }
 
       it 'displays information about an error' do
         expect(page).to have_content('Status: syntax is incorrect')
-        expect(page).to have_content('Error: Please provide content of .gitlab-ci.yml')
       end
     end
 
@@ -48,4 +50,20 @@ describe 'CI Lint', :js do
       end
     end
   end
+
+  describe 'YAML clearing' do
+    before do
+      click_on 'Clear'
+    end
+
+    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