Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rishabh Kashyap 2022-12-13 16:05:08 +05:30 committed by GitHub
parent 236214f182
commit 26c01b35e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 181 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
app/client/cypress/fixtures/datePickerV2Updated_dsl.json Normal file
View File

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

27
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Datepicker/DatePickerV2Updated_spec.js Normal file
View File

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

12
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/MultiSelect4_spec.js
View File

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

11
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/Multi_Select_Tree_spec.js
View File

@ -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

9
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Select_spec.js
View File

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

9
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js
View File

@ -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

4
app/client/src/widgets/DatePickerWidget2/component/index.tsx
View File

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

11
app/client/src/widgets/DatePickerWidget2/widget/index.tsx
View File

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

1
app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
View File

@ -250,6 +250,7 @@ function MultiTreeSelectComponent({
className={`multitree-select-label`}
color={labelTextColor}
compact={compactMode}
cyHelpTextClassName="multitree-select-tooltip"
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}

20
app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx
View File

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

1
app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx
View File

@ -310,6 +310,7 @@ function MultiSelectComponent({
className={`multiselect-label`}
color={labelTextColor}
compact={compactMode}
cyHelpTextClassName="multiselect-tooltip"
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}

4
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx
View File

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

1
app/client/src/widgets/SelectWidget/component/index.tsx
View File

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

4
app/client/src/widgets/SelectWidget/widget/index.tsx
View File

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

1
app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
View File

@ -262,6 +262,7 @@ function SingleSelectTreeComponent({
className={`tree-select-label`}
color={labelTextColor}
compact={compactMode}
cyHelpTextClassName="tree-select-tooltip"
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}

4
app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx
View File

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