UX: Update categories/tags in sidebar only after saving. (#17333)

Adding the category/tag into sidebar before the user has saved was
giving the impression that the user's record has already been updated.
This commit is contained in:
Alan Guo Xiang Tan 2022-07-05 13:32:12 +08:00 committed by GitHub
parent 4d51f9cad6
commit 843907d1ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 46 deletions

View File

@ -9,32 +9,26 @@ export default class extends Controller {
@tracked selectedSiderbarCategories = [];
@tracked selectedSidebarTagNames = [];
@action
tagUpdated(tagNames) {
this.selectedSidebarTagNames = tagNames;
this.model.set("sidebar_tag_names", tagNames);
this.saved = false;
}
@action
categoryUpdated(categories) {
this.selectedSiderbarCategories = categories;
this.model.set("sidebarCategoryIds", categories.mapBy("id"));
this.saved = false;
}
@action
save() {
const initialSidebarCategoryIds = this.model.sidebarCategoryIds;
const initialSidebarTagNames = this.model.sidebarTagNames;
this.model.set("sidebar_tag_names", this.selectedSidebarTagNames);
this.model.set(
"sidebarCategoryIds",
this.selectedSiderbarCategories.mapBy("id")
);
this.model
.save()
.then(() => {
this.saved = true;
this.initialSidebarCategoryIds = this.model.sidebarCategoryIds;
this.initialSidebarTagNames = this.model.initialSidebarTagNames;
})
.catch((error) => {
this.model.set("sidebarCategoryIds", this.initialSidebarCategoryIds);
this.model.set("sidebar_tag_names", this.initialSidebarTagNames);
this.model.set("sidebarCategoryIds", initialSidebarCategoryIds);
this.model.set("sidebar_tag_names", initialSidebarTagNames);
popupAjaxError(error);
});
}

View File

@ -7,12 +7,10 @@ export default RestrictedUserRoute.extend({
const props = {
model: user,
selectedSiderbarCategories: user.sidebarCategories,
initialSidebarCategoryIds: user.sidebarCategoryIds,
};
if (this.siteSettings.tagging_enabled) {
props.selectedSidebarTagNames = user.sidebarTagNames;
props.initialSidebarTagNames = user.sidebarTagNames;
}
controller.setProperties(props);

View File

@ -14,7 +14,7 @@
<div class="controls">
<CategorySelector
@categories={{this.selectedSiderbarCategories}}
@onChange={{action this.categoryUpdated}}
@onChange={{action (mut this.selectedSiderbarCategories)}}
@options={{hash
allowUncategorized=(not this.siteSettings.suppress_uncategorized_badge)
displayCategoryDescription=true
@ -34,7 +34,7 @@
@tags={{this.selectedSidebarTagNames}}
@everyTag={{true}}
@unlimitedTagCount={{true}}
@onChange={{action this.tagUpdated}}
@onChange={{action (mut this.selectedSidebarTagNames)}}
@options={{hash
allowAny=false
}}

View File

@ -77,11 +77,6 @@ acceptance("User Preferences - Sidebar", function (needs) {
await categorySelector.selectKitSelectRowByName("howto");
await categorySelector.deselectItemByName("support");
assert.ok(
exists(".sidebar-section-categories .sidebar-section-link-howto"),
"howto category has been added to sidebar"
);
await click(".save-changes");
assert.deepEqual(
@ -96,12 +91,12 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
!exists(".sidebar-section-categories .sidebar-section-link-howto"),
"howto category has been removed from sidebar"
"howto category is not displayed in sidebar"
);
assert.ok(
exists(".sidebar-section-categories .sidebar-section-link-support"),
"support category is added back to sidebar"
"support category is displayed in sidebar"
);
});
@ -114,6 +109,8 @@ acceptance("User Preferences - Sidebar", function (needs) {
await categorySelector.selectKitSelectRowByName("support");
await categorySelector.selectKitSelectRowByName("bug");
await click(".save-changes");
assert.ok(
exists(".sidebar-section-categories .sidebar-section-link-support"),
"support category has been added to sidebar"
@ -124,8 +121,6 @@ acceptance("User Preferences - Sidebar", function (needs) {
"bug category has been added to sidebar"
);
await click(".save-changes");
assert.deepEqual(
updateUserRequestBody["sidebar_category_ids[]"],
["6", "1"],
@ -140,7 +135,7 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
exists(".sidebar-section-tags .sidebar-section-link-monkey"),
"monkey tag is present in sidebar"
"monkey tag is displayed in sidebar"
);
await click(".sidebar-section-tags .sidebar-section-header-button");
@ -150,16 +145,6 @@ acceptance("User Preferences - Sidebar", function (needs) {
await tagChooser.selectKitSelectRowByName("gazelle");
await tagChooser.deselectItemByName("monkey");
assert.ok(
exists(".sidebar-section-tags .sidebar-section-link-gazelle"),
"gazelle tag has been added to sidebar"
);
assert.ok(
!exists(".sidebar-section-tags .sidebar-section-link-monkey"),
"monkey tag has been removed from sidebar"
);
await click(".save-changes");
assert.deepEqual(
@ -174,12 +159,12 @@ acceptance("User Preferences - Sidebar", function (needs) {
assert.ok(
!exists(".sidebar-section-tags .sidebar-section-link-gazelle"),
"gazelle tag has been removed from sidebar"
"gazelle tag is not displayed in sidebar"
);
assert.ok(
exists(".sidebar-section-tags .sidebar-section-link-monkey"),
"monkey tag is added back to sidebar"
"monkey tag is displayed in sidebar"
);
});
@ -192,6 +177,8 @@ acceptance("User Preferences - Sidebar", function (needs) {
await tagChooser.selectKitSelectRowByName("monkey");
await tagChooser.selectKitSelectRowByName("gazelle");
await click(".save-changes");
assert.ok(
exists(".sidebar-section-tags .sidebar-section-link-monkey"),
"monkey tag has been added to sidebar"
@ -202,8 +189,6 @@ acceptance("User Preferences - Sidebar", function (needs) {
"gazelle tag has been added to sidebar"
);
await click(".save-changes");
assert.deepEqual(
updateUserRequestBody["sidebar_tag_names[]"],
["monkey", "gazelle"],