From c596aeb9c3f75c027c0d32ccb8d65937e4c7e2fa Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 5 Nov 2024 19:17:08 +0530 Subject: [PATCH 1/4] opening response pane by default on query creation or on page load queries --- .../PluginActionResponse.tsx | 61 ++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index 88524b915eb2..1a92233d5342 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, useState } from "react"; import { IDEBottomView, ViewHideBehaviour } from "IDE"; import { ActionExecutionResizerHeight } from "./constants"; import EntityBottomTabs from "components/editorComponents/EntityBottomTabs"; @@ -8,17 +8,76 @@ 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 { action, 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 [showResponseOnFirstLoad, setShowResponseOnFirstLoad] = + useState(false); + + 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(() => { + // actionResponse and responseDisplayFormat is present only when query has response available + if ( + responseDisplayFormat && + !!responseDisplayFormat?.title && + actionResponse && + actionResponse.isExecutionSuccess && + !showResponseOnFirstLoad + ) { + dispatch( + setPluginActionEditorDebuggerState({ + open: true, + selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, + }), + ); + setShowResponseOnFirstLoad(true); + } + }, [ + responseDisplayFormat, + actionResponse, + showResponseOnFirstLoad, + dispatch, + ]); + + useEffect(() => { + if (showSchema && !selectedTab) { + dispatch( + setPluginActionEditorDebuggerState({ + open: true, + selectedTab: DEBUGGER_TAB_KEYS.SCHEMA_TAB, + }), + ); + } + }, [showSchema, selectedTab, dispatch]); + + // When multiple page load queries exist, we want to response tab by default for all of them + // Hence this useEffect will reset showResponseOnFirstLoad flag used to track whether to show response tab or not + useEffect(() => { + if (!!action?.id) { + setShowResponseOnFirstLoad(false); + } + }, [action?.id]); + const toggleHide = useCallback( () => dispatch(setPluginActionEditorDebuggerState({ open: !open })), [dispatch, open], From 55c23322804741e1aee1e94d9b50688d05756cb6 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 5 Nov 2024 21:42:34 +0530 Subject: [PATCH 2/4] minor change --- .../components/PluginActionResponse/PluginActionResponse.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index 1a92233d5342..fff9f06c249a 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx @@ -73,7 +73,7 @@ function PluginActionResponse() { // When multiple page load queries exist, we want to response tab by default for all of them // Hence this useEffect will reset showResponseOnFirstLoad flag used to track whether to show response tab or not useEffect(() => { - if (!!action?.id) { + if (action?.id) { setShowResponseOnFirstLoad(false); } }, [action?.id]); From 5142e4caea100971b3cb60f6ae4903bad9c14fbe Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 7 Nov 2024 16:17:32 +0530 Subject: [PATCH 3/4] addressing review comments --- .../PluginActionResponse.tsx | 80 ++++++++----------- 1 file changed, 34 insertions(+), 46 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index fff9f06c249a..2957f631bcce 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, useEffect, useState } from "react"; +import React, { useCallback, useEffect } from "react"; import { IDEBottomView, ViewHideBehaviour } from "IDE"; import { ActionExecutionResizerHeight } from "./constants"; import EntityBottomTabs from "components/editorComponents/EntityBottomTabs"; @@ -15,7 +15,7 @@ import { actionResponseDisplayDataFormats } from "pages/Editor/utils"; function PluginActionResponse() { const dispatch = useDispatch(); - const { action, actionResponse, plugin } = usePluginActionContext(); + const { actionResponse, plugin } = usePluginActionContext(); const tabs = usePluginActionResponseTabs(); const pluginRequireDatasource = doesPluginRequireDatasource(plugin); @@ -27,56 +27,44 @@ function PluginActionResponse() { getPluginActionDebuggerState, ); - const [showResponseOnFirstLoad, setShowResponseOnFirstLoad] = - useState(false); - 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(() => { - // actionResponse and responseDisplayFormat is present only when query has response available - if ( - responseDisplayFormat && - !!responseDisplayFormat?.title && - actionResponse && - actionResponse.isExecutionSuccess && - !showResponseOnFirstLoad - ) { - dispatch( - setPluginActionEditorDebuggerState({ - open: true, - selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, - }), - ); - setShowResponseOnFirstLoad(true); - } - }, [ - responseDisplayFormat, - actionResponse, - showResponseOnFirstLoad, - dispatch, - ]); - - useEffect(() => { - if (showSchema && !selectedTab) { - dispatch( - setPluginActionEditorDebuggerState({ - open: true, - selectedTab: DEBUGGER_TAB_KEYS.SCHEMA_TAB, - }), - ); - } - }, [showSchema, selectedTab, dispatch]); + useEffect( + function openResponseTabForPageLoadQueries() { + // actionResponse and responseDisplayFormat is present only when query has response available + if ( + responseDisplayFormat && + !!responseDisplayFormat?.title && + actionResponse && + actionResponse.isExecutionSuccess + ) { + dispatch( + setPluginActionEditorDebuggerState({ + open: true, + selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB, + }), + ); + } + }, + [responseDisplayFormat, actionResponse, dispatch], + ); - // When multiple page load queries exist, we want to response tab by default for all of them - // Hence this useEffect will reset showResponseOnFirstLoad flag used to track whether to show response tab or not - useEffect(() => { - if (action?.id) { - setShowResponseOnFirstLoad(false); - } - }, [action?.id]); + 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 })), From 98db89cea1891e15fa5881503fa34a26d42cfd76 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 7 Nov 2024 18:35:51 +0530 Subject: [PATCH 4/4] fixing an issue that breaks the instance due to multiple calls to useeffect --- .../PluginActionResponse/PluginActionResponse.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index 2957f631bcce..45244f48010c 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx @@ -36,10 +36,8 @@ function PluginActionResponse() { function openResponseTabForPageLoadQueries() { // actionResponse and responseDisplayFormat is present only when query has response available if ( - responseDisplayFormat && !!responseDisplayFormat?.title && - actionResponse && - actionResponse.isExecutionSuccess + actionResponse?.isExecutionSuccess ) { dispatch( setPluginActionEditorDebuggerState({ @@ -49,7 +47,11 @@ function PluginActionResponse() { ); } }, - [responseDisplayFormat, actionResponse, dispatch], + [ + responseDisplayFormat?.title, + actionResponse?.isExecutionSuccess, + dispatch, + ], ); useEffect(