-
Notifications
You must be signed in to change notification settings - Fork 15.7k
feature(ui): Make entire task box clickable to select the task in Air… #49299
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
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.
Hi @bbovenzi , I added a flag in TaskLink to disable the router link when defined by TaskNode. I think I missed a case, where do you find this error? |
But I guess, I should just use Button instead of another Router Link. Will change it shortly |
In the browser console tab for any dag graph. Its not just the disabled part but having inside of an because of TaskLink |
b1c77cd
to
fa7fdaa
Compare
@bbovenzi using chakra LinkOverlay works! Such a simple and clean solution. I applied this to DagNode, TaskNode, and AssetNode. |
4ffe6d6
to
5bd1437
Compare
Hi @bbovenzi , I wasn't able to make it work with |
Hi @bbovenzi , the changes are done. Feel free to review at your convenience. |
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.
Looks good.
Just one last issue.
We need to forward the ref from the LinkOverlay.
Replace line 27 of TaskLink.tsx with export const TaskLink = forwardRef<HTMLAnchorElement, Props>(({ id, isGroup, isMapped, ...rest }, ref) => {
Hi @bbovenzi , I’ve made the requested changes. Just learned about forwardRef too! Thanks for feedback, I'm still getting the hang of React, especially coming from Vue. |
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.
Great work! Thanks for your patience on this one. I think a lot of people will appreciate this UX change.
And no worries on forwardRef, thats a very specific react concept
apache#49299) * feature(ui): Make entire task node clickable to select the task * Add z-index to TogglePause for clickability * Remove link component * Remove unnecessary onClick handler from LinkOverlay * Forward ref from LinkOverlay
closes: #49158
Implemented selectable task nodes by wrapping flex with router link.
Also adds isLinkDisabled to prevent nested link warning
^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named
{pr_number}.significant.rst
or{issue_number}.significant.rst
, in airflow-core/newsfragments.