fix:JSONForm > Switch Field: label position has no effect, label wrap…

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

@@ -0,0 +1,57 @@
+import {
+  agHelper,
+  draggableWidgets,
+  entityExplorer,
+  propPane,
+} from "../../../../../support/Objects/ObjectsCore";
+
+const commonlocators = require("../../../../../locators/commonlocators.json");
+const widgetsPage = require("../../../../../locators/Widgets.json");
+
+// this spec will have a json form with two textinput fields  and one is updated to switch field
+// We will check the position property by clicking on the left and right position buttons
+// here only alignment changes and the fields order in the dom changes so no assertions were added
+
+describe(
+  "JSON Form Widget Custom Field",
+  { tags: ["@tag.Widget", "@tag.JSONForm"] },
+  () => {
+    const schema = {
+      name: "John",
+      education: "1",
+    };
+
+    it("verifies the label position and alignment", () => {
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.JSONFORM, 300, 100);
+      propPane.EnterJSContext(
+        "sourcedata",
+        JSON.stringify(schema),
+        true,
+        false,
+      );
+      propPane.ChangeJsonFormFieldType("Education", "Switch");
+      agHelper.AssertClassExists(
+        widgetsPage.switchlabel,
+        widgetsPage.switchAlignRight,
+      );
+      agHelper
+        .GetNClick(commonlocators.optionposition)
+        .last()
+        .click({ force: true });
+      agHelper.GetNClick(widgetsPage.rightAlign).first().click({ force: true });
+      agHelper.AssertClassExists(
+        widgetsPage.switchlabel,
+        widgetsPage.switchAlignLeft,
+      );
+      agHelper
+        .GetNClick(commonlocators.optionpositionL)
+        .last()
+        .click({ force: true });
+      agHelper.AssertClassExists(
+        widgetsPage.switchlabel,
+        widgetsPage.switchAlignRight,
+      );
+      propPane.NavigateBackToPropertyPane();
+    });
+  },
+);

app/client/cypress/locators/Widgets.json

@@ -227,6 +227,9 @@
   "codeScannerNewScanButton": "//*[text()='Scan Code']/parent::button",
   "codeScannerClose": ".code-scanner-close",
   "codeScannerModal": ".code-scanner-content",
+  "switchlabel": "label.bp3-switch",
+  "switchAlignRight": "bp3-align-right",
+  "switchAlignLeft": "bp3-align-left",
   "showResult": ".t--property-control-showresult input[type='checkbox']",
   "infiniteLoading": ".t--property-control-infiniteloading input[type='checkbox']",
   "counterclockwise": ".t--property-control-counterclockwise input[type='checkbox']",

app/client/packages/dsl/src/migrate/index.ts

@@ -90,10 +90,11 @@ import { migrateDefaultValuesForCustomEChart } from "./migrations/085-migrate-de
 import { migrateTableServerSideFiltering } from "./migrations/086-migrate-table-server-side-filtering";
 import { migrateChartwidgetCustomEchartConfig } from "./migrations/087-migrate-chart-widget-customechartdata";
 import { migrateCustomWidgetDynamicHeight } from "./migrations/088-migrate-custom-widget-dynamic-height";
+import { migrateJsonFormWidgetLabelPositonAndAlignment } from "./migrations/090-migrate-jsonformwidget-labelposition-and-alignment";
 import { migrateTableWidgetV2CurrentRowInValidationsBinding } from "./migrations/089-migrage-table-widget-v2-currentRow-binding";
 import type { DSLWidget } from "./types";
 
-export const LATEST_DSL_VERSION = 90;
+export const LATEST_DSL_VERSION = 91;
 
 export const calculateDynamicHeight = () => {
   const DEFAULT_GRID_ROW_HEIGHT = 10;
@@ -601,6 +602,12 @@ const migrateVersionedDSL = (currentDSL: DSLWidget, newPage = false) => {
     currentDSL.version = LATEST_DSL_VERSION;
   }
 
+  if (currentDSL.version === 90) {
+    currentDSL = migrateJsonFormWidgetLabelPositonAndAlignment(currentDSL);
+    currentDSL.version = LATEST_DSL_VERSION;
+  }
+
+
   return currentDSL;
 };
 

app/client/packages/dsl/src/migrate/migrations/090-migrate-jsonformwidget-labelposition-and-alignment.ts

@@ -0,0 +1,47 @@
+import type { DSLWidget, WidgetProps } from "../types";
+import { traverseDSLAndMigrate } from "../utils";
+
+export const migrateJsonFormWidgetLabelPositonAndAlignment = (
+  currentDSL: DSLWidget,
+) => {
+  return traverseDSLAndMigrate(currentDSL, (widget: WidgetProps) => {
+    if (widget.type == "JSON_FORM_WIDGET") {
+      const jsonFormWidgetProps = widget;
+      Object.keys(jsonFormWidgetProps.schema).forEach((key) => {
+        const field = jsonFormWidgetProps.schema[key];
+        if (field.children) {
+          Object.keys(field.children).forEach((childKey) => {
+            const childField = field.children[childKey];
+
+            if (
+              childField.fieldType === "Switch" &&
+              childField.alignWidget === "RIGHT"
+            ) {
+              childField.alignWidget = "LEFT";
+            }
+
+            if (
+              childField.fieldType === "Checkbox" &&
+              childField.alignWidget === "LEFT"
+            ) {
+              field.children[childKey] = {
+                ...childField,
+                labelPosition: "Right",
+              };
+            }
+            if (
+              childField.fieldType === "Checkbox" &&
+              childField.alignWidget === "RIGHT"
+            ) {
+              childField.alignWidget = "LEFT";
+              field.children[childKey] = {
+                ...childField,
+                labelPosition: "Left",
+              };
+            }
+          });
+        }
+      });
+    }
+  });
+};

app/client/packages/dsl/src/migrate/tests/DSLMigration.test.ts

@@ -90,6 +90,7 @@ import * as m86 from "../migrations/086-migrate-table-server-side-filtering";
 import * as m87 from "../migrations/087-migrate-chart-widget-customechartdata";
 import * as m88 from "../migrations/088-migrate-custom-widget-dynamic-height";
 import * as m89 from "../migrations/089-migrage-table-widget-v2-currentRow-binding";
+import * as m90 from "../migrations/090-migrate-jsonformwidget-labelposition-and-alignment";
 
 interface Migration {
   functionLookup: {
@@ -930,6 +931,15 @@ const migrations: Migration[] = [
     ],
     version: 89,
   },
+  {
+    functionLookup: [
+      {
+        moduleObj: m90,
+        functionName: "migrateJsonFormWidgetLabelPositonAndAlignment",
+      },
+    ],
+    version: 90,
+  },
 ];
 
 const mockFnObj: Record<number, any> = {};