Merge branch 'feature/rawDisplayFormat' into 'release'

Raw display format

See merge request theappsmith/internal-tools-client!558

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);
-
   });
 });

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 => ({

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 (
     <PostbodyContainer>
@@ -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) => {
           <KeyValueFieldArray name="actionConfiguration.body[1]" label="" />
         </React.Fragment>
       )}
+
+      {displayFormat?.value === POST_BODY_FORMAT_OPTIONS[2].value && (
+        <Field
+          name="actionConfiguration.body[2]"
+          component="textarea"
+          rows={10}
+          style={{
+            resize: "none",
+            overflow: "auto",
+            width: "95%",
+            marginLeft: 5,
+          }}
+        />
+      )}
     </PostbodyContainer>
   );
 };
@@ -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);

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<RestAction> = yield ActionAPI.updateAPI(
       action,

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(
+          try {
-            actionConfigurationBody,
+            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],
+        };
       }
     }
 

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 (
+  if (extraFormData && extraFormData?.displayFormat) {
-    data.actionConfiguration.headers &&
+    const { displayFormat } = extraFormData;
-    data.actionConfiguration.headers.length
-  ) {
-    const contentType = data.actionConfiguration.headers.find(
-      (header: any) => header.key === "content-type",
-    );
 
-    if (
+    if (displayFormat.value === POST_BODY_FORMAT_OPTIONS[0].value) {
-      contentType &&
-      contentType.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 => {
           },
         };
       }
-    }
+    } else if (displayFormat.value === POST_BODY_FORMAT_OPTIONS[1].value) {
-
-    if (
-      contentType &&
-      contentType.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;