Skip to content

refactor: add 'translatableString' fieldType#1190

Merged
mkilpatrick merged 7 commits intomainfrom
translatable-string
Apr 29, 2026
Merged

refactor: add 'translatableString' fieldType#1190
mkilpatrick merged 7 commits intomainfrom
translatable-string

Conversation

@mkilpatrick
Copy link
Copy Markdown
Collaborator

No description provided.

@github-actions
Copy link
Copy Markdown
Contributor

Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 29, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: a886c2e2-77e3-4632-b423-42256c0796c2

📥 Commits

Reviewing files that changed from the base of the PR and between 75461f4 and e6027e3.

⛔ Files ignored due to path filters (2)
  • packages/visual-editor/src/components/testing/screenshots/Locator/[mobile] latest version multi-pageset default props.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
  • packages/visual-editor/src/components/testing/screenshots/Locator/[tablet] latest version multi-pageset default props.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
📒 Files selected for processing (4)
  • packages/visual-editor/src/components/contentBlocks/Address.tsx
  • packages/visual-editor/src/components/contentBlocks/CtaWrapper.tsx
  • packages/visual-editor/src/components/pageSections/AboutSection/AboutSectionDetailsColumn.tsx
  • packages/visual-editor/src/fields/fields.ts
✅ Files skipped from review due to trivial changes (2)
  • packages/visual-editor/src/components/contentBlocks/Address.tsx
  • packages/visual-editor/src/components/pageSections/AboutSection/AboutSectionDetailsColumn.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/visual-editor/src/fields/fields.ts

Walkthrough

This PR removes the custom TranslatableStringField implementation and registers a built-in translatableString puck field and override. Field-type typing and conversion functions (YextFields, YextFieldMap, toPuckFields) are updated to accept both legacy and new field-map shapes. Multiple component field schemas were refactored from YextField(...) helper calls to inline translatableString field objects. A new TranslatableStringFieldOverride component implements locale-aware editing and an "apply to all locales" option. Minor unrelated tweaks include a price truthiness fix and small typing/label adjustments across several components.

Sequence Diagram(s)

sequenceDiagram
  participant Editor as Editor UI
  participant Fields as Fields Registry (toPuckFields)
  participant Override as TranslatableStringFieldOverride
  participant Doc as PageSet/Document
  participant Input as EmbeddedStringInput

  Editor->>Fields: load component schema (includes translatableString)
  Fields->>Override: resolve field override for translatableString
  Override->>Doc: read available locales and current locale
  Override->>Input: render embedded input for current locale
  Input->>Override: user edits value
  Override->>Fields: onChange -> emit updated translatable object (current locale or all locales)
  Fields->>Editor: update component data
Loading

Possibly related PRs

Suggested labels

create-dev-release

Suggested reviewers

  • briantstephan
  • jwartofsky-yext
  • asanehisa
🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Description check ❓ Inconclusive No pull request description was provided by the author, making it impossible to evaluate whether any description exists that relates to the changeset. Add a pull request description explaining the motivation, approach, and impact of introducing the new translatableString field type across the codebase.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main refactoring objective: introducing a new 'translatableString' field type that replaces the previous YextField helper pattern throughout the codebase.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch translatable-string

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 60 minutes.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
packages/visual-editor/src/fields/TranslatableStringField.test.tsx (1)

93-97: Consider using a more explicit assertion for DOM element presence.

querySelector returns null when the element isn't found, and toBeDefined() passes for null. While the test likely works because the element exists, using toBeTruthy() or toBeInTheDocument() (from @testing-library/jest-dom) would be more explicit.

💡 Suggested improvement
-    expect(container.querySelector(".ve-pt-3")).toBeDefined();
+    expect(container.querySelector(".ve-pt-3")).toBeTruthy();

Or if @testing-library/jest-dom is available:

-    expect(container.querySelector(".ve-pt-3")).toBeDefined();
+    expect(container.querySelector(".ve-pt-3")).toBeInTheDocument();
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/visual-editor/src/fields/TranslatableStringField.test.tsx` around
lines 93 - 97, The assertion using container.querySelector(".ve-pt-3") with
toBeDefined is too permissive; update the test in
TranslatableStringField.test.tsx to assert element presence explicitly by
replacing toBeDefined with either toBeTruthy() or, if `@testing-library/jest-dom`
is available, toBeInTheDocument() for clearer semantics, and ensure the
appropriate jest-dom matchers are imported/registered if you choose to use
toBeInTheDocument(); keep the rest of the expectation
(screen.getByTestId("entity-input").dataset.filter) unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/visual-editor/src/editor/README.md`:
- Line 248: The link fragment "(##YextEntityFieldSelector)" is invalid; replace
it with the proper heading fragment form that matches the generated anchor for
the "YextEntityFieldSelector" heading (e.g., "#yextentityfieldselector" or the
exact kebab-case fragment generated by the doc tool) inside the README text so
the cross-reference resolves; locate the occurrence in the `YextField`
description and update the fragment to the correct heading fragment for the
`YextEntityFieldSelector` section.

