Skip to content
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

feat(web): remake the user interface #1202

Merged
merged 195 commits into from
Jun 13, 2024
Merged

feat(web): remake the user interface #1202

merged 195 commits into from
Jun 13, 2024

Conversation

dgdavid
Copy link
Contributor

@dgdavid dgdavid commented May 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 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, 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

@coveralls
Copy link

coveralls commented May 16, 2024

Coverage Status

coverage: 70.79% (+0.02%) from 70.773%
when pulling 23a05f7 on new-ui-proposal
into bc2c5d7 on master.

dgdavid added 27 commits May 22, 2024 19:57
Instead of overriding CSS. It reverts #1153
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.
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.
@dgdavid dgdavid merged commit 3df8883 into master Jun 13, 2024
6 checks passed
@dgdavid dgdavid deleted the new-ui-proposal branch June 13, 2024 12:31
@dgdavid
Copy link
Contributor Author

dgdavid commented Jun 13, 2024

@balsa-asanovic

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 |
  |-|-|
| ![Screenshot from 2024-06-17
13-59-15](https://github.com/openSUSE/agama/assets/1691872/0d69dc88-033e-4431-ad1e-ee66fde451e6)
| ![Screenshot from 2024-06-17
13-58-36](https://github.com/openSUSE/agama/assets/1691872/e6f332a5-f2d4-4b40-af87-d05d07727f34)
|
|![Screenshot from 2024-06-17
13-59-19](https://github.com/openSUSE/agama/assets/1691872/fbd4dad7-d48f-44cf-adc6-c5cab5759d80)
|![Screenshot from 2024-06-17
13-58-46](https://github.com/openSUSE/agama/assets/1691872/22fc0ca8-5f51-4207-8ca6-066aa4c2ee10)
|

* TPM reminder look&feel

  | Before | After |
  |-|-|
| ![Screenshot from 2024-06-17
17-12-26](https://github.com/openSUSE/agama/assets/1691872/9f6ed1df-dbf0-4b85-ac55-e4aec5719448)
| ![Screenshot from 2024-06-17
17-11-28](https://github.com/openSUSE/agama/assets/1691872/a27b8422-db1f-4e94-917d-38eb8cf398ce)
|


* `Accept` button when manually selecting the boot device

  | Before | After |
  |-|-|
| ![Screenshot from 2024-06-17
22-14-04](https://github.com/openSUSE/agama/assets/1691872/5b08a4e9-c84b-461e-84da-6445d60e001e)
| ![Screenshot from 2024-06-17
22-13-02](https://github.com/openSUSE/agama/assets/1691872/c19f42a4-3bfc-46a7-a569-5476255e299f)
|


* Size unit selector

  | Before | After |
  |-|-|
| ![Screenshot from 2024-06-17
22-41-15](https://github.com/openSUSE/agama/assets/1691872/a9ec9a19-0ddd-449c-ace4-9734b3e202a6)
| ![Screenshot from 2024-06-17
22-39-44](https://github.com/openSUSE/agama/assets/1691872/29f6e689-78f3-4dde-a550-682305fe4d59)
|
</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
@imobachgs imobachgs mentioned this pull request Jun 27, 2024
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
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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants