DEV: allows to decorate username selector (#9869)

Usage:

```
api.addUsernameSelectorDecorator(username => {
  return iconHTML("calendar-alt");
});
```

app/assets/javascripts/discourse/app/helpers/decorate-username-selector.js

@@ -0,0 +1,21 @@
+import { htmlSafe } from "@ember/template";
+import { registerUnbound } from "discourse-common/lib/helpers";
+
+let usernameDecorators = [];
+export function addUsernameSelectorDecorator(decorator) {
+  usernameDecorators.push(decorator);
+}
+
+export function resetUsernameDecorators() {
+  usernameDecorators = [];
+}
+
+export default registerUnbound("decorate-username-selector", username => {
+  const decorations = [];
+
+  usernameDecorators.forEach(decorator => {
+    decorations.push(decorator(username));
+  });
+
+  return decorations.length ? htmlSafe(decorations.join("")) : "";
+});

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

@@ -40,6 +40,7 @@ import { replaceFormatter } from "discourse/lib/utilities";
 import { modifySelectKit } from "select-kit/mixins/plugin-api";
 import { addGTMPageChangedCallback } from "discourse/lib/page-tracker";
 import { registerCustomAvatarHelper } from "discourse/helpers/user-avatar";
+import { addUsernameSelectorDecorator } from "discourse/helpers/decorate-username-selector";
 import { disableNameSuppression } from "discourse/widgets/poster-name";
 import { registerCustomPostMessageCallback as registerCustomPostMessageCallback1 } from "discourse/controllers/topic";
 import Sharing from "discourse/lib/sharing";
@@ -927,6 +928,19 @@ class PluginApi {
     addComposerUploadMarkdownResolver(resolver);
   }
 
+  /**
+   * Registers a function to decorate each autocomplete usernames.
+   *
+   * Example:
+   *
+   * api.appendUsernameDecorator(username => {
+   *   return `<span class="status">[is_away]</class>`;
+   * })
+   */
+  addUsernameSelectorDecorator(decorator) {
+    addUsernameSelectorDecorator(decorator);
+  }
+
   /**
    * Registers a "beforeSave" function on the composer. This allows you to
    * implement custom logic that will happen before the user makes a post.

app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr

@@ -6,6 +6,7 @@
           {{avatar user imageSize="tiny"}}
           <span class='username'>{{format-username user.username}}</span>
           <span class='name'>{{user.name}}</span>
+          {{decorate-username-selector user.username}}
         </a>
       </li>
     {{/each}}

test/javascripts/helpers/qunit-helpers.js

@@ -19,6 +19,7 @@ import { resetWidgetCleanCallbacks } from "discourse/components/mount-widget";
 import { resetTopicTitleDecorators } from "discourse/components/topic-title";
 import { resetDecorators as resetPostCookedDecorators } from "discourse/widgets/post-cooked";
 import { resetDecorators as resetPluginOutletDecorators } from "discourse/components/plugin-connector";
+import { resetUsernameDecorators } from "discourse/helpers/decorate-username-selector";
 import { resetCache as resetOneboxCache } from "pretty-text/oneboxer";
 import { resetCustomPostMessageCallbacks } from "discourse/controllers/topic";
 import User from "discourse/models/user";
@@ -162,6 +163,7 @@ export function acceptance(name, options) {
       resetPostCookedDecorators();
       resetPluginOutletDecorators();
       resetTopicTitleDecorators();
+      resetUsernameDecorators();
       resetOneboxCache();
       resetCustomPostMessageCallbacks();
       Discourse._runInitializer("instanceInitializers", function(