DEV: Modernise and colocate UserField component (#20267)

Dynamically setting the `layoutName` is not compatible with template colocation. Instead, we can give each field type a dedicated component and make `<UserField` a wrapper which renders the correct implementation.

app/assets/javascripts/discourse/app/components/user-field.hbs

@@ -0,0 +1,6 @@
+<this.userFieldComponent
+  @field={{@field}}
+  @value={{@value}}
+  @class={{@class}}
+  @validation={{@validation}}
+/>

app/assets/javascripts/discourse/app/components/user-field.js

@@ -1,34 +1,18 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
-import discourseComputed from "discourse-common/utils/decorators";
+import UserFieldConfirm from "./user-fields/confirm";
-import { fmt } from "discourse/lib/computed";
+import UserFieldDropdown from "./user-fields/dropdown";
+import UserFieldMultiselect from "./user-fields/multiselect";
+import UserFieldText from "./user-fields/text";
 
-export default Component.extend({
+const COMPONENTS = {
-  classNameBindings: [":user-field", "field.field_type", "customFieldClass"],
+  confirm: UserFieldConfirm,
-  layoutName: fmt("field.field_type", "components/user-fields/%@"),
+  dropdown: UserFieldDropdown,
+  multiselect: UserFieldMultiselect,
+  text: UserFieldText,
+};
 
-  didInsertElement() {
+export default class UserFieldComponent extends Component {
-    this._super(...arguments);
+  get userFieldComponent() {
-
+    return COMPONENTS[this.args.field.field_type];
-    let element = this.element.querySelector(
+  }
-      ".user-field.dropdown .select-kit-header"
-    );
-    element = element || this.element.querySelector("input");
-    this.field.element = element;
-  },
-
-  @discourseComputed
-  noneLabel() {
-    return "user_fields.none";
-  },
-
-  @discourseComputed("field.name")
-  customFieldClass(fieldName) {
-    if (fieldName) {
-      fieldName = fieldName
-        .replace(/\s+/g, "-")
-        .replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, "")
-        .toLowerCase();
-      return fieldName && `user-field-${fieldName}`;
 }
-  },
-});

app/assets/javascripts/discourse/app/components/user-fields/base.js

@@ -0,0 +1,32 @@
+import Component from "@ember/component";
+import discourseComputed from "discourse-common/utils/decorators";
+
+export default Component.extend({
+  classNameBindings: [":user-field", "field.field_type", "customFieldClass"],
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    let element = this.element.querySelector(
+      ".user-field.dropdown .select-kit-header"
+    );
+    element = element || this.element.querySelector("input");
+    this.field.element = element;
+  },
+
+  @discourseComputed
+  noneLabel() {
+    return "user_fields.none";
+  },
+
+  @discourseComputed("field.name")
+  customFieldClass(fieldName) {
+    if (fieldName) {
+      fieldName = fieldName
+        .replace(/\s+/g, "-")
+        .replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, "")
+        .toLowerCase();
+      return fieldName && `user-field-${fieldName}`;
+    }
+  },
+});

app/assets/javascripts/discourse/app/components/user-fields/confirm.js

@@ -1,3 +1,3 @@
-import Component from "@ember/component";
+import UserFieldBase from "./base";
 
-export default Component.extend({});
+export default class UserFieldConfirm extends UserFieldBase {}

app/assets/javascripts/discourse/app/components/user-fields/dropdown.js

@@ -1,3 +1,3 @@
-import Component from "@ember/component";
+import UserFieldBase from "./base";
 
-export default Component.extend({});
+export default class UserFieldDropdown extends UserFieldBase {}

app/assets/javascripts/discourse/app/components/user-fields/multiselect.js

@@ -1,3 +1,3 @@
-import Component from "@ember/component";
+import UserFieldBase from "./base";
 
-export default Component.extend({});
+export default class UserFieldMultiselect extends UserFieldBase {}

app/assets/javascripts/discourse/app/components/user-fields/text.js

@@ -1,3 +1,3 @@
-import Component from "@ember/component";
+import UserFieldBase from "./base";
 
-export default Component.extend({});
+export default class UserFieldText extends UserFieldBase {}