From 6070678a1c13a853c632b12ee5d627fc637b0d47 Mon Sep 17 00:00:00 2001
From: Andrei Prigorshnev <a.prigorshnev@gmail.com>
Date: Wed, 10 Apr 2024 17:36:38 +0400
Subject: [PATCH]  FIX: Unassign label sometimes touches avatar (#561)

The label touches the avatar when a topic has several assignments,
and those contain assignments to users _and_ to groups. We don't show
avatars for groups, but the code sees there are several assignees and
applies overlapping styling.

This commit corrects the logic and fixes the issue.

Here is how avatars on the button behave:
1. If there are from one to many assignments on the topic, but all
the assignees are groups, we don't show avatars, only label.
2. If there are from one to many assignments to the same user, we show
the avatar of that user.
3. And if there are from two to many assignments to different users, we
show avatars of first two users.
---
 .../components/topic-level-assign-menu.js     | 69 ++++++++-----------
 1 file changed, 29 insertions(+), 40 deletions(-)

diff --git a/assets/javascripts/discourse/components/topic-level-assign-menu.js b/assets/javascripts/discourse/components/topic-level-assign-menu.js
index adc1d56..f3d01b1 100644
--- a/assets/javascripts/discourse/components/topic-level-assign-menu.js
+++ b/assets/javascripts/discourse/components/topic-level-assign-menu.js
@@ -62,13 +62,7 @@ export default {
   },
 
   noneItem() {
-    const topic = this.topic;
-
-    if (topic.assigned_to_user || topic.hasAssignedPosts()) {
-      return unassignUsersButton(topic.uniqueAssignees());
-    } else if (topic.assigned_to_group) {
-      return unassignGroupButton(topic.assigned_to_group);
-    }
+    return topicLevelUnassignButton(this.topic.uniqueAssignees());
   },
   content() {
     const content = [];
@@ -99,39 +93,6 @@ export default {
   },
 };
 
-function unassignGroupButton(group) {
-  const label = I18n.t("discourse_assign.unassign.title");
-  return {
-    id: null,
-    name: I18n.t("discourse_assign.reassign_modal.title"),
-    label: htmlSafe(
-      `<span class="unassign-label">${label}</span> @${group.name}...`
-    ),
-  };
-}
-
-function unassignUsersButton(users) {
-  let avatars = "";
-  if (users.length === 1) {
-    avatars = avatarHtml(users[0], "tiny");
-  } else if (users.length > 1) {
-    avatars =
-      avatarHtml(users[0], "tiny", "overlap") + avatarHtml(users[1], "tiny");
-  }
-
-  const label = `<span class="unassign-label">${I18n.t(
-    "discourse_assign.topic_level_menu.unassign_with_ellipsis"
-  )}</span>`;
-
-  return {
-    id: null,
-    name: htmlSafe(
-      I18n.t("discourse_assign.topic_level_menu.unassign_with_ellipsis")
-    ),
-    label: htmlSafe(`${avatars}${label}`),
-  };
-}
-
 function avatarHtml(user, size, classes) {
   return renderAvatar(user, {
     imageSize: size,
@@ -225,3 +186,31 @@ function unassignFromPostButton(postId, assignment) {
     label: htmlSafe(`${icon} ${label}`),
   };
 }
+
+function topicLevelUnassignButton(assignees) {
+  const avatars = topicLevelUnassignButtonAvatars(assignees);
+  const label = `<span class="unassign-label">${I18n.t(
+    "discourse_assign.topic_level_menu.unassign_with_ellipsis"
+  )}</span>`;
+
+  return {
+    id: null,
+    name: htmlSafe(
+      I18n.t("discourse_assign.topic_level_menu.unassign_with_ellipsis")
+    ),
+    label: htmlSafe(`${avatars}${label}`),
+  };
+}
+
+function topicLevelUnassignButtonAvatars(assignees) {
+  const users = assignees.filter((a) => a.username);
+  let avatars = "";
+  if (users.length === 1) {
+    avatars = avatarHtml(users[0], "tiny");
+  } else if (users.length > 1) {
+    avatars =
+      avatarHtml(users[0], "tiny", "overlap") + avatarHtml(users[1], "tiny");
+  }
+
+  return avatars;
+}