chore: [Plugin Action Editor] Query forms in Plugin Action Form

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;
 }