diff --git a/app/client/cypress/support/Pages/ApiPage.ts b/app/client/cypress/support/Pages/ApiPage.ts
index 398cb70cbcd1..a29e45df1359 100644
--- a/app/client/cypress/support/Pages/ApiPage.ts
+++ b/app/client/cypress/support/Pages/ApiPage.ts
@@ -67,9 +67,7 @@ export class ApiPage {
"')]";
private _bodyTypeSelect = `//div[@data-testid="t--api-body-tab-switch"]`;
private _bodyTypeToSelect = (subTab: string) =>
- "//div[contains(@class, 'rc-select-item-option')]//div[contains(text(),'" +
- subTab +
- "')]";
+ ".rc-select-item-option:contains(" + subTab + ")";
private _rightPaneTab = (tab: string) =>
"//span[contains(text(), '" + tab + "')]/parent::button";
_visibleTextSpan = (spanText: string) => "//span[text()='" + spanText + "']";
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
index cee26fa60750..51b3e02d3ad4 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import React from "react";
+import { useSelector } from "react-redux";
import styled from "styled-components";
import {
POST_BODY_FORMAT_OPTIONS,
@@ -16,14 +16,14 @@ import {
TabBehaviour,
} from "components/editorComponents/CodeEditor/EditorConfig";
import { Classes } from "@appsmith/ads-old";
-import {
- getPostBodyFormat,
- updatePostBodyContentType,
-} from "../../../../store";
import type { CodeEditorExpected } from "components/editorComponents/CodeEditor";
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
import { createMessage, API_PANE_NO_BODY } from "ee/constants/messages";
-import { Select, Option } from "@appsmith/ads";
+import SelectField from "components/editorComponents/form/fields/SelectField";
+import { getFormValues } from "redux-form";
+import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
+import type { Action } from "entities/Action";
+import { get } from "lodash";
const PostBodyContainer = styled.div`
display: flex;
@@ -31,6 +31,7 @@ const PostBodyContainer = styled.div`
background-color: var(--ads-v2-color-bg);
height: 100%;
gap: var(--ads-v2-spaces-4);
+
.ads-v2-select {
max-width: 250px;
width: 100%;
@@ -40,6 +41,7 @@ const PostBodyContainer = styled.div`
const JSONEditorFieldWrapper = styled.div`
/* margin: 0 30px;
width: 65%; */
+
.CodeMirror {
height: auto;
min-height: 250px;
@@ -70,12 +72,12 @@ const expectedPostBody: CodeEditorExpected = {
};
function PostBodyData(props: Props) {
- const postBodyFormat = useSelector(getPostBodyFormat);
- const dispatch = useDispatch();
-
- const updateBodyContentType = useCallback((tab: string) => {
- dispatch(updatePostBodyContentType(tab));
- }, []);
+ const formValues = useSelector(getFormValues(API_EDITOR_FORM_NAME)) as Action;
+ const postBodyFormat = get(
+ formValues,
+ "actionConfiguration.formData.apiContentType",
+ POST_BODY_FORMAT_OPTIONS.NONE,
+ );
const { dataTreePath, theme } = props;
@@ -171,19 +173,14 @@ function PostBodyData(props: Props) {
return (
-
- {tabComponentsMap(postBodyFormat.value)}
+
+ {tabComponentsMap(postBodyFormat)}
);
}
diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts
index 96cd57870a0f..2f57b3822f09 100644
--- a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts
+++ b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts
@@ -24,20 +24,6 @@ export const openPluginActionSettings = (payload: boolean) => ({
},
});
-export const updatePostBodyContentType = (
- title: string,
-): ReduxAction<{ title: string }> => ({
- type: ReduxActionTypes.UPDATE_API_ACTION_BODY_CONTENT_TYPE,
- payload: { title },
-});
-
-export const setExtraFormData = (
- values: Record,
-) => ({
- type: ReduxActionTypes.SET_EXTRA_FORMDATA,
- payload: { values },
-});
-
export const changeApi = (
id: string,
isSaas: boolean,
diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
index b38e4bd1cc2f..d931e8210639 100644
--- a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
+++ b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
@@ -1,9 +1,6 @@
import type { AppState } from "ee/reducers";
import { createSelector } from "reselect";
-import { POST_BODY_FORM_DATA_KEY } from "./constants";
-import { POST_BODY_FORMAT_OPTIONS } from "../constants/CommonApiConstants";
-
export const getActionEditorSavingMap = (state: AppState) =>
state.ui.pluginActionEditor.isSaving;
@@ -38,26 +35,6 @@ export const isActionDeleting = (id: string) =>
(deletingMap) => id in deletingMap && deletingMap[id],
);
-export const getFormData = (state: AppState) =>
- state.ui.pluginActionEditor.formData;
-
-type GetFormPostBodyFormat = (state: AppState) => {
- label: string;
- value: string;
-};
-
-export const getPostBodyFormat: GetFormPostBodyFormat = (state) => {
- const formData = getFormData(state);
-
- if (POST_BODY_FORM_DATA_KEY in formData) {
- return formData[POST_BODY_FORM_DATA_KEY];
- }
-
- return {
- label: POST_BODY_FORMAT_OPTIONS.NONE,
- value: POST_BODY_FORMAT_OPTIONS.NONE,
- };
-};
export const getPluginActionConfigSelectedTab = (state: AppState) =>
state.ui.pluginActionEditor.selectedConfigTab;
diff --git a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
index 3541e38fa1ac..a698845448d6 100644
--- a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
+++ b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
@@ -26,7 +26,6 @@ export interface PluginActionEditorState {
isDirty: Record;
runErrorMessage: Record;
selectedConfigTab?: string;
- formData: Record;
debugger: PluginEditorDebuggerState;
settingsOpen?: boolean;
}
@@ -38,7 +37,6 @@ const initialState: PluginActionEditorState = {
isDeleting: {},
isDirty: {},
runErrorMessage: {},
- formData: {},
debugger: {
open: false,
responseTabHeight: ActionExecutionResizerHeight,
@@ -136,21 +134,6 @@ export const handlers = {
set(state, ["isRunning", id], false);
set(state, ["runErrorMessage", id], error.message);
},
- /**
- * This redux action sets the extra form data field for an action. This is used to select the
- * appropriate body type tab selection in the Rest API plugin based on the content-type.
- * This redux action can be extended to other functionalities as well in the future.
- */
- [ReduxActionTypes.SET_EXTRA_FORMDATA]: (
- state: PluginActionEditorState,
- action: ReduxAction<{
- values: Record;
- }>,
- ) => {
- const { values } = action.payload;
-
- set(state, ["formData"], values);
- },
[ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB]: (
state: PluginActionEditorState,
action: ReduxAction<{ selectedTab: string }>,
diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx
index 0a3d912b1692..1c34ede4b084 100644
--- a/app/client/src/ce/constants/ReduxActionConstants.tsx
+++ b/app/client/src/ce/constants/ReduxActionConstants.tsx
@@ -769,7 +769,6 @@ const ActionActionTypes = {
UPDATE_ACTION_SUCCESS: "UPDATE_ACTION_SUCCESS",
DELETE_ACTION_INIT: "DELETE_ACTION_INIT",
DELETE_ACTION_SUCCESS: "DELETE_ACTION_SUCCESS",
- SET_EXTRA_FORMDATA: "SET_EXTRA_FORMDATA",
MOVE_ACTION_INIT: "MOVE_ACTION_INIT",
MOVE_ACTION_SUCCESS: "MOVE_ACTION_SUCCESS",
COPY_ACTION_INIT: "COPY_ACTION_INIT",
@@ -787,7 +786,6 @@ const ActionActionTypes = {
TOGGLE_ACTION_EXECUTE_ON_LOAD_SUCCESS:
"TOGGLE_ACTION_EXECUTE_ON_LOAD_SUCCESS",
TOGGLE_ACTION_EXECUTE_ON_LOAD_INIT: "TOGGLE_ACTION_EXECUTE_ON_LOAD_INIT",
- UPDATE_API_ACTION_BODY_CONTENT_TYPE: "UPDATE_API_ACTION_BODY_CONTENT_TYPE",
};
const ActionActionErrorTypes = {
diff --git a/app/client/src/ce/navigation/FocusElements/AppIDE.ts b/app/client/src/ce/navigation/FocusElements/AppIDE.ts
index 336ddaeeee1a..d36bc7d2cc66 100644
--- a/app/client/src/ce/navigation/FocusElements/AppIDE.ts
+++ b/app/client/src/ce/navigation/FocusElements/AppIDE.ts
@@ -77,16 +77,11 @@ import { ActionExecutionResizerHeight } from "PluginActionEditor/components/Plug
import {
getPluginActionConfigSelectedTab,
getPluginActionDebuggerState,
- getFormData,
- setExtraFormData,
setPluginActionEditorDebuggerState,
setPluginActionEditorSelectedTab,
} from "PluginActionEditor/store";
import { EDITOR_TABS } from "constants/QueryEditorConstants";
-import {
- API_EDITOR_TABS,
- POST_BODY_FORMAT_OPTIONS,
-} from "PluginActionEditor/constants/CommonApiConstants";
+import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants";
export const AppIDEFocusElements: FocusElementsConfigList = {
[FocusEntity.DATASOURCE_LIST]: [
@@ -155,16 +150,6 @@ export const AppIDEFocusElements: FocusElementsConfigList = {
},
},
},
- {
- type: FocusElementConfigType.Redux,
- name: FocusElement.PluginActionFormData,
- selector: getFormData,
- setter: setExtraFormData,
- defaultValue: {
- label: POST_BODY_FORMAT_OPTIONS.NONE,
- value: POST_BODY_FORMAT_OPTIONS.NONE,
- },
- },
{
type: FocusElementConfigType.Redux,
name: FocusElement.PluginActionDebugger,
diff --git a/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx b/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx
index 7dc1ea75e4a0..4bab6e5d980f 100644
--- a/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx
+++ b/app/client/src/components/editorComponents/form/fields/DropdownFieldWrapper.tsx
@@ -40,7 +40,7 @@ function DropdownFieldWrapper(props: DropdownFieldWrapperProps) {
>
{props.options.map((option: SelectOptionProps) => {
return (
-
);
diff --git a/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx b/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
index 6c23cca3a500..b728ad86e495 100644
--- a/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
+++ b/app/client/src/components/editorComponents/form/fields/DropdownWrapper.tsx
@@ -24,6 +24,7 @@ interface DropdownWrapperProps {
disabled?: boolean;
dropdownMaxHeight?: string;
enableSearch?: boolean;
+ testId?: string;
}
function DropdownWrapper(props: DropdownWrapperProps) {
@@ -79,6 +80,7 @@ function DropdownWrapper(props: DropdownWrapperProps) {
return (