Order Service Form conversion from Angular to React

[jeffibm]

Continuing work started by @GilbertCherrie in #8484

3 Pages have been converted to react using a single component named <Service ..> - 90% completed

1. The Order Service Form page
2. The Service dialogs View page
3. The Request Show page

1. Order Service Form page

• Create a functional component named Service.
• Include the component in app/views/shared/dialogs/_dialog_user.html.haml
• Can be seen in Services / Catalogs / Service Catalogs / Select an items / Order Service
• Use the API /api/service_dialogs/:id to fetch the information on the page load.
• Create child components

• DialogTab
• DialogGroups
• DialogFields
• CheckboxField, DateField, DateTimeField, DropDownField, SimpleDropDown, MultiDropDown, RadioField, TextInput, TextArea, TagField,

• Handle the form submit and cancel events.
• Create a new component named RefreshField to render the refresh-button and a loader.
• Include the RefreshField in the DialogField using component-mapper.
• Conditionally display a RefreshField near the right side of the field.
• Show a loader right next to the refresh-button when the refresh action is in progress.
• Make use of context providers to pass the state data across components within the form.

• Store thedialogFields to validate the form and data sent to the api.
• Avoid the usage of react-redux since it updated the entire snapshots.

• When the refresh button is clicked -

• Get the next set of fields to be refreshed.
• Append the field ids to an array.
• Pick the first item from this array and run an API to refresh the field.
• Continue this cycle till we don't have any more fields in the array to refresh.
• Make use of the active-tab from context-provider to stay in the same tab

• Disable all fields when the refresh action is in progress during a refresh-button click event.
• Disable all fields when the refresh action is in progress during a drop-down list onChange event.
• Enable all fields after the refresh action is in progress.
• Handle the timing problem to enable/disable fields.
• Handle the onrefresh field getting stuck for the second time problem
• Check if the fields can be displayed/hidden using entry points (ruby methods used by SPARK)
• Write Test cases for the Service component for 3 cases (OrderServiceForm, ServiceDialog, Dialog Summary).
• Remove old angular code.
• Get this tested from @Fryguy or @agrare to ensure all features have been handled.

Before

After

2. Service dialogs View page

• Create a component named ServiceDialog.
• Include the component in app/views/miq_ae_customization/_dialog_sample.html.haml.
• Can be seen in Automation / Embedded automate / Customisation / Service Dialogs / Select an item / Sample tab
• Component would get recordId and from=customization as props.
• Fetch the data from the API - /api/service_dialogs/${recordId}.
• Populate the fields with the response from API.
• Disable the refresh-button.
• Build components by reusing the code from OrderServiceForm
• Do not render the form submit, reset, cancel buttons.
• Make the field readOnly and change events are not needed.
• Remove the old codes
• Write Test cases

Before

After

3. Request Show page

• Reuse component Service.
• Include the component in app/views/miq_request/_st_prov_show.html.haml.
• Can be seen after ordering a service in the Service / Request / Click on the list item / Dialog Options.
• Component would get dialogId, from=request, initialValues as props.
• fields are readable and cannot be changed.
• populate the values in the field.
• refresh-buttons are disabled.
• Remove old codes.
• Write test cases.

Before

After

[jeffibm]

Screen.Recording.2023-09-21.at.11.38.00.AM.mov

[jeffbonson]

Comparing fields to be sent to the api during submit action.

Before

After [WIP]

[jeffbonson]

Used in -

1. Dialog summary
2. Order service Form
3. Service Request Dialog

Screen.Recording.2024-07-03.at.7.37.59.PM.mov

[jeffbonson]

Update on July 4th, 2024

Screen.Recording.2024-07-04.at.2.48.01.PM.mov

[jeffbonson]

Hey @GilbertCherrie , @Fryguy , @agrare , When you find time, could you please review this PR?

I rebased with master since it's been open for a while now.

I went through a lot of conditions and I guess I have handled all known features to me.

But, am unsure if I missed any combinations of the field options we set in the dialog editor.

Also, I am not sure of the status @DavidResende0 's PR on reconfigure form conversion. That can be handled in another PR.

[miq-bot]

Checked commit jeffbonson@c9d4bee with ruby 3.1.5, rubocop 1.56.3, haml-lint 0.51.0, and yamllint
8 files checked, 10 offenses detected

app/helpers/miq_request_helper.rb

• ⚠️ - Line 32, Col 35 - Lint/UnusedMethodArgument - Unused method argument - wf. If it's necessary, use _ or _wf as an argument name to indicate that it won't be used. If it's unnecessary, remove it.
• ❗ - Line 20, Col 9 - Style/IdenticalConditionalBranches - Move if classification {:label => classification.description, :value => classification.id.to_s} end out of the conditional.
• ❗ - Line 25, Col 9 - Style/IdenticalConditionalBranches - Move if classification {:label => classification.description, :value => classification.id.to_s} end out of the conditional.
• ❗ - Line 32, Col 35 - Naming/MethodParameterName - Method parameter must be at least 3 characters long.
• ❗ - Line 33, Col 1 - Layout/EmptyLinesAroundMethodBody - Extra empty line detected at method body beginning.
• ❗ - Line 48, Col 45 - Naming/MethodParameterName - Method parameter must be at least 3 characters long.

app/views/miq_ae_customization/_dialog_sample.html.haml

• ⚠️ - Line 2 - Avoid using instance variables in partials views
• ⚠️ - Line 2 - Line is too long. [94/80]

app/views/miq_request/_st_prov_show.html.haml

• ⚠️ - Line 11 - Avoid using instance variables in partials views
• ⚠️ - Line 11 - Line is too long. [122/80]

[miq-bot]

This pull request is not mergeable. Please rebase and repush.

[miq-bot]

This pull request has been automatically marked as stale because it has not been updated for at least 3 months.

If these changes are still valid, please remove the stale label, make any changes requested by reviewers (if any), and ensure that this issue is being looked at by the assigned/reviewer(s).