feat(web): add real data to the overview page #1301
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
|
What about the failing tests?
|
Tests are out of scope. I fixed/added some tests related to the code I changed, but nothing else. The plan is to disable the tests that are failing to make sure we do not break more tests. |
dgdavid
added a commit
that referenced
this pull request
Jun 13, 2024
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](#1159 (comment)) 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 <kbd>Install</kbd> button that will prompt an error when clicked before any other user interaction. There is a [proposal to improve](#778) 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](https://reactrouter.com/en/main/start/overview#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](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis), [nested routes](https://reactrouter.com/en/main/start/overview#nested-routes), [outlet context](https://reactrouter.com/en/main/hooks/use-outlet-context), etc. * Use [FormData API](https://developer.mozilla.org/en-US/docs/Web/API/FormData) when working with forms and/or evaluate the use of react-router [Form](https://reactrouter.com/en/main/components/form) * Keep an eye on the [next React version](https://react.dev/blog/2024/04/25/react-19). * Keep in mind that the number of internal states of some components can be reduced by relying in the [URL as State Management](https://www.youtube.com/watch?v=VenLRGHx3D4&t=602s) when possible. 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 - #1298 - #1299 - #1300 - #1301 - #1302 - #1303 - #1304 - #1305 - #1306 - #1307 - #1308 - #1309 - #1310 - #1312 - #1313 - #1315 - #1316 - #1317 - #1319 - #1320 - #1321 - #1322 - #1323 - #1324 - #1325 - #1326 - #1328
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
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.
The data shown in the overview in the new UI branch is just hard-coded. This PR aims to add some real data to it. At this point we are only considering three sections: localization, storage and software.
The overview page displaying real data
(Not) Adopting a state management library
As part of this PR, we experimented with Jotai. However, we decided to postpone the adoption of a state management library because we might need to do some further research and consider other options. If you are curious, you can checkout to commit cfe8d82.
We need to decide how much logic we want to move out of our React code. For having kind of a "shared"
useState, Jotai is great. If you want to put some logic to load and synchronize the state, then perhaps we should go with another option (e.g., zustand, recoil, or even react-query).