From 8825395bdca655fd5ff108e06de59393267d5c7d Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 25 May 2020 19:09:55 +0200
Subject: [PATCH] DEV: allows to decorate username selector (#9869)

Usage:

```
api.addUsernameSelectorDecorator(username => {
  return iconHTML("calendar-alt");
});
```
---
 .../app/helpers/decorate-username-selector.js | 21 +++++++++++++++++++
 .../discourse/app/lib/plugin-api.js           | 14 +++++++++++++
 .../templates/user-selector-autocomplete.hbr  |  1 +
 test/javascripts/helpers/qunit-helpers.js     |  2 ++
 4 files changed, 38 insertions(+)
 create mode 100644 app/assets/javascripts/discourse/app/helpers/decorate-username-selector.js

diff --git a/app/assets/javascripts/discourse/app/helpers/decorate-username-selector.js b/app/assets/javascripts/discourse/app/helpers/decorate-username-selector.js
new file mode 100644
index 00000000000..6b2da958458
--- /dev/null
+++ b/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("")) : "";
+});
diff --git a/app/assets/javascripts/discourse/app/lib/plugin-api.js b/app/assets/javascripts/discourse/app/lib/plugin-api.js
index d17fde9235a..752b2a2b6ab 100644
--- a/app/assets/javascripts/discourse/app/lib/plugin-api.js
+++ b/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.
diff --git a/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr b/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr
index 22de8631889..797bd64e352 100644
--- a/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr
+++ b/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}}
diff --git a/test/javascripts/helpers/qunit-helpers.js b/test/javascripts/helpers/qunit-helpers.js
index f196bd03bce..3a92b2984ee 100644
--- a/test/javascripts/helpers/qunit-helpers.js
+++ b/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(