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

@@ -82,8 +82,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/ApiResponse.tsx

@@ -21,6 +21,8 @@ import { getUpdateTimestamp } from "components/editorComponents/Debugger/ErrorLo
 import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
 import ApiFormatSegmentedResponse from "./ApiFormatSegmentedResponse";
 import { NoResponse } from "./NoResponse";
+import { useSelector } from "react-redux";
+import { getFilteredErrors } from "selectors/debuggerSelectors";
 
 const HelpSection = styled.div`
   padding-bottom: 5px;
@@ -46,14 +48,14 @@ export const ResponseTabErrorContainer = styled.div`
   height: fit-content;
   background: var(--ads-v2-color-bg-error);
   border-bottom: 1px solid var(--ads-v2-color-border);
+  font-size: 12px;
+  line-height: 16px;
 `;
 
 export const ResponseTabErrorContent = styled.div`
   display: flex;
   align-items: flex-start;
   gap: 4px;
-  font-size: 12px;
-  line-height: 16px;
 `;
 
 export const ResponseTabErrorDefaultMessage = styled.div`
@@ -71,7 +73,19 @@ export function ApiResponse(props: {
   onRunClick: () => void;
   responseTabHeight: number;
 }) {
-  const { id, name } = props.action;
+  const {
+    action,
+    actionResponse,
+    isRunDisabled,
+    isRunning,
+    onRunClick,
+    responseTabHeight,
+    theme,
+  } = props;
+  const { id, name } = action;
+
+  const errors = useSelector(getFilteredErrors);
+
   const actionSource: SourceEntity = useMemo(
     () => ({
       type: ENTITY_TYPE.ACTION,
@@ -81,29 +95,26 @@ export function ApiResponse(props: {
     [name, id],
   );
 
-  if (!props.actionResponse) {
+  if (!actionResponse) {
     return (
       <Flex h="100%" w="100%">
         <NoResponse
-          isRunDisabled={props.isRunDisabled}
-          isRunning={props.isRunning}
-          onRunClick={props.onRunClick}
+          isRunDisabled={isRunDisabled}
+          isRunning={isRunning}
+          onRunClick={onRunClick}
         />
       </Flex>
     );
   }
 
-  const { messages, pluginErrorDetails, request } = props.actionResponse;
+  const { body, messages, pluginErrorDetails, request } = actionResponse;
 
-  const runHasFailed = hasFailed(props.actionResponse);
+  const runHasFailed = hasFailed(actionResponse);
   const requestWithTimestamp = getUpdateTimestamp(request);
 
   return (
     <Flex flexDirection="column" h="100%" w="100%">
-      <ApiResponseMeta
-        actionName={name}
-        actionResponse={props.actionResponse}
-      />
+      <ApiResponseMeta actionName={name} actionResponse={actionResponse} />
       {Array.isArray(messages) && messages.length > 0 && (
         <HelpSection>
           {messages.map((message, i) => (
@@ -113,28 +124,35 @@ export function ApiResponse(props: {
           ))}
         </HelpSection>
       )}
-      {props.isRunning && (
-        <ActionExecutionInProgressView actionType="API" theme={props.theme} />
+      {isRunning && (
+        <ActionExecutionInProgressView actionType="API" theme={theme} />
       )}
-      {runHasFailed && !props.isRunning ? (
+      {runHasFailed && !isRunning ? (
         <ResponseTabErrorContainer>
           <ResponseTabErrorContent>
             <ResponseTabErrorDefaultMessage>
               Your API failed to execute
-              {pluginErrorDetails && ":"}
+              {actionResponse && (pluginErrorDetails || body) && ":"}
             </ResponseTabErrorDefaultMessage>
-            {pluginErrorDetails && (
-              <>
-                <div className="t--debugger-log-downstream-message">
-                  {pluginErrorDetails.downstreamErrorMessage}
-                </div>
-                {pluginErrorDetails.downstreamErrorCode && (
-                  <LogAdditionalInfo
-                    text={pluginErrorDetails.downstreamErrorCode}
-                  />
-                )}
-              </>
-            )}
+            {actionResponse &&
+              (pluginErrorDetails ? (
+                <>
+                  <div className="t--debugger-log-downstream-message">
+                    {pluginErrorDetails.downstreamErrorMessage}
+                  </div>
+                  {pluginErrorDetails.downstreamErrorCode && (
+                    <LogAdditionalInfo
+                      text={pluginErrorDetails.downstreamErrorCode}
+                    />
+                  )}
+                </>
+              ) : (
+                errors?.[action.id]?.messages?.[0].message.message && (
+                  <div className="t--api-error">
+                    {errors?.[action.id]?.messages?.[0].message.message}
+                  </div>
+                )
+              ))}
             <LogHelper
               logType={LOG_TYPE.ACTION_EXECUTION_ERROR}
               name="PluginExecutionError"
@@ -150,17 +168,17 @@ export function ApiResponse(props: {
         </ResponseTabErrorContainer>
       ) : (
         <ResponseDataContainer>
-          {isEmpty(props.actionResponse.statusCode) ? (
+          {isEmpty(actionResponse.statusCode) ? (
             <NoResponse
-              isRunDisabled={props.isRunDisabled}
-              isRunning={props.isRunning}
-              onRunClick={props.onRunClick}
+              isRunDisabled={isRunDisabled}
+              isRunning={isRunning}
+              onRunClick={onRunClick}
             />
           ) : (
             <ApiFormatSegmentedResponse
               actionId={id}
-              actionResponse={props.actionResponse}
-              responseTabHeight={props.responseTabHeight}
+              actionResponse={actionResponse}
+              responseTabHeight={responseTabHeight}
             />
           )}
         </ResponseDataContainer>

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", {