UI variables page: added option to view text as multi lines#61679
Conversation
Tomi-1997
requested review from
bbovenzi,
choo121600,
guan404ming,
pierrejeambrun,
ryanahamilton,
shubhamraj-git and
vatsrahul1001
as code owners
shahar1
left a comment
shahar1
left a comment
There was a problem hiding this comment.
Very nice!
I think that it would be nice to have also an option to collapse it back in case it's too long, and you want to avoid refreshing the page because of that.
Not blocking anyway, IMO.
Failing CI don't seem related, I reran them.
|
Thanks! It toggles between collapse and expand on each click. |
There was a problem hiding this comment.
That's a nice improvement.
Thanks you for the PR. We have exactly that on other pages, such as XCom for expand or collapse json values, do you mind using the same component to make things consistent here. (the same could apply for ellipsis or expand)
Also static checks need fixing.
Screen.Recording.2026-02-11.at.15.14.53.mov
|
Sure Video.mp4 |
* reused expandCollapse component * used useDisclosure instead of useState * affect only the variable.value field
* tooltip text fixed * formatting issues resolved
|
Updated to address CI & suggestions, appreciate the feedback! |
Backport failed to create: v3-1-test. View the failure log Run detailsNote: As of Merging PRs targeted for Airflow 3.X In matter of doubt please ask in #release-management Slack channel.
You can attempt to backport this manually by running: cherry_picker 5764d69 v3-1-testThis should apply the commit to the v3-1-test branch and leave the commit in conflict state marking After you have resolved the conflicts, you can continue the backport process by running: cherry_picker --continueIf you don't have cherry-picker installed, see the installation guide. |
* Variables page added a button to set or unset text trim * ui variable page, fold and expand buttons: * reused expandCollapse component * used useDisclosure instead of useState * affect only the variable.value field * * Variable page fold/expand buttons affect also variable.description * tooltip text fixed * formatting issues resolved (cherry picked from commit 5764d69)
|
@Tomi-1997 looks like auto backport failed. could you backport this to v3-1-test? |
…1679) * Variables page added a button to set or unset text trim * ui variable page, fold and expand buttons: * reused expandCollapse component * used useDisclosure instead of useState * affect only the variable.value field * * Variable page fold/expand buttons affect also variable.description * tooltip text fixed * formatting issues resolved (cherry picked from commit 5764d69)
|
Manual backport #62779 |
…1679) * Variables page added a button to set or unset text trim * ui variable page, fold and expand buttons: * reused expandCollapse component * used useDisclosure instead of useState * affect only the variable.value field * * Variable page fold/expand buttons affect also variable.description * tooltip text fixed * formatting issues resolved (cherry picked from commit 5764d69)
…62779) * Variables page added a button to set or unset text trim * ui variable page, fold and expand buttons: * reused expandCollapse component * used useDisclosure instead of useState * affect only the variable.value field * * Variable page fold/expand buttons affect also variable.description * tooltip text fixed * formatting issues resolved (cherry picked from commit 5764d69) Co-authored-by: Tomi <74303735+Tomi-1997@users.noreply.github.com>
…62779) * Variables page added a button to set or unset text trim * ui variable page, fold and expand buttons: * reused expandCollapse component * used useDisclosure instead of useState * affect only the variable.value field * * Variable page fold/expand buttons affect also variable.description * tooltip text fixed * formatting issues resolved (cherry picked from commit 5764d69) Co-authored-by: Tomi <74303735+Tomi-1997@users.noreply.github.com>
…1679) * Variables page added a button to set or unset text trim * ui variable page, fold and expand buttons: * reused expandCollapse component * used useDisclosure instead of useState * affect only the variable.value field * * Variable page fold/expand buttons affect also variable.description * tooltip text fixed * formatting issues resolved
…1679) * Variables page added a button to set or unset text trim * ui variable page, fold and expand buttons: * reused expandCollapse component * used useDisclosure instead of useState * affect only the variable.value field * * Variable page fold/expand buttons affect also variable.description * tooltip text fixed * formatting issues resolved
4 participants
Closes: #25992
Problem(?)
Variable info is trimmed, which makes it unable to be found via CTRL+F, unless hovered on.
Before
Solution
After 2.3.4 the behavior changed to trim text.
My suggested compromise between the new UX and the old functionality is a button to toggle a state of wrap / unwrap text.
After, initial state
After, first click
