TESTING EXTERNAL SCRIPT: external merge request from Contributor

app/client/src/components/formControls/RadioButtonControl.test.tsx

@@ -115,4 +115,4 @@ describe("RadioButtonControl", () => {
     expect(options[1]).toBeChecked();
     expect(options[2]).not.toBeChecked();
   });
-});
+});

app/client/src/components/formControls/RadioButtonControl.tsx

@@ -62,7 +62,6 @@ function renderComponent(props: renderComponentProps) {
     </StyledRadioGroup>
   );
 }
-
 export interface RadioButtonControlProps extends ControlProps {
   options: SelectOptionProps[];
 }

app/client/src/pages/Editor/DataSourceEditor/index.tsx

@@ -162,7 +162,6 @@ type Props = ReduxStateProps &
   }>;
 
 export const DSEditorWrapper = styled.div`
-  height: calc(100vh - ${(props) => props.theme.headerHeight});
   overflow: hidden;
   display: flex;
   flex-direction: row;

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

@@ -1,18 +1,46 @@
 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 type { AnyAction, Store } from "redux";
 import { ThemeProvider } from "styled-components";
 import { unitTestBaseMockStore } from "layoutSystems/common/dropTarget/unitTestUtils";
 import { lightTheme } from "selectors/themeSelectors";
 import { BrowserRouter as Router } from "react-router-dom";
-import { EditorViewMode } from "ee/entities/IDE/constants";
 import "@testing-library/jest-dom/extend-expect";
 import QueryDebuggerTabs from "./QueryDebuggerTabs";
+import type { ActionResponse } from "api/ActionAPI";
 import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
+import { EditorViewMode } from "ee/entities/IDE/constants";
 
 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: {
@@ -53,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: Store<any, AnyAction>;
 
   beforeEach(() => {
     store = mockStore(storeState);
@@ -87,4 +113,60 @@ 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

@@ -269,11 +269,17 @@ function QueryDebuggerTabs({
     >
       {output && !!output.length && (
         <ResultsCount>
-          <Text type={TextType.P3}>
+          <Text data-testid="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 color="red" type={TextType.H5}>
+                {" Error"}
+              </Text>
+            )}
           </Text>
         </ResultsCount>
       )}