Integrate Marketo Translations with the site

1. Change Summary

[Describe what is changing, why, and the impact]

  • Nuxt composable to handle form translation logic; remove the pure JS script approach.
    • The translations for the files will live in i18n/locales/**/marketo.yml
    • add docs/marketo-form-translations.md
  • This removes a chunk of the hacky localized stepped‑form logic in MktoForm (not all of it).
  • This MVC will target existing translation files
    • useMarketoTranslation compostable has the following functions:
      • loadTranslations - grabs yaml files from the repo
      • resolveTranslation - tells us if there's a form-specific override, and to use it if it finds it. Otherwise, use the global value.
      • applySelectOptionTranslations - uses Marketo API to find and apply input field matches
      • applyCheckboxes, applyTextNodes/ applyButtons: handles specific querySelector matches for checkboxes, text, buttons
        • add useMarketoTranslations,hasSupportedInlineMarkdown,renderInlineMarkdown: utility to render markdown only on text nodes
        • Since Vue isn't helping us render the form, I can't use MDC, which is a shame. I wrote a small utility to help us with that here.
      • setupErrorObserver - for error messages
      • applyHiddenFields - english-only hidden fields that are added for tracking purposes
  • Add appropriate test files
    • tests/yamlValidation/marketoYamlSchema.test.ts
    • tests/useMarketoTranslations/useMarketoTranslations.test.ts
  • The translations will only be applied to pages that currently get translated via script
    • This is accomplished with a YAML value in the form config.enableTranslations === true
  • packages being added:
    • @rollup/plugin-yaml: allows us to import YAML files as if they were JavaScript in our code. Translations are loaded into memory as if they were any plain JS object
      • import { translation } from './locales/whatever.yaml'
    • jsdom
      • The tests I wrote involve some pretend HTML. This package gives us access to the DOM APIs that I'm using in useMarketoTranslations such as querySelector, document , querySelectorAll
  • Add Jenny/Jameson to CODEOWNERS - We will need to get them in a group similar to content maintainers (nonblocking)

2. QA Checklist

[This merge request should follow all best practices utilizing our team code standards and our project's development documentation]

  • Code Cleanup: Any messages, linter warnings, and/or deprecation warnings are cleaned up in the console
  • Tech Debt: I have created, or documented, any fast follow-up work that needs to be done after this MR is merged
  • Common Component Regression Check: I have verified all impacted pages of my common component updates have been checked for regressions and UX is aware of any wider-scoped visual changes
  • Efficient Code Review: I have tested and reviewed my own changes thoroughly before assigning a reviewer
  • Cross-browser compatibility: Works on Safari, Chrome, and Firefox
  • Localization checked for regressions

To test:

  1. This is specific to these forms since they're currently being translated by this other script in production. There's a file called translations.js coming from the Network tab. Block the request coming from https://page.gitlab.com/rs/194-VVC-221/images/translations.js?version=2, but don't block anything else from that domain. The form should still work as expected.
  2. Are the right forms being translated? Are there no regressions on other parts of the site?
  3. Are all of the correct content entries accounted for and are being applied across all locales?
  4. Do the tests for you pass locally? Do the tests make sense?
  5. Is the code logic understandable? How are the comments?
  6. Are there any unexpected console errors you find?

[Provide concise steps to test the changes]

Review App(non-english locales)

Production Review app
https://about.gitlab.com/sales/ https://marketo-integrate-with-site.about.gitlab-review.app/sales/
https://about.gitlab.com/pricing/premium-promo/ https://marketo-integrate-with-site.about.gitlab-review.app/pricing/premium-promo/
https://about.gitlab.com/solutions/gitlab-duo-pro/sales/ https://marketo-integrate-with-site.about.gitlab-review.app/solutions/gitlab-duo-pro/sales/

3. Deployment Steps

  1. Is Marketing Ops looped into this change? They will be needed to turn off the script from Marketo on these select pages when hitting production.
  2. Is Localization looped into this change? They will need to help QA the locales, their entries, and possibly get content editors looped in here for future updates.
  3. When would be a good time to deploy this change?

[List key deployment steps or configurations]

Relates to https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/issues/1152

Edited by Javier Garcia

Merge request reports

Loading