Fixes #36106: PF5 Refactor - EditorNavbar, EditorOptions

[kfamilonidis]

Background

Editor and <EditorNavBar /> upgrade to next version of react requires substitution of Enzyme tests with RTL (React Testing Library) framework.

Acceptance Criteria

• Upgrade of components to use PF/5 variants.
  • Hosts -> Templates -> Job Templates -> New Job Template (path: /job_templates/new)
  • Hosts -> Templates -> Job Templates -> (any or clone) -> Edit (path: /job_templates/xyz/edit)
• Removal of Enzyme in all related tests.

Tests

npm run test -- assets/javascripts/react_app/components/Editor assets/javascripts/react_app/components/DiffView

followed by: #10777

[kfamilonidis]

Still needs progress to remove the snaps from the test that are testing components properties, but have noticed that some snaps are different from others; some are keeping store props, and some keeping components props. I would like to ask for some opinion on should we remove both snap types, or should we keep the store props - as the later might be serve as fixtures in the future (maybe transition to other store).

[kfamilonidis]

I would like to ask for some opinion on should we remove both snap types, or should we keep the store props - as the later might be serve as fixtures in the future (maybe transition to other store).

The *Actions, *Selectors and *Reducer snapshots are not replaceable with the RTL (React Testing Library) approach. They test logic that falls outside of RTL's context. Similarly, the integration tests snapshots. Importantly, these snapshots are not blocking the major React version upgrade

[kfamilonidis]

Progress update:

• when clicking on the safemode checkbox nothing happens
  You can enable safemode in administer -> settings -> provisioning -> Safemode rendering = no

Tested it. Enabling and clicking it doesn't trigger the event. It needs to be triggered by the select menu change. When clicking the event is not bound to refresh with selected value. Following the existing flow, when clicked and select it correctly pass the parameter. /job_templates/171-Check%20Update%20-%20Script%20Default%20clone/preview?force_safemode=true

• Changing from Editor to Changes changes the height of the navbar as it adds extra space

This is fixed. It was caused by margin applied. I tried to center all elements. pls. see:

• host select should not increase the size of the navbar

This is fixed. Position of item changed to static. There is still a glitch with viewport when the side-bars appear in lower screen resolution which need a closer look (fix is going to apply to any container).

Pending:

• Clicking on the right side arrow does not move the navbar to show all the other tools
• NEW: alignment of select menu when the side-bars appear in lower screen resolution

[MariaAga]

Tested it. Enabling and clicking it doesn't trigger the event. It needs to be triggered by the select menu change. When clicking the event is not bound to refresh with selected value. Following the existing flow, when clicked and select it correctly pass the parameter. /job_templates/171-Check%20Update%20-%20Script%20Default%20clone/preview?force_safemode=true

so is it on the pending changes as well? as for this version I still see the checkbox and clicking on it does not enable the safemode as it should

[kfamilonidis]

Tested it. Enabling and clicking it doesn't trigger the event. It needs to be triggered by the select menu change. When clicking the event is not bound to refresh with selected value. Following the existing flow, when clicked and select it correctly pass the parameter. /job_templates/171-Check%20Update%20-%20Script%20Default%20clone/preview?force_safemode=true

so is it on the pending changes as well? as for this version I still see the checkbox and clicking on it does not enable the safemode as it should

It should be, provided that the onClick was there before, or can I can add it to the list:

• NEW: Clicking on the checkbox triggers refresh event on selected host item

[MariaAga]

To clarify, here are screen captures
before this PR: clicking on the checkbox, adds and removes the checked mark

Screencast.From.2026-01-06.12-59-14.mp4

After: clicking on the checkbox does nothing (it does select the tab text)

Screencast.From.2026-01-06.12-58-19.mp4

[kfamilonidis]

To clarify, here are screen captures before this PR: clicking on the checkbox, adds and removes the checked mark

Sure, thanks. The issue is fixed by z-index value, pls confirm. Probably zIndex needs to be tackled as this affects also the select menu area in low resolution mode.

[MariaAga]

The z-inedx change for the checkbox causes over-flow into the maximized editor:

[kfamilonidis]

The z-inedx change for the checkbox causes over-flow into the maximized editor:

To clarify:
Similar z-index problem applies for the select menu:

I propose to handle the zIndex layers holistically to target a smooth result in all places that zIndex is affecting the visual elements (toolbar, modal).

[MariaAga]

I propose to handle the zIndex layers holistically to target a smooth result in all places that zIndex is affecting the visual elements (toolbar, modal).

