From 9cbcd35bbfba199759a89eb7eb5330de5b654806 Mon Sep 17 00:00:00 2001 From: sneha122 Date: Fri, 3 Nov 2023 11:01:11 +0530 Subject: [PATCH] fix: response tab open by default in case of page load query (#28425) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This PR fixes second part of the issue #28287 . First part, where data was not getting shown in response tab even if data is present, was fixed in PR #28296 . Second part is where we want to keep the debugger tab open, when query response is present. Its fixed in this PR. https://github.com/appsmithorg/appsmith/assets/30018882/09e390a7-a311-4200-9e3f-71a0cd241a4f #### PR fixes following issue(s) Fixes #28428 #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [ ] Jest - [x] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: “sneha122” <“sneha@appsmith.com”> --- .../ClientSide/BugTests/Bug28287_Spec.ts | 2 -- .../Editor/QueryEditor/EditorJSONtoForm.tsx | 29 ++++++++++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28287_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28287_Spec.ts index 8d443d7879..fd743c5a70 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28287_Spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28287_Spec.ts @@ -37,8 +37,6 @@ describe("Bug 28287: Binding query to widget, check query response in query edit agHelper.Sleep(1000); entityExplorer.SelectEntityByName(queryName, "Queries/JS"); - debuggerHelper.ClickDebuggerIcon(); - debuggerHelper.ClickResponseTab(); agHelper.AssertElementVisibility(dataSources._queryResponse("TABLE")); }); diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx index 7db6aab123..c2e871407a 100644 --- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx +++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx @@ -1,4 +1,4 @@ -import { useContext } from "react"; +import { useContext, useEffect } from "react"; import type { RefObject } from "react"; import React, { useCallback, useRef, useState } from "react"; import type { InjectedFormProps } from "redux-form"; @@ -443,6 +443,9 @@ export function EditorJSONtoForm(props: Props) { (state: AppState) => getCurrentAppWorkspace(state).userPermissions ?? [], ); + const [showResponseOnFirstLoad, setShowResponseOnFirstLoad] = + useState(false); + const canCreateDatasource = getHasCreateDatasourcePermission( isFeatureEnabled, userWorkspacePermissions, @@ -503,6 +506,30 @@ export function EditorJSONtoForm(props: Props) { } } + // 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(() => { + // output and responseDisplayFormat is present only when query has response available + if ( + responseDisplayFormat && + !!responseDisplayFormat?.title && + output && + !showResponseOnFirstLoad + ) { + dispatch(showDebugger(true)); + dispatch(setDebuggerSelectedTab(DEBUGGER_TAB_KEYS.RESPONSE_TAB)); + setShowResponseOnFirstLoad(true); + } + }, [responseDisplayFormat, output, showResponseOnFirstLoad]); + + // 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 (!!currentActionConfig?.id) { + setShowResponseOnFirstLoad(false); + } + }, [currentActionConfig?.id]); + const dispatch = useDispatch(); const handleDocumentationClick = (e: React.MouseEvent) => {