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

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

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"

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 = {};
+  // 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
-  // Fetching evaluations state only once the formData is populated
+  if (!formData || formData.id !== action.id) {
-  if (!!data) {
+    return { data: null, evaluationState: {} };
-    evaluationState = formEvaluation[data.id];
   }
 
-  return { data, evaluationState };
+  // Fetching evaluations state only once the formData is populated
+  const evaluationState = formEvaluation[formData.id];
+
+  return { data: formData, evaluationState };
 };