Provision Dialog Form conversion from HAML to React

[liu-samuel]

Fixes: #6929

Automation / Embedded automate / Customization / Provisioning Dialogs

Converts the dialog form from a Ruby haml file to a React form.

Before

After

[jeffibm]

Hey @liu-samuel ,

we would want to keep the PR's as simple as possible.

So, If you can finish the summary conversion in one PR, so that it's easy to keep track of it at #8655

and, then go for the form conversions in another PR.

Also, I know it's a WIP, but try to clean up the codes as you make commits.

[liu-samuel]

Hey @liu-samuel ,

we would want to keep the PR's as simple as possible.

So, If you can finish the summary conversion in one PR, so that it's easy to keep track of it at #8655

and, then go for the form conversions in another PR.

Also, I know it's a WIP, but try to clean up the codes as you make commits.

Sounds good, I will do that

[jeffibm]

Hey @liu-samuel , could you please update the description too. Also use the form's before and after screenshots.

[jeffibm]

Hey @liu-samuel , Are there any dependent PRs or anything else needed to run this?

I was just trying to add a new dialog and got 404 Error. Could you please check-

ActionController::RoutingError (No route matches [POST] "/miq_ae_customization/old_dialogs_update_react"):

[jeffibm]

Hey @liu-samuel , Great work on the first PR. I just put in for review comments for future reference.

The idea behind UI PR's is to reduce the number of line counts and make it readable. For smaller PR's try to finish the components between 150-200 lines if possible, else, move a few lines to a different component.

Also, there are few string translations to be done as well here.

Could you please test with the suggested changes and also have a look at the error during form submit.

[liu-samuel]

Hey @liu-samuel , Great work on the first PR. I just put in for review comments for future reference.

The idea behind UI PR's is to reduce the number of line counts and make it readable. For smaller PR's try to finish the components between 150-200 lines if possible, else, move a few lines to a different component.

Also, there are few string translations to be done as well here.

Could you please test with the suggested changes and also have a look at the error during form submit.

Thanks for the review! I'll address all the comments you have. As for the 404 error, I tried again but it works fine for me. It seems like it might be a routes issue. Maybe restarting the server or running bin/update will fix it? I'm not exactly sure.

Also for the string translation, which strings are you referring to?

[jeffbonson]

as

something like this - {__('Submit')}

[miq-bot]

Checked commit liu-samuel@5947d4f with ruby 3.1.5, rubocop 1.56.3, haml-lint 0.51.0, and yamllint
4 files checked, 10 offenses detected

app/controllers/miq_ae_customization_controller/old_dialogs.rb

• ⚠️ - Line 218, Col 5 - Lint/UselessAssignment - Useless assignment to variable - id.
• ❗ - Line 152, Col 20 - Style/StringConcatenation - Prefer string interpolation to string concatenation.
• ❗ - Line 218, Col 22 - Style/RedundantCondition - Use double pipes || instead.
• ❗ - Line 251, Col 7 - Style/RescueStandardError - Omit the error class when rescuing StandardError by itself.
• ❗ - Line 261, Col 9 - Style/ConditionalAssignment - Use the return of the conditional for variable assignment and comparison.

app/views/miq_ae_customization/_old_dialogs_details.html.haml

• ⚠️ - Line 10 - Layout/ArgumentAlignment: Align the arguments of a method call if they span more than one line.
• ⚠️ - Line 5 - Avoid using instance variables in partials views
• ⚠️ - Line 5 - Line is too long. [95/80]
• ⚠️ - Line 8 - Avoid using instance variables in partials views
• ⚠️ - Line 9 - Avoid using instance variables in partials views