Skip to content

Commit c3d5b10

Browse files
SatishGandhamSatish Gandham
SatishGandham
and
Satish Gandham
authored
fix: Change multiselect back to supporting numbers and boolean. (appsmithorg#7895)
* Revert "fix: multiselect validation (appsmithorg#7698)" This reverts commit 728a255. * - 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>
1 parent 883b021 commit c3d5b10

File tree

4 files changed

+17
-233
lines changed

4 files changed

+17
-233
lines changed

‎app/client/src/widgets/MultiSelectWidget/component/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,16 @@ function MultiSelectComponent({
9999
[isSelectAll, options, loading],
100100
);
101101

102+
// Convert the values to string before searching.
103+
// input is always a string.
102104
const filterOption = useCallback(
103105
(input, option) =>
104-
option?.props.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
105-
option?.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0,
106+
String(option?.props.label)
107+
.toLowerCase()
108+
.indexOf(input.toLowerCase()) >= 0 ||
109+
String(option?.props.value)
110+
.toLowerCase()
111+
.indexOf(input.toLowerCase()) >= 0,
106112
[],
107113
);
108114

‎app/client/src/widgets/MultiSelectWidget/widget/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,15 @@ class MultiSelectWidget extends BaseWidget<
7171
name: "label",
7272
type: ValidationTypes.TEXT,
7373
params: {
74+
default: "",
7475
required: true,
7576
},
7677
},
7778
{
7879
name: "value",
7980
type: ValidationTypes.TEXT,
8081
params: {
82+
default: "",
8183
required: true,
8284
},
8385
},
@@ -94,16 +96,16 @@ class MultiSelectWidget extends BaseWidget<
9496
propertyName: "defaultOptionValue",
9597
label: "Default Value",
9698
controlType: "INPUT_TEXT",
97-
placeholderText: "GREEN",
99+
placeholderText: "[GREEN]",
98100
isBindProperty: true,
99101
isTriggerProperty: false,
100102
validation: {
101103
type: ValidationTypes.FUNCTION,
102104
params: {
103105
fn: defaultOptionValueValidation,
104106
expected: {
105-
type: "value or Array of values",
106-
example: `option1 | ['option1', 'option2']`,
107+
type: "Array of values",
108+
example: `['option1', 'option2']`,
107109
autocompleteDataType: AutocompleteDataType.ARRAY,
108110
},
109111
},

‎app/client/src/workers/validations.test.ts‎

Lines changed: 0 additions & 223 deletions
Original file line numberDiff line numberDiff line change
@@ -962,229 +962,6 @@ describe("Validate Validators", () => {
962962
expect(result).toStrictEqual(expected);
963963
});
964964
});
965-
it("correctly validates objects", () => {
966-
const inputs = [
967-
{
968-
label: true,
969-
value: "true",
970-
},
971-
{
972-
label: true,
973-
value: "true",
974-
},
975-
{
976-
paletteColors1: "#ffffff",
977-
palettecolors2: "#ffffff",
978-
},
979-
];
980-
const config = [
981-
{
982-
type: ValidationTypes.OBJECT,
983-
params: {
984-
required: true,
985-
allowedKeys: [
986-
{
987-
name: "label",
988-
type: ValidationTypes.TEXT,
989-
params: {
990-
required: true,
991-
},
992-
},
993-
{
994-
name: "value",
995-
type: ValidationTypes.TEXT,
996-
params: {
997-
required: true,
998-
unique: true,
999-
},
1000-
},
1001-
],
1002-
},
1003-
},
1004-
{
1005-
type: ValidationTypes.OBJECT,
1006-
params: {
1007-
required: true,
1008-
allowedKeys: [
1009-
{
1010-
name: "label",
1011-
type: ValidationTypes.BOOLEAN,
1012-
params: {
1013-
required: true,
1014-
},
1015-
},
1016-
{
1017-
name: "value",
1018-
type: ValidationTypes.TEXT,
1019-
params: {
1020-
required: true,
1021-
unique: true,
1022-
},
1023-
},
1024-
],
1025-
},
1026-
},
1027-
{
1028-
type: ValidationTypes.OBJECT,
1029-
params: {
1030-
allowedKeys: [
1031-
{
1032-
name: "paletteColors1",
1033-
type: ValidationTypes.TEXT,
1034-
params: {
1035-
strict: true,
1036-
},
1037-
},
1038-
{
1039-
name: "paletteColors2",
1040-
type: ValidationTypes.TEXT,
1041-
params: {
1042-
strict: true,
1043-
ignoreCase: true,
1044-
},
1045-
},
1046-
],
1047-
},
1048-
},
1049-
];
1050-
const expected = [
1051-
{
1052-
isValid: true,
1053-
parsed: {
1054-
label: "true",
1055-
value: "true",
1056-
},
1057-
},
1058-
{
1059-
isValid: true,
1060-
parsed: { label: true, value: "true" },
1061-
},
1062-
{
1063-
isValid: true,
1064-
parsed: {
1065-
paletteColors1: "#ffffff",
1066-
palettecolors2: "#ffffff",
1067-
},
1068-
},
1069-
];
1070-
inputs.forEach((input, index) => {
1071-
const result = validate(config[index], input, DUMMY_WIDGET);
1072-
expect(result).toStrictEqual(expected[index]);
1073-
});
1074-
});
1075-
it("correctly validates objects to fail", () => {
1076-
const inputs = [
1077-
{
1078-
labels: true,
1079-
values: "true",
1080-
},
1081-
{
1082-
label: true,
1083-
},
1084-
{
1085-
paletteColors1: "#ffffff",
1086-
palettecolors2: 3,
1087-
},
1088-
];
1089-
const config = [
1090-
{
1091-
type: ValidationTypes.OBJECT,
1092-
params: {
1093-
required: true,
1094-
allowedKeys: [
1095-
{
1096-
name: "label",
1097-
type: ValidationTypes.TEXT,
1098-
params: {
1099-
required: true,
1100-
},
1101-
},
1102-
{
1103-
name: "value",
1104-
type: ValidationTypes.TEXT,
1105-
params: {
1106-
required: true,
1107-
unique: true,
1108-
},
1109-
},
1110-
],
1111-
},
1112-
},
1113-
{
1114-
type: ValidationTypes.OBJECT,
1115-
params: {
1116-
required: true,
1117-
allowedKeys: [
1118-
{
1119-
name: "label",
1120-
type: ValidationTypes.BOOLEAN,
1121-
params: {
1122-
required: true,
1123-
},
1124-
},
1125-
{
1126-
name: "value",
1127-
type: ValidationTypes.TEXT,
1128-
params: {
1129-
required: true,
1130-
unique: true,
1131-
},
1132-
},
1133-
],
1134-
},
1135-
},
1136-
{
1137-
type: ValidationTypes.OBJECT,
1138-
params: {
1139-
allowedKeys: [
1140-
{
1141-
name: "paletteColors1",
1142-
type: ValidationTypes.TEXT,
1143-
params: {
1144-
strict: true,
1145-
},
1146-
},
1147-
{
1148-
name: "paletteColors2",
1149-
type: ValidationTypes.TEXT,
1150-
params: {
1151-
strict: true,
1152-
ignoreCase: true,
1153-
},
1154-
},
1155-
],
1156-
},
1157-
},
1158-
];
1159-
const expected = [
1160-
{
1161-
isValid: false,
1162-
parsed: {
1163-
labels: true,
1164-
values: "true",
1165-
},
1166-
message: "Missing required key: label Missing required key: value",
1167-
},
1168-
{
1169-
isValid: false,
1170-
message: "Missing required key: value",
1171-
parsed: { label: true },
1172-
},
1173-
{
1174-
isValid: false,
1175-
message:
1176-
"Value of key: palettecolors2 is invalid: This value does not evaluate to type string",
1177-
parsed: {
1178-
paletteColors1: "#ffffff",
1179-
palettecolors2: "",
1180-
},
1181-
},
1182-
];
1183-
inputs.forEach((input, index) => {
1184-
const result = validate(config[index], input, DUMMY_WIDGET);
1185-
expect(result).toStrictEqual(expected[index]);
1186-
});
1187-
});
1188965
});
1189966

