replaced form btn to btn

[techbhavin]

Description

Replace From_widget_button to widget_button in form widgets

Fixes #3613

Type of change

• Update Widget (non-breaking change which adds functionality)

• My code follows the style guidelines of this project

• I have performed a self-review of my own code

• I have commented on my code, particularly in hard-to-understand areas

• I have made corresponding changes to the documentation

• My changes generate no new warnings

• I have added tests that prove my fix is effective or that my feature works

• New and existing unit tests pass locally with my changes

Test coverage results 🧪

🟢 Total coverage has increased

// Code coverage diff between base branch:release and head branch: update/formwidget-use-btnwidget 

Status	File	% Stmts	% Branch	% Funcs	% Lines
🟢	total	54.94 (0.02)	36.96 (0.02)	33.28 (0.02)	55.53 (0.03)
🔴	app/client/src/mockResponses/WidgetConfigResponse.tsx	11.82 (-0.56)	0 (0)	0 (0)	12.62 (-0.65)
🟢	app/client/src/utils/WidgetPropsUtils.tsx	72.51 (0.18)	64.4 (-0.06)	67.03 (0)	71.5 (0.2)
✨ 🆕	app/client/src/utils/migrations/FormWidget.ts	100	85.71	100	100

[riodeuno]

Code looks fine to me. @YogeshJayaseelan @vivekverma2312 Please verify the migration of this widget.

[YogeshJayaseelan]

@techbhavin Tested this feature and found the below observation

1)The Visible JS and success text shows improper Ui when any of the existing form buttons property pane are opened

[techbhavin]

@YogeshJayaseelan @somangshu

@YogeshJayaseelan is it happens because migration is not working properly?

The migration script is written so All Exstisting FormWidget FormButton will convert into the Button widget. so Reset From onSuccess is no longer exists.

2. In the FormButton Widget Property Pan not modifying anything in this current PR. so if it was related to it can we create a new issue?

[techbhavin]

/ok-to-test sha=ba5aca4

[somangshu]

@YogeshJayaseelan I did not understand the 2nd point, Can you elaborate?

[somangshu]

@techbhavin have we written migrations to change the old form buttons to the normal buttons?

Here is what we have to complete:

• All ref to form button will be removed
• New form will have the button widget (Completed)
• All new form button should have the reset form functionality; i.e. all buttons.

cc @riodeuno

[techbhavin]

/ok-to-test sha= 8925425

[YogeshJayaseelan]

@techbhavin Verified this fix and all the below points are working as expected

1)All ref to form button will be removed
2)New form will have the button widget (Completed)
3)All new form button should have the reset form functionality; i.e. all buttons.

but one old functionality breaks - The submit button is not disabled when the inner widget is marked as required and there is not input/data in the inner widget

https://loom.com/share/f1f54c9d7a454e8cb371c4d521b89da6

[techbhavin]

@somangshu

how do we can detect which button is the submitted button from all children widgets of Form Widget?

[somangshu]

how do we can detect which button is the submitted button from all children widgets of Form Widget?

@riodeuno need some help here

[riodeuno]

@techbhavin If this is for migrations. We can check during migrations for properties which the form button for submit would have.
If we need it for new form widgets, we can do so by updating the form button template in the widgetConfigsResponse file.

Are there other scenarios for which we need to figure out which button is the submit button?

[techbhavin]

@riodeuno

FormButtonWidget has "disabledWhenInvalid" custom property. Which is true for Submit button and false for the other buttons (ex. reset button). Form Widget also sets "isFormValid" = false for every grandchild widget. So with these two properties Submit button can be disabled when a form is inValid but reset or other buttons will stay unaffected.
In our current update, we don't have "disabledWhenInvalid" on ButtonWidget. Which is the cause of the current issue.

I have tried to set disable of Submit button as binding property inside "widgetConfigsResponse". But FormWidget does not export any property ( i.e. {{Form1.isValid}} or {{Button1.isFormValid}} ) which can be set in binding to disable button on form inValid state.

[riodeuno]

@techbhavin Got it. Thanks for the details. We may need to change a few things for this to be possible. Let me get back to you on this.

[somangshu]

@riodeuno we could put this in draft and remove the review request for now, until we have a solution

[github-actions]

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

[riodeuno]

Closing this for now. This will need careful updates to deprecate without effecting UX.

[riodeuno]

@Nikhil-Nandagopal @somangshu @techbhavin Let's deprecate the current Button Widget. It will work as follows.

• ButtonWidget will be removed
• FormButtonWidget will be renamed to ButtonWidget
• The widget type will be BUTTON_WIDGET
• We migrate all FORM_BUTTON_WIDGET references to BUTTON_WIDGET.
• The resetFormOnClick will continue to work as it does today, however, it will now also show in the property panes of button widgets which does not exist directly inside a form.
• The following text should be changed.

Original: Resets the fields within the parent form when the click action succeeds"
New: Resets the fields of the form, on click, if this widget exists directly within a Form widget.

• The following text should be changed.

Original: Disables the button when the parent form has a required widget that is not filled
New: Disabled if the form is invalid, if this widget exists directly within a Form widget.

These two fields needs to be organized properly, my suggestion would be add another section called "Form options" and put the above two property controls in this section.

[somangshu]

@riodeuno shall we take this ahead, In that case we need to have a discussion with @techbhavin before hand

[riodeuno]

Closing this in favour of #11152