Replace Select with Popover in webhook signature selection UI #7219
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe code replaces a custom Select component for signature selection with a new SignatureDropdown component built on a Popover UI. The SignatureDropdown is reusable, manages its own open state, and displays both primary and secondary signature information. The rest of the form logic remains unchanged, with only the selection UI updated. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FilterDetailsStep
participant SignatureDropdown
User->>FilterDetailsStep: Interacts with form
FilterDetailsStep->>SignatureDropdown: Renders dropdown with signatures
User->>SignatureDropdown: Clicks dropdown button
SignatureDropdown->>SignatureDropdown: Opens popover, displays list
User->>SignatureDropdown: Selects a signature
SignatureDropdown->>FilterDetailsStep: Calls onChange with selected value
FilterDetailsStep->>FilterDetailsStep: Updates form field and ABI
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7219 +/- ##
==========================================
- Coverage 55.65% 55.63% -0.02%
==========================================
Files 908 908
Lines 58546 58546
Branches 4130 4128 -2
==========================================
- Hits 32582 32572 -10
- Misses 25858 25868 +10
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
AmineAfia
force-pushed
the
Replace_Select_with_Popover_in_webhook_signature_selection_UI
branch
from
604c55a to
f4e5cd1
Compare
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![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)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (1)
61-117: Excellent SignatureDropdown component implementation.The component is well-structured with proper:
- State management using
useStatefor open/close behavior- Accessibility with semantic button elements and keyboard navigation
- Responsive design with proper width matching (
--radix-popover-trigger-width)- Error handling with fallbacks for missing values
- Clean separation of concerns with callback props
The implementation follows React and accessibility best practices.
Consider this minor performance optimization if the signatures array becomes large:
function SignatureDropdown({ signatures, value, onChange, setAbi, buttonLabel, secondaryTextFormatter, disabled, }: SignatureDropdownProps) { const [open, setOpen] = useState(false); + const selectedSignature = useMemo( + () => signatures.find((sig) => sig.signature === value), + [signatures, value] + ); return ( <Popover modal open={open} onOpenChange={setOpen}> <PopoverTrigger asChild> <button type="button" className={cn( "h-10 w-full rounded-md border bg-background px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50", !value && "text-muted-foreground", )} disabled={disabled} > - {value - ? signatures.find((sig) => sig.signature === value)?.name || "" - : buttonLabel} + {value ? selectedSignature?.name || "" : buttonLabel} </button> </PopoverTrigger> // ... rest of the component </Popover> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/abiUtils.ts (1)
truncateMiddle(11-19)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (3)
15-18: LGTM! Clean import updates for the UI refactor.The imports are correctly updated to support the Popover-based implementation. Adding
cnutility anduseStatehook are appropriate for the new component's functionality.Also applies to: 21-21, 23-23
51-59: Well-defined interface with comprehensive typing.The
SignatureDropdownPropsinterface properly defines all necessary props with correct TypeScript types. The optionaldisabledprop and function signatures provide good flexibility.
376-385: Perfect integration of SignatureDropdown in the form.Both usage instances correctly:
- Pass all required props with proper values
- Handle form state updates via
onChangeandsetAbicallbacks- Provide contextually appropriate labels and formatters
- Maintain existing form validation and error handling
The event signature uses
truncateMiddlefor better display of long signatures, while function signatures show the full selector - this differentiation makes sense for the respective use cases.Also applies to: 389-398
Merge activity
|
## [Dashboard] Feature: Replace Select with Popover for Event and Function Signature Selection
## Notes for the reviewer
This PR replaces the Select component with a Popover component for both event and function signature selection in the webhook filter details step. The change improves the user experience by providing a more customizable dropdown interface.
Key changes:
- Replaced Select/SelectContent/SelectItem with Popover/PopoverContent/PopoverTrigger
- Added state hooks to manage popover open states
- Improved styling and layout of signature selection options
- Maintained existing functionality for selecting signatures and updating form values
## How to test
Test the webhook creation flow, specifically when selecting event or function signatures. Verify that:
1. The popover opens and closes correctly
2. Selecting a signature properly updates the form
3. The selected signature displays correctly in the trigger button
4. The signature details (name, hash/selector) are properly displayed
<!-- start pr-codex -->
---
## PR-Codex overview
This PR refactors the `FilterDetailsStep` component to replace the `Select` dropdowns with a new `SignatureDropdown` component, enhancing the UI interaction by using a `Popover` for selecting event and function signatures.
### Detailed summary
- Removed `Select` dropdowns for event and function signatures.
- Introduced `SignatureDropdown` component for better UI/UX.
- Integrated `Popover` for displaying signature options.
- Updated state management for selected signatures and ABIs.
- Added new props for `SignatureDropdown` to handle selection and display.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new dropdown for selecting event and function signatures, offering a clearer and more interactive selection experience.
- **Style**
- Updated the signature selection interface to use a popover-based dropdown for improved usability and consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
Replace_Select_with_Popover_in_webhook_signature_selection_UI
branch
from
f4e5cd1 to
5234124
Compare
graphite-app
bot
deleted the
Replace_Select_with_Popover_in_webhook_signature_selection_UI
branch
[Dashboard] Feature: Replace Select with Popover for Event and Function Signature Selection
Notes for the reviewer
This PR replaces the Select component with a Popover component for both event and function signature selection in the webhook filter details step. The change improves the user experience by providing a more customizable dropdown interface.
Key changes:
How to test
Test the webhook creation flow, specifically when selecting event or function signatures. Verify that:
PR-Codex overview
This PR refactors the
FilterDetailsStepcomponent by replacing theSelectdropdowns with a newSignatureDropdowncomponent that utilizes aPopoverfor better UI/UX. This change improves the selection of event and function signatures.Detailed summary
Selectcomponents for event and function signatures.SignatureDropdowncomponent to handle signature selection.Popoverfor dropdown functionality inSignatureDropdown.SignatureDropdown.Summary by CodeRabbit
New Features
Style