add codeblock tooltips and fix spacing #934
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughRefactors the product catalog editing UI to use itemDisplayName consistently, adds per-item expiry editing via a dropdown, integrates inline tooltips (including in the checkout code block), and adjusts ProductCard label resolution. Updates CodeBlock component API to accept a tooltip prop and a typed props object. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant R as ProductItemRow
participant D as DropdownMenu (Expires)
participant S as onSave handler
U->>R: Enter edit mode
R-->>U: Show header (itemDisplayName), qty input, Remove button
U->>R: Adjust quantity
U->>D: Open expires menu
D-->>U: Options (Never, ...EXPIRES_OPTIONS)
U->>D: Select expires value
D-->>R: expires = selectedValue
U->>R: Save changes
rect rgba(230,255,230,0.4)
note right of R: New behavior: expires included in save payload
R->>S: onSave({ itemId, quantity, expires })
end
S-->>R: Save result (success/error)
R-->>U: Update view / show status
%% Tooltip interaction (CodeBlock/Checkout)
U->>R: Hover info icon (tooltip)
R-->>U: Show contextual tooltip
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ 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 |
There was a problem hiding this comment.
Greptile Overview
Summary
This PR enhances the payment products management interface by adding tooltip functionality to code blocks and improving the layout spacing. The changes involve two main components: the CodeBlock component itself and its usage in the payments catalog view.The CodeBlock component now supports an optional tooltip prop that renders an informative tooltip using the SimpleTooltip component from @stackframe/stack-ui. The tooltip is positioned alongside the existing copy button in a flexbox container for proper alignment. The component's TypeScript interface has been properly updated to include the new tooltip functionality with type safety.
In the payments catalog view, the ProductItemRow editing interface has been restructured from a 3-row layout to a more compact 2-row layout. This improves visual organization by consolidating related controls (expires and repeat settings) on the same row and better aligning the remove button with the quantity input. Additionally, tooltips have been added to code block examples to provide contextual information about their functionality, and there's a consistency fix where item IDs are displayed instead of display names.
These changes integrate well with the existing codebase architecture, using established UI components and following the project's TypeScript patterns. The tooltip implementation leverages the existing UI library components and maintains consistency with other tooltip usage throughout the application.
Important Files Changed
Changed Files
| Filename | Score | Overview |
|---|---|---|
| apps/dashboard/src/components/code-block.tsx | 5/5 | Added tooltip support to CodeBlock component with proper TypeScript typing and flex layout for tooltip/copy button alignment |
| apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx | 4/5 | Restructured ProductItemRow layout from 3-row to 2-row design, added code block tooltips, and fixed item display consistency |
Confidence score: 5/5
- This PR is safe to merge with minimal risk as it focuses on UI improvements and tooltip additions without touching core business logic
- Score reflects straightforward UI enhancements with proper TypeScript implementation and good integration with existing components
- No files require special attention as both changes are well-implemented UI improvements
Sequence Diagram
sequenceDiagram
participant User
participant ProductCard
participant CodeBlock
participant SimpleTooltip
participant CopyButton
User->>ProductCard: "Hover over product card"
ProductCard->>CodeBlock: "Render code example with tooltip prop"
CodeBlock->>SimpleTooltip: "Create tooltip component with info"
Note over SimpleTooltip: "Tooltip: 'Retrieves this item for the active customer and reads the current quantity they hold.'"
CodeBlock->>CopyButton: "Create copy button for code content"
User->>SimpleTooltip: "Hover over info icon"
SimpleTooltip-->>User: "Display tooltip text"
User->>CopyButton: "Click copy button"
CopyButton-->>User: "Copy code to clipboard"
2 files reviewed, no comments
There was a problem hiding this comment.
Review by RecurseML
🔍 Review performed on 017b43f..5547ddb
✨ No bugs found, your code is sparkling clean
✅ Files analyzed, no issues (2)
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx
• apps/dashboard/src/components/code-block.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx(6 hunks)apps/dashboard/src/components/code-block.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
{apps/dashboard,apps/dev-launchpad,packages/stack-ui,packages/react}/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
For blocking alerts and errors in UI, do not use toast notifications; use alerts instead
Files:
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsxapps/dashboard/src/components/code-block.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer ES6 Map over Record when representing key–value collections
Files:
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsxapps/dashboard/src/components/code-block.tsx
{apps/dashboard,apps/dev-launchpad,packages/stack-ui,packages/react}/**/*.{tsx,jsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Keep hover/click animations snappy; avoid pre-transition delays on hover and apply transitions after the action (e.g., fade-out on hover end)
Files:
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsxapps/dashboard/src/components/code-block.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx (2)
packages/stack-ui/src/components/ui/input.tsx (1)
Input(10-41)docs/src/components/icons.tsx (1)
ChevronsUpDown(88-91)
apps/dashboard/src/components/code-block.tsx (1)
packages/stack-ui/src/components/simple-tooltip.tsx (1)
SimpleTooltip(5-46)
⏰ 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). (10)
- GitHub 8000 Check: Vercel Agent Review
- GitHub Check: docker
- GitHub Check: lint_and_build (latest)
- GitHub Check: restart-dev-and-test
- GitHub Check: docker
- GitHub Check: all-good
- GitHub Check: build (22.x)
- GitHub Check: build (22.x)
- GitHub Check: setup-tests
- GitHub Check: Security Check
🔇 Additional comments (5)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx (3)
421-437: LGTM!The EXPIRES_OPTIONS constant is well-structured with clear labels and descriptions that will help users understand the expiry behavior.
500-577: Improved UI layout organization.The refactored two-row layout with dedicated space for the item selector, quantity controls, and action buttons improves visual hierarchy and spacing. The grouping of related controls (quantity + remove) is intuitive.
675-675: LGTM!The tooltip additions provide helpful contextual information for the code blocks, correctly using the new
tooltipprop from the updated CodeBlock API.Also applies to: 1081-1081
apps/dashboard/src/components/code-block.tsx (2)
4-4: LGTM!The introduction of the
CodeBlockPropstype with explicit property definitions improves type safety and API clarity. The simplifiedReactNodeimport and optionaltooltipproperty are well-designed additions.Also applies to: 12-12, 19-28
52-57: LGTM!The header layout cleanly integrates the optional tooltip alongside the existing CopyButton. The conditional rendering with
SimpleTooltip type="info"provides a consistent user experience when tooltips are present.
High-level PR Summary
This PR adds an optional tooltip feature to code blocks and improves the UI layout and spacing in the product catalog view. The
CodeBlockcomponent now accepts atooltipprop that displays an info tooltip next to the copy button. The product catalog view receives several layout improvements including better spacing, reorganized form controls, and the addition of tooltips to code blocks that explain their purpose. The changes also swap item ID display for item display names in some places for better readability.⏱️ Estimated Review Time: 15-30 minutes
💡 Review Order Suggestion
apps/dashboard/src/components/code-block.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsxImportant
Add tooltips to code blocks and adjust spacing in
ProductItemRowfor improved UI and readability.tooltipprop toCodeBlockincode-block.tsxfor displaying tooltips with additional information.SimpleTooltipto show tooltips next to the copy button.ProductItemRowinpage-client-catalogs-view.tsxfor better layout.itemIdwithitemDisplayNamefor better readability.ProductCardfor checkout and item retrieval.This description was created by
for 5547ddb. You can customize this summary. It will automatically update as commits are pushed.
Summary by CodeRabbit
New Features
UI Improvements