From b07aa831c8bbe3c4b7a36ae7a276ceb74b2b6b10 Mon Sep 17 00:00:00 2001
From: Briley Sandlin <bsandlin@gitlab.com>
Date: Tue, 6 May 2025 18:34:26 -0500
Subject: [PATCH 1/4] Add review flow to pipeline page

Changelog: added
---
 app/assets/javascripts/ci/constants.js        |   3 +
 .../header/components/header_badges.vue       |  25 +++--
 .../components/pipeline_approval_alert.vue    | 105 ++++++++++++++++++
 .../components/pipeline_error_alert.vue       |  56 ++++++++++
 .../get_pipeline_header_data.query.graphql    |   1 +
 .../header/pipeline_header.vue                |  52 ++++++++-
 .../ci/pipeline_details/pipeline_header.js    |   6 +
 .../components/pipeline_labels.vue            |  21 +++-
 .../components/pipeline_status_badge.vue      |  14 +--
 app/helpers/projects/pipeline_helper.rb       |   5 +-
 app/views/projects/pipelines/show.html.haml   |  15 +--
 locale/gitlab.pot                             |  18 +++
 .../header/pipeline_header_spec.js            |  44 ++++++++
 .../frontend/ci/pipeline_details/mock_data.js |  17 +++
 spec/frontend/fixtures/pipeline_header.rb     |  24 ++++
 .../projects/pipelines/show.html.haml_spec.rb |  29 -----
 16 files changed, 368 insertions(+), 67 deletions(-)
 create mode 100644 app/assets/javascripts/ci/pipeline_details/header/components/pipeline_approval_alert.vue
 create mode 100644 app/assets/javascripts/ci/pipeline_details/header/components/pipeline_error_alert.vue

diff --git a/app/assets/javascripts/ci/constants.js b/app/assets/javascripts/ci/constants.js
index 07bf90910f6e67..5bfd3a4b1a62f2 100644
--- a/app/assets/javascripts/ci/constants.js
+++ b/app/assets/javascripts/ci/constants.js
@@ -48,3 +48,6 @@ export const PIPELINE_POLL_INTERVAL_BACKOFF = 1.2;
 export const FOUR_MINUTES_IN_MS = 1000 * 60 * 4;
 
 export const NETWORK_STATUS_READY = 7;
+
+// For pipelines that need human approval
+export const AI_REVIEW_TEXT = `code should be reviewed by a non-AI user`;
diff --git a/app/assets/javascripts/ci/pipeline_details/header/components/header_badges.vue b/app/assets/javascripts/ci/pipeline_details/header/components/header_badges.vue
index 0ada6bd95afc00..348864ddb550a1 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/components/header_badges.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/components/header_badges.vue
@@ -21,6 +21,11 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    isUnderReview: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     pipeline: {
       type: Object,
       required: true,
@@ -58,26 +63,26 @@ export default {
       return this.pipeline.configSource === AUTO_DEVOPS_SOURCE;
     },
     yamlErrorMessage() {
-      return this.pipeline?.errorMessages.nodes[0].content || '';
+      return this.pipeline?.errorMessages?.nodes[0]?.content || '';
     },
     triggeredByPath() {
       return this.pipeline?.triggeredByPath;
     },
     badges() {
       return {
-        schedule: this.isScheduledPipeline,
-        trigger: this.pipeline.trigger,
-        invalid: this.hasPipelineErrorMessages,
+        autoDevops: this.isAutoDevopsPipeline,
+        branchPipeline: this.isBranchPipeline,
         child: this.pipeline.child,
+        detached: this.isDetachedPipeline,
+        failed: Boolean(this.failureReason) && !this.isUnderReview,
+        invalid: this.hasPipelineErrorMessages && !this.isUnderReview,
         latest: this.pipeline.latest,
-        mergeTrainPipeline: this.isMergeTrainPipeline,
         mergedResultsPipeline: this.isMergedResultsPipeline,
-        branchPipeline: this.isBranchPipeline,
-        tagPipeline: this.isTagPipeline,
-        detached: this.isDetachedPipeline,
-        failed: Boolean(this.failureReason),
-        autoDevops: this.isAutoDevopsPipeline,
+        mergeTrainPipeline: this.isMergeTrainPipeline,
+        schedule: this.isScheduledPipeline,
         stuck: this.pipeline.stuck,
+        tagPipeline: this.isTagPipeline,
+        trigger: this.pipeline.trigger,
       };
     },
   },
