DEV: Use category objects as values for category select kits (#24793)

Commit dcd81d56c0 changed this, but that
implementation is not ideal because the initialization of the select kit
can result in requests to the server.

This implementation has the advantage that it also fixes the user and
group properties that return categories.

app/assets/javascripts/discourse/app/components/user-preferences/categories.hbs

@@ -9,8 +9,8 @@
         }}</a>
     {{/if}}
     <CategorySelector
-      @categoryIds={{@model.watched_category_ids}}
-      @blockedCategoryIds={{@selectedCategoryIds}}
+      @categories={{@model.watchedCategories}}
+      @blockedCategories={{@selectedCategories}}
       @onChange={{action (mut @model.watchedCategories)}}
     />
   </div>
@@ -26,8 +26,8 @@
         }}</a>
     {{/if}}
     <CategorySelector
-      @categoryIds={{@model.tracked_category_ids}}
-      @blockedCategoryIds={{@selectedCategoryIds}}
+      @categories={{@model.trackedCategories}}
+      @blockedCategories={{@selectedCategories}}
       @onChange={{action (mut @model.trackedCategories)}}
     />
   </div>
@@ -41,8 +41,8 @@
     <label>{{d-icon "d-watching-first"}}
       {{i18n "user.watched_first_post_categories"}}</label>
     <CategorySelector
-      @categoryIds={{@model.watched_first_post_category_ids}}
-      @blockedCategoryIds={{@selectedCategoryIds}}
+      @categories={{@model.watchedFirstPostCategories}}
+      @blockedCategories={{@selectedCategories}}
       @onChange={{action (mut @model.watchedFirstPostCategories)}}
     />
   </div>
@@ -56,8 +56,8 @@
     >
       <label>{{d-icon "d-regular"}} {{i18n "user.regular_categories"}}</label>
       <CategorySelector
-        @categoryIds={{@model.regular_category_ids}}
-        @blockedCategoryIds={{@selectedCategoryIds}}
+        @categories={{@model.regularCategories}}
+        @blockedCategories={{@selectedCategories}}
         @onChange={{action (mut @model.regularCategories)}}
       />
     </div>
@@ -75,8 +75,8 @@
       {{/if}}
 
       <CategorySelector
-        @categoryIds={{@model.muted_category_ids}}
-        @blockedCategoryIds={{@selectedCategoryIds}}
+        @categories={{@model.mutedCategories}}
+        @blockedCategories={{@selectedCategories}}
         @onChange={{action (mut @model.mutedCategories)}}
       />
     </div>

app/assets/javascripts/discourse/app/controllers/group-manage-categories.js

