[WIP] web: Change the UI

[dgdavid]

[!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 Drastically Completely change the interface. Click to read a bit more

---

As 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

• The creation of a user it's mandatory since it cannot be relegated to the first boot.
• The storage proposal algorithm does not perform as many attempts as it used to do in YaST.

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,

• Use PatternFly as much as possible to the point of looking familiar with Cockpit UI but keeping some bits of Agama's identity (like typography and colors, the absence of wizard, to allow the user to move as freely as possible, etc)
• Reduce the number of components developed by us and help to improve the existing ecosystem instead. After all, at this moment it is not realistic to think that we can also develop and maintain a design and components system (although I would like to do so, of course :P).
• Sensibly embrace the router: use a data router, nested routes, outlet context, etc.
• Use FormData API when working with forms and/or evaluate the use of react-router Form
• Keep an eye on the next React version.
• Keep in mind that the number of internal states of some components can be reduced by relying in the URL as State Management when possible.

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

Summary	Product page	Product change

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:

• [ ] Finish the migration
• [ ] Write down the advantages of this approach
• [ ] Plan for a test suite update