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.

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>

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

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;
+  },
 });