- {EMPTY_RESPONSE_FIRST_HALF()}
+
+ {EMPTY_RESPONSE_RUN()}
- {EMPTY_RESPONSE_LAST_HALF()}
-
+
- {actionResponse.pluginErrorDetails.downstreamErrorMessage ||
- actionResponse.pluginErrorDetails.appsmithErrorMessage}
-
- {actionResponse.pluginErrorDetails.downstreamErrorCode && (
- {actionResponse.body}
- )
- ))}
- {`${title}: ${message}`}
+ ))}
+
+ );
+ }
+
+ return null;
+ }, [actionResponse]);
+
+ const handleContentTypeChange = useEventCallback((e?: Event) => {
+ if (e?.target && e.target instanceof HTMLElement) {
+ const { value } = e.target.dataset;
+
+ if (typeof value === "string") {
+ setSelectedContentType(value);
+ onResponseTabSelect(value);
+ }
+ }
+ });
+
+ const handleJsonWrapperClick = useEventCallback(
+ (e: React.MouseEvent
+
+
+
+ {`${actionName}.run():`}
+
+
+ Error
+
+
+
+
+
+
+ Your query failed to execute
+ {actionResponse &&
+ (actionResponse.pluginErrorDetails || actionResponse.body) &&
+ ":"}
+
+ {actionResponse &&
+ (actionResponse.pluginErrorDetails ? (
+ <>
+
+ {actionResponse && actionResponse.request && (
+
+
+ )}
+
+
+ )}
+ {hintMessages && hintMessages.length > 0 && (
+
+ {actionResponse.pluginErrorDetails
+ .downstreamErrorMessage ||
+ actionResponse.pluginErrorDetails.appsmithErrorMessage}
+
+ {actionResponse.pluginErrorDetails.downstreamErrorCode && (
+
+ {actionResponse.body}
+
+ )
+ ))}
+
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/constants.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/constants.ts
new file mode 100644
index 00000000000..be218f4476f
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/constants.ts
@@ -0,0 +1,2 @@
+/** Height for tab bar in px. Required for container height calculations. */
+export const TAB_BAR_HEIGHT = 40;
diff --git a/app/client/src/assets/images/no-response.svg b/app/client/src/assets/images/no-response.svg
index 6fea7ab0957..89f819dc189 100644
--- a/app/client/src/assets/images/no-response.svg
+++ b/app/client/src/assets/images/no-response.svg
@@ -1,27 +1,56 @@
-
+
\ No newline at end of file
diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index f525c40f0d3..ddf41bdfbdc 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -569,6 +569,7 @@ export const ACTION_CONFIGURATION_UPDATED = () => "Configuration updated";
export const WIDGET_PROPERTIES_UPDATED = () => "Widget properties were updated";
export const EMPTY_RESPONSE_FIRST_HALF = () => "🙌 Click on";
export const EMPTY_RESPONSE_LAST_HALF = () => "to get a response";
+export const EMPTY_RESPONSE_RUN = () => "Click ‘Run’ to get a response";
export const EMPTY_JS_RESPONSE_LAST_HALF = () =>
"to view response of selected function";
export const INVALID_EMAIL = () => "Please enter a valid email";
diff --git a/app/client/src/components/editorComponents/ActionExecutionInProgressView.tsx b/app/client/src/components/editorComponents/ActionExecutionInProgressView.tsx
index 627d1f1de39..1627c0c1f31 100644
--- a/app/client/src/components/editorComponents/ActionExecutionInProgressView.tsx
+++ b/app/client/src/components/editorComponents/ActionExecutionInProgressView.tsx
@@ -21,13 +21,12 @@ const LoadingOverlayContainer = styled.div`
flex-direction: column;
justify-content: center;
align-items: center;
- gap: var(--ads-v2-spaces-3);
+ gap: var(--ads-v2-spaces-5);
background-color: transparent;
position: relative;
z-index: 20;
width: 100%;
height: 100%;
- margin-top: 5px;
`;
const LoadingProgressWrapper = styled.div`
@@ -56,7 +55,7 @@ const ActionExecutionInProgressView = ({
-
{createMessage(ACTION_EXECUTION_MESSAGE, actionType)}
@@ -64,7 +63,7 @@ const ActionExecutionInProgressView = ({
className={`t--cancel-action-button`}
kind="secondary"
onClick={handleCancelActionExecution}
- size="md"
+ size="sm"
>
{createMessage(ACTION_EXECUTION_CANCEL)}
diff --git a/app/client/src/components/editorComponents/EntityBottomTabs.tsx b/app/client/src/components/editorComponents/EntityBottomTabs.tsx
index e649ba41d1a..01f8eeb5da6 100644
--- a/app/client/src/components/editorComponents/EntityBottomTabs.tsx
+++ b/app/client/src/components/editorComponents/EntityBottomTabs.tsx
@@ -24,8 +24,10 @@ const TabPanelWrapper = styled(TabPanel)`
`;
const TabsListWrapper = styled(TabsList)`
- padding: calc(var(--ads-v2-spaces-1) + 2px) var(--ads-v2-spaces-7)
- var(--ads-v2-spaces-1);
+ && {
+ padding: var(--ads-v2-spaces-2);
+ padding-bottom: var(--ads-v2-spaces-1);
+ }
`;
export interface BottomTab {
diff --git a/app/client/src/components/editorComponents/JSResponseView.test.tsx b/app/client/src/components/editorComponents/JSResponseView.test.tsx
index 5d3e177cc17..b873c110660 100644
--- a/app/client/src/components/editorComponents/JSResponseView.test.tsx
+++ b/app/client/src/components/editorComponents/JSResponseView.test.tsx
@@ -12,7 +12,7 @@ import { EditorViewMode } from "ee/entities/IDE/constants";
import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer";
import { PluginType } from "entities/Action";
import "@testing-library/jest-dom/extend-expect";
-import { EMPTY_RESPONSE_LAST_HALF } from "ee/constants/messages";
+import { EMPTY_RESPONSE_RUN } from "ee/constants/messages";
import { DEBUGGER_TAB_KEYS } from "./Debugger/constants";
jest.mock("ee/utils/actionExecutionUtils");
@@ -116,7 +116,7 @@ describe("JSResponseView", () => {
,
);
- expect(getByText(EMPTY_RESPONSE_LAST_HALF())).toBeInTheDocument();
+ expect(getByText(EMPTY_RESPONSE_RUN())).toBeInTheDocument();
});
it("should render correctly when isBrowserExecutionAllowed returns false", () => {
@@ -144,7 +144,7 @@ describe("JSResponseView", () => {
,
);
// nothing should be rendered here since the implementation for component is in EE code
- expect(queryByText(document.body, EMPTY_RESPONSE_LAST_HALF())).toBeNull();
+ expect(queryByText(document.body, EMPTY_RESPONSE_RUN())).toBeNull();
});
it("the container should have class select-text to enable the selection of text for user", () => {
diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx
index 047147748af..603fa158132 100644
--- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
import configureStore from "redux-mock-store";
import { Provider } from "react-redux";
import { ThemeProvider } from "styled-components";
@@ -10,36 +10,9 @@ 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: {
@@ -113,59 +86,4 @@ describe("ApiResponseView", () => {
?.classList.contains("select-text"),
).toBe(true);
});
- it("should show record count as result if the query response returns records", () => {
- render(
-
-
-
- {}}
- />
-
-
- ,
- );
-
- 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(
-
-
-
- {}}
- />
-
-
- ,
- );
-
- const expectedResultText = "Result: Error";
- const resultTextElement = screen.getByTestId("result-text");
-
- expect(resultTextElement).toBeInTheDocument();
- expect(resultTextElement?.textContent).toContain(expectedResultText);
- });
});
diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx
index 9dd4c29ead0..de65f52af95 100644
--- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx
@@ -2,9 +2,7 @@ import type { BottomTab } from "components/editorComponents/EntityBottomTabs";
import EntityBottomTabs from "components/editorComponents/EntityBottomTabs";
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
-import styled from "styled-components";
import { getErrorCount } from "selectors/debuggerSelectors";
-import { Text, TextType } from "@appsmith/ads-old";
import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants";
import {
DEBUGGER_ERRORS,
@@ -16,7 +14,6 @@ import DebuggerLogs from "components/editorComponents/Debugger/DebuggerLogs";
import ErrorLogs from "components/editorComponents/Debugger/Errors";
import Schema from "PluginActionEditor/components/PluginActionResponse/components/Schema";
import type { ActionResponse } from "api/ActionAPI";
-import { isString } from "lodash";
import type { SourceEntity } from "entities/AppsmithConsole";
import type { Action } from "entities/Action";
import QueryResponseTab from "PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab";
@@ -37,17 +34,6 @@ import { getIDEViewMode } from "selectors/ideSelectors";
import { EditorViewMode } from "ee/entities/IDE/constants";
import { IDEBottomView, ViewHideBehaviour } from "IDE";
-const ResultsCount = styled.div`
- position: absolute;
- right: ${(props) => props.theme.spaces[17] + 1}px;
- top: 9px;
- 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;
@@ -71,9 +57,6 @@ function QueryDebuggerTabs({
runErrorMessage,
showSchema,
}: QueryDebuggerTabsProps) {
- // TODO: Fix this the next time the file is edited
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- let output: Record[] | null = null;
const dispatch = useDispatch();
const { open, responseTabHeight, selectedTab } = useSelector(
@@ -172,27 +155,6 @@ function QueryDebuggerTabs({
}
}, [currentActionConfig?.id]);
- // Query is executed even once during the session, show the response data.
- if (actionResponse) {
- if (isString(actionResponse.body)) {
- try {
- // Try to parse response as JSON array to be displayed in the Response tab
- output = JSON.parse(actionResponse.body);
- } catch (e) {
- // In case the string is not a JSON, wrap it in a response object
- output = [
- {
- response: actionResponse.body,
- },
- ];
- }
- } else {
- // TODO: Fix this the next time the file is edited
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- output = actionResponse.body as any;
- }
- }
-
const setQueryResponsePaneHeight = useCallback(
(height: number) => {
dispatch(
@@ -276,21 +238,6 @@ function QueryDebuggerTabs({
onHideClick={onToggle}
setHeight={setQueryResponsePaneHeight}
>
- {output && !!output.length && (
-
-
- Result:
- {actionResponse?.isExecutionSuccess ? (
- {` ${output.length} Record${
- output.length > 1 ? "s" : ""
- }`}
- ) : (
- {" Error"}
- )}
-
-
- )}
-