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 0ea4a678b20d..de373520ece2 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
@@ -1,15 +1,12 @@
-import React from "react";
-import { connect } from "react-redux";
+import React, { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
-import { formValueSelector } from "redux-form";
import {
POST_BODY_FORMAT_OPTIONS,
POST_BODY_FORMAT_TITLES,
} from "../../../../constants/CommonApiConstants";
-import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
-import type { AppState } from "ee/reducers";
import FIELD_VALUES from "constants/FieldExpectedValue";
import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
import {
@@ -61,11 +58,8 @@ const NoBodyMessage = styled.div`
`;
interface PostDataProps {
- displayFormat: { label: string; value: string };
dataTreePath: string;
theme?: EditorTheme;
- apiId: string;
- updateBodyContentType: (contentType: string, apiId: string) => void;
}
type Props = PostDataProps;
@@ -77,9 +71,13 @@ const expectedPostBody: CodeEditorExpected = {
};
function PostBodyData(props: Props) {
- const [selectedTab, setSelectedTab] = React.useState(
- props.displayFormat?.value,
- );
+ const postBodyFormat = useSelector(getPostBodyFormat);
+ const dispatch = useDispatch();
+
+ const updateBodyContentType = useCallback((tab: string) => {
+ dispatch(updatePostBodyContentType(tab));
+ }, []);
+
const { dataTreePath, theme } = props;
const tabComponentsMap = (key: string) => {
@@ -172,18 +170,13 @@ function PostBodyData(props: Props) {
value: el.key,
}));
- const postBodyDataOnChangeFn = (key: string) => {
- setSelectedTab(key);
- props?.updateBodyContentType(key, props.apiId);
- };
-
return (
- {tabComponentsMap(selectedTab)}
+ {tabComponentsMap(postBodyFormat.value)}
);
}
-const selector = formValueSelector(API_EDITOR_FORM_NAME);
-
-// TODO: Fix this the next time the file is edited
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mapDispatchToProps = (dispatch: any) => ({
- updateBodyContentType: (contentType: string, apiId: string) =>
- dispatch(updatePostBodyContentType(contentType, apiId)),
-});
-
-export default connect((state: AppState) => {
- const apiId = selector(state, "id");
- const postBodyFormat = getPostBodyFormat(state, apiId);
- // Defaults to NONE when format is not set
- const displayFormat = postBodyFormat || {
- label: POST_BODY_FORMAT_OPTIONS.NONE,
- value: POST_BODY_FORMAT_OPTIONS.NONE,
- };
-
- return {
- displayFormat,
- apiId,
- };
-}, mapDispatchToProps)(PostBodyData);
+export default PostBodyData;
diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts
index 3df4a6b841f5..da7c065cb558 100644
--- a/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts
+++ b/app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts
@@ -28,10 +28,16 @@ export const openPluginActionSettings = (payload: boolean) => ({
export const updatePostBodyContentType = (
title: string,
- apiId: string,
-): ReduxAction<{ title: string; apiId: string }> => ({
+): ReduxAction<{ title: string }> => ({
type: ReduxActionTypes.UPDATE_API_ACTION_BODY_CONTENT_TYPE,
- payload: { title, apiId },
+ payload: { title },
+});
+
+export const setExtraFormData = (
+ values: Record,
+) => ({
+ type: ReduxActionTypes.SET_EXTRA_FORMDATA,
+ payload: { values },
});
export const changeApi = (
diff --git a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
index 7573246cfdbd..b38e4bd1cc2f 100644
--- a/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
+++ b/app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
@@ -2,6 +2,7 @@ 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;
@@ -37,19 +38,25 @@ export const isActionDeleting = (id: string) =>
(deletingMap) => id in deletingMap && deletingMap[id],
);
-type GetFormData = (
- state: AppState,
- id: string,
-) => { label: string; value: string } | undefined;
+export const getFormData = (state: AppState) =>
+ state.ui.pluginActionEditor.formData;
-export const getPostBodyFormat: GetFormData = (state, id) => {
- const formData = state.ui.pluginActionEditor.formData;
+type GetFormPostBodyFormat = (state: AppState) => {
+ label: string;
+ value: string;
+};
+
+export const getPostBodyFormat: GetFormPostBodyFormat = (state) => {
+ const formData = getFormData(state);
- if (id in formData) {
- return formData[id][POST_BODY_FORM_DATA_KEY];
+ if (POST_BODY_FORM_DATA_KEY in formData) {
+ return formData[POST_BODY_FORM_DATA_KEY];
}
- return undefined;
+ 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 401475925641..a3fbf803d844 100644
--- a/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
+++ b/app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
@@ -26,7 +26,7 @@ export interface PluginActionEditorState {
isDirty: Record;
runErrorMessage: Record;
selectedConfigTab?: string;
- formData: Record>;
+ formData: Record;
debugger: PluginEditorDebuggerState;
settingsOpen?: boolean;
}
@@ -144,13 +144,12 @@ export const handlers = {
[ReduxActionTypes.SET_EXTRA_FORMDATA]: (
state: PluginActionEditorState,
action: ReduxAction<{
- id: string;
values: Record;
}>,
) => {
- const { id, values } = action.payload;
+ const { values } = action.payload;
- set(state, ["formData", id], values);
+ set(state, ["formData"], values);
},
[ReduxActionTypes.SET_PLUGIN_ACTION_EDITOR_FORM_SELECTED_TAB]: (
state: PluginActionEditorState,
diff --git a/app/client/src/ce/navigation/FocusElements/AppIDE.ts b/app/client/src/ce/navigation/FocusElements/AppIDE.ts
index 3806454b5bcc..336ddaeeee1a 100644
--- a/app/client/src/ce/navigation/FocusElements/AppIDE.ts
+++ b/app/client/src/ce/navigation/FocusElements/AppIDE.ts
@@ -77,11 +77,16 @@ 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 } from "PluginActionEditor/constants/CommonApiConstants";
+import {
+ API_EDITOR_TABS,
+ POST_BODY_FORMAT_OPTIONS,
+} from "PluginActionEditor/constants/CommonApiConstants";
export const AppIDEFocusElements: FocusElementsConfigList = {
[FocusEntity.DATASOURCE_LIST]: [
@@ -152,9 +157,13 @@ export const AppIDEFocusElements: FocusElementsConfigList = {
},
{
type: FocusElementConfigType.Redux,
- name: FocusElement.InputField,
- selector: getFocusableInputField,
- setter: setFocusableInputField,
+ name: FocusElement.PluginActionFormData,
+ selector: getFormData,
+ setter: setExtraFormData,
+ defaultValue: {
+ label: POST_BODY_FORMAT_OPTIONS.NONE,
+ value: POST_BODY_FORMAT_OPTIONS.NONE,
+ },
},
{
type: FocusElementConfigType.Redux,
diff --git a/app/client/src/navigation/FocusElements.ts b/app/client/src/navigation/FocusElements.ts
index 9a44d3059630..fe3b1fb66efe 100644
--- a/app/client/src/navigation/FocusElements.ts
+++ b/app/client/src/navigation/FocusElements.ts
@@ -3,6 +3,7 @@ import type { AppState } from "ee/reducers";
export enum FocusElement {
PluginActionConfigTabs = "PluginActionConfigTabs",
+ PluginActionFormData = "PluginActionFormData",
CodeEditorHistory = "CodeEditorHistory",
EntityCollapsibleState = "EntityCollapsibleState",
EntityExplorerWidth = "EntityExplorerWidth",
diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts
index 4c895bda0f2c..c25e8f1942ac 100644
--- a/app/client/src/sagas/ApiPaneSagas.ts
+++ b/app/client/src/sagas/ApiPaneSagas.ts
@@ -61,7 +61,10 @@ import {
import { updateReplayEntity } from "actions/pageActions";
import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
import type { Plugin } from "api/PluginApi";
-import { getPostBodyFormat } from "../PluginActionEditor/store";
+import {
+ getPostBodyFormat,
+ setExtraFormData,
+} from "../PluginActionEditor/store";
import { apiEditorIdURL, datasourcesEditorIdURL } from "ee/RouteBuilder";
import { getCurrentBasePageId } from "selectors/editorSelectors";
import { validateResponse } from "./ErrorSagas";
@@ -135,10 +138,8 @@ function* syncApiParamsSaga(
}
}
-function* handleUpdateBodyContentType(
- action: ReduxAction<{ title: string; apiId: string }>,
-) {
- const { apiId, title } = action.payload;
+function* handleUpdateBodyContentType(action: ReduxAction<{ title: string }>) {
+ const { title } = action.payload;
const { values } = yield select(getFormData, API_EDITOR_FORM_NAME);
const displayFormatValue = POST_BODY_FORMAT_OPTIONS_ARRAY.find(
@@ -216,18 +217,14 @@ function* handleUpdateBodyContentType(
// Quick Context: The extra formadata action is responsible for updating the current multi switch mode you see on api editor body tab
// whenever a user selects a new content type through the tab e.g application/json, this action is dispatched to update that value, which is then read in the PostDataBody file
// to show the appropriate content type section.
- yield put({
- type: ReduxActionTypes.SET_EXTRA_FORMDATA,
- payload: {
- id: apiId,
- values: {
- displayFormat: {
- label: title,
- value: title,
- },
+ yield put(
+ setExtraFormData({
+ [POST_BODY_FORM_DATA_KEY]: {
+ label: title,
+ value: title,
},
- },
- });
+ }),
+ );
// help to prevent cyclic dependency error in case the bodyFormData is empty.
@@ -257,7 +254,8 @@ function* updateExtraFormDataSaga() {
const { values } = formData;
// when initializing, check if theres a display format present.
- const extraFormData: GetFormData = yield select(getPostBodyFormat, values.id);
+ const extraFormData: { label: string; value: string } =
+ yield select(getPostBodyFormat);
const headers: Array<{ key: string; value: string }> =
get(values, "actionConfiguration.headers") || [];
@@ -363,15 +361,11 @@ function* setApiBodyTabHeaderFormat(apiId: string, apiContentType?: string) {
};
}
- yield put({
- type: ReduxActionTypes.SET_EXTRA_FORMDATA,
- payload: {
- id: apiId,
- values: {
- [POST_BODY_FORM_DATA_KEY]: displayFormat,
- },
- },
- });
+ yield put(
+ setExtraFormData({
+ [POST_BODY_FORM_DATA_KEY]: displayFormat,
+ }),
+ );
}
function* formValueChangeSaga(