chore: external merge request from Contributor

app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js

@@ -0,0 +1,64 @@
+import EditorNavigation, {
+  EntityType,
+} from "../../../../../support/Pages/EditorNavigation";
+
+const commonlocators = require("../../../../../locators/commonlocators.json");
+const jsonFormDslSwitchWidgetSourceData = require("../../../../../fixtures/jsonFormDslSwitchWidgetSourceData.json");
+const { propPane } = require("../../../../../support/Objects/ObjectsCore");
+
+describe(
+  "JSON Form Widget Custom Field",
+  { tags: ["@tag.Widget", "@tag.JSONForm"] },
+  () => {
+    it("uses the custom field when the accessor matches", () => {
+      const formDsl = JSON.parse(
+        JSON.stringify(jsonFormDslSwitchWidgetSourceData),
+      );
+
+      cy.addDsl(formDsl);
+
+      cy.openPropertyPane("jsonformwidget");
+
+      // Add new custom field
+      cy.get(commonlocators.jsonFormAddNewCustomFieldBtn).click({
+        force: true,
+      });
+
+      cy.openFieldConfiguration("customField1");
+
+      cy.testJsontext("propertyname", "education");
+      cy.testJsontext("text", "Education");
+      cy.selectDropdownValue(commonlocators.jsonFormFieldType, "Switch");
+
+      // check for the position alignment
+      cy.get(commonlocators.optionposition).last().click({ force: true });
+      cy.get(commonlocators.jsonformFieldCustomFieldSwitch).should(
+        "have.attr",
+        "direction",
+        "row-reverse",
+      );
+      cy.get(commonlocators.optionpositionL).last().click({ force: true });
+      cy.get(commonlocators.jsonformFieldCustomFieldSwitch).should(
+        "have.attr",
+        "direction",
+        "row",
+      );
+      cy.closePropertyPane();
+
+      const sourceData = {
+        name: "John",
+        email: "[email protected]",
+      };
+
+      EditorNavigation.SelectEntityByName("JSONForm1", EntityType.Widget);
+      propPane.NavigateBackToPropertyPane();
+      propPane.EnterJSContext("Source data", JSON.stringify(sourceData), true);
+
+      cy.get(`${commonlocators.jsonFieldPrefix} label`).contains("Name");
+      cy.get(`${commonlocators.jsonFieldPrefix} input`).should(
+        "have.value",
+        "John",
+      );
+    });
+  },
+);

app/client/cypress/fixtures/jsonFormDslSwitchWidgetSourceData.json

