Expand/collapse all groups #23487
Expand/collapse all groups #23487
Conversation
boring-cyborg
bot
added
area:UI
|
cc: @argibbs |
|
The behaviour looks perfect to me. Is there any way to set an option to select which is the default behaviour? (something as broad spectrum as a config flag would be enough for me...) |
| const openGroupIds = JSON.parse(localStorage.getItem(storageKey)) || []; | ||
|
|
||
| // Default to expand all if at least one group is closed | ||
| const [shouldExpand, setShouldExpand] = useState(allGroupIds.length > openGroupIds.length); |
There was a problem hiding this comment.
@argibbs Right now, the default is to show "Expand all" if even one group is closed.
We could also do 2 buttons, but icon-only to avoid cluttering up the screen:
There was a problem hiding this comment.
I like the icon only approach, especially given the button won't change size when toggling like the text implementation does.
Not sure how I feel about two buttons. With one button, you might have to click it twice to get the desired state. On the other hand, I would imagine "collapse all" to be the most frequent use-case and that would always be just one click.
There was a problem hiding this comment.
I too like buttons.
I think two buttons as it doesn't take up much screen space, and it feels more what I'd expect in a UI.
There was a problem hiding this comment.
Done. I updated the gif/screenshot in the PR description too.
There was a problem hiding this comment.
Default expand all fine for me, it's what I'd pick if there was a config flag anyway ...
Disable buttons if all groups are expanded or collapsed
| @@ -88,11 +87,12 @@ const TaskInstances = ({ | |||
| </Flex> | |||
| ); | |||
|
|
|||
| const storageKey = `${dagId}-open-groups`; | |||
There was a problem hiding this comment.
| const storageKey = `${dagId}-open-groups`; | |
| const storageKey = `${dagId}/open-groups`; |
Just to avoid some kind of possible clash in future? (We could also use : instead -- a character that's not allowed in a dag_id)
There was a problem hiding this comment.
Good idea. Also, updated the variable name
github-actions
bot
added
the
okay to merge
|
The PR is likely OK to be merged with just subset of tests for default Python and Database versions without running the full matrix of tests, because it does not modify the core of Airflow. If the committers decide that the full tests matrix is needed, they will add the label 'full tests needed'. Then you should rebase to the latest main or amend the last commit of the PR, and push it with --force-with-lease. |
bbovenzi
force-pushed
the
expand/collapse-all-groups
branch
from
eca3631 to
c2e2953
Compare
* Add expand/collapse all groups button to Grid * add tests * add comments * Switch to 2 icon buttons Disable buttons if all groups are expanded or collapsed * Update localStorage key (cherry picked from commit 83784d9)
* Add expand/collapse all groups button to Grid * add tests * add comments * Switch to 2 icon buttons Disable buttons if all groups are expanded or collapsed * Update localStorage key (cherry picked from commit 83784d9)
Add an expand/collapse all task groups button to grid view.
Place this and the autorefresh button above the grid part, and keep the "Show/hide details panel" button fixed to the right side of the screen.
^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code change, 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 newsfragement file, named
{pr_number}.significant.rst, in newsfragments.