From b37155e5083a86b105df87d5321eec4175ff2d94 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Thu, 17 Apr 2025 12:25:26 +0530
Subject: [PATCH] fix: Avoid having mismatched data in Plugin Action form
 (#40264)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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"

### :mag: 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 -->
---
 .../components/UQIEditor/UQIEditorForm.tsx     |  4 ++++
 .../components/UQIEditor/hooks/useFormData.ts  | 18 +++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
index c8fb86c43a..b4a6ea2adc 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
@@ -18,6 +18,10 @@ const UQIEditorForm = () => {
 
   const { data, evaluationState } = useFormData();
 
+  if (!data) {
+    return null;
+  }
+
   return (
     <Flex
       alignItems="center"
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useFormData.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useFormData.ts
index 61f798cc09..89a720f886 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useFormData.ts
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useFormData.ts
@@ -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 };
 };