diff --git a/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr b/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr
index 7a1e11338f4..4b62706363e 100644
--- a/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr
+++ b/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr
@@ -6,7 +6,13 @@
{{avatar user imageSize="tiny"}}
{{format-username user.username}}
{{#if user.status}}
- {{emoji user.status.emoji title=user.status.description}}
+ {{emoji user.status.emoji}}
+
+ {{user.status.description}}
+
+ {{#if user.status.ends_at}}
+ {{format-age user.status.ends_at}}
+ {{/if}}
{{/if}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js
index 39bbbb6949d..6329a257690 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js
@@ -3,14 +3,29 @@ import { click, fillIn, triggerKeyEvent, visit } from "@ember/test-helpers";
import {
acceptance,
exists,
+ fakeTime,
+ loggedInUser,
query,
} from "discourse/tests/helpers/qunit-helpers";
import { setCaretPosition } from "discourse/lib/utilities";
acceptance("Composer - editor mentions", function (needs) {
+ let clock = null;
+ const status = {
+ emoji: "tooth",
+ description: "off to dentist",
+ ends_at: "2100-02-01T09:00:00.000Z",
+ };
+
needs.user();
needs.settings({ enable_mentions: true });
+ needs.hooks.afterEach(() => {
+ if (clock) {
+ clock.restore();
+ }
+ });
+
needs.pretender((server, helper) => {
server.get("/u/search/users", () => {
return helper.response({
@@ -20,10 +35,7 @@ acceptance("Composer - editor mentions", function (needs) {
name: "Some User",
avatar_template:
"https://avatars.discourse.org/v3/letter/t/41988e/{size}.png",
- status: {
- emoji: "tooth",
- description: "off to dentist",
- },
+ status,
},
{
username: "user2",
@@ -114,6 +126,10 @@ acceptance("Composer - editor mentions", function (needs) {
});
test("shows status on search results when mentioning a user", async function (assert) {
+ const timezone = loggedInUser().timezone;
+ const now = moment(status.ends_at).add(-1, "hour").format();
+ clock = fakeTime(now, timezone, true);
+
await visit("/");
await click("#create-topic");
@@ -126,6 +142,19 @@ acceptance("Composer - editor mentions", function (needs) {
await setCaretPosition(editor, 6);
await triggerKeyEvent(".d-editor-input", "keyup", "U");
- assert.ok(exists(".autocomplete .emoji[title='off to dentist']"));
+ assert.ok(
+ exists(`.autocomplete .emoji[title='${status.emoji}']`),
+ "status emoji is shown"
+ );
+ assert.equal(
+ query(".autocomplete .status-description").textContent.trim(),
+ status.description,
+ "status description is shown"
+ );
+ assert.equal(
+ query(".autocomplete .relative-date").textContent.trim(),
+ "1h",
+ "status expiration time is shown"
+ );
});
});
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index abbeb0d6606..ed0f6f9d055 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -421,6 +421,11 @@ html.composer-open {
background-color: var(--highlight-low);
text-decoration: none;
}
+
+ .relative-date {
+ font-size: var(--font-down-3);
+ padding-top: 10em;
+ }
}
}
}