chore: Updating the UX related to Action Response tabs

app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/ApiError_spec.ts

@@ -12,12 +12,12 @@ describe(
       // Create api that causes an error
       _.apiPage.CreateAndFillApi("https://fakeapi/user");
     });
-    it("it shows error message", () => {
+    it("it shows error message in response tab", () => {
       _.apiPage.RunAPI(false);
       _.debuggerHelper.AssertOpen(PageType.API);
       _.apiPage.ResponseStatusCheck("PE-RST-5000");
     });
-    it("it shows debug button and navigates", () => {
+    it("it shows error messages in error tab", () => {
       _.apiPage.DebugError();
       _.debuggerHelper.AssertSelectedTab(
         Cypress.env("MESSAGES").DEBUGGER_ERRORS(),

app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts

@@ -102,13 +102,13 @@ describe(
           //Create and run query.
 
           _.dataSources.EnterQuery(
-            "SELECT * FROM users ORDER BY id LIMIT 10;",
+            "SELECT * FROM public.users ORDER BY id LIMIT 10;",
             1000,
           );
           _.dataSources.RunQuery();
           //Verify if bottom bar is open on executing query.
           _.debuggerHelper.AssertOpen(PageType.Query);
-          //Verify if response atb is selected on executing query.
+          //Verify if response tab is selected on executing query.
           _.debuggerHelper.AssertSelectedTab(
             Cypress.env("MESSAGES").DEBUGGER_RESPONSE(),
           );
@@ -140,13 +140,13 @@ describe(
       _.debuggerHelper.AssertClosed();
       //Create and run query.
       _.dataSources.EnterQuery(
-        "SELECT * FROM users ORDER BY id LIMIT 10;",
+        "SELECT * FROM public.users ORDER BY id LIMIT 10;",
         1000,
       );
       _.dataSources.RunQuery();
       //Verify if bottom bar is open on executing query.
       _.debuggerHelper.AssertOpen(PageType.Query);
-      //Verify if response atb is selected on executing query.
+      //Verify if response tab is selected on executing query.
       _.debuggerHelper.AssertSelectedTab(
         Cypress.env("MESSAGES").DEBUGGER_RESPONSE(),
       );

app/client/cypress/support/Pages/ApiPage.ts

@@ -83,8 +83,7 @@ export class ApiPage {
   private _paginationTypeLabels = ".t--apiFormPaginationType label";
   _saveAsDS = ".t--store-as-datasource";
   _responseStatus = ".t--response-status-code";
-  public _responseTabHeader = "[data-testid=t--tab-HEADERS_TAB]";
-  public _headersTabContent = ".t--headers-tab";
+  public _debugger = ".t--debugger-count";
   public _autoGeneratedHeaderInfoIcon = (key: string) =>
     `.t--auto-generated-${key}-info`;
   _nextCursorValue = ".t--apiFormPaginationNextCursorValue";
@@ -471,8 +470,7 @@ export class ApiPage {
   }
 
   DebugError() {
-    this.agHelper.GetNClick(this._responseTabHeader);
-    cy.get(this._headersTabContent).contains("Debug").click();
+    this.agHelper.GetNClick(this._debugger);
   }
 
   public FillCurlNImport(value: string) {

app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { IDEBottomView, ViewHideBehaviour } from "IDE";
 import { ActionExecutionResizerHeight } from "./constants";
 import EntityBottomTabs from "components/editorComponents/EntityBottomTabs";
@@ -12,6 +12,8 @@ import { usePluginActionContext } from "../../PluginActionContext";
 import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers";
 import useShowSchema from "./hooks/useShowSchema";
 import { actionResponseDisplayDataFormats } from "pages/Editor/utils";
+import { PluginType } from "entities/Action";
+import { hasFailed } from "./utils";
 
 function PluginActionResponse() {
   const dispatch = useDispatch();
@@ -30,6 +32,11 @@ function PluginActionResponse() {
   const { responseDisplayFormat } =
     actionResponseDisplayDataFormats(actionResponse);
 
+  const executionFailed = useMemo(
+    () => (actionResponse ? hasFailed(actionResponse) : false),
+    [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(
@@ -55,17 +62,38 @@ function PluginActionResponse() {
   );
 
   useEffect(
-    function openSchemaTabWhenNoTabIsSelected() {
+    function openResponseTabOnError() {
+      if (executionFailed) {
+        dispatch(
+          setPluginActionEditorDebuggerState({
+            open: true,
+            selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB,
+          }),
+        );
+      }
+    },
+    [executionFailed, dispatch],
+  );
+
+  useEffect(
+    function openDefaultTabWhenNoTabIsSelected() {
       if (showSchema && !selectedTab) {
         dispatch(
           setPluginActionEditorDebuggerState({
             open: true,
             selectedTab: DEBUGGER_TAB_KEYS.SCHEMA_TAB,
           }),
         );
+      } else if (plugin.type === PluginType.API && !selectedTab) {
+        dispatch(
+          setPluginActionEditorDebuggerState({
+            open: true,
+            selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB,
+          }),
+        );
       }
     },
-    [showSchema, selectedTab, dispatch],
+    [showSchema, selectedTab, dispatch, plugin.type],
   );
 
   const toggleHide = useCallback(

app/client/src/PluginActionEditor/components/PluginActionResponse/components/ApiResponseHeaders.tsx

@@ -55,17 +55,6 @@ export function ApiResponseHeaders(props: {
     return headersTransformer(props.actionResponse?.headers);
   }, [props.actionResponse?.headers]);
 
-  const errorCalloutLinks = useMemo(() => {
-    return [
-      {
-        children: "Debug",
-        endIcon: "bug",
-        onClick: props.onDebugClick,
-        to: "",
-      },
-    ];
-  }, [props.onDebugClick]);
-
   const headersInput = useMemo(() => {
     return {
       value: !isEmpty(responseHeaders)
@@ -91,21 +80,21 @@ export function ApiResponseHeaders(props: {
   return (
     <Flex className="t--headers-tab" flexDirection="column" h="100%" w="100%">
       {runHasFailed && !props.isRunning && (
-        <Callout kind="error" links={errorCalloutLinks}>
-          {createMessage(CHECK_REQUEST_BODY)}
-        </Callout>
+        <Callout kind="error">{createMessage(CHECK_REQUEST_BODY)}</Callout>
+      )}
+      {!runHasFailed && (
+        <ResponseDataContainer>
+          {isEmpty(props.actionResponse.statusCode) ? (
+            <NoResponse
+              isRunDisabled={props.isRunDisabled}
+              isRunning={props.isRunning}
+              onRunClick={props.onRunClick}
+            />
+          ) : (
+            <ReadOnlyEditor folding height={"100%"} input={headersInput} />
+          )}
+        </ResponseDataContainer>
       )}
-      <ResponseDataContainer>
-        {isEmpty(props.actionResponse.statusCode) ? (
-          <NoResponse
-            isRunDisabled={props.isRunDisabled}
-            isRunning={props.isRunning}
-            onRunClick={props.onRunClick}
-          />
-        ) : (
-          <ReadOnlyEditor folding height={"100%"} input={headersInput} />
-        )}
-      </ResponseDataContainer>
     </Flex>
   );
 }

app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts

@@ -33,6 +33,7 @@ export const StatusBar = styled.div`
   padding: 8px;
   border-bottom: 1px solid var(--ads-v2-color-border);
   z-index: var(--ads-v2-z-index-1);
+  background: var(--ads-v2-color-bg);
 `;
 
 export const StatusBarInfo = styled.div`

app/client/src/components/editorComponents/ApiResponseView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import type { ActionResponse } from "api/ActionAPI";
 import {
@@ -17,7 +17,7 @@ import EntityBottomTabs from "./EntityBottomTabs";
 import { DEBUGGER_TAB_KEYS } from "./Debugger/constants";
 import { getErrorCount } from "selectors/debuggerSelectors";
 import { ActionExecutionResizerHeight } from "PluginActionEditor/components/PluginActionResponse/constants";
-import type { Action } from "entities/Action";
+import { PluginType, type Action } from "entities/Action";
 import { EMPTY_RESPONSE } from "./emptyResponse";
 import {
   getPluginActionDebuggerState,
@@ -58,6 +58,20 @@ function ApiResponseView(props: Props) {
 
   const onDebugClick = useDebuggerTriggerClick();
 
+  useEffect(
+    function openDefaultTabWhenNoTabIsSelected() {
+      if (currentActionConfig.pluginType === PluginType.API && !selectedTab) {
+        dispatch(
+          setPluginActionEditorDebuggerState({
+            open: true,
+            selectedTab: DEBUGGER_TAB_KEYS.RESPONSE_TAB,
+          }),
+        );
+      }
+    },
+    [selectedTab, dispatch, currentActionConfig.pluginType],
+  );
+
   const onRunClick = () => {
     props.onRunClick();
     AnalyticsUtil.logEvent("RESPONSE_TAB_RUN_ACTION_CLICK", {