From f4772b37c9fbccb72d1956e308313a8bb1dc8342 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Wed, 4 Jan 2017 15:44:16 -0600
Subject: [PATCH] Change CI template linter textarea with Ace Editor
---
app/assets/javascripts/ci_lint_editor.js.es6 | 18 +++++++++++
app/assets/javascripts/dispatcher.js.es6 | 4 +++
app/assets/stylesheets/pages/lint.scss | 10 ++++++
app/views/ci/lints/show.html.haml | 31 ++++++++++++-------
.../unreleased/didemacet-ci-lint-page.yml | 4 +++
spec/features/ci_lint_spec.rb | 9 ++++--
6 files changed, 61 insertions(+), 15 deletions(-)
create mode 100644 app/assets/javascripts/ci_lint_editor.js.es6
create mode 100644 changelogs/unreleased/didemacet-ci-lint-page.yml
diff --git a/app/assets/javascripts/ci_lint_editor.js.es6 b/app/assets/javascripts/ci_lint_editor.js.es6
new file mode 100644
index 00000000000..56ffaa765a8
--- /dev/null
+++ b/app/assets/javascripts/ci_lint_editor.js.es6
@@ -0,0 +1,18 @@
+(() => {
+ 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;
+})();
diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index 1c1b6cd2dad..3c0dbb761c8 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/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':
diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss
index a7c80dce424..68b6c5ecbd4 100644
--- a/app/assets/stylesheets/pages/lint.scss
+++ b/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;
+ }
+}
diff --git a/app/views/ci/lints/show.html.haml b/app/views/ci/lints/show.html.haml
index 889086c62b1..9af00319afa 100644
--- a/app/views/ci/lints/show.html.haml
+++ b/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
- = form_tag ci_lint_path, method: :post do
- .form-group
- = label_tag(:content, 'Content of .gitlab-ci.yml', class: 'control-label text-nowrap')
+.ci-linter
+ .row
+ = form_tag ci_lint_path, method: :post do
+ .form-group
+ .col-sm-12
+ .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
- = text_area_tag(:content, @content, class: 'form-control span1', rows: 7, require: true)
+ .pull-left.prepend-top-10
+ = submit_tag('Validate', class: 'btn btn-success submit-yml')
+
+ .row.prepend-top-20
.col-sm-12
- .pull-left.prepend-top-10
- = submit_tag('Validate', class: 'btn btn-success submit-yml')
+ .results.ci-template
+ = render partial: 'create' if defined?(@status)
+
-.row.prepend-top-20
- .col-sm-12
- .results
- = render partial: 'create' if defined?(@status)
+- content_for :page_specific_javascripts do
+ = page_specific_javascript_tag('lib/ace.js')
diff --git a/changelogs/unreleased/didemacet-ci-lint-page.yml b/changelogs/unreleased/didemacet-ci-lint-page.yml
new file mode 100644
index 00000000000..07386321c9d
--- /dev/null
+++ b/changelogs/unreleased/didemacet-ci-lint-page.yml
@@ -0,0 +1,4 @@
+---
+title: Change CI template linter textarea with Ace Editor
+merge_request: 8452
+author: Didem Acet
diff --git a/spec/features/ci_lint_spec.rb b/spec/features/ci_lint_spec.rb
index 81077f4b005..3ebc432206a 100644
--- a/spec/features/ci_lint_spec.rb
+++ b/spec/features/ci_lint_spec.rb
@@ -1,6 +1,6 @@
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
--
GitLab