diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index 88524b915eb2..45244f48010c 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from "react"; +import React, { useCallback, useEffect } from "react"; import { IDEBottomView, ViewHideBehaviour } from "IDE"; import { ActionExecutionResizerHeight } from "./constants"; import EntityBottomTabs from "components/editorComponents/EntityBottomTabs"; @@ -8,17 +8,66 @@ import { getPluginActionDebuggerState } from "../../store"; import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { usePluginActionResponseTabs } from "./hooks"; +import { usePluginActionContext } from "../../PluginActionContext"; +import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers"; +import useShowSchema from "./hooks/useShowSchema"; +import { actionResponseDisplayDataFormats } from "pages/Editor/utils"; function PluginActionResponse() { const dispatch = useDispatch(); + const { actionResponse, plugin } = usePluginActionContext(); const tabs = usePluginActionResponseTabs(); + const pluginRequireDatasource = doesPluginRequireDatasource(plugin); + + const showSchema = useShowSchema(plugin?.id || "") && pluginRequireDatasource; // TODO combine API and Query Debugger state const { open, responseTabHeight, selectedTab } = useSelector( getPluginActionDebuggerState, ); + const { responseDisplayFormat } = + actionResponseDisplayDataFormats(actionResponse); + + // These useEffects are used to open the response tab by default for page load queries + // as for page load queries, query response is available and can be shown in response tab + useEffect( + function openResponseTabForPageLoadQueries() { + // actionResponse and responseDisplayFormat is present only when query has response available + if ( + !!responseDisplayFormat?.title && + actionResponse?.isExecutionSuccess + ) { + dispatch( + setPluginActionEditorDebuggerState({ + open: true, + selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, + }), + ); + } + }, + [ + responseDisplayFormat?.title, + actionResponse?.isExecutionSuccess, + dispatch, + ], + ); + + useEffect( + function openSchemaTabWhenNoTabIsSelected() { + if (showSchema && !selectedTab) { + dispatch( + setPluginActionEditorDebuggerState({ + open: true, + selectedTab: DEBUGGER_TAB_KEYS.SCHEMA_TAB, + }), + ); + } + }, + [showSchema, selectedTab, dispatch], + ); + const toggleHide = useCallback( () => dispatch(setPluginActionEditorDebuggerState({ open: !open })), [dispatch, open],