fix:query response count on error in QueryDebuggerTabs (#35363)

### PR Description:
- Description: Added the conditional rendering of the record count or
error state based on the `isExecutionSuccess` property which is present
in props actionResponse.
- Attached the video explaning the fix and demoing: [Video
Url](https://www.loom.com/share/c40e624688114c1c9c005ab3e8f5de69?sid=bb927dc4-a9a2-476b-861a-26bbffda51b0)
- `isExecutionSuccess`: boolean contains the response of the query
whether that query was successful or not on the server.
- Added the unit test case.

Fixes https://github.com/appsmithorg/appsmith/issues/33813

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced error handling in the Query Debugger, displaying error
messages in red when an action fails.
- Improved user feedback by conditionally rendering output length based
on the success of the action.

- **Tests**
- Added test cases to ensure correct component behavior for both
successful and failed API responses.

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

app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { ThemeProvider } from "styled-components";
@@ -10,9 +10,36 @@ import { EditorViewMode } from "ee/entities/IDE/constants";
 import "@testing-library/jest-dom/extend-expect";
 import QueryDebuggerTabs from "./QueryDebuggerTabs";
 import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
+import type { ActionResponse } from "api/ActionAPI";
 
 const mockStore = configureStore([]);
 
+const mockSuccessResponse: ActionResponse = {
+  body: ["Record 1", "Record 2"],
+  statusCode: "200",
+  dataTypes: [],
+  duration: "3000",
+  size: "200",
+  isExecutionSuccess: true,
+  headers: {
+    "Content-Type": ["application/json"],
+    "Cache-Control": ["no-cache"],
+  },
+};
+
+const mockFailedResponse: ActionResponse = {
+  body: [{ response: "Failed" }],
+  statusCode: "200",
+  dataTypes: [],
+  duration: "3000",
+  size: "200",
+  isExecutionSuccess: false,
+  headers: {
+    "Content-Type": ["application/json"],
+    "Cache-Control": ["no-cache"],
+  },
+};
+
 const storeState = {
   ...unitTestBaseMockStore,
   evaluations: {
@@ -54,9 +81,7 @@ const storeState = {
 };
 
 describe("ApiResponseView", () => {
-  // TODO: Fix this the next time the file is edited
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let store: any;
+  let store = mockStore(storeState);
 
   beforeEach(() => {
     store = mockStore(storeState);
@@ -88,4 +113,59 @@ describe("ApiResponseView", () => {
         ?.classList.contains("select-text"),
     ).toBe(true);
   });
+  it("should show record count as result if the query response returns records", () => {
+    render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <QueryDebuggerTabs
+              actionName="Query1"
+              actionResponse={mockSuccessResponse}
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              isRunning={false}
+              onRunClick={() => {}}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    const expectedResultText = "Result: 2 Records";
+    const resultTextElement = screen.getByTestId("result-text");
+
+    expect(resultTextElement).toBeInTheDocument();
+    expect(resultTextElement?.textContent).toContain(expectedResultText);
+  });
+
+  it("should show error as result if the query response returns the error", () => {
+    render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <QueryDebuggerTabs
+              actionName="Query1"
+              actionResponse={mockFailedResponse}
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              isRunning={false}
+              onRunClick={() => {}}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    const expectedResultText = "Result: Error";
+    const resultTextElement = screen.getByTestId("result-text");
+
+    expect(resultTextElement).toBeInTheDocument();
+    expect(resultTextElement?.textContent).toContain(expectedResultText);
+  });
 });

app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx

@@ -44,6 +44,10 @@ const ResultsCount = styled.div`
   color: var(--ads-v2-color-fg);
 `;
 
+const ErrorText = styled(Text)`
+  color: var(--ads-v2-colors-action-error-label-default-fg);
+`;
+
 interface QueryDebuggerTabsProps {
   actionSource: SourceEntity;
   currentActionConfig?: Action;
@@ -274,11 +278,15 @@ function QueryDebuggerTabs({
     >
       {output && !!output.length && (
         <ResultsCount>
-          <Text type={TextType.P3}>
+          <Text data-testid="result-text" type={TextType.P3}>
             Result:
+            {actionResponse?.isExecutionSuccess ? (
               <Text type={TextType.H5}>{` ${output.length} Record${
                 output.length > 1 ? "s" : ""
               }`}</Text>
+            ) : (
+              <ErrorText type={TextType.H5}>{" Error"}</ErrorText>
+            )}
           </Text>
         </ResultsCount>
       )}