FEATURE: Optionally show user status on email group user chooser (#18367)

app/assets/javascripts/discourse/tests/integration/components/select-kit/email-group-user-chooser-test.js

@@ -1,9 +1,10 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { render } from "@ember/test-helpers";
+import { fillIn, render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
-import { paste, query } from "discourse/tests/helpers/qunit-helpers";
+import { exists, paste, query } from "discourse/tests/helpers/qunit-helpers";
+import pretender, { response } from "../../../helpers/create-pretender";
 
 module(
   "Integration | Component | select-kit/email-group-user-chooser",
@@ -22,5 +23,62 @@ module(
 
       assert.equal(this.subject.header().value(), "foo,bar");
     });
+
+    test("doesn't show user status by default", async function (assert) {
+      pretender.get("/u/search/users", () =>
+        response({
+          users: [
+            {
+              username: "test-user",
+              status: {
+                description: "off to dentist",
+                emoji: "tooth",
+              },
+            },
+          ],
+        })
+      );
+
+      await render(hbs`<EmailGroupUserChooser />`);
+      await this.subject.expand();
+      await fillIn(".filter-input", "test-user");
+
+      assert.notOk(exists(".user-status-message"));
+    });
+
+    test("shows user status if enabled", async function (assert) {
+      const status = {
+        description: "off to dentist",
+        emoji: "tooth",
+      };
+      pretender.get("/u/search/users", () =>
+        response({
+          users: [
+            {
+              username: "test-user",
+              status,
+            },
+          ],
+        })
+      );
+
+      await render(hbs`<EmailGroupUserChooser @showUserStatus=true />`);
+      await this.subject.expand();
+      await fillIn(".filter-input", "test-user");
+
+      assert.ok(exists(".user-status-message"), "user status is rendered");
+      assert.equal(
+        query(".user-status-message .emoji").alt,
+        status.emoji,
+        "status emoji is correct"
+      );
+      assert.equal(
+        query(
+          ".user-status-message .user-status-message-description"
+        ).innerText.trim(),
+        status.description,
+        "status description is correct"
+      );
+    });
   }
 );

app/assets/javascripts/select-kit/addon/components/email-group-user-chooser.js

@@ -35,6 +35,7 @@ export default UserChooserComponent.extend({
           } else {
             reconstructed.isUser = true;
             reconstructed.name = item.name;
+            reconstructed.showUserStatus = this.showUserStatus;
           }
         } else if (item.name) {
           reconstructed.id = item.name;

app/assets/javascripts/select-kit/addon/templates/components/email-group-user-chooser-row.hbs

@@ -2,6 +2,9 @@
   {{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"}}