feat: Action redesign: updated Anthropic plugin config

app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx

@@ -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"

app/client/src/components/formControls/DropDownControl.tsx

@@ -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}

app/client/src/components/formControls/FieldArrayControl.tsx

@@ -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) => {

app/client/src/components/formControls/InputTextControl.tsx

@@ -144,6 +144,7 @@ class InputTextControl extends BaseControl<InputControlProps> {
 
     return (
       <FieldWrapper
+        className="uqi-input-text"
         data-testid={configProperty}
         style={customStyles || {}}
         width={width || ""}

app/client/src/pages/Editor/ActionForm/Section/styles.module.css

@@ -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);
+  }
 }

app/client/src/pages/Editor/ActionForm/Zone/index.tsx

@@ -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}

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;
   }
 }

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;

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 (
-          <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}