In `@packages/visual-editor/src/editor/YextField.tsx`:
- Around line 118-121: The change removed "translatableString" from the
YextFieldConfig type union which breaks callers using YextField(..., { type:
"translatableString" }); restore compatibility by including "translatableString"
back into the YextFieldConfig (the union derived from YextPuckFields in
YextField.tsx) so that YextField, YextFieldConfig, and any code referencing
YextPuckFields still accept that type; update the type declaration that
currently excludes "translatableString" to keep it allowed (while you may still
map it to the default handling path inside YextField).

---

Nitpick comments:
In `@packages/visual-editor/src/fields/TranslatableStringField.test.tsx`:
- Around line 93-97: The assertion using container.querySelector(".ve-pt-3")
with toBeDefined is too permissive; update the test in
TranslatableStringField.test.tsx to assert element presence explicitly by
replacing toBeDefined with either toBeTruthy() or, if `@testing-library/jest-dom`
is available, toBeInTheDocument() for clearer semantics, and ensure the
appropriate jest-dom matchers are imported/registered if you choose to use
toBeInTheDocument(); keep the rest of the expectation
(screen.getByTestId("entity-input").dataset.filter) unchanged.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: abd75ad7-2314-4303-9106-4f87f784c80c

📥 Commits

Reviewing files that changed from the base of the PR and between 4ffb140 and 75461f4.

📒 Files selected for processing (25)
  • packages/visual-editor/src/components/Locator.tsx
  • packages/visual-editor/src/components/LocatorResultCard.tsx
  • packages/visual-editor/src/components/contentBlocks/CtaWrapper.tsx
  • packages/visual-editor/src/components/contentBlocks/Phone.tsx
  • packages/visual-editor/src/components/contentBlocks/image/Image.tsx
  • packages/visual-editor/src/components/footer/CopyrightMessageSlot.tsx
  • packages/visual-editor/src/components/footer/FooterExpandedLinkSectionSlot.tsx
  • packages/visual-editor/src/components/footer/FooterExpandedLinksWrapper.tsx
  • packages/visual-editor/src/components/footer/FooterLinksSlot.tsx
  • packages/visual-editor/src/components/header/HeaderLinks.tsx
  • packages/visual-editor/src/components/pageSections/Breadcrumbs.tsx
  • packages/visual-editor/src/components/pageSections/ProductSection/ProductCard.tsx
  • packages/visual-editor/src/editor/ParentData.tsx
  • packages/visual-editor/src/editor/README.md
  • packages/visual-editor/src/editor/TranslatableStringField.tsx
  • packages/visual-editor/src/editor/YextField.test.tsx
  • packages/visual-editor/src/editor/YextField.tsx
  • packages/visual-editor/src/editor/index.ts
  • packages/visual-editor/src/fields/TranslatableStringField.test.tsx
  • packages/visual-editor/src/fields/TranslatableStringField.tsx
  • packages/visual-editor/src/fields/fields.ts
  • packages/visual-editor/src/fields/index.ts
  • packages/visual-editor/src/internal/puck/constant-value-fields/EnhancedCallToAction.tsx
  • packages/visual-editor/src/internal/puck/constant-value-fields/Image.tsx
  • packages/visual-editor/src/internal/puck/constant-value-fields/Text.tsx
💤 Files with no reviewable changes (2)
  • packages/visual-editor/src/editor/index.ts
  • packages/visual-editor/src/editor/TranslatableStringField.tsx

Comment thread packages/visual-editor/src/editor/README.md
Comment thread packages/visual-editor/src/editor/YextField.tsx
mkilpatrick and others added 2 commits April 29, 2026 15:46
benlife5
benlife5 previously approved these changes Apr 29, 2026
Comment thread packages/visual-editor/src/components/contentBlocks/CtaWrapper.tsx Outdated
asanehisa
asanehisa previously approved these changes Apr 29, 2026
Copy link
Copy Markdown
Contributor

@asanehisa asanehisa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto ben's comments. also wonder if wanna move our files from internal/puck/constant-value-fields/ elsewhere?

@mkilpatrick mkilpatrick dismissed stale reviews from asanehisa and benlife5 via e6027e3 April 29, 2026 21:02
@mkilpatrick mkilpatrick merged commit be8bf3a into main Apr 29, 2026
17 checks passed
@mkilpatrick mkilpatrick deleted the translatable-string branch April 29, 2026 21:24
jwartofsky-yext pushed a commit that referenced this pull request Apr 29, 2026
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants