From b66802ccf10ece7d8c983351f5a5975806b4567e Mon Sep 17 00:00:00 2001
From: Jeff Wong <awole20@gmail.com>
Date: Mon, 24 May 2021 09:33:21 -1000
Subject: [PATCH] DEV: add plugin hook to add topic participant classes
 (#13125)

Allow plugins to add custom css classes to topic participants
---
 .../discourse/app/lib/plugin-api.js           | 15 ++++++++++++-
 .../discourse/app/widgets/topic-map.js        | 21 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/plugin-api.js b/app/assets/javascripts/discourse/app/lib/plugin-api.js
index 5778d700b86..5f8a2ff4c44 100644
--- a/app/assets/javascripts/discourse/app/lib/plugin-api.js
+++ b/app/assets/javascripts/discourse/app/lib/plugin-api.js
@@ -52,6 +52,7 @@ import { addPostSmallActionIcon } from "discourse/widgets/post-small-action";
 import { addQuickAccessProfileItem } from "discourse/widgets/quick-access-profile";
 import { addTagsHtmlCallback } from "discourse/lib/render-tags";
 import { addToolbarCallback } from "discourse/components/d-editor";
+import { addTopicParticipantClassesCallback } from "discourse/widgets/topic-map";
 import { addTopicTitleDecorator } from "discourse/components/topic-title";
 import { addUserMenuGlyph } from "discourse/widgets/user-menu";
 import { addUsernameSelectorDecorator } from "discourse/helpers/decorate-username-selector";
@@ -73,7 +74,7 @@ import { replaceTagRenderer } from "discourse/lib/render-tag";
 import { setNewCategoryDefaultColors } from "discourse/routes/new-category";
 
 // If you add any methods to the API ensure you bump up this number
-const PLUGIN_API_VERSION = "0.11.3";
+const PLUGIN_API_VERSION = "0.11.4";
 
 class PluginApi {
   constructor(version, container) {
@@ -763,6 +764,18 @@ class PluginApi {
     addPostClassesCallback(callback);
   }
 
+  /**
+   * Adds a callback to be called before rendering a topic participant that
+   * that returns custom classes to add to the participant element
+   *
+   * Example:
+   *
+   * addTopicParticipantClassesCallback((attrs) => {if (attrs.primary_group_name == "moderator") return ["important-participant"];})
+   **/
+  addTopicParticipantClassesCallback(callback) {
+    addTopicParticipantClassesCallback(callback);
+  }
+
   /**
    *
    * Adds a callback to be executed on the "transformed" post that is passed to the post
diff --git a/app/assets/javascripts/discourse/app/widgets/topic-map.js b/app/assets/javascripts/discourse/app/widgets/topic-map.js
index be9bf14d84e..5db917edc74 100644
--- a/app/assets/javascripts/discourse/app/widgets/topic-map.js
+++ b/app/assets/javascripts/discourse/app/widgets/topic-map.js
@@ -40,11 +40,30 @@ createWidget("topic-map-show-links", {
   },
 });
 
+let addTopicParticipantClassesCallbacks = null;
+export function addTopicParticipantClassesCallback(callback) {
+  addTopicParticipantClassesCallbacks =
+    addTopicParticipantClassesCallbacks || [];
+  addTopicParticipantClassesCallbacks.push(callback);
+}
 createWidget("topic-participant", {
   buildClasses(attrs) {
+    const classNames = [];
     if (attrs.primary_group_name) {
-      return `group-${attrs.primary_group_name}`;
+      classNames.push(`group-${attrs.primary_group_name}`);
     }
+    if (addTopicParticipantClassesCallbacks) {
+      for (let i = 0; i < addTopicParticipantClassesCallbacks.length; i++) {
+        let pluginClasses = addTopicParticipantClassesCallbacks[i].call(
+          this,
+          attrs
+        );
+        if (pluginClasses) {
+          classNames.push.apply(classNames, pluginClasses);
+        }
+      }
+    }
+    return classNames;
   },
 
   html(attrs, state) {