diff --git a/app/client/cypress/fixtures/datePickerV2Updated_dsl.json b/app/client/cypress/fixtures/datePickerV2Updated_dsl.json new file mode 100644 index 0000000000..61125cb2bc --- /dev/null +++ b/app/client/cypress/fixtures/datePickerV2Updated_dsl.json @@ -0,0 +1,80 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1290, + "containerStyle": "none", + "snapRows": 125, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 70, + "minHeight": 1292, + "dynamicTriggerPathList": [], + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "boxShadow": "none", + "widgetName": "DatePicker1", + "minDate": "1920-12-31T18:30:00.000Z", + "dateFormat": "YYYY-MM-DD HH:mm", + "displayName": "DatePicker", + "iconSVG": "/static/media/icon.300e5ab8e2e1c26c7a0bad06116842b7.svg", + "searchTags": [ + "calendar" + ], + "topRow": 17, + "bottomRow": 24, + "shortcuts": false, + "parentRowSpace": 10, + "labelWidth": 5, + "type": "DATE_PICKER_WIDGET2", + "hideCard": false, + "animateLoading": true, + "parentColumnSpace": 12.5625, + "leftColumn": 17, + "dynamicBindingPathList": [ + { + "key": "accentColor" + }, + { + "key": "borderRadius" + } + ], + "labelPosition": "Top", + "isDisabled": false, + "key": "g3ofr85rxv", + "labelTextSize": "0.875rem", + "isRequired": false, + "defaultDate": "2022-12-07T10:48:26.097Z", + "isDeprecated": false, + "rightColumn": 37, + "dynamicHeight": "FIXED", + "widgetId": "0ssaj11vm0", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "Label", + "version": 2, + "parentId": "0", + "labelAlignment": "left", + "renderMode": "CANVAS", + "isLoading": false, + "timePrecision": "minute", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "maxDynamicHeight": 9000, + "firstDayOfWeek": 0, + "closeOnSelection": true, + "maxDate": "2121-12-31T18:29:00.000Z", + "minDynamicHeight": 4 + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Datepicker/DatePickerV2Updated_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Datepicker/DatePickerV2Updated_spec.js new file mode 100644 index 0000000000..daa5c2b16f --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Datepicker/DatePickerV2Updated_spec.js @@ -0,0 +1,27 @@ +const dsl = require("../../../../../fixtures/datePickerV2Updated_dsl.json"); +const widgetsPage = require("../../../../../locators/Widgets.json"); +import { ObjectsRegistry } from "../../../../../support/Objects/Registry"; + +let agHelper = ObjectsRegistry.AggregateHelper; + +describe("DatePicker Widget Property pane tests with js bindings", function() { + beforeEach(() => { + agHelper.RestoreLocalStorageCache(); + }); + + afterEach(() => { + agHelper.SaveLocalStorageCache(); + }); + + before(() => { + cy.addDsl(dsl); + }); + + it("1. Datepicker tooltip renders if tooltip prop is not empty", () => { + cy.openPropertyPane("datepickerwidget2"); + // enter tooltip in property pan + cy.get(widgetsPage.inputTooltipControl).type("Helpful text for tooltip !"); + // tooltip help icon shows + cy.get(".datepicker-tooltip").should("be.visible"); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/MultiSelect4_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/MultiSelect4_spec.js index d4c601e02a..f6b261e7b3 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/MultiSelect4_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/MultiSelect4_spec.js @@ -16,7 +16,7 @@ describe("MultiSelect Widget Functionality", function() { beforeEach(() => { cy.wait(3000); }); - it("Add new multiselect widget", () => { + it("1. Add new multiselect widget", () => { cy.get(explorer.addWidget).click(); cy.dragAndDropToCanvas("multiselectwidgetv2", { x: 300, y: 300 }); cy.get(".t--widget-multiselectwidgetv2").should("exist"); @@ -43,7 +43,7 @@ describe("MultiSelect Widget Functionality", function() { ); }); - it("Copy and paste multiselect widget", () => { + it("2. Copy and paste multiselect widget", () => { cy.openPropertyPane("multiselectwidgetv2"); const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl"; //copy and paste @@ -74,4 +74,12 @@ describe("MultiSelect Widget Functionality", function() { } catch (error) {} }); }); + + it("3. Select tooltip renders if tooltip prop is not empty", () => { + cy.openPropertyPane("multiselectwidgetv2"); + // enter tooltip in property pan + cy.get(widgetsPage.inputTooltipControl).type("Helpful text for tooltip !"); + // tooltip help icon shows + cy.get(".multiselect-tooltip").should("be.visible"); + }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/Multi_Select_Tree_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/Multi_Select_Tree_spec.js index 1b95c5c663..82ffbe51e9 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/Multi_Select_Tree_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/Multi_Select_Tree_spec.js @@ -3,6 +3,7 @@ const formWidgetsPage = require("../../../../../locators/FormWidgets.json"); const publish = require("../../../../../locators/publishWidgetspage.json"); const commonlocators = require("../../../../../locators/commonlocators.json"); const explorer = require("../../../../../locators/explorerlocators.json"); +const widgetsPage = require("../../../../../locators/Widgets.json"); describe("MultiSelectTree Widget Functionality", function() { before(() => { @@ -119,6 +120,16 @@ describe("MultiSelectTree Widget Functionality", function() { "No Results Found", ); }); + + it("8. Select tooltip renders if tooltip prop is not empty", () => { + cy.openPropertyPane("multiselecttreewidget"); + // enter tooltip in property pan + cy.get(widgetsPage.inputTooltipControl).type("Helpful text for tooltip !"); + // tooltip help icon shows + cy.get(".multitree-select-tooltip") + .scrollIntoView() + .should("be.visible"); + }); }); afterEach(() => { // put your clean up code if any diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Select_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Select_spec.js index 8618219792..c814044bcf 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Select_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Select_spec.js @@ -2,6 +2,7 @@ const explorer = require("../../../../../locators/explorerlocators.json"); const commonlocators = require("../../../../../locators/commonlocators.json"); const formWidgetsPage = require("../../../../../locators/FormWidgets.json"); const widgetLocators = require("../../../../../locators/Widgets.json"); +const widgetsPage = require("../../../../../locators/Widgets.json"); describe("Select widget", () => { it("1. Drag and drop Select/Text widgets", () => { @@ -79,4 +80,12 @@ describe("Select widget", () => { .invoke("val") .should("not.be.empty"); }); + + it("5. Select tooltip renders if tooltip prop is not empty", () => { + cy.openPropertyPane("selectwidget"); + // enter tooltip in property pan + cy.get(widgetsPage.inputTooltipControl).type("Helpful text for tooltip !"); + // tooltip help icon shows + cy.get(".select-tooltip").should("be.visible"); + }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js index e783da1c78..2428d22563 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js @@ -2,6 +2,7 @@ const dsl = require("../../../../../fixtures/TreeSelectDsl.json"); const formWidgetsPage = require("../../../../../locators/FormWidgets.json"); const publish = require("../../../../../locators/publishWidgetspage.json"); const commonlocators = require("../../../../../locators/commonlocators.json"); +const widgetsPage = require("../../../../../locators/Widgets.json"); describe("Single Select Widget Functionality", function() { before(() => { @@ -133,6 +134,14 @@ describe("Single Select Widget Functionality", function() { "select option", ); }); + + it("9. Select tooltip renders if tooltip prop is not empty", () => { + cy.openPropertyPane("singleselecttreewidget"); + // enter tooltip in property pan + cy.get(widgetsPage.inputTooltipControl).type("Helpful text for tooltip !"); + // tooltip help icon shows + cy.get(".tree-select-tooltip").should("be.visible"); + }); }); afterEach(() => { // put your clean up code if any diff --git a/app/client/src/widgets/DatePickerWidget2/component/index.tsx b/app/client/src/widgets/DatePickerWidget2/component/index.tsx index cd979e88aa..292881d345 100644 --- a/app/client/src/widgets/DatePickerWidget2/component/index.tsx +++ b/app/client/src/widgets/DatePickerWidget2/component/index.tsx @@ -178,6 +178,7 @@ class DatePickerComponent extends React.Component< labelText, labelTextColor, labelTextSize, + labelTooltip, labelWidth, } = this.props; const now = moment(); @@ -311,9 +312,11 @@ class DatePickerComponent extends React.Component< className={`datepicker-label`} color={labelTextColor} compact={compactMode} + cyHelpTextClassName="datepicker-tooltip" disabled={isDisabled} fontSize={labelTextSize} fontStyle={labelStyle} + helpText={labelTooltip} isDynamicHeightEnabled={this.props.isDynamicHeightEnabled} loading={isLoading} position={labelPosition} @@ -468,6 +471,7 @@ interface DatePickerComponentProps extends ComponentProps { borderRadius: string; boxShadow?: string; accentColor: string; + labelTooltip?: string; onFocus?: () => void; onBlur?: () => void; } diff --git a/app/client/src/widgets/DatePickerWidget2/widget/index.tsx b/app/client/src/widgets/DatePickerWidget2/widget/index.tsx index e53df6d6b0..f2d8ad18e7 100644 --- a/app/client/src/widgets/DatePickerWidget2/widget/index.tsx +++ b/app/client/src/widgets/DatePickerWidget2/widget/index.tsx @@ -230,6 +230,16 @@ class DatePickerWidget extends BaseWidget { { sectionName: "General", children: [ + { + helpText: "Show help text or details about current selection", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Add tooltip text here", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { propertyName: "isVisible", label: "Visible", @@ -505,6 +515,7 @@ class DatePickerWidget extends BaseWidget { labelText={this.props.label} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} maxDate={this.props.maxDate} minDate={this.props.minDate} diff --git a/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx b/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx index c308bbde3f..a44e4b538b 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx +++ b/app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx @@ -250,6 +250,7 @@ function MultiTreeSelectComponent({ className={`multitree-select-label`} color={labelTextColor} compact={compactMode} + cyHelpTextClassName="multitree-select-tooltip" disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} diff --git a/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx b/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx index 9ae8576ad7..c32859c9b9 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx @@ -237,6 +237,16 @@ class MultiSelectTreeWidget extends BaseWidget< { sectionName: "General", children: [ + { + helpText: "Show help text or details about current selection", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Add tooltip text here", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { helpText: "Mode to Display options", propertyName: "mode", @@ -259,16 +269,6 @@ class MultiSelectTreeWidget extends BaseWidget< isBindProperty: false, isTriggerProperty: false, }, - { - helpText: "Show help text or details about current input", - propertyName: "labelTooltip", - label: "Tooltip", - controlType: "INPUT_TEXT", - placeholderText: "Value must be atleast 6 chars", - isBindProperty: true, - isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, - }, { helpText: "Sets a Placeholder Text", propertyName: "placeholderText", diff --git a/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx b/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx index 9c736fc0a5..c6e7a33cbc 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx +++ b/app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx @@ -310,6 +310,7 @@ function MultiSelectComponent({ className={`multiselect-label`} color={labelTextColor} compact={compactMode} + cyHelpTextClassName="multiselect-tooltip" disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} diff --git a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx index d98039e0b6..978893d2a8 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx @@ -383,11 +383,11 @@ class MultiSelectWidget extends BaseWidget< sectionName: "General", children: [ { - helpText: "Show help text or details about current input", + helpText: "Show help text or details about current selection", propertyName: "labelTooltip", label: "Tooltip", controlType: "INPUT_TEXT", - placeholderText: "Value must be atleast 6 chars", + placeholderText: "Add tooltip text here", isBindProperty: true, isTriggerProperty: false, validation: { type: ValidationTypes.TEXT }, diff --git a/app/client/src/widgets/SelectWidget/component/index.tsx b/app/client/src/widgets/SelectWidget/component/index.tsx index 60809bcbbb..2d991fc656 100644 --- a/app/client/src/widgets/SelectWidget/component/index.tsx +++ b/app/client/src/widgets/SelectWidget/component/index.tsx @@ -339,6 +339,7 @@ class SelectComponent extends React.Component< className={`select-label`} color={labelTextColor} compact={compactMode} + cyHelpTextClassName="select-tooltip" disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} diff --git a/app/client/src/widgets/SelectWidget/widget/index.tsx b/app/client/src/widgets/SelectWidget/widget/index.tsx index 4e1e347219..22bde6edf4 100644 --- a/app/client/src/widgets/SelectWidget/widget/index.tsx +++ b/app/client/src/widgets/SelectWidget/widget/index.tsx @@ -319,11 +319,11 @@ class SelectWidget extends BaseWidget { sectionName: "General", children: [ { - helpText: "Show help text or details about current input", + helpText: "Show help text or details about current selection", propertyName: "labelTooltip", label: "Tooltip", controlType: "INPUT_TEXT", - placeholderText: "Value must be atleast 6 chars", + placeholderText: "Add tooltip text here", isBindProperty: true, isTriggerProperty: false, validation: { type: ValidationTypes.TEXT }, diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx index 1513692dcb..6a1a16f100 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx @@ -262,6 +262,7 @@ function SingleSelectTreeComponent({ className={`tree-select-label`} color={labelTextColor} compact={compactMode} + cyHelpTextClassName="tree-select-tooltip" disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} diff --git a/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx index cccf41b765..0f48c97029 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx @@ -223,11 +223,11 @@ class SingleSelectTreeWidget extends BaseWidget< sectionName: "General", children: [ { - helpText: "Show help text or details about current input", + helpText: "Show help text or details about current selection", propertyName: "labelTooltip", label: "Tooltip", controlType: "INPUT_TEXT", - placeholderText: "Value must be atleast 6 chars", + placeholderText: "Add tooltip text here", isBindProperty: true, isTriggerProperty: false, validation: { type: ValidationTypes.TEXT },