Fixes #39507 - update editornavbar and radio buttons to pf5 and the tests to RTL

[andreilakatos]

Fixes #39507 - update editornavbar and radio buttons to pf5 and the tests to RTL

Before:

After:

[MariaAga]

Thought: It seems to me like the pr is trying to achieve the previous look by many customization. Can it rely on PF defaults more, and look more like PF instead of looking like the old editor?

[MariaAga]

Some visual issues:

1. No settings button if the preview warning is shown

2. I'm not sure if it looks weird or I'm just not used to it, but the buttons have arrows to scroll through them when the preview warning is shown. The scrolling does work and all buttons are visible so not sure its an issue.

Might be good to move the alert out of the tab bar.

3. the safe mode has a custom css in webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss I think its a. can be moved to editor.css b. needs to be fixed so it will be aligned (text and checkbox)

[pnovotny]

I tested this PR and the tab switching works correctly.

Then there are few alignment issues, that @MariaAga 's already mentioned:
Vertical alignmet of the Safemode checkbox and Preview is outdated line.

Also, the horizontal scrolling includes only the Editor/Changes/Preview tabs and not the rest of the top panel.
On a narrow screen, it then causes the right icons (revert, import file, settings, fullscreen) to completely disappear and the Safemode or Preview is outdated text to overflow.

[andreilakatos]

3. editorsafemodecheckbox

Yep, I'm moving the alert above the editor so we won't have this issue. The horizontal scroll is not something that I implemented, it's default behaviour for tabs. It sort of worked like that before as well, maybe I should implement some horizontal scrolling if the screen is resized.

[andreilakatos]

Some visual issues:

1. No settings button if the preview warning is shown

2. I'm not sure if it looks weird or I'm just not used to it, but the buttons have arrows to scroll through them when the preview warning is shown. The scrolling does work and all buttons are visible so not sure its an issue. Might be good to move the alert out of the tab bar.

3. the safe mode has a custom css in webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss I think its a. can be moved to editor.css b. needs to be fixed so it will be aligned (text and checkbox)

Done, moved alert outside of navbar, and updated the tests and Editor component. Also aligned the safe mode checkbox:

[pnovotny]

Re-tested the latest changes and QA-wise LGTM.

The alignment issues have been fixed and everything looks like in the screenshots from the previous comment.

Also, the horizontal scrolling includes only the Editor/Changes/Preview tabs and not the rest of the top panel.
On a narrow screen, it then causes the right icons (revert, import file, settings, fullscreen) to completely disappear and the Safemode or Preview is outdated text to overflow.

I forgot to add that this is not a regression to the PF5 updates.
After discussion, it will be handled as a separate task or bug.

[MariaAga]

lgtm, just needs a squash

[MariaAga]

code LGTM, thanks!