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
- The translations for the files will live in
- This removes a chunk of the hacky localized stepped‑form logic in MktoForm (not all of it).
- Related: !2266 (merged)
- This MVC will target existing translation files
-
useMarketoTranslationcompostable 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 specificquerySelectormatches 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.
- add
-
setupErrorObserver- for error messages -
applyHiddenFields- english-only hidden fields that are added for tracking purposes
-
-
- Add appropriate test files
tests/yamlValidation/marketoYamlSchema.test.tstests/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
- This is accomplished with a YAML value in the form
- 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 objectimport { 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
useMarketoTranslationssuch asquerySelector,document,querySelectorAll
- The tests I wrote involve some pretend HTML. This package gives us access to the DOM APIs that I'm using in
-
- 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:
- This is specific to these forms since they're currently being translated by this other script in production. There's a file called
translations.jscoming from the Network tab. Block the request coming fromhttps://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. - Are the right forms being translated? Are there no regressions on other parts of the site?
- Are all of the correct content entries accounted for and are being applied across all locales?
- Do the tests for you pass locally? Do the tests make sense?
- Is the code logic understandable? How are the comments?
- Are there any unexpected console errors you find?
[Provide concise steps to test the changes]
Review App(non-english locales)
3. Deployment Steps
- 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.
- 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.
- 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