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

• [x] Upgrade of components to use PF/5 variants.
  • [x] Hosts -> Templates -> Job Templates -> New Job Template (path: /job_templates/new)
  • [x] Hosts -> Templates -> Job Templates -> (any or clone) -> Edit (path: /job_templates/xyz/edit)
• [x] 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]

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

[MariaAga]

Also seeing how much css overrides we do to make the Nav component behave like Tab component, and with the new pf5 css I noticed also the active tab title are too bright so they will also need an override for the colour, why not just use the tab component?

[kfamilonidis]

Also seeing how much css overrides we do to make the Nav component behave like Tab component, and with the new pf5 css I noticed also the active tab title are too bright so they will also need an override for the colour, why not just use the tab component?

I have tried to use the NavItem from PF5 with no luck as it seems it doesn't support disable. I agree that Tab could be more appropriate component for this case and I am looking at it. The css overrides could be minimized after this change.

[kfamilonidis]

Updated EditorNavBar from NavItems to Tabs. Results look different and more close to PF5 variant without much css overrides. Next is to remove old css completely. SelectHost menu needs a complete new approach. Please see the new look:

Full window width:

Adjusted to smaller size:

With preview select: