feat: add tooltip property to select widgets (#18480)

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
+            }
+        ]
+    }
+}

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");
+  });
+});

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");
+  });
 });

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

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");
+  });
 });

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

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;
 }

app/client/src/widgets/DatePickerWidget2/widget/index.tsx

@@ -230,6 +230,16 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
       {
         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<DatePickerWidget2Props, WidgetState> {
         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}

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}

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",

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}

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 },

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}

app/client/src/widgets/SelectWidget/widget/index.tsx

@@ -319,11 +319,11 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
         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 },

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}

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 },