fix: updated default content-type and default body format type (#11878)

* fix: updated default content-type and default body format type

* fix: updated the cypress test because the default content-type is changed

* fix: update content type on change of http method and update body format type too

* fix: changed cypress test back to previous

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<HTTP_METHOD, string> = {
+  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: [
     {

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.NONE &&
-      displayFormatValue === POST_BODY_FORMAT_OPTIONS.RAW) &&
     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 headers: Array<{ key: string; value: string }> =
-  const rawApiContentType = extraFormData?.displayFormat?.value
+    get(values, "actionConfiguration.headers") || [];
-    ? extraFormData?.displayFormat?.value
+  const contentTypeValue: string =
-    : POST_BODY_FORMAT_OPTIONS.RAW;
+    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)
+      if (apiContentType === POST_BODY_FORMAT_OPTIONS.NONE) {
-        apiContentType = POST_BODY_FORMAT_OPTIONS.JSON;
+        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);
   }
 }