[WIP] Service dialogs form conversion

[jeffibm]

This Pr is to test the implementation of Drag and Drop for Service Dialogs revamp (POC)

• Create a Component for the vertical components list - DynamicComponentChooser
• Create a Component for the tabs, sections, fields - (to be changed from MiqDragAndDrop)
• Create a default tab with a blank section
• The last tab's click event will create a new tab with a blank section.
• Create a Component for each sections under a tab - DynamicSection
• Create a Component for each field which comes under a section - DynamicField
• Create Components for each field

• Text Box
• Text Area
• Check Box
• Dropdown
• Radio Button
• Datepicker
• Timepicker
• Tag Control

• Add/Delete new Section
• Add new Tab
• Provide a menu for tabs
• Delete tab
• Drag an item from DynamicComponentChooser and drop it into a section
• Drag and drop an item inside a section to change the order
• Drag and drop a section to change the order.
• Selected item will be converted into an actual field
• Minimize / Maximise section since the page will become big (new feature)
• Edit options for Tab in a model box
• Edit options for Sections in a model box
• Edit options for Field in a model box

• Text Box
• Text Area
• Check Box
• Dropdown
• Radio Button
• Datepicker
• Timepicker
• Tag Control

• Store Tab options
• Store Section options
• Store field options
• Store/manage all information.
• Include MiqFormRenderer and Formspy
• Submit action
• View saved item
• Edit Page

First demo:
https://user-images.githubusercontent.com/87487049/221094077-b2dbeaa0-a3c6-4578-b90c-c6c07b006115.mov

current update - #8666 (comment)

Just putting it here - https://www.data-driven-forms.org/editor/live-editor

[jeffibm]

Screen.Recording.2023-02-24.at.6.55.38.PM.mov

• Trying to see if I can get the DDF integrated into this.
• Drag and drop breaks now break due to multiple renders on the drop event which can be fixed.

[jeffibm]

earlier we had issues when we drop a field, it gets added to all sections. that has been corrected now.
will be trying to see if we can integrate actual fields to the form.

Screen.Recording.2023-02-27.at.8.11.07.PM.mov

[jeffibm]

integrated textbook and text area during drag and drop
fixed the react-hook-related warning

Screen.Recording.2023-02-28.at.12.51.18.PM.mov

[Fryguy]

This is beautiful 😍 - amazing work!

[jeffibm]

code cleaning and refactoring required at this stage.

Screen.Recording.2023-03-05.at.9.25.55.PM.mov

[jeffibm]

when we mouse hover on a field in a section, an edit and remove buttons will be displayed.
when we click on the edit button, a dialog box appears and displayes tabs and its options.

[jeffibm]

Added schema for text field options

[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)

Thank you for all your contributions! More information about the ManageIQ triage process can be found in the triage process documentation.

[miq-bot]

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

Feel free to reopen this pull request if these changes are still valid.

Thank you for all your contributions! More information about the ManageIQ triage process can be found in the triage process documentation.

[miq-bot]

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

Feel free to reopen this pull request if these changes are still valid.

Thank you for all your contributions! More information about the ManageIQ triage process can be found in the triage process documentation.

[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).

[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).

[miq-bot]

Checked commit jeffbonson@63da6cb with ruby 3.1.5, rubocop 1.56.3, haml-lint 0.51.0, and yamllint
1 file checked, 0 offenses detected
Everything looks fine. 🍪

[jeffbonson]

Handover

• At this stage, it's more like 20% complete. See the PR description for more info.
• Even though it is possible to implement features of one field item, say a text-input field, it would result in a lot of code duplication. Instead, we need a map for all field options.
• I have created a folder named fieldOptionsMap which maps down the options modal box for each field. It's just for reference purposes only.
• You will need a logic to build the options-modal box for each field (this is partially done, but since this was a POC, this needs more work)
• You need to rely on the react context providers feature to handle data across the form. thereby you can reduce the callback and a lot of code.
• You will need 2 validators/classes. one to handle the options-modal-box form and the other for the actual form data
• Try to get the designs similar to PR#8991
• The dialog summary section is already handled in the PR#8991
• We need to think of the dialog edit page for an existing record.
• I was thinking of removing the options-modal-box itself, since, it looks big with all those fields in the new design. In the old design, all of it would fit in that small modal box. Maybe, if we can introduce a right-panel for editing the field/tab/section, that would look much cleaner. We can try the designs using Figma and get more suggestions before implementing them.

[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).

[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).

[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).