Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Avoid having mismatched data in Plugin Action form (#40264)

Browse Source 
## Description

It was seen that when switching between actions, the form data and the
action data is not in sync through all the render cycles. This causes
the old form data to be rendered using the new (switched to) editor
config.

By verifying this and handling the render, we are ensuring that during
switches, the form data is accurate while rendering

Fixes #40183 

## Automation

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

### 🔍 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/14485144512>
> Commit: 195a03eb49e40d3b3ce6eb59f157c64dc9b7ae8d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14485144512&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Datasource`
> Spec:
> <hr>Wed, 16 Apr 2025 05:56:10 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


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

- **Bug Fixes**
- Improved handling of form data loading states to prevent the form from
rendering when data is unavailable, reducing the risk of errors or
displaying stale information.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Hetu Nandu 2025-04-17 12:25:26 +05:30 committed by GitHub
parent 99e3cb5d65
commit b37155e508
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
View File

@ -18,6 +18,10 @@ const UQIEditorForm = () => {
const { data, evaluationState } = useFormData();
if (!data) {
return null;
}
return (
<Flex
alignItems="center"

18
app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useFormData.ts
View File

@ -3,20 +3,24 @@ import { getFormValues } from "redux-form";
import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms";
import type { QueryAction, SaaSAction } from "entities/Action";
import { getFormEvaluationState } from "selectors/formSelectors";
import { usePluginActionContext } from "../../../../../PluginActionContext";
export const useFormData = () => {
const data = useSelector(getFormValues(QUERY_EDITOR_FORM_NAME)) as
const formData = useSelector(getFormValues(QUERY_EDITOR_FORM_NAME)) as
| QueryAction
| SaaSAction;
const { action } = usePluginActionContext();
const formEvaluation = useSelector(getFormEvaluationState);
let evaluationState = {};
// Fetching evaluations state only once the formData is populated
if (!!data) {
evaluationState = formEvaluation[data.id];
// When switching between actions, the formData is not updated immediately.
// So we need to return null data and evaluationState in that case instead of stale data
if (!formData || formData.id !== action.id) {
return { data: null, evaluationState: {} };
}
return { data, evaluationState };
// Fetching evaluations state only once the formData is populated
const evaluationState = formEvaluation[formData.id];
return { data: formData, evaluationState };
};