From bf7cc7968e4999bfea2bfe0760268832fb6e3a24 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Tue, 18 Jun 2024 12:38:12 +0530 Subject: [PATCH 01/17] fix:JSONForm > Switch Field: label position has no effect, label wraps text unnecessarily #33793 --- .../JSONForm/JSONForm_EditSwitchFied_spec.js | 60 ++++++ .../jsonFormDslSwitchWidgetSourceData.json | 172 ++++++++++++++++++ .../JSONFormWidget/component/Field.tsx | 10 +- .../JSONFormWidget/component/FieldLabel.tsx | 3 +- .../JSONFormWidget/fields/SwitchField.tsx | 14 +- .../propertyConfig/properties/switch.ts | 9 +- 6 files changed, 257 insertions(+), 11 deletions(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js create mode 100644 app/client/cypress/fixtures/jsonFormDslSwitchWidgetSourceData.json diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js new file mode 100644 index 000000000000..6028d5bdbbe4 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js @@ -0,0 +1,60 @@ +import EditorNavigation, { + EntityType, + } from "../../../../../support/Pages/EditorNavigation"; + + const commonlocators = require("../../../../../locators/commonlocators.json"); + const jsonFormDslSwitchWidgetSourceData = require("../../../../../fixtures/jsonFormDslSwitchWidgetSourceData.json"); + import { ObjectsRegistry } from "../../../../../support/Objects/Registry"; + const locators = ObjectsRegistry.CommonLocators; + const { + deployMode, + propPane, + } = require("../../../../../support/Objects/ObjectsCore"); + + const fieldPrefix = ".t--jsonformfield"; + + 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(".t--add-column-btn") + .contains("Add new field") + .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.wait(200); + cy.get(commonlocators.optionpositionL).last().click({ force: true }); + cy.wait(200); + cy.closePropertyPane(); + + const sourceData = { + name: "John", + email: "john@example.com", + }; + + EditorNavigation.SelectEntityByName("JSONForm1", EntityType.Widget); + propPane.NavigateBackToPropertyPane(); + propPane.EnterJSContext("Source data", JSON.stringify(sourceData), true); + + cy.get(`${fieldPrefix}-name label`).contains("Name"); + cy.get(`${fieldPrefix}-name input`).should("have.value", "John"); + }); + }, + ); \ No newline at end of file diff --git a/app/client/cypress/fixtures/jsonFormDslSwitchWidgetSourceData.json b/app/client/cypress/fixtures/jsonFormDslSwitchWidgetSourceData.json new file mode 100644 index 000000000000..e190871cf97f --- /dev/null +++ b/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": "john@example.com", + "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": "john@example.com" + }, + "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": [] + } + ] + } + } \ No newline at end of file diff --git a/app/client/src/widgets/JSONFormWidget/component/Field.tsx b/app/client/src/widgets/JSONFormWidget/component/Field.tsx index 6718ab45e3ca..21d9032aad26 100644 --- a/app/client/src/widgets/JSONFormWidget/component/Field.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/Field.tsx @@ -23,7 +23,7 @@ type FieldProps = React.PropsWithChildren< >; interface StyledWrapperProps { - direction: "row" | "column"; + direction: "row" | "column" | "row-reverse" } const StyledWrapper = styled.div` @@ -66,7 +66,13 @@ function Field({ } }, [defaultValue, setValue]); - const direction = inlineLabel ? "row" : "column"; + const direction: "row" | "column" | "row-reverse" = fieldClassName.includes( + "switchfield", + ) + ? inlineLabel + ? "row" + : "row-reverse" + : "column"; return ( ` font-weight: ${({ fontWeight }) => fontWeight}; font-style: ${({ fontStyle }) => fontStyle}; text-decoration: ${({ textDecoration }) => textDecoration}; + width: max-content; `; const ToolTipIcon = styled(IconWrapper)` diff --git a/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx b/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx index d15e345e3d37..c4775e62b61a 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx +++ b/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; @@ -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({ From ea3361c0173e32e432a96c12db2a76b4dd2290ee Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Tue, 18 Jun 2024 18:11:22 +0530 Subject: [PATCH 02/17] fix:add assertions for label position --- .../Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js index 6028d5bdbbe4..8f18dfd55be4 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js @@ -39,9 +39,11 @@ import EditorNavigation, { // check for the position alignment cy.get(commonlocators.optionposition).last().click({ force: true }); - cy.wait(200); + cy.get('.t--jsonformfield-customField1.switch') + .should('have.attr', 'direction', 'row-reverse'); cy.get(commonlocators.optionpositionL).last().click({ force: true }); - cy.wait(200); + cy.get('.t--jsonformfield-customField1.switch') + .should('have.attr', 'direction', 'row'); cy.closePropertyPane(); const sourceData = { From f3ab0fa12ba24d8e5b68773ff04f70d4ddf766f4 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Fri, 12 Jul 2024 17:55:39 +0530 Subject: [PATCH 03/17] fix:changes in cypress testing for switchfield spec in jsonformwidget --- .../JSONForm/JSONForm_EditSwitchFied_spec.js | 122 +++++++++--------- .../cypress/locators/commonlocators.json | 4 +- 2 files changed, 65 insertions(+), 61 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js index 8f18dfd55be4..58c3d6680e6b 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js @@ -1,62 +1,64 @@ import EditorNavigation, { - EntityType, - } from "../../../../../support/Pages/EditorNavigation"; - - const commonlocators = require("../../../../../locators/commonlocators.json"); - const jsonFormDslSwitchWidgetSourceData = require("../../../../../fixtures/jsonFormDslSwitchWidgetSourceData.json"); - import { ObjectsRegistry } from "../../../../../support/Objects/Registry"; - const locators = ObjectsRegistry.CommonLocators; - const { - deployMode, - propPane, - } = require("../../../../../support/Objects/ObjectsCore"); - - const fieldPrefix = ".t--jsonformfield"; - - 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(".t--add-column-btn") - .contains("Add new field") - .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('.t--jsonformfield-customField1.switch') - .should('have.attr', 'direction', 'row-reverse'); - cy.get(commonlocators.optionpositionL).last().click({ force: true }); - cy.get('.t--jsonformfield-customField1.switch') - .should('have.attr', 'direction', 'row'); - cy.closePropertyPane(); - - const sourceData = { - name: "John", - email: "john@example.com", - }; - - EditorNavigation.SelectEntityByName("JSONForm1", EntityType.Widget); - propPane.NavigateBackToPropertyPane(); - propPane.EnterJSContext("Source data", JSON.stringify(sourceData), true); - - cy.get(`${fieldPrefix}-name label`).contains("Name"); - cy.get(`${fieldPrefix}-name input`).should("have.value", "John"); + 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, }); - }, - ); \ No newline at end of file + + 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: "john@example.com", + }; + + 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", + ); + }); + }, +); diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index cd6f50d6e657..64f694ef1ac9 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -233,5 +233,7 @@ "discard": "button:contains('Discard')", "heightProperty": ".rc-select-single input", "heightPropertyOption": ".rc-select-item-option-content span", - "filePickerMaxNoOfFiles": ".t--property-control-maxno\\.offiles .CodeMirror-code" + "filePickerMaxNoOfFiles": ".t--property-control-maxno\\.offiles .CodeMirror-code", + "jsonformFieldCustomFieldSwitch": ".t--jsonformfield-customField1.switchfield", + "jsonFieldPrefix": ".t--jsonformfield-name" } From 36d870d5f67d74139149a3cdf6c1f9747c8e6960 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Tue, 16 Jul 2024 11:41:12 +0530 Subject: [PATCH 04/17] fix:solve merge conflicts --- app/client/cypress/locators/commonlocators.json | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index 64f694ef1ac9..d78df6fc7121 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -148,7 +148,7 @@ "allowCurrencyChange": ".t--property-control-allowcurrencychange input[type='checkbox']", "inputCurrencyChangeType": ".t--input-currency-change", "inputCountryCodeChangeType": ".t--input-country-code-change", - "viewerPage": ".t--app-viewer-page", + "viewerPage": "[data-testid='t--app-viewer-page']", "dropDownOptSelected": "//span[@type='p1']", "generalChevran": ".t--property-pane-section-collapse-general .t--chevron-icon", "generalSection": ".t--property-pane-section-general", @@ -235,5 +235,12 @@ "heightPropertyOption": ".rc-select-item-option-content span", "filePickerMaxNoOfFiles": ".t--property-control-maxno\\.offiles .CodeMirror-code", "jsonformFieldCustomFieldSwitch": ".t--jsonformfield-customField1.switchfield", - "jsonFieldPrefix": ".t--jsonformfield-name" + "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" } From a62edd386f20a5048aa299ac15b425b9aea1b45d Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Tue, 16 Jul 2024 11:43:32 +0530 Subject: [PATCH 05/17] Revert "fix:reverted the chnages" This reverts commit 36d870d5f67d74139149a3cdf6c1f9747c8e6960. --- app/client/cypress/locators/commonlocators.json | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index d78df6fc7121..64f694ef1ac9 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -148,7 +148,7 @@ "allowCurrencyChange": ".t--property-control-allowcurrencychange input[type='checkbox']", "inputCurrencyChangeType": ".t--input-currency-change", "inputCountryCodeChangeType": ".t--input-country-code-change", - "viewerPage": "[data-testid='t--app-viewer-page']", + "viewerPage": ".t--app-viewer-page", "dropDownOptSelected": "//span[@type='p1']", "generalChevran": ".t--property-pane-section-collapse-general .t--chevron-icon", "generalSection": ".t--property-pane-section-general", @@ -235,12 +235,5 @@ "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" + "jsonFieldPrefix": ".t--jsonformfield-name" } From 0bb8ff62dc0e7f6156ffb568cec3ddad35b8adbe Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Tue, 16 Jul 2024 13:58:37 +0530 Subject: [PATCH 06/17] fix:change spec to .ts format --- .../JSONForm/JSONForm_EditSwitchFied_spec.js | 64 ------- .../JSONForm/JSONForm_EditSwitchFied_spec.ts | 52 ++++++ .../jsonFormDslSwitchWidgetSourceData.json | 172 ------------------ .../cypress/locators/commonlocators.json | 3 +- 4 files changed, 53 insertions(+), 238 deletions(-) delete mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts delete mode 100644 app/client/cypress/fixtures/jsonFormDslSwitchWidgetSourceData.json diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js deleted file mode 100644 index 58c3d6680e6b..000000000000 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.js +++ /dev/null @@ -1,64 +0,0 @@ -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: "john@example.com", - }; - - 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", - ); - }); - }, -); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts new file mode 100644 index 000000000000..1be5e6b3a9dd --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts @@ -0,0 +1,52 @@ +import { + agHelper, + draggableWidgets, + entityExplorer, +} from "../../../../../support/Objects/ObjectsCore"; + +const commonlocators = require("../../../../../locators/commonlocators.json"); +const { propPane } = require("../../../../../support/Objects/ObjectsCore"); + +// 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 +describe( + "JSON Form Widget Custom Field", + { tags: ["@tag.Widget", "@tag.JSONForm"] }, + () => { + const schema = { + name: "John", + education: "1", + }; + + it("uses the custom field when the accessor matches", () => { + entityExplorer.DragDropWidgetNVerify(draggableWidgets.JSONFORM, 300, 100); + propPane.EnterJSContext( + "sourcedata", + JSON.stringify(schema), + true, + false, + ); + propPane.ChangeJsonFormFieldType("Education", "Switch"); + + agHelper + .GetNClick(commonlocators.optionposition) + .last() + .click({ force: true }); + agHelper.AssertAttribute( + commonlocators.jsonformFieldEducationFieldSwitch, + "direction", + "row-reverse", + ); + agHelper + .GetNClick(commonlocators.optionpositionL) + .last() + .click({ force: true }); + agHelper.AssertAttribute( + commonlocators.jsonformFieldEducationFieldSwitch, + "direction", + "row", + ); + propPane.NavigateBackToPropertyPane(); + }); + }, +); diff --git a/app/client/cypress/fixtures/jsonFormDslSwitchWidgetSourceData.json b/app/client/cypress/fixtures/jsonFormDslSwitchWidgetSourceData.json deleted file mode 100644 index e190871cf97f..000000000000 --- a/app/client/cypress/fixtures/jsonFormDslSwitchWidgetSourceData.json +++ /dev/null @@ -1,172 +0,0 @@ -{ - "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": "john@example.com", - "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": "john@example.com" - }, - "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": [] - } - ] - } - } \ No newline at end of file diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index 64f694ef1ac9..c2af6a851d47 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -234,6 +234,5 @@ "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" + "jsonformFieldEducationFieldSwitch": ".t--jsonformfield-education.switchfield" } From a71c61f784c7d93cf5473ea407cbbd8bffab3644 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Tue, 16 Jul 2024 23:33:07 +0530 Subject: [PATCH 07/17] fix:functionality issues for switch field --- .../JSONFormWidget/component/FieldLabel.tsx | 1 - .../src/widgets/SwitchWidget/component/index.tsx | 15 +++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx index 5d90585f5745..fa4b46dd1926 100644 --- a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx @@ -89,7 +89,6 @@ const StyledLabelText = styled.p` font-weight: ${({ fontWeight }) => fontWeight}; font-style: ${({ fontStyle }) => fontStyle}; text-decoration: ${({ textDecoration }) => textDecoration}; - width: max-content; `; const ToolTipIcon = styled(IconWrapper)` diff --git a/app/client/src/widgets/SwitchWidget/component/index.tsx b/app/client/src/widgets/SwitchWidget/component/index.tsx index 3b515c903177..04616ac1dbd1 100644 --- a/app/client/src/widgets/SwitchWidget/component/index.tsx +++ b/app/client/src/widgets/SwitchWidget/component/index.tsx @@ -30,6 +30,7 @@ const SwitchComponentContainer = styled.div<{ accentColor: string; minHeight?: number; width?: string; + labelPosition?:LabelPosition }>` display: flex; flex-direction: row; @@ -39,7 +40,17 @@ const SwitchComponentContainer = styled.div<{ ${({ minHeight }) => ` ${minHeight ? `min-height: ${minHeight}px;` : undefined}`}; - width: 100%; + ${({ labelPosition }) => { + switch (labelPosition) { + case LabelPosition.Left: + return `margin-left: auto;`; + case LabelPosition.Right: + return `margin-right: auto;`; + default: + return ""; + } + }}; + ${BlueprintControlTransform} `; @@ -127,7 +138,7 @@ function SwitchComponent({ labelPosition === LabelPosition.Right ? "left" : "right"; return ( - + Date: Thu, 18 Jul 2024 13:55:52 +0530 Subject: [PATCH 08/17] fix:functionality issues in switch widget in json form --- .../JSONForm/JSONForm_EditSwitchFied_spec.ts | 15 +++------------ app/client/cypress/locators/commonlocators.json | 3 +-- .../widgets/JSONFormWidget/component/Field.tsx | 12 +++--------- .../JSONFormWidget/component/FieldLabel.tsx | 10 +++++++--- .../JSONFormWidget/fields/SwitchField.tsx | 17 ++++++----------- .../widget/propertyConfig/properties/switch.ts | 11 +++++------ .../widgets/SwitchWidget/component/index.tsx | 12 ------------ 7 files changed, 25 insertions(+), 55 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts index 1be5e6b3a9dd..4f1f1224c69a 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts @@ -9,6 +9,8 @@ const { propPane } = require("../../../../../support/Objects/ObjectsCore"); // 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"] }, @@ -27,26 +29,15 @@ describe( false, ); propPane.ChangeJsonFormFieldType("Education", "Switch"); - agHelper .GetNClick(commonlocators.optionposition) .last() .click({ force: true }); - agHelper.AssertAttribute( - commonlocators.jsonformFieldEducationFieldSwitch, - "direction", - "row-reverse", - ); agHelper .GetNClick(commonlocators.optionpositionL) .last() .click({ force: true }); - agHelper.AssertAttribute( - commonlocators.jsonformFieldEducationFieldSwitch, - "direction", - "row", - ); propPane.NavigateBackToPropertyPane(); }); }, -); +); \ No newline at end of file diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index c2af6a851d47..cd6f50d6e657 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -233,6 +233,5 @@ "discard": "button:contains('Discard')", "heightProperty": ".rc-select-single input", "heightPropertyOption": ".rc-select-item-option-content span", - "filePickerMaxNoOfFiles": ".t--property-control-maxno\\.offiles .CodeMirror-code", - "jsonformFieldEducationFieldSwitch": ".t--jsonformfield-education.switchfield" + "filePickerMaxNoOfFiles": ".t--property-control-maxno\\.offiles .CodeMirror-code" } diff --git a/app/client/src/widgets/JSONFormWidget/component/Field.tsx b/app/client/src/widgets/JSONFormWidget/component/Field.tsx index 21d9032aad26..2b12554f78a3 100644 --- a/app/client/src/widgets/JSONFormWidget/component/Field.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/Field.tsx @@ -23,7 +23,7 @@ type FieldProps = React.PropsWithChildren< >; interface StyledWrapperProps { - direction: "row" | "column" | "row-reverse" + direction: "row" | "column"; } const StyledWrapper = styled.div` @@ -66,13 +66,7 @@ function Field({ } }, [defaultValue, setValue]); - const direction: "row" | "column" | "row-reverse" = fieldClassName.includes( - "switchfield", - ) - ? inlineLabel - ? "row" - : "row-reverse" - : "column"; + const direction = inlineLabel ? "row" : "column"; return ( ({ ); } -export default Field; +export default Field; \ No newline at end of file diff --git a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx index fa4b46dd1926..ad3fa9988247 100644 --- a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx @@ -31,7 +31,7 @@ export interface LabelStyles { export type FieldLabelProps = PropsWithChildren< LabelStyles & { - direction?: "row" | "column" | "row-reverse"; + direction?: "row" | "column"; isRequiredField?: boolean; label: string; tooltip?: string; @@ -45,6 +45,7 @@ interface StyledLabelTextWrapperProps { interface StyledLabelProps { direction?: FieldLabelProps["direction"]; + alignField?:AlignWidget } const LABEL_TEXT_WRAPPER_MARGIN_BOTTOM = 4; @@ -62,6 +63,9 @@ const StyledLabel = styled.label` align-items: flex-start; display: flex; flex-direction: ${({ direction }) => direction}; + column-gap: ${({ direction, alignField }) => + `${direction === "row" && alignField === "RIGHT" ? '0px' : '24px'} +`} `; const StyledLabelTextWrapper = styled.div` @@ -142,7 +146,7 @@ function FieldLabel({ const align = direction === "row" ? alignField : "RIGHT"; return ( - + {align === "LEFT" && children} @@ -167,4 +171,4 @@ function FieldLabel({ ); } -export default FieldLabel; +export default FieldLabel; \ No newline at end of file diff --git a/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx b/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx index c4775e62b61a..272faab84546 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx +++ b/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx @@ -11,7 +11,7 @@ import type { FieldComponentBaseProps, FieldEventProps, } from "../constants"; -import { ActionUpdateDependency, FieldType } from "../constants"; +import { ActionUpdateDependency } from "../constants"; import SwitchComponent from "widgets/SwitchWidget/component"; import { EventType } from "constants/AppsmithActionConstants/ActionConstants"; import { Colors } from "constants/Colors"; @@ -23,7 +23,6 @@ type SwitchComponentOwnProps = FieldComponentBaseProps & alignWidget: AlignWidget; accentColor?: string; onChange?: string; - labelPosition: LabelPosition; }; type SwitchFieldProps = BaseFieldComponentProps; @@ -37,7 +36,6 @@ const COMPONENT_DEFAULT_VALUES: SwitchComponentOwnProps = { isVisible: true, labelTextSize: BASE_LABEL_TEXT_SIZE, label: "", - labelPosition: LabelPosition.Left, }; const isValid = (value: boolean, schemaItem: SwitchFieldProps["schemaItem"]) => @@ -101,7 +99,7 @@ function SwitchField({ isLoading={false} isSwitchedOn={value ?? false} label="" - labelPosition={schemaItem.labelPosition} + labelPosition={LabelPosition.Left} onChange={onSwitchChange} widgetId="" /> @@ -110,7 +108,6 @@ function SwitchField({ schemaItem.alignWidget, schemaItem.accentColor, schemaItem.isDisabled, - schemaItem.labelPosition, onSwitchChange, value, ], @@ -120,11 +117,8 @@ function SwitchField({ {fieldComponent} @@ -140,4 +135,4 @@ function SwitchField({ SwitchField.componentDefaultValues = COMPONENT_DEFAULT_VALUES; -export default SwitchField; +export default SwitchField; \ No newline at end of file diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts index b636ab226a6d..84cb0e6ce8d7 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts @@ -2,7 +2,6 @@ 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: { @@ -24,22 +23,22 @@ const PROPERTIES = { ], label: [ { - propertyName: "labelPosition", + propertyName: "alignWidget", helpText: "Sets the position of the field", label: "Position", controlType: "ICON_TABS", - defaultValue: LabelPosition.Left, + defaultValue: "LEFT", fullWidth: true, isBindProperty: true, isTriggerProperty: false, options: [ { label: "Left", - value: LabelPosition.Left, + value: "LEFT", }, { label: "Right", - value: LabelPosition.Right, + value: "RIGHT", }, ], hidden: (...args: HiddenFnParams) => @@ -65,4 +64,4 @@ const PROPERTIES = { }, }; -export default PROPERTIES; +export default PROPERTIES; \ No newline at end of file diff --git a/app/client/src/widgets/SwitchWidget/component/index.tsx b/app/client/src/widgets/SwitchWidget/component/index.tsx index 04616ac1dbd1..afc3eaf90fe2 100644 --- a/app/client/src/widgets/SwitchWidget/component/index.tsx +++ b/app/client/src/widgets/SwitchWidget/component/index.tsx @@ -40,18 +40,6 @@ const SwitchComponentContainer = styled.div<{ ${({ minHeight }) => ` ${minHeight ? `min-height: ${minHeight}px;` : undefined}`}; - ${({ labelPosition }) => { - switch (labelPosition) { - case LabelPosition.Left: - return `margin-left: auto;`; - case LabelPosition.Right: - return `margin-right: auto;`; - default: - return ""; - } - }}; - - ${BlueprintControlTransform} `; From fa0bba4f877289789fc26bf2bc5712633ab42b12 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Tue, 23 Jul 2024 18:39:13 +0530 Subject: [PATCH 09/17] fix:switchfield and checkbox in jsonform similar to default widgets --- .../JSONFormWidget/component/Field.tsx | 8 ++- .../JSONFormWidget/component/FieldLabel.tsx | 65 ++++++++++++++++--- .../JSONFormWidget/fields/CheckboxField.tsx | 5 +- .../JSONFormWidget/fields/SwitchField.tsx | 8 ++- .../propertyConfig/properties/checkbox.ts | 38 ++++++++--- .../propertyConfig/properties/switch.ts | 34 ++++++++-- 6 files changed, 127 insertions(+), 31 deletions(-) diff --git a/app/client/src/widgets/JSONFormWidget/component/Field.tsx b/app/client/src/widgets/JSONFormWidget/component/Field.tsx index 2b12554f78a3..974e3013d8fe 100644 --- a/app/client/src/widgets/JSONFormWidget/component/Field.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/Field.tsx @@ -39,7 +39,6 @@ function Field({ alignField, children, defaultValue, - fieldClassName, hideLabel = false, inlineLabel = false, isRequiredField, @@ -49,6 +48,7 @@ function Field({ labelTextSize, name, tooltip, + labelPosition }: FieldProps) { const refDefaultValue = useRef(); const { setValue } = useFormContext(); @@ -66,11 +66,12 @@ function Field({ } }, [defaultValue, setValue]); + const direction = inlineLabel ? "row" : "column"; return ( {hideLabel ? ( @@ -85,6 +86,7 @@ function Field({ labelTextColor={labelTextColor} labelTextSize={labelTextSize} tooltip={tooltip} + labelPosition={labelPosition} > {children} @@ -93,4 +95,4 @@ function Field({ ); } -export default Field; \ No newline at end of file +export default Field; diff --git a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx index ad3fa9988247..1606bc1e2fe0 100644 --- a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx @@ -9,6 +9,7 @@ import { FontStyleTypes } from "constants/WidgetConstants"; import { THEMEING_TEXT_SIZES } from "constants/ThemeConstants"; import type { AlignWidget } from "WidgetProvider/constants"; import { importSvg } from "design-system-old"; +import { LabelPosition } from "components/constants"; const HelpIcon = importSvg(async () => import("assets/icons/control/help.svg")); @@ -36,16 +37,18 @@ export type FieldLabelProps = PropsWithChildren< label: string; tooltip?: string; alignField?: AlignField; + labelPosition?:LabelPosition; } >; interface StyledLabelTextWrapperProps { direction: FieldLabelProps["direction"]; + labelPosition?:LabelPosition; + alignField?:AlignWidget; } interface StyledLabelProps { direction?: FieldLabelProps["direction"]; - alignField?:AlignWidget } const LABEL_TEXT_WRAPPER_MARGIN_BOTTOM = 4; @@ -63,11 +66,9 @@ const StyledLabel = styled.label` align-items: flex-start; display: flex; flex-direction: ${({ direction }) => direction}; - column-gap: ${({ direction, alignField }) => - `${direction === "row" && alignField === "RIGHT" ? '0px' : '24px'} -`} `; + const StyledLabelTextWrapper = styled.div` align-items: center; display: flex; @@ -79,6 +80,24 @@ const StyledLabelTextWrapper = styled.div` } `; + +const InlineStyledLabelTextWrapper = styled.div` + align-items: center; + display: flex; + margin-bottom: ${({ direction }) => + direction === "row" ? 0 : LABEL_TEXT_WRAPPER_MARGIN_BOTTOM}px; + + & .${TOOLTIP_CLASSNAME} { + line-height: 0; + } + ${({ labelPosition, alignField }) => + labelPosition === LabelPosition.Left && alignField === "LEFT" + && "width: 100%;" } + ${({ labelPosition, alignField }) => + alignField === "RIGHT" && (labelPosition === LabelPosition.Right || labelPosition === LabelPosition.Left) + && "margin-left: auto;"} +`; + const StyledRequiredMarker = styled.div` color: ${Colors.CRIMSON}; margin-right: ${DEFAULT_GAP}px; @@ -124,6 +143,7 @@ function FieldLabel({ labelTextColor = "", labelTextSize, tooltip, + labelPosition = LabelPosition.Left }: FieldLabelProps) { const labelStyleProps = useMemo(() => { // labelStyles contains styles as comma separated values eg. "BOLD,UNDERLINE" @@ -143,11 +163,11 @@ function FieldLabel({ * If field and label are to be displayed horizontally then we consider the alignField * prop else we always want to have label then field in case of vertical alignment (direction === "column") */ - const align = direction === "row" ? alignField : "RIGHT"; + if (direction !== "row") + { return ( - - {align === "LEFT" && children} + {label} @@ -166,9 +186,36 @@ function FieldLabel({ )} - {align === "RIGHT" && children} + {children} ); -} + } + else { + return ( + + {labelPosition === LabelPosition.Right && children} + + + {label} + + {isRequiredField && *} + {tooltip && ( + + + + + + )} + + {labelPosition === LabelPosition.Left && children} + + ); + } + } export default FieldLabel; \ No newline at end of file diff --git a/app/client/src/widgets/JSONFormWidget/fields/CheckboxField.tsx b/app/client/src/widgets/JSONFormWidget/fields/CheckboxField.tsx index 0dd0564744b7..be7188589a8b 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/CheckboxField.tsx +++ b/app/client/src/widgets/JSONFormWidget/fields/CheckboxField.tsx @@ -26,6 +26,7 @@ type CheckboxComponentProps = FieldComponentBaseProps & accentColor?: string; borderRadius?: string; boxShadow?: string; + labelPosition:LabelPosition }; type CheckboxFieldProps = BaseFieldComponentProps; @@ -45,6 +46,7 @@ const COMPONENT_DEFAULT_VALUES: CheckboxComponentProps = { labelTextSize: BASE_LABEL_TEXT_SIZE, isVisible: true, label: "", + labelPosition:LabelPosition.Left }; const isValid = ( @@ -114,7 +116,7 @@ function CheckboxField({ isRequired={schemaItem.isRequired} isValid={isDirty ? isValueValid : true} label="" - labelPosition={LabelPosition.Left} + labelPosition={schemaItem.labelPosition} noContainerPadding onCheckChange={onCheckChange} widgetId="" @@ -138,6 +140,7 @@ function CheckboxField({ labelTextSize={schemaItem.labelTextSize} name={name} tooltip={schemaItem.tooltip} + labelPosition={schemaItem.labelPosition} > {fieldComponent} diff --git a/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx b/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx index 272faab84546..993ec4e7af15 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx +++ b/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; @@ -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="" /> @@ -109,6 +111,7 @@ function SwitchField({ schemaItem.accentColor, schemaItem.isDisabled, onSwitchChange, + schemaItem.labelPosition, value, ], ); @@ -127,6 +130,7 @@ function SwitchField({ name={name} tooltip={schemaItem.tooltip} alignField={schemaItem.alignWidget} + labelPosition={schemaItem.labelPosition} > {fieldComponent} diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts index e0a0ea3c72ad..6ae24da0ba0c 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts @@ -2,6 +2,8 @@ import { ValidationTypes } from "constants/WidgetValidation"; import { FieldType } from "widgets/JSONFormWidget/constants"; import type { HiddenFnParams } from "../helper"; import { getSchemaItem, getAutocompleteProperties } from "../helper"; +import { AlignWidgetTypes } from "WidgetProvider/constants"; +import { LabelPosition } from "components/constants"; const PROPERTIES = { content: { @@ -38,24 +40,42 @@ const PROPERTIES = { ], label: [ { - propertyName: "alignWidget", - helpText: "Sets the Position of the field", + helpText: "Sets the label position of the widget", + propertyName: "labelPosition", label: "Position", controlType: "ICON_TABS", - defaultValue: "LEFT", fullWidth: true, + options: [ + { label: "Left", value: LabelPosition.Left }, + { label: "Right", value: LabelPosition.Right }, + ], + defaultValue: LabelPosition.Left, + isBindProperty: false, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + hidden: (...args: HiddenFnParams) => + getSchemaItem(...args).fieldTypeNotMatches(FieldType.CHECKBOX), + dependencies: ["schema"], + }, + { + propertyName: "alignWidget", + helpText: "Sets alignment of the widget", + label: "Alignment", + controlType: "LABEL_ALIGNMENT_OPTIONS", + isBindProperty: true, + isTriggerProperty: false, + fullWidth: false, options: [ { - label: "Left", - value: "LEFT", + startIcon: "align-left", + value: AlignWidgetTypes.LEFT, }, { - label: "Right", - value: "RIGHT", + startIcon: "align-right", + value: AlignWidgetTypes.RIGHT, }, ], - isBindProperty: true, - isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, hidden: (...args: HiddenFnParams) => getSchemaItem(...args).fieldTypeNotMatches(FieldType.CHECKBOX), dependencies: ["schema"], diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts index 84cb0e6ce8d7..df91b97eaae0 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts @@ -2,6 +2,8 @@ import { ValidationTypes } from "constants/WidgetValidation"; import { FieldType } from "widgets/JSONFormWidget/constants"; import type { HiddenFnParams } from "../helper"; import { getSchemaItem, getAutocompleteProperties } from "../helper"; +import { AlignWidgetTypes } from "WidgetProvider/constants"; +import { LabelPosition } from "components/constants"; const PROPERTIES = { content: { @@ -23,24 +25,42 @@ const PROPERTIES = { ], label: [ { - propertyName: "alignWidget", - helpText: "Sets the position of the field", + helpText: "Sets the label position of the widget", + propertyName: "labelPosition", label: "Position", controlType: "ICON_TABS", - defaultValue: "LEFT", fullWidth: true, + options: [ + { label: "Left", value: LabelPosition.Left }, + { label: "Right", value: LabelPosition.Right }, + ], + defaultValue: LabelPosition.Left, + isBindProperty: false, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + hidden: (...args: HiddenFnParams) => + getSchemaItem(...args).fieldTypeNotMatches(FieldType.SWITCH), + dependencies: ["schema"], + }, + { + propertyName: "alignWidget", + helpText: "Sets alignment of the widget", + label: "Alignment", + controlType: "LABEL_ALIGNMENT_OPTIONS", isBindProperty: true, isTriggerProperty: false, + fullWidth: false, options: [ { - label: "Left", - value: "LEFT", + startIcon: "align-left", + value: AlignWidgetTypes.LEFT, }, { - label: "Right", - value: "RIGHT", + startIcon: "align-right", + value: AlignWidgetTypes.RIGHT, }, ], + validation: { type: ValidationTypes.TEXT }, hidden: (...args: HiddenFnParams) => getSchemaItem(...args).fieldTypeNotMatches(FieldType.SWITCH), dependencies: ["schema"], From 530e1b060df3709ddc70b03c1a67f34f4e2f0c49 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Wed, 24 Jul 2024 18:51:41 +0530 Subject: [PATCH 10/17] fix:write jest cases and modify the cypress spec file --- .../JSONForm/JSONForm_EditSwitchFied_spec.ts | 12 +- app/client/cypress/locators/Widgets.json | 5 +- .../JSONFormWidget/component/Field.tsx | 3 +- .../JSONFormWidget/component/FieldLabel.tsx | 10 +- .../fields/switchField.test.tsx | 108 ++++++++++++++++++ .../propertyConfig/properties/checkbox.ts | 1 + .../propertyConfig/properties/switch.ts | 1 + 7 files changed, 131 insertions(+), 9 deletions(-) create mode 100644 app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts index 4f1f1224c69a..4f40989a7e34 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts @@ -2,10 +2,11 @@ import { agHelper, draggableWidgets, entityExplorer, + propPane } from "../../../../../support/Objects/ObjectsCore"; const commonlocators = require("../../../../../locators/commonlocators.json"); -const { propPane } = require("../../../../../support/Objects/ObjectsCore"); +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 @@ -20,7 +21,7 @@ describe( education: "1", }; - it("uses the custom field when the accessor matches", () => { + it("verifies the label position and alignment", () => { entityExplorer.DragDropWidgetNVerify(draggableWidgets.JSONFORM, 300, 100); propPane.EnterJSContext( "sourcedata", @@ -29,14 +30,21 @@ describe( 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(); }); }, diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index e44f23f3f22e..ce94cd1ba764 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/app/client/cypress/locators/Widgets.json @@ -226,5 +226,8 @@ "codeScannerScanButton": "//*[text()='Scan a QR/Barcode']/parent::button", "codeScannerNewScanButton": "//*[text()='Scan Code']/parent::button", "codeScannerClose": ".code-scanner-close", - "codeScannerModal": ".code-scanner-content" + "codeScannerModal": ".code-scanner-content", + "switchlabel": "label.bp3-switch", + "switchAlignRight": "bp3-align-right", + "switchAlignLeft": "bp3-align-left" } diff --git a/app/client/src/widgets/JSONFormWidget/component/Field.tsx b/app/client/src/widgets/JSONFormWidget/component/Field.tsx index 974e3013d8fe..063d2e8de32c 100644 --- a/app/client/src/widgets/JSONFormWidget/component/Field.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/Field.tsx @@ -39,6 +39,7 @@ function Field({ alignField, children, defaultValue, + fieldClassName, hideLabel = false, inlineLabel = false, isRequiredField, @@ -71,7 +72,7 @@ function Field({ return ( {hideLabel ? ( diff --git a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx index 1606bc1e2fe0..a807f3294d41 100644 --- a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx @@ -7,7 +7,7 @@ import { Colors } from "constants/Colors"; import { IconWrapper } from "constants/IconConstants"; import { FontStyleTypes } from "constants/WidgetConstants"; import { THEMEING_TEXT_SIZES } from "constants/ThemeConstants"; -import type { AlignWidget } from "WidgetProvider/constants"; +import { AlignWidgetTypes, type AlignWidget } from "WidgetProvider/constants"; import { importSvg } from "design-system-old"; import { LabelPosition } from "components/constants"; @@ -91,10 +91,10 @@ const InlineStyledLabelTextWrapper = styled.div` line-height: 0; } ${({ labelPosition, alignField }) => - labelPosition === LabelPosition.Left && alignField === "LEFT" + labelPosition === LabelPosition.Left && alignField === AlignWidgetTypes.LEFT && "width: 100%;" } ${({ labelPosition, alignField }) => - alignField === "RIGHT" && (labelPosition === LabelPosition.Right || labelPosition === LabelPosition.Left) + alignField === AlignWidgetTypes.RIGHT && (labelPosition === LabelPosition.Right || labelPosition === LabelPosition.Left) && "margin-left: auto;"} `; @@ -160,7 +160,7 @@ function FieldLabel({ }, [labelStyle, labelTextColor, labelTextSize]); /** - * If field and label are to be displayed horizontally then we consider the alignField + * If field and label are to be displayed horizontally then we consider based on the labelposition * prop else we always want to have label then field in case of vertical alignment (direction === "column") */ @@ -194,7 +194,7 @@ function FieldLabel({ return ( {labelPosition === LabelPosition.Right && children} - + {label} diff --git a/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx b/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx new file mode 100644 index 000000000000..36d180e53bf4 --- /dev/null +++ b/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx @@ -0,0 +1,108 @@ +import React from "react"; +import '@testing-library/jest-dom' +import { render, screen } from "@testing-library/react"; +import { useForm, FormProvider } from "react-hook-form"; +import SwitchField from "./SwitchField"; +import { FormContextProvider } from "../FormContext"; +import { ThemeProvider } from "styled-components"; +import { LabelPosition } from "components/constants"; +import { AlignWidgetTypes } from "WidgetProvider/constants"; + + +const mockExecuteAction = jest.fn(); + +const TestComponent = (props: any) => { + const methods = useForm({ + defaultValues: { + [props.name || "test-switch"]: props.passedDefaultValue || false, + }, + }); + + return ( + + + + + + + + ); +}; + +describe("SwitchField", () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it("renders the switch field with default props", () => { + render(); + expect(screen.getByText("Test Switch")).toBeInTheDocument(); + }); + + it("applies the correct label position and width for the switch widget", () => { + render(); + const labelElement = screen.getByTestId("inlinelabel"); + expect(labelElement).toHaveStyle("width: 100%"); + }); + it("applies the correct label position", async () => { + render(); + const labelElement = screen.getByTestId("inlinelabel"); + const switchComponent = screen.getByRole("checkbox"); + + const switchComponentPosition = switchComponent.compareDocumentPosition(labelElement); + expect(switchComponentPosition & Node.DOCUMENT_POSITION_FOLLOWING).toBe(Node.DOCUMENT_POSITION_FOLLOWING); + }); + it("applies the correct label position left and alignment right", () => { + render( + + ); + + const switchComponent = screen.getByRole("checkbox"); + const labelElement = screen.getByText("Test Switch"); + + const labelElementPosition = labelElement.compareDocumentPosition(switchComponent); + + expect(labelElementPosition & Node.DOCUMENT_POSITION_FOLLOWING).toBe(Node.DOCUMENT_POSITION_FOLLOWING); + }); + +}); diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts index 6ae24da0ba0c..cb92fc3c780e 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts @@ -65,6 +65,7 @@ const PROPERTIES = { isBindProperty: true, isTriggerProperty: false, fullWidth: false, + defaultValue:AlignWidgetTypes.LEFT, options: [ { startIcon: "align-left", diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts index df91b97eaae0..5a88c47bd0af 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts @@ -50,6 +50,7 @@ const PROPERTIES = { isBindProperty: true, isTriggerProperty: false, fullWidth: false, + defaultValue:AlignWidgetTypes.LEFT, options: [ { startIcon: "align-left", From a76c18b0f657edea4529715a77c9bbd5c0ca3102 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Tue, 30 Jul 2024 14:34:16 +0530 Subject: [PATCH 11/17] fix:write migration code for the new features --- app/client/packages/dsl/src/migrate/index.ts | 8 +- ...nformwidget-labelposition-and-alignment.ts | 48 +++++++ .../JSONFormWidget/component/FieldLabel.tsx | 136 ++++++++++-------- 3 files changed, 130 insertions(+), 62 deletions(-) create mode 100644 app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts diff --git a/app/client/packages/dsl/src/migrate/index.ts b/app/client/packages/dsl/src/migrate/index.ts index cdb810ee7b28..767733634798 100644 --- a/app/client/packages/dsl/src/migrate/index.ts +++ b/app/client/packages/dsl/src/migrate/index.ts @@ -90,9 +90,10 @@ 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/089-migrate-jsonformwidget-labelposition-and-alignment"; import type { DSLWidget } from "./types"; -export const LATEST_DSL_VERSION = 89; +export const LATEST_DSL_VERSION = 90; export const calculateDynamicHeight = () => { const DEFAULT_GRID_ROW_HEIGHT = 10; @@ -592,6 +593,11 @@ const migrateVersionedDSL = (currentDSL: DSLWidget, newPage = false) => { if (currentDSL.version === 88) { currentDSL = migrateCustomWidgetDynamicHeight(currentDSL); + currentDSL.version = 89; + } + + if (currentDSL.version === 89) { + currentDSL = migrateJsonFormWidgetLabelPositonAndAlignment(currentDSL); currentDSL.version = LATEST_DSL_VERSION; } diff --git a/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts b/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts new file mode 100644 index 000000000000..a174583307d5 --- /dev/null +++ b/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts @@ -0,0 +1,48 @@ +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") { + // console.log(`widget{{{{{{{{{{}}}}}}}}}}`,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: "Auto", + }; + } + }); + } + }); + } + }); +}; diff --git a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx index a807f3294d41..26aba503289d 100644 --- a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx @@ -37,14 +37,14 @@ export type FieldLabelProps = PropsWithChildren< label: string; tooltip?: string; alignField?: AlignField; - labelPosition?:LabelPosition; + labelPosition?: LabelPosition; } >; interface StyledLabelTextWrapperProps { direction: FieldLabelProps["direction"]; - labelPosition?:LabelPosition; - alignField?:AlignWidget; + labelPosition?: LabelPosition; + alignField?: AlignWidget; } interface StyledLabelProps { @@ -68,7 +68,6 @@ const StyledLabel = styled.label` flex-direction: ${({ direction }) => direction}; `; - const StyledLabelTextWrapper = styled.div` align-items: center; display: flex; @@ -80,7 +79,6 @@ const StyledLabelTextWrapper = styled.div` } `; - const InlineStyledLabelTextWrapper = styled.div` align-items: center; display: flex; @@ -90,12 +88,17 @@ const InlineStyledLabelTextWrapper = styled.div` & .${TOOLTIP_CLASSNAME} { line-height: 0; } - ${({ labelPosition, alignField }) => - labelPosition === LabelPosition.Left && alignField === AlignWidgetTypes.LEFT - && "width: 100%;" } - ${({ labelPosition, alignField }) => - alignField === AlignWidgetTypes.RIGHT && (labelPosition === LabelPosition.Right || labelPosition === LabelPosition.Left) - && "margin-left: auto;"} + ${({ labelPosition }) => + labelPosition === LabelPosition.Auto && "width: auto;"} + ${({ alignField, labelPosition }) => + labelPosition === LabelPosition.Left && + alignField === AlignWidgetTypes.LEFT && + "width: 100%;"} + ${({ alignField, labelPosition }) => + alignField === AlignWidgetTypes.RIGHT && + (labelPosition === LabelPosition.Right || + labelPosition === LabelPosition.Left) && + "margin-left: auto;"} `; const StyledRequiredMarker = styled.div` @@ -139,11 +142,11 @@ function FieldLabel({ direction = "column", isRequiredField = false, label, + labelPosition = LabelPosition.Left, labelStyle, labelTextColor = "", labelTextSize, tooltip, - labelPosition = LabelPosition.Left }: FieldLabelProps) { const labelStyleProps = useMemo(() => { // labelStyles contains styles as comma separated values eg. "BOLD,UNDERLINE" @@ -160,62 +163,73 @@ function FieldLabel({ }, [labelStyle, labelTextColor, labelTextSize]); /** - * If field and label are to be displayed horizontally then we consider based on the labelposition + * If field and label are to be displayed horizontally then we consider based on the labelposition * prop else we always want to have label then field in case of vertical alignment (direction === "column") */ - if (direction !== "row") - { - return ( - - - - {label} - - {isRequiredField && *} - {tooltip && ( - + + - - - - - )} - - {children} - - ); - } - else { + {label} + + {isRequiredField && *} + {tooltip && ( + + + + + + )} + + {children} + + ); + } else { return ( - + {labelPosition === LabelPosition.Right && children} - - - {label} - - {isRequiredField && *} - {tooltip && ( - + - - - - - )} - - {labelPosition === LabelPosition.Left && children} - + {label} + + {isRequiredField && *} + {tooltip && ( + + + + + + )} + + {(labelPosition === LabelPosition.Left || + labelPosition === LabelPosition.Auto) && + children} + ); } - } +} -export default FieldLabel; \ No newline at end of file +export default FieldLabel; From 721ed5b65671d485eabc65dadaae43b11a7a9f0e Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Wed, 31 Jul 2024 18:14:15 +0530 Subject: [PATCH 12/17] fix:made changes in migration code --- ...89-migrate-jsonformwidget-labelposition-and-alignment.ts | 3 +-- .../src/widgets/JSONFormWidget/component/FieldLabel.tsx | 6 +----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts b/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts index a174583307d5..e50f5cd37e01 100644 --- a/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts +++ b/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts @@ -6,7 +6,6 @@ export const migrateJsonFormWidgetLabelPositonAndAlignment = ( ) => { return traverseDSLAndMigrate(currentDSL, (widget: WidgetProps) => { if (widget.type == "JSON_FORM_WIDGET") { - // console.log(`widget{{{{{{{{{{}}}}}}}}}}`,widget) const jsonFormWidgetProps = widget; Object.keys(jsonFormWidgetProps.schema).forEach((key) => { const field = jsonFormWidgetProps.schema[key]; @@ -37,7 +36,7 @@ export const migrateJsonFormWidgetLabelPositonAndAlignment = ( childField.alignWidget = "LEFT"; field.children[childKey] = { ...childField, - labelPosition: "Auto", + labelPosition: "left", }; } }); diff --git a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx index 26aba503289d..f42a7e005262 100644 --- a/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/FieldLabel.tsx @@ -88,8 +88,6 @@ const InlineStyledLabelTextWrapper = styled.div` & .${TOOLTIP_CLASSNAME} { line-height: 0; } - ${({ labelPosition }) => - labelPosition === LabelPosition.Auto && "width: auto;"} ${({ alignField, labelPosition }) => labelPosition === LabelPosition.Left && alignField === AlignWidgetTypes.LEFT && @@ -224,9 +222,7 @@ function FieldLabel({ )} - {(labelPosition === LabelPosition.Left || - labelPosition === LabelPosition.Auto) && - children} + {labelPosition === LabelPosition.Left && children} ); } From 058715c142770242dad37fdfa00c6f9255131e18 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Wed, 31 Jul 2024 18:16:43 +0530 Subject: [PATCH 13/17] fix:made changes in migration code 1 --- .../089-migrate-jsonformwidget-labelposition-and-alignment.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts b/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts index e50f5cd37e01..3767c35d33d5 100644 --- a/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts +++ b/app/client/packages/dsl/src/migrate/migrations/089-migrate-jsonformwidget-labelposition-and-alignment.ts @@ -36,7 +36,7 @@ export const migrateJsonFormWidgetLabelPositonAndAlignment = ( childField.alignWidget = "LEFT"; field.children[childKey] = { ...childField, - labelPosition: "left", + labelPosition: "Left", }; } }); From 6025bf2b3adb7d26fc3489580fe1e9d377e2feaf Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Thu, 1 Aug 2024 18:34:37 +0530 Subject: [PATCH 14/17] fix:unit test cases and lint issues --- .../JSONForm/JSONForm_EditSwitchFied_spec.ts | 26 +-- app/client/packages/dsl/src/migrate/index.ts | 2 +- .../JSONFormWidget/component/Field.tsx | 5 +- .../JSONFormWidget/fields/CheckboxField.tsx | 6 +- .../JSONFormWidget/fields/SwitchField.tsx | 12 +- .../fields/switchField.test.tsx | 151 +++++++++++++----- .../propertyConfig/properties/checkbox.ts | 2 +- .../propertyConfig/properties/switch.ts | 4 +- .../widgets/SwitchWidget/component/index.tsx | 3 +- 9 files changed, 146 insertions(+), 65 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts index 4f40989a7e34..28fbd03b2d0e 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_EditSwitchFied_spec.ts @@ -2,7 +2,7 @@ import { agHelper, draggableWidgets, entityExplorer, - propPane + propPane, } from "../../../../../support/Objects/ObjectsCore"; const commonlocators = require("../../../../../locators/commonlocators.json"); @@ -10,7 +10,7 @@ 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 +// here only alignment changes and the fields order in the dom changes so no assertions were added describe( "JSON Form Widget Custom Field", @@ -30,22 +30,28 @@ describe( false, ); propPane.ChangeJsonFormFieldType("Education", "Switch"); - agHelper.AssertClassExists(widgetsPage.switchlabel, widgetsPage.switchAlignRight); + 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(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); + agHelper.AssertClassExists( + widgetsPage.switchlabel, + widgetsPage.switchAlignRight, + ); propPane.NavigateBackToPropertyPane(); }); }, -); \ No newline at end of file +); diff --git a/app/client/packages/dsl/src/migrate/index.ts b/app/client/packages/dsl/src/migrate/index.ts index 767733634798..a84b250489da 100644 --- a/app/client/packages/dsl/src/migrate/index.ts +++ b/app/client/packages/dsl/src/migrate/index.ts @@ -93,7 +93,7 @@ import { migrateCustomWidgetDynamicHeight } from "./migrations/088-migrate-custo import { migrateJsonFormWidgetLabelPositonAndAlignment } from "./migrations/089-migrate-jsonformwidget-labelposition-and-alignment"; import type { DSLWidget } from "./types"; -export const LATEST_DSL_VERSION = 90; +export const LATEST_DSL_VERSION = 89; export const calculateDynamicHeight = () => { const DEFAULT_GRID_ROW_HEIGHT = 10; diff --git a/app/client/src/widgets/JSONFormWidget/component/Field.tsx b/app/client/src/widgets/JSONFormWidget/component/Field.tsx index 063d2e8de32c..19929674f8be 100644 --- a/app/client/src/widgets/JSONFormWidget/component/Field.tsx +++ b/app/client/src/widgets/JSONFormWidget/component/Field.tsx @@ -44,12 +44,12 @@ function Field({ inlineLabel = false, isRequiredField, label, + labelPosition, labelStyle, labelTextColor, labelTextSize, name, tooltip, - labelPosition }: FieldProps) { const refDefaultValue = useRef(); const { setValue } = useFormContext(); @@ -67,7 +67,6 @@ function Field({ } }, [defaultValue, setValue]); - const direction = inlineLabel ? "row" : "column"; return ( @@ -83,11 +82,11 @@ function Field({ direction={direction} isRequiredField={isRequiredField} label={label} + labelPosition={labelPosition} labelStyle={labelStyle} labelTextColor={labelTextColor} labelTextSize={labelTextSize} tooltip={tooltip} - labelPosition={labelPosition} > {children} diff --git a/app/client/src/widgets/JSONFormWidget/fields/CheckboxField.tsx b/app/client/src/widgets/JSONFormWidget/fields/CheckboxField.tsx index be7188589a8b..41a208546f5f 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/CheckboxField.tsx +++ b/app/client/src/widgets/JSONFormWidget/fields/CheckboxField.tsx @@ -26,7 +26,7 @@ type CheckboxComponentProps = FieldComponentBaseProps & accentColor?: string; borderRadius?: string; boxShadow?: string; - labelPosition:LabelPosition + labelPosition: LabelPosition; }; type CheckboxFieldProps = BaseFieldComponentProps; @@ -46,7 +46,7 @@ const COMPONENT_DEFAULT_VALUES: CheckboxComponentProps = { labelTextSize: BASE_LABEL_TEXT_SIZE, isVisible: true, label: "", - labelPosition:LabelPosition.Left + labelPosition: LabelPosition.Left, }; const isValid = ( @@ -135,12 +135,12 @@ function CheckboxField({ inlineLabel isRequiredField={schemaItem.isRequired} label={schemaItem.label} + labelPosition={schemaItem.labelPosition} labelStyle={schemaItem.labelStyle} labelTextColor={schemaItem.labelTextColor} labelTextSize={schemaItem.labelTextSize} name={name} tooltip={schemaItem.tooltip} - labelPosition={schemaItem.labelPosition} > {fieldComponent} diff --git a/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx b/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx index 993ec4e7af15..5af7df31a84b 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx +++ b/app/client/src/widgets/JSONFormWidget/fields/SwitchField.tsx @@ -11,7 +11,7 @@ import type { FieldComponentBaseProps, FieldEventProps, } from "../constants"; -import { ActionUpdateDependency, FieldType } from "../constants"; +import { ActionUpdateDependency } from "../constants"; import SwitchComponent from "widgets/SwitchWidget/component"; import { EventType } from "constants/AppsmithActionConstants/ActionConstants"; import { Colors } from "constants/Colors"; @@ -23,7 +23,7 @@ type SwitchComponentOwnProps = FieldComponentBaseProps & alignWidget: AlignWidget; accentColor?: string; onChange?: string; - labelPosition:LabelPosition + labelPosition: LabelPosition; }; type SwitchFieldProps = BaseFieldComponentProps; @@ -37,7 +37,7 @@ const COMPONENT_DEFAULT_VALUES: SwitchComponentOwnProps = { isVisible: true, labelTextSize: BASE_LABEL_TEXT_SIZE, label: "", - labelPosition:LabelPosition.Left + labelPosition: LabelPosition.Left, }; const isValid = (value: boolean, schemaItem: SwitchFieldProps["schemaItem"]) => @@ -119,18 +119,18 @@ function SwitchField({ return ( {fieldComponent} @@ -139,4 +139,4 @@ function SwitchField({ SwitchField.componentDefaultValues = COMPONENT_DEFAULT_VALUES; -export default SwitchField; \ No newline at end of file +export default SwitchField; diff --git a/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx b/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx index 36d180e53bf4..4d6dba2f2369 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx +++ b/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import '@testing-library/jest-dom' +import "@testing-library/jest-dom"; import { render, screen } from "@testing-library/react"; import { useForm, FormProvider } from "react-hook-form"; import SwitchField from "./SwitchField"; @@ -7,14 +7,64 @@ import { FormContextProvider } from "../FormContext"; import { ThemeProvider } from "styled-components"; import { LabelPosition } from "components/constants"; import { AlignWidgetTypes } from "WidgetProvider/constants"; - +import { DataType, FieldType } from "../constants"; const mockExecuteAction = jest.fn(); -const TestComponent = (props: any) => { +const DefaultschemaItem = { + accessor: "Test Switch", + accentColor: "#553DE9", + alignWidget: AlignWidgetTypes.LEFT, + boxShadow: "none", + children: {}, + dataType: DataType.STRING, + defaultValue: "", + fieldType: FieldType.SWITCH, + identifier: "TEST_IDENTIFIER", + isCustomField: false, + isDisabled: false, + isRequired: false, + isVisible: true, + label: "Test Switch", + labelPosition: LabelPosition.Left, + labelStyle: "", + labelTextColor: "", + labelTextSize: "0.875rem", + originalIdentifier: "Test Switch", + position: 0, + sourceData: "har", + tooltip: "", +}; + +const schemaItemRight = { + accessor: "Test Switch", + accentColor: "#553DE9", + alignWidget: AlignWidgetTypes.RIGHT, + boxShadow: "none", + children: {}, + dataType: DataType.STRING, + defaultValue: "", + fieldType: FieldType.SWITCH, + identifier: "TEST_IDENTIFIER", + isCustomField: false, + isDisabled: false, + isRequired: false, + isVisible: true, + label: "Test Switch", + labelPosition: LabelPosition.Right, + labelStyle: "", + labelTextColor: "", + labelTextSize: "0.875rem", + originalIdentifier: "Test Switch", + position: 0, + sourceData: "har", + tooltip: "", +}; + +const DefaultTestComponent = () => { const methods = useForm({ defaultValues: { - [props.name || "test-switch"]: props.passedDefaultValue || false, + name: "test switch", }, }); @@ -42,25 +92,51 @@ const TestComponent = (props: any) => { + passedDefaultValue={false} + schemaItem={DefaultschemaItem} + propertyPath={"schema.__root_schema__.children"} + /> + + + + ); +}; + +const TestComponentRight = () => { + const methods = useForm({ + defaultValues: { + name: "test switch", + }, + }); + + return ( + + + + @@ -73,36 +149,37 @@ describe("SwitchField", () => { }); it("renders the switch field with default props", () => { - render(); + render(); expect(screen.getByText("Test Switch")).toBeInTheDocument(); }); it("applies the correct label position and width for the switch widget", () => { - render(); + render(); const labelElement = screen.getByTestId("inlinelabel"); expect(labelElement).toHaveStyle("width: 100%"); }); it("applies the correct label position", async () => { - render(); + render(); const labelElement = screen.getByTestId("inlinelabel"); const switchComponent = screen.getByRole("checkbox"); - const switchComponentPosition = switchComponent.compareDocumentPosition(labelElement); - expect(switchComponentPosition & Node.DOCUMENT_POSITION_FOLLOWING).toBe(Node.DOCUMENT_POSITION_FOLLOWING); + const switchComponentPosition = + switchComponent.compareDocumentPosition(labelElement); + expect(switchComponentPosition & Node.DOCUMENT_POSITION_FOLLOWING).toBe( + Node.DOCUMENT_POSITION_FOLLOWING, + ); }); it("applies the correct label position left and alignment right", () => { - render( - - ); + render(); const switchComponent = screen.getByRole("checkbox"); const labelElement = screen.getByText("Test Switch"); - const labelElementPosition = labelElement.compareDocumentPosition(switchComponent); - - expect(labelElementPosition & Node.DOCUMENT_POSITION_FOLLOWING).toBe(Node.DOCUMENT_POSITION_FOLLOWING); - }); + const labelElementPosition = + labelElement.compareDocumentPosition(switchComponent); + expect(labelElementPosition & Node.DOCUMENT_POSITION_FOLLOWING).toBe( + Node.DOCUMENT_POSITION_FOLLOWING, + ); + }); }); diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts index cb92fc3c780e..620d3f4bd335 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/checkbox.ts @@ -65,7 +65,7 @@ const PROPERTIES = { isBindProperty: true, isTriggerProperty: false, fullWidth: false, - defaultValue:AlignWidgetTypes.LEFT, + defaultValue: AlignWidgetTypes.LEFT, options: [ { startIcon: "align-left", diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts index 5a88c47bd0af..53863d24df49 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/switch.ts @@ -50,7 +50,7 @@ const PROPERTIES = { isBindProperty: true, isTriggerProperty: false, fullWidth: false, - defaultValue:AlignWidgetTypes.LEFT, + defaultValue: AlignWidgetTypes.LEFT, options: [ { startIcon: "align-left", @@ -85,4 +85,4 @@ const PROPERTIES = { }, }; -export default PROPERTIES; \ No newline at end of file +export default PROPERTIES; diff --git a/app/client/src/widgets/SwitchWidget/component/index.tsx b/app/client/src/widgets/SwitchWidget/component/index.tsx index afc3eaf90fe2..df32ac7b603e 100644 --- a/app/client/src/widgets/SwitchWidget/component/index.tsx +++ b/app/client/src/widgets/SwitchWidget/component/index.tsx @@ -30,7 +30,6 @@ const SwitchComponentContainer = styled.div<{ accentColor: string; minHeight?: number; width?: string; - labelPosition?:LabelPosition }>` display: flex; flex-direction: row; @@ -126,7 +125,7 @@ function SwitchComponent({ labelPosition === LabelPosition.Right ? "left" : "right"; return ( - + Date: Fri, 2 Aug 2024 11:01:05 +0530 Subject: [PATCH 15/17] fix:failing schema test cases in jsonform --- .../src/widgets/JSONFormWidget/fields/switchField.test.tsx | 4 ++-- app/client/src/widgets/JSONFormWidget/schemaParser.test.ts | 3 +++ app/client/src/widgets/JSONFormWidget/schemaTestData.ts | 5 +++++ app/client/src/widgets/JSONFormWidget/widget/helper.test.ts | 3 +++ 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx b/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx index 4d6dba2f2369..720338b3e9f0 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx +++ b/app/client/src/widgets/JSONFormWidget/fields/switchField.test.tsx @@ -93,8 +93,8 @@ const DefaultTestComponent = () => { fieldClassName="test-switch-field" name="test-switch" passedDefaultValue={false} - schemaItem={DefaultschemaItem} propertyPath={"schema.__root_schema__.children"} + schemaItem={DefaultschemaItem} /> @@ -134,8 +134,8 @@ const TestComponentRight = () => { fieldClassName="test-switch-field" name="test-switch" passedDefaultValue={false} - schemaItem={schemaItemRight} propertyPath={"schema.__root_schema__.children"} + schemaItem={schemaItemRight} /> diff --git a/app/client/src/widgets/JSONFormWidget/schemaParser.test.ts b/app/client/src/widgets/JSONFormWidget/schemaParser.test.ts index 573c956a9f48..f0c242f6da4e 100644 --- a/app/client/src/widgets/JSONFormWidget/schemaParser.test.ts +++ b/app/client/src/widgets/JSONFormWidget/schemaParser.test.ts @@ -26,6 +26,7 @@ import { FieldType, ROOT_SCHEMA_KEY, } from "./constants"; +import { LabelPosition } from "components/constants"; const widgetName = "JSONForm1"; const BASE_PATH = `schema.${ROOT_SCHEMA_KEY}`; @@ -211,6 +212,7 @@ describe("#parse", () => { dataType: DataType.BOOLEAN, defaultValue: undefined, fieldType: FieldType.SWITCH, + labelPosition: LabelPosition.Left, sourceData: true, identifier: "boolean", position: 3, @@ -1082,6 +1084,7 @@ describe("#getSchemaItemFor", () => { dataType: DataType.STRING, defaultValue: undefined, fieldType: FieldType.SWITCH, + labelPosition: LabelPosition.Left, sourceData: "John", isCustomField: true, accessor: "firstName", diff --git a/app/client/src/widgets/JSONFormWidget/schemaTestData.ts b/app/client/src/widgets/JSONFormWidget/schemaTestData.ts index 12e32aa7f8d6..c8fa7a586e5b 100644 --- a/app/client/src/widgets/JSONFormWidget/schemaTestData.ts +++ b/app/client/src/widgets/JSONFormWidget/schemaTestData.ts @@ -8,6 +8,7 @@ import { FieldType, ROOT_SCHEMA_KEY, } from "./constants"; +import { LabelPosition } from "components/constants"; export const schemaItemStyles = { accentColor: @@ -181,6 +182,7 @@ const initialDataset = { isVisible: true, labelTextSize: "0.875rem", label: "Boolean", + labelPosition: LabelPosition.Left, children: {}, dataType: DataType.BOOLEAN, defaultValue: @@ -375,6 +377,7 @@ const initialDataset = { isVisible: true, labelTextSize: "0.875rem", label: "Boolean", + labelPosition: LabelPosition.Left, children: {}, dataType: DataType.BOOLEAN, defaultValue: undefined, @@ -796,6 +799,7 @@ const withRemovedKeyFromInitialDataset = { dataType: DataType.BOOLEAN, defaultValue: undefined, fieldType: FieldType.SWITCH, + labelPosition: LabelPosition.Left, sourceData: true, isCustomField: false, accessor: "boolean", @@ -1208,6 +1212,7 @@ const withRemovedAddedKeyToInitialDataset = { isVisible: true, labelTextSize: "0.875rem", label: "Boolean", + labelPosition: LabelPosition.Left, children: {}, dataType: DataType.BOOLEAN, defaultValue: undefined, diff --git a/app/client/src/widgets/JSONFormWidget/widget/helper.test.ts b/app/client/src/widgets/JSONFormWidget/widget/helper.test.ts index 5fdc692dd395..ce59d806bb5e 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/helper.test.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/helper.test.ts @@ -1,3 +1,4 @@ +import { LabelPosition } from "components/constants"; import type { FieldThemeStylesheet, Schema } from "../constants"; import { ARRAY_ITEM_KEY, @@ -405,6 +406,7 @@ describe(".dynamicPropertyPathListFromSchema", () => { children: { agree: { fieldType: FieldType.SWITCH, + labelPosition: LabelPosition.Left, identifier: "agree", defaultValue: "{{sourceData.agree}}", }, @@ -423,6 +425,7 @@ describe(".dynamicPropertyPathListFromSchema", () => { field1: { fieldType: FieldType.SWITCH, identifier: "field1", + labelPosition: LabelPosition.Left, defaultValue: "{{sourceData.field1}}", }, field2: { From 9d4e6b644d34f58bad631c0e432769dd77c2c0ab Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Fri, 2 Aug 2024 13:22:56 +0530 Subject: [PATCH 16/17] fix:migration test cases --- app/client/packages/dsl/src/migrate/index.ts | 2 +- .../src/migrate/tests/DSLMigration.test.ts | 10 + ...ormSwitchCheckBoxPositionMigration.test.ts | 235 ++++++++++++++++++ 3 files changed, 246 insertions(+), 1 deletion(-) create mode 100644 app/client/packages/dsl/src/migrate/tests/JsonFormSwitchCheckBoxPositionMigration.test.ts diff --git a/app/client/packages/dsl/src/migrate/index.ts b/app/client/packages/dsl/src/migrate/index.ts index a84b250489da..767733634798 100644 --- a/app/client/packages/dsl/src/migrate/index.ts +++ b/app/client/packages/dsl/src/migrate/index.ts @@ -93,7 +93,7 @@ import { migrateCustomWidgetDynamicHeight } from "./migrations/088-migrate-custo import { migrateJsonFormWidgetLabelPositonAndAlignment } from "./migrations/089-migrate-jsonformwidget-labelposition-and-alignment"; import type { DSLWidget } from "./types"; -export const LATEST_DSL_VERSION = 89; +export const LATEST_DSL_VERSION = 90; export const calculateDynamicHeight = () => { const DEFAULT_GRID_ROW_HEIGHT = 10; diff --git a/app/client/packages/dsl/src/migrate/tests/DSLMigration.test.ts b/app/client/packages/dsl/src/migrate/tests/DSLMigration.test.ts index 9a925b68a74f..0fd7ad26352d 100644 --- a/app/client/packages/dsl/src/migrate/tests/DSLMigration.test.ts +++ b/app/client/packages/dsl/src/migrate/tests/DSLMigration.test.ts @@ -89,6 +89,7 @@ import * as m85 from "../migrations/085-migrate-default-values-for-custom-echart 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-migrate-jsonformwidget-labelposition-and-alignment"; interface Migration { functionLookup: { @@ -920,6 +921,15 @@ const migrations: Migration[] = [ ], version: 88, }, + { + functionLookup: [ + { + moduleObj: m89, + functionName: "migrateJsonFormWidgetLabelPositonAndAlignment", + }, + ], + version: 89, + }, ]; const mockFnObj: Record = {}; diff --git a/app/client/packages/dsl/src/migrate/tests/JsonFormSwitchCheckBoxPositionMigration.test.ts b/app/client/packages/dsl/src/migrate/tests/JsonFormSwitchCheckBoxPositionMigration.test.ts new file mode 100644 index 000000000000..65a29609e7a1 --- /dev/null +++ b/app/client/packages/dsl/src/migrate/tests/JsonFormSwitchCheckBoxPositionMigration.test.ts @@ -0,0 +1,235 @@ +import { migrateJsonFormWidgetLabelPositonAndAlignment } from "../migrations/089-migrate-jsonformwidget-labelposition-and-alignment"; +import type { DSLWidget } from "../types"; + +const inputDsl: DSLWidget = { + widgetName: "MainContainer", + backgroundColor: "none", + rightColumn: 1118, + snapColumns: 16, + detachFromLayout: true, + widgetId: "0", + topRow: 0, + bottomRow: 1280, + containerStyle: "none", + snapRows: 33, + parentRowSpace: 1, + type: "CANVAS_WIDGET", + canExtend: true, + version: 15, + minHeight: 1292, + parentColumnSpace: 1, + dynamicTriggerPathList: [], + dynamicBindingPathList: [], + leftColumn: 0, + isLoading: false, + parentId: "", + renderMode: "CANVAS", + children: [ + { + widgetName: "JSONForm1", + type: "JSON_FORM_WIDGET", + schema: { + field1: { + fieldType: "OBJECT", + children: { + switchField: { + accessor: "Test Switch", + accentColor: "#553DE9", + alignWidget: "RIGHT", + boxShadow: "none", + children: {}, + dataType: "STRING", + defaultValue: "", + fieldType: "Switch", + identifier: "TEST_IDENTIFIER", + isCustomField: false, + isDisabled: false, + isRequired: false, + isVisible: true, + label: "Test Switch", + labelPosition: "Right", + labelStyle: "", + labelTextColor: "", + labelTextSize: "0.875rem", + originalIdentifier: "Test Switch", + position: 0, + sourceData: "har", + tooltip: "", + }, + checkboxField1: { + accessor: "Test Checkbox 1", + accentColor: "#553DE9", + alignWidget: "LEFT", + boxShadow: "none", + children: {}, + dataType: "STRING", + defaultValue: "", + fieldType: "Checkbox", + identifier: "TEST_IDENTIFIER_1", + isCustomField: false, + isDisabled: false, + isRequired: false, + isVisible: true, + label: "Test Checkbox 1", + labelPosition: "Left", + labelStyle: "", + labelTextColor: "", + labelTextSize: "0.875rem", + originalIdentifier: "Test Checkbox 1", + position: 1, + sourceData: "har", + tooltip: "", + }, + checkboxField2: { + accessor: "Test Checkbox 2", + accentColor: "#553DE9", + alignWidget: "RIGHT", + boxShadow: "none", + children: {}, + dataType: "STRING", + defaultValue: "", + fieldType: "Checkbox", + identifier: "TEST_IDENTIFIER_2", + isCustomField: false, + isDisabled: false, + isRequired: false, + isVisible: true, + label: "Test Checkbox 2", + labelPosition: "Left", + labelStyle: "", + labelTextColor: "", + labelTextSize: "0.875rem", + originalIdentifier: "Test Checkbox 2", + position: 2, + sourceData: "har", + tooltip: "", + }, + }, + }, + }, + widgetId: "jsonForm1", + dynamicBindingPathList: [], + renderMode: "CANVAS", + }, + ], +}; + +const outputDsl: DSLWidget = { + widgetName: "MainContainer", + backgroundColor: "none", + rightColumn: 1118, + snapColumns: 16, + detachFromLayout: true, + widgetId: "0", + topRow: 0, + bottomRow: 1280, + containerStyle: "none", + snapRows: 33, + parentRowSpace: 1, + type: "CANVAS_WIDGET", + canExtend: true, + version: 15, + minHeight: 1292, + parentColumnSpace: 1, + dynamicTriggerPathList: [], + dynamicBindingPathList: [], + leftColumn: 0, + isLoading: false, + parentId: "", + renderMode: "CANVAS", + children: [ + { + widgetName: "JSONForm1", + type: "JSON_FORM_WIDGET", + schema: { + field1: { + fieldType: "OBJECT", + children: { + switchField: { + accessor: "Test Switch", + accentColor: "#553DE9", + alignWidget: "LEFT", + boxShadow: "none", + children: {}, + dataType: "STRING", + defaultValue: "", + fieldType: "Switch", + identifier: "TEST_IDENTIFIER", + isCustomField: false, + isDisabled: false, + isRequired: false, + isVisible: true, + label: "Test Switch", + labelPosition: "Right", + labelStyle: "", + labelTextColor: "", + labelTextSize: "0.875rem", + originalIdentifier: "Test Switch", + position: 0, + sourceData: "har", + tooltip: "", + }, + checkboxField1: { + accessor: "Test Checkbox 1", + accentColor: "#553DE9", + alignWidget: "LEFT", + boxShadow: "none", + children: {}, + dataType: "STRING", + defaultValue: "", + fieldType: "Checkbox", + identifier: "TEST_IDENTIFIER_1", + isCustomField: false, + isDisabled: false, + isRequired: false, + isVisible: true, + label: "Test Checkbox 1", + labelPosition: "Right", + labelStyle: "", + labelTextColor: "", + labelTextSize: "0.875rem", + originalIdentifier: "Test Checkbox 1", + position: 1, + sourceData: "har", + tooltip: "", + }, + checkboxField2: { + accessor: "Test Checkbox 2", + accentColor: "#553DE9", + alignWidget: "LEFT", + boxShadow: "none", + children: {}, + dataType: "STRING", + defaultValue: "", + fieldType: "Checkbox", + identifier: "TEST_IDENTIFIER_2", + isCustomField: false, + isDisabled: false, + isRequired: false, + isVisible: true, + label: "Test Checkbox 2", + labelPosition: "Left", + labelStyle: "", + labelTextColor: "", + labelTextSize: "0.875rem", + originalIdentifier: "Test Checkbox 2", + position: 2, + sourceData: "har", + tooltip: "", + }, + }, + }, + }, + widgetId: "jsonForm1", + dynamicBindingPathList: [], + renderMode: "CANVAS", + }, + ], +}; + +describe("JSON Form Widget Property Migration", () => { + it("should migrate JSON Form widget properties correctly", () => { + const newDsl = migrateJsonFormWidgetLabelPositonAndAlignment(inputDsl); + expect(JSON.stringify(newDsl)).toBe(JSON.stringify(outputDsl)); + }); +}); From 20a0eb22a1c5f7f2ae118c0854d8a76df7648e10 Mon Sep 17 00:00:00 2001 From: Harshithazemoso Date: Fri, 2 Aug 2024 14:48:06 +0530 Subject: [PATCH 17/17] fix:migration test case assertion --- .../tests/JsonFormSwitchCheckBoxPositionMigration.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/packages/dsl/src/migrate/tests/JsonFormSwitchCheckBoxPositionMigration.test.ts b/app/client/packages/dsl/src/migrate/tests/JsonFormSwitchCheckBoxPositionMigration.test.ts index 65a29609e7a1..bdaff9a218bf 100644 --- a/app/client/packages/dsl/src/migrate/tests/JsonFormSwitchCheckBoxPositionMigration.test.ts +++ b/app/client/packages/dsl/src/migrate/tests/JsonFormSwitchCheckBoxPositionMigration.test.ts @@ -230,6 +230,6 @@ const outputDsl: DSLWidget = { describe("JSON Form Widget Property Migration", () => { it("should migrate JSON Form widget properties correctly", () => { const newDsl = migrateJsonFormWidgetLabelPositonAndAlignment(inputDsl); - expect(JSON.stringify(newDsl)).toBe(JSON.stringify(outputDsl)); + expect(newDsl).toEqual(outputDsl); }); });