Replaces yamlErrorMessags with errorMessages in headerbadges

app/assets/javascripts/ci/pipeline_details/header/components/header_badges.vue

@@ -43,11 +43,14 @@ export default {
     failureReason() {
       return this.pipeline.failureReason;
     },
+    hasPipelineErrorMessages() {
+      return this.pipeline?.errorMessages?.nodes?.length;
+    },
     isAutoDevopsPipeline() {
       return this.pipeline.configSource === AUTO_DEVOPS_SOURCE;
     },
-    yamlErrorMessages() {
-      return this.pipeline?.yamlErrorMessages || '';
+    yamlErrorMessage() {
+      return this.pipeline?.errorMessages.nodes[0].content || '';
     },
     triggeredByPath() {
       return this.pipeline?.triggeredByPath;
@@ -56,7 +59,7 @@ export default {
       return {
         schedule: this.isScheduledPipeline,
         trigger: this.pipeline.trigger,
-        invalid: this.pipeline.yamlErrors,
+        invalid: this.hasPipelineErrorMessages,
         child: this.pipeline.child,
         latest: this.pipeline.latest,
         mergeTrainPipeline: this.isMergeTrainPipeline,
@@ -123,7 +126,7 @@ export default {
     >
       {{ s__('Pipelines|merge train') }}
     </gl-badge>
-    <gl-badge v-if="badges.invalid" v-gl-tooltip :title="yamlErrorMessages" variant="danger">
+    <gl-badge v-if="badges.invalid" v-gl-tooltip :title="yamlErrorMessage" variant="danger">
       {{ s__('Pipelines|yaml invalid') }}
     </gl-badge>
     <gl-badge v-if="badges.failed" v-gl-tooltip :title="failureReason" variant="danger">

app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql

@@ -19,6 +19,12 @@ query getPipelineHeaderData($fullPath: ID!, $iid: ID!) {
         group
         text
       }
+      errorMessages {
+        nodes {
+          id
+          content
+        }
+      }
       createdAt
       user {
         id
@@ -55,8 +61,6 @@ query getPipelineHeaderData($fullPath: ID!, $iid: ID!) {
       configSource
       failureReason
       source
-      yamlErrors
-      yamlErrorMessages
       trigger
       ...PipelineHeaderData
     }

spec/factories/ci/pipelines.rb

@@ -62,10 +62,18 @@
     factory :ci_pipeline do
       trait :invalid do
         status { :failed }
+        # TODO: This trait will be removed soon. Please use `invalid_config_error`. If an error message is necessary,
+        # use pipeline.add_error_message
+        # https://gitlab.com/gitlab-org/gitlab/-/issues/516915
         yaml_errors { 'invalid YAML' }
         failure_reason { :config_error }
       end
 
+      trait :invalid_config_error do
+        status { :failed }
+        failure_reason { :config_error }
+      end
+
       trait :preparing do
         status { :preparing }
       end

spec/features/projects/pipelines/pipeline_spec.rb

@@ -1251,7 +1251,7 @@
       let(:pipeline) do
         create(
           :ci_pipeline,
-          :invalid,
+          :invalid_config_error,
           project: project,
           ref: 'master',
           sha: project.commit.id,
@@ -1260,6 +1260,8 @@
       end
 
       before do
+        pipeline.add_error_message('invalid YAML')
+        pipeline.save!
         visit project_pipeline_path(project, pipeline)
       end
 
@@ -1270,11 +1272,11 @@
       end
 
       it 'contains badge with tooltip which contains error' do
-        expect(pipeline).to have_yaml_errors
+        expect(pipeline.error_messages).not_to be_empty
 
         within_testid('pipeline-header') do
           expect(page).to have_selector(
-            %(span[title="#{pipeline.yaml_errors}"]))
+            %(span[title="#{pipeline.error_messages.first.content}"]))
         end
       end