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

fix: added label tooltips, updated validation messages.

Browse Source
This commit is contained in:
Arsalan Yaldram 2022-11-26 17:47:10 +05:30 committed by GitHub
parent a00dedb625
commit 63a25ee547
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 58 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts
View File

@ -85,13 +85,13 @@ describe("Number Slider spec", () => {
propPane.UpdatePropertyFieldValue("Default Value", "-10");
agHelper.VerifyEvaluatedErrorMessage(
"This value must be greater than min value",
"This value must be greater than or equal to the min value",
);
propPane.UpdatePropertyFieldValue("Default Value", "110");
agHelper.VerifyEvaluatedErrorMessage(
"This value must be less than max value",
"This value must be less than or equal to the max value",
);
propPane.UpdatePropertyFieldValue("Default Value", "asd");

16
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts
View File

@ -39,8 +39,6 @@ describe("Range Slider spec", () => {
agHelper.VerifyEvaluatedErrorMessage("This value must be a number");
propPane.UpdatePropertyFieldValue("Min. Value", "0");
// agHelper.VerifyEvaluatedValue("0");
});
it("2. Validates Max. Value", () => {
@ -59,8 +57,6 @@ describe("Range Slider spec", () => {
agHelper.VerifyEvaluatedErrorMessage("This value must be a number");
propPane.UpdatePropertyFieldValue("Max. Value", "100");
// agHelper.VerifyEvaluatedValue("100");
});
it("3. Validates Step Size", () => {
@ -79,8 +75,6 @@ describe("Range Slider spec", () => {
agHelper.VerifyEvaluatedErrorMessage("This value must be a number");
propPane.UpdatePropertyFieldValue("Step Size", "1");
// agHelper.VerifyEvaluatedValue("1");
});
it("4. Validates Min Range", () => {
@ -101,15 +95,13 @@ describe("Range Slider spec", () => {
agHelper.VerifyEvaluatedErrorMessage("This value must be less than 100");
propPane.UpdatePropertyFieldValue("Min. Range", "10");
// agHelper.VerifyEvaluatedValue("10");
});
it("5. Validates Default Start Value", () => {
propPane.UpdatePropertyFieldValue("Default Start Value", "-100");
agHelper.VerifyEvaluatedErrorMessage(
"This value must be greater than min value",
"This value must be greater than or equal to the min value",
);
propPane.UpdatePropertyFieldValue("Default Start Value", "110");
@ -123,8 +115,6 @@ describe("Range Slider spec", () => {
agHelper.VerifyEvaluatedErrorMessage("This value must be a number");
propPane.UpdatePropertyFieldValue("Default Start Value", "10");
// agHelper.VerifyEvaluatedValue("10");
});
it("6. Validates Default End Value", () => {
@ -137,7 +127,7 @@ describe("Range Slider spec", () => {
propPane.UpdatePropertyFieldValue("Default End Value", "110");
agHelper.VerifyEvaluatedErrorMessage(
"This value must be less than max value",
"This value must be less than or equal to the max value",
);
propPane.UpdatePropertyFieldValue("Default End Value", "asd");
@ -145,8 +135,6 @@ describe("Range Slider spec", () => {
agHelper.VerifyEvaluatedErrorMessage("This value must be a number");
propPane.UpdatePropertyFieldValue("Default End Value", "100");
// agHelper.VerifyEvaluatedValue("100");
});
it("7. Change Step Size and check if binding value changes", () => {

4
app/client/src/widgets/CategorySliderWidget/index.ts
View File

@ -21,9 +21,9 @@ export const CONFIG = {
defaultOptionValue: "md",
isVisible: true,
isDisabled: false,
showMarksLabel: false,
showMarksLabel: true,
rows: 8,
columns: 42,
columns: 40,
widgetName: "CategorySlider",
shouldScroll: false,
shouldTruncate: false,

1
app/client/src/widgets/CategorySliderWidget/widget/index.tsx
View File

@ -140,6 +140,7 @@ class CategorySliderWidget extends BaseWidget<
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
loading={this.props.isLoading}
marks={sliderOptions}

10
app/client/src/widgets/CategorySliderWidget/widget/propertyConfig/contentConfig.ts
View File

@ -135,6 +135,16 @@ export default [
{
sectionName: "General",
children: [
{
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 },
},
{
propertyName: "showMarksLabel",
helpText: "Controls the visibility of the marks Label widget",

5
app/client/src/widgets/NumberSliderWidget/component/Slider.tsx
View File

@ -51,6 +51,9 @@ export interface SliderComponentProps
/** If true label will be not be hidden when user stops dragging */
tooltipAlwaysOn: boolean;
/** helpText for the label tooltip */
labelTooltip?: string;
/** Disables slider */
disabled?: boolean;
@ -95,6 +98,7 @@ const SliderComponent = (props: SliderComponentProps) => {
labelText,
labelTextColor,
labelTextSize,
labelTooltip,
labelWidth,
loading,
marks,
@ -207,6 +211,7 @@ const SliderComponent = (props: SliderComponentProps) => {
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}
helpText={labelTooltip}
loading={loading}
position={labelPosition}
text={labelText}

2
app/client/src/widgets/NumberSliderWidget/index.ts
View File

@ -25,7 +25,7 @@ export const CONFIG = {
isDisabled: false,
tooltipAlwaysOn: false,
rows: 8,
columns: 38,
columns: 40,
widgetName: "NumberSlider",
shouldScroll: false,
shouldTruncate: false,

4
app/client/src/widgets/NumberSliderWidget/validations.ts
View File

@ -107,7 +107,7 @@ export function defaultValueValidation(
return {
isValid: false,
parsed: undefined,
messages: ["This value must be greater than min value"],
messages: ["This value must be greater than or equal to the min value"],
};
}
@ -115,7 +115,7 @@ export function defaultValueValidation(
return {
isValid: false,
parsed: undefined,
messages: ["This value must be less than max value"],
messages: ["This value must be less than or equal to the max value"],
};
}

1
app/client/src/widgets/NumberSliderWidget/widget/index.tsx
View File

@ -103,6 +103,7 @@ class NumberSliderWidget extends BaseWidget<
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
loading={this.props.isLoading}
// If showMarks is off don't show marks at all

12
app/client/src/widgets/NumberSliderWidget/widget/propertyConfig/contentConfig.ts
View File

@ -170,6 +170,16 @@ export default [
{
sectionName: "General",
children: [
{
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 },
},
{
propertyName: "showMarksLabel",
helpText: "Show the marks label below the slider",
@ -255,7 +265,7 @@ export default [
{
propertyName: "tooltipAlwaysOn",
helpText: "Keep showing the tooltip with value",
label: "Tooltip Always On",
label: "Show value always",
controlType: "SWITCH",
isJSConvertible: true,
isBindProperty: true,

5
app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx
View File

@ -64,6 +64,9 @@ export interface RangeSliderComponentProps
/** If true label will be not be hidden when user stops dragging */
tooltipAlwaysOn: boolean;
/** helpText for the label tooltip */
labelTooltip?: string;
/** Disables slider */
disabled?: boolean;
@ -106,6 +109,7 @@ const RangeSliderComponent = (props: RangeSliderComponentProps) => {
labelText,
labelTextColor,
labelTextSize,
labelTooltip,
labelWidth,
loading,
marks,
@ -314,6 +318,7 @@ const RangeSliderComponent = (props: RangeSliderComponentProps) => {
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}
helpText={labelTooltip}
loading={loading}
position={labelPosition}
text={labelText}

2
app/client/src/widgets/RangeSliderWidget/index.ts
View File

@ -31,7 +31,7 @@ export const CONFIG = {
labelWidth: 8,
labelTextSize: "0.875rem",
rows: 8,
columns: 38,
columns: 40,
widgetName: "RangeSlider",
shouldScroll: false,
shouldTruncate: false,

4
app/client/src/widgets/RangeSliderWidget/validations.ts
View File

@ -168,7 +168,7 @@ export function startValueValidation(
return {
isValid: false,
parsed: undefined,
messages: ["This value must be greater than min value"],
messages: ["This value must be greater than or equal to the min value"],
};
}
@ -216,7 +216,7 @@ export function endValueValidation(
return {
isValid: false,
parsed: undefined,
messages: ["This value must be less than max value"],
messages: ["This value must be less than or equal to the max value"],
};
}

3
app/client/src/widgets/RangeSliderWidget/widget/index.tsx
View File

@ -135,9 +135,10 @@ class RangeSliderWidget extends BaseWidget<
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
loading={this.props.isLoading}
// If showMarks is off don't show marks at all
loading={this.props.isLoading}
marks={this.props.showMarksLabel ? this.props.marks : []}
max={this.props.max}
min={this.props.min}

12
app/client/src/widgets/RangeSliderWidget/widget/propertyConfig/contentConfig.ts
View File

@ -212,6 +212,16 @@ export default [
{
sectionName: "General",
children: [
{
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 },
},
{
propertyName: "showMarksLabel",
helpText: "Show the marks label below the slider",
@ -297,7 +307,7 @@ export default [
{
propertyName: "tooltipAlwaysOn",
helpText: "Keep showing the label with value",
label: "Tooltip Always On",
label: "Show value always",
controlType: "SWITCH",
isJSConvertible: true,
isBindProperty: true,