FIX: reverts combobox placeholder and introduces noneLabel

noneLabels works almost like none but instead of actually adding a row in the list, it will only change the text displayed in the header, when there's no selection.

app/assets/javascripts/discourse/templates/groups/index.hbs

@@ -16,7 +16,7 @@
                   content=types
                   clearable=true
                   allowAutoSelectFirst=false
-                  placeholder="groups.index.filter"
+                  noneLabel="groups.index.filter"
                   class="groups-header-filters-type"}}
     </div>
   </div>

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

@@ -24,11 +24,8 @@ export default SingleSelectComponent.extend({
 
   @on("didReceiveAttrs")
   _setComboBoxOptions() {
-    const placeholder = this.get('placeholder');
-
     this.get("headerComponentOptions").setProperties({
-      clearable: this.get("clearable"),
-      placeholder: placeholder ? I18n.t(placeholder) : "",
+      clearable: this.get("clearable")
     });
   }
 });

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

@@ -7,6 +7,5 @@ export default SelectKitHeaderComponent.extend({
   clearable: Ember.computed.alias("options.clearable"),
   caretUpIcon: Ember.computed.alias("options.caretUpIcon"),
   caretDownIcon: Ember.computed.alias("options.caretDownIcon"),
-  shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection"),
-  placeholder: Ember.computed.alias("options.placeholder"),
+  shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection")
 });

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

@@ -262,7 +262,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
 
   @computed("none")
   noneRowComputedContent(none) {
-    if (isNone(none)) { return null; }
+    if (isNone(none)) return null;
+
     let noneRowComputedContent;
 
     switch (typeof none) {

app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6

@@ -4,7 +4,7 @@ const { isEmpty, makeArray } = Ember;
 export default Ember.Component.extend({
   layoutName: "select-kit/templates/components/select-kit/select-kit-header",
   classNames: ["select-kit-header"],
-  classNameBindings: ["isFocused"],
+  classNameBindings: ["isFocused", "isNone"],
   attributeBindings: [
     "tabindex",
     "ariaLabel:aria-label",
@@ -14,6 +14,8 @@ export default Ember.Component.extend({
     "name:data-name",
   ],
 
+  isNone: Ember.computed.none("computedContent.value"),
+
   ariaHasPopup: true,
 
   ariaLabel: Ember.computed.or("computedContent.ariaLabel", "title"),

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

@@ -84,12 +84,18 @@ export default SelectKitComponent.extend({
   },
 
   computeHeaderContent() {
-    return {
+    let content = {
       title: this.get("title"),
       icons: makeArray(this.getWithDefault("headerIcon", [])),
       value: this.get("selection.value"),
       name: this.get("selection.name") || this.get("noneRowComputedContent.name")
     };
+
+    if (!this.get("hasSelection") && this.get("noneLabel")) {
+      content.title = content.name = I18n.t(this.get("noneLabel"));
+    }
+
+    return content;
   },
 
   @computed("computedAsyncContent.[]", "computedValue")

app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs

@@ -1,14 +1,8 @@
 {{#each icons as |icon|}} {{d-icon icon}} {{/each}}
 
-{{#if label}}
-  <span class="selected-name">
-    {{{label}}}
-  </span>
-{{else}}
-  <span class="combo-box-placeholder">
-    {{placeholder}}
-  </span>
-{{/if}}
+<span class="selected-name">
+  {{{label}}}
+</span>
 
 {{#if shouldDisplayClearableButton}}
   <button class="btn-clear" {{action onClearSelection bubbles=false}}>

app/assets/stylesheets/common/select-kit/combo-box.scss

@@ -1,9 +1,5 @@
 .select-kit {
   &.combo-box {
-    .combo-box-placeholder {
-      color: dark-light-choose($primary-high, $secondary-low);
-    }
-
     .select-kit-body {
       width: 100%;
     }

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -104,6 +104,12 @@
       color: inherit;
     }
 
+    &.is-none {
+      .selected-name {
+        color: dark-light-choose($primary-high, $secondary-low);
+      }
+    }
+
     .btn-clear {
       padding: 0 10px;
       border: 0;

test/javascripts/components/combo-box-test.js.es6

@@ -192,3 +192,20 @@ componentTest('with empty string as value', {
     });
   }
 });
+
+componentTest('with noneLabel', {
+  template: '{{combo-box content=items allowAutoSelectFirst=false noneLabel=noneLabel}}',
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {none: 'none'};
+    this.set('items', ['evil', 'trout', 'hat']);
+    this.set('noneLabel', 'test.none');
+  },
+
+  test(assert) {
+    this.get('subject').expand();
+
+    andThen(() => {
+      assert.equal(this.get('subject').header().name(), 'none', 'it displays noneLabel as the header name');
+    });
+  }
+});