Add styling to extends error and error context

Show validation status in callout
Display JSON error context below callout when validation fails

app/controllers/projects/ci/lints_controller.rb

@@ -10,8 +10,8 @@ class Projects::Ci::LintsController < Projects::ApplicationController
     @content = params[:content]
     result   = Gitlab::Ci::YamlProcessor.new_with_validation_errors(@content, yaml_processor_options)
 
-    @error   = result.errors.join(', ')
     @status = result.valid?
+    @errors = result.errors
 
     if result.valid?
       @config_processor = result.content

app/views/projects/ci/lints/_create.html.haml

 - if @status
+  .bs-callout.bs-callout-success
     %p
       %b= _("Status:")
       = _("syntax is correct")
-    %i.fa.fa-ok.correct-syntax
 
   .table-holder
     %table.table.table-bordered
@@ -40,9 +40,10 @@
                   %b= _("Allowed to fail")
 
 - else
+  .bs-callout.bs-callout-danger
     %p
       %b= _("Status:")
       = _("syntax is incorrect")
-    %i.fa.fa-remove.incorrect-syntax
-  %b= _("Error:")
-  = @error
+  %pre
+    - @errors.each do |message|
+      %p= message

changelogs/unreleased/better-errors-from-extends.yml

+---
+title: Add JSON error context to extends error in CI lint
+merge_request: 30066
+author:
+type: changed

locale/gitlab.pot

@@ -7278,9 +7278,6 @@ msgstr ""
 msgid "Error with Akismet. Please check the logs for more info."
 msgstr ""
 
-msgid "Error:"
-msgstr ""
-
 msgid "ErrorTracking|Active"
 msgstr ""
 

spec/controllers/projects/ci/lints_controller_spec.rb

@@ -103,7 +103,7 @@ describe Projects::Ci::LintsController do
       end
 
       it 'assigns errors' do
-        expect(assigns[:error]).to eq('root config contains unknown keys: rubocop')
+        expect(assigns[:errors]).to eq(['root config contains unknown keys: rubocop'])
       end
     end
 

spec/views/projects/ci/lints/show.html.haml_spec.rb

@@ -75,6 +75,7 @@ describe 'projects/ci/lints/show' do
     it 'shows the correct values' do
       render
 
+      expect(rendered).to have_content('Status: syntax is correct')
       expect(rendered).to have_content('Tag list: dotnet')
       expect(rendered).to have_content('Only policy: refs, test@dude/repo')
       expect(rendered).to have_content('Except policy: refs, deploy')
@@ -87,14 +88,14 @@ describe 'projects/ci/lints/show' do
     before do
       assign(:project, project)
       assign(:status, false)
-      assign(:error, 'Undefined error')
+      assign(:errors, ['Undefined error'])
     end
 
     it 'shows error message' do
       render
 
       expect(rendered).to have_content('Status: syntax is incorrect')
-      expect(rendered).to have_content('Error: Undefined error')
+      expect(rendered).to have_content('Undefined error')
       expect(rendered).not_to have_content('Tag list:')
     end
   end