REFACTOR: admin-user-field-item (#16499)

- drops jquery
- removes a deprecation caused by overriding a computed property (isEditing)
- adds basic tests
- drops observers
- uses @action
- tagless

app/assets/javascripts/admin/addon/components/admin-user-field-item.js

@@ -1,20 +1,17 @@
-import discourseComputed, {
-  observes,
-  on,
-} from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import { i18n, propertyEqual } from "discourse/lib/computed";
 import Component from "@ember/component";
 import I18n from "I18n";
 import UserField from "admin/models/user-field";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
-import { empty } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { scheduleOnce } from "@ember/runloop";
+import { schedule } from "@ember/runloop";
+import { action } from "@ember/object";
 
 export default Component.extend(bufferedProperty("userField"), {
-  editing: empty("userField.id"),
-  classNameBindings: [":user-field"],
+  tagName: "",
+  isEditing: false,
 
   cantMoveUp: propertyEqual("userField", "firstField"),
   cantMoveDown: propertyEqual("userField", "lastField"),
@@ -26,21 +23,21 @@ export default Component.extend(bufferedProperty("userField"), {
     return UserField.fieldTypeById(fieldType);
   },
 
-  @on("didInsertElement")
-  @observes("editing")
-  _focusOnEdit() {
-    if (this.editing) {
-      scheduleOnce("afterRender", this, "_focusName");
-    }
+  didInsertElement() {
+    this._super(...arguments);
+
+    this._focusName();
   },
 
   _focusName() {
-    $(".user-field-name").select();
+    schedule("afterRender", () => {
+      document.querySelector(".user-field-name")?.focus();
+    });
   },
 
   @discourseComputed("userField.field_type")
   fieldName(fieldType) {
-    return UserField.fieldTypeById(fieldType).get("name");
+    return UserField.fieldTypeById(fieldType)?.name;
   },
 
   @discourseComputed(
@@ -67,10 +64,9 @@ export default Component.extend(bufferedProperty("userField"), {
     return ret.join(", ");
   },
 
-  actions: {
+  @action
   save() {
-      const buffered = this.buffered;
-      const attrs = buffered.getProperties(
+    const attrs = this.buffered.getProperties(
       "name",
       "description",
       "field_type",
@@ -82,27 +78,32 @@ export default Component.extend(bufferedProperty("userField"), {
       "options"
     );
 
-      this.userField
+    return this.userField
       .save(attrs)
       .then(() => {
-          this.set("editing", false);
+        if (this.isDestroying || this.isDestroyed) {
+          return;
+        }
+
+        this.set("isEditing", false);
         this.commitBuffer();
       })
       .catch(popupAjaxError);
   },
 
+  @action
   edit() {
-      this.set("editing", true);
+    this.set("isEditing", true);
+    this._focusName();
   },
 
+  @action
   cancel() {
-      const id = this.get("userField.id");
-      if (isEmpty(id)) {
+    if (isEmpty(this.userField?.id)) {
       this.destroyAction(this.userField);
     } else {
       this.rollbackBuffer();
-        this.set("editing", false);
+      this.set("isEditing", false);
     }
   },
-  },
 });

app/assets/javascripts/admin/addon/templates/components/admin-user-field-item.hbs

@@ -1,4 +1,5 @@
-{{#if editing}}
+<div class="user-field">
+  {{#if (or isEditing (not userField.id))}}
     {{#admin-form-row label="admin.user_fields.type"}}
       {{combo-box
         content=fieldTypes
@@ -42,24 +43,24 @@
     {{/admin-form-row}}
 
     {{#admin-form-row}}
-    {{d-button action=(action "save") class="btn-primary" icon="check" label="admin.user_fields.save"}}
-    {{d-button action=(action "cancel") class="btn-danger" icon="times" label="admin.user_fields.cancel"}}
+      {{d-button action=(action "save") class="btn-primary save" icon="check" label="admin.user_fields.save"}}
+      {{d-button action=(action "cancel") class="btn-danger cancel" icon="times" label="admin.user_fields.cancel"}}
     {{/admin-form-row}}
   {{else}}
     <div class="row">
       <div class="form-display">
-      <strong>{{userField.name}}</strong>
+        <b class="name">{{userField.name}}</b>
         <br>
-      {{html-safe userField.description}}
+        <span class="description">{{html-safe userField.description}}</span>
       </div>
-    <div class="form-display">{{fieldName}}</div>
+      <div class="form-display field-type">{{fieldName}}</div>
       <div class="form-element controls">
-      {{d-button action=(action "edit") class="btn-default" icon="pencil-alt" label="admin.user_fields.edit"}}
-      {{d-button action=destroyAction actionParam=userField class="btn-danger" icon="far-trash-alt" label="admin.user_fields.delete"}}
+        {{d-button action=(action "edit") class="btn-default edit" icon="pencil-alt" label="admin.user_fields.edit"}}
+        {{d-button action=destroyAction actionParam=userField class="btn-danger cancel" icon="far-trash-alt" label="admin.user_fields.delete"}}
         {{d-button action=moveUpAction actionParam=userField class="btn-default" icon="arrow-up" disabled=cantMoveUp}}
         {{d-button action=moveDownAction actionParam=userField class="btn-default" icon="arrow-down" disabled=cantMoveDown}}
       </div>
     </div>
     <div class="row">{{flags}}</div>
   {{/if}}
-<div class="clearfix"></div>
+</div>

app/assets/javascripts/discourse/tests/integration/components/admin-user-field-item-test.js

@@ -0,0 +1,78 @@
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+import {
+  discourseModule,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
+import I18n from "I18n";
+import { click } from "@ember/test-helpers";
+
+discourseModule(
+  "Integration | Component | admin-user-field-item",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    componentTest("user field without an id", {
+      template: hbs`{{admin-user-field-item userField=userField}}`,
+
+      async test(assert) {
+        assert.ok(exists(".save"), "displays editing mode");
+      },
+    });
+
+    componentTest("cancel action", {
+      template: hbs`{{admin-user-field-item isEditing=isEditing destroyAction=destroyAction userField=userField}}`,
+
+      beforeEach() {
+        this.set("userField", { id: 1, field_type: "text" });
+        this.set("isEditing", true);
+      },
+
+      async test(assert) {
+        await click(".cancel");
+        assert.ok(exists(".edit"));
+      },
+    });
+
+    componentTest("edit action", {
+      template: hbs`{{admin-user-field-item destroyAction=destroyAction userField=userField}}`,
+
+      beforeEach() {
+        this.set("userField", { id: 1, field_type: "text" });
+      },
+
+      async test(assert) {
+        await click(".edit");
+        assert.ok(exists(".save"));
+      },
+    });
+
+    componentTest("user field with an id", {
+      template: hbs`{{admin-user-field-item userField=userField}}`,
+
+      beforeEach() {
+        this.set("userField", {
+          id: 1,
+          field_type: "text",
+          name: "foo",
+          description: "what is foo",
+        });
+      },
+
+      async test(assert) {
+        assert.equal(query(".name").innerText, this.userField.name);
+        assert.equal(
+          query(".description").innerText,
+          this.userField.description
+        );
+        assert.equal(
+          query(".field-type").innerText,
+          I18n.t("admin.user_fields.field_types.text")
+        );
+      },
+    });
+  }
+);