DEV: Convert actions-summary to a component (#26337)

app/assets/javascripts/discourse/app/components/actions-summary.gjs

@@ -0,0 +1,30 @@
+import avatar from "discourse/helpers/bound-avatar-template";
+import formatDate from "discourse/helpers/format-date";
+import dIcon from "discourse-common/helpers/d-icon";
+
+const ActionsSummary = <template>
+  {{#each @data.actionsSummary as |as|}}
+    <div class="post-action">{{as.description}}</div>
+    <div class="clearfix"></div>
+  {{/each}}
+  {{#if @data.deleted_at}}
+    <div class="post-action deleted-post">
+      {{dIcon "far-trash-alt"}}
+      <a
+        class="trigger-user-card"
+        data-user-card={{@data.deletedByUsername}}
+        title={{@data.deletedByUsername}}
+        aria-hidden="true"
+      >
+        {{avatar
+          @data.deletedByAvatarTemplate
+          "tiny"
+          title=@data.deletedByUsername
+        }}
+      </a>
+      {{formatDate @data.deleted_at format="tiny"}}
+    </div>
+  {{/if}}
+</template>;
+
+export default ActionsSummary;

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

@@ -0,0 +1,75 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import avatar from "discourse/helpers/bound-avatar-template";
+import { userPath } from "discourse/lib/url";
+import i18n from "discourse-common/helpers/i18n";
+import getURL from "discourse-common/lib/get-url";
+
+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.data.users;
+
+    if (
+      this.args.data.addSelf &&
+      !users.some((u) => u.username === this.currentUser.username)
+    ) {
+      users = users.concat(this.smallUserAtts(this.currentUser));
+    }
+    return users;
+  }
+
+  get postUrl() {
+    const url = this.users.find((user) => user.post_url);
+    if (url) {
+      return getURL(url);
+    }
+  }
+
+  <template>
+    {{#each this.users as |user|}}
+      {{#if user.unknown}}
+        <div
+          title={{i18n "post.unknown_user"}}
+          class="unknown"
+          role="listitem"
+        ></div>
+      {{else}}
+        <a
+          class="trigger-user-card"
+          data-user-card={{user.username}}
+          title={{user.username}}
+          aria-hidden="false"
+          role="listitem"
+        >
+          {{avatar user.template "tiny"}}
+        </a>
+      {{/if}}
+    {{/each}}
+
+    {{#if @data.description}}
+      {{#if this.postUrl}}
+        <a href={{this.postUrl}}>
+          <span aria-hidden="true" class="list-description">
+            {{i18n @data.description count=@data.count}}
+          </span>
+        </a>
+      {{else}}
+        <span aria-hidden="true" class="list-description">
+          {{i18n @data.description count=@data.count}}
+        </span>
+      {{/if}}
+    {{/if}}
+  </template>
+}

app/assets/javascripts/discourse/app/widgets/actions-summary.js

@@ -1,20 +1,8 @@
-import { h } from "virtual-dom";
-import { userPath } from "discourse/lib/url";
-import hbs from "discourse/widgets/hbs-compiler";
-import { avatarFor } from "discourse/widgets/post";
+import { hbs } from "ember-cli-htmlbars";
+import RenderGlimmer, {
+  registerWidgetShim,
+} from "discourse/widgets/render-glimmer";
 import { createWidget } from "discourse/widgets/widget";
-import getURL from "discourse-common/lib/get-url";
-import I18n from "discourse-i18n";
-
-export function smallUserAtts(user) {
-  return {
-    template: user.avatar_template,
-    username: user.username,
-    post_url: user.post_url,
-    url: userPath(user.username_lower),
-    unknown: user.unknown,
-  };
-}
 
 createWidget("small-user-list", {
   tagName: "div.clearfix.small-user-list",
@@ -31,89 +19,22 @@ createWidget("small-user-list", {
     return attributes;
   },
 
-  html(atts) {
-    let users = atts.users;
-    if (users) {
-      const currentUser = this.currentUser;
-      if (
-        atts.addSelf &&
-        !users.some((u) => u.username === currentUser.username)
-      ) {
-        users = users.concat(smallUserAtts(currentUser));
-      }
-
-      let description = null;
-
-      if (atts.description) {
-        description = h(
-          "span.list-description",
-          { attributes: { "aria-hidden": true } },
-          I18n.t(atts.description, { count: atts.count })
-        );
-      }
-
-      // oddly post_url is on the user
-      let postUrl;
-      const icons = users.map((u) => {
-        postUrl = postUrl || u.post_url;
-        if (u.unknown) {
-          return h("div.unknown", {
-            attributes: {
-              title: I18n.t("post.unknown_user"),
-              role: "listitem",
-            },
-          });
-        } else {
-          return avatarFor.call(this, "small", u, {
-            role: "listitem",
-            "aria-hidden": false,
-          });
+  html(attrs) {
+    return [
+      new RenderGlimmer(
+        this,
+        "span.small-user-list-content",
+        hbs`<SmallUserList @data={{@data.attrs}}/>`,
+        {
+          attrs,
         }
-      });
-
-      if (postUrl) {
-        description = h(
-          "a",
-          { attributes: { href: getURL(postUrl) } },
-          description
-        );
-      }
-
-      let buffer = [icons];
-      if (description) {
-        buffer.push(description);
-      }
-      return buffer;
-    }
+      ),
+    ];
   },
 });
 
-createWidget("action-link", {
-  tagName: "span.action-link",
-  template: hbs`<a>{{attrs.text}}. </a>`,
-
-  buildClasses(attrs) {
-    return attrs.className;
-  },
-
-  click() {
-    this.sendWidgetAction(this.attrs.action);
-  },
-});
-
-export default createWidget("actions-summary", {
-  tagName: "section.post-actions",
-  template: hbs`
-    {{#each attrs.actionsSummary as |as|}}
-      <div class='post-action'>{{as.description}}</div>
-      <div class='clearfix'></div>
-    {{/each}}
-    {{#if attrs.deleted_at}}
-      <div class='post-action deleted-post'>
-        {{d-icon "far-trash-alt"}}
-        {{avatar size="small" template=attrs.deletedByAvatarTemplate username=attrs.deletedByUsername}}
-        {{date attrs.deleted_at}}
-      </div>
-    {{/if}}
-  `,
-});
+registerWidgetShim(
+  "actions-summary",
+  "section.post-actions",
+  hbs`<ActionsSummary @data={{@data}} /> `
+);

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

@@ -6,11 +6,11 @@ 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 {
   NO_REMINDER_ICON,
   WITH_REMINDER_ICON,
 } from "discourse/models/bookmark";
-import { smallUserAtts } from "discourse/widgets/actions-summary";
 import RenderGlimmer from "discourse/widgets/render-glimmer";
 import { applyDecorators, createWidget } from "discourse/widgets/widget";
 import discourseLater from "discourse-common/lib/later";
@@ -53,6 +53,16 @@ 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;
 

app/assets/stylesheets/common/base/topic-post.scss

@@ -534,14 +534,22 @@ aside.quote {
   }
 }
 
-.small-user-list .unknown {
-  display: inline-block;
-  background-color: var(--primary-low);
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  vertical-align: middle;
-  margin-right: 0.25em;
+.small-user-list {
+  .small-user-list-content {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+
+  .unknown {
+    display: inline-block;
+    background-color: var(--primary-low);
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-right: 0.25em;
+  }
 }
 
 .post-hidden {