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

fix: Change multiselect back to supporting numbers and boolean. (#7895)

Browse Source 
* Revert "fix: multiselect validation (#7698)"

This reverts commit 728a2559c5.

* - Convert the multiselect options value and labels to string before filtering as the values can be numbers.

* - Discourage users from using string in multiselect default value

Co-authored-by: Satish Gandham <satish@appsmith.com>
This commit is contained in:
Satish Gandham 2021-09-28 19:38:24 +05:30 committed by GitHub
parent 883b0215a6
commit c3d5b1010b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/client/src/widgets/MultiSelectWidget/component/index.tsx
View File

@ -99,10 +99,16 @@ function MultiSelectComponent({
[isSelectAll, options, loading],
);
// Convert the values to string before searching.
// input is always a string.
const filterOption = useCallback(
(input, option) =>
option?.props.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
option?.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0,
String(option?.props.label)
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0 ||
String(option?.props.value)
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0,
[],
);

8
app/client/src/widgets/MultiSelectWidget/widget/index.tsx
View File

@ -71,6 +71,7 @@ class MultiSelectWidget extends BaseWidget<
name: "label",
type: ValidationTypes.TEXT,
params: {
default: "",
required: true,
},
},
@ -78,6 +79,7 @@ class MultiSelectWidget extends BaseWidget<
name: "value",
type: ValidationTypes.TEXT,
params: {
default: "",
required: true,
},
},
@ -94,7 +96,7 @@ class MultiSelectWidget extends BaseWidget<
propertyName: "defaultOptionValue",
label: "Default Value",
controlType: "INPUT_TEXT",
placeholderText: "GREEN",
placeholderText: "[GREEN]",
isBindProperty: true,
isTriggerProperty: false,
validation: {
@ -102,8 +104,8 @@ class MultiSelectWidget extends BaseWidget<
params: {
fn: defaultOptionValueValidation,
expected: {
type: "value or Array of values",
example: `option1 | ['option1', 'option2']`,
type: "Array of values",
example: `['option1', 'option2']`,
autocompleteDataType: AutocompleteDataType.ARRAY,
},
},

223
app/client/src/workers/validations.test.ts
View File

@ -962,229 +962,6 @@ describe("Validate Validators", () => {
expect(result).toStrictEqual(expected);
});
});
it("correctly validates objects", () => {
const inputs = [
{
label: true,
value: "true",
},
{
label: true,
value: "true",
},
{
paletteColors1: "#ffffff",
palettecolors2: "#ffffff",
},
];
const config = [
{
type: ValidationTypes.OBJECT,
params: {
required: true,
allowedKeys: [
{
name: "label",
type: ValidationTypes.TEXT,
params: {
required: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
required: true,
unique: true,
},
},
],
},
},
{
type: ValidationTypes.OBJECT,
params: {
required: true,
allowedKeys: [
{
name: "label",
type: ValidationTypes.BOOLEAN,
params: {
required: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
required: true,
unique: true,
},
},
],
},
},
{
type: ValidationTypes.OBJECT,
params: {
allowedKeys: [
{
name: "paletteColors1",
type: ValidationTypes.TEXT,
params: {
strict: true,
},
},
{
name: "paletteColors2",
type: ValidationTypes.TEXT,
params: {
strict: true,
ignoreCase: true,
},
},
],
},
},
];
const expected = [
{
isValid: true,
parsed: {
label: "true",
value: "true",
},
},
{
isValid: true,
parsed: { label: true, value: "true" },
},
{
isValid: true,
parsed: {
paletteColors1: "#ffffff",
palettecolors2: "#ffffff",
},
},
];
inputs.forEach((input, index) => {
const result = validate(config[index], input, DUMMY_WIDGET);
expect(result).toStrictEqual(expected[index]);
});
});
it("correctly validates objects to fail", () => {
const inputs = [
{
labels: true,
values: "true",
},
{
label: true,
},
{
paletteColors1: "#ffffff",
palettecolors2: 3,
},
];
const config = [
{
type: ValidationTypes.OBJECT,
params: {
required: true,
allowedKeys: [
{
name: "label",
type: ValidationTypes.TEXT,
params: {
required: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
required: true,
unique: true,
},
},
],
},
},
{
type: ValidationTypes.OBJECT,
params: {
required: true,
allowedKeys: [
{
name: "label",
type: ValidationTypes.BOOLEAN,
params: {
required: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
required: true,
unique: true,
},
},
],
},
},
{
type: ValidationTypes.OBJECT,
params: {
allowedKeys: [
{
name: "paletteColors1",
type: ValidationTypes.TEXT,
params: {
strict: true,
},
},
{
name: "paletteColors2",
type: ValidationTypes.TEXT,
params: {
strict: true,
ignoreCase: true,
},
},
],
},
},
];
const expected = [
{
isValid: false,
parsed: {
labels: true,
values: "true",
},
message: "Missing required key: label Missing required key: value",
},
{
isValid: false,
message: "Missing required key: value",
parsed: { label: true },
},
{
isValid: false,
message:
"Value of key: palettecolors2 is invalid: This value does not evaluate to type string",
parsed: {
paletteColors1: "#ffffff",
palettecolors2: "",
},
},
];
inputs.forEach((input, index) => {
const result = validate(config[index], input, DUMMY_WIDGET);
expect(result).toStrictEqual(expected[index]);
});
});
});
// describe("Color Picker Text validator", () => {

9
app/client/src/workers/validations.ts
View File

@ -54,7 +54,6 @@ function validatePlainObject(
if (config.params?.allowedKeys) {
let _valid = true;
const _messages: string[] = [];
const parsedValue: Record<string, unknown> = value;
config.params.allowedKeys.forEach((entry) => {
const ignoreCase = !!entry.params?.ignoreCase;
const entryName = getPropertyEntry(value, entry.name, ignoreCase);
@ -65,7 +64,6 @@ function validatePlainObject(
value[entryName],
props,
);
parsedValue[entryName] = parsed;
if (!isValid) {
value[entryName] = parsed;
_valid = isValid;
@ -80,7 +78,7 @@ function validatePlainObject(
if (_valid) {
return {
isValid: true,
parsed: parsedValue,
parsed: value,
};
}
return {
@ -119,7 +117,7 @@ function validateArray(
config.params?.children?.type === ValidationTypes.OBJECT &&
(config.params.children.params?.allowedKeys || []).length > 0
) {
const allowedKeysConfigArray =
const allowedKeysCofigArray =
config.params.children.params?.allowedKeys || [];
const allowedKeys = (config.params.children.params?.allowedKeys || []).map(
@ -131,7 +129,7 @@ function validateArray(
};
const valueWithType = value as ItemType[];
allowedKeysConfigArray.forEach((allowedKeyConfig) => {
allowedKeysCofigArray.forEach((allowedKeyConfig) => {
if (allowedKeyConfig.params?.unique) {
const allowedKeyValues = valueWithType.map(
(item) => item[allowedKeyConfig.name],
@ -354,6 +352,7 @@ export const VALIDATORS: Record<ValidationTypes, Validator> = {
isValid: false,
};
}
return {
isValid: true,
parsed,