diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx new file mode 100644 index 0000000000..add2c666c8 --- /dev/null +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx @@ -0,0 +1,64 @@ +// eslint-disable-next-line +// @ts-nocheck +import { defaultSelectedValuesValidation } from "./"; + +describe("", () => { + test("should return empty parsed array on null options", async () => { + const result = defaultSelectedValuesValidation("", { + options: null, + }); + + expect(result).toStrictEqual({ isValid: true, parsed: [] }); + }); + + test("should return parsed array on valid single default option as string", async () => { + const result = defaultSelectedValuesValidation("blue", { + options: [ + { + label: "blue", + value: "blue", + }, + { + label: "green", + value: "green", + }, + ], + }); + + expect(result).toStrictEqual({ isValid: true, parsed: ["blue"] }); + }); + + test("should return parsed array on multiple default options as string ", async () => { + const result = defaultSelectedValuesValidation("blue,green", { + options: [ + { + label: "blue", + value: "blue", + }, + { + label: "green", + value: "green", + }, + ], + }); + + expect(result).toStrictEqual({ isValid: true, parsed: ["blue", "green"] }); + }); + + test("should return parsed array on multiple default options as array ", async () => { + const result = defaultSelectedValuesValidation(`["blue"]`, { + options: [ + { + label: "blue", + value: "blue", + }, + { + label: "green", + value: "green", + }, + ], + }); + + expect(result).toStrictEqual({ isValid: true, parsed: ["blue"] }); + }); +}); diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx index b5bdc26e86..586472cdbe 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx @@ -1,27 +1,24 @@ import React from "react"; -import BaseWidget, { WidgetProps, WidgetState } from "widgets/BaseWidget"; -import { WidgetType } from "constants/WidgetConstants"; -import { EventType } from "constants/AppsmithActionConstants/ActionConstants"; +import { compact } from "lodash"; + import { ValidationResponse, ValidationTypes, } from "constants/WidgetValidation"; +import { WidgetType } from "constants/WidgetConstants"; import { DerivedPropertiesMap } from "utils/WidgetFactory"; +import BaseWidget, { WidgetProps, WidgetState } from "widgets/BaseWidget"; +import { EventType } from "constants/AppsmithActionConstants/ActionConstants"; -import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory"; -import CheckboxGroupComponent, { OptionProps } from "../component"; import { AutocompleteDataType } from "utils/autocomplete/TernServer"; +import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory"; -function defaultSelectedValuesValidation( +import CheckboxGroupComponent, { OptionProps } from "../component"; + +export function defaultSelectedValuesValidation( value: unknown, - props: CheckboxGroupWidgetProps, ): ValidationResponse { - let isValid = true; let values: string[] = []; - const messages: string[] = []; - const { options } = props; - - const optionValues = options.map((option) => option.value); if (typeof value === "string") { try { @@ -36,28 +33,14 @@ function defaultSelectedValuesValidation( } } } + if (Array.isArray(value)) { values = Array.from(new Set(value)); } - values.forEach((value, index) => { - if (!optionValues.includes(value)) { - isValid = false; - messages.push(`Mismatching value: ${value} at: ${index}`); - } - }); - - if (isValid) { - return { - isValid: true, - parsed: values, - }; - } - return { - isValid: false, + isValid: true, parsed: values, - messages, }; } @@ -81,22 +64,27 @@ class CheckboxGroupWidget extends BaseWidget< validation: { type: ValidationTypes.ARRAY, params: { + default: [], + unique: ["value"], children: { type: ValidationTypes.OBJECT, params: { + required: true, allowedKeys: [ { name: "label", type: ValidationTypes.TEXT, params: { - unique: true, + default: "", + required: true, }, }, { name: "value", type: ValidationTypes.TEXT, params: { - unique: true, + default: "", + required: true, }, }, ], @@ -218,10 +206,10 @@ class CheckboxGroupWidget extends BaseWidget< Array.isArray(this.props.options) && this.props.options.length !== prevProps.options.length ) { - const prevOptions = prevProps.options.map( + const prevOptions = compact(prevProps.options).map( (prevOption) => prevOption.value, ); - const options = this.props.options.map((option) => option.value); + const options = compact(this.props.options).map((option) => option.value); const diffOptions = prevOptions.filter( (prevOption) => !options.includes(prevOption), @@ -250,7 +238,7 @@ class CheckboxGroupWidget extends BaseWidget< isValid={this.props.isValid} key={this.props.widgetId} onChange={this.handleCheckboxChange} - options={this.props.options} + options={compact(this.props.options)} rowSpace={this.props.parentRowSpace} selectedValues={this.props.selectedValues} widgetId={this.props.widgetId}