Replace custom Select component with native select in webhook filter UI #7213
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FilterDetailsStep
User->>FilterDetailsStep: Selects event/function from native <select>
FilterDetailsStep->>FilterDetailsStep: Handles onChange, updates sigHashAbi state
Possibly related PRs
Suggested reviewers
✨ 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 #7213 +/- ##
=======================================
Coverage 55.63% 55.63%
=======================================
Files 908 908
Lines 58546 58546
Branches 4128 4128
=======================================
Hits 32572 32572
Misses 25868 25868
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
AmineAfia
force-pushed
the
Replace_custom_Select_component_with_native_select_in_webhook_filter_UI
branch
from
563e6e0 to
8eb9886
Compare
graphite-app
bot
changed the base branch from
Add_support_for_chain_filtering_in_webhook_creation
to
graphite-base/7213
| @@ -305,97 +298,46 @@ export function FilterDetailsStep({ | |||
| {watchFilterType === "event" && | |||
| Object.keys(fetchedAbis).length > 0 && | |||
| eventSignatures.length > 0 ? ( | |||
| <Select | |||
| <select | |||
There was a problem hiding this comment.
what's wrong with the shadcn components? we should really be re-using our building blocks here. if there's something not working, we fix the building block
There was a problem hiding this comment.
It doesn't scroll in prod. everything works in localhost but it breaks in prod. https://thirdwebdev.slack.com/archives/C085FEPFLN9/p1748542970097279
There was a problem hiding this comment.
so we fix the component - can't go backwards. we're trying to use a common set of components everywhere. otherwise its chaos
There was a problem hiding this comment.
agree, Im not the best person to fix such things 😅 I'll give it another try in my morning. until then the dropdown is broken in prod, if somebody complains assign the ticket to me
graphite-app
bot
force-pushed
the
Replace_custom_Select_component_with_native_select_in_webhook_filter_UI
branch
from
8eb9886 to
c019656
Compare
graphite-app
bot
force-pushed
the
graphite-base/7213
branch
from
f0fc8ba to
deeca88
Compare
graphite-app
bot
force-pushed
the
Replace_custom_Select_component_with_native_select_in_webhook_filter_UI
branch
from
c019656 to
7b60b03
Compare
![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 (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (2)
302-302: Consider extracting shared styling to reduce duplication.Both select elements use identical className styling. Consider extracting this to a constant or CSS class to follow DRY principles.
+const SELECT_STYLES = "h-10 w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"; <select - className="h-10 w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50" + className={SELECT_STYLES}And apply the same change to the function signature select on line 324.
Also applies to: 324-324
315-316: Consistent use of truncation utility for better UX.Good use of the
truncateMiddleutility for event signatures to prevent overly long option text. Consider applying the same truncation to function selectors for consistency, especially since some function selectors can also be quite long.- {func.name} (Selector: {func.signature}) + {func.name} (Selector: {truncateMiddle(func.signature, 6, 4)})Also applies to: 337-337
📜 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(1 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 (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx (2)
301-319: Good implementation of native select for event signatures.The replacement with native HTML select elements should resolve the production scrolling issues mentioned in previous comments. The event handling logic correctly adapts from
onValueChangetoonChangeand properly extracts the value usinge.target.value.
323-340: Function signature select implementation looks correct.The implementation follows the same pattern as the event signature select and correctly handles the form state updates. The option rendering appropriately displays both the function name and selector.
Merge activity
|
|
This PR has been inactive for 7 days. It is now marked as stale and will be closed in 2 days if no further activity occurs. |
[Dashboard] Fix: Replace custom Select components with native HTML selects in webhook filter UI
Notes for the reviewer
This PR replaces the custom Select components with native HTML select elements in the webhook filter UI. The change maintains the same functionality while simplifying the implementation.
How to test
Verify that the event and function signature selection dropdowns in the webhook filter UI still work correctly, displaying the same options and maintaining the same behavior when selecting items.
PR-Codex overview
This PR focuses on replacing the
Selectcomponent with a standard HTML<select>element in theFilterDetailsStepcomponent. This change simplifies the code and enhances compatibility with standard form elements.Detailed summary
Selectcomponent with<select>for event and function signatures.onChangefor the<select>element.eventSignaturesandfunctionSignaturesto output<option>elements.SelectTrigger,SelectValue, andSelectContentcomponents.Summary by CodeRabbit