REFACTOR: Don't use layoutName in select-kit (#10556)

Instead import the templates as modules, the way Ember CLI wants us to.

app/assets/javascripts/app-boot.js

@@ -11,6 +11,14 @@
     "discourse-common/lib/raw-templates"
   ).__DISCOURSE_RAW_TEMPLATES;
 
+  // required for select kit to work without Ember CLI
+  Object.keys(Ember.TEMPLATES).forEach(k => {
+    if (k.indexOf("select-kit") === 0) {
+      let template = Ember.TEMPLATES[k];
+      define(k, () => template);
+    }
+  });
+
   // ensure Discourse is added as a global
   window.Discourse = Discourse;
 })();

app/assets/javascripts/select-kit/addon/components/category-drop/category-drop-header.js

@@ -2,10 +2,10 @@ import { readOnly } from "@ember/object/computed";
 import { schedule } from "@ember/runloop";
 import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
 import discourseComputed from "discourse-common/utils/decorators";
+import layout from "select-kit/templates/components/category-drop/category-drop-header";
 
 export default ComboBoxSelectBoxHeaderComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/category-drop/category-drop-header",
   classNames: ["category-drop-header"],
   classNameBindings: ["categoryStyleClass"],
   categoryStyleClass: readOnly("site.category_style"),

app/assets/javascripts/select-kit/addon/components/category-row.js

@@ -5,9 +5,10 @@ import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { isEmpty, isNone } from "@ember/utils";
 import { computed } from "@ember/object";
 import { setting } from "discourse/lib/computed";
+import layout from "select-kit/templates/components/category-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName: "select-kit/templates/components/category-row",
+  layout,
   classNames: ["category-row"],
   hideParentCategory: bool("selectKit.options.hideParentCategory"),
   allowUncategorized: bool("selectKit.options.allowUncategorized"),

app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.js

@@ -1,12 +1,11 @@
 import { escapeExpression } from "discourse/lib/utilities";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 import { computed } from "@ember/object";
