DEV: implements actionDecriptionWidget (#15367)

This will allow to have more complex behaviors in post-small-actions, while keeping most of the behavior consistent.

app/assets/javascripts/discourse/app/widgets/post-small-action.js

@@ -128,20 +128,24 @@ export default createWidget("post-small-action", {
       })
     );
 
-    const description = actionDescriptionHtml(
+    if (attrs.actionDescriptionWidget) {
-      attrs.actionCode,
+      contents.push(this.attach(attrs.actionDescriptionWidget, attrs));
-      new Date(attrs.created_at),
+    } else {
-      attrs.actionCodeWho,
+      const description = actionDescriptionHtml(
-      attrs.actionCodePath
+        attrs.actionCode,
-    );
+        new Date(attrs.created_at),
-    contents.push(new RawHtml({ html: `<p>${description}</p>` }));
+        attrs.actionCodeWho,
-
+        attrs.actionCodePath
-    if (attrs.cooked) {
-      contents.push(
-        new RawHtml({
-          html: `<div class='custom-message'>${attrs.cooked}</div>`,
-        })
       );
+      contents.push(new RawHtml({ html: `<p>${description}</p>` }));
+
+      if (attrs.cooked) {
+        contents.push(
+          new RawHtml({
+            html: `<div class='custom-message'>${attrs.cooked}</div>`,
+          })
+        );
+      }
     }
 
     return [

app/assets/javascripts/discourse/tests/integration/widgets/post-small-action-test.js

@@ -34,6 +34,19 @@ discourseModule(
       },
     });
 
+    componentTest("uses custom widget if actionDescriptionWidget", {
+      template: hbs`{{mount-widget widget="post-small-action" args=args}}`,
+      beforeEach() {
+        this.set("args", { id: 123, actionDescriptionWidget: "button" });
+      },
+      async test(assert) {
+        assert.ok(
+          exists(".small-action .widget-button"),
+          "it adds the custom widget"
+        );
+      },
+    });
+
     componentTest("does not show edit button if canRecover even if canEdit", {
       template: hbs`{{mount-widget widget="post-small-action" args=args}}`,
       beforeEach() {