fix(SavedQueries): unify query card actions styling across all home page cards #36671
Conversation
|
CodeAnt AI is reviewing your PR. |
Code Review Agent Run #aa9f67Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
codeant-ai-for-open-source
bot
added
the
size:S
Nitpicks 🔍
|
![codeant-ai-for-open-source[bot]](https://avatars.githubusercontent.com/u/151810221?s=60&v=4){kind=small}
| <ListViewCard.Actions | ||
| onClick={e => { | ||
| e.stopPropagation(); | ||
| e.preventDefault(); | ||
| }} | ||
| > | ||
| <Dropdown | ||
| menu={{ items: menuItems(q) }} | ||
| trigger={['click', 'hover']} | ||
| > | ||
| <Dropdown | ||
| menu={{ | ||
| items: menuItems(q), | ||
| }} | ||
| trigger={['click', 'hover']} | ||
| > | ||
| <Button buttonSize="xsmall" buttonStyle="link"> | ||
| <Icons.MoreOutlined iconColor={theme.colorText} /> | ||
| </Button> | ||
| </Dropdown> | ||
| </ListViewCard.Actions> | ||
| </QueryData> | ||
| <Button buttonSize="xsmall" buttonStyle="link"> |
There was a problem hiding this comment.
Suggestion: The click handler that stops propagation and calls preventDefault is attached to the container (ListViewCard.Actions), which interferes with the Dropdown's trigger and may prevent the menu from opening; move the event handling to the actual clickable Button and only stop propagation (avoid preventDefault) so the Dropdown still receives/handles the click as expected. [logic error]
Severity Level: Minor
| <ListViewCard.Actions | |
| onClick={e => { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| }} | |
| > | |
| <Dropdown | |
| menu={{ items: menuItems(q) }} | |
| trigger={['click', 'hover']} | |
| > | |
| <Dropdown | |
| menu={{ | |
| items: menuItems(q), | |
| }} | |
| trigger={['click', 'hover']} | |
| > | |
| <Button buttonSize="xsmall" buttonStyle="link"> | |
| <Icons.MoreOutlined iconColor={theme.colorText} /> | |
| </Button> | |
| </Dropdown> | |
| </ListViewCard.Actions> | |
| </QueryData> | |
| <Button buttonSize="xsmall" buttonStyle="link"> | |
| <ListViewCard.Actions> | |
| <Dropdown | |
| menu={{ items: menuItems(q) }} | |
| trigger={['click', 'hover']} | |
| > | |
| <Button | |
| buttonSize="xsmall" | |
| buttonStyle="link" | |
| onClick={e => { | |
| // Only stop propagation to avoid clicking the card parent, | |
| // but don't call preventDefault so Dropdown can handle the event. | |
| e.stopPropagation(); | |
| }} | |
| > |
Why it matters? ⭐
The current parent-level handler calls preventDefault and stopPropagation which can interfere with child handlers (the Dropdown's click trigger). Moving the stopPropagation to the actual Button and dropping preventDefault is a minimal, targeted fix that prevents the click from bubbling to the card while allowing the Dropdown to process the click normally. This addresses a real UX/logic issue and is safe to apply.
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** superset-frontend/src/features/home/SavedQueries.tsx
**Line:** 340:350
**Comment:**
*Logic Error: The click handler that stops propagation and calls preventDefault is attached to the container (`ListViewCard.Actions`), which interferes with the Dropdown's trigger and may prevent the menu from opening; move the event handling to the actual clickable Button and only stop propagation (avoid preventDefault) so the Dropdown still receives/handles the click as expected.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
|
CodeAnt AI finished reviewing your PR. |
There was a problem hiding this comment.
Pull request overview
This PR fixes visual inconsistencies in the three-dot menu buttons on Saved Query cards by aligning their styling with Dashboard and Chart cards on the Home page.
- Removed the
QueryDatawrapper component that was adding unnecessary margins and styling to the actions container - Standardized the menu button icon to use
iconSize="xl"instead oficonColor={theme.colorText}to match other card types - Fixed icon alignment by removing
vertical-align: baselinefrom the Share menu item
1 participant
User description
SUMMARY
This PR fixes visual inconsistencies in the three-dot menu buttons across different card types on the Home page. Previously, Saved Queries cards had different styling compared to Dashboard and Chart cards, creating an inconsistent user experience.
Changes
<QueryData>) around the actions containericonColor={theme.colorText}to standardiconSize="xl"to match other cardsvertical-align: baselinefrom the Share menu item iconBEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
BEFORE
AFTER
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION
CodeAnt-AI Description
Unify three-dot menu styling on Saved Query cards to match other Home page cards
What Changed
Impact
✅ Consistent three-dot menus across Saved Query, Dashboard, and Chart cards✅ Identical icon size, color, and spacing on Home page cards✅ Predictable click behavior when opening card action menus💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.