From 5835d4e5ed9e3b10aa8f63a13da38b246261df33 Mon Sep 17 00:00:00 2001
From: Daniel Waterworth <me@danielwaterworth.com>
Date: Thu, 28 Mar 2024 11:16:39 -0500
Subject: [PATCH] DEV: Make CategoryChooser optionally provide the category
 (#26420)

... rather than just the category id.

In order for the user to have selected a category, the category must
have been loaded and it's useful for the category chooser to provide
this fetched category so that it doesn't need to be refetched.

In the future, it would be better to store the categories that the
chooser knows about in local component state, so that the category
doesn't need to be fetched from the id map, but this, at least, puts the
API in place.
---
 .../javascripts/admin/addon/components/embeddable-host.hbs   | 4 ++--
 .../javascripts/admin/addon/components/embeddable-host.js    | 4 +---
 .../select-kit/addon/components/category-chooser.js          | 5 +++++
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/embeddable-host.hbs b/app/assets/javascripts/admin/addon/components/embeddable-host.hbs
index 3d28b97cfd6..9ab723092fc 100644
--- a/app/assets/javascripts/admin/addon/components/embeddable-host.hbs
+++ b/app/assets/javascripts/admin/addon/components/embeddable-host.hbs
@@ -21,8 +21,8 @@
   <td class="editing-input">
     <div class="label">{{i18n "admin.embedding.category"}}</div>
     <CategoryChooser
-      @value={{this.categoryId}}
-      @onChange={{fn (mut this.categoryId)}}
+      @value={{this.category.id}}
+      @onChangeCategory={{fn (mut this.category)}}
       class="small"
     />
   </td>
diff --git a/app/assets/javascripts/admin/addon/components/embeddable-host.js b/app/assets/javascripts/admin/addon/components/embeddable-host.js
index 76fe26a95a5..12bd423983d 100644
--- a/app/assets/javascripts/admin/addon/components/embeddable-host.js
+++ b/app/assets/javascripts/admin/addon/components/embeddable-host.js
@@ -38,7 +38,6 @@ export default class EmbeddableHost extends Component.extend(
 
   @action
   edit() {
-    this.set("categoryId", this.get("host.category.id"));
     this.set("editToggled", true);
   }
 
@@ -53,14 +52,13 @@ export default class EmbeddableHost extends Component.extend(
       "allowed_paths",
       "class_name"
     );
-    props.category_id = this.categoryId;
+    props.category_id = this.category.id;
 
     const host = this.host;
 
     host
       .save(props)
       .then(() => {
-        this.set("category", Category.findById(this.categoryId));
         this.set("editToggled", false);
       })
       .catch(popupAjaxError);
diff --git a/app/assets/javascripts/select-kit/addon/components/category-chooser.js b/app/assets/javascripts/select-kit/addon/components/category-chooser.js
index 6eaeb5dd2b2..9188d94a593 100644
--- a/app/assets/javascripts/select-kit/addon/components/category-chooser.js
+++ b/app/assets/javascripts/select-kit/addon/components/category-chooser.js
@@ -223,4 +223,9 @@ export default ComboBoxComponent.extend({
   _matchCategory(filter, categoryName) {
     return this._normalize(categoryName).includes(filter);
   },
+
+  _onChange(value) {
+    this._boundaryActionHandler("onChangeCategory", Category.findById(value));
+    return true;
+  },
 });