PromucFlow_constructor/app/client/src/widgets/JSONFormWidget/fields
Rahul Barwal b23ba1db8f
fix: JSON form validation trigger on child component update (#37128)
## Description
<ins>Problem</ins>

Form validation was not triggered when the child component was updated,
resulting in inconsistent data consistency.

<ins>Root cause</ins>

The `Form` component in
`app/client/src/widgets/JSONFormWidget/component/Form.tsx` did not
include the `trigger` function from the `methods` object, preventing
form validation from being triggered on child component updates.

<ins>Solution</ins>

This PR adds the `trigger` function from the `methods` object to the
`Form` component, ensuring form validation is triggered correctly when
the child component is updated.

* Adds unit tests for `Form` component as well


Fixes #28018
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.JSONForm"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11697880527>
> Commit: 1c38b05c04d9ed2c83d09a90d5fec720e30d4daf
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11697880527&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.JSONForm`
> Spec:
> <hr>Wed, 06 Nov 2024 06:06:41 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced form validation lifecycle management with the introduction of
the `useUnmountFieldValidation` hook for better handling of field
validation upon unmounting.
- Improved testability of the form component through the inclusion of
`data-testid` attributes for the submit and reset buttons.

- **Bug Fixes**
- Resolved edge cases in form validation, ensuring components function
correctly with changing props and handle empty schemas gracefully.

- **Tests**
- Introduced a comprehensive suite of unit tests for the `Form`
component, covering various scenarios including validation and
visibility management.
- Added tests for the new `useUnmountFieldValidation` hook to ensure
correct validation behavior during unmounting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-11-06 15:48:45 +05:30
..
ArrayField.test.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
ArrayField.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
BaseInputField.tsx fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
CheckboxField.tsx fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
CurrencyInputField.test.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
CurrencyInputField.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
DateField.tsx fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
FieldRenderer.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
index.ts
InputField.test.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
InputField.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
MultiSelectField.tsx fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
ObjectField.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
PhoneInputField.test.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
PhoneInputField.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
RadioGroupField.tsx fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
SelectField.test.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
SelectField.tsx fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
SwitchField.tsx fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
useBlurAndFocusEvents.ts
useObserveAccessor.ts
useRegisterFieldValidity.test.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
useRegisterFieldValidity.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
useUnmountFieldValidation.test.tsx fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
useUnmountFieldValidation.ts fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
useUpdateInternalMetaState.ts chore: adding telemetry for klona (#35918) 2024-08-29 12:35:48 +05:30