From a3a1a59101773372a65ded41ea1cce3cd83ffd5f Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Thu, 31 Oct 2024 15:01:56 +0530 Subject: [PATCH 1/8] fix: API Body format context lost --- .../components/ApiEditor/PostBodyData.tsx | 57 +++++-------------- .../store/pluginActionEditorActions.ts | 12 +++- .../store/pluginActionEditorSelectors.ts | 25 +++++--- .../store/pluginEditorReducer.ts | 7 +-- .../src/ce/navigation/FocusElements/AppIDE.ts | 17 ++++-- app/client/src/navigation/FocusElements.ts | 1 + app/client/src/sagas/ApiPaneSagas.ts | 46 +++++++-------- 7 files changed, 76 insertions(+), 89 deletions(-) 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( From ff0a0a7af8ab34cf802556d71aa3c77b860b371d Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 4 Nov 2024 14:22:18 +0530 Subject: [PATCH 2/8] API and GraphQL --- .../components/ActionForm/Section/index.tsx | 6 +- .../ActionForm/Section/styles.module.css | 4 +- .../components/ApiEditor/PostBodyData.tsx | 1 - .../CommonEditorForm/CommonEditorForm.tsx | 8 ++- .../CommonEditorForm/RequestTabs.tsx | 62 ++++++++++--------- .../components/DatasourceConfig.tsx | 5 +- .../components/GraphQLEditor/PostBodyData.tsx | 4 +- .../Editor/APIEditor/CommonEditorForm.tsx | 1 + 8 files changed, 48 insertions(+), 43 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx index 7b664e119607..d47fd7f0616f 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx @@ -4,7 +4,7 @@ import styles from "./styles.module.css"; interface SectionProps extends React.HTMLAttributes { children: React.ReactNode; - isStandalone?: boolean; + withoutPadding?: boolean; isFullWidth?: boolean; } @@ -12,7 +12,7 @@ const Section: React.FC = ({ children, className, isFullWidth = false, - isStandalone = false, + withoutPadding = false, ...props }) => { const classNames = clsx(styles.section, className); @@ -21,7 +21,7 @@ const Section: React.FC = ({
{children} diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css index fb03da7ffbd3..c72a5e83d938 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css @@ -6,11 +6,11 @@ max-width: 800px; justify-content: center; - &[data-standalone="false"] { + &[data-withoutPadding="false"] { padding-block: var(--ads-v2-spaces-6); } - &[data-standalone="false"]:not(:last-child) { + &[data-withoutPadding="false"]:not(:last-child) { border-bottom: 1px solid var(--ads-v2-color-border); } 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 de373520ece2..cee26fa60750 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx @@ -28,7 +28,6 @@ import { Select, Option } from "@appsmith/ads"; const PostBodyContainer = styled.div` display: flex; flex-direction: column; - padding: 12px 0px 0px; background-color: var(--ads-v2-color-bg); height: 100%; gap: var(--ads-v2-spaces-4); diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx index a9ae550c0ec1..802a5294572c 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx @@ -29,7 +29,13 @@ const CommonEditorForm = (props: Props) => { } = useGetFormActionValues(); return ( - + - - - {Object.values(API_EDITOR_TABS) - .filter((tab) => { - return !(!props.showSettings && tab === API_EDITOR_TABS.SETTINGS); - }) - .map((tab) => ( - - {createMessage(API_EDITOR_TAB_TITLES[tab])} - - ))} - - + + + {Object.values(API_EDITOR_TABS) + .filter((tab) => { + return !(!props.showSettings && tab === API_EDITOR_TABS.SETTINGS); + }) + .map((tab) => ( + + {createMessage(API_EDITOR_TAB_TITLES[tab])} + + ))} + props.theme.spaces[4]}px - ${(props) => props.theme.spaces[14]}px 0 0; -`; +const KeyValueFlexContainer = styled.div``; const FormRowWithLabel = styled(FormRow)` flex-wrap: wrap; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx index c66aa4048582..aaabc25d70d5 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx @@ -15,7 +15,7 @@ import FormLabel from "components/editorComponents/FormLabel"; const PostBodyContainer = styled.div` &&&& .CodeMirror { height: auto; - min-height: 250px; + min-height: 150px; } `; @@ -43,7 +43,7 @@ function PostBodyData(props: Props) { return ( -
+
Query diff --git a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx index 10e04d269f3a..a024ab6b386f 100644 --- a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx +++ b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx @@ -101,6 +101,7 @@ const TabbedViewContainer = styled.div` overflow: auto; position: relative; height: 100%; + padding: 0 var(--ads-v2-spaces-7); `; const Wrapper = styled.div` From efcc7ef01d188902905e92aa329df2b00eac4f78 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 5 Nov 2024 12:00:49 +0530 Subject: [PATCH 3/8] fix for other query fields --- .../components/ActionForm/Section/styles.module.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css index c72a5e83d938..ac73ba3c3bc3 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css @@ -6,10 +6,21 @@ max-width: 800px; justify-content: center; - &[data-withoutPadding="false"] { + &[data-withoutPadding="true"] { + padding: 0; + } + + /* We do not want padding above the first section */ + &[data-withoutPadding="false"]:first-child { + padding-bottom: var(--ads-v2-spaces-6); + } + + /* All other sections expect first will have padding top and bottom */ + &[data-withoutPadding="false"]:not(:first-child) { padding-block: var(--ads-v2-spaces-6); } + /* We will also render a border below sections expect for the last section */ &[data-withoutPadding="false"]:not(:last-child) { border-bottom: 1px solid var(--ads-v2-color-border); } From 9d04a858b121cf7d865ae311b401c1268bac2693 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 5 Nov 2024 13:19:11 +0530 Subject: [PATCH 4/8] API method and url --- .../components/CommonEditorForm/InfoFields.tsx | 18 ++++++------------ .../components/EmbeddedDatasourcePathField.tsx | 5 +---- .../components/CommonEditorForm/styles.ts | 12 ++++++++++++ 3 files changed, 19 insertions(+), 16 deletions(-) create mode 100644 app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx index 9df885b2c51d..460605ddc063 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx @@ -3,13 +3,8 @@ import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorC import RequestDropdownField from "components/editorComponents/form/fields/RequestDropdownField"; import { replayHighlightClass } from "globalStyles/portals"; import EmbeddedDatasourcePathField from "./components/EmbeddedDatasourcePathField"; -import styled from "styled-components"; import { Flex } from "@appsmith/ads"; - -const DatasourceWrapper = styled.div` - margin-left: 8px; - width: 100%; -`; +import * as Styled from "./styles"; export function InfoFields(props: { changePermitted: boolean; @@ -20,8 +15,8 @@ export function InfoFields(props: { theme: EditorTheme.LIGHT; }) { return ( - -
+ +
-
- + + - + ); } diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx index 136c51b0cce5..87615cbf7f2f 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx @@ -92,6 +92,7 @@ const DatasourceContainer = styled.div` position: relative; align-items: center; height: 36px; + gap: var(--ads-v2-spaces-4); .t--datasource-editor { background-color: var(--ads-v2-color-bg); .cm-s-duotone-light.CodeMirror { @@ -101,10 +102,6 @@ const DatasourceContainer = styled.div` z-index: ${Indices.Layer5}; } } - - .t--store-as-datasource { - margin-left: 10px; - } `; const hintContainerStyles: React.CSSProperties = { diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts new file mode 100644 index 000000000000..a60145281e9e --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts @@ -0,0 +1,12 @@ +import styled from "styled-components"; + +export const RequestMethodSelectContainer = styled.div` + width: 100px; + .ads-v2-select > .rc-select-selector { + min-width: 100px; + } +`; + +export const DatasourcePathFieldContainer = styled.div` + width: 100%; +`; From 08221b356365ad829a85a4e41f67a834d5941ae2 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 5 Nov 2024 13:41:17 +0530 Subject: [PATCH 5/8] Update app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- .../components/CommonEditorForm/RequestTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx index 5d0be9552cba..62b22a18b6c8 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx @@ -24,7 +24,7 @@ const SettingsWrapper = styled.div` `; const StyledTabPanel = styled(TabPanel)` height: calc(100% - 50px); - overflow: scroll; + overflow: auto; `; export function RequestTabs(props: { From 4753250a751d4042aa3354b7feddfbcbdbc1444f Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 5 Nov 2024 16:06:59 +0530 Subject: [PATCH 6/8] Update the padding for Key Value Field array --- .../editorComponents/form/fields/KeyValueFieldArray.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx index 8e5e514dc38a..ef5f2e472166 100644 --- a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx +++ b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx @@ -33,7 +33,7 @@ const KeyValueStackContainer = styled.div` // `; const FormRowWithLabel = styled(FormRow)` flex-wrap: wrap; - margin-bottom: ${(props) => props.theme.spaces[2] - 1}px; + margin-bottom: var(--ads-v2-spaces-3); ${FormLabel} { width: 100%; } @@ -52,7 +52,7 @@ const Flex = styled.div<{ size: number }>` ${(props) => props.size === 3 ? ` - margin-left: 5px; + margin-left: 8px; ` : null}; `; @@ -81,7 +81,7 @@ const DynamicTextFieldWithDropdownWrapper = styled.div` const DynamicDropdownFieldWrapper = styled.div` position: relative; - margin-left: 5px; + margin-left: var(--ads-v2-spaces-3); border-color: var(--ads-v2-color-border); color: var(--ads-v2-color-fg); From 8b16bb75fb242b2d8978985699cefcc088d5f033 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 5 Nov 2024 16:36:57 +0530 Subject: [PATCH 7/8] Update KeyValueFieldArray.tsx --- .../editorComponents/form/fields/KeyValueFieldArray.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx index ef5f2e472166..c30513169b5d 100644 --- a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx +++ b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx @@ -52,7 +52,7 @@ const Flex = styled.div<{ size: number }>` ${(props) => props.size === 3 ? ` - margin-left: 8px; + margin-left: var(--ads-v2-spaces-3); ` : null}; `; From 974c77a06ba124248d60e06170d28ffb91662f18 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 5 Nov 2024 16:56:04 +0530 Subject: [PATCH 8/8] fix for JS Editor space --- .../src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx index 9b6f13239406..b7ab3ad48447 100644 --- a/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx +++ b/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx @@ -57,7 +57,7 @@ export const JSEditorForm = (props: Props) => { } return ( - +