+import layout from "select-kit/templates/components/color-palettes/color-palettes-row";
 
 export default SelectKitRowComponent.extend({
   classNames: ["color-palettes-row"],
-
+  layout,
-  layoutName:
-    "select-kit/templates/components/color-palettes/color-palettes-row",
 
   palettes: computed("item.colors.[]", function() {
     return (this.item.colors || [])

app/assets/javascripts/select-kit/addon/components/combo-box/combo-box-header.js

@@ -1,9 +1,10 @@
 import { reads, and } from "@ember/object/computed";
 import SingleSelectHeaderComponent from "select-kit/components/select-kit/single-select-header";
 import { computed } from "@ember/object";
+import layout from "select-kit/templates/components/combo-box/combo-box-header";
 
 export default SingleSelectHeaderComponent.extend({
-  layoutName: "select-kit/templates/components/combo-box/combo-box-header",
+  layout,
   classNames: ["combo-box-header"],
   clearable: reads("selectKit.options.clearable"),
   caretUpIcon: reads("selectKit.options.caretUpIcon"),

app/assets/javascripts/select-kit/addon/components/create-color-row.js

@@ -1,9 +1,10 @@
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 import { escapeExpression } from "discourse/lib/utilities";
 import { schedule } from "@ember/runloop";
+import layout from "select-kit/templates/components/create-color-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName: "select-kit/templates/components/create-color-row",
+  layout,
   classNames: ["create-color-row"],
 
   didReceiveAttrs() {

app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-header.js

@@ -1,10 +1,10 @@
 import SingleSelectHeaderComponent from "select-kit/components/select-kit/single-select-header";
 import { computed } from "@ember/object";
 import { readOnly } from "@ember/object/computed";
+import layout from "select-kit/templates/components/dropdown-select-box/dropdown-select-box-header";
 
 export default SingleSelectHeaderComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/dropdown-select-box/dropdown-select-box-header",
   classNames: ["btn-default", "dropdown-select-box-header"],
   tagName: "button",
   classNameBindings: ["btnClassName"],

app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.js

@@ -1,9 +1,9 @@
 import { readOnly } from "@ember/object/computed";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/dropdown-select-box/dropdown-select-box-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/dropdown-select-box/dropdown-select-box-row",
   classNames: ["dropdown-select-box-row"],
 
   description: readOnly("item.description")

app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-header.js

@@ -1,7 +1,7 @@
 import ComboBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
+import layout from "select-kit/templates/components/future-date-input-selector/future-date-input-selector-header";
 
 export default ComboBoxHeaderComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/future-date-input-selector/future-date-input-selector-header",
   classNames: "future-date-input-selector-header"
 });

app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.js

@@ -1,7 +1,7 @@
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/future-date-input-selector/future-date-input-selector-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/future-date-input-selector/future-date-input-selector-row",
   classNames: ["future-date-input-selector-row"]
 });

app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/mini-tag-chooser-header.js

@@ -1,7 +1,7 @@
 import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
+import layout from "select-kit/templates/components/mini-tag-chooser/mini-tag-chooser-header";
 
 export default ComboBoxSelectBoxHeaderComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/mini-tag-chooser/mini-tag-chooser-header",
   classNames: ["mini-tag-chooser-header"]
 });

app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.js

@@ -1,10 +1,10 @@
 import Component from "@ember/component";
 import { computed } from "@ember/object";
 import { reads, notEmpty } from "@ember/object/computed";
+import layout from "select-kit/templates/components/mini-tag-chooser/selected-collection";
 
 export default Component.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/mini-tag-chooser/selected-collection",
   classNames: ["mini-tag-chooser-selected-collection", "selected-tags"],
   isVisible: notEmpty("selectedTags.[]"),
   selectedTags: reads("collection.content.selectedTags.[]"),

app/assets/javascripts/select-kit/addon/components/multi-select.js

@@ -3,10 +3,11 @@ import SelectKitComponent from "select-kit/components/select-kit";
 import { computed } from "@ember/object";
 import { isPresent } from "@ember/utils";
 import { makeArray } from "discourse-common/lib/helpers";
+import layout from "select-kit/templates/components/multi-select";
 
 export default SelectKitComponent.extend({
   pluginApiIdentifiers: ["multi-select"],
-  layoutName: "select-kit/templates/components/multi-select",
+  layout,
   classNames: ["multi-select"],
   multiSelect: true,
 

app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js

@@ -2,9 +2,10 @@ import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 const { isEmpty } = Ember;
 import SelectKitFilterComponent from "select-kit/components/select-kit/select-kit-filter";
+import layout from "select-kit/templates/components/select-kit/select-kit-filter";
 
 export default SelectKitFilterComponent.extend({
-  layoutName: "select-kit/templates/components/select-kit/select-kit-filter",
+  layout,
   classNames: ["multi-select-filter"],
 
   @discourseComputed("placeholder", "selectKit.hasSelection")

app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-header.js

@@ -1,11 +1,11 @@
 import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
 import { computed } from "@ember/object";
 import { makeArray } from "discourse-common/lib/helpers";
+import layout from "select-kit/templates/components/multi-select/multi-select-header";
 
 export default SelectKitHeaderComponent.extend({
   classNames: ["multi-select-header"],
-  layoutName:
+  layout,
-    "select-kit/templates/components/multi-select/multi-select-header",
 
   selectedNames: computed("selectedContent", function() {
     return makeArray(this.selectedContent).map(c => this.getName(c));

app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.js

@@ -1,10 +1,11 @@
 import SelectedNameComponent from "select-kit/components/selected-name";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { computed } from "@ember/object";
+import layout from "select-kit/templates/components/multi-select/selected-category";
 
 export default SelectedNameComponent.extend({
   classNames: ["selected-category"],
-  layoutName: "select-kit/templates/components/multi-select/selected-category",
+  layout,
 
   badge: computed("item", function() {
     return categoryBadgeHTML(this.item, {

app/assets/javascripts/select-kit/addon/components/none-category-row.js

@@ -1,9 +1,10 @@
 import CategoryRowComponent from "select-kit/components/category-row";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import discourseComputed from "discourse-common/utils/decorators";
+import layout from "select-kit/templates/components/category-row";
 
 export default CategoryRowComponent.extend({
-  layoutName: "select-kit/templates/components/category-row",
+  layout,
   classNames: "none category-row",
 
   @discourseComputed("category")

app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.js

@@ -1,10 +1,10 @@
 import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
 import discourseComputed from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
+import layout from "select-kit/templates/components/notifications-filter/notifications-filter-header";
 
 export default DropdownSelectBoxHeaderComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/notifications-filter/notifications-filter-header",
 
   classNames: ["notifications-filter-header"],
 

app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.js

@@ -1,9 +1,9 @@
 import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
 import discourseComputed from "discourse-common/utils/decorators";
+import layout from "select-kit/templates/components/period-chooser/period-chooser-header";
 
 export default DropdownSelectBoxHeaderComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/period-chooser/period-chooser-header",
   classNames: ["period-chooser-header"],
 
   @discourseComputed("selectKit.isExpanded")

app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.js

@@ -1,10 +1,10 @@
 import I18n from "I18n";
 import DropdownSelectBoxRowComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-row";
 import discourseComputed from "discourse-common/utils/decorators";
+import layout from "select-kit/templates/components/period-chooser/period-chooser-row";
 
 export default DropdownSelectBoxRowComponent.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/period-chooser/period-chooser-row",
   classNames: ["period-chooser-row"],
 
   @discourseComputed("rowName")

app/assets/javascripts/select-kit/addon/components/pinned-button.js

@@ -1,13 +1,14 @@
 import I18n from "I18n";
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
+import layout from "select-kit/templates/components/pinned-button";
 
 export default Component.extend({
   pluginApiIdentifiers: ["pinned-button"],
   descriptionKey: "help",
   classNames: "pinned-button",
   classNameBindings: ["isHidden"],
-  layoutName: "select-kit/templates/components/pinned-button",
+  layout,
 
   @discourseComputed("topic.pinned_globally", "pinned")
   reasonText(pinnedGlobally, pinned) {

app/assets/javascripts/select-kit/addon/components/select-kit.js

@@ -37,7 +37,6 @@ export default Component.extend(
   UtilsMixin,
   {
     pluginApiIdentifiers: ["select-kit"],
-    layoutName: "select-kit/templates/components/select-kit",
     classNames: ["select-kit"],
     classNameBindings: [
       "selectKit.isLoading:is-loading",

app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.js

@@ -1,8 +1,9 @@
 import Component from "@ember/component";
 import { notEmpty } from "@ember/object/computed";
+import layout from "select-kit/templates/components/select-kit/errors-collection";
 
 export default Component.extend({
-  layoutName: "select-kit/templates/components/select-kit/errors-collection",
+  layout,
   classNames: ["select-kit-errors-collection"],
   tagName: "ul",
   isVisible: notEmpty("collection.content")

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js

@@ -1,9 +1,10 @@
 import Component from "@ember/component";
 import { computed } from "@ember/object";
 import { bind } from "@ember/runloop";
+import layout from "select-kit/templates/components/select-kit/select-kit-body";
 
 export default Component.extend({
-  layoutName: "select-kit/templates/components/select-kit/select-kit-body",
+  layout,
   classNames: ["select-kit-body"],
   attributeBindings: ["selectKitId:data-select-kit-id"],
   selectKitId: computed("selectKit.uniqueID", function() {

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js

@@ -1,9 +1,9 @@
 import Component from "@ember/component";
 import { notEmpty } from "@ember/object/computed";
+import layout from "select-kit/templates/components/select-kit/select-kit-collection";
 
 export default Component.extend({
-  layoutName:
+  layout,
-    "select-kit/templates/components/select-kit/select-kit-collection",
   classNames: ["select-kit-collection"],
   tagName: "ul",
   isVisible: notEmpty("collection")

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.js

@@ -1,6 +1,7 @@
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/select-kit/select-kit-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName: "select-kit/templates/components/select-kit/select-kit-row",
+  layout,
   classNames: "create"
 });

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js

@@ -5,9 +5,10 @@ import { isPresent } from "@ember/utils";
 import { computed } from "@ember/object";
 import { not } from "@ember/object/computed";
 import UtilsMixin from "select-kit/mixins/utils";
+import layout from "select-kit/templates/components/select-kit/select-kit-filter";
 
 export default Component.extend(UtilsMixin, {
-  layoutName: "select-kit/templates/components/select-kit/select-kit-filter",
+  layout,
   classNames: ["select-kit-filter"],
   classNameBindings: ["isExpanded:is-expanded"],
   attributeBindings: ["selectKitId:data-select-kit-id"],

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.js

@@ -1,6 +1,7 @@
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/select-kit/select-kit-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName: "select-kit/templates/components/select-kit/select-kit-row",
+  layout,
   classNames: "none"
 });

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js

@@ -4,9 +4,10 @@ import { computed } from "@ember/object";
 import { makeArray } from "discourse-common/lib/helpers";
 import { guidFor } from "@ember/object/internals";
 import UtilsMixin from "select-kit/mixins/utils";
+import layout from "select-kit/templates/components/select-kit/select-kit-row";
 
 export default Component.extend(UtilsMixin, {
-  layoutName: "select-kit/templates/components/select-kit/select-kit-row",
+  layout,
   classNames: ["select-kit-row"],
   tagName: "li",
   tabIndex: -1,

app/assets/javascripts/select-kit/addon/components/select-kit/single-select-header.js

@@ -1,7 +1,8 @@
 import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
 import UtilsMixin from "select-kit/mixins/utils";
+import layout from "select-kit/templates/components/select-kit/single-select-header";
 
 export default SelectKitHeaderComponent.extend(UtilsMixin, {
-  layoutName: "select-kit/templates/components/select-kit/single-select-header",
+  layout,
   classNames: ["single-select-header"]
 });

app/assets/javascripts/select-kit/addon/components/selected-name.js

@@ -2,10 +2,11 @@ import { computed, get, action } from "@ember/object";
 import Component from "@ember/component";
 import { makeArray } from "discourse-common/lib/helpers";
 import UtilsMixin from "select-kit/mixins/utils";
+import layout from "select-kit/templates/components/selected-name";
 
 export default Component.extend(UtilsMixin, {
   tagName: "",
-  layoutName: "select-kit/templates/components/selected-name",
+  layout,
   name: null,
   value: null,
 

app/assets/javascripts/select-kit/addon/components/single-select.js

@@ -1,10 +1,11 @@
 import SelectKitComponent from "select-kit/components/select-kit";
 import { computed } from "@ember/object";
 import { isEmpty } from "@ember/utils";
+import layout from "select-kit/templates/components/single-select";
 
 export default SelectKitComponent.extend({
   pluginApiIdentifiers: ["single-select"],
-  layoutName: "select-kit/templates/components/single-select",
+  layout,
   classNames: ["single-select"],
   singleSelect: true,
 

app/assets/javascripts/select-kit/addon/components/tag-chooser-row.js

@@ -1,6 +1,7 @@
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/tag-chooser-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName: "select-kit/templates/components/tag-chooser-row",
+  layout,
   classNames: ["tag-chooser-row"]
 });

app/assets/javascripts/select-kit/addon/components/tag-drop/tag-drop-header.js

@@ -1,6 +1,7 @@
 import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
+import layout from "select-kit/templates/components/tag-drop/tag-drop-header";
 
 export default ComboBoxSelectBoxHeaderComponent.extend({
-  layoutName: "select-kit/templates/components/tag-drop/tag-drop-header",
+  layout,
   classNames: "tag-drop-header"
 });

app/assets/javascripts/select-kit/addon/components/tag-row.js

@@ -1,6 +1,7 @@
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/tag-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName: "select-kit/templates/components/tag-row",
+  layout,
   classNames: ["tag-row"]
 });

app/assets/javascripts/select-kit/addon/components/topic-notifications-button.js

@@ -1,8 +1,9 @@
 import Component from "@ember/component";
 import { action, computed } from "@ember/object";
+import layout from "select-kit/templates/components/topic-notifications-button";
 
 export default Component.extend({
-  layoutName: "select-kit/templates/components/topic-notifications-button",
+  layout,
   classNames: ["topic-notifications-button"],
   classNameBindings: ["isLoading"],
   appendReason: true,

app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.js

@@ -1,6 +1,7 @@
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/user-chooser/user-row";
 
 export default SelectKitRowComponent.extend({
-  layoutName: "select-kit/templates/components/user-chooser/user-row",
+  layout,
   classNames: ["user-row"]
 });

app/assets/javascripts/wizard/wizard.js

@@ -6,6 +6,14 @@ export default Application.extend({
   Resolver: buildResolver("wizard"),
 
   start() {
+    // required for select kit to work without Ember CLI
+    Object.keys(Ember.TEMPLATES).forEach(k => {
+      if (k.indexOf("select-kit") === 0) {
+        let template = Ember.TEMPLATES[k];
+        define(k, () => template);
+      }
+    });
+
     Object.keys(requirejs._eak_seen).forEach(key => {
       if (/\/initializers\//.test(key)) {
         const module = requirejs(key, null, null, true);