UX: Add suggestions label to assign modal (#429)

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();

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";
+  },
+});

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}}

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")

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 {

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: