## Description Response Pane stuff - Move Api Response into its own component and sub components - Move Api Headers response into its own component and sub components - A lot of these are also used by queries and js so maybe we will create a common folder for that - Add a logic to render the bottom tabs in the module. Allows for extension via hook Fixes #36155 ## Automation /ok-to-test tags="@tag.Datasource" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11026260058> > Commit: c3b5b4b8f0e0668ff43adae1b22d320a5e6d347d > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11026260058&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Datasource` > Spec: > <hr>Wed, 25 Sep 2024 05:04:24 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced new components for displaying API responses, including `ApiFormatSegmentedResponse` and `ApiResponseHeaders`. - Enhanced user interaction with a segmented control for switching between different API response formats. - **Improvements** - Added utility functions for improved handling and validation of API response headers and HTML content. - **Bug Fixes** - Improved error handling for API response states to ensure accurate feedback during user interactions. - **Chores** - Added tests for new utility functions to validate their functionality and ensure reliability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
268 lines
6.9 KiB
TypeScript
268 lines
6.9 KiB
TypeScript
import { getJSResponseViewState, JSResponseState } from "./utils";
|
|
|
|
const TEST_JS_FUNCTION_ID = "627ccff468e1fa5185b7f901";
|
|
const TEST_JS_FUNCTION_BASE_ID = "627ccff468e1fa5185b7f912";
|
|
const TEST_JS_FUNCTION = {
|
|
id: TEST_JS_FUNCTION_ID,
|
|
baseId: TEST_JS_FUNCTION_BASE_ID,
|
|
applicationId: "627aaf637e9e9b75e43ad2ff",
|
|
workspaceId: "61e52bb4847aa804d79fc7c1",
|
|
pluginType: "JS",
|
|
pluginId: "6138c786168857325f78ef3e",
|
|
name: "myFun234y",
|
|
fullyQualifiedName: "JSObject1.myFun234y",
|
|
datasource: {
|
|
userPermissions: [],
|
|
name: "UNUSED_DATASOURCE",
|
|
pluginId: "6138c786168857325f78ef3e",
|
|
workspaceId: "61e52bb4847aa804d79fc7c1",
|
|
messages: [],
|
|
isValid: true,
|
|
new: true,
|
|
},
|
|
pageId: "627aaf637e9e9b75e43ad302",
|
|
collectionId: "627ccff468e1fa5185b7f904",
|
|
actionConfiguration: {
|
|
timeoutInMillisecond: 10000,
|
|
paginationType: "NONE",
|
|
encodeParamsToggle: true,
|
|
body: "async () => {\n\t\t//use async-await or promises here\n\t\t\n\t}",
|
|
jsArguments: [],
|
|
isAsync: true,
|
|
},
|
|
executeOnLoad: false,
|
|
clientSideExecution: true,
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "body",
|
|
},
|
|
],
|
|
isValid: true,
|
|
invalids: [],
|
|
messages: [],
|
|
jsonPathKeys: [
|
|
"async () => {\n\t\t//use async-await or promises here\n\t\t\n\t}",
|
|
],
|
|
confirmBeforeExecute: false,
|
|
userPermissions: ["read:actions", "execute:actions", "manage:actions"],
|
|
validName: "JSObject1.myFun234y",
|
|
cacheResponse: "",
|
|
};
|
|
|
|
describe("GetJSResponseViewState", () => {
|
|
it("1. returns 'NoResponse' at default state", () => {
|
|
const currentFunction = null,
|
|
isDirty = {},
|
|
isExecuting = {},
|
|
isSaving = false,
|
|
responses = {};
|
|
|
|
const expectedState = JSResponseState.NoResponse;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
it("2. returns 'NoResponse' when an entity is still saving but no execution has begun", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {},
|
|
isExecuting = {},
|
|
isSaving = true,
|
|
responses = {};
|
|
|
|
const expectedState = JSResponseState.NoResponse;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
|
|
it("3. returns 'IsUpdating' when an entity is still saving and execution has started", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {},
|
|
isExecuting = {
|
|
[TEST_JS_FUNCTION_ID]: true,
|
|
},
|
|
isSaving = true,
|
|
responses = {};
|
|
|
|
const expectedState = JSResponseState.IsUpdating;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
|
|
it("4. returns 'IsExecuting' when no entity is saving and execution has begun", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {},
|
|
isExecuting = {
|
|
[TEST_JS_FUNCTION_ID]: true,
|
|
},
|
|
isSaving = false,
|
|
responses = {};
|
|
|
|
const expectedState = JSResponseState.IsExecuting;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
|
|
it("5. returns 'IsDirty' when function has finished executing and there is parse error", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {
|
|
[TEST_JS_FUNCTION_ID]: true,
|
|
},
|
|
isExecuting = {
|
|
[TEST_JS_FUNCTION_ID]: false,
|
|
},
|
|
isSaving = false,
|
|
responses = {
|
|
[TEST_JS_FUNCTION_ID]: undefined,
|
|
};
|
|
|
|
const expectedState = JSResponseState.IsDirty;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
|
|
it("6. returns 'IsExecuting' when function is still executing and has a previous response", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {},
|
|
isExecuting = {
|
|
[TEST_JS_FUNCTION_ID]: true,
|
|
},
|
|
isSaving = false,
|
|
responses = {
|
|
[TEST_JS_FUNCTION_ID]: "test response",
|
|
};
|
|
|
|
const expectedState = JSResponseState.IsExecuting;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
|
|
it("7. returns 'NoReturnValue' when function is done executing and returns 'undefined'", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {},
|
|
isExecuting = {
|
|
[TEST_JS_FUNCTION_ID]: false,
|
|
},
|
|
isSaving = false,
|
|
responses = {
|
|
[TEST_JS_FUNCTION_ID]: undefined,
|
|
};
|
|
|
|
const expectedState = JSResponseState.NoReturnValue;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
|
|
it("8. returns 'ShowResponse' when function is done executing and returns a valid response", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {},
|
|
isExecuting = {
|
|
[TEST_JS_FUNCTION_ID]: false,
|
|
},
|
|
isSaving = false,
|
|
responses = {
|
|
[TEST_JS_FUNCTION_ID]: {},
|
|
};
|
|
|
|
const expectedState = JSResponseState.ShowResponse;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
it("9. returns 'IsExecuting' when no entity is saving ,execution has begun and function has a previous response", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {},
|
|
isExecuting = {
|
|
[TEST_JS_FUNCTION_ID]: true,
|
|
},
|
|
isSaving = false,
|
|
responses = {
|
|
[TEST_JS_FUNCTION_ID]: "previous response",
|
|
};
|
|
|
|
const expectedState = JSResponseState.IsExecuting;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
it("10. returns 'NoResponse' when no entity is saving , execution has not begun and function has a no previous response", () => {
|
|
const currentFunction = TEST_JS_FUNCTION,
|
|
isDirty = {},
|
|
isExecuting = {
|
|
[TEST_JS_FUNCTION_ID]: false,
|
|
},
|
|
isSaving = false,
|
|
responses = {};
|
|
|
|
const expectedState = JSResponseState.NoResponse;
|
|
const actualState = getJSResponseViewState(
|
|
currentFunction,
|
|
isDirty,
|
|
isExecuting,
|
|
isSaving,
|
|
responses,
|
|
);
|
|
|
|
expect(expectedState).toBe(actualState);
|
|
});
|
|
});
|