Add CC validation on the pipeline details page [RUN ALL RSPEC] [RUN AS-IF-FOSS]

app/views/projects/pipelines/show.html.haml

@@ -11,6 +11,10 @@
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
   #js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } }
+
+  - if @pipeline.failed? && @pipeline.user_not_verified?
+    #js-cc-validation-required-alert
+
   - if @pipeline.commit.present?
     = render "projects/pipelines/info", commit: @pipeline.commit
 

ee/app/assets/javascripts/billings/components/cc_validation_required_alert.vue

@@ -44,6 +44,7 @@ export default {
       :dismissible="false"
       :title="$options.i18n.alertTitle"
       :primary-button-text="$options.i18n.primaryButtonText"
+      data-testid="creditCardValidationRequiredAlert"
       @primaryAction="showModal"
     >
       <gl-sprintf :message="$options.i18n.alertText">

ee/app/assets/javascripts/credit_card_validation_required_alert.js

+import Vue from 'vue';
+import CreditCardValidationRequiredAlert from 'ee/billings/components/cc_validation_required_alert.vue';
+
+export default (containerId = 'js-cc-validation-required-alert') => {
+  const el = document.getElementById(containerId);
+
+  if (!el) {
+    return false;
+  }
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(CreditCardValidationRequiredAlert);
+    },
+  });
+};

ee/app/assets/javascripts/pages/projects/pipelines/show/index.js

+import initCCValidationRequiredAlert from 'ee/credit_card_validation_required_alert';
 import initPipelineSecurityDashboard from 'ee/security_dashboard/pipeline_init';
 import initPipelines from '~/pages/projects/pipelines/init_pipelines';
 import initPipelineDetails from '~/pipelines/pipeline_details_bundle';
@@ -9,3 +10,4 @@ initPipelineDetails();
 initPipelineSecurityDashboard();
 initLicenseReport();
 initCodequalityReport();
+initCCValidationRequiredAlert();

ee/spec/features/projects/pipelines/pipeline_spec.rb

@@ -4,7 +4,8 @@ require 'spec_helper'
 
 RSpec.describe 'Pipeline', :js do
   let_it_be(:user) { create(:user) }
-  let_it_be(:project) { create(:project, :repository) }
+  let_it_be(:namespace) { create(:namespace) }
+  let_it_be(:project, reload: true) { create(:project, :repository, namespace: namespace) }
 
   before do
     stub_feature_flags(graphql_pipeline_details_users: false)
@@ -146,6 +147,42 @@ RSpec.describe 'Pipeline', :js do
         end
       end
     end
+
+    context 'when :ci_require_credit_card_on_free_plan flag is on' do
+      before do
+        allow(::Gitlab).to receive(:com?).and_return(true)
+        create(:gitlab_subscription, namespace: namespace, hosted_plan: create(:free_plan))
+
+        stub_feature_flags(ci_require_credit_card_on_free_plan: true)
+      end
+
+      context 'on free plan' do
+        it 'does not show an alert to verify an account with a credit card' do
+          subject
+
+          expect(page).not_to have_selector('[data-testid="creditCardValidationRequiredAlert"]')
+        end
+
+        context 'when failed' do
+          let!(:pipeline) do
+            create(
+              :ci_empty_pipeline,
+              project: project,
+              ref: 'master',
+              status: 'failed',
+              failure_reason: 'user_not_verified',
+              sha: project.commit.id
+            )
+          end
+
+          it 'shows an alert to verify an account with a credit card' do
+            subject
+
+            expect(page).to have_selector('[data-testid="creditCardValidationRequiredAlert"]')
+          end
+        end
+      end
+    end
   end
 
   describe 'GET /:project/-/pipelines/:id/security' do