Fix overlapping UI elements in bootstrap wizard if height of terminal window is insufficient #2924
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
opudrovs
force-pushed
the
2920-fix-overlapping-ui-elements-in-bootstrap-wizard
branch
4 times, most recently
from
e10310e to
ed7960b
Compare
Rework bootstrap wizard message handling. Remove unneeded comments. Run `npm audit fix`.
opudrovs
force-pushed
the
2920-fix-overlapping-ui-elements-in-bootstrap-wizard
branch
from
ed7960b to
e5b4428
Compare
ozamosi
approved these changes
Oct 24, 2022
opudrovs
deleted the
2920-fix-overlapping-ui-elements-in-bootstrap-wizard
branch
This was referenced Oct 27, 2022
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #2920
Wrapped CLI UI elements of the Git providers table and the main bootstrap wizard screen with a Bubble Tea viewport component. If the terminal height is insufficient, the viewport can be scrolled with up and down arrow buttons or mouse wheel.
Removed selecting items in the Git providers table with arrow keys and enter. The git providers table is not focusable now, only the text input is.
Slightly reworked message handling, returning Bubble Tea commands, and getting view content in the
Updatefunctions.Removed some unneeded comments.
Ran
npm audit fixbecause the JS tests were failing because of a critical vulnerability.Notes:
The Bubble Tea programs now run in the CLI alt screen buffer/"fullscreen" (
WithAltScreen()Bubble Tea program option). As far as I understood, there are fewer side effects (I saw some text getting duplicated if not in "fullscreen"). So, after the Bubble Tea program is exited and control goes back to the main flow, the user selection and the values they entered will disappear from the screen.WithMouseCellMotion()Bubble Tea program option is used for detecting mouse wheel scroll event for viewports.At present, up and down arrow buttons are used for scrolling the view and Tab and Shift+Tab are used to navigate between text inputs. We can make text input focus on mouse click but in a separate ticket or during UI rework. It requires adding mouse click functionality (adding mouse support it is easy, the main thing is detecting where exactly the click happened, so I found a nice
bubblezonelibrary for this).I added a message about scrolling the view with up and down arrows to both viewports. But if the terminal is tall enough, this message is not needed. If you would only like to display the message about scrolling only if terminal height is insufficient to hold the whole view output, additional calculations will be needed.