fix: display correct message for API reqeusts (#39786)

## Description
Fixes an issue where incorrect/incomplete message is shown for API
reponses.

Fixes #39432 

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!WARNING]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13925272629>
> Commit: 629191db7a352a05546d29b8b73b8020316226f2
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13925272629&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.IDE
> Spec: 
> It seems like **no tests ran** 😔. We are not able to recognize it,
please check <a
href="https://github.com/appsmithorg/appsmith/actions/runs/13925272629"
target="_blank">workflow here</a>.
> <hr>Tue, 18 Mar 2025 14:44:01 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 error reporting now displays a clear title alongside the
detailed message, providing improved context for users encountering
issues.
- The streamlined error feedback offers a more structured presentation
to help users better understand and address any problems.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -32,7 +32,7 @@ export const ErrorView: React.FC<ErrorViewProps> = ({
   handleJsonWrapperClick,
   tooltipContent,
 }) => {
-  const errorMessage = getErrorMessageFromActionResponse(
+  const [errorTitle, errorMessage] = getErrorMessageFromActionResponse(
     actionResponse,
     action.pluginType,
   );
@@ -79,7 +79,7 @@ export const ErrorView: React.FC<ErrorViewProps> = ({
             Request has failed to execute
             {errorMessage && ":"}
           </Styled.ErrorDefaultMessage>
-          <div data-testid="t--response-error">{errorMessage}</div>
+          <div data-testid="t--response-error">{errorTitle}</div>
           <LogHelper
             logType={LOG_TYPE.ACTION_EXECUTION_ERROR}
             message={`${errorMessage}`}

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts

@@ -1,32 +1,52 @@
+// Type imports
 import type { ActionResponse } from "api/ActionAPI";
+
+// Application-specific imports
 import { PluginType } from "entities/Plugin";
 import { DEFAULT_ERROR_MESSAGE } from "../constants";
 
+/**
+ * Checks if the plugin type is supported for detailed error handling
+ */
+const isSupportedPluginTypeForErrorDetails = (
+  pluginType?: PluginType,
+): boolean => {
+  return (
+    pluginType === PluginType.DB ||
+    pluginType === PluginType.SAAS ||
+    pluginType === PluginType.EXTERNAL_SAAS ||
+    pluginType === PluginType.API
+  );
+};
+
 /**
  * Retrieves the error message from the action response.
+ * Returns a tuple of [errorTitle, errorMessage]
  */
 export const getErrorMessageFromActionResponse = (
   actionResponse?: ActionResponse,
   pluginType?: PluginType,
 ) => {
-  // Return default error message if action response is not provided
-  if (!actionResponse) return DEFAULT_ERROR_MESSAGE;
-
-  const { body, pluginErrorDetails } = actionResponse;
-
-  if (pluginErrorDetails) {
-    // Return downstream error message if available
-    // Otherwise, return Appsmith error message
-    return (
-      pluginErrorDetails.downstreamErrorMessage ||
-      pluginErrorDetails.appsmithErrorMessage
-    );
+  if (!actionResponse) {
+    return [DEFAULT_ERROR_MESSAGE, DEFAULT_ERROR_MESSAGE];
   }
 
-  // Return body if plugin type is DB/SAAS/ExternalSAAS, otherwise return default error message
-  return pluginType === PluginType.DB ||
-    pluginType === PluginType.SAAS ||
-    pluginType === PluginType.EXTERNAL_SAAS
+  const { body, pluginErrorDetails, statusCode } = actionResponse;
+
+  // Determine base error message based on plugin type
+  let errorMessage = isSupportedPluginTypeForErrorDetails(pluginType)
     ? body
     : DEFAULT_ERROR_MESSAGE;
+
+  // Override with plugin-specific error details if available
+  if (pluginErrorDetails) {
+    errorMessage =
+      pluginErrorDetails.downstreamErrorMessage ||
+      pluginErrorDetails.appsmithErrorMessage;
+  }
+
+  // For API plugin types, use status code as the title
+  const errorTitle = pluginType === PluginType.API ? statusCode : errorMessage;
+
+  return [errorTitle, errorMessage];
 };