Build ci/lint page

- Includes new image from gitlab-svgs
- Updates dependency for svgs

6 files changed, 56 insertions, 43 deletions

diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss
index 68b6c5ecbd4..5da774828d9 100644
--- a/app/assets/stylesheets/pages/lint.scss
+++ b/app/assets/stylesheets/pages/lint.scss
@@ -1,21 +1,16 @@
-.ci-body {
-  .incorrect-syntax {
-    font-size: 18px;
-    color: $lint-incorrect-color;
-  }
-
-  .correct-syntax {
-    font-size: 18px;
-    color: $lint-correct-color;
-  }
+.ci-linter-container {
+  align-items: center;
+  display: flex;
+  height: calc(100vh - #{$header-height + $performance-bar-height});
+  justify-content: center;
+  text-align: center;
 }
 
-.ci-linter {
-  .ci-editor {
-    height: 400px;
-  }
+.ci-linter-inner {
+  width: auto;
+}
 
-  .ci-template pre {
-    white-space: pre-wrap;
-  }
+.ci-linter-description {
+  color: $common-gray-light;
+  width: 500px;
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 584b0579b72..9a770d77685 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -1121,3 +1121,25 @@ pre.light-well {
   padding-top: $gl-padding;
   padding-bottom: 37px;
 }
+
+.project-ci-body {
+  .incorrect-syntax {
+    font-size: 18px;
+    color: $lint-incorrect-color;
+  }
+
+  .correct-syntax {
+    font-size: 18px;
+    color: $lint-correct-color;
+  }
+}
+
+.project-ci-linter {
+  .ci-editor {
+    height: 400px;
+  }
+
+  .ci-template pre {
+    white-space: pre-wrap;
+  }
+}
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
index 259809f3429..96125b549b7 100644
--- a/app/controllers/projects/settings/ci_cd_controller.rb
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -29,12 +29,12 @@ module Projects
         @project_runners = @project.runners.ordered
         @assignable_runners = current_user.ci_authorized_runners
           .assignable_for(project).ordered.page(params[:page]).per(20)
-        @shared_runners = Ci::Runner.shared.active
+        @shared_runners = ::Ci::Runner.shared.active
         @shared_runners_count = @shared_runners.count(:all)
       end
 
       def define_secret_variables
-        @variable = Ci::Variable.new(project: project)
+        @variable = ::Ci::Variable.new(project: project)
           .present(current_user: current_user)
         @variables = project.variables.order_key_asc
           .map { |variable| variable.present(current_user: current_user) }
@@ -42,7 +42,7 @@ module Projects
 
       def define_triggers_variables
         @triggers = @project.triggers
-        @trigger = Ci::Trigger.new
+        @trigger = ::Ci::Trigger.new
       end
 
       def define_badges_variables
diff --git a/app/views/ci/lints/show.html.haml b/app/views/ci/lints/show.html.haml
index 2f8387dc762..ffd44c2af8d 100644
--- a/app/views/ci/lints/show.html.haml
+++ b/app/views/ci/lints/show.html.haml
@@ -1,6 +1,5 @@
-- page_title "CI Lint"
-
-.center
-  = image_tag 'illustrations/feature_moved.svg'
-  %h3 GitLab CI Linter has been moved
-  %p To validate your GitLab CI configurations, go to 'CI/CD → Pipelines' inside your project, and click on the "CI Lint" button.
+.ci-linter-container
+  .ci-linter-inner
+    = image_tag 'illustrations/feature_moved.svg'
+    %h3 GitLab CI Linter has been moved
+    %p.ci-linter-description To validate your GitLab CI configurations, go to 'CI/CD → Pipelines' inside your project, and click on the 'CI Lint' button.
diff --git a/app/views/projects/ci/lints/show.html.haml b/app/views/projects/ci/lints/show.html.haml
index cf2a25ce844..6ca8152183d 100644
--- a/app/views/projects/ci/lints/show.html.haml
+++ b/app/views/projects/ci/lints/show.html.haml
@@ -5,7 +5,7 @@
 
 %h2 Check your .gitlab-ci.yml
 
-.ci-linter
+.project-ci-linter
   .row
     = form_tag project_ci_lint_path(@project), method: :post do
       .form-group
@@ -23,5 +23,5 @@
 
   .row.prepend-top-20
     .col-sm-12
-      .results.ci-template
+      .results.project-ci-template
         = render partial: 'create' if defined?(@status)
diff --git a/spec/views/projects/ci/lints/show.html.haml_spec.rb b/spec/views/projects/ci/lints/show.html.haml_spec.rb
index b50acc54276..2f0cd38c14a 100644
--- a/spec/views/projects/ci/lints/show.html.haml_spec.rb
+++ b/spec/views/projects/ci/lints/show.html.haml_spec.rb
@@ -3,10 +3,9 @@ require 'spec_helper'
 describe 'projects/ci/lints/show' do
   include Devise::Test::ControllerHelpers
   let(:project) { create(:project, :repository) }
+  let(:config_processor) { Gitlab::Ci::YamlProcessor.new(YAML.dump(content)) }
 
   describe 'XSS protection' do
-    let(:config_processor) { Gitlab::Ci::YamlProcessor.new(YAML.dump(content)) }
-
     before do
       assign(:project, project)
       assign(:status, true)
@@ -50,21 +49,19 @@ describe 'projects/ci/lints/show' do
     end
   end
 
-  let(:content) do
-    {
-      build_template: {
-        script: './build.sh',
-        tags: ['dotnet'],
-        only: ['test@dude/repo'],
-        except: ['deploy'],
-        environment: 'testing'
+  context 'when the content is valid' do
+    let(:content) do
+      {
+        build_template: {
+          script: './build.sh',
+          tags: ['dotnet'],
+          only: ['test@dude/repo'],
+          except: ['deploy'],
+          environment: 'testing'
+        }
       }
-    }
-  end
-
-  let(:config_processor) { Gitlab::Ci::YamlProcessor.new(YAML.dump(content)) }
+    end
 
-  context 'when the content is valid' do
     before do
       assign(:project, project)
       assign(:status, true)