@@ -0,0 +1,172 @@
+{
+    "dsl": {
+      "widgetName": "MainContainer",
+      "backgroundColor": "none",
+      "rightColumn": 1168,
+      "snapColumns": 64,
+      "detachFromLayout": true,
+      "widgetId": "0",
+      "topRow": 0,
+      "bottomRow": 680,
+      "containerStyle": "none",
+      "snapRows": 125,
+      "parentRowSpace": 1,
+      "type": "CANVAS_WIDGET",
+      "canExtend": true,
+      "version": 47,
+      "minHeight": 870,
+      "parentColumnSpace": 1,
+      "dynamicTriggerPathList": [],
+      "dynamicBindingPathList": [],
+      "leftColumn": 0,
+      "children": [
+        {
+          "widgetName": "Text1",
+          "displayName": "Text",
+          "iconSVG": "/static/media/icon.97c59b52.svg",
+          "topRow": 54,
+          "bottomRow": 58,
+          "parentRowSpace": 10,
+          "type": "TEXT_WIDGET",
+          "hideCard": false,
+          "animateLoading": true,
+          "parentColumnSpace": 18.0625,
+          "leftColumn": 22,
+          "text": "Label",
+          "key": "zgsygilz5a",
+          "rightColumn": 38,
+          "textAlign": "LEFT",
+          "widgetId": "ums2hvawa0",
+          "isVisible": true,
+          "fontStyle": "BOLD",
+          "textColor": "#231F20",
+          "version": 1,
+          "parentId": "0",
+          "renderMode": "CANVAS",
+          "isLoading": false,
+          "fontSize": "PARAGRAPH"
+        },
+        {
+          "isVisible": true,
+          "animateLoading": true,
+          "backgroundColor": "#fff",
+          "disabledWhenInvalid": true,
+          "fixedFooter": true,
+          "autoGenerateForm": true,
+          "schema": {
+            "__root_schema__": {
+              "children": {
+                "name": {
+                  "children": {},
+                  "dataType": "string",
+                  "defaultValue": "{{((sourceData, formData, fieldState) => (sourceData.name))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+                  "fieldType": "Text Input",
+                  "sourceData": "John",
+                  "isCustomField": false,
+                  "accessor": "name",
+                  "identifier": "name",
+                  "position": 0,
+                  "originalIdentifier": "name",
+                  "iconAlign": "left",
+                  "isDisabled": false,
+                  "isRequired": false,
+                  "isSpellCheck": false,
+                  "isVisible": true,
+                  "label": "Name"
+                },
+                "email": {
+                  "children": {},
+                  "dataType": "string",
+                  "defaultValue": "{{((sourceData, formData, fieldState) => (sourceData.email))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+                  "fieldType": "Text Input",
+                  "sourceData": "[email protected]",
+                  "isCustomField": false,
+                  "accessor": "email",
+                  "identifier": "email",
+                  "position": 1,
+                  "originalIdentifier": "email",
+                  "iconAlign": "left",
+                  "isDisabled": false,
+                  "isRequired": false,
+                  "isSpellCheck": false,
+                  "isVisible": true,
+                  "label": "Email"
+                }
+              },
+              "dataType": "object",
+              "defaultValue": "{{((sourceData, formData, fieldState) => (sourceData))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+              "fieldType": "Object",
+              "sourceData": {
+                "name": "John",
+                "email": "[email protected]"
+              },
+              "isCustomField": false,
+              "name": "__root_schema__",
+              "accessor": "__root_schema__",
+              "identifier": "__root_schema__",
+              "position": -1,
+              "originalIdentifier": "__root_schema__",
+              "isDisabled": false,
+              "isRequired": false,
+              "isVisible": true,
+              "label": ""
+            }
+          },
+          "scrollContents": true,
+          "showReset": true,
+          "title": "Form",
+          "version": 1,
+          "widgetName": "JSONForm1",
+          "submitButtonStyles": {
+            "buttonColor": "#03B365",
+            "buttonVariant": "PRIMARY"
+          },
+          "resetButtonStyles": {
+            "buttonColor": "#03B365",
+            "buttonVariant": "SECONDARY"
+          },
+          "sourceData": "",
+          "type": "JSON_FORM_WIDGET",
+          "hideCard": false,
+          "displayName": "JSON Form",
+          "key": "sh61xsjzqi",
+          "iconSVG": "/static/media/icon.6bacf7df.svg",
+          "widgetId": "ie1fkmka46",
+          "renderMode": "CANVAS",
+          "isLoading": false,
+          "parentColumnSpace": 42.5625,
+          "parentRowSpace": 10,
+          "leftColumn": 29,
+          "rightColumn": 54,
+          "topRow": 29,
+          "bottomRow": 79,
+          "parentId": "0",
+          "submitButtonLabel": "Submit",
+          "resetButtonLabel": "Reset",
+          "dynamicPropertyPathList": [
+            {
+              "key": "schema.__root_schema__.children.name.defaultValue"
+            },
+            {
+              "key": "schema.__root_schema__.children.email.defaultValue"
+            },
+            {
+              "key": "schema.__root_schema__.defaultValue"
+            }
+          ],
+          "dynamicBindingPathList": [
+            {
+              "key": "schema.__root_schema__.children.name.defaultValue"
+            },
+            {
+              "key": "schema.__root_schema__.children.email.defaultValue"
+            },
+            {
+              "key": "schema.__root_schema__.defaultValue"
+            }
+          ],
+          "dynamicTriggerPathList": []
+        }
+      ]
+    }
+  }

app/client/cypress/locators/commonlocators.json

@@ -234,11 +234,13 @@
   "heightProperty": ".rc-select-single input",
   "heightPropertyOption": ".rc-select-item-option-content span",
   "filePickerMaxNoOfFiles": ".t--property-control-maxno\\.offiles .CodeMirror-code",
+  "jsonformFieldCustomFieldSwitch": ".t--jsonformfield-customField1.switchfield",
+  "jsonFieldPrefix": ".t--jsonformfield-name",
   "allowclearingValueInput": ".t--property-control-allowclearingvalue input[type='checkbox']",
   "allowcountrycodechangeInput": ".t--property-control-allowcountrycodechange input[type='checkbox']",
   "allowsearchingInput": ".t--property-control-allowsearching input",
   "allowsearchingInputTypeCheckbox": ".t--property-control-allowsearching input[type='checkbox']",
   "clientSideSearch": ".t--property-control-clientsidesearch input[type='checkbox']",
   "enableClientSideSearch": ".t--property-control-enableclientsidesearch input[type='checkbox']",
   "fixedFooterInput": ".t--property-control-fixedfooter input"
-}
+}

app/client/src/widgets/JSONFormWidget/component/Field.tsx

