Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'feature/rawDisplayFormat' into 'release'

Browse Source 
Raw display format

See merge request theappsmith/internal-tools-client!558
This commit is contained in:
Hetu Nandu 2020-05-07 10:42:17 +00:00
commit 17f82fde72
6 changed files with 95 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/cypress/support/index.js
View File

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

1
app/client/src/constants/ApiEditorConstants.ts
View File

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

56
app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
View File

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

4
app/client/src/sagas/ActionSagas.ts
View File

@ -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,

26
app/client/src/sagas/ApiPaneSagas.ts
View File

@ -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],
};
}
}

34
app/client/src/transformers/RestActionTransformer.ts
View File

@ -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;