[MTV-2247] Initial new create plan wizard setup

[jpuzz0]

📝 Links

https://issues.redhat.com/browse/MTV-2247

📝 Description

Initial setup of the newer wizard which is mainly getting the framework of using react-hook-form and validation established between steps and demonstrating a single field's data is stored and submittable from the Review and create (last) step.

Accessible for testing via a new URL, http://localhost:9000/mtv/create/plan, which will have to be entered manually, as the actions to create migration plans throughout the plugin still point to the current wizard.

🎥 Demo

Screen.Recording.2025-03-17.at.3.21.49.PM.mov

📝 CC://

@mmenestr

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 36.14%. Comparing base (13484d0) to head (7c15c85).
Report is 381 commits behind head on main.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1525      +/-   ##
==========================================
- Coverage   36.81%   36.14%   -0.67%     
==========================================
  Files         158      157       -1     
  Lines        2548     2606      +58     
  Branches      599      633      +34     
==========================================
+ Hits          938      942       +4     
- Misses       1428     1662     +234     
+ Partials      182        2     -180     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[metalice]

Hey @jpuzz0 no need to nest the files under modules , we will omit the this folder.
src/Plans

[avivtur]

@jpuzz0 great work!
I left some comments/ nit suggestions

[metalice]

u are already introducing getStepProps, why not add a key prop there, also?

[jpuzz0]

That won't work;

The key identifier is required here and isn't read properly when nested.

[metalice]

if you declare the type return from getStepProps that has key prop? still no go?

[jpuzz0]

Correct:

[metalice]

do we need it? isnt this triggered automatically when next step is clicked?

[jpuzz0]

Yes, this validated prop is what determined the text input's red outline. On "next" click, or any trigger of validation, the errors will be updated to reflect any new entry, and the ID is what we're using to point to the correct error value here - to again - determine whether the input should have a red outline or not.

[metalice]

i think if u add
error={Boolean(fieldState?.error)}
fieldState , is the second argument u can deconstruct, {field, fieldState}, we will get the same effect without the need for ternary check

[metalice]

btw i think u can use helperText={fieldState?.error?.message}
and omit the formerrorhelpertext , please try

[jpuzz0]

Add error={Boolean(fieldState?.error)} where exactly? This is not a prop that PF's TextInput has, nor FormGroup. And when I print fieldState inside of that callback for the render function, I just see an empty object even when an error is triggered.

Also, helperText is not a prop that TextInput or FormGroup have.

Patternfly's example of using error helper text can be seen in their demos, which shows a similar implementation to what we have here:
https://www.patternfly.org/components/helper-text/react-demos#static-text-and-dynamic-status

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud