Skip to content

Improve Grid view UX#54846

Merged
bbovenzi merged 7 commits intoapache:mainfrom
astronomer:fix-grid-navigation
Aug 27, 2025
Merged

Improve Grid view UX#54846
bbovenzi merged 7 commits intoapache:mainfrom
astronomer:fix-grid-navigation

Conversation

@bbovenzi
Copy link
Contributor

@bbovenzi bbovenzi commented Aug 22, 2025

  • Enable keyboard navigation anytime something in the grid view is selected instead of requiring a click on the grid
  • Moved the grid keyboard nav hints into a tooltip
  • Make toggling task groups button variant from surface to outline to match other fields
  • Add focus to Grid item when navigating to maintain standard accessibility tabbing through the UI
  • Fix keyboard accessibility for expand/collapse details panel button
  • Make expand/collapse details panel button less distracting
  • Move grid item tooltip back to use chakra's tooltip. It works better visually and doesn't seem to have a significant performance effect anymore
Screenshot 2025-08-22 at 3 53 09 PM

^ 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.

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Aug 22, 2025
@bbovenzi bbovenzi changed the title Improve grid keyboard navigation Improve Grid view UX Aug 22, 2025
@jscheffl
Copy link
Contributor

"Just for navigating" across logs this is really useful. But the proposed UX (as well as previous implementation) has the problem that some use cases are made harder:

  • If I want to scroll the logs via cursoer up-down this is now impossible. I can only scroll logs via mouse wheel. I think this is not acceptable. I need to have the option to click on the logs panel and scroll there via up-down keys
  • Same for the code tab
  • Where I like that I can flip through the log, if I want to flip through details or XCom this is a bit harder. I also have a common use case where I need to flip through other details. Would it be possible not to force that every flip switches to log view?

Otherwise all other changes are fine.

@bbovenzi
Copy link
Contributor Author

bbovenzi commented Aug 26, 2025

Oh you're right. It messes with scrollable pages. We probably should change it to Shift+arrow so we're not overriding a default behavior. And then do something else for the jump to start/end

Yes, we should persist the tab that's selected if its available. Let me work on that in another PR.

@bbovenzi
Copy link
Contributor Author

Updated to switch normal navigation to shift+Arrow and jump actions to mod+Arrow in order to not override other arrow actions

Copy link
Contributor

@jscheffl jscheffl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the re-work! Almost perfect, just wanted to approve as I noticed that CTRL+UP/DOWN is now clashing with grid vs. Jumping hotkeys on the log panel :-(

Image

Do we have other modifiers?

@bbovenzi
Copy link
Contributor Author

I tested out a few others and I kept running into conflicts. I decided to just remove jumps altogether.

Copy link
Contributor

@jscheffl jscheffl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the rework! Looks good now!

@bbovenzi bbovenzi merged commit 81ef598 into apache:main Aug 27, 2025
55 checks passed
@bbovenzi bbovenzi deleted the fix-grid-navigation branch August 27, 2025 22:16
mangal-vairalkar pushed a commit to mangal-vairalkar/airflow that referenced this pull request Aug 30, 2025
* Improve grid kbd navigation

* Use chakra tooltip

* Fix static checks

* Fix static checks

* Upgrade keyboard commands to not conflict with regular arrow actions

* Remove jump hotkeys

* Remove english translation for jump
nothingmin pushed a commit to nothingmin/airflow that referenced this pull request Sep 2, 2025
* Improve grid kbd navigation

* Use chakra tooltip

* Fix static checks

* Fix static checks

* Upgrade keyboard commands to not conflict with regular arrow actions

* Remove jump hotkeys

* Remove english translation for jump
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants