feat: Updates for accounting Section and Zone changes (#35753)
## Description This PR have following fixes and updates, 1. Changed renderEachConfigV2 to accommodate SECTION_V2, SINGLE_COLUMN_ZONE, and DOUBLE_COLUMN_ZONE. 2. Added classes to form render components to handle parallel use of old config and new config. 3. Updated Section and Zone component CSS to use nested structure. 4. Fixed the height difference between label with JS toggle and without JS toggle. Fixes #35544 ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10456040271> > Commit: 3dcc0df29aaffb0e2470e1561fb996fde3fc4837 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10456040271&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Mon, 19 Aug 2024 16:10:09 UTC <!-- end of auto-generated comment: Cypress test results --> ## 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** - Improved styling for toggle buttons and dropdowns for a better user experience. - Enhanced layout adaptability through updated class names and properties across various components. - Introduced a new function for more efficient rendering of form sections and nested components. - **Bug Fixes** - Addressed potential layout shifts and visual inconsistencies by enforcing minimum heights on key components. - **Documentation** - Updated CSS selectors for better readability and maintainability without altering existing functionalities. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
albinAppsmith
GitHub
parent
cd80904369
commit
de8caad999
|
|
@ -76,7 +76,7 @@ function ToggleComponentToJsonHandler(props: HandlerProps) {
|
|||
content={!!configPropertyPathJsonValue && JS_TOGGLE_DISABLED_MESSAGE}
|
||||
isDisabled={!configPropertyPathJsonValue}
|
||||
>
|
||||
<span>
|
||||
<span className="flex items-center justify-center h-[16px]">
|
||||
<StyledToggleButton
|
||||
data-testid={`t--${props.configProperty}-JS`}
|
||||
icon="js-toggle-v2"
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ class DropDownControl extends BaseControl<Props> {
|
|||
|
||||
return (
|
||||
<DropdownSelect
|
||||
className={`t--${this?.props?.configProperty}`}
|
||||
className={`t--${this?.props?.configProperty} uqi-dropdown-select`}
|
||||
data-testid={this.props.configProperty}
|
||||
style={styles}
|
||||
width={styles.width}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ function NestedComponents(props: any) {
|
|||
props.fields.length > 0 &&
|
||||
props.fields.map((field: string, index: number) => {
|
||||
return (
|
||||
<SecondaryBox key={index}>
|
||||
<SecondaryBox className="array-control-secondary-box" key={index}>
|
||||
{/* TODO: Fix this the next time the file is edited */}
|
||||
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
|
||||
{props.schema.map((sch: any, idx: number) => {
|
||||
|
|
|
|||
|
|
@ -144,6 +144,7 @@ class InputTextControl extends BaseControl<InputControlProps> {
|
|||
|
||||
return (
|
||||
<FieldWrapper
|
||||
className="uqi-input-text"
|
||||
data-testid={configProperty}
|
||||
style={customStyles || {}}
|
||||
width={width || ""}
|
||||
|
|
|
|||
|
|
@ -4,15 +4,14 @@
|
|||
gap: var(--ads-v2-spaces-4);
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
container: uqi-section / inline-size;
|
||||
}
|
||||
|
||||
.section[data-standalone="false"] {
|
||||
padding-block: var(--ads-v2-spaces-6);
|
||||
}
|
||||
&[data-standalone="false"] {
|
||||
padding-block: var(--ads-v2-spaces-6);
|
||||
}
|
||||
|
||||
.section[data-standalone="false"]:not(:last-child) {
|
||||
border-bottom: 1px solid var(--ads-v2-color-border);
|
||||
&[data-standalone="false"]:not(:last-child) {
|
||||
border-bottom: 1px solid var(--ads-v2-color-border);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import styles from "./styles.module.css";
|
|||
|
||||
interface ZoneProps {
|
||||
children: React.ReactNode;
|
||||
layout?: "single-column" | "double-column";
|
||||
layout?: "single_column" | "double_column";
|
||||
}
|
||||
|
||||
const Zone: React.FC<ZoneProps> = ({ children, layout = "single-column" }) => {
|
||||
const Zone: React.FC<ZoneProps> = ({ children, layout = "single_column" }) => {
|
||||
return (
|
||||
<div className={styles.zone} data-layout={layout}>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,55 @@
|
|||
gap: var(--ads-v2-spaces-4);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zone[data-layout="double-column"] {
|
||||
grid-template-columns: repeat(2, minmax(260px, 1fr));
|
||||
}
|
||||
&[data-layout="double_column"] {
|
||||
grid-template-columns: repeat(2, minmax(260px, 1fr));
|
||||
}
|
||||
|
||||
.zone[data-layout="single-column"] {
|
||||
grid-template-columns: 1fr;
|
||||
&[data-layout="single_column"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/*
|
||||
This section can be removed once the condition abouve each is resolved
|
||||
*/
|
||||
/* 1. Margin is removed from FieldWrapper component in FormRender file */
|
||||
& :global(.uqi-form-wrapper) {
|
||||
margin: 0;
|
||||
}
|
||||
/* DropdownControl default width is removed */
|
||||
& :global(.uqi-dropdown-select) {
|
||||
width: unset !important;
|
||||
}
|
||||
/* InputTexctControl min,max and width removed */
|
||||
& :global(.uqi-input-text) {
|
||||
width: unset !important;
|
||||
min-width: unset !important;
|
||||
max-width: unset !important;
|
||||
}
|
||||
/* FieldArrayControl hardcoded width is removed */
|
||||
& :global(.t--form-control-ARRAY_FIELD) {
|
||||
& :global(.t--form-control-QUERY_DYNAMIC_INPUT_TEXT) > div {
|
||||
width: unset !important;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 100% !important;
|
||||
|
||||
& > :global(.array-control-secondary-box) {
|
||||
width: 100% !important;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Removable section ends here */
|
||||
}
|
||||
|
||||
@container uqi-section (max-width: 531px) {
|
||||
.zone[data-layout="double-column"] {
|
||||
.zone[data-layout="double_column"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const FlexWrapper = styled.div`
|
|||
display: flex;
|
||||
width: fit-content;
|
||||
margin-right: 5px;
|
||||
min-height: 21px;
|
||||
|
||||
& .t--js-toggle {
|
||||
margin-bottom: 0px;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import FormControl from "../FormControl";
|
|||
import type { ControlProps } from "components/formControls/BaseControl";
|
||||
import { Spinner } from "@appsmith/ads";
|
||||
import type { QueryAction, SaaSAction } from "entities/Action";
|
||||
import { Section, Zone } from "../ActionForm";
|
||||
|
||||
interface Props {
|
||||
// TODO: Fix this the next time the file is edited
|
||||
|
|
@ -154,21 +155,18 @@ const FormRender = (props: Props) => {
|
|||
}
|
||||
if (section.hasOwnProperty("controlType")) {
|
||||
// If component is type section, render it's children
|
||||
if (
|
||||
section.controlType === "SECTION" &&
|
||||
section.hasOwnProperty("children")
|
||||
) {
|
||||
// TODO: Fix this the next time the file is edited
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return section.children.map((section: any, idx: number) => {
|
||||
return renderEachConfigV2(formName, section, idx);
|
||||
});
|
||||
if (Object.hasOwn(section, "children")) {
|
||||
return rederNodeWithChildren(section, formName);
|
||||
}
|
||||
try {
|
||||
const { configProperty } = section;
|
||||
const modifiedSection = modifySectionConfig(section, enabled);
|
||||
return (
|
||||
<FieldWrapper key={`${configProperty}_${idx}`}>
|
||||
// TODO: Remove classname once action redesign epic is done
|
||||
<FieldWrapper
|
||||
className="uqi-form-wrapper"
|
||||
key={`${configProperty}_${idx}`}
|
||||
>
|
||||
<FormControl config={modifiedSection} formName={formName} />
|
||||
</FieldWrapper>
|
||||
);
|
||||
|
|
@ -185,6 +183,32 @@ const FormRender = (props: Props) => {
|
|||
return null;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const rederNodeWithChildren = (section: any, formName: string) => {
|
||||
if (!Object.hasOwn(section, "children")) return;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const children = section.children.map((section: any, idx: number) =>
|
||||
renderEachConfigV2(formName, section, idx),
|
||||
);
|
||||
|
||||
switch (section.controlType) {
|
||||
case "SECTION_V2":
|
||||
return <Section>{children}</Section>;
|
||||
|
||||
case "SINGLE_COLUMN_ZONE":
|
||||
case "DOUBLE_COLUMN_ZONE": {
|
||||
const layout =
|
||||
section.controlType === "SINGLE_COLUMN_ZONE"
|
||||
? "single_column"
|
||||
: "double_column";
|
||||
return <Zone layout={layout}>{children}</Zone>;
|
||||
}
|
||||
default:
|
||||
return children;
|
||||
}
|
||||
};
|
||||
|
||||
// Recursive call to render forms pre UQI
|
||||
const renderEachConfig =
|
||||
(formName: string) =>
|
||||
|
|
@ -200,7 +224,10 @@ const FormRender = (props: Props) => {
|
|||
try {
|
||||
const { configProperty } = formControlOrSection;
|
||||
return (
|
||||
<FieldWrapper key={`${configProperty}_${idx}`}>
|
||||
<FieldWrapper
|
||||
className="uqi-form-wrapper"
|
||||
key={`${configProperty}_${idx}`}
|
||||
>
|
||||
<FormControl
|
||||
config={formControlOrSection}
|
||||
formName={formName}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user