From 1c1135d639f743e0a4e866b52147a0d05ed2a838 Mon Sep 17 00:00:00 2001 From: Keyur Paralkar Date: Mon, 9 May 2022 15:41:36 +0530 Subject: [PATCH] refactor: removed the duplicate style properties for the list widget (#13605) * refactor: removed the duplicate style properties for the list widget * test: fixed list_spec cypress failures --- .../LayoutWidgets/List_spec.js | 27 +++++- app/client/cypress/locators/Widgets.json | 1 + .../ListWidget/widget/propertyConfig.ts | 85 +++++++------------ 3 files changed, 55 insertions(+), 58 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/LayoutWidgets/List_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/LayoutWidgets/List_spec.js index bbd77cd053..c25524f347 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/LayoutWidgets/List_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/LayoutWidgets/List_spec.js @@ -131,7 +131,26 @@ describe("Container Widget Functionality", function() { cy.CheckAndUnfoldEntityItem("WIDGETS"); cy.selectEntityByName("List1"); // Verify Action type and Message of List Item - cy.addAction("{{currentItem.first_name}}"); + // Click on the onListItemClick action dropdown. + cy.get(commonlocators.dropdownSelectButton) + .last() + .click(); + + cy.get(commonlocators.chooseAction) + .children() + .contains("Show message") + .click(); + + // Write binding inside the Message code textarea + cy.contains("Message") + .siblings() + .last() + .find(".CodeMirror textarea") + .focus() + .type("{{currentItem.first_name}}", { + force: true, + parseSpecialCharSequences: false, + }); cy.PublishtheApp(); // Click on list first item @@ -172,7 +191,7 @@ describe("Container Widget Functionality", function() { cy.CheckAndUnfoldEntityItem("WIDGETS"); cy.selectEntityByName("List1"); // Scroll down to Styles and Add background colour - cy.selectColor("background"); + cy.selectColor("backgroundcolor"); cy.wait(1000); cy.selectColor("itembackgroundcolor"); // Click on Deploy and ensure it is deployed appropriately @@ -197,8 +216,8 @@ describe("Container Widget Functionality", function() { cy.CheckAndUnfoldEntityItem("WIDGETS"); cy.selectEntityByName("List1"); // Scroll down to Styles and Add background colour - cy.get(widgetsPage.backgroundColorToggle).click({ force: true }); - cy.testJsontext("background", "#FFC13D"); + cy.get(widgetsPage.backgroundColorToggleNew).click({ force: true }); + cy.testJsontext("backgroundcolor", "#FFC13D"); cy.wait(1000); cy.get(widgetsPage.itemBackgroundColorToggle).click({ force: true }); cy.testJsontext("itembackgroundcolor", "#38AFF4"); diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index 600d119465..925965ac72 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/app/client/cypress/locators/Widgets.json @@ -171,6 +171,7 @@ "selectWidgetDisabled": ".t--property-control-disabled input", "itemBackgroundColorToggle": ".t--property-control-itembackgroundcolor .t--js-toggle", "backgroundColorToggle": ".t--property-control-background .t--js-toggle", + "backgroundColorToggleNew": ".t--property-control-backgroundcolor .t--js-toggle", "cellBackground": ".t--property-control-cellbackgroundcolor", "cellBackgroundToggle": ".t--property-control-cellbackgroundcolor .t--js-toggle", "borderColorPickerNew": ".t--property-control-bordercolor input", diff --git a/app/client/src/widgets/ListWidget/widget/propertyConfig.ts b/app/client/src/widgets/ListWidget/widget/propertyConfig.ts index 9d8e5ee89e..4117773689 100644 --- a/app/client/src/widgets/ListWidget/widget/propertyConfig.ts +++ b/app/client/src/widgets/ListWidget/widget/propertyConfig.ts @@ -57,59 +57,6 @@ const PropertyPaneConfig = [ }, ], }, - { - sectionName: "Styles", - children: [ - { - propertyName: "backgroundColor", - label: "Background Color", - controlType: "COLOR_PICKER", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - validation: { - type: ValidationTypes.TEXT, - params: { - expected: { - type: "Color name | hex code", - example: "#FFFFFF", - autocompleteDataType: AutocompleteDataType.STRING, - }, - }, - }, - }, - { - propertyName: "itemBackgroundColor", - label: "Item Background Color", - controlType: "COLOR_PICKER", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - defaultValue: "#FFFFFF", - validation: { - type: ValidationTypes.TEXT, - params: { - expected: { - type: "Color name | hex code", - example: "#FFFFFF", - autocompleteDataType: AutocompleteDataType.STRING, - }, - }, - }, - }, - { - helpText: "Spacing between items in Pixels", - placeholderText: "0", - propertyName: "gridGap", - label: "Item Spacing (px)", - controlType: "INPUT_TEXT", - isBindProperty: true, - isTriggerProperty: false, - inputType: "INTEGER", - validation: { type: ValidationTypes.NUMBER, params: { min: -8 } }, - }, - ], - }, { sectionName: "Events", children: [ @@ -172,7 +119,7 @@ const PropertyPaneConfig = [ children: [ { propertyName: "backgroundColor", - label: "Background", + label: "Background Color", controlType: "COLOR_PICKER", isJSConvertible: true, isBindProperty: true, @@ -188,6 +135,36 @@ const PropertyPaneConfig = [ }, }, }, + { + propertyName: "itemBackgroundColor", + label: "Item Background Color", + controlType: "COLOR_PICKER", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + defaultValue: "#FFFFFF", + validation: { + type: ValidationTypes.TEXT, + params: { + expected: { + type: "Color name | hex code", + example: "#FFFFFF", + autocompleteDataType: AutocompleteDataType.STRING, + }, + }, + }, + }, + { + helpText: "Spacing between items in Pixels", + placeholderText: "0", + propertyName: "gridGap", + label: "Item Spacing (px)", + controlType: "INPUT_TEXT", + isBindProperty: true, + isTriggerProperty: false, + inputType: "INTEGER", + validation: { type: ValidationTypes.NUMBER, params: { min: -8 } }, + }, { propertyName: "borderRadius", label: "Border Radius",