Can you describe how that will work in practise?

[kfamilonidis]

I propose to handle the zIndex layers holistically to target a smooth result in all places that zIndex is affecting the visual elements (toolbar, modal).

Can you describe how that will work in practise?

I think giving effort to adjust this specific element (select menu) with custom css (zindex overrides) that affects checkbox (block) is hard to justify. This PR #10777 is to incorporate a new design in select menu that can behave differently. Do you propose any alternative ?

[MariaAga]

I am talking about fixing the safemode checkbox.
2 options to fix the current state:

1. replace webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js with a PF5 checkbox, that way there is no z-index issues as PF elements work together
2. Change the z-index from 1000, which is higher than the modal, to a number that is higher than the nav bar ul element z-index, but lower than the modal z index (500). For example setting the safemode z-index to 400 ensures that the checkbox can be checked, and is not visible on top of the modal.

[kfamilonidis]

thanks @MariaAga. The first option seemed more straightforward.

Tested it. Works as expected. Other remain are:

• Clicking on the right side arrow does not move the navbar to show all the other tools
• Select Menu overflow on lower resolution screen (which can be worked with Fixes #38916 - Update EditorHostSelect to pf5 #10777)

[pnovotny]

I've retested the changes and everything looks good to me, i.e.:

• navigating through the tabs Editor/Changes/Preview(*)
• right side icons Undo, Import, Settings, Fullscreen editor work correctly, no issues found there

I can confirm the few minor leftovers mentioned by @kfamilonidis in his comment #10728 (comment)
I would also add one small UX thing to the list:

• the host menu on the Preview tab is expanded only when clicking the small caret icon on the right, but it should expand when clicking on the whole dropdown button - a.k.a. clicking on the host name:

[MariaAga]

@pnovotny

the host menu on the Preview tab is expanded only when clicking the small caret icon on the right, but it should expand when clicking on the whole dropdown button - a.k.a. clicking on the host name:

Is this a regression? if not then it can be addressed here instead: #10777

[pnovotny]

@MariaAga yes, I forgot to mention that it is a regression. In the old editor, the menu expands when clicking wherever on the host select.
But I wouldn't consider this as a blocker for merging this PR. Since it is related only to the host select, it can be IMO handled as part of #10777 anyway.

[adamlazik1]

Hello @MariaAga and @pnovotny

Regarding what still needs to be done in this PR, here are my suggestions:

• the host menu on the Preview tab is expanded only when clicking the small caret icon on the right, but it should expand when clicking on the whole dropdown button - a.k.a. clicking on the host name:
• Select Menu overflow on lower resolution screen (which can be worked with Fixes #38916 - Update EditorHostSelect to pf5 #10777)

I propose these to be handled in #10777.

• Clicking on the right side arrow does not move the navbar to show all the other tools

I failed to reproduce this. @pnovotny could I get reproducing steps for this issue?

[MariaAga]

@adamlazik1

I failed to reproduce this. @pnovotny could I get reproducing steps for this issue?

you can use the dev console to make the screen smaller if you dont see the arrows

[adamlazik1]

@adamlazik1

I failed to reproduce this. @pnovotny could I get reproducing steps for this issue?

you can use the dev console to make the screen smaller if you dont see the arrows

I see the arrows but to me they work as expected.

[pnovotny]

I see the arrows but to me they work as expected.

@adamlazik1 Ok, let me retry it on the latest snap build (163). I've reproduced it on snap 155 which is now quite old.

[pnovotny]

@adamlazik1 I've tried this PR (foreman-3.18.0-0.20260112104949807834.pr10728.8933.gf5ff9739e.el9) on top of snap build 163.
The horizontal arrows on a narrow screen are working fine in most cases.
I found just one caveat whet it doesn't on the Preview tab. There is some play regarding to the Safemode checkbox, where the right arrow doesn't move the navbar.
Here's the screen recording:
screenrecord-2026-02-05_13.58.27.webm

[adamlazik1]

@adamlazik1 I've tried this PR (foreman-3.18.0-0.20260112104949807834.pr10728.8933.gf5ff9739e.el9) on top of snap build 163. The horizontal arrows on a narrow screen are working fine in most cases. I found just one caveat whet it doesn't on the Preview tab. There is some play regarding to the Safemode checkbox, where the right arrow doesn't move the navbar. Here's the screen recording: screenrecord-2026-02-05_13.58.27.webm

Thanks, I will investigate.