From de8caad9991bb99c4110e2c3cd172f4e78c1ff18 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Tue, 20 Aug 2024 17:41:03 +0530 Subject: [PATCH] feat: Updates for accounting Section and Zone changes (#35753) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 3dcc0df29aaffb0e2470e1561fb996fde3fc4837 > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Mon, 19 Aug 2024 16:10:09 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## 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. --- .../form/ToggleComponentToJson.tsx | 2 +- .../formControls/DropDownControl.tsx | 2 +- .../formControls/FieldArrayControl.tsx | 2 +- .../formControls/InputTextControl.tsx | 1 + .../ActionForm/Section/styles.module.css | 13 +++-- .../pages/Editor/ActionForm/Zone/index.tsx | 4 +- .../Editor/ActionForm/Zone/styles.module.css | 51 ++++++++++++++++--- app/client/src/pages/Editor/FormConfig.tsx | 1 + .../pages/Editor/QueryEditor/FormRender.tsx | 49 ++++++++++++++---- 9 files changed, 95 insertions(+), 30 deletions(-) diff --git a/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx b/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx index def220df07..9a0b3cea4b 100644 --- a/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx +++ b/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx @@ -76,7 +76,7 @@ function ToggleComponentToJsonHandler(props: HandlerProps) { content={!!configPropertyPathJsonValue && JS_TOGGLE_DISABLED_MESSAGE} isDisabled={!configPropertyPathJsonValue} > - + { return ( 0 && props.fields.map((field: string, index: number) => { return ( - + {/* 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) => { diff --git a/app/client/src/components/formControls/InputTextControl.tsx b/app/client/src/components/formControls/InputTextControl.tsx index 9443cd4a39..cc352a1e5f 100644 --- a/app/client/src/components/formControls/InputTextControl.tsx +++ b/app/client/src/components/formControls/InputTextControl.tsx @@ -144,6 +144,7 @@ class InputTextControl extends BaseControl { return ( = ({ children, layout = "single-column" }) => { +const Zone: React.FC = ({ children, layout = "single_column" }) => { return (
{children} diff --git a/app/client/src/pages/Editor/ActionForm/Zone/styles.module.css b/app/client/src/pages/Editor/ActionForm/Zone/styles.module.css index 144ea70403..6b04213740 100644 --- a/app/client/src/pages/Editor/ActionForm/Zone/styles.module.css +++ b/app/client/src/pages/Editor/ActionForm/Zone/styles.module.css @@ -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; } } diff --git a/app/client/src/pages/Editor/FormConfig.tsx b/app/client/src/pages/Editor/FormConfig.tsx index a4529dbaff..f6385ec64f 100644 --- a/app/client/src/pages/Editor/FormConfig.tsx +++ b/app/client/src/pages/Editor/FormConfig.tsx @@ -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; diff --git a/app/client/src/pages/Editor/QueryEditor/FormRender.tsx b/app/client/src/pages/Editor/QueryEditor/FormRender.tsx index f45e305da3..daeb376e17 100644 --- a/app/client/src/pages/Editor/QueryEditor/FormRender.tsx +++ b/app/client/src/pages/Editor/QueryEditor/FormRender.tsx @@ -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 ( - + // TODO: Remove classname once action redesign epic is done + ); @@ -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
{children}
; + + case "SINGLE_COLUMN_ZONE": + case "DOUBLE_COLUMN_ZONE": { + const layout = + section.controlType === "SINGLE_COLUMN_ZONE" + ? "single_column" + : "double_column"; + return {children}; + } + 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 ( - +