Skip to content

Fix Google reCAPTCHA form submit button not visible in pipelines CC form

Eugie Limpin requested to merge el-fix-pipelines-cc-validation-form into master

What does this MR do and why?

This MR resolves #378041 (closed).

To accommodate Google reCAPTCHA challenge form, the height of the iframe is set to 480px. Without doing this, the iframe height is insufficient to display the challenge form in its entirety and the submit button of the form is not visible to the user and cannot be clicked.

Screenshots or screen recordings

Before After
Screenshot_2023-11-08_at_5.33.52_PM Screenshot_2023-11-08_at_5.32.28_PM

How to set up and validate locally

  1. Set up Customers app. Ensure you have zuora_payment_method_validation_page_id configured to an HPM form with captcha enabled

  2. Start GDK with SIMULATE_GITLAB_SAAS=1

  3. To make things easier, update User#requires_credit_card? to

    # ee/app/models/ee/user.rb
    def requires_credit_card?(project)
       return true
    end
  4. Login root (make sure it has no associated Users::CreditCardValidation record), go to http://localhost:3000/flightjs/Flight/-/pipelines/new, set the branch to anything other than master then click Run pipeline

  5. You should see "User validation required" alert

    Screenshot_2023-11-09_at_12.39.43_PM

  6. Click on "Validate account", click on the Google reCAPTCHA checkbox

  7. Validate that you can see the entirety of the challenge form

    Screenshot_2023-11-09_at_12.40.38_PM

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Eugie Limpin

Merge request reports