feat: mapbox uses YEXT_MAPBOX_API_KEY#1227
Conversation
Removes the "Api Key" prop from the Static Map Section and Mapbox Static Map components. They now use the key from the environment variable. If the key fails to load, the component will not appear on the live page. Tested using local starter.
|
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. |
|
| Key | Languages Removed |
|---|---|
fields.apiKey |
cs,da de,en en-GB,es et,fi fr,hr hu,it ja,lt lv,nb nl,pl pt,ro sk,sv tr,zh zh-TW |
staticMapEmptyStateAddApiKey
| Key | Languages Removed |
|---|---|
staticMapEmptyStateAddApiKey |
cs,da de,en en-GB,es et,fi fr,hr hu,it ja,lt lv,nb nl,pl pt,ro sk,sv tr,zh zh-TW |
jwartofsky-yext
changed the title
jwartofsky-yext
requested review from
asanehisa,
benlife5,
briantstephan and
mkilpatrick
and removed request for
briantstephan and
mkilpatrick
|
Warning Review limit reached
More reviews will be available in 53 minutes and 57 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
WalkthroughThis PR removes the configurable Mapbox API key from the visual editor's Sequence Diagram(s)No additional sequence diagrams are generated; the primary interaction flow is already visualized in the hidden review stack. Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/visual-editor/src/components/pageSections/StaticMapSection.test.tsx (1)
47-83: ⚡ Quick winKeep a legacy-shaped fixture for the versioned migration cases.
These
version: 10cases now already use the post-migration prop shape, somigrate()no longer proves that old savedStaticMapSectiondata withdata.apiKeyis handled correctly. Keeping at least one v10 fixture in the legacy shape would preserve real migration coverage for existing layouts.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/visual-editor/src/components/pageSections/StaticMapSection.test.tsx` around lines 47 - 83, Add a legacy-shaped v10 fixture to the existing test cases so migrate() actually validates handling of the old saved StaticMapSection shape (data.apiKey). In StaticMapSection.test.tsx, add one test case with version: 10 whose document uses the legacy shape (e.g., document: { data: { apiKey: "fixture-static-map-api-key" }, ...optional fields like yextDisplayCoordinate } ) and props similar to the other v10 cases (e.g., props: { liveVisibility: true }). Ensure the new case name indicates it is the legacy v10 format so migrate() coverage includes the old data.apiKey field.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/visual-editor/locales/platform/sk/visual-editor.json`:
- Line 690: The translation for the key "staticMapEmptyStateMissingApiKey"
incorrectly uses wording that points to locale/location settings ("nastavenia
lokality"); update this Slovak value to instruct users to check the site
settings instead — replace the phrase "nastavenia lokality" with an appropriate
Slovak equivalent for "site settings" so the message mirrors the original
English intent while keeping the rest of the string unchanged.
In `@packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx`:
- Around line 78-89: The code looks up the preview iframe using
document.getElementById("preview-frame") which fails when this component runs
inside that iframe; instead detect when code is running inside the iframe (e.g.,
window.frameElement or window.parent !== window) and query the parent document
for the "preview-frame" element so the preview-frame element and its
contentDocument are found; update the logic around iframe (the iframe variable
and the conditional that checks iframe?.contentDocument and chooses
streamDocument._env.YEXT_EDIT_LAYOUT_MODE_MAPBOX_API_KEY) to use the parent
document lookup when inside the iframe so YEXT_EDIT_LAYOUT_MODE_MAPBOX_API_KEY
is correctly selected in MapboxStaticMap.tsx.
---
Nitpick comments:
In
`@packages/visual-editor/src/components/pageSections/StaticMapSection.test.tsx`:
- Around line 47-83: Add a legacy-shaped v10 fixture to the existing test cases
so migrate() actually validates handling of the old saved StaticMapSection shape
(data.apiKey). In StaticMapSection.test.tsx, add one test case with version: 10
whose document uses the legacy shape (e.g., document: { data: { apiKey:
"fixture-static-map-api-key" }, ...optional fields like yextDisplayCoordinate }
) and props similar to the other v10 cases (e.g., props: { liveVisibility: true
}). Ensure the new case name indicates it is the legacy v10 format so migrate()
coverage includes the old data.apiKey field.
🪄 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: a7f3c788-2215-4db7-be59-e45a86197cc5
📒 Files selected for processing (30)
packages/visual-editor/locales/platform/cs/visual-editor.jsonpackages/visual-editor/locales/platform/da/visual-editor.jsonpackages/visual-editor/locales/platform/de/visual-editor.jsonpackages/visual-editor/locales/platform/en-GB/visual-editor.jsonpackages/visual-editor/locales/platform/en/visual-editor.jsonpackages/visual-editor/locales/platform/es/visual-editor.jsonpackages/visual-editor/locales/platform/et/visual-editor.jsonpackages/visual-editor/locales/platform/fi/visual-editor.jsonpackages/visual-editor/locales/platform/fr/visual-editor.jsonpackages/visual-editor/locales/platform/hr/visual-editor.jsonpackages/visual-editor/locales/platform/hu/visual-editor.jsonpackages/visual-editor/locales/platform/it/visual-editor.jsonpackages/visual-editor/locales/platform/ja/visual-editor.jsonpackages/visual-editor/locales/platform/lt/visual-editor.jsonpackages/visual-editor/locales/platform/lv/visual-editor.jsonpackages/visual-editor/locales/platform/nb/visual-editor.jsonpackages/visual-editor/locales/platform/nl/visual-editor.jsonpackages/visual-editor/locales/platform/pl/visual-editor.jsonpackages/visual-editor/locales/platform/pt/visual-editor.jsonpackages/visual-editor/locales/platform/ro/visual-editor.jsonpackages/visual-editor/locales/platform/sk/visual-editor.jsonpackages/visual-editor/locales/platform/sv/visual-editor.jsonpackages/visual-editor/locales/platform/tr/visual-editor.jsonpackages/visual-editor/locales/platform/zh-TW/visual-editor.jsonpackages/visual-editor/locales/platform/zh/visual-editor.jsonpackages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsxpackages/visual-editor/src/components/pageSections/StaticMapSection.test.tsxpackages/visual-editor/src/components/pageSections/StaticMapSection.tsxpackages/visual-editor/src/docs/components.mdstarter/localData/dev-location-stream__en__cbafb9cd1c3e63d9814e236ba9181377.json
| "spacingDefaultLabel": "Predvolený", | ||
| "staticContent": "Statický obsah", | ||
| "staticMapEmptyStateAddApiKey": "Ak chcete zobraziť ukážku mapy, pridajte kľúč API", | ||
| "staticMapEmptyStateMissingApiKey": "Nepodarilo sa načítať YEXT_MAPBOX_API_KEY. Skontrolujte nastavenia lokality.", |
There was a problem hiding this comment.
Use “site settings” here, not “locale/location settings”.
Line 690 changes the meaning of the English source: nastavenia lokality points users to locale/location settings instead of site settings, so the recovery step is misleading.
💬 Suggested wording
- "staticMapEmptyStateMissingApiKey": "Nepodarilo sa načítať YEXT_MAPBOX_API_KEY. Skontrolujte nastavenia lokality.",
+ "staticMapEmptyStateMissingApiKey": "Nepodarilo sa načítať YEXT_MAPBOX_API_KEY. Skontrolujte nastavenia stránky.",🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/visual-editor/locales/platform/sk/visual-editor.json` at line 690,
The translation for the key "staticMapEmptyStateMissingApiKey" incorrectly uses
wording that points to locale/location settings ("nastavenia lokality"); update
this Slovak value to instruct users to check the site settings instead — replace
the phrase "nastavenia lokality" with an appropriate Slovak equivalent for "site
settings" so the message mirrors the original English intent while keeping the
rest of the string unchanged.
auto-screenshot-update: true
| "spacingDefaultLabel": "Default", | ||
| "staticContent": "Static content", | ||
| "staticMapEmptyStateAddApiKey": "Add an API key to preview your map", | ||
| "staticMapEmptyStateMissingApiKey": "Failed to load YEXT_MAPBOX_API_KEY. Please check your Site Settings.", |
There was a problem hiding this comment.
Maybe your site's advanced configuration since that's the label for the Storm page
2 participants
Removes the "Api Key" prop from the Static Map Section and Mapbox Static Map components.
They now use the key from the environment variable.
If the key fails to load, the component will not appear on the live page.
Tested using local starter.