feat(web): remake the user interface #1202
Merged
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
* Do not preselect a product. * Show product progress inside the simple layout which allows changing the installer settings (e.g., language). * Fix routes.
imobachgs
approved these changes
Jun 13, 2024
dgdavid
requested review from
imobachgs,
mvidner,
kobliha,
jreidinger,
lslezak,
joseivanlopez,
mchf,
ancorgs,
teclator and
shundhammer
joseivanlopez
approved these changes
Jun 13, 2024
|
Just in case you missed this... it's now merged. As said there, code-wise still a lot of work to do. But it's ready for getting feedback from user POV. |
dgdavid
added a commit
that referenced
this pull request
Jun 17, 2024
## Problem While [remaking the UI](#1202), an extra link to the overview page was added to the selected product name acting as page title. Although at some point we realized that it was not really useful, it was forgotten and got merged to the master branch letting us to confirm ours suspicions by gathering feedback about being kind of confusing (thanks @jreidinger!) ## Solution Drop such a link. ## Testing Tested manually ## Notes There are to worth mentioning notes related to this: * This is just an example of what we've said (at least internally) a bunch of times: the new UI layout still needing love at several levels (layout, code, testing, etc). It was just in a good enough shape for get merged into master and avoid diverging too much and, more important, stop maintaining two completely different UIs. * Maybe the product title should include the "installation" word apart of the product name. Something to think about.
joseivanlopez
added a commit
that referenced
this pull request
Jun 19, 2024
## Problem No long ago a [full UI rewrite](#1202) was started and it was recently merged into `master` branch despite not being fully finished. It was just in a good shape for adhering to the [release early, release often](https://en.wikipedia.org/wiki/Release_early,_release_often) philosophy. The idea is to add fixes and improvements little by little against `master` branch according to the (internally) assigned priorities. But the [openSUSE conference](https://events.opensuse.org/conferences/oSC24) is around the corner and there are few details we'd like to have more polished for the [Agama in action](https://events.opensuse.org/conferences/oSC24/program/proposals/4560) and [The future of Agama and openSUSE](https://events.opensuse.org/conferences/oSC24/program/proposals/4557) events. ## Solution Address some of these details as part of this PR. Go commit by commit to see them. ## Testing - Tested manually - Adapted / re-enabled some unit tests. ## Note for reviewers No changelog entry required. ## Screenshots <details> <summary>Click to show/hide</summary> --- * Transactional root file system alert | Before | After | |-|-| |  |  | | | | * TPM reminder look&feel | Before | After | |-|-| |  |  | * `Accept` button when manually selecting the boot device | Before | After | |-|-| |  |  | * Size unit selector | Before | After | |-|-| |  |  | </details> --- Related to https://trello.com/c/H3oZyzXS (internal link)
dgdavid
added a commit
that referenced
this pull request
Jun 25, 2024
The [new user interface](#1202) made us to see an small improvement for easing the understanding of the kind of complex storage/Proposal page. It basically consist on making more explicit the relation between the space policy and the actions that installer will take on the storage level. To see more, read #1327
Merged
imobachgs
added a commit
that referenced
this pull request
Jun 27, 2024
Prepare for releasing Agama 9. It includes the following pull requests: - #1101 - #1202 - #1228 - #1231 - #1236 - #1238 - #1239 - #1240 - #1242 - #1243 - #1244 - #1245 - #1246 - #1247 - #1248 - #1249 - #1250 - #1251 - #1252 - #1253 - #1254 - #1255 - #1256 - #1257 - #1258 - #1259 - #1260 - #1261 - #1264 - #1265 - #1267 - #1268 - #1269 - #1270 - #1271 - #1272 - #1273 - #1274 - #1279 - #1280 - #1284 - #1285 - #1286 - #1287 - #1288 - #1289 - #1290 - #1291 - #1292 - #1293 - #1294 - #1295 - #1296 - #1298 - #1299 - #1300 - #1301 - #1302 - #1303 - #1304 - #1305 - #1306 - #1307 - #1308 - #1309 - #1310 - #1311 - #1312 - #1313 - #1314 - #1315 - #1316 - #1317 - #1318 - #1319 - #1320 - #1321 - #1322 - #1323 - #1324 - #1325 - #1326 - #1328 - #1329 - #1331 - #1332 - #1334 - #1338 - #1340 - #1341 - #1342 - #1343 - #1344 - #1345 - #1348 - #1349 - #1351 - #1352 - #1353 - #1354 - #1355 - #1356 - #1357 - #1358 - #1359 - #1360 - #1361 - #1362 - #1363 - #1365 - #1366 - #1367 - #1368 - #1371 - #1372 - #1374 - #1375 - #1376 - #1379 - #1380 - #1381 - #1383 - #1384 - #1385 - #1386 - #1387 - #1388 - #1389 - #1391 - #1392 - #1394 - #1395 - #1397 - #1398 - #1399 - #1400 - #1403
This was referenced Jul 3, 2024
dgdavid
added a commit
that referenced
this pull request
Jul 11, 2024
## Problem [Switching from the former UI to the current approach](#1202) left behind a lot of things to review, dead components and a CSS clean up among them. ## Solution Drop dead components and make as much clean-up rounds as needed. This can be considered `Round #1`, made in the middle of more urgent work. ## Testing Tested manually ## Screenshots Visual changes after this PR should keep at minimum. In any case, it's preferred that reviewers give the UI a shot taking the time they need.
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.
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
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, it is A LOT of work to do, but I firmly believe it worth. Once we finish the migration, we should be able to move forward more efficiently and, hopefully, with less friction when taking 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.
PLEASE REMEMBER there will be a lot of details to define and many others to polish after this PR gets merge, but in general terms this new, streamlined layout gives us more room for placing almost everything you will miss at first sight. 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.
Related pull requests