Make CC validation alert dismissible

Ensure if a user needs to validate there
account the message is dismissible until
next pipeline run.

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -123,6 +123,7 @@ export default {
       isWarningDismissed: false,
       isLoading: false,
       submitted: false,
+      ccAlertDismissed: false,
     };
   },
   computed: {
@@ -151,7 +152,7 @@ export default {
       return this.form[this.refFullName]?.descriptions ?? {};
     },
     ccRequiredError() {
-      return this.error === CC_VALIDATION_REQUIRED_ERROR;
+      return this.error === CC_VALIDATION_REQUIRED_ERROR && !this.ccAlertDismissed;
     },
   },
   watch: {
@@ -292,6 +293,7 @@ export default {
     },
     createPipeline() {
       this.submitted = true;
+      this.ccAlertDismissed = false;
 
       return axios
         .post(this.pipelinesPath, {
@@ -333,13 +335,17 @@ export default {
       this.warnings = warnings;
       this.totalWarnings = totalWarnings;
     },
+    dismissError() {
+      this.ccAlertDismissed = true;
+      this.error = null;
+    },
   },
 };
 </script>
 
 <template>
   <gl-form @submit.prevent="createPipeline">
-    <cc-validation-required-alert v-if="ccRequiredError" class="gl-pb-5" />
+    <cc-validation-required-alert v-if="ccRequiredError" class="gl-pb-5" @dismiss="dismissError" />
     <gl-alert
       v-else-if="error"
       :title="errorTitle"

app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue

@@ -43,6 +43,7 @@ export default {
       isSharedRunnerEnabled: this.isEnabled,
       errorMessage: null,
       successfulValidation: false,
+      ccAlertDismissed: false,
     };
   },
   computed: {
@@ -50,7 +51,8 @@ export default {
       return (
         this.isCreditCardValidationRequired &&
         !this.isSharedRunnerEnabled &&
-        !this.successfulValidation
+        !this.successfulValidation &&
+        !this.ccAlertDismissed
       );
     },
   },
@@ -89,6 +91,7 @@ export default {
         class="gl-pb-5"
         :custom-message="$options.i18n.REQUIRES_VALIDATION_TEXT"
         @verifiedCreditCard="creditCardValidated"
+        @dismiss="ccAlertDismissed = true"
       />
 
       <gl-toggle

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

@@ -75,10 +75,10 @@ export default {
     <gl-alert
       v-else
       variant="danger"
-      :dismissible="false"
       :title="$options.i18n.dangerAlert.title"
       :primary-button-text="$options.i18n.dangerAlert.primaryButtonText"
       @primaryAction="showModal"
+      @dismiss="$emit('dismiss')"
     >
       <template v-if="customMessage">
         {{ customMessage }}

ee/spec/frontend/billings/components/cc_validation_required_alert_spec.js

@@ -58,4 +58,10 @@ describe('CreditCardValidationRequiredAlert', () => {
     expect(wrapper.vm.$refs.modal.hide).toHaveBeenCalled();
     expect(wrapper.emitted('verifiedCreditCard')).toBeDefined();
   });
+
+  it('danger alert emits dismiss event on dismiss', () => {
+    findGlAlert().vm.$emit('dismiss');
+
+    expect(wrapper.emitted('dismiss')).toBeDefined();
+  });
 });

ee/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js

@@ -64,6 +64,14 @@ describe('projects/settings/components/shared_runners', () => {
       );
     });
 
+    it('credit card alert should be hidden after dismiss', async () => {
+      findCcValidationRequiredAlert().vm.$emit('dismiss');
+
+      await wrapper.vm.$nextTick();
+
+      expect(findCcValidationRequiredAlert().exists()).toBe(false);
+    });
+
     describe('when credit card is validated', () => {
       beforeEach(() => {
         findCcValidationRequiredAlert().vm.$emit('verifiedCreditCard');

spec/frontend/pipeline_new/components/pipeline_new_form_spec.js

@@ -45,6 +45,7 @@ describe('Pipeline New Form', () => {
   const findWarningAlertSummary = () => findWarningAlert().find(GlSprintf);
   const findWarnings = () => wrapper.findAll('[data-testid="run-pipeline-warning"]');
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findCCAlert = () => wrapper.findComponent(CreditCardValidationRequiredAlert);
   const getFormPostParams = () => JSON.parse(mock.history.post[0].data);
 
   const selectBranch = (branch) => {
@@ -387,7 +388,7 @@ describe('Pipeline New Form', () => {
       });
 
       it('does not show the credit card validation required alert', () => {
-        expect(wrapper.findComponent(CreditCardValidationRequiredAlert).exists()).toBe(false);
+        expect(findCCAlert().exists()).toBe(false);
       });
 
       describe('when the error response is credit card validation required', () => {
@@ -408,7 +409,19 @@ describe('Pipeline New Form', () => {
 
         it('shows credit card validation required alert', () => {
           expect(findErrorAlert().exists()).toBe(false);
-          expect(wrapper.findComponent(CreditCardValidationRequiredAlert).exists()).toBe(true);
+          expect(findCCAlert().exists()).toBe(true);
+        });
+
+        it('clears error and hides the alert on dismiss', async () => {
+          expect(findCCAlert().exists()).toBe(true);
+          expect(wrapper.vm.$data.error).toBe(mockCreditCardValidationRequiredError.errors[0]);
+
+          findCCAlert().vm.$emit('dismiss');
+
+          await wrapper.vm.$nextTick();
+
+          expect(findCCAlert().exists()).toBe(false);
+          expect(wrapper.vm.$data.error).toBe(null);
         });
       });
     });