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

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],