UX: update for new core tag separator (#639)

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

@@ -11,6 +11,7 @@ import getURL from "discourse/lib/get-url";
 import { iconHTML, iconNode } from "discourse/lib/icon-library";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { registerTopicFooterDropdown } from "discourse/lib/register-topic-footer-dropdown";
+import { applyValueTransformer } from "discourse/lib/transformer";
 import { escapeExpression } from "discourse/lib/utilities";
 import RawHtml from "discourse/widgets/raw-html";
 import RenderGlimmer from "discourse/widgets/render-glimmer";
@@ -467,28 +468,52 @@ function initialize(api) {
       .filter(({ assignee }) => assignee)
       .flat();
 
-    if (assignedTo) {
-      return assignedTo
-        .map(({ assignee, note }) => {
-          let assignedPath;
-          if (assignee.assignedToPostId) {
-            assignedPath = `/p/${assignee.assignedToPostId}`;
-          } else {
-            assignedPath = `/t/${topic.id}`;
-          }
-          const icon = iconHTML(assignee.username ? "user-plus" : "group-plus");
-          const name = assignee.username || assignee.name;
-          const tagName = params.tagName || "a";
-          const href =
-            tagName === "a"
-              ? `href="${getURL(assignedPath)}" data-auto-route="true"`
-              : "";
-          return `<${tagName} class="assigned-to discourse-tag simple" ${href}>${icon}<span title="${escapeExpression(
-            note
-          )}">${name}</span></${tagName}>`;
-        })
-        .join("");
+    if (!assignedTo) {
+      return "";
     }
+
+    const createTagHtml = ({ assignee, note }) => {
+      let assignedPath;
+      if (assignee.assignedToPostId) {
+        assignedPath = `/p/${assignee.assignedToPostId}`;
+      } else {
+        assignedPath = `/t/${topic.id}`;
+      }
+
+      const icon = iconHTML(assignee.username ? "user-plus" : "group-plus");
+      const name = assignee.username || assignee.name;
+      const tagName = params.tagName || "a";
+      const href =
+        tagName === "a"
+          ? `href="${getURL(assignedPath)}" data-auto-route="true"`
+          : "";
+
+      return `<${tagName} class="assigned-to discourse-tag simple" ${href}>${icon}<span title="${escapeExpression(
+        note
+      )}">${name}</span></${tagName}>`;
+    };
+
+    // is there's one assignment just return the tag
+    if (assignedTo.length === 1) {
+      return createTagHtml(assignedTo[0]);
+    }
+
+    // join multiple assignments with a separator
+    let result = "";
+    assignedTo.forEach((assignment, index) => {
+      result += createTagHtml(assignment);
+
+      // add separator if not the last tag
+      if (index < assignedTo.length - 1) {
+        const separator = applyValueTransformer("tag-separator", ",", {
+          topic,
+          index,
+        });
+        result += `<span class="discourse-tags__tag-separator">${separator}</span>`;
+      }
+    });
+
+    return result;
   });
 
   api.createWidget("assigned-to-post", {