@@ -23,7 +23,7 @@ type FieldProps<TValue> = React.PropsWithChildren<
 >;
 
 interface StyledWrapperProps {
-  direction: "row" | "column";
+  direction: "row" | "column" | "row-reverse"
 }
 
 const StyledWrapper = styled.div<StyledWrapperProps>`
@@ -66,7 +66,13 @@ function Field<TValue>({
     }
   }, [defaultValue, setValue]);
 
-  const direction = inlineLabel ? "row" : "column";
+  const direction: "row" | "column" | "row-reverse" = fieldClassName.includes(
+    "switchfield",
+  )
+    ? inlineLabel
+      ? "row"
+      : "row-reverse"
+    : "column";
 
   return (
     <StyledWrapper

app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx

@@ -31,7 +31,7 @@ export interface LabelStyles {
 
 export type FieldLabelProps = PropsWithChildren<
   LabelStyles & {
-    direction?: "row" | "column";
+    direction?: "row" | "column" | "row-reverse";
     isRequiredField?: boolean;
     label: string;
     tooltip?: string;
@@ -89,6 +89,7 @@ const StyledLabelText = styled.p<StyledLabelTextProps>`
   font-weight: ${({ fontWeight }) => fontWeight};
   font-style: ${({ fontStyle }) => fontStyle};
   text-decoration: ${({ textDecoration }) => textDecoration};
+  width: max-content;
 `;
 
 const ToolTipIcon = styled(IconWrapper)`

app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx

@@ -11,7 +11,7 @@ import type {
   FieldComponentBaseProps,
   FieldEventProps,
 } from "../constants";
-import { ActionUpdateDependency } from "../constants";
+import { ActionUpdateDependency, FieldType } from "../constants";
 import SwitchComponent from "widgets/SwitchWidget/component";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
 import { Colors } from "constants/Colors";
@@ -23,6 +23,7 @@ type SwitchComponentOwnProps = FieldComponentBaseProps &
     alignWidget: AlignWidget;
     accentColor?: string;
     onChange?: string;
+    labelPosition: LabelPosition;
   };
 
 type SwitchFieldProps = BaseFieldComponentProps<SwitchComponentOwnProps>;
@@ -36,6 +37,7 @@ const COMPONENT_DEFAULT_VALUES: SwitchComponentOwnProps = {
   isVisible: true,
   labelTextSize: BASE_LABEL_TEXT_SIZE,
   label: "",
+  labelPosition: LabelPosition.Left,
 };
 
 const isValid = (value: boolean, schemaItem: SwitchFieldProps["schemaItem"]) =>
@@ -99,7 +101,7 @@ function SwitchField({
         isLoading={false}
         isSwitchedOn={value ?? false}
         label=""
-        labelPosition={LabelPosition.Left}
+        labelPosition={schemaItem.labelPosition}
         onChange={onSwitchChange}
         widgetId=""
       />
@@ -108,6 +110,7 @@ function SwitchField({
       schemaItem.alignWidget,
       schemaItem.accentColor,
       schemaItem.isDisabled,
+      schemaItem.labelPosition,
       onSwitchChange,
       value,
     ],
@@ -117,8 +120,11 @@ function SwitchField({
     <Field
       accessor={schemaItem.accessor}
       defaultValue={passedDefaultValue ?? schemaItem.defaultValue}
-      fieldClassName={fieldClassName}
-      inlineLabel
+      fieldClassName={`${fieldClassName} switchfield`}
+      inlineLabel={
+        schemaItem.fieldType === FieldType.SWITCH &&
+        schemaItem.labelPosition === LabelPosition.Left
+      }
       isRequiredField={schemaItem.isRequired}
       label={schemaItem.label}
       labelStyle={schemaItem.labelStyle}

app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts

@@ -2,6 +2,7 @@ import { ValidationTypes } from "constants/WidgetValidation";
 import { FieldType } from "widgets/JSONFormWidget/constants";
 import type { HiddenFnParams } from "../helper";
 import { getSchemaItem, getAutocompleteProperties } from "../helper";
+import { LabelPosition } from "components/constants";
 
 const PROPERTIES = {
   content: {
@@ -23,22 +24,22 @@ const PROPERTIES = {
     ],
     label: [
       {
-        propertyName: "alignWidget",
+        propertyName: "labelPosition",
         helpText: "Sets the position of the field",
         label: "Position",
         controlType: "ICON_TABS",
-        defaultValue: "LEFT",
+        defaultValue: LabelPosition.Left,
         fullWidth: true,
         isBindProperty: true,
         isTriggerProperty: false,
         options: [
           {
             label: "Left",
-            value: "LEFT",
+            value: LabelPosition.Left,
           },
           {
             label: "Right",
-            value: "RIGHT",
+            value:  LabelPosition.Right,
           },
         ],
         hidden: (...args: HiddenFnParams) =>