UX: Improve category selector in theme objects editor (#26311)

Why this change?

Prior to this change, the category selector was not clearable and did
not allow a none value. This is incorrect as the category selector
should be clearable and should allow a none value when the property is
not required.

app/assets/javascripts/admin/addon/components/schema-theme-setting/types/category.gjs

@@ -1,12 +1,12 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { hash } from "@ember/helper";
 import { action } from "@ember/object";
 import FieldInputDescription from "admin/components/schema-theme-setting/field-input-description";
 import CategoryChooser from "select-kit/components/category-chooser";
 
 export default class SchemaThemeSettingTypeCategory extends Component {
   @tracked value = this.args.value;
+  required = this.args.spec.required;
 
   @action
   onInput(newVal) {
@@ -14,12 +14,21 @@ export default class SchemaThemeSettingTypeCategory extends Component {
     this.args.onChange(newVal);
   }
 
+  get categoryChooserOptions() {
+    return {
+      allowUncategorized: false,
+      none: !this.required,
+      clearable: !this.required,
+    };
+  }
+
   <template>
     <CategoryChooser
       @value={{this.value}}
       @onChange={{this.onInput}}
-      @options={{hash allowUncategorized=false}}
+      @options={{this.categoryChooserOptions}}
     />
+
     <FieldInputDescription @description={{@description}} />
   </template>
 }

app/assets/javascripts/discourse/tests/integration/components/admin-schema-theme-setting/editor-test.gjs

@@ -668,15 +668,54 @@ module(
     });
 
     test("input fields of type category", async function (assert) {
-      const setting = schemaAndData(3);
+      const setting = ThemeSettings.create({
+        setting: "objects_setting",
+        objects_schema: {
+          name: "something",
+          identifier: "id",
+          properties: {
+            required_category: {
+              type: "category",
+              required: true,
+            },
+            not_required_category: {
+              type: "category",
+            },
+          },
+        },
+        value: [
+          {
+            required_category: 6,
+          },
+        ],
+      });
 
       await render(<template>
         <AdminSchemaThemeSettingEditor @themeId="1" @setting={{setting}} />
       </template>);
 
       const inputFields = new InputFieldsFromDOM();
-      const categorySelector = selectKit(
-        `${inputFields.fields.category_field.selector} .select-kit`
+
+      assert
+        .dom(inputFields.fields.required_category.labelElement)
+        .hasText("required_category*");
+
+      let categorySelector = selectKit(
+        `${inputFields.fields.required_category.selector} .select-kit`
+      );
+
+      assert.strictEqual(categorySelector.header().value(), "6");
+
+      assert
+        .dom(categorySelector.clearButton())
+        .doesNotExist("is not clearable");
+
+      assert
+        .dom(inputFields.fields.not_required_category.labelElement)
+        .hasText("not_required_category");
+
+      categorySelector = selectKit(
+        `${inputFields.fields.not_required_category.selector} .select-kit`
       );
 
       assert.strictEqual(categorySelector.header().value(), null);
@@ -684,17 +723,7 @@ module(
       await categorySelector.expand();
       await categorySelector.selectRowByIndex(1);
 
-      const selectedCategoryId = categorySelector.header().value();
-      assert.ok(selectedCategoryId);
-
-      const tree = new TreeFromDOM();
-      await click(tree.nodes[1].element);
-      assert.strictEqual(categorySelector.header().value(), null);
-
-      tree.refresh();
-
-      await click(tree.nodes[0].element);
-      assert.strictEqual(categorySelector.header().value(), selectedCategoryId);
+      assert.dom(categorySelector.clearButton()).exists("is clearable");
     });
 
     test("input fields of type tag", async function (assert) {