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 (