Skip to content

Add new recaptcha modal for snippets

Chad Woolley requested to merge new-recaptcha-modal into master

Implement new reCAPTCHA modal

NOTE: This MR is currently rebased against !51956 (merged) and its branch, BRANCH: add-recaptcha-fields-to-snippet-mutations

What does this MR do?

Adds recaptcha support to snippets create/edit via Vue, using a new recaptcha modal.

Overview

The new modal uses the Pajamas modal component and the recaptcha Javascript API.

The backend spam/recaptcha communication flow is done via GraphQL.

Note that the previous approach still exists as part of the old Vue recaptcha modal used from issue create/edit, but this can be deleted when the new approach is finished and issues can be converted to use it.

See Tasks for more details.

See #217722 (closed) for an issue with full context on all planned implementation MRs.

See !50559 (closed) for a spike/Proof of Concept showing a full working implementation of the new reCAPTCHA GraphQL support.

Tasks

  • Implement the new modal
  • Modify snippets edit Vue component to use new modal
  • Modify snippets edit Vue component to use new GraphQL-based captcha workflow
  • Test coverage for modal
  • Test coverage for edit components
  • Changelog

Exploratory Testing

NOTE: Ensure the snippet_spam feature flag is turned OFF - that feature is not yet fully implemented.

See instructions for testing reCAPTCHA in Testing Notes section of issue: #217722 (closed)

UI

  • Snippet create without akismet+recaptcha (note: Currently not possible to test in dev, due to a separate bug with editor-lite for blob field not being rendered)
  • Snippet create with akismet+recaptcha (note: Currently not possible to test in dev, due to a separate bug with editor-lite for blob field not being rendered)
  • Snippet update without akismet+recaptcha
  • Snippet update with akismet+recaptcha and snippet_spam feature flag enabled
  • Snippet update with akismet+recaptcha and snippet_spam feature flag disabled

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods (Note that snippet captcha via REST is still not supported, but this MR makes it possible via GraphQL API)
  • Security reports checked/validated by a reviewer from the AppSec team

Related Issues

Edited by Paul Slaughter

Merge request reports