DEV: Replace `TextField` with native `input` on CategoryNameFields

app/assets/javascripts/discourse-common/addon/utils/decorators.js

@@ -1,3 +1,4 @@
+import { assert } from "@ember/debug";
 import { observer } from "@ember/object";
 import {
   alias as EmberAlias,
@@ -32,6 +33,7 @@ import {
 import CoreObject from "@ember/object/core";
 import { on as emberOn } from "@ember/object/evented";
 import { bind as emberBind, schedule } from "@ember/runloop";
+import { classify } from "@ember/string";
 import {
   observes as emberObservesDecorator,
   on as emberOnDecorator,
@@ -156,6 +158,29 @@ export function observes(...observeParams) {
   };
 }
 
+export function settable(self, prop, descriptor) {
+  const setterFunctionName = `set${classify(prop)}`;
+
+  Object.defineProperty(self, setterFunctionName, {
+    configurable: true,
+    get() {
+      const bound = emberBind(this, function (event) {
+        assert(
+          `\`${setterFunctionName}\` should only receive an Event object as argument. Use it to set the value of \`${prop}\` when using the \`on\` modifier, e.g. \`{{on "input" this.${setterFunctionName}}}\``,
+          event instanceof Event
+        );
+        this[prop] = event.target.value;
+      });
+
+      Object.defineProperty(this, `set${classify(prop)}`, { value: bound });
+
+      return bound;
+    },
+  });
+
+  return descriptor;
+}
+
 export const alias = macroAlias(EmberAlias);
 export const and = macroAlias(EmberAnd);
 export const bool = macroAlias(EmberBool);

app/assets/javascripts/discourse/app/components/category-name-fields.gjs

@@ -0,0 +1,39 @@
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import { i18n } from "discourse-i18n";
+
+const CategoryNameFields = <template>
+  <PluginOutlet
+    @name="category-name-fields-details"
+    @outletArgs={{hash category=@category}}
+  >
+    <section class="field category-name-fields">
+      {{#unless @category.isUncategorizedCategory}}
+        <section class="field-item">
+          <label>{{i18n "category.name"}}</label>
+          <input
+            type="text"
+            class="category-name"
+            maxlength="50"
+            placeholder={{i18n "category.name_placeholder"}}
+            value={{@category.name}}
+            {{on "input" @category.setName}}
+          />
+        </section>
+      {{/unless}}
+      <section class="field-item">
+        <label>{{i18n "category.slug"}}</label>
+        <input
+          type="text"
+          maxlength="255"
+          placeholder={{i18n "category.slug_placeholder"}}
+          value={{@category.slug}}
+          {{on "input" @category.setSlug}}
+        />
+      </section>
+    </section>
+  </PluginOutlet>
+</template>;
+
+export default CategoryNameFields;

app/assets/javascripts/discourse/app/components/category-name-fields.hbs

@@ -1,26 +0,0 @@
-<PluginOutlet
-  @name="category-name-fields-details"
-  @outletArgs={{hash category=this.category}}
->
-  <section class="field category-name-fields">
-    {{#unless this.category.isUncategorizedCategory}}
-      <section class="field-item">
-        <label>{{i18n "category.name"}}</label>
-        <TextField
-          @value={{this.category.name}}
-          @placeholderKey="category.name_placeholder"
-          @maxlength="50"
-          class="category-name"
-        />
-      </section>
-    {{/unless}}
-    <section class="field-item">
-      <label>{{i18n "category.slug"}}</label>
-      <TextField
-        @value={{this.category.slug}}
-        @placeholderKey="category.slug_placeholder"
-        @maxlength="255"
-      />
-    </section>
-  </section>
-</PluginOutlet>

app/assets/javascripts/discourse/app/components/category-name-fields.js

@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default class CategoryNameFields extends Component {}

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

@@ -1,3 +1,4 @@
+import { tracked } from "@glimmer/tracking";
 import { warn } from "@ember/debug";
 import { computed, get } from "@ember/object";
 import { service } from "@ember/service";
@@ -10,7 +11,7 @@ import Site from "discourse/models/site";
 import Topic from "discourse/models/topic";
 import { getOwnerWithFallback } from "discourse-common/lib/get-owner";
 import getURL from "discourse-common/lib/get-url";
-import discourseComputed from "discourse-common/utils/decorators";
+import discourseComputed, { settable } from "discourse-common/utils/decorators";
 import { MultiCache } from "discourse-common/utils/multi-cache";
 
 const STAFF_GROUP_NAME = "staff";
@@ -451,6 +452,9 @@ export default class Category extends RestModel {
 
   @service currentUser;
 
+  @settable @tracked name;
+  @settable @tracked slug;
+
   permissions = null;
 
   init() {