fix: Paddings and scrolls in Plugin Action Editor (#37203)
## Description Updates the padding and fixes the unnecessary scrolls renders in the new Plugin Action Editor flow Fixes #31573 Fixes #37214 ## Automation /ok-to-test tags="@tag.Datasource" ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new `TabbedViewContainer` for improved layout in the `CommonEditorForm`. - Added support for binary file uploads in the `PostBodyData` component. - **Improvements** - Enhanced padding and border behavior in the `Section` component based on the new `withoutPadding` attribute. - Adjusted minimum height for the `.CodeMirror` class in the `PostBodyData` component. - Improved layout and styling in the `InfoFields` component with new styled components. - Updated tooltip content handling in the `DatasourceConfig` component for better clarity on invalid entries. - Refined layout behavior in the `CommonEditorForm` with the addition of the `TabbedViewContainer`. - Enhanced layout in the `EmbeddedDatasourcePathField` component with updated styling. - **Bug Fixes** - No new bug fixes reported. - **Refactor** - Streamlined the `RequestTabs` component by integrating styles directly into the `Tabs` component. - Refined handling of datasource URLs in the `EmbeddedDatasourcePathField` component. - Updated styling and structure in the `KeyValueFieldArray` component for improved layout. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
Hetu Nandu
GitHub
parent
6660bd9917
commit
79a7979839
|
|
@ -4,7 +4,7 @@ import styles from "./styles.module.css";
|
|||
|
||||
interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
isStandalone?: boolean;
|
||||
withoutPadding?: boolean;
|
||||
isFullWidth?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ const Section: React.FC<SectionProps> = ({
|
|||
children,
|
||||
className,
|
||||
isFullWidth = false,
|
||||
isStandalone = false,
|
||||
withoutPadding = false,
|
||||
...props
|
||||
}) => {
|
||||
const classNames = clsx(styles.section, className);
|
||||
|
|
@ -21,7 +21,7 @@ const Section: React.FC<SectionProps> = ({
|
|||
<div
|
||||
className={classNames}
|
||||
data-fullwidth={isFullWidth.toString()}
|
||||
data-standalone={isStandalone.toString()}
|
||||
data-withoutPadding={withoutPadding.toString()}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,22 @@
|
|||
max-width: 800px;
|
||||
justify-content: center;
|
||||
|
||||
&[data-standalone="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);
|
||||
}
|
||||
|
||||
&[data-standalone="false"]:not(:last-child) {
|
||||
/* 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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,13 @@ const CommonEditorForm = (props: Props) => {
|
|||
} = useGetFormActionValues();
|
||||
|
||||
return (
|
||||
<Flex flexDirection="column" gap="spaces-3" w="100%">
|
||||
<Flex
|
||||
flex="1"
|
||||
flexDirection="column"
|
||||
gap="spaces-3"
|
||||
overflow="hidden"
|
||||
w="100%"
|
||||
>
|
||||
<InfoFields
|
||||
actionName={action.name}
|
||||
changePermitted={props.isChangePermitted}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Flex w="100%">
|
||||
<div>
|
||||
<Flex gap="spaces-4" w="100%">
|
||||
<Styled.RequestMethodSelectContainer>
|
||||
<RequestDropdownField
|
||||
className={`t--apiFormHttpMethod ${replayHighlightClass}`}
|
||||
data-location-id={btoa("actionConfiguration.httpMethod")}
|
||||
|
|
@ -29,12 +24,11 @@ export function InfoFields(props: {
|
|||
name="actionConfiguration.httpMethod"
|
||||
options={props.options}
|
||||
placeholder="Method"
|
||||
width={"110px"}
|
||||
>
|
||||
<div />
|
||||
</RequestDropdownField>
|
||||
</div>
|
||||
<DatasourceWrapper className="t--dataSourceField">
|
||||
</Styled.RequestMethodSelectContainer>
|
||||
<Styled.DatasourcePathFieldContainer className="t--dataSourceField">
|
||||
<EmbeddedDatasourcePathField
|
||||
actionName={props.actionName}
|
||||
codeEditorVisibleOverflow
|
||||
|
|
@ -44,7 +38,7 @@ export function InfoFields(props: {
|
|||
pluginId={props.pluginId}
|
||||
theme={props.theme}
|
||||
/>
|
||||
</DatasourceWrapper>
|
||||
</Styled.DatasourcePathFieldContainer>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,9 @@ const SettingsWrapper = styled.div`
|
|||
padding: 0;
|
||||
}
|
||||
`;
|
||||
const TabsListWrapper = styled.div`
|
||||
padding: 0 var(--ads-v2-spaces-7);
|
||||
`;
|
||||
const StyledTabPanel = styled(TabPanel)`
|
||||
height: calc(100% - 50px);
|
||||
overflow: auto;
|
||||
padding: 0 var(--ads-v2-spaces-7);
|
||||
`;
|
||||
|
||||
export function RequestTabs(props: {
|
||||
|
|
@ -61,8 +57,15 @@ export function RequestTabs(props: {
|
|||
);
|
||||
|
||||
return (
|
||||
<Tabs className="h-full" onValueChange={onValueChange} value={value}>
|
||||
<TabsListWrapper>
|
||||
<Tabs
|
||||
onValueChange={onValueChange}
|
||||
style={{
|
||||
height: "calc(100% - 36px)",
|
||||
overflow: "hidden",
|
||||
maxHeight: "unset",
|
||||
}}
|
||||
value={value}
|
||||
>
|
||||
<TabsList>
|
||||
{Object.values(API_EDITOR_TABS)
|
||||
.filter((tab) => {
|
||||
|
|
@ -85,7 +88,6 @@ export function RequestTabs(props: {
|
|||
</Tab>
|
||||
))}
|
||||
</TabsList>
|
||||
</TabsListWrapper>
|
||||
<StyledTabPanel value={API_EDITOR_TABS.HEADERS}>
|
||||
<DatasourceConfig
|
||||
attributeName="header"
|
||||
|
|
|
|||
|
|
@ -93,10 +93,7 @@ const FlexContainer = styled.div`
|
|||
const KeyValueStackContainer = styled.div`
|
||||
padding: 0;
|
||||
`;
|
||||
const KeyValueFlexContainer = styled.div`
|
||||
padding: ${(props) => props.theme.spaces[4]}px
|
||||
${(props) => props.theme.spaces[14]}px 0 0;
|
||||
`;
|
||||
const KeyValueFlexContainer = styled.div``;
|
||||
const FormRowWithLabel = styled(FormRow)`
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
`;
|
||||
|
|
@ -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 (
|
||||
<PostBodyContainer>
|
||||
<Section isFullWidth>
|
||||
<Section isFullWidth withoutPadding>
|
||||
<Zone layout="single_column">
|
||||
<div className="t--graphql-query-editor">
|
||||
<StyledFormLabel>Query</StyledFormLabel>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const KeyValueStackContainer = styled.div<CustomStack>`
|
|||
// `;
|
||||
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: var(--ads-v2-spaces-3);
|
||||
`
|
||||
: 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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export const JSEditorForm = (props: Props) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<Flex flex="1" overflow="scroll">
|
||||
<Flex flex="1" overflowY="scroll">
|
||||
<LazyCodeEditor
|
||||
AIAssisted
|
||||
blockCompletions={props.blockCompletions}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user