diff --git a/app/client/src/constants/ApiEditorConstants.ts b/app/client/src/constants/ApiEditorConstants.ts index 0109ffe7a4..8096e9692c 100644 --- a/app/client/src/constants/ApiEditorConstants.ts +++ b/app/client/src/constants/ApiEditorConstants.ts @@ -61,15 +61,26 @@ export const POST_BODY_FORMAT_OPTIONS: Record< RAW: "text/plain", }; +export const HTTP_METHODS_DEFAULT_FORMAT_TYPES: Record = { + GET: POST_BODY_FORMAT_OPTIONS.NONE, + POST: POST_BODY_FORMAT_OPTIONS.JSON, + PUT: POST_BODY_FORMAT_OPTIONS.JSON, + DELETE: POST_BODY_FORMAT_OPTIONS.RAW, + PATCH: POST_BODY_FORMAT_OPTIONS.JSON, +}; + +const DEFAULT_METHOD_TYPE = HTTP_METHOD.GET; + export const DEFAULT_API_ACTION_CONFIG: ApiActionConfig = { timeoutInMillisecond: DEFAULT_ACTION_TIMEOUT, encodeParamsToggle: true, - httpMethod: HTTP_METHOD.GET, + httpMethod: DEFAULT_METHOD_TYPE, headers: EMPTY_KEY_VALUE_PAIRS.slice(), queryParameters: EMPTY_KEY_VALUE_PAIRS.slice(), body: "", + bodyFormData: [], formData: { - apiContentType: POST_BODY_FORMAT_OPTIONS.NONE, + apiContentType: HTTP_METHODS_DEFAULT_FORMAT_TYPES[DEFAULT_METHOD_TYPE], }, pluginSpecifiedTemplates: [ { diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts index 65461cdcbf..415a76c316 100644 --- a/app/client/src/sagas/ApiPaneSagas.ts +++ b/app/client/src/sagas/ApiPaneSagas.ts @@ -23,6 +23,7 @@ import { CONTENT_TYPE_HEADER_KEY, EMPTY_KEY_VALUE_PAIRS, HTTP_METHOD, + HTTP_METHODS_DEFAULT_FORMAT_TYPES, } from "constants/ApiEditorConstants"; import history from "utils/history"; import { INTEGRATION_EDITOR_MODES, INTEGRATION_TABS } from "constants/routes"; @@ -154,10 +155,7 @@ function* handleUpdateBodyContentType( let formData = { ...values.actionConfiguration.formData }; if (formData === undefined) formData = {}; formData["apiContentType"] = - title === POST_BODY_FORMAT_OPTIONS.RAW || - title === POST_BODY_FORMAT_OPTIONS.NONE - ? previousContentType - : title; + title === POST_BODY_FORMAT_OPTIONS.NONE ? previousContentType : title; yield put( change(API_EDITOR_FORM_NAME, "actionConfiguration.formData", formData), @@ -195,8 +193,7 @@ function* handleUpdateBodyContentType( // this is done to ensure user input isn't cleared off if they switch to raw or none mode. // however if the user types in a new value, we use the updated value (formValueChangeSaga - line 426). if ( - (displayFormatValue === POST_BODY_FORMAT_OPTIONS.NONE || - displayFormatValue === POST_BODY_FORMAT_OPTIONS.RAW) && + displayFormatValue === POST_BODY_FORMAT_OPTIONS.NONE && indexToUpdate !== -1 ) { headers[indexToUpdate] = { @@ -233,21 +230,52 @@ function* handleUpdateBodyContentType( } } -function* initializeExtraFormDataSaga() { +function* updateExtraFormDataSaga() { const formData = yield select(getFormData, API_EDITOR_FORM_NAME); const { values } = formData; // when initializing, check if theres a display format present, if not use Json display format as default. const extraFormData = yield select(getDisplayFormat, values.id); - // as a fail safe, if no display format is present, use Raw mode - const rawApiContentType = extraFormData?.displayFormat?.value - ? extraFormData?.displayFormat?.value - : POST_BODY_FORMAT_OPTIONS.RAW; + const headers: Array<{ key: string; value: string }> = + get(values, "actionConfiguration.headers") || []; + const contentTypeValue: string = + headers.find( + (h: { key: string; value: string }) => h.key === CONTENT_TYPE_HEADER_KEY, + )?.value || ""; + + let rawApiContentType; if (!extraFormData) { - yield call(setHeaderFormat, values.id, rawApiContentType); + /* + * Checking if the content-type header exists, if yes then set the body format type one of the three json, multipart or url encoded whichever matches else set raw as default + */ + if ( + [ + POST_BODY_FORMAT_OPTIONS.JSON, + POST_BODY_FORMAT_OPTIONS.FORM_URLENCODED, + POST_BODY_FORMAT_OPTIONS.MULTIPART_FORM_DATA, + ].includes(contentTypeValue) + ) { + rawApiContentType = contentTypeValue; + } else { + rawApiContentType = POST_BODY_FORMAT_OPTIONS.RAW; + } + } else { + if ( + [ + POST_BODY_FORMAT_OPTIONS.JSON, + POST_BODY_FORMAT_OPTIONS.FORM_URLENCODED, + POST_BODY_FORMAT_OPTIONS.MULTIPART_FORM_DATA, + ].includes(contentTypeValue) + ) { + rawApiContentType = contentTypeValue; + } else { + rawApiContentType = POST_BODY_FORMAT_OPTIONS.RAW; + } } + + yield call(setHeaderFormat, values.id, rawApiContentType); } function* changeApiSaga( @@ -263,7 +291,7 @@ function* changeApiSaga( } else { yield put(initialize(API_EDITOR_FORM_NAME, action)); - yield call(initializeExtraFormDataSaga); + yield call(updateExtraFormDataSaga); if ( action.actionConfiguration && @@ -343,6 +371,8 @@ export function* updateFormFields( values?.actionConfiguration?.formData?.apiContentType || POST_BODY_FORMAT_OPTIONS.JSON; + let extraFormDataToBeChanged = false; + if (field === "actionConfiguration.httpMethod") { const { actionConfiguration } = values; if (!actionConfiguration.headers) return; @@ -355,8 +385,11 @@ export function* updateFormFields( if (value !== HTTP_METHOD.GET) { // if user switches to other methods that is not GET and apiContentType is undefined set default apiContentType to JSON. - if (apiContentType === POST_BODY_FORMAT_OPTIONS.NONE) - apiContentType = POST_BODY_FORMAT_OPTIONS.JSON; + if (apiContentType === POST_BODY_FORMAT_OPTIONS.NONE) { + apiContentType = + HTTP_METHODS_DEFAULT_FORMAT_TYPES[value as HTTP_METHOD]; + extraFormDataToBeChanged = true; + } const indexToUpdate = getIndextoUpdate( actionConfigurationHeaders, @@ -383,6 +416,8 @@ export function* updateFormFields( actionConfigurationHeaders, ), ); + + if (extraFormDataToBeChanged) yield call(updateExtraFormDataSaga); } }