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