ACM-30606 Wizard review enhancements

[jeswanke]

📝 Summary

Ticket Summary (Title):

Ticket Link:

Type of Change:

• 🐞 Bug Fix
• ✨ Feature
• 🔧 Refactor
• 💸 Tech Debt
• 🧪 Test-related
• 📄 Docs

---

✅ Checklist

General

• PR title follows the convention (e.g. ACM-12340 Fix bug with...)
• Code builds and runs locally without errors
• No console logs, commented-out code, or unnecessary files
• All commits are meaningful and well-labeled
• All new display strings are externalized for localization (English only)
• (Nice to have) JSDoc comments added for new functions and interfaces

If Feature

• UI/UX reviewed (if applicable)
• All acceptance criteria met
• Unit test coverage added or updated
• Relevant documentation or comments included

If Bugfix

• Root cause and fix summary are documented in the ticket (for future reference / errata)
• Fix tested thoroughly and resolves the issue
• Test(s) added to prevent regression

---

🗒️ Notes for Reviewers

Summary by CodeRabbit

Release Notes

• New Features

  • Added review step with collapsible sections summarizing all form inputs
  • Toolbar actions to expand or collapse all review sections at once
  • YAML editor highlighting shows which field is being edited
  • Persistent storage of expanded/collapsed review section states

• UI Improvements

  • Streamlined form displays by consolidating redundant view modes

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR introduces a wizard review step feature with DOM-based tree building, input registration, and YAML editor path highlighting. It removes legacy DisplayMode.Details rendering across input components, replaces it with a review section that displays collapsed summaries and expandable field details, adds infrastructure for synchronizing review state with the DOM, and integrates editor highlighting tied to wizard field selection.

Changes

Cohort / File(s)	Summary
Review Step Core ReviewStep.tsx, ReviewStep.css, index.ts	New review component with collapsible sections, DOM tree building from step/input registry, expand/collapse state persistence in localStorage, and edit affordances for field navigation/highlighting. CSS includes layout for toggle rows, badges, description lists, and scroll-to-edit outline animations.
Step & Wizard Integration Step.tsx, Wizard.tsx, StringContext.tsx	Step now registers with StepInputsRegistry on mount. Wizard wraps UI with provider tree (StepInputsRegistryProvider, HighlightEditorPathProvider, ReviewDomTreeSyncProvider), adds optional reviewStorageKey prop, and constructs ReviewStep with wizardRef. String context extended with expand/collapse tooltip keys.
Context Infrastructure contexts/HighlightEditorPathContext.tsx, contexts/ReviewDomTreeSyncContext.tsx, contexts/StepInputsContext.tsx	New contexts for managing highlight path state, DOM tree sync versioning, and live step/input registration. StepInputsRegistry provides register/unregister/get methods for input metadata tracking. ReviewPathPrefixSegmentsContext tracks nested array paths for hierarchical review registration.
Input Components — Review Registration inputs/Input.ts, inputs/WizFormGroup.tsx, inputs/WizArrayInput.tsx	Added review registration path building and DOM sync bumping. useInput accepts isArrayInput flag; non-test environments derive stable IDs from registration paths. WizArrayInput wraps items in ReviewPathPrefixSegmentsProvider with computed child segments; ArrayInputItem registers array instances and measures collapsed content.
Input Components — DisplayMode Removal inputs/WizAsyncSelect.tsx, inputs/WizCheckbox.tsx, inputs/WizHidden.tsx, inputs/WizKeyValue.tsx, inputs/WizMultiSelect.tsx, inputs/WizNumberInput.tsx, inputs/WizRadio.tsx, inputs/WizSelect.tsx, inputs/WizSingleSelect.tsx, inputs/WizStringsInput.tsx, inputs/WizSwitch.tsx, inputs/WizTableSelect.tsx, inputs/WizTextArea.tsx, inputs/WizTextInput.tsx, inputs/WizTiles.tsx, inputs/WizTimeRange.tsx	Systematic removal of DisplayMode.Details conditional rendering branches and associated description-list/detail components. Components now render only the interactive input UI when not hidden. Unused imports (DisplayMode, Split, CheckIcon, DescriptionList*) removed. WizTiles also adds runtime useId() for stable DOM identifiers in non-test environments.
SyncEditor Highlighting ../../src/components/SyncEditor/SyncEditor.tsx, ../../src/components/SyncEditor/SyncEditor.css, ../../src/components/SyncEditor/decorate.ts	Added highlightEditorPath prop to SyncEditor, paired with Monaco decoration tracking. New rangeForHighlightPath helper parses dot-path strings (with ;id=... suffix stripping) and resolves to YAML editor ranges via mapping lookups. CSS adds .syncEditorYamlHighlight class for semi-transparent orange background.
Wizard String Localization ../../src/lib/wizardStrings.ts	Localized strings for expand/collapse tooltips added to returned WizardStrings object.
Route/Wizard Consumers ../../src/routes/Applications/.../CreatePullApplicationSet.tsx, ../../src/routes/Applications/.../CreatePushApplicationSet.tsx, ../../src/routes/Applications/.../EditArgoApplicationSet.tsx, ../../src/routes/Governance/policies/CreatePolicy.tsx, ../../src/routes/Governance/policies/CreatePolicyAutomation.tsx, ../../src/routes/Governance/policies/EditPolicy.tsx, ../../src/routes/Governance/policies/EditPolicyAutomation.tsx, ../../src/routes/Governance/policy-sets/CreatePolicySet.tsx, ../../src/routes/Governance/policy-sets/EditPolicySet.tsx, ../../src/routes/Infrastructure/.../ImportCluster.tsx, ../../src/wizards/Argo/CreateArgoResources.tsx, MultipleSourcesSelector.tsx	All update WizardSyncEditor to consume useHighlightEditorPath() and pass highlightEditorPath to SyncEditor. MultipleSourcesSelector also removes WizTextDetail from collapsed review content and adds explicit label to repository-type selector.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ReviewStep
    participant StepInputsRegistry
    participant ReviewDomTree as DOM Tree Builder
    participant Highlight as Highlight/Edit Handler
    
    User->>ReviewStep: Click edit (pen) affordance
    activate ReviewStep
    ReviewStep->>Highlight: Call onReviewEdit(node, intent)
    
    alt intent === 'navigate'
        Highlight->>ReviewDomTree: Resolve DOM element ID from node
        ReviewDomTree-->>Highlight: Element found
        Highlight->>User: Focus/scroll to input, trigger highlight animation
        Note over Highlight: CSS outline animates in via ease-in,<br/>animates out via ease-out class
    else intent === 'highlight'
        Highlight->>ReviewStep: setHighlightEditorPath(path)
        ReviewStep->>ReviewStep: Update HighlightEditorPathContext
        ReviewStep->>ReviewStep: Notify consumers (e.g., SyncEditor)
    end
    
    deactivate ReviewStep

