Skip to content

fix: Paddings and scrolls in Plugin Action Editor #37203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hetunandu merged 13 commits into from
Nov 5, 2024
Merged

fix: Paddings and scrolls in Plugin Action Editor #37203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a3a1a59
fix: API Body format context lost
hetunandu Oct 31, 2024
ff0a0a7
API and GraphQL
hetunandu Nov 4, 2024
9b60d95
Merge branch 'release' into fix/paddings-and-scrolls
hetunandu Nov 4, 2024
0e7e723
Merge branch 'release' into fix/paddings-and-scrolls
hetunandu Nov 5, 2024
efcc7ef
fix for other query fields
hetunandu Nov 5, 2024
0abd134
Merge branch 'release' into fix/paddings-and-scrolls
hetunandu Nov 5, 2024
9d04a85
API method and url
hetunandu Nov 5, 2024
08221b3
Update app/client/src/PluginActionEditor/components/PluginActionForm/…
hetunandu Nov 5, 2024
4753250
Update the padding for Key Value Field array
hetunandu Nov 5, 2024
e94458a
Merge remote-tracking branch 'origin/fix/paddings-and-scrolls' into f…
hetunandu Nov 5, 2024
8b16bb7
Update KeyValueFieldArray.tsx
hetunandu Nov 5, 2024
974c77a
fix for JS Editor space
hetunandu Nov 5, 2024
73474fd
Merge remote-tracking branch 'origin/fix/paddings-and-scrolls' into f…
hetunandu Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ...rc/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import styles from "./styles.module.css";

interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
isStandalone?: boolean;
withoutPadding?: boolean;
isFullWidth?: boolean;
}

const Section: React.FC<SectionProps> = ({
children,
className,
isFullWidth = false,
isStandalone = false,
withoutPadding = false,
...props
}) => {
const classNames = clsx(styles.section, className);
Expand All @@ -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}
Expand Down
15 changes: 13 additions & 2 deletions ...nActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
1 change: 0 additions & 1 deletion .../src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
8 changes: 7 additions & 1 deletion ...ActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
18 changes: 6 additions & 12 deletions ...PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -20,21 +15,20 @@ 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")}
disabled={!props.changePermitted}
name="actionConfiguration.httpMethod"
options={props.options}
placeholder="Method"
width={"110px"}
>
<div />
</RequestDropdownField>
</div>
<DatasourceWrapper className="t--dataSourceField">
</Styled.RequestMethodSelectContainer>
Comment on lines +19 to +30
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

RequestMethodSelectContainer needs padding adjustments per design specs

The styled component's implementation only specifies width but lacks padding specifications mentioned in issue #37214. Please update the component to include the correct padding values from the design system.

  • app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts: Add padding specifications to RequestMethodSelectContainer
🔗 Analysis chain

Verify styling consistency with design system

The new RequestMethodSelectContainer wraps the dropdown field. Please ensure this styled component follows the design system specifications mentioned in issue #37214.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other RequestMethodSelectContainer usages to verify consistency
rg -l "RequestMethodSelectContainer"

# Check the implementation in styles.ts
rg "RequestMethodSelectContainer" -A 5 "styles.ts"

Length of output: 340

Script:

#!/bin/bash
# Check the implementation in the correct styles.ts file path
rg "RequestMethodSelectContainer" -A 5 "app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts"

# Search for design system styled components patterns
rg "styled\." -A 3 "app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts"

Length of output: 613

Script:

#!/bin/bash
# Search for design system specifications in issue #37214
gh issue view 37214

# Look for other similar dropdown containers in the codebase
ast-grep --pattern 'styled.div`
  width: $_;
  .ads-v2-select > .rc-select-selector {
    $$$
  }
`'

Length of output: 498

<Styled.DatasourcePathFieldContainer className="t--dataSourceField">
<EmbeddedDatasourcePathField
actionName={props.actionName}
codeEditorVisibleOverflow
Expand All @@ -44,7 +38,7 @@ export function InfoFields(props: {
pluginId={props.pluginId}
theme={props.theme}
/>
</DatasourceWrapper>
</Styled.DatasourcePathFieldContainer>
</Flex>
);
}
60 changes: 31 additions & 29 deletions ...luginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -61,31 +57,37 @@ export function RequestTabs(props: {
);

return (
<Tabs className="h-full" onValueChange={onValueChange} value={value}>
<TabsListWrapper>
<TabsList>
{Object.values(API_EDITOR_TABS)
.filter((tab) => {
return !(!props.showSettings && tab === API_EDITOR_TABS.SETTINGS);
})
.map((tab) => (
<Tab
data-testid={`t--api-editor-${tab}`}
key={tab}
notificationCount={
tab == "HEADERS"
? headersCount
: tab == "PARAMS"
? paramsCount
: undefined
}
value={tab}
>
{createMessage(API_EDITOR_TAB_TITLES[tab])}
</Tab>
))}
</TabsList>
</TabsListWrapper>
<Tabs
onValueChange={onValueChange}
style={{
height: "calc(100% - 36px)",
overflow: "hidden",
maxHeight: "unset",
}}
value={value}
>
<TabsList>
{Object.values(API_EDITOR_TABS)
.filter((tab) => {
return !(!props.showSettings && tab === API_EDITOR_TABS.SETTINGS);
})
.map((tab) => (
<Tab
data-testid={`t--api-editor-${tab}`}
key={tab}
notificationCount={
tab == "HEADERS"
? headersCount
: tab == "PARAMS"
? paramsCount
: undefined
}
value={tab}
>
{createMessage(API_EDITOR_TAB_TITLES[tab])}
</Tab>
))}
</TabsList>
<StyledTabPanel value={API_EDITOR_TABS.HEADERS}>
<DatasourceConfig
attributeName="header"
Expand Down
5 changes: 1 addition & 4 deletions ...r/components/PluginActionForm/components/CommonEditorForm/components/DatasourceConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
5 changes: 1 addition & 4 deletions ...s/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -101,10 +102,6 @@ const DatasourceContainer = styled.div`
z-index: ${Indices.Layer5};
}
}

.t--store-as-datasource {
margin-left: 10px;
}
`;

const hintContainerStyles: React.CSSProperties = {
Expand Down
12 changes: 12 additions & 0 deletions .../src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;
`;
4 changes: 2 additions & 2 deletions .../PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import FormLabel from "components/editorComponents/FormLabel";
const PostBodyContainer = styled.div`
&&&& .CodeMirror {
height: auto;
min-height: 250px;
min-height: 150px;
}
`;

Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Expand All @@ -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};
`;
Expand Down Expand Up @@ -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);

Expand Down
1 change: 1 addition & 0 deletions app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down