diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.js b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs similarity index 62% rename from plugins/chat/assets/javascripts/discourse/components/chat/header/icon.js rename to plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs index 964823aa4bf..6e4ae63b1f7 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs @@ -2,12 +2,42 @@ import { inject as service } from "@ember/service"; import Component from "@glimmer/component"; import getURL from "discourse-common/lib/get-url"; import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode"; +import ChatHeaderIconUnreadIndicator from "discourse/plugins/chat/discourse/components/chat/header/icon/unread-indicator"; +import icon from "discourse-common/helpers/d-icon"; +import concatClass from "discourse/helpers/concat-class"; +import I18n from "I18n"; + export default class ChatHeaderIcon extends Component { + + @service currentUser; @service site; @service chatStateManager; @service router; + get showUnreadIndicator() { + if (this.chatStateManager.isFullPageActive && this.site.desktopView) { + return false; + } + return !this.currentUserInDnD; + } + get currentUserInDnD() { return this.args.currentUserInDnD || this.currentUser.isInDoNotDisturb(); } @@ -30,10 +60,10 @@ export default class ChatHeaderIcon extends Component { !this.chatSeparateSidebarMode.never && !this.site.mobileView ) { - return "sidebar.panels.forum.label"; + return I18n.t("sidebar.panels.forum.label"); } - return "chat.title_capitalized"; + return I18n.t("chat.title_capitalized"); } get icon() { diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs deleted file mode 100644 index 3fd922ddef2..00000000000 --- a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs +++ /dev/null @@ -1,15 +0,0 @@ - - {{d-icon this.icon}} - {{#unless this.currentUserInDnD}} - - {{/unless}} - \ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.js b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.gjs similarity index 75% rename from plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.js rename to plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.gjs index 41b8c3e9855..0932f3cdd4d 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.gjs @@ -6,7 +6,21 @@ import { HEADER_INDICATOR_PREFERENCE_NEVER, } from "discourse/plugins/chat/discourse/controllers/preferences-chat"; +const MAX_UNREAD_COUNT = 99; + export default class ChatHeaderIconUnreadIndicator extends Component { + + @service chatTrackingStateManager; @service currentUser; @@ -49,7 +63,9 @@ export default class ChatHeaderIconUnreadIndicator extends Component { } get unreadCountLabel() { - return this.urgentCount > 99 ? "99+" : this.urgentCount; + return this.urgentCount > MAX_UNREAD_COUNT + ? `${MAX_UNREAD_COUNT}+` + : this.urgentCount; } #hasAnyIndicatorPreference(preferences) { diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs deleted file mode 100644 index 973955c09c3..00000000000 --- a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs +++ /dev/null @@ -1,9 +0,0 @@ -{{#if this.showUrgentIndicator}} -
-
- {{this.unreadCountLabel}} -
-
-{{else if this.showUnreadIndicator}} -
-{{/if}} \ No newline at end of file diff --git a/plugins/chat/test/javascripts/components/chat-header-icon-test.js b/plugins/chat/test/javascripts/components/chat-header-icon-test.js index c137868c3a4..cf45960e61b 100644 --- a/plugins/chat/test/javascripts/components/chat-header-icon-test.js +++ b/plugins/chat/test/javascripts/components/chat-header-icon-test.js @@ -4,6 +4,7 @@ import { render } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import sinon from "sinon"; import I18n from "I18n"; +import { HEADER_INDICATOR_PREFERENCE_ALL_NEW } from "discourse/plugins/chat/discourse/controllers/preferences-chat"; module("Discourse Chat | Component | chat-header-icon", function (hooks) { setupRenderingTest(hooks); @@ -54,4 +55,41 @@ module("Discourse Chat | Component | chat-header-icon", function (hooks) { assert.dom(".d-icon-d-chat").exists(); }); + + test("full page - with unread", async function (assert) { + this.currentUser.user_option.chat_separate_sidebar_mode = "always"; + this.currentUser.user_option.chat_header_indicator_preference = + HEADER_INDICATOR_PREFERENCE_ALL_NEW; + + sinon + .stub(this.owner.lookup("service:chat-state-manager"), "isFullPageActive") + .value(true); + + await render(hbs``); + + assert + .dom(".icon.btn-flat") + .hasAttribute("title", I18n.t("sidebar.panels.forum.label")) + .hasAttribute("href", "/latest"); + assert.dom(".d-icon-random").exists(); + assert.dom(".chat-channel-unread-indicator__number").doesNotExist(); + }); + + test("drawer - with unread", async function (assert) { + this.currentUser.user_option.chat_separate_sidebar_mode = "always"; + this.currentUser.user_option.chat_header_indicator_preference = + HEADER_INDICATOR_PREFERENCE_ALL_NEW; + + await render(hbs``); + + assert + .dom(".icon.btn-flat") + .hasAttribute("title", I18n.t("sidebar.panels.chat.label")) + .hasAttribute("href", "/chat"); + assert.dom(".d-icon-d-chat").exists(); + assert + .dom(".chat-channel-unread-indicator__number") + .exists() + .containsText("1"); + }); });