feat: empty secondary header state #889
Conversation
colton-demetriou
requested review from
asanehisa,
benlife5,
briantstephan and
mkilpatrick
|
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. |
WalkthroughAdds a new top-level localization key Sequence Diagram(s)sequenceDiagram
participant EditorUI as Editor UI
participant SecondaryHeader as SecondaryHeaderSlot
participant I18n as Translations
rect `#EDF7ED`
EditorUI->>SecondaryHeader: render(show, editing)
SecondaryHeader->>I18n: lookup("secondaryHeaderHiddenOnLivePage")
note right of I18n: translation returned
end
alt editing && show == false
SecondaryHeader->>EditorUI: render dashed placeholder with translated label
else show == false
SecondaryHeader->>EditorUI: render nothing
else
SecondaryHeader->>EditorUI: render PageSection (LinksSlot, LanguageDropdown)
end
sequenceDiagram
participant Header as HeaderLinks
participant Data as props.data.links
participant Render as Renderer
Header->>Data: receive links array
Header->>Header: filter validLinks (link truthy)
alt validLinks.length == 0
Header->>Render: if editing -> render draggable placeholder navigation
Header->>Render: if not editing -> render empty
else
Header->>Render: render main list from validLinks
Header->>Render: render overflow dropdown from validLinks (based on threshold)
end
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
⏰ 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)
🔇 Additional comments (4)
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: 0
🧹 Nitpick comments (1)
packages/visual-editor/locales/pt/visual-editor.json (1)
597-601: Structural inconsistency: Consider aligningsecondaryHeaderpattern withsecondaryFooter.The new
secondaryHeaderHiddenOnLivePagekey at line 601 uses a flat structure, while the existingsecondaryFooterat lines 597–599 uses a nested object pattern for its hidden state. This inconsistency may create confusion for maintainers and future locale updates.Consider restructuring to match the
secondaryFooterpattern:"secondaryFooter": { "hiddenOnLivePage": "Rodapé secundário (oculto na página ao vivo)" }, - "secondaryHeader": "Cabeçalho secundário", - "secondaryHeaderHiddenOnLivePage": "Cabeçalho secundário (oculto na página ao vivo)", + "secondaryHeader": { + "default": "Cabeçalho secundário", + "hiddenOnLivePage": "Cabeçalho secundário (oculto na página ao vivo)" + },Alternatively, if the flat structure is intentional (e.g., due to component code using
t("secondaryHeaderHiddenOnLivePage")), consider refactoringsecondaryFooterfor consistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 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/header/HeaderLinks.tsx(2 hunks)packages/visual-editor/src/components/header/SecondaryHeaderSlot.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
packages/visual-editor/src/components/header/SecondaryHeaderSlot.tsx (1)
packages/visual-editor/src/components/header/languageDropdown.tsx (1)
parseDocumentForLanguageDropdown(212-280)
packages/visual-editor/src/components/header/HeaderLinks.tsx (1)
packages/visual-editor/src/components/atoms/dropdown.tsx (1)
DropdownMenuItem(79-79)
🔇 Additional comments (22)
packages/visual-editor/locales/cs/visual-editor.json (1)
602-602: Localization key correctly added and positioned.The new
secondaryHeaderHiddenOnLivePagekey is properly placed in alphabetical order betweensecondaryHeaderandsecondaryHeaderLinks, with valid JSON syntax and appropriate Czech translation.packages/visual-editor/locales/sv/visual-editor.json (1)
602-602: Localization entry follows established patterns and is properly integrated.The new
secondaryHeaderHiddenOnLivePagekey follows the naming convention of similar hidden-state translations (e.g.,secondaryFooter.hiddenOnLivePage), and the Swedish translation is linguistically consistent with existing patterns in the file. JSON syntax is valid and the key is logically placed among related secondary header translations.Please verify that:
- This key is correctly referenced in
SecondaryHeaderSlot.tsxor the component handling the hidden state- Consistent entries have been added to all 23 language locales mentioned in the PR summary
packages/visual-editor/locales/de/visual-editor.json (1)
600-600: LGTM!The new localization entry is properly formatted with correct JSON syntax, follows alphabetical ordering conventions, and uses consistent German phrasing that aligns with the pattern established by similar entries (e.g.,
secondaryFooter.hiddenOnLivePageon line 597).packages/visual-editor/locales/sk/visual-editor.json (1)
602-602: Localization key addition looks good.The new
secondaryHeaderHiddenOnLivePagekey is properly formatted, follows camelCase naming conventions, logically grouped with related secondary header translations, and the Slovak translation appears accurate. The placement betweensecondaryHeaderandsecondaryHeaderLinksmaintains good key organization.packages/visual-editor/locales/pl/visual-editor.json (1)
602-602: Localization key added correctly.The new
secondaryHeaderHiddenOnLivePagekey is properly positioned betweensecondaryHeaderandsecondaryHeaderLinks, with a contextually appropriate Polish translation.packages/visual-editor/locales/nb/visual-editor.json (1)
601-601: Localization key added correctly.The new
secondaryHeaderHiddenOnLivePagekey is properly positioned with appropriate Norwegian Bokmål translation.packages/visual-editor/locales/fr/visual-editor.json (1)
600-600: Localization key added correctly.The new
secondaryHeaderHiddenOnLivePagekey is properly positioned with appropriate French translation.packages/visual-editor/locales/en/visual-editor.json (1)
600-600: Localization key added correctly.The new
secondaryHeaderHiddenOnLivePagekey is properly positioned with the English default text"Secondary Header (Hidden on live page)", which serves as the fallback for other locales.packages/visual-editor/locales/da/visual-editor.json (1)
602-602: Localization key added correctly.The new
secondaryHeaderHiddenOnLivePagekey is properly positioned with appropriate Danish translation.packages/visual-editor/locales/lv/visual-editor.json (1)
601-601: Localization key added correctly.The new
secondaryHeaderHiddenOnLivePagekey is properly positioned with appropriate Latvian translation.packages/visual-editor/locales/et/visual-editor.json (1)
601-601: Localization key added correctly.The new
secondaryHeaderHiddenOnLivePagekey is properly positioned with appropriate Estonian translation.packages/visual-editor/locales/ro/visual-editor.json (1)
601-601: Localization key added correctly.The new
secondaryHeaderHiddenOnLivePagekey is properly positioned with appropriate Romanian translation.packages/visual-editor/locales/zh/visual-editor.json (1)
601-601: LGTM! Translation key addition is correct.The new
secondaryHeaderHiddenOnLivePagetranslation key is properly placed and aligns with the usage inSecondaryHeaderSlot.tsx.packages/visual-editor/src/components/header/HeaderLinks.tsx (3)
101-101: Solid filtering logic for valid links.The filter correctly identifies links with a truthy
linkproperty. The optional chaining ensures safety even if items are null/undefined.
103-123: Good empty state handling for the editing experience.The placeholder provides a clear visual indication in edit mode when no valid links exist, while returning an empty fragment in non-editing mode. The use of
puck.dragRefenables proper drag-and-drop functionality.
125-170: Consistent use of validLinks throughout rendering logic.All rendering paths (main list, overflow check, dropdown items) now correctly reference
validLinksinstead of the rawdata.links. The overflow logic properly checksvalidLinks.length > MAX_VISIBLEand the dropdown correctly slices fromMAX_VISIBLEonwards.packages/visual-editor/locales/hr/visual-editor.json (1)
601-601: LGTM! Translation key addition is correct.The Croatian translation for the secondary header hidden state is properly added.
packages/visual-editor/locales/fi/visual-editor.json (1)
601-601: LGTM! Translation key addition is correct.The Finnish translation for the secondary header hidden state is properly added.
packages/visual-editor/locales/zh-TW/visual-editor.json (1)
601-601: LGTM! Translation key addition is correct.The Traditional Chinese translation for the secondary header hidden state is properly added.
packages/visual-editor/src/components/header/SecondaryHeaderSlot.tsx (3)
11-11: Good addition of i18n support.The import and usage of
useTranslationenables localized labels for the hidden state placeholder.Also applies to: 94-94
103-121: Excellent conditional rendering logic for editing vs. live modes.The logic correctly handles three states:
- Editing + hidden: Shows a dashed placeholder with translated text, enabling drag-and-drop via
dragRef- Non-editing + hidden: Returns empty fragment (hidden on live page)
- Show enabled: Renders the full section (handled below)
The placeholder styling clearly indicates the hidden state while maintaining editability.
123-136: Proper rendering of visible secondary header with drag support.When
showis true, the PageSection correctly renders with:
- dragRef for editor drag-and-drop
- Inherited maxWidth from parent styles
- Background and padding styles
- Child slots for links and language dropdown
packages/visual-editor/src/components/header/SecondaryHeaderSlot.tsx
Outdated
Show resolved
Hide resolved
colton-demetriou
merged commit 6f8f7e9
into
fall-2025-slot-ify-components
3 participants
Also added empty slot state for header links