feat: add mapbox empty state

[colton-demetriou]

[github-actions]

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]

Walkthrough

Added two new localization keys (staticMapEmptyStateAddApiKey, staticMapEmptyStateSectionHidden) to visual-editor locale JSON files across many languages. MapboxStaticMap component signature was changed to a puck-aware component (accepts editing state via puck/isEditing) and now renders an editor-only empty-state UI when an API key is missing. StaticMapSection wrapper was updated to accept and forward puck context and id to the MapboxStaticMapComponent.

Sequence Diagram(s)

sequenceDiagram
  participant EditorUI as Visual Editor UI
  participant StaticMapSection as StaticMapSection Wrapper
  participant MapboxComponent as MapboxStaticMapComponent
  participant Locale as Localized Strings

  Note over EditorUI,StaticMapSection: Page rendered (editor or published)
  EditorUI->>StaticMapSection: render(props, puckContext?, id?)
  StaticMapSection->>MapboxComponent: render(props + puckContext + id)

  alt apiKey present
    MapboxComponent->>MapboxComponent: render static map (uses apiKey)
  else apiKey missing and puckContext.isEditing == true
    MapboxComponent->>Locale: lookup `staticMapEmptyStateAddApiKey` / `staticMapEmptyStateSectionHidden`
    MapboxComponent->>EditorUI: render editor-only empty-state UI (localized)
  else apiKey missing and not editing
    MapboxComponent->>EditorUI: log warning and render nothing
  end

Loading

Suggested labels

create-dev-release

Suggested reviewers

• mkilpatrick
• briantstephan
• asanehisa

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description contains only a screenshot without text explaining the changes, making it insufficient to convey meaningful information about the changeset.	Add a textual description explaining what the screenshot shows and the purpose of the changes, such as describing the new empty state UI and why it was added.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: add mapbox empty state' directly matches the primary change—adding an empty state UI for Mapbox static maps when an API key is missing during editing.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch mapbox-empty

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dd87509 and e51cc07.

📒 Files selected for processing (1)

• packages/visual-editor/src/components/pageSections/StaticMapSection.tsx (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/visual-editor/src/components/pageSections/StaticMapSection.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: call_unit_test / unit_tests (18.x)
• GitHub Check: call_unit_test / unit_tests (20.x)
• GitHub Check: semgrep/ci

---

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

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 068bd24 and 13bcb8d.

📒 Files selected for processing (27)

• packages/visual-editor/locales/cs/visual-editor.json (1 hunks)
• packages/visual-editor/locales/da/visual-editor.json (1 hunks)
• packages/visual-editor/locales/de/visual-editor.json (1 hunks)
• packages/visual-editor/locales/en-GB/visual-editor.json (1 hunks)
• packages/visual-editor/locales/en/visual-editor.json (1 hunks)
• packages/visual-editor/locales/es/visual-editor.json (1 hunks)
• packages/visual-editor/locales/et/visual-editor.json (1 hunks)
• packages/visual-editor/locales/fi/visual-editor.json (1 hunks)
• packages/visual-editor/locales/fr/visual-editor.json (1 hunks)
• packages/visual-editor/locales/hr/visual-editor.json (1 hunks)
• packages/visual-editor/locales/hu/visual-editor.json (1 hunks)
• packages/visual-editor/locales/it/visual-editor.json (1 hunks)
• packages/visual-editor/locales/ja/visual-editor.json (1 hunks)
• packages/visual-editor/locales/lt/visual-editor.json (1 hunks)
• packages/visual-editor/locales/lv/visual-editor.json (1 hunks)
• packages/visual-editor/locales/nb/visual-editor.json (1 hunks)
• packages/visual-editor/locales/nl/visual-editor.json (1 hunks)
• packages/visual-editor/locales/pl/visual-editor.json (1 hunks)
• packages/visual-editor/locales/pt/visual-editor.json (1 hunks)
• packages/visual-editor/locales/ro/visual-editor.json (1 hunks)
• packages/visual-editor/locales/sk/visual-editor.json (1 hunks)
• packages/visual-editor/locales/sv/visual-editor.json (1 hunks)
• packages/visual-editor/locales/tr/visual-editor.json (1 hunks)
• packages/visual-editor/locales/zh-TW/visual-editor.json (1 hunks)
• packages/visual-editor/locales/zh/visual-editor.json (1 hunks)
• packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx (4 hunks)
• packages/visual-editor/src/components/pageSections/StaticMapSection.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

packages/visual-editor/src/components/pageSections/StaticMapSection.tsx (1)

packages/visual-editor/src/components/pageSections/index.ts (1)

• StaticMapSectionProps (75-75)

packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx (2)

packages/visual-editor/src/utils/index.ts (1)

• themeManagerCn (9-9)

packages/visual-editor/src/components/atoms/index.ts (1)

• Body (1-1)

🪛 Biome (2.1.2)

packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx

[error] 17-17: Do not shadow the global "Map" property.

Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.

(lint/suspicious/noShadowRestrictedNames)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: call_unit_test / unit_tests (20.x)
• GitHub Check: call_unit_test / unit_tests (18.x)
• GitHub Check: semgrep/ci

🔇 Additional comments (26)

packages/visual-editor/locales/nb/visual-editor.json (1)

540-541: LGTM! Localization additions look good.

The two new translation keys are correctly added and provide appropriate Norwegian translations for the static map empty state feature. The placement is consistent with other locale files in this PR.

packages/visual-editor/locales/sv/visual-editor.json (1)

541-542: LGTM! Localization additions look good.

The Swedish translations for the empty state keys are correctly added and consistent with the broader localization effort in this PR.

packages/visual-editor/locales/pl/visual-editor.json (1)

541-542: LGTM! Localization additions look good.

The Polish translations are correctly added and align with the empty state feature requirements.

packages/visual-editor/locales/lv/visual-editor.json (1)

540-541: LGTM! Localization additions look good.

The Latvian translations for the static map empty state are correctly added and consistent with other locales.

packages/visual-editor/locales/fi/visual-editor.json (1)

540-541: LGTM! Localization additions look good.

The Finnish translations are correctly added and provide appropriate messaging for the empty state UI.

packages/visual-editor/locales/lt/visual-editor.json (1)

540-541: LGTM! Localization additions look good.

The Lithuanian translations are correctly added and consistent with the broader localization pattern in this PR.

packages/visual-editor/locales/tr/visual-editor.json (1)

540-541: LGTM! Localization additions look good.

The Turkish translations for the empty state messaging are correctly added and complete the localization coverage for this feature.

packages/visual-editor/src/components/pageSections/StaticMapSection.tsx (3)

91-96: LGTM! Clean state propagation implementation.

The wrapper function correctly accepts the puck prop and safely derives the isEditing state using optional chaining and nullish coalescing. The default value of false ensures safe behavior when puck is undefined.

---

112-112: LGTM! Editing state correctly passed to map component.

The isEditing prop is properly passed to MapboxStaticMapComponent, enabling the empty state UI to display when the API key is missing during editing.

---

142-142: LGTM! Puck prop correctly propagated.

The puck object is properly passed through to the wrapper component, maintaining the editing state context throughout the component tree.

packages/visual-editor/locales/fr/visual-editor.json (1)

539-541: Localization keys properly added with accurate French translations.

The two new static map empty-state keys (staticMapEmptyStateAddApiKey and staticMapEmptyStateSectionHidden) are correctly placed and translated to French with appropriate messaging for the editor context.

packages/visual-editor/locales/nl/visual-editor.json (1)

540-541: Localization keys properly added with accurate Dutch translations.

The two new static map empty-state keys are correctly placed and translated to Dutch. Translations align with the French and other language versions.

packages/visual-editor/locales/ja/visual-editor.json (1)

540-541: Localization keys properly added with accurate Japanese translations.

The two new static map empty-state keys are correctly placed and translated to Japanese. Translations are contextually appropriate and consistent with other locale additions in this PR.

packages/visual-editor/locales/zh/visual-editor.json (1)

540-541: Localization keys properly added with accurate Simplified Chinese translations.

The two new static map empty-state keys are correctly placed and translated to Simplified Chinese. Translations maintain consistency with the PR's localization strategy.

packages/visual-editor/locales/it/visual-editor.json (1)

540-541: Localization keys properly added with accurate Italian translations.

The two new static map empty-state keys are correctly placed and translated to Italian with appropriate phrasing for the editor UI context.

packages/visual-editor/locales/hr/visual-editor.json (1)

540-541: Localization keys properly added with accurate Croatian translations.

The two new static map empty-state keys are correctly placed and translated to Croatian. Translations are contextually appropriate and follow the established pattern across all locale files.

packages/visual-editor/locales/zh-TW/visual-editor.json (1)

540-541: Localization keys properly added with accurate Traditional Chinese translations.

The two new static map empty-state keys are correctly placed and translated to Traditional Chinese, maintaining distinction from the Simplified Chinese variant.

packages/visual-editor/locales/cs/visual-editor.json (1)

541-542: Localization keys properly added with accurate Czech translations.

The two new static map empty-state keys are correctly placed and translated to Czech. All locale files in this PR demonstrate consistent implementation of the same two keys across 8 languages.

packages/visual-editor/locales/de/visual-editor.json (1)

539-540: Localization strings added consistently across all locales.

Two new translation keys have been added in the correct location (following staticContent) with appropriate German translations for the Mapbox static map empty-state messaging. JSON structure is valid and formatting is correct.

packages/visual-editor/locales/hu/visual-editor.json (1)

540-541: Hungarian translations added with consistent placement and correct formatting.

Both new localization keys are present with appropriate Hungarian translations. The additions follow the same pattern observed in other locale files, maintaining consistency across the localization expansion.

packages/visual-editor/locales/en/visual-editor.json (1)

539-540: English localization strings properly formatted and placed.

Two new keys added for the static map empty-state UI with clear, concise English messaging. Formatting is consistent with the established pattern across all provided locale files.

packages/visual-editor/locales/sk/visual-editor.json (1)

541-542: Slovak translations added with proper localization and correct formatting.

Both keys are present with appropriate Slovak messaging, including proper diacritical marks. The additions maintain consistency with other locale files in this PR.

packages/visual-editor/locales/ro/visual-editor.json (1)

540-541: Romanian localization strings correctly added with proper character encoding.

Both new keys are present with appropriate Romanian translations and proper special character handling. Placement and formatting are consistent with the established pattern across all locales.

packages/visual-editor/locales/en-GB/visual-editor.json (1)

539-540: British English localization strings properly added.

Both keys present with appropriate English messaging (British English variant). Consistent placement and formatting aligned with all other locale files in the PR.

packages/visual-editor/locales/da/visual-editor.json (1)

541-542: Danish localization strings correctly formatted and placed.

Both new keys added with appropriate Danish translations. Placement and structure are consistent with all other locale files in this expansion.

packages/visual-editor/locales/es/visual-editor.json (1)

539-540: Spanish localization strings added with correct translations and consistent placement.

Both new keys present with appropriate Spanish messaging. Note: the second key in the Spanish locale includes a trailing period ("ubicaciones.") while other locales omit the trailing punctuation—this is a minor stylistic inconsistency but does not impact functionality or user experience.