chore: Updating the UX related to Action Response tabs

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

@@ -46,14 +46,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`
@@ -93,7 +93,7 @@ export function ApiResponse(props: {
     );
   }
 
-  const { messages, pluginErrorDetails, request } = props.actionResponse;
+  const { body, messages, pluginErrorDetails, request } = props.actionResponse;
 
   const runHasFailed = hasFailed(props.actionResponse);
   const requestWithTimestamp = getUpdateTimestamp(request);
@@ -121,7 +121,7 @@ export function ApiResponse(props: {
           <ResponseTabErrorContent>
             <ResponseTabErrorDefaultMessage>
               Your API failed to execute
-              {pluginErrorDetails && ":"}
+              {(pluginErrorDetails || body) && ":"}
             </ResponseTabErrorDefaultMessage>
             {pluginErrorDetails && (
               <>
@@ -142,6 +142,9 @@ export function ApiResponse(props: {
               source={actionSource}
             />
           </ResponseTabErrorContent>
+          {body && (
+            <div className="t--debugger-log-downstream-message">{body}</div>
+          )}
           {requestWithTimestamp && (
             <JsonWrapper className="t--debugger-log-state" onClick={noop}>
               <ReactJson src={requestWithTimestamp} {...apiReactJsonProps} />

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