Upgrade to PatternFly 5

[ssilvert]

We should upgrade all themes to PatternFly 5 as soon as these conditions are met:

1. PF5 is released
2. Keycloak 22 is final

All theme types should be upgraded so that everything is using the same PatternFly version. (account, admin, login, welcome)

Motivation

1. Welcome is still on PF3, so we need to get it upgraded to a supported version.
2. We should have everything on the same PatternFly version.

Tasks

Beta Give feedback

1. Upgrade login theme to PatternFly 5 #21342
   0 of 1
   area/login/ui kind/enhancement team/ui +3
2. Upgrade welcome theme to PatternFly 5 #21343
   area/welcome/ui kind/enhancement release/24.0.0 team/ui +4
   
3. Upgrade account theme to PatternFly 5 #21344
   area/account/ui kind/enhancement release/25.0.0 team/ui +4
   
4. Upgrade admin theme to PatternFly 5 #21345
   area/admin/ui kind/enhancement release/25.0.0 team/ui +4
   
5. Clean up the common theme #21341
   2 of 3
   kind/task priority/important team/ui +3
   
6. Replace deprecated PatternFly APIs #28197
   area/account/ui area/admin/ui kind/task team/ui +4
7. Can't access hidden tabs on the left in admin UI #26667
   area/admin/ui help wanted kind/bug priority/normal status/auto-bump team/ui +6

[stianst]

Would be cool to be able to set the default for login, account, and/or admin to be light/dark, both for a realm, or server-wide, and maybe even having an option for users themselves to switch :)

[jonkoops]

I'll take this one, I think we can easily upgrade Account v3 and the Admin Console. For the login, I think we should take some time to do that separately, mostly because the jump from PatternFly 3 - 4 is quite large.

[jonkoops]

@jenny-s51 I know you did some preliminary work on this under #21303. If you have some tips on how to best pick up from where you left, please let me know 😃

[ssilvert]

I'll take this one, I think we can easily upgrade Account v3 and the Admin Console. For the login, I think we should take some time to do that separately, mostly because the jump from PatternFly 3 - 4 is quite large.

@jonkoops Login is actually the highest priority here. We need to get off PF3 because it is no longer supported.

[mabartos]

AFAIK, we use PatternFly 4 for the login screens. Or do I miss something?

#7470

[jonkoops]

@mabartos I can still see PatternFly 3 (and jQuery for some reason) being included in the common base for the the themes. But I guess this is not being used at all?

[jonkoops]

Upon closer inspection, it looks like the 'welcome' theme is still on PatternFly 3. Which is why it's still being listed as a dependency.

[jonkoops]

Okay, so things get even weirder. The login is using PatternFly 4. But it's not installed from the aforementioned package.json, instead the Account v2 theme has a build step that copies the dependencies it has into to the common theme.

Not only that, but it also seems that the login theme includes both PatternFly 3 and 4, as it pulls in part of the dependencies from node_modules as well.

[jenny-s51]

@jonkoops the admin console builds and runs with the updates in #21303

With this v5 update, the big lift on the Keycloak side will likely be updating the form elements to use FormHelperText, HelperText, and HelperTextItem directly inside children - I marked all those instances in #21303 with TODO statements. There are also some event handlers that will need their parameters reordered.

You may notice some visual differences as well and should be able to fix these by updating any hardcoded pf-c-[component] instances to pf-v5-c-[component].

We hope to have official PF5 release numbers next week 🙂

[jonkoops]

Great, I'll have a gander once the stable is out!