@@ -3,13 +3,15 @@ import discourseComputed from "discourse-common/utils/decorators";
 
 export default Controller.extend({
   @discourseComputed(
-    "model.watching_category_ids.[]",
-    "model.watching_first_post_category_ids.[]",
-    "model.tracking_category_ids.[]",
-    "model.regular_category_ids.[]",
-    "model.muted_category_ids.[]"
+    "model.watchingCategories.[]",
+    "model.watchingFirstPostCategories.[]",
+    "model.trackingCategories.[]",
+    "model.regularCategories.[]",
+    "model.mutedCategories.[]"
   )
-  selectedCategoryIds(watching, watchingFirst, tracking, regular, muted) {
-    return [].concat(watching, watchingFirst, tracking, regular, muted);
+  selectedCategories(watching, watchingFirst, tracking, regular, muted) {
+    return []
+      .concat(watching, watchingFirst, tracking, regular, muted)
+      .filter(Boolean);
   },
 });

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

@@ -17,14 +17,14 @@ export default Controller.extend({
   },
 
   @discourseComputed(
-    "model.watched_categoriy_ids",
-    "model.watched_first_post_categoriy_ids",
-    "model.tracked_categoriy_ids",
-    "model.muted_categoriy_ids",
-    "model.regular_category_ids",
+    "model.watchedCategories",
+    "model.watchedFirstPostCategories",
+    "model.trackedCategories",
+    "model.mutedCategories",
+    "model.regularCategories",
     "siteSettings.mute_all_categories_by_default"
   )
-  selectedCategoryIds(
+  selectedCategories(
     watched,
     watchedFirst,
     tracked,
@@ -32,12 +32,14 @@ export default Controller.extend({
     regular,
     muteAllCategoriesByDefault
   ) {
-    return [].concat(
-      watched,
-      watchedFirst,
-      tracked,
-      muteAllCategoriesByDefault ? regular : muted
-    );
+    return []
+      .concat(
+        watched,
+        watchedFirst,
+        tracked,
+        muteAllCategoriesByDefault ? regular : muted
+      )
+      .filter(Boolean);
   },
 
   @discourseComputed

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

@@ -122,22 +122,24 @@ export default class extends Controller {
   }
 
   @computed(
-    "model.watched_category_ids",
-    "model.watched_first_post_category_ids",
-    "model.tracked_category_ids",
-    "model.muted_category_ids",
-    "model.regular_category_ids",
+    "model.watchedCategories",
+    "model.watchedFirstPostCategories",
+    "model.trackedCategories",
+    "model.mutedCategories",
+    "model.regularCategories",
     "siteSettings.mute_all_categories_by_default"
   )
-  get selectedCategoryIds() {
-    return [].concat(
-      this.model.watched_category_ids,
-      this.model.watched_first_post_category_ids,
-      this.model.tracked_category_ids,
-      this.siteSettings.mute_all_categories_by_default
-        ? this.model.regular_category_ids
-        : this.model.muted_category_ids
-    );
+  get selectedCategories() {
+    return []
+      .concat(
+        this.model.watchedCategories,
+        this.model.watchedFirstPostCategories,
+        this.model.trackedCategories,
+        this.siteSettings.mute_all_categories_by_default
+          ? this.model.regularCategories
+          : this.model.mutedCategories
+      )
+      .filter(Boolean);
   }
 
   @computed("siteSettings.remove_muted_tags_from_latest")

app/assets/javascripts/discourse/app/models/group.js

@@ -200,6 +200,15 @@ const Group = RestModel.extend({
 
   @dependentKeyCompat
   get watchingCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.watching_category_ids)
+    ) {
+      Category.asyncFindByIds(this.watching_category_ids).then(() =>
+        this.notifyPropertyChange("watching_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("watching_category_ids"));
   },
 
@@ -212,6 +221,15 @@ const Group = RestModel.extend({
 
   @dependentKeyCompat
   get trackingCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.tracking_category_ids)
+    ) {
+      Category.asyncFindByIds(this.tracking_category_ids).then(() =>
+        this.notifyPropertyChange("tracking_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("tracking_category_ids"));
   },
 
@@ -224,6 +242,15 @@ const Group = RestModel.extend({
 
   @dependentKeyCompat
   get watchingFirstPostCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.watching_first_post_category_ids)
+    ) {
+      Category.asyncFindByIds(this.watching_first_post_category_ids).then(() =>
+        this.notifyPropertyChange("watching_first_post_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("watching_first_post_category_ids"));
   },
 
@@ -236,6 +263,15 @@ const Group = RestModel.extend({
 
   @dependentKeyCompat
   get regularCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.regular_category_ids)
+    ) {
+      Category.asyncFindByIds(this.regular_category_ids).then(() =>
+        this.notifyPropertyChange("regular_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("regular_category_ids"));
   },
 
@@ -248,6 +284,15 @@ const Group = RestModel.extend({
 
   @dependentKeyCompat
   get mutedCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.muted_category_ids)
+    ) {
+      Category.asyncFindByIds(this.muted_category_ids).then(() =>
+        this.notifyPropertyChange("muted_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("muted_category_ids"));
   },
 

app/assets/javascripts/discourse/app/models/user.js

@@ -856,6 +856,15 @@ const User = RestModel.extend({
 
   @dependentKeyCompat
   get mutedCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.muted_category_ids)
+    ) {
+      Category.asyncFindByIds(this.muted_category_ids).then(() =>
+        this.notifyPropertyChange("muted_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("muted_category_ids"));
   },
   set mutedCategories(categories) {
@@ -867,6 +876,15 @@ const User = RestModel.extend({
 
   @dependentKeyCompat
   get regularCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.regular_category_ids)
+    ) {
+      Category.asyncFindByIds(this.regular_category_ids).then(() =>
+        this.notifyPropertyChange("regular_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("regular_category_ids"));
   },
   set regularCategories(categories) {
@@ -878,6 +896,15 @@ const User = RestModel.extend({
 
   @dependentKeyCompat
   get trackedCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.tracked_category_ids)
+    ) {
+      Category.asyncFindByIds(this.tracked_category_ids).then(() =>
+        this.notifyPropertyChange("tracked_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("tracked_category_ids"));
   },
   set trackedCategories(categories) {
@@ -889,6 +916,15 @@ const User = RestModel.extend({
 
   @dependentKeyCompat
   get watchedCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.watched_category_ids)
+    ) {
+      Category.asyncFindByIds(this.watched_category_ids).then(() =>
+        this.notifyPropertyChange("watched_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("watched_category_ids"));
   },
   set watchedCategories(categories) {
@@ -900,6 +936,15 @@ const User = RestModel.extend({
 
   @dependentKeyCompat
   get watchedFirstPostCategories() {
+    if (
+      this.siteSettings.lazy_load_categories &&
+      !Category.hasAsyncFoundAll(this.watched_first_post_category_ids)
+    ) {
+      Category.asyncFindByIds(this.watched_first_post_category_ids).then(() =>
+        this.notifyPropertyChange("watched_first_post_category_ids")
+      );
+    }
+
     return Category.findByIds(this.get("watched_first_post_category_ids"));
   },
   set watchedFirstPostCategories(categories) {

app/assets/javascripts/discourse/app/templates/group/manage/categories.hbs

@@ -11,8 +11,8 @@
       {{i18n "groups.notifications.watching.title"}}</label>
 
     <CategorySelector
-      @categoryIds={{this.model.watching_category_ids}}
-      @blockedCategoryIds={{this.selectedCategoryIds}}
+      @categories={{this.model.watchingCategories}}
+      @blockedCategories={{this.selectedCategories}}
       @onChange={{action (mut this.model.watchingCategories)}}
     />
 
@@ -26,8 +26,8 @@
       {{i18n "groups.notifications.tracking.title"}}</label>
 
     <CategorySelector
-      @categoryIds={{this.model.tracking_category_ids}}
-      @blockedCategoryIds={{this.selectedCategoryIds}}
+      @categories={{this.model.trackingCategories}}
+      @blockedCategories={{this.selectedCategories}}
       @onChange={{action (mut this.model.trackingCategories)}}
     />
 
@@ -41,8 +41,8 @@
       {{i18n "groups.notifications.watching_first_post.title"}}</label>
 
     <CategorySelector
-      @categoryIds={{this.model.watching_first_post_category_ids}}
-      @blockedCategoryIds={{this.selectedCategoryIds}}
+      @categories={{this.model.watchingFirstPostCategories}}
+      @blockedCategories={{this.selectedCategories}}
       @onChange={{action (mut this.model.watchingFirstPostCategories)}}
     />
 
@@ -58,8 +58,8 @@
       {{i18n "groups.notifications.regular.title"}}</label>
 
     <CategorySelector
-      @categoryIds={{this.model.regular_category_ids}}
-      @blockedCategoryIds={{this.selectedCategoryIds}}
+      @categories={{this.model.regularCategories}}
+      @blockedCategories={{this.selectedCategories}}
       @onChange={{action (mut this.model.regularCategories)}}
     />
 
@@ -73,8 +73,8 @@
       {{i18n "groups.notifications.muted.title"}}</label>
 
     <CategorySelector
-      @categoryIds={{this.model.muted_category_ids}}
-      @blockedCategoryIds={{this.selectedCategoryIds}}
+      @categories={{this.model.mutedCategories}}
+      @blockedCategories={{this.selectedCategories}}
       @onChange={{action (mut this.model.mutedCategories)}}
     />
 

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

@@ -1,7 +1,7 @@
 <UserPreferences::Categories
   @canSee={{this.canSee}}
   @model={{this.model}}
-  @selectedCategoryIds={{this.selectedCategoryIds}}
+  @selectedCategories={{this.selectedCategories}}
   @hideMutedTags={{this.hideMutedTags}}
   @save={{action "save"}}
   @siteSettings={{this.siteSettings}}

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

@@ -57,7 +57,7 @@
     <UserPreferences::Categories
       @canSee={{this.canSee}}
       @model={{this.model}}
-      @selectedCategoryIds={{this.selectedCategoryIds}}
+      @selectedCategories={{this.selectedCategories}}
       @hideMutedTags={{this.hideMutedTags}}
       @siteSettings={{this.siteSettings}}
     />

app/assets/javascripts/select-kit/addon/components/category-chooser.js

@@ -31,6 +31,8 @@ export default ComboBoxComponent.extend({
       this.siteSettings.lazy_load_categories &&
       !Category.hasAsyncFoundAll([this.value])
     ) {
+      // eslint-disable-next-line no-console
+      console.warn("Category selected with category-chooser was not loaded");
       Category.asyncFindByIds([this.value]).then(() => {
         this.notifyPropertyChange("value");
       });

app/assets/javascripts/select-kit/addon/components/category-selector.js

@@ -1,4 +1,5 @@
-import { computed, defineProperty } from "@ember/object";
+import { computed } from "@ember/object";
+import { mapBy } from "@ember/object/computed";
 import Category from "discourse/models/category";
 import { makeArray } from "discourse-common/lib/helpers";
 import MultiSelectComponent from "select-kit/components/multi-select";
@@ -20,47 +21,12 @@ export default MultiSelectComponent.extend({
   init() {
     this._super(...arguments);
 
-    if (this.categories && !this.categoryIds) {
-      defineProperty(
-        this,
-        "categoryIds",
-        computed("categories.[]", function () {
-          return this.categories.map((c) => c.id);
-        })
-      );
-    }
-
-    if (this.blockedCategories && !this.blockedCategoryIds) {
-      defineProperty(
-        this,
-        "blockedCategoryIds",
-        computed("blockedCategories.[]", function () {
-          return this.blockedCategories.map((c) => c.id);
-        })
-      );
-    } else if (!this.blockedCategoryIds) {
-      this.set("blockedCategoryIds", []);
-    }
-
-    if (this.siteSettings.lazy_load_categories) {
-      const allCategoryIds = [
-        ...new Set([...this.categoryIds, ...this.blockedCategoryIds]),
-      ];
-
-      if (!Category.hasAsyncFoundAll(allCategoryIds)) {
-        Category.asyncFindByIds(allCategoryIds).then(() => {
-          this.notifyPropertyChange("categoryIds");
-          this.notifyPropertyChange("blockedCategoryIds");
-        });
-      }
+    if (!this.blockedCategories) {
+      this.set("blockedCategories", []);
     }
   },
 
-  content: computed("categoryIds.[]", "blockedCategoryIds.[]", function () {
-    if (this.siteSettings.lazy_load_categories) {
-      return Category.findByIds(this.categoryIds);
-    }
-
+  content: computed("categories.[]", "blockedCategories.[]", function () {
     return Category.list().filter((category) => {
       if (category.isUncategorizedCategory) {
         if (this.options?.allowUncategorized !== undefined) {
@@ -71,15 +37,13 @@ export default MultiSelectComponent.extend({
       }
 
       return (
-        this.categoryIds.includes(category.id) ||
-        !this.blockedCategoryIds.includes(category.id)
+        this.categories.includes(category) ||
+        !this.blockedCategories.includes(category)
       );
     });
   }),
 
-  value: computed("categoryIds.[]", function () {
-    return this.categoryIds;
-  }),
+  value: mapBy("categories", "id"),
 
   modifyComponentForRow() {
     return "category-row";
@@ -91,8 +55,8 @@ export default MultiSelectComponent.extend({
     }
 
     const rejectCategoryIds = new Set([
-      ...(this.categoryIds || []),
-      ...(this.blockedCategoryIds || []),
+      ...this.categories.map((c) => c.id),
+      ...this.blockedCategories.map((c) => c.id),
     ]);
 
     return await Category.asyncSearch(filter, {