chore: [Plugin Action Editor] Query Form evaluation (#37224)

## Description

Adds the Query and Google Sheets initialisation based on

Google Sheets ref:

https://github.com/appsmithorg/appsmith/blob/release/app/client/src/pages/Editor/QueryEditor/Editor.tsx#L292-L309

https://github.com/appsmithorg/appsmith/blob/release/app/client/src/pages/Editor/QueryEditor/Editor.tsx#L148-L156

Query ref:

https://github.com/appsmithorg/appsmith/blob/release/app/client/src/pages/Editor/QueryEditor/Editor.tsx#L131-L137

> [!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.Datasource"



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

- **New Features**
- Introduced a new `withoutPadding` property for better control over
section padding.
- Added support for binary data uploads in the `PostBodyData` component.
	- New styled components created for enhanced layout management.
- `httpsMethods` property added to the `CommonFormPropsWithExtraParams`
interface.

- **Bug Fixes**
- Improved tooltip clarity for invalid data in the `ImportedKeyValue`
component.

- **Refactor**
- Simplified component structures and styling, enhancing layout
management across several components.

- **Chores**
- Removed unused imports and streamlined component logic in the
`UQIEditorForm`.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx

@@ -2,36 +2,33 @@ import React from "react";
 import FormRender from "./FormRender";
 import { usePluginActionContext } from "../../../../PluginActionContext";
 import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms";
-import { getFormValues, reduxForm } from "redux-form";
-import type { QueryAction, SaaSAction } from "entities/Action";
-import { useSelector } from "react-redux";
-import { getFormEvaluationState } from "selectors/formSelectors";
+import { reduxForm } from "redux-form";
 import { Flex } from "@appsmith/ads";
+import { useGoogleSheetsSetDefaultProperty } from "./hooks/useGoogleSheetsSetDefaultProperty";
+import { useFormData } from "./hooks/useFormData";
+import { useInitFormEvaluation } from "./hooks/useInitFormEvaluation";
 
 const UQIEditorForm = () => {
-  const { editorConfig, plugin } = usePluginActionContext();
+  const {
+    editorConfig,
+    plugin: { uiComponent },
+  } = usePluginActionContext();
 
-  const formData = useSelector(getFormValues(QUERY_EDITOR_FORM_NAME)) as
-    | QueryAction
-    | SaaSAction;
+  useInitFormEvaluation();
 
-  const formEvaluation = useSelector(getFormEvaluationState);
+  // Set default values for Google Sheets
+  useGoogleSheetsSetDefaultProperty();
 
-  let formEvaluationState = {};
-
-  // Fetching evaluations state only once the formData is populated
-  if (!!formData) {
-    formEvaluationState = formEvaluation[formData.id];
-  }
+  const { data, evaluationState } = useFormData();
 
   return (
     <Flex flexDirection="column" overflowY="scroll" w="100%">
       <FormRender
         editorConfig={editorConfig}
-        formData={formData}
-        formEvaluationState={formEvaluationState}
+        formData={data}
+        formEvaluationState={evaluationState}
         formName={QUERY_EDITOR_FORM_NAME}
-        uiComponent={plugin.uiComponent}
+        uiComponent={uiComponent}
       />
     </Flex>
   );

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

@@ -0,0 +1,22 @@
+import { useSelector } from "react-redux";
+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";
+
+export const useFormData = () => {
+  const data = useSelector(getFormValues(QUERY_EDITOR_FORM_NAME)) as
+    | QueryAction
+    | SaaSAction;
+
+  const formEvaluation = useSelector(getFormEvaluationState);
+
+  let evaluationState = {};
+
+  // Fetching evaluations state only once the formData is populated
+  if (!!data) {
+    evaluationState = formEvaluation[data.id];
+  }
+
+  return { data, evaluationState };
+};

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useGoogleSheetsSetDefaultProperty.ts

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import { PluginPackageName } from "entities/Action";
+import { merge } from "lodash";
+import { getConfigInitialValues } from "components/formControls/utils";
+import { diff, type Diff } from "deep-diff";
+import { getPathAndValueFromActionDiffObject } from "utils/getPathAndValueFromActionDiffObject";
+import { setActionProperty } from "actions/pluginActionActions";
+import { usePluginActionContext } from "../../../../../PluginActionContext";
+import { useDispatch } from "react-redux";
+
+export const useGoogleSheetsSetDefaultProperty = () => {
+  const {
+    action,
+    editorConfig,
+    plugin: { packageName },
+    settingsConfig,
+  } = usePluginActionContext();
+
+  const dispatch = useDispatch();
+
+  useEffect(
+    function setDefaultValuesForGoogleSheets() {
+      if (packageName === PluginPackageName.GOOGLE_SHEETS) {
+        const initialValues = {};
+
+        merge(
+          initialValues,
+          getConfigInitialValues(editorConfig as Record<string, unknown>[]),
+        );
+
+        merge(
+          initialValues,
+          getConfigInitialValues(settingsConfig as Record<string, unknown>[]),
+        );
+
+        // initialValues contains merge of action, editorConfig, settingsConfig and will be passed to redux form
+        merge(initialValues, action);
+
+        // @ts-expect-error: Types are not available
+        const actionObjectDiff: undefined | Diff<Action | undefined, Action>[] =
+          diff(action, initialValues);
+
+        const { path = "", value = "" } = {
+          ...getPathAndValueFromActionDiffObject(actionObjectDiff),
+        };
+
+        if (value && path) {
+          dispatch(
+            setActionProperty({
+              actionId: action.id,
+              propertyName: path,
+              value,
+            }),
+          );
+        }
+      }
+    },
+    [action, dispatch, editorConfig, packageName, settingsConfig],
+  );
+};

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useInitFormEvaluation.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { initFormEvaluations } from "actions/evaluationActions";
+import { useDispatch } from "react-redux";
+import { usePluginActionContext } from "../../../../../PluginActionContext";
+
+export const useInitFormEvaluation = () => {
+  const dispatch = useDispatch();
+
+  const {
+    action: { baseId },
+    editorConfig,
+    settingsConfig,
+  } = usePluginActionContext();
+
+  useEffect(
+    function formEvaluationInit() {
+      dispatch(initFormEvaluations(editorConfig, settingsConfig, baseId));
+    },
+    [baseId, dispatch, editorConfig, settingsConfig],
+  );
+};