From 3bfd8c7192a9c1285760053b8b587bbbf295e50e Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Mon, 13 Feb 2023 19:06:23 +0000
Subject: [PATCH] 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.
---
 .../discourse/app/components/user-field.hbs   |  6 +++
 .../discourse/app/components/user-field.js    | 48 +++++++------------
 .../app/components/user-fields/base.js        | 32 +++++++++++++
 .../components/user-fields/confirm.hbs        |  0
 .../app/components/user-fields/confirm.js     |  4 +-
 .../components/user-fields/dropdown.hbs       |  0
 .../app/components/user-fields/dropdown.js    |  4 +-
 .../components/user-fields/multiselect.hbs    |  0
 .../app/components/user-fields/multiselect.js |  4 +-
 .../components/user-fields/text.hbs           |  0
 .../app/components/user-fields/text.js        |  4 +-
 11 files changed, 62 insertions(+), 40 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/user-field.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/user-fields/base.js
 rename app/assets/javascripts/discourse/app/{templates => }/components/user-fields/confirm.hbs (100%)
 rename app/assets/javascripts/discourse/app/{templates => }/components/user-fields/dropdown.hbs (100%)
 rename app/assets/javascripts/discourse/app/{templates => }/components/user-fields/multiselect.hbs (100%)
 rename app/assets/javascripts/discourse/app/{templates => }/components/user-fields/text.hbs (100%)

diff --git a/app/assets/javascripts/discourse/app/components/user-field.hbs b/app/assets/javascripts/discourse/app/components/user-field.hbs
new file mode 100644
index 00000000000..04e5ac8f227
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/user-field.hbs
@@ -0,0 +1,6 @@
+<this.userFieldComponent
+  @field={{@field}}
+  @value={{@value}}
+  @class={{@class}}
+  @validation={{@validation}}
+/>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/user-field.js b/app/assets/javascripts/discourse/app/components/user-field.js
index aedfa0de48f..2189fc963de 100644
--- a/app/assets/javascripts/discourse/app/components/user-field.js
+++ b/app/assets/javascripts/discourse/app/components/user-field.js
@@ -1,34 +1,18 @@
-import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
-import { fmt } from "discourse/lib/computed";
+import Component from "@glimmer/component";
+import UserFieldConfirm from "./user-fields/confirm";
+import UserFieldDropdown from "./user-fields/dropdown";
+import UserFieldMultiselect from "./user-fields/multiselect";
+import UserFieldText from "./user-fields/text";
 
-export default Component.extend({
-  classNameBindings: [":user-field", "field.field_type", "customFieldClass"],
-  layoutName: fmt("field.field_type", "components/user-fields/%@"),
+const COMPONENTS = {
+  confirm: UserFieldConfirm,
+  dropdown: UserFieldDropdown,
+  multiselect: UserFieldMultiselect,
+  text: UserFieldText,
+};
 
-  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}`;
-    }
-  },
-});
+export default class UserFieldComponent extends Component {
+  get userFieldComponent() {
+    return COMPONENTS[this.args.field.field_type];
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/base.js b/app/assets/javascripts/discourse/app/components/user-fields/base.js
new file mode 100644
index 00000000000..2a64fd21700
--- /dev/null
+++ b/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}`;
+    }
+  },
+});
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-fields/confirm.hbs b/app/assets/javascripts/discourse/app/components/user-fields/confirm.hbs
similarity index 100%
rename from app/assets/javascripts/discourse/app/templates/components/user-fields/confirm.hbs
rename to app/assets/javascripts/discourse/app/components/user-fields/confirm.hbs
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/confirm.js b/app/assets/javascripts/discourse/app/components/user-fields/confirm.js
index 87d5ddb040f..6924c4e9052 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/confirm.js
+++ b/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 {}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-fields/dropdown.hbs b/app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
similarity index 100%
rename from app/assets/javascripts/discourse/app/templates/components/user-fields/dropdown.hbs
rename to app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/dropdown.js b/app/assets/javascripts/discourse/app/components/user-fields/dropdown.js
index 87d5ddb040f..7f54ac33261 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/dropdown.js
+++ b/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 {}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-fields/multiselect.hbs b/app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
similarity index 100%
rename from app/assets/javascripts/discourse/app/templates/components/user-fields/multiselect.hbs
rename to app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/multiselect.js b/app/assets/javascripts/discourse/app/components/user-fields/multiselect.js
index 87d5ddb040f..4bb677c1243 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/multiselect.js
+++ b/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 {}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs b/app/assets/javascripts/discourse/app/components/user-fields/text.hbs
similarity index 100%
rename from app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs
rename to app/assets/javascripts/discourse/app/components/user-fields/text.hbs
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/text.js b/app/assets/javascripts/discourse/app/components/user-fields/text.js
index 87d5ddb040f..f19667f33e9 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/text.js
+++ b/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 {}