1190967
// describe("Color Picker Text validator", () => {

‎app/client/src/workers/validations.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ function validatePlainObject(
5454
if (config.params?.allowedKeys) {
5555
let _valid = true;
5656
const _messages: string[] = [];
57-
const parsedValue: Record<string, unknown> = value;
5857
config.params.allowedKeys.forEach((entry) => {
5958
const ignoreCase = !!entry.params?.ignoreCase;
6059
const entryName = getPropertyEntry(value, entry.name, ignoreCase);
@@ -65,7 +64,6 @@ function validatePlainObject(
6564
value[entryName],
6665
props,
6766
);
68-
parsedValue[entryName] = parsed;
6967
if (!isValid) {
7068
value[entryName] = parsed;
7169
_valid = isValid;
@@ -80,7 +78,7 @@ function validatePlainObject(
8078
if (_valid) {
8179
return {
8280
isValid: true,
83-
parsed: parsedValue,
81+
parsed: value,
8482
};
8583
}
8684
return {
@@ -119,7 +117,7 @@ function validateArray(
119117
config.params?.children?.type === ValidationTypes.OBJECT &&
120118
(config.params.children.params?.allowedKeys || []).length > 0
121119
) {
122-
const allowedKeysConfigArray =
120+
const allowedKeysCofigArray =
123121
config.params.children.params?.allowedKeys || [];
124122

125123
const allowedKeys = (config.params.children.params?.allowedKeys || []).map(
@@ -131,7 +129,7 @@ function validateArray(
131129
};
132130

133131
const valueWithType = value as ItemType[];
134-
allowedKeysConfigArray.forEach((allowedKeyConfig) => {
132+
allowedKeysCofigArray.forEach((allowedKeyConfig) => {
135133
if (allowedKeyConfig.params?.unique) {
136134
const allowedKeyValues = valueWithType.map(
137135
(item) => item[allowedKeyConfig.name],
@@ -354,6 +352,7 @@ export const VALIDATORS: Record<ValidationTypes, Validator> = {
354352
isValid: false,
355353
};
356354
}
355+
357356
return {
358357
isValid: true,
359358
parsed,

0 commit comments

Comments
 (0)