-
Notifications
You must be signed in to change notification settings - Fork 0
feat: empty state for reviews section #869
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
colton-demetriou
commented
Nov 5, 2025
|
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 two locale keys ( Sequence Diagram(s)sequenceDiagram
autonumber
participant Editor as Visual Editor (puck)
participant Component as ReviewsSectionInternal
participant Data as ReviewsData
participant Empty as ReviewsEmptyState
participant UI as PageSection
Note over Editor,Component: Editor-aware rendering added
Editor->>Component: render({ puck, backgroundColor })
Component->>Data: read reviews state
alt data success and count > 0
Component->>UI: render reviews list
else puck.isEditing AND (no reviews or data not success)
Component->>Empty: render ReviewsEmptyState (uses i18n keys)
Empty->>UI: render editor placeholder (icon + label)
else not editing AND (no reviews or data not success)
Component->>UI: render nothing
end
Possibly related PRs
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)
🧰 Additional context used🧠 Learnings (1)📚 Learning: 2025-11-06T14:55:12.385ZApplied to files:
🧬 Code graph analysis (1)packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (4)
🪛 Biome (2.1.2)packages/visual-editor/src/components/pageSections/ReviewsSection.tsx[error] 124-124: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render. Hooks should not be called after an early return. For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order. (lint/correctness/useHookAtTopLevel) 🔇 Additional comments (2)
Comment |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
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/pageSections/ReviewsSection.tsx(6 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (4)
packages/visual-editor/src/utils/index.ts (2)
BackgroundStyle(38-38)themeManagerCn(9-9)packages/visual-editor/src/utils/themeConfigOptions.ts (1)
BackgroundStyle(35-42)packages/visual-editor/src/components/atoms/index.ts (2)
PageSection(9-9)Body(1-1)packages/visual-editor/src/hooks/useDocument.tsx (1)
useDocument(31-31)
🔇 Additional comments (16)
packages/visual-editor/locales/lt/visual-editor.json (1)
524-525: Locale additions look good.Added two new Lithuanian translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.
packages/visual-editor/locales/cs/visual-editor.json (1)
525-526: Locale additions look good.Added two new Czech translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.
packages/visual-editor/locales/hu/visual-editor.json (1)
524-525: Locale additions look good.Added two new Hungarian translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.
packages/visual-editor/locales/fi/visual-editor.json (1)
524-525: Locale additions look good.Added two new Finnish translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.
packages/visual-editor/locales/en/visual-editor.json (1)
523-524: Locale additions look good.Added two new English translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.
packages/visual-editor/locales/es/visual-editor.json (1)
523-524: Locale additions look good.Added two new Spanish translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.
packages/visual-editor/locales/zh/visual-editor.json (1)
524-525: Locale additions look good.Added two new Chinese translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.
packages/visual-editor/locales/pt/visual-editor.json (1)
524-525: Locale additions look good.Added two new Portuguese translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.
packages/visual-editor/locales/nb/visual-editor.json (1)
524-525: ✓ Localization keys added correctly.The two empty-state review keys are properly added to Norwegian locale with valid JSON syntax and appropriate translations.
packages/visual-editor/locales/et/visual-editor.json (1)
524-525: ✓ Localization keys added correctly.The two empty-state review keys are properly added to Estonian locale with valid JSON syntax and appropriate translations.
packages/visual-editor/locales/en-GB/visual-editor.json (1)
523-524: ✓ Localization keys added correctly.The two empty-state review keys are properly added to English (GB) locale with clear, idiomatic English phrasing and valid JSON syntax.
packages/visual-editor/locales/de/visual-editor.json (1)
523-524: ✓ Localization keys added correctly.The two empty-state review keys are properly added to German locale with appropriate German phrasing and valid JSON syntax.
packages/visual-editor/locales/da/visual-editor.json (1)
525-526: ✓ Localization keys added correctly.The two empty-state review keys are properly added to Danish locale with appropriate translations and valid JSON syntax.
packages/visual-editor/locales/nl/visual-editor.json (1)
524-525: ✓ Localization keys added correctly.The two empty-state review keys are properly added to Dutch locale with appropriate Dutch phrasing and valid JSON syntax.
packages/visual-editor/locales/tr/visual-editor.json (1)
524-525: ✓ Localization keys added correctly.The two empty-state review keys are properly added to Turkish locale with appropriate translations and valid JSON syntax.
packages/visual-editor/locales/lv/visual-editor.json (1)
524-525: ✓ Localization keys added correctly.The two empty-state review keys are properly added to Latvian locale with appropriate translations and valid JSON syntax.
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
♻️ Duplicate comments (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (1)
164-170: Loading state issue already flagged; add optional chaining forpuck.The loading state concern (returning empty output when
reviewsStatus !== "success") was already raised in a previous review.Additionally, line 166 should use optional chaining on
puck:- if (puck.isEditing) { + if (puck?.isEditing) { return <ReviewsEmptyState backgroundColor={backgroundColor} />; }Without optional chaining, the code will throw if
puckis undefined.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
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/pageSections/ReviewsSection.tsx(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (18)
- packages/visual-editor/locales/pt/visual-editor.json
- packages/visual-editor/locales/lt/visual-editor.json
- packages/visual-editor/locales/hu/visual-editor.json
- packages/visual-editor/locales/it/visual-editor.json
- packages/visual-editor/locales/tr/visual-editor.json
- packages/visual-editor/locales/sv/visual-editor.json
- packages/visual-editor/locales/es/visual-editor.json
- packages/visual-editor/locales/fr/visual-editor.json
- packages/visual-editor/locales/da/visual-editor.json
- packages/visual-editor/locales/zh-TW/visual-editor.json
- packages/visual-editor/locales/hr/visual-editor.json
- packages/visual-editor/locales/lv/visual-editor.json
- packages/visual-editor/locales/en-GB/visual-editor.json
- packages/visual-editor/locales/cs/visual-editor.json
- packages/visual-editor/locales/et/visual-editor.json
- packages/visual-editor/locales/sk/visual-editor.json
- packages/visual-editor/locales/nl/visual-editor.json
- packages/visual-editor/locales/nb/visual-editor.json
🧰 Additional context used
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (4)
packages/visual-editor/src/utils/themeConfigOptions.ts (1)
BackgroundStyle(35-42)packages/visual-editor/src/internal/hooks/useMessageReceivers.ts (1)
useTemplateMetadata(167-167)packages/visual-editor/src/components/atoms/index.ts (2)
PageSection(9-9)Body(1-1)packages/visual-editor/src/hooks/useDocument.tsx (1)
useDocument(31-31)
🪛 Biome (2.1.2)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx
[error] 41-41: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
🔇 Additional comments (10)
packages/visual-editor/locales/fi/visual-editor.json (1)
524-525: LGTM!The new Finnish localization keys are well-formatted, use consistent placeholder syntax with the rest of the file, and follow the established naming conventions. The translations read correctly for Finnish grammar.
packages/visual-editor/locales/pl/visual-editor.json (1)
525-526: Polish locale entries for reviews empty state look structurally sound.Both new keys follow the established JSON convention and use the
{{entityType}}placeholder consistently with other similar keys in the file (e.g., line 26, 121). The logical placement adjacent toresponseFromgroups them with other review-related content appropriately.Please verify that:
- The Polish translations are grammatically natural and align with terminology used elsewhere in the Polish locale
- The keys are correctly referenced and used in the ReviewsSection component logic (mentioned in the PR summary)
If you have access to the other localized versions (en, de, etc.) that were updated similarly, a quick cross-reference would confirm the message intent is preserved across languages.
packages/visual-editor/locales/zh/visual-editor.json (1)
524-525: Chinese locale translations verified across all language variants.The two new keys (
reviewsEmptyStateNoReviewsandreviewsEmptyStateSectionHidden) are properly formatted, correctly positioned alphabetically, and consistently implemented across all 25 locale files in the codebase. The Chinese translations accurately convey the intended messaging.packages/visual-editor/locales/en/visual-editor.json (1)
523-524: LGTM! Locale keys properly support dynamic entity types.The new empty state keys use
{{entityType}}placeholders for flexible reuse across different entity types, which aligns with the editor's template-aware architecture.packages/visual-editor/locales/de/visual-editor.json (1)
523-524: LGTM! German translations properly maintain placeholder structure.packages/visual-editor/locales/ro/visual-editor.json (1)
524-525: LGTM! Romanian translations maintain consistent structure.packages/visual-editor/locales/ja/visual-editor.json (1)
524-525: LGTM! Japanese translations maintain consistent structure.packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (3)
4-4: LGTM! New imports support editor-aware empty state functionality.The imports are properly scoped and all utilized in the new
ReviewsEmptyStatecomponent andPuckComponentintegration.Also applies to: 23-23, 25-25, 27-27
107-110: LGTM! PuckComponent integration enables editor-aware behavior.The type change and prop destructuring properly expose the
puck.isEditingflag for conditional empty state rendering.
185-185: LGTM! Background prop usage is consistent with destructuring.
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (1)
159-164: Restore the loading state and use optional chaining.By checking
reviewsStatus !== "success"on line 160, the component returns the empty state during the initial fetch when status is "pending". This removes theLoading reviews...message fromReviewsHeader(line 208) and causes a layout jump when data arrives.Additionally, line 161 should use optional chaining for defensive programming.
Apply this diff to show empty state only after loading completes with zero reviews:
- if (reviewsStatus !== "success" || (!isLoading && reviewCount === 0)) { - if (puck.isEditing) { + if (reviewsStatus === "success" && reviewCount === 0) { + if (puck?.isEditing) { return <ReviewsEmptyState backgroundColor={backgroundColor} />; } return <></>; }This ensures:
- During loading: renders
ReviewsHeaderwith "Loading reviews..." message- After successful fetch with zero reviews: shows
ReviewsEmptyStatein editor mode- After successful fetch with data: renders reviews normally
🧹 Nitpick comments (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (1)
36-74: Consider localization concerns with manual capitalization.The component manually transforms
entityTypeDisplayNameusing.toLowerCase()(line 53) and.charAt(0).toUpperCase() + .slice(1)(lines 64-65). These JavaScript string operations don't respect locale-specific capitalization rules and may not work correctly for all languages (e.g., Turkish 'i' vs 'İ', German nouns always capitalized).Additionally, the hardcoded fallback strings "page" and "Entity" are English-only and won't be localized.
Consider one of these approaches:
- Store properly cased variants of entity type names in the template metadata
- Use separate translation keys for different cases:
pt("reviewsEmptyStateNoReviews.{{entityType}}")- Let translators handle all case variations via ICU MessageFormat's
selectsyntaxExample using approach 3:
pt( "reviewsEmptyStateNoReviews", "{entityType, select, location {Location has no first party reviews} other {{entityType} has no first party reviews}}", { entityType: entityTypeDisplayName || "entity" } )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx(6 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-11-06T14:55:12.385Z
Learnt from: benlife5
Repo: yext/visual-editor PR: 862
File: packages/visual-editor/src/utils/schema/resolveSchema.ts:118-135
Timestamp: 2025-11-06T14:55:12.385Z
Learning: In `packages/visual-editor/src/utils/schema/resolveSchema.ts`, the `OpeningHoursSchema` and `PhotoGallerySchema` functions from `yext/pages-components` contain internal type validation and handle invalid inputs gracefully (returning empty objects or undefined) rather than throwing TypeErrors, so no pre-validation guards are needed before calling them.
Applied to files:
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (4)
packages/visual-editor/src/utils/themeConfigOptions.ts (1)
BackgroundStyle(35-42)packages/visual-editor/src/internal/hooks/useMessageReceivers.ts (1)
TemplateMetadataContext(167-167)packages/visual-editor/src/components/atoms/index.ts (2)
PageSection(9-9)Body(1-1)packages/visual-editor/src/hooks/useDocument.tsx (1)
useDocument(31-31)
⏰ 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 (2)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (2)
4-27: LGTM! Imports are correctly added.All new imports are properly used in the new empty state functionality.
102-105: LGTM! Component signature correctly updated for Puck integration.The refactor from
React.FCtoPuckComponentproperly enables editor-aware rendering.