Loading

sequenceDiagram
    participant WizardComponent as Wizard (Main)
    participant Step
    participant Input as Input Component
    participant StepRegistry as StepInputsRegistry
    participant ReviewDOMSync as ReviewDomTreeSync
    
    WizardComponent->>StepRegistry: Wrap with StepInputsRegistryProvider
    WizardComponent->>ReviewDOMSync: Wrap with ReviewDomTreeSyncProvider
    
    Step->>StepRegistry: useLayoutEffect → register(stepId, metadata)
    activate StepRegistry
    StepRegistry-->>Step: Registration stored in Map
    deactivate StepRegistry
    
    Input->>Input: useInput() builds registration path<br/>from prefix segments + path + id
    Input->>StepRegistry: Register input in useLayoutEffect<br/>(if not hidden, currentStepId defined)
    activate StepRegistry
    StepRegistry-->>Input: Input registered
    deactivate StepRegistry
    
    Input->>ReviewDOMSync: Call useBumpReviewDomTree()
    activate ReviewDOMSync
    ReviewDOMSync->>ReviewDOMSync: Increment version state
    deactivate ReviewDOMSync
    
    ReviewDOMSync-->>ReviewDOMSync: Notify subscribers (e.g., ReviewStep)<br/>to rebuild DOM tree from registry

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

The PR spans 30+ files with substantial new logic (ReviewStep DOM tree building, registration infrastructure, highlight animation orchestration), systematic refactoring (DisplayMode removal across 16+ input components), and dense state management in contexts. While input-component changes follow a repetitive pattern, the ReviewStep component itself, decorator logic, and multi-provider wiring require careful verification of DOM synchronization, registration lifecycle, and editor integration correctness. Cross-file dependencies (registry, contexts, path segments) and scroll-to-edit animation teardown logic add complexity beyond simple pattern application.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description contains only a blank template with no actual content filled in—no ticket summary, link, type of change selected, or reviewer notes provided.	Complete the template by filling in the ticket summary/link, selecting a type of change (Feature), and documenting checklist items and any reviewer notes.
Docstring Coverage	⚠️ Warning	Docstring coverage is 6.98% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title references a Jira ticket (ACM-30606) and describes the main feature ('Wizard review enhancements'), aligning with the substantial changes across ReviewStep, context providers, and input components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jeswanke

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [jeswanke]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment