fix:query response count on error in QueryDebuggerTabs

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

@@ -10,9 +10,36 @@ import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 import "@testing-library/jest-dom/extend-expect";
 import QueryDebuggerTabs from "./QueryDebuggerTabs";
 import { ENTITY_TYPE } from "@appsmith/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: {
@@ -87,4 +114,60 @@ describe("ApiResponseView", () => {
         ?.classList.contains("select-text"),
     ).toBe(true);
   });
+
+  it("should show record count as result if the query response returns records", () => {
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <QueryDebuggerTabs
+              actionName="Query1"
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              actionResponse={mockSuccessResponse}
+              isRunning={false}
+              onRunClick={() => {}}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    const expectedResultText = "Result: 2 Records";
+    const resultTextElement = container.querySelector(".result-text");
+
+    expect(resultTextElement).toBeInTheDocument();
+    expect(resultTextElement?.textContent).toContain(expectedResultText);
+  });
+
+  it("should show error as result if the query response returns the error", () => {
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <QueryDebuggerTabs
+              actionName="Query1"
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              actionResponse={mockFailedResponse}
+              isRunning={false}
+              onRunClick={() => {}}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    const expectedResultText = "Result: Error";
+    const resultTextElement = container.querySelector(".result-text");
+
+    expect(resultTextElement).toBeInTheDocument();
+    expect(resultTextElement?.textContent).toContain(expectedResultText);
+  });
 });

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

@@ -242,13 +242,19 @@ function QueryDebuggerTabs({
       onHideClick={onToggle}
       setHeight={setQueryResponsePaneHeight}
     >
-      {output && !!output.length && (
+       {output && !!output.length && (
         <ResultsCount>
-          <Text type={TextType.P3}>
+          <Text className="result-text" type={TextType.P3}>
             Result:
-            <Text type={TextType.H5}>{` ${output.length} Record${
-              output.length > 1 ? "s" : ""
-            }`}</Text>
+            {actionResponse?.isExecutionSuccess ? (
+              <Text type={TextType.H5}>{` ${output.length} Record${
+                output.length > 1 ? "s" : ""
+              }`}</Text>
+            ) : (
+              <Text type={TextType.H5} color="red">
+                {" Error"}
+              </Text>
+            )}
           </Text>
         </ResultsCount>
       )}