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.

app/assets/javascripts/discourse/app/controllers/preferences/sidebar.js

@@ -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("sidebarCategoryIds", initialSidebarCategoryIds);
-        this.model.set("sidebar_tag_names", this.initialSidebarTagNames);
+        this.model.set("sidebar_tag_names", initialSidebarTagNames);
         popupAjaxError(error);
       });
   }

app/assets/javascripts/discourse/app/routes/preferences-sidebar.js

@@ -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);

app/assets/javascripts/discourse/app/templates/preferences/sidebar.hbs

@@ -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
           }}

app/assets/javascripts/discourse/tests/acceptance/user-preferences-sidebar-test.js

@@ -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"],