-
Notifications
You must be signed in to change notification settings - Fork 36
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
[WIP] web: Change the UI #1202
Draft
dgdavid
wants to merge
43
commits into
master
Choose a base branch
from
new-ui-proposal
base: master
Could not load branches
Branch not found: {{ refName }}
Could not load tags
Nothing to show
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
[WIP] web: Change the UI #1202
Conversation
This file contains 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
Instead of overriding CSS. It reverts #1153
Needed for working with data APIs, see [1] [1] https://reactrouter.com/en/main/routers/picking-a-router#data-apis
To start using PatternFly/Page components instead of defining its own layout.
Excludes current route form breadcrumbs and uses its name as title.
* Use PatternFly/Radio for building the ProductSelector * Change the ProductSelector from controlled to uncontrolled, making it stateless and relying in FormData API in the ProductSelectionPage onSubmit function. * Start using an approach that could replace/reduce the use of Popup.
And start using it
Login and protected routes were lost during master rebase.
It has to improve a lot
And using a PoC with React Router loaders
Related to a845ee0
It's a kind of fancy, but a bit tricky
By using Gallery and Card
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.
Important
This proposal is in its early stages. Unless someone spots a big stopper or foresees and justifies that it is not the right path, the idea is to refine and improve it over the next few weeks to have something more mature and ready to work with.
TL;DR
DrasticallyCompletely change the interface. Click to read a bit moreAs Agama has progressed, the original idea of a hyper-minimalist interface has completely vanished. We have moved far away from the first SPA interactive interface. The installation summary has lost all its value and it is now a sort of navigation menu or index. Furthermore, it is impossible to start with a valid configuration straight away due to several reasons, such as
Last but not least, it is way weird landing in a page with a big, green, and enabled Install button that will prompt an error when clicked before any other user interaction.
There is a proposal to improve that first initial screen, but having in mind the Agama development progression I believe that the current approach does not scale. Regrettably, looks like a dead end.
With this in mind, I have been thinking a bit about an alternative that I had on my to-do list for the future, which consisted of converting the summary screen into a panel on the left and loading the content of each section to the right (which would overlap the first on small devices). It would solve two problems in one shot by stop forcing the user to navigate back and forth to change between sections and stop wasting available space on large screens. The key was to make better use of react-router and embrace nested routes as designed instead of fighting against them. Something perfectly doable.
However, as soon as I started writing some code to play with, I realized that also embracing more heavily PatternFly would be enough to start making it possible. Moreover, I concluded that it could even help to solve many of the problems we currently have with the interface at many levels.
So I got to work to carry out a small proof of concept with, among others, following ideas in mind,
Indeed, there is work to be done, but I believe that this movement is worth it. Once we finish the migration, we should be able to move forward more efficiently and, hopefully, with less friction when making UI decisions. Don't get me wrong, we will still have work to do, decisions to make, and specially things to improve, etc. We will even keep changing our minds from time to time based on learned lessons or feedback gathered. But with a bit of luck, we will have more time for these things.
Screenshots
As I said, this proposal is a bit far to be mature. But even when it's finished, taking screenshots of each of the changes would be too much work. So let me upload just a few previews in its current and kind of break state at the time of writing (2024-05-13). You can switch to the
new-ui-proposal
branch and test the changes by yourself at any time during the migration.PLEASE REMEMBER this is nothing more than the beginning of an interface migration. There are a lot of details to define and many others to polish, but in general terms that layout gives us more room for placing almost everything you will miss at first sight (Agama options, Install button always available as soon as the configuration is valid, helpful information to let the user what is going on at any time, etc). Little by little, please.
Bonus: PatternFly already provides style guides, and we can build our own on top of them since it will be inevitable that, at certain points and due to the nature of Agama and our view/knowledge, we will take slightly different decisions/paths.
TODO: