From b0963bbca17e2b1b925aa775b5bbf104d206bacf Mon Sep 17 00:00:00 2001 From: Sai Charan Date: Thu, 4 Jul 2024 14:29:58 +0530 Subject: [PATCH 01/14] fix: add regex check on phone number change --- .../Widgets/PhoneInput/PhoneInput_Part2_spec.ts | 3 +++ .../widgets/PhoneInputWidget/widget/index.tsx | 16 +++++++++------- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/PhoneInput/PhoneInput_Part2_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/PhoneInput/PhoneInput_Part2_spec.ts index 9eede0aa2b7..cbf6b2ecf1c 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/PhoneInput/PhoneInput_Part2_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/PhoneInput/PhoneInput_Part2_spec.ts @@ -292,6 +292,9 @@ describe( agHelper.ClearNType(locators._input, "100"); agHelper.ValidateToastMessage("Value Changed"); + agHelper.WaitUntilToastDisappear("Value Changed"); + agHelper.ClearNType(locators._input, "a"); + cy.get(locators._toastMsg).should("not.exist"); // onFocus propPane.SelectPlatformFunction("onFocus", "Show alert"); diff --git a/app/client/src/widgets/PhoneInputWidget/widget/index.tsx b/app/client/src/widgets/PhoneInputWidget/widget/index.tsx index cfad9e61b9b..69f6694d7ef 100644 --- a/app/client/src/widgets/PhoneInputWidget/widget/index.tsx +++ b/app/client/src/widgets/PhoneInputWidget/widget/index.tsx @@ -408,13 +408,15 @@ class PhoneInputWidget extends BaseInputWidget< "value", parseIncompletePhoneNumber(formattedValue), ); - this.props.updateWidgetMetaProperty("text", formattedValue, { - triggerPropertyName: "onTextChanged", - dynamicString: this.props.onTextChanged, - event: { - type: EventType.ON_TEXT_CHANGE, - }, - }); + if (/^(?!\s)[\d\s()+-]*$/.test(value)) { + this.props.updateWidgetMetaProperty("text", formattedValue, { + triggerPropertyName: "onTextChanged", + dynamicString: this.props.onTextChanged, + event: { + type: EventType.ON_TEXT_CHANGE, + }, + }); + } if (!this.props.isDirty) { this.props.updateWidgetMetaProperty("isDirty", true); } From ed419467d6ac7b97f76ff3b1db4e1eaeb50583b5 Mon Sep 17 00:00:00 2001 From: Sai Charan Date: Wed, 17 Jul 2024 15:52:21 +0530 Subject: [PATCH 02/14] feat: add comment for regex in phone input widget --- app/client/src/widgets/PhoneInputWidget/widget/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/client/src/widgets/PhoneInputWidget/widget/index.tsx b/app/client/src/widgets/PhoneInputWidget/widget/index.tsx index 69f6694d7ef..f6fd4be26bc 100644 --- a/app/client/src/widgets/PhoneInputWidget/widget/index.tsx +++ b/app/client/src/widgets/PhoneInputWidget/widget/index.tsx @@ -408,6 +408,9 @@ class PhoneInputWidget extends BaseInputWidget< "value", parseIncompletePhoneNumber(formattedValue), ); + // This regular expression validates that the input: + // - Does not start with a whitespace character + // - Contains only digits, spaces, parentheses, plus, and minus symbols if (/^(?!\s)[\d\s()+-]*$/.test(value)) { this.props.updateWidgetMetaProperty("text", formattedValue, { triggerPropertyName: "onTextChanged", From 6c823bf19001e3bfdf5ba7afbb34fb7ea84f85d9 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Tue, 10 Sep 2024 05:00:38 +0100 Subject: [PATCH 03/14] add validation in derived.js and SelectCell with isEditableCellValid --- .../SelectWidget/component/index.styled.tsx | 32 +++++++++++++------ .../component/cellComponents/SelectCell.tsx | 5 ++- .../widgets/TableWidgetV2/widget/derived.js | 2 +- .../widgets/TableWidgetV2/widget/index.tsx | 1 + 4 files changed, 29 insertions(+), 11 deletions(-) diff --git a/app/client/src/widgets/SelectWidget/component/index.styled.tsx b/app/client/src/widgets/SelectWidget/component/index.styled.tsx index d667d297ac0..4a269f22a8b 100644 --- a/app/client/src/widgets/SelectWidget/component/index.styled.tsx +++ b/app/client/src/widgets/SelectWidget/component/index.styled.tsx @@ -109,22 +109,34 @@ export const StyledSingleDropDown = styled( box-shadow: ${(props) => props.boxShadow} !important; border: 1px solid; border-color: ${(props) => - props.hasError + !props.isValid ? "var(--wds-color-border-danger)" - : "var(--wds-color-border)"}; + : props.hasError + ? "var(--wds-color-border-danger)" + : "var(--wds-color-border)"}; &:hover { border-color: ${(props) => - props.hasError + !props.isValid ? "var(--wds-color-border-danger-hover)" - : "var(--wds-color-border-hover)"}; + : props.hasError + ? "var(--wds-color-border-danger-hover)" + : "var(--wds-color-border-hover)"}; } &:focus { outline: 0; border-color: ${(props) => - props.hasError ? "var(--wds-color-border-danger)" : props.accentColor}; + !props.isValid + ? "var(--wds-color-border-danger)" + : props.hasError + ? "var(--wds-color-border-danger)" + : props.accentColor}; box-shadow: ${(props) => `0px 0px 0px 2px ${lightenColor( - props.hasError ? Colors.DANGER_SOLID : props.accentColor, + !props.isValid + ? Colors.DANGER_SOLID + : props.hasError + ? Colors.DANGER_SOLID + : props.accentColor, )} !important;`}; } } @@ -132,8 +144,10 @@ export const StyledSingleDropDown = styled( &&&&& .${Classes.POPOVER_OPEN} .${Classes.BUTTON} { outline: 0; ${(props) => - !props.hasError - ? ` + !props.isValid + ? `border: 1px solid var(--wds-color-border-danger);` + : !props.hasError + ? ` border-color: ${ props.hasError ? "var(--wds-color-border-danger)" : props.accentColor }; @@ -141,7 +155,7 @@ export const StyledSingleDropDown = styled( props.hasError ? Colors.DANGER_SOLID : props.accentColor, )} !important;`}; ` - : `border: 1px solid var(--wds-color-border-danger);`} + : `border: 1px solid var(--wds-color-border-danger);`} } &&&&& .${Classes.DISABLED} { background-color: var(--wds-color-bg-disabled); diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx index 792f1672e2c..97184dbd131 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx @@ -18,6 +18,7 @@ const StyledSelectComponent = styled(SelectComponent)<{ accentColor: string; height: number; isNewRow: boolean; + isValid: boolean; }>` &&& { width: ${(props) => @@ -82,6 +83,7 @@ type SelectProps = BaseCellComponentProps & { value: string; width: number; isEditable: boolean; + isEditableCellValid: boolean; tableWidth: number; isCellEditable?: boolean; isCellEditMode?: boolean; @@ -131,6 +133,7 @@ export const SelectCell = (props: SelectProps) => { isCellEditMode, isCellVisible, isEditable, + isEditableCellValid, isFilterable = false, isHidden, isNewRow, @@ -240,7 +243,7 @@ export const SelectCell = (props: SelectProps) => { isLoading={false} isNewRow={isNewRow} isOpen={autoOpen} - isValid + isValid={isEditableCellValid} labelText="" onClose={onClose} onFilterChange={onFilter} diff --git a/app/client/src/widgets/TableWidgetV2/widget/derived.js b/app/client/src/widgets/TableWidgetV2/widget/derived.js index ad69270fa97..b8d663330be 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/derived.js +++ b/app/client/src/widgets/TableWidgetV2/widget/derived.js @@ -851,7 +851,7 @@ export default { }; let editableColumns = []; - const validatableColumns = ["text", "number", "currency", "date"]; + const validatableColumns = ["text", "number", "currency", "date", "select"]; if (props.isAddRowInProgress) { Object.values(props.primaryColumns) diff --git a/app/client/src/widgets/TableWidgetV2/widget/index.tsx b/app/client/src/widgets/TableWidgetV2/widget/index.tsx index 7dfcf3be81b..8f6cdaa8481 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/TableWidgetV2/widget/index.tsx @@ -2131,6 +2131,7 @@ class TableWidgetV2 extends BaseWidget { isCellEditable={isCellEditable} isCellVisible={cellProperties.isCellVisible ?? true} isEditable={isColumnEditable} + isEditableCellValid={this.isColumnCellValid(alias)} isFilterable={cellProperties.isFilterable} isHidden={isHidden} isNewRow={isNewRow} From 0ff1bac048281b444daeded6f34dd32ce23a46cf Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Fri, 13 Sep 2024 09:33:16 +0100 Subject: [PATCH 04/14] allow validation in select column property + pass hasError prop in SelectComponent --- .../SelectWidget/component/index.styled.tsx | 48 +++++++------------ .../component/cellComponents/SelectCell.tsx | 1 + .../propertyConfig/PanelConfig/Validation.ts | 1 + 3 files changed, 20 insertions(+), 30 deletions(-) diff --git a/app/client/src/widgets/SelectWidget/component/index.styled.tsx b/app/client/src/widgets/SelectWidget/component/index.styled.tsx index 4a269f22a8b..48b49bdb4d7 100644 --- a/app/client/src/widgets/SelectWidget/component/index.styled.tsx +++ b/app/client/src/widgets/SelectWidget/component/index.styled.tsx @@ -109,34 +109,22 @@ export const StyledSingleDropDown = styled( box-shadow: ${(props) => props.boxShadow} !important; border: 1px solid; border-color: ${(props) => - !props.isValid + props.hasError ? "var(--wds-color-border-danger)" - : props.hasError - ? "var(--wds-color-border-danger)" - : "var(--wds-color-border)"}; + : "var(--wds-color-border)"}; &:hover { border-color: ${(props) => - !props.isValid + props.hasError ? "var(--wds-color-border-danger-hover)" - : props.hasError - ? "var(--wds-color-border-danger-hover)" - : "var(--wds-color-border-hover)"}; + : "var(--wds-color-border-hover)"}; } &:focus { outline: 0; border-color: ${(props) => - !props.isValid - ? "var(--wds-color-border-danger)" - : props.hasError - ? "var(--wds-color-border-danger)" - : props.accentColor}; + props.hasError ? "var(--wds-color-border-danger)" : props.accentColor}; box-shadow: ${(props) => `0px 0px 0px 2px ${lightenColor( - !props.isValid - ? Colors.DANGER_SOLID - : props.hasError - ? Colors.DANGER_SOLID - : props.accentColor, + props.hasError ? Colors.DANGER_SOLID : props.accentColor, )} !important;`}; } } @@ -144,18 +132,18 @@ export const StyledSingleDropDown = styled( &&&&& .${Classes.POPOVER_OPEN} .${Classes.BUTTON} { outline: 0; ${(props) => - !props.isValid - ? `border: 1px solid var(--wds-color-border-danger);` - : !props.hasError - ? ` - border-color: ${ - props.hasError ? "var(--wds-color-border-danger)" : props.accentColor - }; - box-shadow: ${`0px 0px 0px 2px ${lightenColor( - props.hasError ? Colors.DANGER_SOLID : props.accentColor, - )} !important;`}; - ` - : `border: 1px solid var(--wds-color-border-danger);`} + !props.hasError + ? ` +border-color: ${ + props.hasError + ? "var(--wds-color-border-danger)" + : props.accentColor + }; +box-shadow: ${`0px 0px 0px 2px ${lightenColor( + props.hasError ? Colors.DANGER_SOLID : props.accentColor, + )} !important;`}; +` + : `border: 1px solid var(--wds-color-border-danger);`} } &&&&& .${Classes.DISABLED} { background-color: var(--wds-color-bg-disabled); diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx index 97184dbd131..b0ae54deeff 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx @@ -237,6 +237,7 @@ export const SelectCell = (props: SelectProps) => { compactMode dropDownWidth={width} filterText={filterText} + hasError={!isEditableCellValid} height={TABLE_SIZES[compactMode].ROW_HEIGHT} hideCancelIcon isFilterable={isFilterable} diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validation.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validation.ts index 64ae317f5b4..ec1bdb86505 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validation.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validation.ts @@ -21,6 +21,7 @@ export default { ColumnTypes.NUMBER, ColumnTypes.DATE, ColumnTypes.CURRENCY, + ColumnTypes.SELECT, ], true, ) From eceeb494b91b1c8785d823cd77e2a462ff839f67 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 13 Sep 2024 15:19:49 +0530 Subject: [PATCH 05/14] remove overriding css --- .../TableWidgetV2/component/cellComponents/SelectCell.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx index b0ae54deeff..9e2688083d6 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx @@ -38,7 +38,6 @@ const StyledSelectComponent = styled(SelectComponent)<{ } & button.bp3-button { - border-color: #fff; padding: 0 9px; min-height: ${(props) => { return props.isNewRow From 9ef62283b448a7bbe39b427729d785386b09d01e Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Tue, 17 Sep 2024 13:25:57 +0100 Subject: [PATCH 06/14] set only isRequired validation for table select column --- .../PanelConfig/Validations/Common.ts | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validations/Common.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validations/Common.ts index f2aca64ab1f..7fbafc34fbd 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validations/Common.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validations/Common.ts @@ -21,7 +21,12 @@ export default [ hidden: (props: TableWidgetProps, propertyPath: string) => { const path = getColumnPath(propertyPath); - return showByColumnType(props, path, [ColumnTypes.DATE], true); + return showByColumnType( + props, + path, + [ColumnTypes.DATE, ColumnTypes.SELECT], + true, + ); }, }, { @@ -41,7 +46,12 @@ export default [ }, hidden: (props: TableWidgetProps, propertyPath: string) => { const path = getColumnPath(propertyPath); - return showByColumnType(props, path, [ColumnTypes.DATE], true); + return showByColumnType( + props, + path, + [ColumnTypes.DATE, ColumnTypes.SELECT], + true, + ); }, }, { @@ -57,7 +67,12 @@ export default [ validation: { type: ValidationTypes.TEXT }, hidden: (props: TableWidgetProps, propertyPath: string) => { const path = getColumnPath(propertyPath); - return showByColumnType(props, path, [ColumnTypes.DATE], true); + return showByColumnType( + props, + path, + [ColumnTypes.DATE, ColumnTypes.SELECT], + true, + ); }, }, { From 3aed3c09af85322cad2009d6aacd45721eb3c1d3 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Tue, 17 Sep 2024 22:12:17 +0100 Subject: [PATCH 07/14] rename test file for clarity --- ...{Select_validation_spec.ts => Table_select_validation_spec.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/{Select_validation_spec.ts => Table_select_validation_spec.ts} (100%) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select_validation_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts similarity index 100% rename from app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select_validation_spec.ts rename to app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts From 01cfe05608a333b21069e7db0fa616e238b75c26 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Wed, 18 Sep 2024 00:39:01 +0100 Subject: [PATCH 08/14] revert spacing change in index.styled --- .../SelectWidget/component/index.styled.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/app/client/src/widgets/SelectWidget/component/index.styled.tsx b/app/client/src/widgets/SelectWidget/component/index.styled.tsx index 48b49bdb4d7..d667d297ac0 100644 --- a/app/client/src/widgets/SelectWidget/component/index.styled.tsx +++ b/app/client/src/widgets/SelectWidget/component/index.styled.tsx @@ -134,15 +134,13 @@ export const StyledSingleDropDown = styled( ${(props) => !props.hasError ? ` -border-color: ${ - props.hasError - ? "var(--wds-color-border-danger)" - : props.accentColor - }; -box-shadow: ${`0px 0px 0px 2px ${lightenColor( - props.hasError ? Colors.DANGER_SOLID : props.accentColor, - )} !important;`}; -` + border-color: ${ + props.hasError ? "var(--wds-color-border-danger)" : props.accentColor + }; + box-shadow: ${`0px 0px 0px 2px ${lightenColor( + props.hasError ? Colors.DANGER_SOLID : props.accentColor, + )} !important;`}; + ` : `border: 1px solid var(--wds-color-border-danger);`} } &&&&& .${Classes.DISABLED} { From 6bb7b5a41a143fbc4b4f33f1ad616499c708b2fa Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Wed, 18 Sep 2024 10:35:07 +0100 Subject: [PATCH 09/14] fix selectors in Table_select_validation_spec --- .../columnTypes/Table_select_validation_spec.ts | 17 +++++++++++------ app/client/cypress/locators/commonlocators.json | 1 + 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts index f5d79b45ede..42f2fa45dda 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts @@ -2,10 +2,12 @@ import * as _ from "../../../../../../support/Objects/ObjectsCore"; import EditorNavigation, { EntityType, } from "../../../../../../support/Pages/EditorNavigation"; +import commonlocators from "../../../../../../locators/commonlocators.json"; +import common from "mocha/lib/interfaces/common"; describe( "Table widget - Select column validation", - { tags: ["@tag.Widget", "@tag.Table"] }, + { tags: ["@tag.Widget", "@tag.Table", "@tag.Select"] }, () => { before(() => { cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 }); @@ -56,19 +58,22 @@ describe( // Expect select to have an error color _.agHelper - .GetElement(".bp3-button.select-button") + .GetElement(commonlocators.singleSelectWidgetButtonControl) .should("have.css", "border-color", "rgb(217, 25, 33)"); // Select a valid option from the select table cell - _.agHelper.GetNClick(".bp3-button.select-button"); - _.agHelper.GetElement(".menu-item-link").contains("#1").click(); + _.agHelper.GetNClick(commonlocators.singleSelectWidgetButtonControl); + _.agHelper + .GetElement(commonlocators.singleSelectWidgetMenuItem) + .contains("#1") + .click(); // Expect the save row option to be enabled _.agHelper.GetElement(_.table._saveNewRow).should("be.enabled"); // Expect button to have a valid color _.agHelper - .GetElement(".bp3-button.select-button") + .GetElement(commonlocators.singleSelectWidgetButtonControl) .should("have.css", "border-color", "rgb(85, 61, 233)"); // Discard save new row @@ -108,7 +113,7 @@ describe( // Exect the select to have an error color _.agHelper - .GetElement(".bp3-button.select-button") + .GetElement(commonlocators.singleSelectWidgetButtonControl) .should("have.css", "border-color", "rgb(217, 25, 33)"); }); }, diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index 986c006820c..9fe519e15ad 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -72,6 +72,7 @@ "callApi": ".t--property-control-onpagechange .t--open-dropdown-Select-Action", "singleSelectMenuItem": ".bp3-menu-item.single-select div", "singleSelectWidgetMenuItem": ".menu-item-link", + "singleSelectWidgetButtonControl": ".bp3-button.select-button", "singleSelectActiveMenuItem": ".menu-item-active div", "selectInputSearch": ".select-popover-wrapper .bp3-input", "multiSelectMenuItem": "rc-select-item.rc-select-item-option div", From 02d894978cbbd2dc05f79f952da9d0ffc7b45abd Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Thu, 19 Sep 2024 01:50:48 +0100 Subject: [PATCH 10/14] abstract hideColumnByType to function + improve Table_select_validation_spec --- .../Table_select_validation_spec.ts | 80 ++++++++++++------- app/client/cypress/support/Pages/Table.ts | 18 +++-- .../PanelConfig/Validations/Common.ts | 42 ++++------ 3 files changed, 76 insertions(+), 64 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts index 42f2fa45dda..95ea7d23099 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts @@ -1,9 +1,35 @@ -import * as _ from "../../../../../../support/Objects/ObjectsCore"; +import commonlocators from "../../../../../../locators/commonlocators.json"; +import { + agHelper, + locators, + propPane, + table, +} from "../../../../../../support/Objects/ObjectsCore"; import EditorNavigation, { EntityType, } from "../../../../../../support/Pages/EditorNavigation"; -import commonlocators from "../../../../../../locators/commonlocators.json"; -import common from "mocha/lib/interfaces/common"; + +const hexToRgb = (hex: string) => { + const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); + + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` + : null; +}; + +const validateSelectBorderColor = (color: string) => { + agHelper + .GetElement(commonlocators.singleSelectWidgetButtonControl) + .then(($el) => { + const borderDangerColor = getComputedStyle($el[0]).getPropertyValue( + color, + ); + const borderDangerColorRgb = hexToRgb(borderDangerColor); + cy.wrap($el).should("have.css", "border-color", borderDangerColorRgb); + }); +}; describe( "Table widget - Select column validation", @@ -11,21 +37,21 @@ describe( () => { before(() => { cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 }); - _.table.AddSampleTableData(); + table.AddSampleTableData(); }); - it("1. should prevent adding a row when a required select column has no data", () => { + it.only("1. should prevent adding a row when a required select column has no data", () => { EditorNavigation.SelectEntityByName("Table1", EntityType.Widget); // Allow adding a row in table - _.propPane.TogglePropertyState("Allow adding a row", "On"); + propPane.TogglePropertyState("Allow adding a row", "On"); // Edit step column to select type - _.table.ChangeColumnType("step", "Select", "v2"); - _.table.EditColumn("step", "v2"); + table.ChangeColumnType("step", "Select", "v2"); + table.EditColumn("step", "v2"); // Add data to select options - _.agHelper.UpdateCodeInput( - _.locators._controlOption, + agHelper.UpdateCodeInput( + locators._controlOption, ` [ { @@ -45,45 +71,41 @@ describe( ); // Set step column to editable - _.propPane.TogglePropertyState("Editable", "On"); + propPane.TogglePropertyState("Editable", "On"); // Set step column to required - _.propPane.TogglePropertyState("Required", "On"); + propPane.TogglePropertyState("Required", "On"); // Click add a new row - _.table.AddNewRow(); + table.AddNewRow(); // Expect the save row button to be disabled - _.agHelper.GetElement(_.table._saveNewRow).should("be.disabled"); + agHelper.GetElement(table._saveNewRow).should("be.disabled"); // Expect select to have an error color - _.agHelper - .GetElement(commonlocators.singleSelectWidgetButtonControl) - .should("have.css", "border-color", "rgb(217, 25, 33)"); + validateSelectBorderColor("--wds-color-border-danger"); // Select a valid option from the select table cell - _.agHelper.GetNClick(commonlocators.singleSelectWidgetButtonControl); - _.agHelper + agHelper.GetNClick(commonlocators.singleSelectWidgetButtonControl); + agHelper .GetElement(commonlocators.singleSelectWidgetMenuItem) .contains("#1") .click(); // Expect the save row option to be enabled - _.agHelper.GetElement(_.table._saveNewRow).should("be.enabled"); + agHelper.GetElement(table._saveNewRow).should("be.enabled"); // Expect button to have a valid color - _.agHelper - .GetElement(commonlocators.singleSelectWidgetButtonControl) - .should("have.css", "border-color", "rgb(85, 61, 233)"); + validateSelectBorderColor("var(--wds-color-border)"); // Discard save new row - _.agHelper.GetElement(_.table._discardRow).click({ force: true }); + agHelper.GetElement(table._discardRow).click({ force: true }); }); it("2. should display an error when inline editing a required select cell in a table with no data", () => { // Update table data to create emtpy cell in step column - _.propPane.NavigateBackToPropertyPane(); - _.propPane.UpdatePropertyFieldValue( + propPane.NavigateBackToPropertyPane(); + propPane.UpdatePropertyFieldValue( "Table data", ` [ @@ -109,12 +131,10 @@ describe( ); // Click the first cell in the step column - (cy as any).editTableSelectCell(0, 0); + table.ClickOnEditIcon(0, 0, true); // Exect the select to have an error color - _.agHelper - .GetElement(commonlocators.singleSelectWidgetButtonControl) - .should("have.css", "border-color", "rgb(217, 25, 33)"); + validateSelectBorderColor("--wds-color-border-danger"); }); }, ); diff --git a/app/client/cypress/support/Pages/Table.ts b/app/client/cypress/support/Pages/Table.ts index 2f90efb052c..d1439a58927 100644 --- a/app/client/cypress/support/Pages/Table.ts +++ b/app/client/cypress/support/Pages/Table.ts @@ -638,18 +638,24 @@ export class Table { this.agHelper.GetNClick(colSettings); } - public ClickOnEditIcon(rowIndex: number, colIndex: number) { + public ClickOnEditIcon( + rowIndex: number, + colIndex: number, + isSelectColumn: boolean = false, + ) { this.agHelper.HoverElement(this._tableRow(rowIndex, colIndex, "v2")); this.agHelper.GetNClick( this._tableRow(rowIndex, colIndex, "v2") + " " + this._editCellIconDiv, 0, true, ); - this.agHelper.AssertElementVisibility( - this._tableRow(rowIndex, colIndex, "v2") + - " " + - this._editCellEditorInput, - ); + if (!isSelectColumn) { + this.agHelper.AssertElementVisibility( + this._tableRow(rowIndex, colIndex, "v2") + + " " + + this._editCellEditorInput, + ); + } } public EditTableCell( diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validations/Common.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validations/Common.ts index 7fbafc34fbd..78af47a0475 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validations/Common.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Validations/Common.ts @@ -6,6 +6,17 @@ import { getColumnPath, } from "widgets/TableWidgetV2/widget/propertyUtils"; +const hideColumnByType = (props: TableWidgetProps, propertyPath: string) => { + const path = getColumnPath(propertyPath); + + return showByColumnType( + props, + path, + [ColumnTypes.DATE, ColumnTypes.SELECT], + true, + ); +}; + export default [ { propertyName: "validation.regex", @@ -18,16 +29,7 @@ export default [ isBindProperty: true, isTriggerProperty: false, validation: { type: ValidationTypes.REGEX }, - hidden: (props: TableWidgetProps, propertyPath: string) => { - const path = getColumnPath(propertyPath); - - return showByColumnType( - props, - path, - [ColumnTypes.DATE, ColumnTypes.SELECT], - true, - ); - }, + hidden: hideColumnByType, }, { propertyName: "validation.isColumnEditableCellValid", @@ -44,15 +46,7 @@ export default [ default: true, }, }, - hidden: (props: TableWidgetProps, propertyPath: string) => { - const path = getColumnPath(propertyPath); - return showByColumnType( - props, - path, - [ColumnTypes.DATE, ColumnTypes.SELECT], - true, - ); - }, + hidden: hideColumnByType, }, { propertyName: "validation.errorMessage", @@ -65,15 +59,7 @@ export default [ isBindProperty: true, isTriggerProperty: false, validation: { type: ValidationTypes.TEXT }, - hidden: (props: TableWidgetProps, propertyPath: string) => { - const path = getColumnPath(propertyPath); - return showByColumnType( - props, - path, - [ColumnTypes.DATE, ColumnTypes.SELECT], - true, - ); - }, + hidden: hideColumnByType, }, { propertyName: "validation.isColumnEditableCellRequired", From 110e6fd5e80eefcc471d865d3cc408f25c77297b Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Thu, 19 Sep 2024 04:31:04 +0100 Subject: [PATCH 11/14] remove .only from test --- .../Widgets/TableV2/columnTypes/Table_select_validation_spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts index 95ea7d23099..c068b4d4da0 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts @@ -39,7 +39,7 @@ describe( cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 }); table.AddSampleTableData(); }); - it.only("1. should prevent adding a row when a required select column has no data", () => { + it("1. should prevent adding a row when a required select column has no data", () => { EditorNavigation.SelectEntityByName("Table1", EntityType.Widget); // Allow adding a row in table From 8a38ded0e49c1040c62049ac5ca846a7830f14ad Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Thu, 19 Sep 2024 10:55:20 +0100 Subject: [PATCH 12/14] remove reducndant check for border color in Table_select_validation_spec --- .../TableV2/columnTypes/Table_select_validation_spec.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts index c068b4d4da0..2e681210bd2 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts @@ -95,9 +95,6 @@ describe( // Expect the save row option to be enabled agHelper.GetElement(table._saveNewRow).should("be.enabled"); - // Expect button to have a valid color - validateSelectBorderColor("var(--wds-color-border)"); - // Discard save new row agHelper.GetElement(table._discardRow).click({ force: true }); }); From 17f9fbca8dbaffccf7f123a2d216b07e7c7314e6 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Fri, 20 Sep 2024 09:53:12 +0100 Subject: [PATCH 13/14] add const for select error and valid style --- .../Table_select_validation_spec.ts | 36 +++++++------------ 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts index 2e681210bd2..dc9878e07d9 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts @@ -9,27 +9,8 @@ import EditorNavigation, { EntityType, } from "../../../../../../support/Pages/EditorNavigation"; -const hexToRgb = (hex: string) => { - const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); - - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result - ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` - : null; -}; - -const validateSelectBorderColor = (color: string) => { - agHelper - .GetElement(commonlocators.singleSelectWidgetButtonControl) - .then(($el) => { - const borderDangerColor = getComputedStyle($el[0]).getPropertyValue( - color, - ); - const borderDangerColorRgb = hexToRgb(borderDangerColor); - cy.wrap($el).should("have.css", "border-color", borderDangerColorRgb); - }); -}; +const TABLE_SELECT_WIDGET_ERROR_BORDER = "rgb(217, 25, 33)"; +const TABLE_SELECT_WIDGET_VALID_BORDER = "rgb(85, 61, 233)"; describe( "Table widget - Select column validation", @@ -83,7 +64,9 @@ describe( agHelper.GetElement(table._saveNewRow).should("be.disabled"); // Expect select to have an error color - validateSelectBorderColor("--wds-color-border-danger"); + agHelper + .GetElement(commonlocators.singleSelectWidgetButtonControl) + .should("have.css", "border-color", TABLE_SELECT_WIDGET_ERROR_BORDER); // Select a valid option from the select table cell agHelper.GetNClick(commonlocators.singleSelectWidgetButtonControl); @@ -95,6 +78,11 @@ describe( // Expect the save row option to be enabled agHelper.GetElement(table._saveNewRow).should("be.enabled"); + // Expect button to have a valid color + agHelper + .GetElement(commonlocators.singleSelectWidgetButtonControl) + .should("have.css", "border-color", TABLE_SELECT_WIDGET_VALID_BORDER); + // Discard save new row agHelper.GetElement(table._discardRow).click({ force: true }); }); @@ -131,7 +119,9 @@ describe( table.ClickOnEditIcon(0, 0, true); // Exect the select to have an error color - validateSelectBorderColor("--wds-color-border-danger"); + agHelper + .GetElement(commonlocators.singleSelectWidgetButtonControl) + .should("have.css", "border-color", TABLE_SELECT_WIDGET_ERROR_BORDER); }); }, ); From d2597e6a26938f2b99f2f997fca7bc110e5c2091 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Fri, 20 Sep 2024 11:48:25 +0100 Subject: [PATCH 14/14] replace cy.dragAndDropToCanvas with entityExplorer.DragNDropWidget --- .../TableV2/columnTypes/Table_select_validation_spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts index dc9878e07d9..cb440837abc 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Table_select_validation_spec.ts @@ -1,6 +1,7 @@ import commonlocators from "../../../../../../locators/commonlocators.json"; import { agHelper, + entityExplorer, locators, propPane, table, @@ -17,7 +18,7 @@ describe( { tags: ["@tag.Widget", "@tag.Table", "@tag.Select"] }, () => { before(() => { - cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 }); + entityExplorer.DragNDropWidget("tablewidgetv2", 350, 500); table.AddSampleTableData(); }); it("1. should prevent adding a row when a required select column has no data", () => {