diff --git a/app/assets/javascripts/discourse/app/components/user-status-message.js b/app/assets/javascripts/discourse/app/components/user-status-message.js index b36791c85d0..5cbad0395ea 100644 --- a/app/assets/javascripts/discourse/app/components/user-status-message.js +++ b/app/assets/javascripts/discourse/app/components/user-status-message.js @@ -2,8 +2,9 @@ import Component from "@ember/component"; import { computed } from "@ember/object"; import I18n from "I18n"; -export default class extends Component { +export default class UserStatusMessage extends Component { tagName = ""; + showTooltip = true; @computed("status.ends_at") get until() { diff --git a/app/assets/javascripts/discourse/app/templates/components/user-status-message.hbs b/app/assets/javascripts/discourse/app/templates/components/user-status-message.hbs index a6bb89864f3..f5f2122ab37 100644 --- a/app/assets/javascripts/discourse/app/templates/components/user-status-message.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/user-status-message.hbs @@ -5,17 +5,19 @@ {{@status.description}} {{/if}} - -
- {{emoji @status.emoji skipTitle=true}} - - {{@status.description}} - - {{#if this.until}} -
- {{this.until}} -
- {{/if}} -
-
+ {{#if this.showTooltip}} + +
+ {{emoji @status.emoji skipTitle=true}} + + {{@status.description}} + + {{#if this.until}} +
+ {{this.until}} +
+ {{/if}} +
+
+ {{/if}} diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js index bb58ca535fc..aa87d173649 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js @@ -111,4 +111,34 @@ module("Integration | Component | user-status-message", function (hooks) { document.querySelector("[data-tippy-root] .user-status-tooltip-until") ); }); + + test("it shows tooltip by default", async function (assert) { + this.set("status", { + emoji: "tooth", + description: "off to dentist", + }); + + await render(hbs``); + await mouseenter(); + + assert.ok( + document.querySelector("[data-tippy-root] .user-status-message-tooltip") + ); + }); + + test("it doesn't show tooltip if disabled", async function (assert) { + this.set("status", { + emoji: "tooth", + description: "off to dentist", + }); + + await render( + hbs`` + ); + await mouseenter(); + + assert.notOk( + document.querySelector("[data-tippy-root] .user-status-message-tooltip") + ); + }); });