From 02b9d9423e1c257828c16aa317d63153f7b93c44 Mon Sep 17 00:00:00 2001
From: Bianca Nenciu <nbianca@users.noreply.github.com>
Date: Wed, 18 Jan 2023 17:43:23 +0200
Subject: [PATCH] UX: Add suggestions label to assign modal (#429)

---
 .../components/assignee-chooser-row.js        |  3 +++
 .../discourse/components/assignee-chooser.js  |  7 +++++
 .../components/assignee-chooser-row.hbs       | 26 +++++++++++++++++++
 .../discourse/templates/modal/assign-user.hbs |  2 +-
 assets/stylesheets/assigns.scss               | 21 +++++++++++++++
 config/locales/client.en.yml                  |  1 +
 6 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 assets/javascripts/discourse/components/assignee-chooser-row.js
 create mode 100644 assets/javascripts/discourse/components/assignee-chooser.js
 create mode 100644 assets/javascripts/discourse/templates/components/assignee-chooser-row.hbs

diff --git a/assets/javascripts/discourse/components/assignee-chooser-row.js b/assets/javascripts/discourse/components/assignee-chooser-row.js
new file mode 100644
index 0000000..8bc23bb
--- /dev/null
+++ b/assets/javascripts/discourse/components/assignee-chooser-row.js
@@ -0,0 +1,3 @@
+import EmailGroupUserChooserRow from "select-kit/components/email-group-user-chooser-row";
+
+export default EmailGroupUserChooserRow.extend();
diff --git a/assets/javascripts/discourse/components/assignee-chooser.js b/assets/javascripts/discourse/components/assignee-chooser.js
new file mode 100644
index 0000000..50ba720
--- /dev/null
+++ b/assets/javascripts/discourse/components/assignee-chooser.js
@@ -0,0 +1,7 @@
+import EmailGroupUserChooser from "select-kit/components/email-group-user-chooser";
+
+export default EmailGroupUserChooser.extend({
+  modifyComponentForRow() {
+    return "assignee-chooser-row";
+  },
+});
diff --git a/assets/javascripts/discourse/templates/components/assignee-chooser-row.hbs b/assets/javascripts/discourse/templates/components/assignee-chooser-row.hbs
new file mode 100644
index 0000000..967e4eb
--- /dev/null
+++ b/assets/javascripts/discourse/templates/components/assignee-chooser-row.hbs
@@ -0,0 +1,26 @@
+{{#if this.item.isUser}}
+  {{avatar this.item imageSize="tiny"}}
+  <span class="identifier">{{format-username this.item.id}}</span>
+  <span class="name">{{this.item.name}}</span>
+  {{#if (and this.item.showUserStatus this.item.status)}}
+    <UserStatusMessage @status={{this.item.status}} @showDescription={{true}} />
+  {{/if}}
+  {{decorate-username-selector this.item.id}}
+{{else if this.item.isGroup}}
+  {{d-icon "users"}}
+  <span class="identifier">{{this.item.id}}</span>
+  <span class="name">{{this.item.full_name}}</span>
+{{else}}
+  {{d-icon "envelope"}}
+  <span class="identifier">{{this.item.id}}</span>
+{{/if}}
+{{#if
+  (and
+    (or (eq this.selectKit.filter null) (eq this.selectKit.filter.length 0))
+    (eq this.index 0)
+  )
+}}
+  <span class="suggestions-label">
+    {{i18n "discourse_assign.assign_modal.suggestions"}}
+  </span>
+{{/if}}
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/modal/assign-user.hbs b/assets/javascripts/discourse/templates/modal/assign-user.hbs
index b611351..299387d 100644
--- a/assets/javascripts/discourse/templates/modal/assign-user.hbs
+++ b/assets/javascripts/discourse/templates/modal/assign-user.hbs
@@ -2,7 +2,7 @@
   <div>
     <div class="control-group {{if this.assigneeError 'assignee-error'}}">
       <label>{{i18n "discourse_assign.assign_modal.assignee_label"}}</label>
-      {{email-group-user-chooser
+      {{assignee-chooser
         autocomplete="off"
         value=assigneeName
         onChange=(action "assignUsername")
diff --git a/assets/stylesheets/assigns.scss b/assets/stylesheets/assigns.scss
index cc94141..cf18c45 100644
--- a/assets/stylesheets/assigns.scss
+++ b/assets/stylesheets/assigns.scss
@@ -94,6 +94,27 @@
     .identifier {
       margin-right: 0.5rem;
     }
+
+    .user-status-message {
+      color: var(--primary-medium);
+      font-size: var(--font-down-2);
+      margin-left: 0.5em;
+
+      .emoji {
+        height: var(--font-up-1);
+        width: var(--font-up-1);
+      }
+    }
+
+    .suggestions-label {
+      color: var(--primary-low-mid);
+      font-size: var(--font-down-2);
+      font-weight: bold;
+      margin-left: auto;
+      margin-right: -0.25em;
+      margin-top: -1em;
+      text-transform: uppercase;
+    }
   }
 
   .control-group.assignee-error {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 558bd68..829c94f 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -59,6 +59,7 @@ en:
         note_label: Note
         optional_label: "(optional)"
         status_label: Status
+        suggestions: suggestions
       assign_post_modal:
         title: "Assign Post"
       claim: