FIX: adds select-kit api to modify header computed content (#5476)

This api would allow to simply modify header text or icons, eg:

```
      api.modifySelectKit("select-kit")
        .modifyHeaderComputedContent((context, computedContent) => {
          computedContent.title = "Not so evil";
          return computedContent;
        });
```

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -24,7 +24,7 @@ import { replaceFormatter } from 'discourse/lib/utilities';
 import { modifySelectKit } from "select-kit/mixins/plugin-api";
 
 // If you add any methods to the API ensure you bump up this number
-const PLUGIN_API_VERSION = '0.8.14';
+const PLUGIN_API_VERSION = '0.8.15';
 
 class PluginApi {
   constructor(version, container) {

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

@@ -45,7 +45,7 @@ export default SelectKitComponent.extend({
       values = this.willComputeValues(values);
       values = this.computeValues(values);
       values = this._beforeDidComputeValues(values);
-      this.set("headerComputedContent", this.computeHeaderContent());
+      this._setHeaderComputedContent();
       this.didComputeContent(content);
       this.didComputeValues(values);
       this.didComputeAttributes();
@@ -86,7 +86,7 @@ export default SelectKitComponent.extend({
       this.mutateContent(this.get("computedContent"));
       this.mutateValues(this.get("computedValues"));
       applyOnSelectPluginApiCallbacks(this.get("pluginApiIdentifiers"), this.get("computedValues"), this);
-      this.set("headerComputedContent", this.computeHeaderContent());
+      this._setHeaderComputedContent();
     });
   },
   mutateValues(computedValues) {

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

@@ -5,7 +5,8 @@ import DomHelpersMixin from "select-kit/mixins/dom-helpers";
 import EventsMixin from "select-kit/mixins/events";
 import PluginApiMixin from "select-kit/mixins/plugin-api";
 import {
-  applyContentPluginApiCallbacks
+  applyContentPluginApiCallbacks,
+  applyHeaderContentPluginApiCallbacks
 } from "select-kit/mixins/plugin-api";
 
 export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixin, EventsMixin, {
@@ -224,6 +225,15 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     this.setProperties({ filter: "" });
   },
 
+  _setHeaderComputedContent() {
+    const headerComputedContent = applyHeaderContentPluginApiCallbacks(
+      this.get("pluginApiIdentifiers"),
+      this.computeHeaderContent(),
+      this
+    );
+    this.set("headerComputedContent", headerComputedContent);
+  },
+
   actions: {
     onToggle() {
       if (this.get("onToggle")) this.sendAction("onToggle");
@@ -231,6 +241,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
       if (this.get("onExpand") && this.get("isExpanded") === false) this.sendAction("onExpand");
 
       this.get("isExpanded") === true ? this.collapse() : this.expand();
+
+      this._setHeaderComputedContent();
     },
 
     onHighlight(rowComputedContent) {

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

@@ -26,7 +26,7 @@ export default SelectKitComponent.extend({
       value = this._beforeDidComputeValue(value);
       this.didComputeContent(content);
       this.didComputeValue(value);
-      this.set("headerComputedContent", this.computeHeaderContent());
+      this._setHeaderComputedContent();
       this.didComputeAttributes();
 
       if (this.get("allowInitialValueMutation")) this.mutateAttributes();
@@ -40,7 +40,7 @@ export default SelectKitComponent.extend({
       this.mutateContent(this.get("computedContent"));
       this.mutateValue(this.get("computedValue"));
       applyOnSelectPluginApiCallbacks(this.get("pluginApiIdentifiers"), this.get("computedValue"), this);
-      this.set("headerComputedContent", this.computeHeaderContent());
+      this._setHeaderComputedContent();
     });
   },
   mutateContent() {},

app/assets/javascripts/select-kit/mixins/plugin-api.js.es6

@@ -25,6 +25,15 @@ function modifyContent(pluginApiIdentifiers, contentFunction) {
   _modifyContentCallbacks[pluginApiIdentifiers].push(contentFunction);
 }
 
+let _modifyHeaderComputedContentCallbacks = {};
+function modifyHeaderComputedContent(pluginApiIdentifiers, contentFunction) {
+  if (Ember.isNone(_modifyHeaderComputedContentCallbacks[pluginApiIdentifiers])) {
+    _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers].push(contentFunction);
+}
+
 let _onSelectCallbacks = {};
 function onSelect(pluginApiIdentifiers, mutationFunction) {
   if (Ember.isNone(_onSelectCallbacks[pluginApiIdentifiers])) {
@@ -50,6 +59,16 @@ export function applyContentPluginApiCallbacks(identifiers, content, context) {
   return content;
 }
 
+export function applyHeaderContentPluginApiCallbacks(identifiers, content, context) {
+  identifiers.forEach((key) => {
+    (_modifyHeaderComputedContentCallbacks[key] || []).forEach((c) => {
+      content = c(context, content);
+    });
+  });
+
+  return content;
+}
+
 export function applyOnSelectPluginApiCallbacks(identifiers, val, context) {
   identifiers.forEach((key) => {
     (_onSelectCallbacks[key] || []).forEach((c) => c(context, val));
@@ -70,6 +89,10 @@ export function modifySelectKit(pluginApiIdentifiers) {
       modifyContent(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
     },
+    modifyHeaderComputedContent: (callback) => {
+      modifyHeaderComputedContent(pluginApiIdentifiers, callback);
+      return modifySelectKit(pluginApiIdentifiers);
+    },
     onSelect: (callback) => {
       onSelect(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
@@ -81,6 +104,7 @@ export function clearCallbacks() {
   _appendContentCallbacks = {};
   _prependContentCallbacks = {};
   _modifyContentCallbacks = {};
+  _modifyHeaderComputedContentCallbacks = {};
   _onSelectCallbacks = {};
 }
 

test/javascripts/components/single-select-test.js.es6

@@ -103,7 +103,7 @@ componentTest('custom search icon', {
 
     andThen(() => {
       assert.ok(
-        this.get('subject').filter().icon().hasClass("fa-shower"),
+        this.get('subject').filter().icon().hasClass("d-icon-shower"),
         "it has a the correct icon"
       );
     });
@@ -532,3 +532,28 @@ componentTest('with title', {
     andThen(() => assert.equal(this.get('subject').header().title(), 'My title') );
   }
 });
+
+
+componentTest('support modifying header computed content through plugin api', {
+  template: '{{single-select content=content}}',
+
+  beforeEach() {
+    withPluginApi('0.8.15', api => {
+      api.modifySelectKit("select-kit")
+        .modifyHeaderComputedContent((context, computedContent) => {
+          computedContent.title = "Not so evil";
+          return computedContent;
+        });
+    });
+
+    this.set("content", [{ id: "1", name: "robin"}]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.equal(this.get('subject').header().title(), "Not so evil");
+    });
+
+    andThen(() => clearCallbacks());
+  }
+});