chore: [Plugin Action Editor] Query forms in Plugin Action Form (#36684)

## Description

Implement UQI Editor Form and Query Response panes

Fixes #36154 


## Automation

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

### 🔍 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/11175240455>
> Commit: 5c0a579afcfeba192b663f54802c36a46cbc857b
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11175240455&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE`
> Spec:
> <hr>Fri, 04 Oct 2024 07:12:01 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

- **New Features**
- Introduced the `UQIEditorForm` component for enhanced form handling
within the `PluginActionForm`.
- Updated the `usePluginActionResponseTabs` hook to support additional
plugin types and dynamic tab structures based on datasource presence.

- **Bug Fixes**
- Improved conditional rendering logic to ensure proper display of UI
components based on plugin types.

- **Documentation**
- Added descriptive comments to clarify the functionality of new
components and hooks.

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

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

@@ -5,19 +5,24 @@ import { useChangeActionCall } from "./hooks/useChangeActionCall";
 import { usePluginActionContext } from "../../PluginActionContext";
 import { UIComponentTypes } from "api/PluginApi";
 import GraphQLEditorForm from "./components/GraphQLEditor/GraphQLEditorForm";
+import UQIEditorForm from "./components/UQIEditorForm";
 
 const PluginActionForm = () => {
   useChangeActionCall();
   const { plugin } = usePluginActionContext();
 
   return (
-    <Flex p="spaces-2" w="100%">
+    <Flex flex="1" overflow="hidden" p="spaces-2" w="100%">
       {plugin.uiComponent === UIComponentTypes.ApiEditorForm && (
         <APIEditorForm />
       )}
       {plugin.uiComponent === UIComponentTypes.GraphQLEditorForm && (
         <GraphQLEditorForm />
       )}
+      {plugin.uiComponent === UIComponentTypes.DbEditorForm ||
+        (plugin.uiComponent === UIComponentTypes.UQIDbEditorForm && (
+          <UQIEditorForm />
+        ))}
     </Flex>
   );
 };

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

@@ -0,0 +1,43 @@
+import React from "react";
+import FormRender from "pages/Editor/QueryEditor/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 { Flex } from "@appsmith/ads";
+
+const UQIEditorForm = () => {
+  const { editorConfig, plugin } = usePluginActionContext();
+
+  const formData = useSelector(getFormValues(QUERY_EDITOR_FORM_NAME)) as
+    | QueryAction
+    | SaaSAction;
+
+  const formEvaluation = useSelector(getFormEvaluationState);
+
+  let formEvaluationState = {};
+
+  // Fetching evaluations state only once the formData is populated
+  if (!!formData) {
+    formEvaluationState = formEvaluation[formData.id];
+  }
+
+  return (
+    <Flex flexDirection="column" overflowY="scroll" w="100%">
+      <FormRender
+        editorConfig={editorConfig}
+        formData={formData}
+        formEvaluationState={formEvaluationState}
+        formName={QUERY_EDITOR_FORM_NAME}
+        uiComponent={plugin.uiComponent}
+      />
+    </Flex>
+  );
+};
+
+export default reduxForm({
+  form: QUERY_EDITOR_FORM_NAME,
+  enableReinitialize: true,
+})(UQIEditorForm);

app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx

@@ -21,12 +21,22 @@ import { noop } from "lodash";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import { getErrorCount } from "selectors/debuggerSelectors";
 import { getApiPaneDebuggerState } from "selectors/apiPaneSelectors";
+import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers";
+import useShowSchema from "components/editorComponents/ActionRightPane/useShowSchema";
+import Schema from "components/editorComponents/Debugger/Schema";
+import QueryResponseTab from "pages/Editor/QueryEditor/QueryResponseTab";
+import type { SourceEntity } from "entities/AppsmithConsole";
+import { ENTITY_TYPE as SOURCE_ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
 
 function usePluginActionResponseTabs() {
-  const { action, actionResponse, plugin } = usePluginActionContext();
+  const { action, actionResponse, datasource, plugin } =
+    usePluginActionContext();
 
   const IDEViewMode = useSelector(getIDEViewMode);
   const errorCount = useSelector(getErrorCount);
+  const pluginRequireDatasource = doesPluginRequireDatasource(plugin);
+
+  const showSchema = useShowSchema(plugin.id) && pluginRequireDatasource;
 
   const { responseTabHeight } = useSelector(getApiPaneDebuggerState);
 
@@ -81,6 +91,55 @@ function usePluginActionResponseTabs() {
     ]);
   }
 
+  if (
+    [
+      PluginType.DB,
+      PluginType.AI,
+      PluginType.REMOTE,
+      PluginType.SAAS,
+      PluginType.INTERNAL,
+    ].includes(plugin.type)
+  ) {
+    const newTabs = [];
+
+    const actionSource: SourceEntity = {
+      type: SOURCE_ENTITY_TYPE.ACTION,
+      name: action.name,
+      id: action.id,
+    };
+
+    if (showSchema) {
+      newTabs.push({
+        key: "schema",
+        title: "Schema",
+        panelComponent: (
+          <Schema
+            currentActionId={action.id}
+            datasourceId={datasource?.id || ""}
+            datasourceName={datasource?.name || ""}
+          />
+        ),
+      });
+    }
+
+    newTabs.push({
+      key: "response",
+      title: createMessage(DEBUGGER_RESPONSE),
+      panelComponent: (
+        <QueryResponseTab
+          actionName={action.name}
+          actionSource={actionSource}
+          currentActionConfig={action}
+          isRunning={false}
+          onRunClick={noop}
+          runErrorMessage={""} // TODO
+        />
+      ),
+    });
+
+    return tabs.concat(newTabs);
+  }
+
   return tabs;
 }