DEV: add outlet wrapper for small user list (#29763)

* DEV: add outlet wrapper for small user list

* DEV: use value transformer to extend small user attrs function

* Update app/assets/javascripts/discourse/app/components/small-user-list.gjs

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/admin/addon/templates/user-badges.hbs

@@ -21,6 +21,7 @@
         @outletArgs={{hash
           availableBadges=this.availableBadges
           userBadges=this.userBadges
+          user=this.user
         }}
       >
         <form class="form-horizontal">

app/assets/javascripts/discourse/app/components/small-user-list.gjs

@@ -1,31 +1,22 @@
 import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
 import { service } from "@ember/service";
+import PluginOutlet from "discourse/components/plugin-outlet";
 import avatar from "discourse/helpers/bound-avatar-template";
-import { userPath } from "discourse/lib/url";
+import { smallUserAttrs } from "discourse/lib/user-list-attrs";
 import getURL from "discourse-common/lib/get-url";
 import { i18n } from "discourse-i18n";
 
 export default class SmallUserList extends Component {
   @service currentUser;
 
-  smallUserAtts(user) {
-    return {
-      template: user.avatar_template,
-      username: user.username,
-      post_url: user.post_url,
-      url: userPath(user.username_lower),
-      unknown: user.unknown,
-    };
-  }
-
   get users() {
     let users = this.args.users;
-
     if (
       this.args.addSelf &&
       !users.some((u) => u.username === this.currentUser.username)
     ) {
-      users = users.concat(this.smallUserAtts(this.currentUser));
+      users = users.concat(smallUserAttrs(this.currentUser));
     }
     return users;
   }
@@ -39,6 +30,10 @@ export default class SmallUserList extends Component {
 
   <template>
     {{#if this.users}}
+      <PluginOutlet
+        @name="small-user-list-internal"
+        @outletArgs={{hash data=this.args}}
+      >
         <div class="clearfix small-user-list" ...attributes>
           <span
             class="small-user-list-content"
@@ -80,6 +75,7 @@ export default class SmallUserList extends Component {
             {{/if}}
           </span>
         </div>
+      </PluginOutlet>
     {{/if}}
   </template>
 }

app/assets/javascripts/discourse/app/lib/transformer/registry.js

@@ -14,4 +14,5 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "mentions-class",
   "more-topics-tabs",
   "post-menu-buttons",
+  "small-user-attrs",
 ]);

app/assets/javascripts/discourse/app/lib/user-list-attrs.js

@@ -0,0 +1,16 @@
+import { applyValueTransformer } from "discourse/lib/transformer";
+import { userPath } from "discourse/lib/url";
+
+export function smallUserAttrs(user) {
+  const defaultAttrs = {
+    template: user.avatar_template,
+    username: user.username,
+    post_url: user.post_url,
+    url: userPath(user.username_lower),
+    unknown: user.unknown,
+  };
+
+  return applyValueTransformer("small-user-attrs", defaultAttrs, {
+    user,
+  });
+}

app/assets/javascripts/discourse/app/widgets/post-menu.js

@@ -6,7 +6,7 @@ import AdminPostMenu from "discourse/components/admin-post-menu";
 import DeleteTopicDisallowedModal from "discourse/components/modal/delete-topic-disallowed";
 import { formattedReminderTime } from "discourse/lib/bookmark";
 import { recentlyCopied, showAlert } from "discourse/lib/post-action-feedback";
-import { userPath } from "discourse/lib/url";
+import { smallUserAttrs } from "discourse/lib/user-list-attrs";
 import {
   NO_REMINDER_ICON,
   WITH_REMINDER_ICON,
@@ -55,16 +55,6 @@ function registerButton(name, builder) {
   _builders[name] = builder;
 }
 
-function smallUserAtts(user) {
-  return {
-    template: user.avatar_template,
-    username: user.username,
-    post_url: user.post_url,
-    url: userPath(user.username_lower),
-    unknown: user.unknown,
-  };
-}
-
 export function buildButton(name, widget) {
   let { attrs, state, siteSettings, settings, currentUser } = widget;
 
@@ -907,14 +897,13 @@ export default createWidget("post-menu", {
 
   getWhoLiked() {
     const { attrs, state } = this;
-
     return this.store
       .find("post-action-user", {
         id: attrs.id,
         post_action_type_id: LIKE_ACTION,
       })
       .then((users) => {
-        state.likedUsers = users.map(smallUserAtts);
+        state.likedUsers = users.map(smallUserAttrs);
         state.total = users.totalRows;
       });
   },
@@ -923,7 +912,7 @@ export default createWidget("post-menu", {
     const { attrs, state } = this;
 
     return this.store.find("post-reader", { id: attrs.id }).then((users) => {
-      state.readers = users.map(smallUserAtts);
+      state.readers = users.map(smallUserAttrs);
       state.totalReaders = users.totalRows;
     });
   },