From 5e89aa056eb879fdc179b5d07e63cf9c7a239d3d Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Fri, 8 Nov 2024 11:10:49 +0530
Subject: [PATCH] chore: Opening response pane by default on query creation and
 for page load queries (#37245)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Opening response pane by default on query creation and for page load
queries

Fixes [#37216](https://github.com/appsmithorg/appsmith/issues/37216)

## Automation

/ok-to-test tags="@tag.Sanity"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11723600626>
> Commit: 98db89cea1891e15fa5881503fa34a26d42cfd76
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11723600626&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Thu, 07 Nov 2024 13:48:18 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced the `PluginActionResponse` component for improved
functionality and dynamic response handling.
- Introduced a new state variable to manage response tab visibility on
initial load.
- Added logic to automatically open the response and schema tabs based
on action responses.

- **Bug Fixes**
- Improved control flow and error handling for displaying responses
based on action success.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ankita Kinger <ankitakinger@Ankitas-MacBook-Pro.local>
---
 .../PluginActionResponse.tsx                  | 51 ++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx
index 88524b915eb..45244f48010 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],