diff --git a/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_approval_alert.vue b/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_approval_alert.vue
new file mode 100644
index 00000000000000..ca2945b32c6434
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_approval_alert.vue
@@ -0,0 +1,105 @@
+<script>
+import { GlAlert, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import { createAlert } from '~/alert';
+import { reportToSentry } from '~/ci/utils';
+import { s__ } from '~/locale';
+import { visitUrl } from '~/lib/utils/url_utility';
+import createPipelineMutation from '~/ci/pipeline_new/graphql/mutations/create_pipeline.mutation.graphql';
+
+export default {
+  name: 'PipelineApprovalAlert',
+  components: {
+    GlAlert,
+    GlButton,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['paths'],
+  props: {
+    commitPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    pipelineRef: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    settingsPath() {
+      return this.paths?.settingsPath || '';
+    },
+  },
+  methods: {
+    async runPipeline() {
+      try {
+        const {
+          data: {
+            pipelineCreate: { errors, pipeline },
+          },
+        } = await this.$apollo.mutate({
+          mutation: createPipelineMutation,
+          variables: {
+            input: {
+              projectPath: this.paths.fullProject,
+              ref: this.pipelineRef,
+            },
+          },
+        });
+
+        const pipelineErrors = pipeline?.errorMessages?.nodes?.map((node) => node?.content) || [];
+
+        if (pipeline?.path) {
+          visitUrl(pipeline.path);
+        } else if (errors?.length || pipelineErrors.length) {
+          const message = errors[0] || pipelineErrors[0] || '';
+          createAlert({ message });
+        }
+      } catch (error) {
+        createAlert({ message: s__('Pipelines|Error running pipeline') });
+        reportToSentry(this.$options.name, error);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    :title="s__('Pipelines|Review required: AI-generated pipeline')"
+    variant="warning"
+    :dismissible="false"
+  >
+    <p class="gl-my-4">{{ message }}</p>
+    <gl-sprintf
+      :message="
+        s__(
+          'Pipelines|To enable automatic pipeline execution for composite identities, visit %{linkStart}CI/CD Settings.%{linkEnd}',
+        )
+      "
+    >
+      <template #link="{ content }">
+        <gl-link :href="settingsPath" target="_blank">
+          {{ content }}
+        </gl-link>
+      </template>
+    </gl-sprintf>
+
+    <template #actions>
+      <div class="gl-flex gl-gap-4">
+        <gl-button variant="confirm" @click="runPipeline">
+          {{ s__('Pipelines|Approve and run pipeline') }}
+        </gl-button>
+        <gl-button :href="commitPath" target="_blank">
+          {{ s__('Pipelines|Review commit changes') }}
+        </gl-button>
+      </div>
+    </template>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_error_alert.vue b/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_error_alert.vue
new file mode 100644
index 00000000000000..3ff94e93385fe4
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_error_alert.vue
@@ -0,0 +1,56 @@
+<script>
+import { GlAlert, GlButton } from '@gitlab/ui';
+
+export default {
+  name: 'PipelineErrorAlert',
+  components: {
+    GlAlert,
+    GlButton,
+  },
+  inject: ['canViewPipelineEditor', 'paths'],
+  props: {
+    errorMessage: {
+      type: String,
+      required: true,
+    },
+    pipelineRef: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    pipelineEditorPath() {
+      if (!this.pipelineRef) {
+        return this.paths.pipelineEditorPath;
+      }
+
+      return `${this.paths.pipelineEditorPath}?branch_name=${encodeURIComponent(this.pipelineRef)}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    :title="s__('Pipelines|Unable to create pipeline')"
+    variant="danger"
+    :dismissible="false"
+  >
+    <p class="gl-my-4">{{ errorMessage }}</p>
+
+    <template #actions>
+      <div class="gl-flex gl-gap-4">
+        <gl-button
+          v-if="canViewPipelineEditor"
+          :href="pipelineEditorPath"
+          variant="confirm"
+          target="_blank"
+          data-testid="pipeline-editor-button"
+        >
+          {{ s__('Pipelines|Go to the pipeline editor') }}
+        </gl-button>
+      </div>
+    </template>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql b/app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql
index e4f52276ea836a..10865eb0995804 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql
+++ b/app/assets/javascripts/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql
@@ -51,6 +51,7 @@ query getPipelineHeaderData($fullPath: ID!, $iid: ID!) {
       name
       totalJobs
       refText
+      ref
       type
       triggeredByPath
       stuck
diff --git a/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue b/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
index 2928617ed02296..8b30421adcd045 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAlert, GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { AI_REVIEW_TEXT, BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '~/ci/constants';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import { setUrlFragment, visitUrl } from '~/lib/utils/url_utility';
 import { __, n__, sprintf, formatNumber } from '~/locale';
@@ -20,6 +21,8 @@ import { POLL_INTERVAL } from '../graph/constants';
 import { MERGE_TRAIN_EVENT_TYPE } from './constants';
 import HeaderActions from './components/header_actions.vue';
 import HeaderBadges from './components/header_badges.vue';
+import PipelineApprovalAlert from './components/pipeline_approval_alert.vue';
+import PipelineErrorAlert from './components/pipeline_error_alert.vue';
 import getPipelineQuery from './graphql/queries/get_pipeline_header_data.query.graphql';
 
 const finishedStatuses = ['FAILED', 'SUCCESS', 'CANCELED'];
@@ -45,6 +48,8 @@ export default {
     PageHeading,
     HeaderActions,
     HeaderBadges,
+    PipelineApprovalAlert,
+    PipelineErrorAlert,
     TimeAgoTooltip,
     PipelineAccountVerificationAlert: () =>
       import('ee_component/vue_shared/components/pipeline_account_verification_alert.vue'),
@@ -132,7 +137,7 @@ export default {
   },
   data() {
     return {
-      pipeline: null,
+      pipeline: {},
       failureMessages: [],
       failureType: null,
       isCanceling: false,
@@ -144,9 +149,27 @@ export default {
     loading() {
       return this.$apollo.queries.pipeline.loading;
     },
+    pipelineErrorMessage() {
+      return this.pipeline?.errorMessages?.nodes[0]?.content || '';
+    },
+    hasPipelineErrorMessage() {
+      return Boolean(this.pipelineErrorMessage);
+    },
     hasError() {
       return this.failureType;
     },
+    hasPipelineData() {
+      return Boolean(this.pipeline);
+    },
+    hasDetailedStatus() {
+      return Boolean(this.pipeline?.detailedStatus);
+    },
+    isLoadingInitialQuery() {
+      return this.$apollo.queries.pipeline.loading && !this.hasPipelineData;
+    },
+    isUnderReview() {
+      return Boolean(this.pipeline?.failureReason?.includes(AI_REVIEW_TEXT));
+    },
     detailedStatus() {
       return this.pipeline?.detailedStatus || {};
     },
@@ -198,6 +221,9 @@ export default {
     commitTitle() {
       return this.pipeline?.commit?.title || '';
     },
+    pipelineRef() {
+      return this.pipeline?.ref || '';
+    },
     totalJobsText() {
       const totalJobs = this.pipeline?.totalJobs || 0;
 
@@ -355,7 +381,12 @@ export default {
       </template>
 
       <template #description>
-        <ci-icon :status="detailedStatus" show-status-text class="gl-mb-3" />
+        <ci-icon
+          v-if="hasDetailedStatus"
+          :status="detailedStatus"
+          show-status-text
+          class="gl-mb-3"
+        />
         <div class="gl-inline-block">
           <gl-link
             v-if="user"
@@ -406,7 +437,7 @@ export default {
 
         <div v-safe-html="refText" class="gl-my-3 sm:gl-mt-0" data-testid="pipeline-ref-text"></div>
         <div>
-          <header-badges :pipeline="pipeline" />
+          <header-badges :pipeline="pipeline" :is-under-review="isUnderReview" />
 
           <div class="gl-inline-block">
             <button
@@ -457,7 +488,20 @@ export default {
         />
       </template>
     </page-heading>
-
+    <pipeline-approval-alert
+      v-if="isUnderReview"
+      class="gl-my-4"
+      :commit-path="commitPath"
+      :message="pipeline.failureReason"
+      :pipeline-ref="pipelineRef"
+    />
+    <pipeline-error-alert
+      v-else-if="hasPipelineErrorMessage"
+      class="gl-my-4"
+      :commit-path="commitPath"
+      :error-message="pipelineErrorMessage"
+      :pipeline-ref="pipelineRef"
+    />
     <pipeline-account-verification-alert class="gl-mt-4" />
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/pipeline_details/pipeline_header.js b/app/assets/javascripts/ci/pipeline_details/pipeline_header.js
index f80c19ff68b8d0..a471dddadfdc9f 100644
--- a/app/assets/javascripts/ci/pipeline_details/pipeline_header.js
+++ b/app/assets/javascripts/ci/pipeline_details/pipeline_header.js
@@ -13,6 +13,7 @@ export const createPipelineHeaderApp = (elSelector, apolloProvider, graphqlResou
   }
 
   const {
+    canViewPipelineEditor,
     fullPath,
     pipelineIid,
     pipelinesPath,
@@ -21,6 +22,8 @@ export const createPipelineHeaderApp = (elSelector, apolloProvider, graphqlResou
     mergeTrainsAvailable,
     canReadMergeTrain,
     mergeTrainsPath,
+    pipelineEditorPath,
+    settingsPath,
   } = el.dataset;
 
   // eslint-disable-next-line no-new
@@ -33,7 +36,10 @@ export const createPipelineHeaderApp = (elSelector, apolloProvider, graphqlResou
         fullProject: fullPath,
         graphqlResourceEtag,
         pipelinesPath,
+        pipelineEditorPath,
+        settingsPath,
       },
+      canViewPipelineEditor,
       pipelineIid,
       identityVerificationPath,
       identityVerificationRequired: parseBoolean(identityVerificationRequired),
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
index 46c1bb3d9a9bd8..16bc5cb3dfa39a 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { AI_REVIEW_TEXT } from '~/ci/constants';
 import { SCHEDULE_ORIGIN, API_ORIGIN, TRIGGER_ORIGIN } from '../constants';
 
 export default {
@@ -25,6 +26,9 @@ export default {
     },
   },
   computed: {
+    hasError() {
+      return this.pipeline?.flags?.failure_reason && !this.hasReviewText;
+    },
     isScheduled() {
       return this.pipeline.source === SCHEDULE_ORIGIN;
     },
@@ -34,6 +38,12 @@ export default {
     isForked() {
       return this.pipeline?.project?.forked;
     },
+    hasReviewText() {
+      return this.pipeline?.failure_reason?.includes(AI_REVIEW_TEXT);
+    },
+    needsReview() {
+      return this.pipeline?.flags?.failure_reason && this.hasReviewText;
+    },
     showMergedResultsBadge() {
       // A merge train pipeline is technically also a merged results pipeline,
       // but we want the badges to be mutually exclusive.
@@ -62,6 +72,15 @@ export default {
 </script>
 <template>
   <div class="label-container gl-mt-1 gl-flex gl-flex-wrap gl-gap-2">
+    <button
+      v-if="needsReview"
+      v-gl-tooltip
+      :class="$options.buttonClass"
+      :title="pipeline.failure_reason"
+      data-testid="pipeline-url-triggered"
+    >
+      <gl-badge variant="warning">{{ __('Changes need approval') }}</gl-badge>
+    </button>
     <gl-badge
       v-if="isScheduled"
       v-gl-tooltip
@@ -117,7 +136,7 @@ export default {
     </button>
 
     <button
-      v-if="pipeline.flags.failure_reason"
+      v-if="hasError"
       v-gl-tooltip
       :title="pipeline.failure_reason"
       :class="$options.buttonClass"
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
index 2d5fb8c9799680..bb0947dc56fc85 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
@@ -1,5 +1,5 @@
 <script>
-import { TRACKING_CATEGORIES } from '~/ci/constants';
+import { AI_REVIEW_TEXT, TRACKING_CATEGORIES } from '~/ci/constants';
 import CiIcon from '~/vue_shared/components/ci_icon/ci_icon.vue';
 import Tracking from '~/tracking';
 import PipelinesTimeago from './time_ago.vue';
@@ -17,6 +17,9 @@ export default {
     },
   },
   computed: {
+    isUnderReview() {
+      return Boolean(this.pipeline?.failure_reason?.includes(AI_REVIEW_TEXT));
+    },
     pipelineStatus() {
       return this.pipeline?.details?.status ?? {};
     },
@@ -31,12 +34,7 @@ export default {
 
 <template>
   <div>
-    <ci-icon
-      class="gl-mb-2"
-      :status="pipelineStatus"
-      show-status-text
-      @ciStatusBadgeClick="trackClick"
-    />
-    <pipelines-timeago :pipeline="pipeline" />
+    <ci-icon :status="pipelineStatus" show-status-text @ciStatusBadgeClick="trackClick" />
+    <pipelines-timeago class="gl-mt-2" :pipeline="pipeline" />
   </div>
 </template>
diff --git a/app/helpers/projects/pipeline_helper.rb b/app/helpers/projects/pipeline_helper.rb
index f152ebda753149..c1b621e5d5700b 100644
--- a/app/helpers/projects/pipeline_helper.rb
+++ b/app/helpers/projects/pipeline_helper.rb
@@ -34,10 +34,13 @@ def js_pipeline_tabs_data(project, pipeline, _user)
 
     def js_pipeline_header_data(project, pipeline)
       {
+        can_view_pipeline_editor: can_view_pipeline_editor?(project).to_s,
         full_path: project.full_path,
         graphql_resource_etag: graphql_etag_pipeline_path(pipeline),
+        pipeline_editor_path: project_ci_pipeline_editor_path(project),
         pipeline_iid: pipeline.iid,
-        pipelines_path: project_pipelines_path(project)
+        pipelines_path: project_pipelines_path(project),
+        settings_path: project_settings_ci_cd_path(project, anchor: 'js-general-pipeline-settings')
       }
     end
 
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 38568224b46647..8f88caad9f4755 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -12,18 +12,5 @@
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
   #js-pipeline-header-vue{ data: js_pipeline_header_data(@project, @pipeline) }
 
-  - if pipeline_has_errors
-    = render Pajamas::AlertComponent.new(title: s_('Pipelines|Unable to create pipeline'),
-      variant: :danger,
-      dismissible: false,
-      alert_options: { class: 'gl-mb-5' }) do |c|
-      - c.with_body do
-        %ul
-          - @pipeline.error_messages.pluck(:content).each do |error| # rubocop:disable CodeReuse/ActiveRecord -- done temporarily to drop yaml_errors
-            %li= error
-        - if can_view_pipeline_editor?(@project)
-          = render Pajamas::ButtonComponent.new(href: project_ci_pipeline_editor_path(@project, branch_name: @pipeline.source_ref), variant: :confirm) do
-            = s_("Pipelines|Go to the pipeline editor")
-
-  - else
+  - unless pipeline_has_errors
     #js-pipeline-tabs{ data: js_pipeline_tabs_data(@project, @pipeline, @current_user) }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2a40be45c24962..ff66d6cb849392 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12674,6 +12674,9 @@ msgstr ""
 msgid "Changes"
 msgstr ""
 
+msgid "Changes need approval"
+msgstr ""
+
 msgid "Changes requested"
 msgstr ""
 
@@ -45866,6 +45869,9 @@ msgstr ""
 msgid "Pipelines|An error occurred while updating the trigger token. Please try again."
 msgstr ""
 
+msgid "Pipelines|Approve and run pipeline"
+msgstr ""
+
 msgid "Pipelines|Are you sure you want to remove the merge request %{title} from the merge train?"
 msgstr ""
 
@@ -45914,6 +45920,9 @@ msgstr ""
 msgid "Pipelines|Editor"
 msgstr ""
 
+msgid "Pipelines|Error running pipeline"
+msgstr ""
+
 msgid "Pipelines|Expires"
 msgstr ""
 
@@ -46064,6 +46073,12 @@ msgstr ""
 msgid "Pipelines|Retry %{jobName} Job"
 msgstr ""
 
+msgid "Pipelines|Review commit changes"
+msgstr ""
+
+msgid "Pipelines|Review required: AI-generated pipeline"
+msgstr ""
+
 msgid "Pipelines|Revoke trigger"
 msgstr ""
 
@@ -46193,6 +46208,9 @@ msgstr ""
 msgid "Pipelines|Time"
 msgstr ""
 
+msgid "Pipelines|To enable automatic pipeline execution for composite identities, visit %{linkStart}CI/CD Settings.%{linkEnd}"
+msgstr ""
+
 msgid "Pipelines|To run new jobs and pipelines in this namespace's projects, %{link_start}buy additional compute minutes%{link_end}."
 msgstr ""
 
diff --git a/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js b/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
index e017bf7fd8ef10..5679da0025f302 100644
--- a/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
+++ b/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
@@ -12,6 +12,8 @@ import deletePipelineMutation from '~/ci/pipeline_details/graphql/mutations/dele
 import retryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
 import HeaderActions from '~/ci/pipeline_details/header/components/header_actions.vue';
 import HeaderBadges from '~/ci/pipeline_details/header/components/header_badges.vue';
+import PipelineApprovalAlert from '~/ci/pipeline_details/header/components/pipeline_approval_alert.vue';
+import PipelineErrorAlert from '~/ci/pipeline_details/header/components/pipeline_error_alert.vue';
 import getPipelineDetailsQuery from '~/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql';
 import pipelineCiStatusUpdatedSubscription from '~/graphql_shared/subscriptions/pipeline_ci_status_updated.subscription.graphql';
 
@@ -20,6 +22,8 @@ import {
   pipelineHeaderRunning,
   pipelineHeaderRunningWithDuration,
   pipelineHeaderFailed,
+  pipelineHeaderUnderAiReview,
+  pipelineHeaderWithErrorMessages,
   pipelineRetryMutationResponseSuccess,
   pipelineCancelMutationResponseSuccess,
   pipelineDeleteMutationResponseSuccess,
@@ -40,6 +44,8 @@ describe('Pipeline header', () => {
   const runningHandler = jest.fn().mockResolvedValue(pipelineHeaderRunning);
   const runningHandlerWithDuration = jest.fn().mockResolvedValue(pipelineHeaderRunningWithDuration);
   const failedHandler = jest.fn().mockResolvedValue(pipelineHeaderFailed);
+  const aiReviewHandler = jest.fn().mockResolvedValue(pipelineHeaderUnderAiReview);
+  const errorMessageHandler = jest.fn().mockResolvedValue(pipelineHeaderWithErrorMessages);
   const subscriptionHandler = jest.fn().mockResolvedValue(mockPipelineStatusUpdatedResponse);
   const subscriptionNullHandler = jest.fn().mockResolvedValue(mockPipelineStatusNullResponse);
 
@@ -67,6 +73,8 @@ describe('Pipeline header', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findBadges = () => wrapper.findComponent(HeaderBadges);
   const findHeaderActions = () => wrapper.findComponent(HeaderActions);
+  const findPipelineApprovalAlert = () => wrapper.findComponent(PipelineApprovalAlert);
+  const findPipelineErrorAlert = () => wrapper.findComponent(PipelineErrorAlert);
   const findCreatedTimeAgo = () => wrapper.findByTestId('pipeline-created-time-ago');
   const findFinishedTimeAgo = () => wrapper.findByTestId('pipeline-finished-time-ago');
   const findFinishedCreatedTimeAgo = () =>
@@ -98,6 +106,7 @@ describe('Pipeline header', () => {
     paths: {
       pipelinesPath: '/namespace/my-project/-/pipelines',
       fullProject: '/namespace/my-project',
+      settingsPath: '/path/to/settings',
     },
   };
 
@@ -274,6 +283,41 @@ describe('Pipeline header', () => {
     });
   });
 
+  describe('pipeline with error messages', () => {
+    beforeEach(async () => {
+      await createComponent([
+        [getPipelineDetailsQuery, errorMessageHandler],
+        [pipelineCiStatusUpdatedSubscription, subscriptionHandler],
+      ]);
+    });
+
+    it('displays the pipeline error alert', () => {
+      expect(findPipelineErrorAlert().exists()).toBe(true);
+    });
+  });
+
+  describe('ai review', () => {
+    beforeEach(() => {
+      return createComponent([
+        [getPipelineDetailsQuery, aiReviewHandler],
+        [pipelineCiStatusUpdatedSubscription, subscriptionHandler],
+      ]);
+    });
+
+    it('displays the pipeline approval alert', () => {
+      expect(findPipelineApprovalAlert().exists()).toBe(true);
+    });
+
+    it('sends correct props', () => {
+      expect(findPipelineApprovalAlert().props()).toEqual({
+        commitPath: '/namespace1/project-1/-/commit/570e7b2abdd848b95f2f578043fc23bd6f6fd24d',
+        message:
+          'This pipeline did not run because the code should be reviewed by a non-AI user first. Verify that all changes in this merge request are safe before running a new pipeline.',
+        pipelineRef: 'master',
+      });
+    });
+  });
+
   describe('actions', () => {
     it('passes correct props to the header actions component', async () => {
       await createComponent([
diff --git a/spec/frontend/ci/pipeline_details/mock_data.js b/spec/frontend/ci/pipeline_details/mock_data.js
index 3db5d47c8f22b1..8a1342579166aa 100644
--- a/spec/frontend/ci/pipeline_details/mock_data.js
+++ b/spec/frontend/ci/pipeline_details/mock_data.js
@@ -4,6 +4,7 @@ import pipelineHeaderRunning from 'test_fixtures/graphql/pipelines/pipeline_head
 import pipelineHeaderRunningNoPermissions from 'test_fixtures/graphql/pipelines/pipeline_header_running_no_permissions.json';
 import pipelineHeaderRunningWithDuration from 'test_fixtures/graphql/pipelines/pipeline_header_running_with_duration.json';
 import pipelineHeaderFailed from 'test_fixtures/graphql/pipelines/pipeline_header_failed.json';
+import pipelineHeaderUnderAiReview from 'test_fixtures/graphql/pipelines/pipeline_header_under_ai_review.json';
 
 const PIPELINE_RUNNING = 'RUNNING';
 
@@ -16,6 +17,7 @@ export {
   pipelineHeaderRunningNoPermissions,
   pipelineHeaderRunningWithDuration,
   pipelineHeaderFailed,
+  pipelineHeaderUnderAiReview,
 };
 
 export const pipelineHeaderTrigger = {
@@ -30,6 +32,21 @@ export const pipelineHeaderTrigger = {
   },
 };
 
+export const pipelineHeaderWithErrorMessages = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/1',
+      pipeline: {
+        ...pipelineHeaderFailed.data.project.pipeline,
+        errorMessages: {
+          nodes: [{ content: 'Pipeline failed due to configuration error' }],
+          __typename: 'PipelineMessageConnection',
+        },
+      },
+    },
+  },
+};
+
 export const pipelineRetryMutationResponseSuccess = {
   data: { pipelineRetry: { errors: [] } },
 };
diff --git a/spec/frontend/fixtures/pipeline_header.rb b/spec/frontend/fixtures/pipeline_header.rb
index 77d626100ad858..6dd029120bbda4 100644
--- a/spec/frontend/fixtures/pipeline_header.rb
+++ b/spec/frontend/fixtures/pipeline_header.rb
@@ -148,4 +148,28 @@
       expect_graphql_errors_to_be_empty
     end
   end
+
+  context 'with pipeline under AI review' do
+    let_it_be(:pipeline) do
+      create(
+        :ci_pipeline,
+        project: project,
+        sha: commit.id,
+        ref: 'master',
+        user: user,
+        status: :failed,
+        failure_reason: :composite_identity_forbidden
+      )
+    end
+
+    let_it_be(:build) { create(:ci_build, :failed, pipeline: pipeline, ref: 'master') }
+
+    it "graphql/pipelines/pipeline_header_under_ai_review.json" do
+      query = get_graphql_query_as_string(query_path)
+
+      post_graphql(query, current_user: user, variables: { fullPath: project.full_path, iid: pipeline.iid })
+
+      expect_graphql_errors_to_be_empty
+    end
+  end
 end
diff --git a/spec/views/projects/pipelines/show.html.haml_spec.rb b/spec/views/projects/pipelines/show.html.haml_spec.rb
index b8599144eac804..c671d2465a9f1c 100644
--- a/spec/views/projects/pipelines/show.html.haml_spec.rb
+++ b/spec/views/projects/pipelines/show.html.haml_spec.rb
@@ -21,43 +21,14 @@
       create(:ci_pipeline_message, pipeline: pipeline, content: 'some errors', severity: :error)
     end
 
-    it 'shows errors' do
-      render
-
-      expect(rendered).to have_content('Unable to create pipeline')
-      expect(rendered).to have_content('some errors')
-    end
-
     it 'does not render the pipeline tabs' do
       render
 
       expect(rendered).not_to have_selector('#js-pipeline-tabs')
     end
-
-    it 'renders the pipeline editor button with correct link for users who can view' do
-      project.add_developer(user)
-
-      render
-
-      expect(rendered).to have_link s_('Go to the pipeline editor'),
-        href: project_ci_pipeline_editor_path(project, branch_name: pipeline.source_ref)
-    end
-
-    it 'renders the pipeline editor button with correct link for users who can not view' do
-      render
-
-      expect(rendered).not_to have_link s_('Go to the pipeline editor'),
-        href: project_ci_pipeline_editor_path(project, branch_name: pipeline.source_ref)
-    end
   end
 
   context 'when pipeline does not have errors' do
-    it 'does not show errors' do
-      render
-
-      expect(rendered).not_to have_content('Unable to create pipeline')
-    end
-
     it 'renders the pipeline tabs' do
       render
 
-- 
GitLab


From 014f462391ea3f54ec4a5ceee3341df9b19136d7 Mon Sep 17 00:00:00 2001
From: Laura Montemayor <lmontemayor@gitlab.com>
Date: Tue, 8 Jul 2025 13:38:42 +0200
Subject: [PATCH 2/4] Remove property that is not used

---
 .../ci/pipeline_details/header/pipeline_header.vue        | 8 +-------
 .../pipelines_page/components/pipeline_status_badge.vue   | 5 +----
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue b/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
index 8b30421adcd045..3e1f8142ca2fdc 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlAlert, GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
-import { AI_REVIEW_TEXT, BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '~/ci/constants';
+import { AI_REVIEW_TEXT } from '~/ci/constants';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import { setUrlFragment, visitUrl } from '~/lib/utils/url_utility';
 import { __, n__, sprintf, formatNumber } from '~/locale';
@@ -158,15 +158,9 @@ export default {
     hasError() {
       return this.failureType;
     },
-    hasPipelineData() {
-      return Boolean(this.pipeline);
-    },
     hasDetailedStatus() {
       return Boolean(this.pipeline?.detailedStatus);
     },
-    isLoadingInitialQuery() {
-      return this.$apollo.queries.pipeline.loading && !this.hasPipelineData;
-    },
     isUnderReview() {
       return Boolean(this.pipeline?.failureReason?.includes(AI_REVIEW_TEXT));
     },
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
index bb0947dc56fc85..bf3adacac3e85e 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
@@ -1,5 +1,5 @@
 <script>
-import { AI_REVIEW_TEXT, TRACKING_CATEGORIES } from '~/ci/constants';
+import { TRACKING_CATEGORIES } from '~/ci/constants';
 import CiIcon from '~/vue_shared/components/ci_icon/ci_icon.vue';
 import Tracking from '~/tracking';
 import PipelinesTimeago from './time_ago.vue';
@@ -17,9 +17,6 @@ export default {
     },
   },
   computed: {
-    isUnderReview() {
-      return Boolean(this.pipeline?.failure_reason?.includes(AI_REVIEW_TEXT));
-    },
     pipelineStatus() {
       return this.pipeline?.details?.status ?? {};
     },
-- 
GitLab


From 290a3dee347dea84d9c06f59532ecd5431d04f3c Mon Sep 17 00:00:00 2001
From: Laura Montemayor <lmontemayor@gitlab.com>
Date: Tue, 8 Jul 2025 14:17:33 +0200
Subject: [PATCH 3/4] Clarify note and fix spec

---
 app/assets/javascripts/ci/constants.js                        | 2 +-
 .../ci/pipeline_details/header/pipeline_header_spec.js        | 4 ++--
 spec/frontend/ci/pipeline_details/mock_data.js                | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/ci/constants.js b/app/assets/javascripts/ci/constants.js
index 5bfd3a4b1a62f2..059b6c3beb6f9a 100644
--- a/app/assets/javascripts/ci/constants.js
+++ b/app/assets/javascripts/ci/constants.js
@@ -49,5 +49,5 @@ export const FOUR_MINUTES_IN_MS = 1000 * 60 * 4;
 
 export const NETWORK_STATUS_READY = 7;
 
-// For pipelines that need human approval
+// For MR pipelines that need changes approved by a human
 export const AI_REVIEW_TEXT = `code should be reviewed by a non-AI user`;
diff --git a/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js b/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
index 5679da0025f302..a39545cee3db2c 100644
--- a/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
+++ b/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
@@ -310,10 +310,10 @@ describe('Pipeline header', () => {
 
     it('sends correct props', () => {
       expect(findPipelineApprovalAlert().props()).toEqual({
-        commitPath: '/namespace1/project-1/-/commit/570e7b2abdd848b95f2f578043fc23bd6f6fd24d',
+        commitPath: pipelineHeaderUnderAiReview.data.project.pipeline.commit.webPath,
         message:
           'This pipeline did not run because the code should be reviewed by a non-AI user first. Verify that all changes in this merge request are safe before running a new pipeline.',
-        pipelineRef: 'master',
+        pipelineRef: pipelineHeaderUnderAiReview.data.project.pipeline.ref,
       });
     });
   });
diff --git a/spec/frontend/ci/pipeline_details/mock_data.js b/spec/frontend/ci/pipeline_details/mock_data.js
index 8a1342579166aa..0ff5cdbde93219 100644
--- a/spec/frontend/ci/pipeline_details/mock_data.js
+++ b/spec/frontend/ci/pipeline_details/mock_data.js
@@ -39,7 +39,7 @@ export const pipelineHeaderWithErrorMessages = {
       pipeline: {
         ...pipelineHeaderFailed.data.project.pipeline,
         errorMessages: {
-          nodes: [{ content: 'Pipeline failed due to configuration error' }],
+          nodes: [{ id: '1', content: 'Pipeline failed due to configuration error' }],
           __typename: 'PipelineMessageConnection',
         },
       },
-- 
GitLab


From bc557f9dfecd749e86c4363adbece2d22329e4d4 Mon Sep 17 00:00:00 2001
From: Anna Vovchenko <avovchenko@gitlab.com>
Date: Mon, 28 Jul 2025 13:44:04 +0300
Subject: [PATCH 4/4] Apply reviewer's feedback

Add tests, rename component, update props.

Changelog: changed
---
 ...rt.vue => pipeline_error_review_alert.vue} |  11 +-
 .../header/pipeline_header.vue                |   8 +-
 .../components/pipeline_labels.vue            |   4 +-
 locale/gitlab.pot                             |   6 +-
 .../header/components/header_badges_spec.js   |  46 ++++-
 .../components/pipeline_error_alert_spec.js   | 100 +++++++++
 .../pipeline_error_review_alert_spec.js       | 189 ++++++++++++++++++
 .../header/pipeline_header_spec.js            |  14 +-
 .../components/pipeline_labels_spec.js        |  22 ++
 9 files changed, 379 insertions(+), 21 deletions(-)
 rename app/assets/javascripts/ci/pipeline_details/header/components/{pipeline_approval_alert.vue => pipeline_error_review_alert.vue} (91%)
 create mode 100644 spec/frontend/ci/pipeline_details/header/components/pipeline_error_alert_spec.js
 create mode 100644 spec/frontend/ci/pipeline_details/header/components/pipeline_error_review_alert_spec.js

diff --git a/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_approval_alert.vue b/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_error_review_alert.vue
similarity index 91%
rename from app/assets/javascripts/ci/pipeline_details/header/components/pipeline_approval_alert.vue
rename to app/assets/javascripts/ci/pipeline_details/header/components/pipeline_error_review_alert.vue
index ca2945b32c6434..15ce802434ed4a 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_approval_alert.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/components/pipeline_error_review_alert.vue
@@ -18,8 +18,7 @@ export default {
   props: {
     commitPath: {
       type: String,
-      required: false,
-      default: '',
+      required: true,
     },
     message: {
       type: String,
@@ -27,8 +26,7 @@ export default {
     },
     pipelineRef: {
       type: String,
-      required: false,
-      default: '',
+      required: true,
     },
   },
   computed: {
@@ -78,6 +76,7 @@ export default {
   >
     <p class="gl-my-4">{{ message }}</p>
     <gl-sprintf
+      v-if="settingsPath"
       :message="
         s__(
           'Pipelines|To enable automatic pipeline execution for composite identities, visit %{linkStart}CI/CD Settings.%{linkEnd}',
@@ -93,10 +92,10 @@ export default {
 
     <template #actions>
       <div class="gl-flex gl-gap-4">
-        <gl-button variant="confirm" @click="runPipeline">
+        <gl-button data-testid="approve-button" variant="confirm" @click="runPipeline">
           {{ s__('Pipelines|Approve and run pipeline') }}
         </gl-button>
-        <gl-button :href="commitPath" target="_blank">
+        <gl-button data-testid="review-button" :href="commitPath" target="_blank">
           {{ s__('Pipelines|Review commit changes') }}
         </gl-button>
       </div>
diff --git a/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue b/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
index 3e1f8142ca2fdc..f78ea2ea0c615e 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue
@@ -21,7 +21,7 @@ import { POLL_INTERVAL } from '../graph/constants';
 import { MERGE_TRAIN_EVENT_TYPE } from './constants';
 import HeaderActions from './components/header_actions.vue';
 import HeaderBadges from './components/header_badges.vue';
-import PipelineApprovalAlert from './components/pipeline_approval_alert.vue';
+import PipelineErrorReviewAlert from './components/pipeline_error_review_alert.vue';
 import PipelineErrorAlert from './components/pipeline_error_alert.vue';
 import getPipelineQuery from './graphql/queries/get_pipeline_header_data.query.graphql';
 
@@ -48,7 +48,7 @@ export default {
     PageHeading,
     HeaderActions,
     HeaderBadges,
-    PipelineApprovalAlert,
+    PipelineErrorReviewAlert,
     PipelineErrorAlert,
     TimeAgoTooltip,
     PipelineAccountVerificationAlert: () =>
@@ -162,7 +162,7 @@ export default {
       return Boolean(this.pipeline?.detailedStatus);
     },
     isUnderReview() {
-      return Boolean(this.pipeline?.failureReason?.includes(AI_REVIEW_TEXT));
+      return this.pipeline?.failureReason?.includes(AI_REVIEW_TEXT);
     },
     detailedStatus() {
       return this.pipeline?.detailedStatus || {};
@@ -482,7 +482,7 @@ export default {
         />
       </template>
     </page-heading>
-    <pipeline-approval-alert
+    <pipeline-error-review-alert
       v-if="isUnderReview"
       class="gl-my-4"
       :commit-path="commitPath"
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
index 16bc5cb3dfa39a..fc60bf1b2012a6 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
@@ -77,9 +77,9 @@ export default {
       v-gl-tooltip
       :class="$options.buttonClass"
       :title="pipeline.failure_reason"
-      data-testid="pipeline-url-triggered"
+      data-testid="pipeline-needs-review"
     >
-      <gl-badge variant="warning">{{ __('Changes need approval') }}</gl-badge>
+      <gl-badge variant="warning">{{ __('changes need approval') }}</gl-badge>
     </button>
     <gl-badge
       v-if="isScheduled"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ff66d6cb849392..079ca8480514e4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12674,9 +12674,6 @@ msgstr ""
 msgid "Changes"
 msgstr ""
 
-msgid "Changes need approval"
-msgstr ""
-
 msgid "Changes requested"
 msgstr ""
 
@@ -73439,6 +73436,9 @@ msgstr[1] ""
 msgid "changes"
 msgstr ""
 
+msgid "changes need approval"
+msgstr ""
+
 msgid "check"
 msgid_plural "checks"
 msgstr[0] ""
diff --git a/spec/frontend/ci/pipeline_details/header/components/header_badges_spec.js b/spec/frontend/ci/pipeline_details/header/components/header_badges_spec.js
index 074c33fa31bc52..15f5f009fa4b5d 100644
--- a/spec/frontend/ci/pipeline_details/header/components/header_badges_spec.js
+++ b/spec/frontend/ci/pipeline_details/header/components/header_badges_spec.js
@@ -15,10 +15,14 @@ describe('Header badges', () => {
       return sprintf.exists() && sprintf.attributes('message').includes('Child pipeline');
     });
 
-  const createComponent = (mockPipeline = pipelineHeaderSuccess.data.project.pipeline) => {
+  const createComponent = (
+    mockPipeline = pipelineHeaderSuccess.data.project.pipeline,
+    isUnderReview = false,
+  ) => {
     wrapper = shallowMountExtended(HeaderBadges, {
       propsData: {
         pipeline: mockPipeline,
+        isUnderReview,
       },
     });
   };
@@ -101,4 +105,44 @@ describe('Header badges', () => {
       );
     });
   });
+
+  describe('in a failed pipeline', () => {
+    const failedPipeline = {
+      ...pipelineHeaderSuccess.data.project.pipeline,
+      failureReason: 'some reason',
+    };
+
+    it('displays error badge', () => {
+      createComponent(failedPipeline);
+
+      expect(wrapper.findByText('error').exists()).toBe(true);
+      expect(wrapper.findByTestId('badges-failed').attributes('title')).toBe('some reason');
+    });
+
+    it('does not display error badge if changes need review', () => {
+      createComponent(failedPipeline, true);
+
+      expect(wrapper.findByText('error').exists()).toBe(false);
+    });
+  });
+
+  describe('in an invalid pipeline', () => {
+    const invalidPipeline = {
+      ...pipelineHeaderSuccess.data.project.pipeline,
+      errorMessages: { nodes: [{ content: 'detailed error' }] },
+    };
+
+    it('displays error badge', () => {
+      createComponent(invalidPipeline);
+
+      expect(wrapper.findByText('yaml invalid').exists()).toBe(true);
+      expect(wrapper.findByTestId('badges-invalid').attributes('title')).toBe('detailed error');
+    });
+
+    it('does not display error badge if changes need review', () => {
+      createComponent(invalidPipeline, true);
+
+      expect(wrapper.findByText('yaml invalid').exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/ci/pipeline_details/header/components/pipeline_error_alert_spec.js b/spec/frontend/ci/pipeline_details/header/components/pipeline_error_alert_spec.js
new file mode 100644
index 00000000000000..751430c37dae3a
--- /dev/null
+++ b/spec/frontend/ci/pipeline_details/header/components/pipeline_error_alert_spec.js
@@ -0,0 +1,100 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlButton } from '@gitlab/ui';
+import PipelineErrorAlert from '~/ci/pipeline_details/header/components/pipeline_error_alert.vue';
+
+describe('PipelineErrorAlert', () => {
+  let wrapper;
+
+  const pipelineEditorPath = '/project/-/ci/editor';
+
+  const defaultProps = {
+    errorMessage: 'Pipeline creation failed',
+  };
+
+  const defaultProvide = {
+    canViewPipelineEditor: true,
+    paths: {
+      pipelineEditorPath,
+    },
+  };
+
+  const createComponent = ({ props = {}, provide = {} } = {}) => {
+    wrapper = shallowMount(PipelineErrorAlert, {
+      propsData: { ...defaultProps, ...props },
+      provide: { ...defaultProvide, ...provide },
+      stubs: { GlAlert },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  describe('template rendering', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the alert with correct props', () => {
+      expect(findAlert().props()).toMatchObject({
+        title: 'Unable to create pipeline',
+        variant: 'danger',
+        dismissible: false,
+      });
+    });
+
+    it('displays the error message', () => {
+      expect(findAlert().text()).toContain(defaultProps.errorMessage);
+    });
+  });
+
+  describe('pipeline editor button', () => {
+    describe('when canViewPipelineEditor is true', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders the pipeline editor button', () => {
+        expect(findButton().props()).toMatchObject({
+          href: defaultProvide.paths.pipelineEditorPath,
+          variant: 'confirm',
+          target: '_blank',
+        });
+        expect(findButton().text()).toBe('Go to the pipeline editor');
+      });
+    });
+
+    describe('when canViewPipelineEditor is false', () => {
+      beforeEach(() => {
+        createComponent({ provide: { canViewPipelineEditor: false } });
+      });
+
+      it('does not render the pipeline editor button', () => {
+        expect(findButton().exists()).toBe(false);
+      });
+    });
+
+    describe('when pipelineRef is not provided', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('contains editor path', () => {
+        expect(findButton().props('href')).toBe(pipelineEditorPath);
+      });
+    });
+
+    describe('when pipelineRef is provided', () => {
+      const pipelineRef = 'feature-branch';
+
+      beforeEach(() => {
+        createComponent({ props: { pipelineRef } });
+      });
+
+      it('contains branch parameter', () => {
+        const expectedPath = `${pipelineEditorPath}?branch_name=${encodeURIComponent(pipelineRef)}`;
+
+        expect(findButton().props('href')).toBe(expectedPath);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ci/pipeline_details/header/components/pipeline_error_review_alert_spec.js b/spec/frontend/ci/pipeline_details/header/components/pipeline_error_review_alert_spec.js
new file mode 100644
index 00000000000000..26475e726f4c7e
--- /dev/null
+++ b/spec/frontend/ci/pipeline_details/header/components/pipeline_error_review_alert_spec.js
@@ -0,0 +1,189 @@
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/alert';
+import { reportToSentry } from '~/ci/utils';
+import { visitUrl } from '~/lib/utils/url_utility';
+import createPipelineMutation from '~/ci/pipeline_new/graphql/mutations/create_pipeline.mutation.graphql';
+import PipelineApprovalAlert from '~/ci/pipeline_details/header/components/pipeline_error_review_alert.vue';
+
+Vue.use(VueApollo);
+
+jest.mock('~/alert');
+jest.mock('~/ci/utils');
+jest.mock('~/lib/utils/url_utility');
+
+describe('PipelineApprovalAlert', () => {
+  let wrapper;
+  let apolloProvider;
+
+  const pipelinePath = '/project/pipelines/123';
+
+  const defaultProps = {
+    commitPath: '/project/commit/abc123',
+    message: 'This pipeline was generated by AI and requires review.',
+    pipelineRef: 'main',
+  };
+
+  const defaultProvide = {
+    paths: {
+      settingsPath: '/project/settings/ci_cd',
+      fullProject: 'group/project',
+    },
+  };
+
+  const successHandler = jest.fn().mockResolvedValue({
+    data: {
+      pipelineCreate: {
+        id: '1',
+        clientMutationId: '1',
+        errors: [],
+        pipeline: {
+          id: '123',
+          path: pipelinePath,
+          warningMessages: { nodes: [] },
+          errorMessages: { nodes: [] },
+        },
+      },
+    },
+  });
+
+  const errorHandler = jest.fn().mockResolvedValue({
+    data: {
+      pipelineCreate: {
+        id: '1',
+        clientMutationId: '1',
+        errors: [],
+        pipeline: {
+          id: '123',
+          path: '',
+          warningMessages: { nodes: [] },
+          errorMessages: { nodes: [{ id: '1', content: 'error creating pipeline' }] },
+        },
+      },
+    },
+  });
+
+  const mutationError = jest.fn().mockRejectedValue(new Error('mutation error'));
+
+  const defaultHandlers = [[createPipelineMutation, successHandler]];
+
+  const createMockApolloProvider = (handlers) => {
+    return createMockApollo(handlers);
+  };
+
+  const createComponent = (handlers = defaultHandlers) => {
+    apolloProvider = createMockApolloProvider(handlers);
+
+    wrapper = shallowMountExtended(PipelineApprovalAlert, {
+      apolloProvider,
+      propsData: defaultProps,
+      provide: defaultProvide,
+      stubs: { GlAlert, GlSprintf },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findApproveButton = () => wrapper.findByTestId('approve-button');
+  const findReviewButton = () => wrapper.findByTestId('review-button');
+  const findSettingsLink = () => wrapper.findComponent(GlLink);
+
+  describe('template rendering', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the alert with correct props', () => {
+      expect(findAlert().props()).toMatchObject({
+        title: 'Review required: AI-generated pipeline',
+        variant: 'warning',
+        dismissible: false,
+      });
+    });
+
+    it('displays the message', () => {
+      expect(findAlert().text()).toContain(defaultProps.message);
+    });
+
+    it('renders the settings link with correct href', () => {
+      expect(findSettingsLink().attributes('href')).toBe(defaultProvide.paths.settingsPath);
+    });
+
+    it('renders the approve button with correct text', () => {
+      expect(findApproveButton().props('variant')).toBe('confirm');
+      expect(findApproveButton().text()).toBe('Approve and run pipeline');
+    });
+
+    it('renders the review button with correct props', () => {
+      expect(findReviewButton().attributes('href')).toBe(defaultProps.commitPath);
+      expect(findReviewButton().text()).toBe('Review commit changes');
+    });
+  });
+
+  describe('approve button', () => {
+    it('calls pipeline creation mutation when approve button is clicked', async () => {
+      createComponent();
+      await findApproveButton().vm.$emit('click');
+
+      expect(successHandler).toHaveBeenCalledWith({
+        input: {
+          projectPath: defaultProvide.paths.fullProject,
+          ref: defaultProps.pipelineRef,
+        },
+      });
+    });
+
+    describe('on success', () => {
+      it('redirects to the new pipeline page', async () => {
+        createComponent();
+        await findApproveButton().vm.$emit('click');
+        await waitForPromises();
+
+        expect(visitUrl).toHaveBeenCalledWith(pipelinePath);
+      });
+    });
+
+    describe('on pipeline error', () => {
+      const handlers = [[createPipelineMutation, errorHandler]];
+      beforeEach(async () => {
+        createComponent(handlers);
+        await findApproveButton().vm.$emit('click');
+        await waitForPromises();
+      });
+
+      it('shows an alert', () => {
+        expect(createAlert).toHaveBeenCalledWith({ message: 'error creating pipeline' });
+      });
+
+      it('does not redirect to the new pipeline page on error', () => {
+        expect(visitUrl).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('on mutation error', () => {
+      beforeEach(async () => {
+        createComponent([[createPipelineMutation, mutationError]]);
+        await findApproveButton().vm.$emit('click');
+        await waitForPromises();
+      });
+
+      it('shows an alert', () => {
+        expect(createAlert).toHaveBeenCalledWith({ message: 'Error running pipeline' });
+      });
+
+      it('reports an error to sentry', () => {
+        expect(reportToSentry).toHaveBeenCalledWith(
+          'PipelineApprovalAlert',
+          new Error('mutation error'),
+        );
+      });
+
+      it('does not redirect to the new pipeline page on error', () => {
+        expect(visitUrl).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js b/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
index a39545cee3db2c..d9185000f77411 100644
--- a/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
+++ b/spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js
@@ -12,7 +12,7 @@ import deletePipelineMutation from '~/ci/pipeline_details/graphql/mutations/dele
 import retryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
 import HeaderActions from '~/ci/pipeline_details/header/components/header_actions.vue';
 import HeaderBadges from '~/ci/pipeline_details/header/components/header_badges.vue';
-import PipelineApprovalAlert from '~/ci/pipeline_details/header/components/pipeline_approval_alert.vue';
+import PipelineErrorReviewAlert from '~/ci/pipeline_details/header/components/pipeline_error_review_alert.vue';
 import PipelineErrorAlert from '~/ci/pipeline_details/header/components/pipeline_error_alert.vue';
 import getPipelineDetailsQuery from '~/ci/pipeline_details/header/graphql/queries/get_pipeline_header_data.query.graphql';
 import pipelineCiStatusUpdatedSubscription from '~/graphql_shared/subscriptions/pipeline_ci_status_updated.subscription.graphql';
@@ -73,7 +73,7 @@ describe('Pipeline header', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findBadges = () => wrapper.findComponent(HeaderBadges);
   const findHeaderActions = () => wrapper.findComponent(HeaderActions);
-  const findPipelineApprovalAlert = () => wrapper.findComponent(PipelineApprovalAlert);
+  const findPipelineErrorReviewAlert = () => wrapper.findComponent(PipelineErrorReviewAlert);
   const findPipelineErrorAlert = () => wrapper.findComponent(PipelineErrorAlert);
   const findCreatedTimeAgo = () => wrapper.findByTestId('pipeline-created-time-ago');
   const findFinishedTimeAgo = () => wrapper.findByTestId('pipeline-finished-time-ago');
@@ -304,12 +304,16 @@ describe('Pipeline header', () => {
       ]);
     });
 
-    it('displays the pipeline approval alert', () => {
-      expect(findPipelineApprovalAlert().exists()).toBe(true);
+    it('displays the pipeline error review alert', () => {
+      expect(findPipelineErrorReviewAlert().exists()).toBe(true);
+    });
+
+    it('does not display error alert', () => {
+      expect(findPipelineErrorAlert().exists()).toBe(false);
     });
 
     it('sends correct props', () => {
-      expect(findPipelineApprovalAlert().props()).toEqual({
+      expect(findPipelineErrorReviewAlert().props()).toEqual({
         commitPath: pipelineHeaderUnderAiReview.data.project.pipeline.commit.webPath,
         message:
           'This pipeline did not run because the code should be reviewed by a non-AI user first. Verify that all changes in this merge request are safe before running a new pipeline.',
diff --git a/spec/frontend/ci/pipelines_page/components/pipeline_labels_spec.js b/spec/frontend/ci/pipelines_page/components/pipeline_labels_spec.js
index ff3975ea4414f1..d166c737636232 100644
--- a/spec/frontend/ci/pipelines_page/components/pipeline_labels_spec.js
+++ b/spec/frontend/ci/pipelines_page/components/pipeline_labels_spec.js
@@ -24,6 +24,7 @@ describe('Pipeline label component', () => {
   const findForkTag = () => wrapper.findByTestId('pipeline-url-fork');
   const findTrainTag = () => wrapper.findByTestId('pipeline-url-train');
   const findApiTag = () => wrapper.findByTestId('pipeline-api-badge');
+  const findNeedsReviewTag = () => wrapper.findByTestId('pipeline-needs-review');
 
   const defaultProps = mockPipeline(projectPath);
 
@@ -52,6 +53,7 @@ describe('Pipeline label component', () => {
     expect(findMergedResultsTag().exists()).toBe(false);
     expect(findBranchTag().exists()).toBe(false);
     expect(findTagTag().exists()).toBe(false);
+    expect(findNeedsReviewTag().exists()).toBe(false);
   });
 
   it('should render the stuck tag when flag is provided', () => {
@@ -179,6 +181,26 @@ describe('Pipeline label component', () => {
     });
   });
 
+  describe('needs review badge', () => {
+    it('when pipeline does not have a failure reason does not render the badge', () => {
+      createComponent();
+
+      expect(findNeedsReviewTag().exists()).toBe(false);
+    });
+
+    it('when pipeline has a failure reason renders the badge', () => {
+      const failedPipeline = defaultProps.pipeline;
+      failedPipeline.flags.failure_reason = true;
+      failedPipeline.failure_reason = 'code should be reviewed by a non-AI user';
+
+      createComponent({
+        ...failedPipeline,
+      });
+      expect(findNeedsReviewTag().exists()).toBe(true);
+      expect(findNeedsReviewTag().text()).toBe('changes need approval');
+    });
+  });
+
   it('should render the merged results badge when the pipeline is a merged results pipeline', () => {
     const mergedResultsPipeline = defaultProps.pipeline;
     mergedResultsPipeline.flags.merged_result_pipeline = true;
-- 
GitLab