UX: clearer assign messages on first post (#452)

assets/javascripts/discourse-assign/initializers/extend-for-assigns.js

@@ -16,6 +16,7 @@ import { inject as controller } from "@ember/controller";
 import I18n from "I18n";
 import { isEmpty } from "@ember/utils";
 import { registerTopicFooterDropdown } from "discourse/lib/register-topic-footer-dropdown";
+import RawHtml from "discourse/widgets/raw-html";
 
 const PLUGIN_ID = "discourse-assign";
 
@@ -701,36 +702,41 @@ function initialize(api) {
       ];
       const assigneeElements = [];
 
+      const assignedHtml = (username, path, type) => {
+        return `<span class="assigned-to--${type}">${htmlSafe(
+          I18n.t("discourse_assign.assigned_topic_to", {
+            username,
+            path,
+          })
+        )}</span>`;
+      };
+
       if (assignedToUser) {
         assigneeElements.push(
-          h("span.assignee", [
           h(
-              "a",
+            "span.assignee",
-              {
+            new RawHtml({
-                attributes: {
+              html: assignedHtml(
-                  class: "assigned-to-username",
+                assignedToUser.username,
-                  href: assignedToUserPath(assignedToUser),
+                assignedToUserPath(assignedToUser),
-                },
+                "user"
-              },
-              assignedToUser.username
               ),
-          ])
+            })
+          )
         );
       }
       if (assignedToGroup) {
         assigneeElements.push(
-          h("span.assignee", [
           h(
-              "a",
+            "span.assignee",
-              {
+            new RawHtml({
-                attributes: {
+              html: assignedHtml(
-                  class: "assigned-to-group",
+                assignedToGroup.name,
-                  href: assignedToGroupPath(assignedToGroup),
+                assignedToGroupPath(assignedToGroup),
-                },
+                "group"
-              },
-              assignedToGroup.name
               ),
-          ])
+            })
+          )
         );
       }
       if (indirectlyAssignedTo) {
@@ -747,7 +753,10 @@ function initialize(api) {
                     href: `${topic.url}/${postNumber}`,
                   },
                 },
-                `#${postNumber} ${assignee.username || assignee.name}`
+                I18n.t("discourse_assign.assign_post_to_multiple", {
+                  post_number: postNumber,
+                  username: assignee.username || assignee.name,
+                })
               ),
             ])
           );
@@ -756,7 +765,9 @@ function initialize(api) {
       if (!isEmpty(assigneeElements)) {
         return h("p.assigned-to", [
           assignedToUser ? iconNode("user-plus") : iconNode("group-plus"),
-          h("span.assign-text", I18n.t("discourse_assign.assigned_to")),
+          assignedToUser || assignedToGroup
+            ? ""
+            : h("span.assign-text", I18n.t("discourse_assign.assigned")),
           assigneeElements,
         ]);
       }

config/locales/client.en.yml

@@ -27,6 +27,11 @@ en:
       assigned: "Assigned"
       group_everyone: "Everyone"
       assigned_to: "Assigned to"
+      assigned_topic_to: "Assigned topic to <a href='%{path}'>%{username}</a>"
+      assign_post_to: "Assigned #%{post_number} to %{username}"
+      assign_post_to_multiple:
+        "#%{post_number} to %{username}"
+        # assign_post_to_multiple used in list form, example: "Assigned topic to username0, [#2 to username1], [#10 to username2]"
       assigned_to_w_ellipsis: "Assigned to..."
       assign_notification: "<p><span>%{username}</span> %{description}</p>"
       assign_group_notification: "<p><span>%{username}</span> %{description}</p>"

test/javascripts/acceptance/assigned-topic-test.js

@@ -106,7 +106,7 @@ acceptance("Discourse Assign | Assigned topic", function (needs) {
     );
     assert.strictEqual(
       query("#post_1 .assigned-to").innerText,
-      "Assigned toeviltrout#2 Developers",
+      "Assigned topic to eviltrout#2 to Developers",
       "shows assignment and indirect assignments in the first post"
     );
     assert.ok(exists("#post_1 .assigned-to svg.d-icon-user-plus"));
@@ -136,8 +136,8 @@ acceptance("Discourse Assign | Assigned topic", function (needs) {
       "shows assignment in the header"
     );
     assert.strictEqual(
-      query("#post_1 .assigned-to-group").innerText.trim(),
+      query("#post_1 .assigned-to--group").innerText.trim(),
-      "Developers",
+      "Assigned topic to Developers",
       "shows assignment in the first post"
     );
     assert.ok(exists("#post_1 .assigned-to svg.d-icon-group-plus"));