diff --git a/app/client/cypress/support/index.js b/app/client/cypress/support/index.js index 84766c10cb..db9da827c6 100644 --- a/app/client/cypress/support/index.js +++ b/app/client/cypress/support/index.js @@ -64,11 +64,9 @@ before(function() { }); after(function() { - // ---commenting Publish app and Delete page as of now--- // //cy.Deletepage(pageid); //cy.PublishtheApp(); cy.DeleteApp(appId); - }); }); diff --git a/app/client/src/constants/ApiEditorConstants.ts b/app/client/src/constants/ApiEditorConstants.ts index efb5f0cef1..c7a554a69f 100644 --- a/app/client/src/constants/ApiEditorConstants.ts +++ b/app/client/src/constants/ApiEditorConstants.ts @@ -28,6 +28,7 @@ export const DEFAULT_PROVIDER_OPTION = "Business Software"; export const POST_BODY_FORMATS = [ "application/json", "application/x-www-form-urlencoded", + "raw", ]; export const POST_BODY_FORMAT_OPTIONS = POST_BODY_FORMATS.map(method => ({ diff --git a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx index 30995c9b7a..a958d2f293 100644 --- a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx +++ b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx @@ -1,14 +1,18 @@ import React from "react"; import { connect } from "react-redux"; import styled from "styled-components"; -import { formValueSelector, change } from "redux-form"; +import { formValueSelector, change, Field } from "redux-form"; import Select from "react-select"; -import { POST_BODY_FORMAT_OPTIONS } from "constants/ApiEditorConstants"; +import { + POST_BODY_FORMAT_OPTIONS, + POST_BODY_FORMATS, +} from "constants/ApiEditorConstants"; import { API_EDITOR_FORM_NAME } from "constants/forms"; import FormLabel from "components/editorComponents/FormLabel"; import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray"; import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField"; import { AppState } from "reducers"; +import { ReduxActionTypes } from "constants/ReduxActionConstants"; const DropDownContainer = styled.div` width: 232px; @@ -38,7 +42,10 @@ interface PostDataProps { actionConfigurationHeaders?: any; change: Function; onDisplayFormatChange: Function; + apiId: string; + setDisplayFormat: Function; } + type Props = PostDataProps; const PostBodyData = (props: Props) => { @@ -46,6 +53,8 @@ const PostBodyData = (props: Props) => { onDisplayFormatChange, actionConfigurationHeaders, displayFormat, + setDisplayFormat, + apiId, } = props; return ( @@ -56,6 +65,18 @@ const PostBodyData = (props: Props) => { placeholder="Format" isSearchable={false} onChange={(displayFormatObject: any) => { + if ( + displayFormatObject && + displayFormatObject.value === POST_BODY_FORMATS[2] + ) { + setDisplayFormat(apiId, { + label: POST_BODY_FORMATS[2], + value: POST_BODY_FORMATS[2], + }); + + return; + } + const elementsIndex = actionConfigurationHeaders.findIndex( (element: { key: string; value: string }) => element.key === "content-type", @@ -70,6 +91,11 @@ const PostBodyData = (props: Props) => { }; onDisplayFormatChange(updatedHeaders); + } else { + setDisplayFormat(apiId, { + label: POST_BODY_FORMATS[2], + value: POST_BODY_FORMATS[2], + }); } }} value={displayFormat} @@ -97,6 +123,20 @@ const PostBodyData = (props: Props) => { )} + + {displayFormat?.value === POST_BODY_FORMAT_OPTIONS[2].value && ( + + )} ); }; @@ -108,6 +148,17 @@ const mapDispatchToProps = (dispatch: any) => ({ dispatch( change(API_EDITOR_FORM_NAME, "actionConfiguration.headers", value), ), + setDisplayFormat: (id: string, displayFormat: string) => { + dispatch({ + type: ReduxActionTypes.SET_EXTRA_FORMDATA, + payload: { + id, + values: { + displayFormat, + }, + }, + }); + }, }); export default connect((state: AppState) => { @@ -123,5 +174,6 @@ export default connect((state: AppState) => { displayFormat: extraFormData["displayFormat"] || POST_BODY_FORMAT_OPTIONS[0], contentType, + apiId, }; }, mapDispatchToProps)(PostBodyData); diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts index 01b8d91c4c..a9ab4e891d 100644 --- a/app/client/src/sagas/ActionSagas.ts +++ b/app/client/src/sagas/ActionSagas.ts @@ -460,7 +460,9 @@ export function* updateActionSaga( const { data } = actionPayload.payload; let action = data; if (isApi) { - action = transformRestAction(data); + const state = yield select(); + const extraFormData = state.ui.apiPane.extraformData[action.id]; + action = transformRestAction(data, extraFormData); } const response: GenericApiResponse = yield ActionAPI.updateAPI( action, diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts index 9c9794d7dc..ac5eaa9b13 100644 --- a/app/client/src/sagas/ApiPaneSagas.ts +++ b/app/client/src/sagas/ApiPaneSagas.ts @@ -219,15 +219,26 @@ function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) { data.actionConfiguration.body ) { data.actionConfiguration.body[0] = actionConfigurationBody; - } else { + } else if ( + contentType.value === POST_BODY_FORMAT_OPTIONS[1].value && + data.actionConfiguration.body + ) { if (typeof actionConfigurationBody !== "object") { - data.actionConfiguration.body[1] = JSON.parse( - actionConfigurationBody, - ); + try { + data.actionConfiguration.body[1] = JSON.parse( + actionConfigurationBody, + ); + } catch (e) { + data.actionConfiguration.body[2] = actionConfigurationBody; + } } else { data.actionConfiguration.body[1] = actionConfigurationBody; } + } else { + data.actionConfiguration.body[2] = actionConfigurationBody; } + } else if (!contentType && data.actionConfiguration.body) { + data.actionConfiguration.body[2] = actionConfigurationBody; } } @@ -330,7 +341,7 @@ function* updateFormFields( if (!contentType) { yield put( - autofill(API_EDITOR_FORM_NAME, "actionConfiguration.headers", [ + change(API_EDITOR_FORM_NAME, "actionConfiguration.headers", [ ...actionConfigurationHeaders, { key: "content-type", @@ -359,6 +370,11 @@ function* updateFormFields( label: contentType.value, value: contentType.value, }; + } else { + displayFormat = { + label: POST_BODY_FORMATS[2], + value: POST_BODY_FORMATS[2], + }; } } diff --git a/app/client/src/transformers/RestActionTransformer.ts b/app/client/src/transformers/RestActionTransformer.ts index d4af0522fb..3222f0ca04 100644 --- a/app/client/src/transformers/RestActionTransformer.ts +++ b/app/client/src/transformers/RestActionTransformer.ts @@ -3,7 +3,7 @@ import { POST_BODY_FORMAT_OPTIONS, } from "constants/ApiEditorConstants"; -export const transformRestAction = (data: any): any => { +export const transformRestAction = (data: any, extraFormData?: any): any => { let action = { ...data }; if (data.actionConfiguration.httpMethod === HTTP_METHODS[0]) { delete action.actionConfiguration.body; @@ -24,18 +24,10 @@ export const transformRestAction = (data: any): any => { } } - if ( - data.actionConfiguration.headers && - data.actionConfiguration.headers.length - ) { - const contentType = data.actionConfiguration.headers.find( - (header: any) => header.key === "content-type", - ); + if (extraFormData && extraFormData?.displayFormat) { + const { displayFormat } = extraFormData; - if ( - contentType && - contentType.value === POST_BODY_FORMAT_OPTIONS[0].value - ) { + if (displayFormat.value === POST_BODY_FORMAT_OPTIONS[0].value) { if (data.actionConfiguration.body && data.actionConfiguration.body[0]) { const body = data.actionConfiguration.body[0]; action = { @@ -46,12 +38,7 @@ export const transformRestAction = (data: any): any => { }, }; } - } - - if ( - contentType && - contentType.value === POST_BODY_FORMAT_OPTIONS[1].value - ) { + } else if (displayFormat.value === POST_BODY_FORMAT_OPTIONS[1].value) { if (data.actionConfiguration.body && data.actionConfiguration.body[1]) { const body = data.actionConfiguration.body[1]; if (typeof data.actionConfiguration.body === "object") { @@ -64,6 +51,17 @@ export const transformRestAction = (data: any): any => { }; } } + } else if (displayFormat.value === POST_BODY_FORMAT_OPTIONS[2].value) { + if (data.actionConfiguration.body && data.actionConfiguration.body[2]) { + const body = data.actionConfiguration.body[2]; + action = { + ...data, + actionConfiguration: { + ...data.actionConfiguration, + body, + }, + }; + } } } return action;