github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 18:03:43 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

UX: Fix required validation error shown for not required properties (#26453)

Browse Source 
Why this change?

In the categories, groups and tags selectors, we were showing a
validation error message when a property that is not required but
has a min validation is empty. In this case, we should not be displaying
the min validation error message because the property is allowed to be
empty.
This commit is contained in:
Alan Guo Xiang Tan 2024-04-02 10:38:49 +08:00 committed by GitHub
parent 92e0faed0a
commit e58110a9a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 88 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/admin/addon/components/schema-theme-setting/types/models.gjs
View File

@ -29,9 +29,15 @@ export default class SchemaThemeSettingTypeModels extends Component {
return;
}
const isValueBlank = isBlank(this.value);
if (!this.required && isValueBlank) {
return;
}
if (
(this.min && this.value.length < this.min) ||
(this.required && isBlank(this.value))
(this.required && isValueBlank)
) {
return I18n.t(
`admin.customize.theme.schema.fields.${this.type}.at_least`,

6
app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
View File

@ -308,6 +308,12 @@ export default function selectKit(selector) {
await click(`${selector} .selected-content [data-name="${name}"]`);
},
async deselectItemByIndex(index) {
await click(
queryAll(`${selector} .selected-content .selected-choice`)[index]
);
},
exists() {
return exists(selector);
},

113
app/assets/javascripts/discourse/tests/integration/components/admin-schema-theme-setting/editor-test.gjs
View File

@ -667,6 +667,81 @@ module(
assert.strictEqual(enumSelector.header().value(), "nice");
});
test("input fields of type categories that is not required with min and max validations", async function (assert) {
const setting = ThemeSettings.create({
setting: "objects_setting",
objects_schema: {
name: "something",
properties: {
not_required_category: {
type: "categories",
validations: {
min: 2,
max: 3,
},
},
},
},
metadata: {
categories: {
6: {
id: 6,
name: "some category",
},
},
},
value: [{}],
});
await render(<template>
<AdminSchemaThemeSettingEditor @themeId="1" @setting={{setting}} />
</template>);
const inputFields = new InputFieldsFromDOM();
assert
.dom(inputFields.fields.not_required_category.labelElement)
.hasText("not_required_category");
const categorySelector = selectKit(
`${inputFields.fields.not_required_category.selector} .select-kit`
);
assert.strictEqual(categorySelector.header().value(), null);
await categorySelector.expand();
await categorySelector.selectRowByIndex(1);
await categorySelector.collapse();
inputFields.refresh();
assert.dom(inputFields.fields.not_required_category.errorElement).hasText(
I18n.t("admin.customize.theme.schema.fields.categories.at_least", {
count: 2,
})
);
await categorySelector.expand();
await categorySelector.selectRowByIndex(2);
await categorySelector.selectRowByIndex(3);
await categorySelector.selectRowByIndex(4);
assert
.dom(categorySelector.error())
.hasText("You can only select 3 items.");
await categorySelector.deselectItemByIndex(0);
await categorySelector.deselectItemByIndex(0);
await categorySelector.deselectItemByIndex(0);
await categorySelector.collapse();
inputFields.refresh();
assert
.dom(inputFields.fields.not_required_category.errorElement)
.doesNotExist();
});
test("input fields of type categories", async function (assert) {
const setting = ThemeSettings.create({
setting: "objects_setting",
@ -678,13 +753,6 @@ module(
type: "categories",
required: true,
},
not_required_category: {
type: "categories",
validations: {
min: 2,
max: 3,
},
},
},
},
metadata: {
@ -729,37 +797,6 @@ module(
count: 1,
})
);
assert
.dom(inputFields.fields.not_required_category.labelElement)
.hasText("not_required_category");
categorySelector = selectKit(
`${inputFields.fields.not_required_category.selector} .select-kit`
);
assert.strictEqual(categorySelector.header().value(), null);
await categorySelector.expand();
await categorySelector.selectRowByIndex(1);
await categorySelector.collapse();
inputFields.refresh();
assert.dom(inputFields.fields.not_required_category.errorElement).hasText(
I18n.t("admin.customize.theme.schema.fields.categories.at_least", {
count: 2,
})
);
await categorySelector.expand();
await categorySelector.selectRowByIndex(2);
await categorySelector.selectRowByIndex(3);
await categorySelector.selectRowByIndex(4);
assert
.dom(categorySelector.error())
.hasText("You can only select 3 items.");
});
test("input fields of type tags which is required", async function (assert) {