From 4f70e6dce2266b2f5cf1b4e0d3b17b0ad2adfecd Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Fri, 4 Oct 2024 14:02:00 +0530 Subject: [PATCH] chore: [Plugin Action Editor] Query forms in Plugin Action Form (#36684) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Implement UQI Editor Form and Query Response panes Fixes #36154 ## Automation /ok-to-test tags="@tag.IDE" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 5c0a579afcfeba192b663f54802c36a46cbc857b > Cypress dashboard. > Tags: `@tag.IDE` > Spec: >
Fri, 04 Oct 2024 07:12:01 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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. --- .../PluginActionForm/PluginActionForm.tsx | 7 ++- .../components/UQIEditorForm.tsx | 43 +++++++++++++ .../hooks/usePluginActionResponseTabs.tsx | 61 ++++++++++++++++++- 3 files changed, 109 insertions(+), 2 deletions(-) create mode 100644 app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditorForm.tsx diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx index 759ea60f1b..27464dcb3e 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx +++ b/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 ( - + {plugin.uiComponent === UIComponentTypes.ApiEditorForm && ( )} {plugin.uiComponent === UIComponentTypes.GraphQLEditorForm && ( )} + {plugin.uiComponent === UIComponentTypes.DbEditorForm || + (plugin.uiComponent === UIComponentTypes.UQIDbEditorForm && ( + + ))} ); }; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditorForm.tsx new file mode 100644 index 0000000000..5c51a2cab6 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default reduxForm({ + form: QUERY_EDITOR_FORM_NAME, + enableReinitialize: true, +})(UQIEditorForm); diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index 8e44395d5a..54e4fdf45e 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/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: ( + + ), + }); + } + + newTabs.push({ + key: "response", + title: createMessage(DEBUGGER_RESPONSE), + panelComponent: ( + + ), + }); + + return tabs.concat(newTabs); + } + return tabs; }