diff --git a/app/assets/javascripts/discourse/tests/acceptance/bookmarks-test.js b/app/assets/javascripts/discourse/tests/acceptance/bookmarks-test.js index e9fb662fd6e..e0c08690dd6 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/bookmarks-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/bookmarks-test.js @@ -336,7 +336,6 @@ acceptance("Bookmarking", function (needs) { // open the modal and accept deleting await click("#topic-footer-button-bookmark"); - // pauseTest(); await click(yesButton); assert.ok( diff --git a/plugins/chat/assets/javascripts/discourse/components/channels-list.js b/plugins/chat/assets/javascripts/discourse/components/channels-list.js index a1e42f0c1b8..796db2a1b94 100644 --- a/plugins/chat/assets/javascripts/discourse/components/channels-list.js +++ b/plugins/chat/assets/javascripts/discourse/components/channels-list.js @@ -98,7 +98,7 @@ export default class ChannelsList extends Component { @bind _applyScrollPosition() { - const position = this.chatStateManager.isFullPage + const position = this.chatStateManager.isFullPageActive ? this.session.channelsListPosition || 0 : 0; const scroller = document.querySelector(".channels-list"); diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js index dba574f9631..570619322dc 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js @@ -66,12 +66,10 @@ export default Component.extend(UppyUploadMixin, { _uploadDropTargetOptions() { let targetEl; - if (this.chatStateManager.isFullPage) { + if (this.chatStateManager.isFullPageActive) { targetEl = document.querySelector(".full-page-chat"); } else { - targetEl = document.querySelector( - ".topic-chat-container.expanded.visible" - ); + targetEl = document.querySelector(".chat-drawer.is-expanded"); } if (!targetEl) { diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js index 2ef16eff45c..231c7b13ed3 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js @@ -63,7 +63,7 @@ export default Component.extend(TextareaTextManipulation, { return picker.opened && picker.context === "chat-composer"; }, - @discourseComputed("chatStateManager.isFullPage") + @discourseComputed("chatStateManager.isFullPageActive") fileUploadElementId(fullPage) { return fullPage ? "chat-full-page-uploader" : "chat-widget-uploader"; }, diff --git a/plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js similarity index 86% rename from plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js rename to plugins/chat/assets/javascripts/discourse/components/chat-drawer.js index 7df6d32ec4b..36a67a71fb3 100644 --- a/plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js @@ -11,16 +11,14 @@ import { cancel, next, throttle } from "@ember/runloop"; import { inject as service } from "@ember/service"; export default Component.extend({ + tagName: "", listView: equal("view", LIST_VIEW), chatView: equal("view", CHAT_VIEW), draftChannelView: equal("view", DRAFT_CHANNEL_VIEW), - classNameBindings: [":topic-chat-float-container", "hidden"], chat: service(), router: service(), chatStateManager: service(), - hidden: true, loading: false, - expanded: true, // TODO - false when not first-load topic showClose: true, // TODO - false when on same topic sizeTimer: null, rafTimer: null, @@ -95,19 +93,18 @@ export default Component.extend({ } }, - @observes("hidden") + @observes("chatStateManager.isDrawerActive") _fireHiddenAppEvents() { - this.chat.set("chatOpen", !this.hidden); this.appEvents.trigger("chat:rerender-header"); }, - @discourseComputed("expanded") + @discourseComputed("chatStateManager.isDrawerExpanded") topLineClass(expanded) { - const baseClass = "topic-chat-drawer-header__top-line"; + const baseClass = "chat-drawer-header__top-line"; return expanded ? `${baseClass}--expanded` : `${baseClass}--collapsed`; }, - @discourseComputed("expanded", "chat.activeChannel") + @discourseComputed("chatStateManager.isDrawerExpanded", "chat.activeChannel") displayMembers(expanded, channel) { return expanded && !channel?.isDirectMessageChannel; }, @@ -163,28 +160,7 @@ export default Component.extend({ ); }, - @discourseComputed( - "hidden", - "expanded", - "displayMembers", - "chat.activeChannel", - "chatView" - ) - containerClassNames(hidden, expanded, displayMembers, activeChannel) { - const classNames = ["topic-chat-container"]; - if (expanded) { - classNames.push("expanded"); - } - if (!hidden && expanded) { - classNames.push("visible"); - } - if (activeChannel) { - classNames.push(`channel-${activeChannel.id}`); - } - return classNames.join(" "); - }, - - @discourseComputed("expanded") + @discourseComputed("chatStateManager.isDrawerExpanded") expandIcon(expanded) { if (expanded) { return "angle-double-down"; @@ -204,10 +180,7 @@ export default Component.extend({ @action openURL(URL = null) { this.chat.setActiveChannel(null); - this.set("hidden", false); - this.set("expanded", true); - - this.chatStateManager.storeChatURL(URL); + this.chatStateManager.didOpenDrawer(URL); const route = this._buildRouteFromURL( URL || this.chatStateManager.lastKnownChatURL @@ -216,6 +189,7 @@ export default Component.extend({ switch (route.name) { case "chat": this.set("view", LIST_VIEW); + this.refreshChannels(); this.appEvents.trigger("chat:float-toggled", false); return; case "chat.draft-channel": @@ -245,16 +219,18 @@ export default Component.extend({ @action toggleExpand() { - this.set("expanded", !this.expanded); - this.appEvents.trigger("chat:toggle-expand", this.expanded); + this.chatStateManager.didToggleDrawer(); + this.appEvents.trigger( + "chat:toggle-expand", + this.chatStateManager.isDrawerExpanded + ); }, @action close() { - this.set("hidden", true); - this.set("expanded", false); + this.chatStateManager.didCloseDrawer(); this.chat.setActiveChannel(null); - this.appEvents.trigger("chat:float-toggled", this.hidden); + this.appEvents.trigger("chat:float-toggled", true); }, @action @@ -275,10 +251,10 @@ export default Component.extend({ this.setProperties({ loading: false, - expanded: true, view: LIST_VIEW, }); + this.chatStateManager.didExpandDrawer(); this.chat.setActiveChannel(null); }); }, diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js index 54fd768d2d5..2d850e35b5a 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js @@ -701,9 +701,9 @@ export default Component.extend({ } }, - @observes("floatHidden") + @observes("chatStateManager.isDrawerActive") onFloatHiddenChange() { - if (!this.floatHidden) { + if (this.chatStateManager.isDrawerActive) { this.set("expanded", true); this._markLastReadMessage({ reRender: true }); this._stickScrollToBottom(); @@ -1265,7 +1265,6 @@ export default Component.extend({ @action onCloseFullScreen() { this.chatStateManager.prefersDrawer(); - this.router.transitionTo(this.chatStateManager.lastKnownAppURL).then(() => { this.appEvents.trigger( "chat:open-url", @@ -1381,6 +1380,10 @@ export default Component.extend({ }, _reportReplyingPresence(composerValue) { + if (this._selfDeleted) { + return; + } + if (this.chatChannel.isDraft) { return; } diff --git a/plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-drawer-outlet.hbs b/plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-drawer-outlet.hbs new file mode 100644 index 00000000000..2e0b634f2b6 --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-drawer-outlet.hbs @@ -0,0 +1,4 @@ + +
+ +
diff --git a/plugins/chat/assets/javascripts/discourse/connectors/below-footer/topic-chat-outlet.hbs b/plugins/chat/assets/javascripts/discourse/connectors/below-footer/topic-chat-outlet.hbs deleted file mode 100644 index d933bf21e5e..00000000000 --- a/plugins/chat/assets/javascripts/discourse/connectors/below-footer/topic-chat-outlet.hbs +++ /dev/null @@ -1 +0,0 @@ - diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-decorators.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-decorators.js index 3a7d30aa185..360820ac785 100644 --- a/plugins/chat/assets/javascripts/discourse/initializers/chat-decorators.js +++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-decorators.js @@ -11,6 +11,7 @@ export default { name: "chat-decorators", initializeWithPluginApi(api, container) { + const siteSettings = container.lookup("service:site-settings"); api.decorateChatMessage((element) => decorateGithubOneboxBody(element), { id: "onebox-github-body", }); @@ -44,7 +45,6 @@ export default { } ); - const siteSettings = container.lookup("service:site-settings"); api.decorateChatMessage( (element) => highlightSyntax( @@ -147,8 +147,10 @@ export default { }, initialize(container) { - withPluginApi("0.8.42", (api) => - this.initializeWithPluginApi(api, container) - ); + if (container.lookup("service:chat").userCanChat) { + withPluginApi("0.8.42", (api) => + this.initializeWithPluginApi(api, container) + ); + } }, }; diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-keyboard-shortcuts.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-keyboard-shortcuts.js index 6b993a70d47..ae70c3e4543 100644 --- a/plugins/chat/assets/javascripts/discourse/initializers/chat-keyboard-shortcuts.js +++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-keyboard-shortcuts.js @@ -49,12 +49,6 @@ export default { } return true; }; - const isDrawerExpanded = () => { - return document.querySelector(".topic-chat-float-container:not(.hidden)") - ? true - : false; - }; - const modifyComposerSelection = (event, type) => { if (!isChatComposer(event.target)) { return; @@ -85,7 +79,7 @@ export default { }; const closeChatDrawer = (event) => { - if (!isDrawerExpanded()) { + if (!chatStateManager.isDrawerActive) { return; } diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-plugin-decorators.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-plugin-decorators.js index 3b4e4ea824d..30faee83fb8 100644 --- a/plugins/chat/assets/javascripts/discourse/initializers/chat-plugin-decorators.js +++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-plugin-decorators.js @@ -50,9 +50,11 @@ export default { }, initialize(container) { - const siteSettings = container.lookup("service:site-settings"); - withPluginApi("0.8.42", (api) => - this.initializeWithPluginApi(api, siteSettings) - ); + if (container.lookup("service:chat").userCanChat) { + const siteSettings = container.lookup("service:site-settings"); + withPluginApi("0.8.42", (api) => { + this.initializeWithPluginApi(api, siteSettings); + }); + } }, }; diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js index cfbe931b494..f295772574b 100644 --- a/plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js +++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js @@ -12,8 +12,12 @@ export default { name: "chat-setup", initialize(container) { this.chatService = container.lookup("service:chat"); - this.siteSettings = container.lookup("service:site-settings"); + if (!this.chatService.userCanChat) { + return; + } + + this.siteSettings = container.lookup("service:site-settings"); this.appEvents = container.lookup("service:appEvents"); this.appEvents.on("discourse:focus-changed", this, "_handleFocusChanged"); @@ -110,7 +114,7 @@ export default { this._registeredDocumentTitleCountCallback = true; } - api.addCardClickListenerSelector(".topic-chat-float-container"); + api.addCardClickListenerSelector(".chat-drawer-outlet"); api.dispatchWidgetAppEvent( "site-header", @@ -152,6 +156,10 @@ export default { }, teardown() { + if (!this.chatService.userCanChat) { + return; + } + this.appEvents.off("discourse:focus-changed", this, "_handleFocusChanged"); _lastForcedRefreshAt = null; clearChatComposerButtons(); diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat.js b/plugins/chat/assets/javascripts/discourse/routes/chat.js index 04310b7a2c1..91668c537c4 100644 --- a/plugins/chat/assets/javascripts/discourse/routes/chat.js +++ b/plugins/chat/assets/javascripts/discourse/routes/chat.js @@ -79,6 +79,7 @@ export default class ChatRoute extends DiscourseRoute { willTransition(transition) { if (!transition?.to?.name?.startsWith("chat.")) { this.chatStateManager.storeChatURL(); + this.chat.updatePresence(); } } } diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js b/plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js index 38fe1af7e59..12df7f6382e 100644 --- a/plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js +++ b/plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js @@ -10,7 +10,10 @@ const FULL_PAGE_CHAT = "FULL_PAGE_CHAT"; const DRAWER_CHAT = "DRAWER_CHAT"; export default class ChatStateManager extends Service { + @service chat; @service router; + isDrawerExpanded = false; + isDrawerActive = false; @tracked _chatURL = null; @tracked _appURL = null; @@ -30,6 +33,39 @@ export default class ChatStateManager extends Service { this._store.setObject({ key: PREFERRED_MODE_KEY, value: DRAWER_CHAT }); } + didOpenDrawer(URL = null) { + this.set("isDrawerActive", true); + this.set("isDrawerExpanded", true); + + if (URL) { + this.storeChatURL(URL); + } + + this.chat.updatePresence(); + } + + didCloseDrawer() { + this.set("isDrawerActive", false); + this.set("isDrawerExpanded", false); + this.chat.updatePresence(); + } + + didExpandDrawer() { + this.set("isDrawerActive", true); + this.set("isDrawerExpanded", true); + this.chat.updatePresence(); + } + + didCollapseDrawer() { + this.set("isDrawerActive", true); + this.set("isDrawerExpanded", false); + } + + didToggleDrawer() { + this.set("isDrawerExpanded", !this.isDrawerExpanded); + this.set("isDrawerActive", true); + } + get isFullPagePreferred() { return !!( Site.currentProp("mobileView") || @@ -46,7 +82,7 @@ export default class ChatStateManager extends Service { ); } - get isFullPage() { + get isFullPageActive() { return this.router.currentRouteName?.startsWith("chat"); } diff --git a/plugins/chat/assets/javascripts/discourse/services/chat.js b/plugins/chat/assets/javascripts/discourse/services/chat.js index ffb41e04b70..e92205eb6e0 100644 --- a/plugins/chat/assets/javascripts/discourse/services/chat.js +++ b/plugins/chat/assets/javascripts/discourse/services/chat.js @@ -56,7 +56,6 @@ export default class Chat extends Service { directMessagesLimit = 20; isNetworkUnreliable = false; @and("currentUser.has_chat_enabled", "siteSettings.chat_enabled") userCanChat; - _chatOpen = false; _fetchingChannels = null; @computed("currentUser.staff", "currentUser.groups.[]") @@ -168,18 +167,16 @@ export default class Chat extends Service { }); } - get chatOpen() { - return this._chatOpen; - } - - set chatOpen(status) { - this.set("_chatOpen", status); - this.updatePresence(); - } - updatePresence() { next(() => { - if (this.chatStateManager.isFullPage || this.chatOpen) { + if (this.isDestroyed || this.isDestroying) { + return; + } + + if ( + this.chatStateManager.isFullPageActive || + this.chatStateManager.isDrawerActive + ) { this.presenceChannel.enter({ activeOptions: CHAT_ONLINE_OPTIONS }); } else { this.presenceChannel.leave(); @@ -204,19 +201,6 @@ export default class Chat extends Service { return channels.slice(0, this.directMessagesLimit); } - getActiveChannel() { - let channelId; - if (this.router.currentRouteName === "chat.channel") { - channelId = this.router.currentRoute.params.channelId; - } else { - channelId = document.querySelector(".topic-chat-container.visible") - ?.dataset?.chatChannelId; - } - return channelId - ? this.allChannels.findBy("id", parseInt(channelId, 10)) - : null; - } - async getChannelsWithFilter(filter, opts = { excludeActiveChannel: true }) { let sortedChannels = this.allChannels.sort((a, b) => { return new Date(a.last_message_sent_at) > new Date(b.last_message_sent_at) @@ -528,7 +512,7 @@ export default class Chat extends Service { this.setActiveChannel(channel); if ( - this.chatStateManager.isFullPage || + this.chatStateManager.isFullPageActive || this.site.mobileView || this.chatStateManager.isFullPagePreferred ) { diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat.hbs index 39e9a7ecd66..488edad1ebb 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/chat.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/chat.hbs @@ -11,13 +11,13 @@ class={{concat-class "full-page-chat" (if - this.site.siteSettings.enable_sidebar + this.siteSettings.enable_sidebar "full-page-chat-sidebar-enabled" ) }} > {{#if - (and (not this.site.siteSettings.enable_sidebar) (not this.site.mobileView)) + (and (not this.siteSettings.enable_sidebar) (not this.site.mobileView)) }} {{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/channels-list.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/channels-list.hbs index a03264533ef..4247db6e27d 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/components/channels-list.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/components/channels-list.hbs @@ -8,7 +8,7 @@ role="region" aria-label={{i18n "chat.aria_roles.channels_list"}} class="channels-list" - {{on "scroll" (if this.chatStateManager.isFullPage this.storeScrollPosition (noop))}} + {{on "scroll" (if this.chatStateManager.isFullPageActive this.storeScrollPosition (noop))}} > {{#if this.displayPublicChannels}}
diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-draft-channel-screen.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-draft-channel-screen.hbs index cfd2fc73911..5c7884ab399 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-draft-channel-screen.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-draft-channel-screen.hbs @@ -21,8 +21,6 @@ {{#if this.previewedChannel}} diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-drawer.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-drawer.hbs new file mode 100644 index 00000000000..564fd728ccb --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-drawer.hbs @@ -0,0 +1,85 @@ +{{#if this.chatStateManager.isDrawerActive}} +
+
+
+ {{#if (and this.draftChannelView this.chatStateManager.isDrawerExpanded)}} +
+
+ + {{d-icon "chevron-left"}} + +
+
+ + +
+ {{i18n "chat.direct_message_creator.title"}} +
+ + {{else if this.chatView}} + {{#if this.chatStateManager.isDrawerExpanded}} + + {{d-icon "chevron-left"}} + + {{/if}} + + {{#if this.chat.activeChannel}} + {{#if this.chatStateManager.isDrawerExpanded}} + +
+ +
+ + {{else}} +
+
+ + {{#if this.unreadCount}} + {{this.unreadCount}} + {{/if}} + +
+
+ {{/if}} + {{/if}} + {{else}} + +
+ {{i18n "chat.heading"}} +
+ + {{/if}} + +
+
+ {{#if this.chatStateManager.isDrawerExpanded}} + + {{/if}} + + + + {{#if this.showClose}} + + {{/if}} +
+
+
+ + {{#if this.chatStateManager.isDrawerExpanded}} +
+ {{#if (and this.chatView this.chat.activeChannel)}} + + {{else if this.draftChannelView}} + + {{else}} + + {{/if}} +
+ {{/if}} +
+
+{{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-live-pane.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-live-pane.hbs index f77e29c0b1b..875518b3183 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-live-pane.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-live-pane.hbs @@ -1,4 +1,4 @@ -{{#if (and this.chatStateManager.isFullPage this.includeHeader)}} +{{#if (and this.chatStateManager.isFullPageActive this.includeHeader)}}
- +
{{/if}}
@@ -86,14 +86,12 @@ {{/if}} -{{#if this.expanded}} - {{#if this.selectingMessages}} - +{{#if this.selectingMessages}} + +{{else}} + {{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}} + {{else}} - {{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}} - - {{else}} - - {{/if}} + {{/if}} {{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs index 093f2f003cd..955618f4685 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs @@ -1,6 +1,6 @@
- {{#if this.chatStateManager.isFullPage}} + {{#if this.chatStateManager.isFullPageActive}} {{#each this.emojiReactions as |reaction|}} {{/each}} diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/full-page-chat.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/full-page-chat.hbs index 72a3907e56f..93ec4f6e3d5 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/components/full-page-chat.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/components/full-page-chat.hbs @@ -1,3 +1,3 @@ {{#if this.chat.activeChannel}} - + {{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/topic-chat-float.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/topic-chat-float.hbs deleted file mode 100644 index 2f3f5d81d4f..00000000000 --- a/plugins/chat/assets/javascripts/discourse/templates/components/topic-chat-float.hbs +++ /dev/null @@ -1,86 +0,0 @@ -
-
-
- {{#if (and this.draftChannelView this.expanded)}} -
-
- - {{d-icon "chevron-left"}} - -
-
- - -
- {{i18n "chat.direct_message_creator.title"}} -
- - {{else if this.chatView}} - {{#if this.expanded}} - - {{d-icon "chevron-left"}} - - {{/if}} - - {{#if this.chat.activeChannel}} - {{#if this.expanded}} - -
- -
- - {{else}} -
-
- - {{#if this.unreadCount}} - {{this.unreadCount}} - {{/if}} - -
-
- {{/if}} - {{/if}} - {{else}} - -
- {{i18n "chat.heading"}} -
- - {{/if}} - -
-
- {{#if this.expanded}} - - {{/if}} - - - - {{#if this.showClose}} - - {{/if}} -
-
-
- - {{#if this.expanded}} -
- {{#if (and this.chatView this.chat.activeChannel)}} - - {{else if this.draftChannelView}} - - {{else}} - - {{/if}} -
- {{/if}} -
-
diff --git a/plugins/chat/assets/javascripts/discourse/widgets/chat-header-icon.js b/plugins/chat/assets/javascripts/discourse/widgets/chat-header-icon.js index 39e1b768d38..a0c280a5d19 100644 --- a/plugins/chat/assets/javascripts/discourse/widgets/chat-header-icon.js +++ b/plugins/chat/assets/javascripts/discourse/widgets/chat-header-icon.js @@ -40,7 +40,10 @@ export default createWidget("header-chat-link", { chatLinkHtml(indicatorNode) { return h( `a.icon${ - this.chatStateManager.isFullPage || this.chat.chatOpen ? ".active" : "" + this.chatStateManager.isFullPageActive || + this.chatStateManager.isDrawerActive + ? ".active" + : "" }`, { attributes: { tabindex: 0 } }, [iconNode("comment"), indicatorNode].filter(Boolean) @@ -61,7 +64,7 @@ export default createWidget("header-chat-link", { }, click() { - if (this.chatStateManager.isFullPage && !this.site.mobileView) { + if (this.chatStateManager.isFullPageActive && !this.site.mobileView) { return; } diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss b/plugins/chat/assets/stylesheets/common/chat-channel-title.scss index f5043f4d799..4eac8df3c18 100644 --- a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss +++ b/plugins/chat/assets/stylesheets/common/chat-channel-title.scss @@ -21,8 +21,6 @@ .chat-name, .category-chat-name, - .topic-chat-name, - .tag-chat-name, &__usernames, .dm-usernames { @include ellipsis; diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss index e996f96790e..5587c49955a 100644 --- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss @@ -1,8 +1,8 @@ -body.composer-open .topic-chat-float-container { +body.composer-open .chat-drawer-outlet-container { bottom: 11px; // prevent height of grippie from obscuring ...is typing indicator } -.topic-chat-float-container { +.chat-drawer-outlet-container { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; // higher than timeline, lower than composer, lower than user card (bump up below) @@ -60,22 +60,24 @@ body.composer-open .topic-chat-float-container { .chat-drawer { align-self: flex-end; -} -.topic-chat-container { - background: var(--secondary); - border: 1px solid var(--primary-low); - border-bottom: 0; - border-top-left-radius: 8px; - border-top-right-radius: 8px; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.125); - box-sizing: border-box; - display: flex; - flex-direction: column; + .chat-drawer-container { + background: var(--secondary); + border: 1px solid var(--primary-low); + border-bottom: 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.125); + box-sizing: border-box; + display: flex; + flex-direction: column; + } - &.expanded { - max-height: $float-height; - height: calc(85vh - var(--composer-height, 0px)); + &.is-expanded { + .chat-drawer-container { + max-height: $float-height; + height: calc(85vh - var(--composer-height, 0px)); + } } .chat-live-pane { @@ -83,30 +85,30 @@ body.composer-open .topic-chat-float-container { } } -.topic-chat-drawer-header__left-actions { +.chat-drawer-header__left-actions { display: flex; height: 100%; } -.topic-chat-drawer-header__right-actions { +.chat-drawer-header__right-actions { display: flex; height: 100%; margin-left: auto; } -.topic-chat-drawer-header__top-line { +.chat-drawer-header__top-line { height: 2.5rem; display: flex; align-items: center; } -.topic-chat-drawer-header__bottom-line { +.chat-drawer-header__bottom-line { height: 1.5rem; display: flex; align-items: start; } -.topic-chat-drawer-header__title { +.chat-drawer-header__title { @include ellipsis; display: flex; flex-direction: column; @@ -120,7 +122,7 @@ body.composer-open .topic-chat-float-container { } } -.topic-chat-drawer-header { +.chat-drawer-header { box-sizing: border-box; border-bottom: solid 1px var(--primary-low); border-radius: 8px 8px 0 0; @@ -138,13 +140,13 @@ body.composer-open .topic-chat-float-container { width: 100%; .chat-name, - .topic-chat-name, + .chat-drawer-name, .category-chat-name, .dm-usernames { color: var(--primary); } .category-chat-badge, - .topic-chat-badge { + .chat-drawer-badge { display: flex; justify-content: center; align-content: center; @@ -213,7 +215,7 @@ body.composer-open .topic-chat-float-container { } } -.topic-chat-drawer-content { +.chat-drawer-content { box-sizing: border-box; height: 100%; min-height: 1px; diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss index 221141585ed..2ca098e21bf 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message.scss @@ -288,7 +288,7 @@ } .has-full-page-chat .chat-message .onebox:not(img), -.topic-chat-float-container .chat-message .onebox { +.chat-drawer-container .chat-message .onebox { margin: 0.5em 0; border-width: 2px; @@ -311,7 +311,7 @@ } } -.topic-chat-float-container .chat-message .onebox { +.chat-drawer-container .chat-message .onebox { width: 85%; border: 2px solid var(--primary-low); diff --git a/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss b/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss index 2349f67e102..959fad11334 100644 --- a/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss +++ b/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss @@ -4,7 +4,7 @@ gap: 0.5rem; padding: 0.5rem; - .topic-chat-drawer-content & { + .chat-drawer-content & { flex-direction: column; } @@ -12,7 +12,7 @@ display: flex; gap: 0.5rem; - .topic-chat-drawer-content & { + .chat-drawer-content & { flex-direction: column; width: 100%; } diff --git a/plugins/chat/assets/stylesheets/common/common.scss b/plugins/chat/assets/stylesheets/common/common.scss index 7fcb259506f..1610f814474 100644 --- a/plugins/chat/assets/stylesheets/common/common.scss +++ b/plugins/chat/assets/stylesheets/common/common.scss @@ -471,9 +471,6 @@ $float-height: 530px; &:hover, &.active { - .topic-chat-badge .topic-chat-icon .d-icon { - background: transparent; - } &.active { font-weight: 600; } @@ -632,8 +629,6 @@ body.has-full-page-chat { background-color: var(--primary-low); .chat-channel-title { .category-chat-name, - .topic-chat-name, - .tag-chat-name, .chat-name, .dm-usernames { color: var(--primary); @@ -664,8 +659,6 @@ body.has-full-page-chat { .chat-channel-title { .category-chat-name, - .topic-chat-name, - .tag-chat-name, .chat-name, .dm-usernames { color: var(--primary); @@ -735,8 +728,7 @@ body.has-full-page-chat { } .category-chat-name, - .dm-username, - .topic-chat-name { + .dm-username { font-weight: 700; font-size: var(--font-up-1); line-height: var(--font-up-1); @@ -754,9 +746,7 @@ body.has-full-page-chat { } .channels-list { - .tag-chat-badge, - .category-chat-badge, - .topic-chat-badge { + .category-chat-badge { color: var(--primary-low-mid); display: flex; align-items: center; @@ -769,12 +759,6 @@ body.has-full-page-chat { } } - .topic-chat-badge { - .d-icon { - z-index: 1; - } - } - .category-chat-private .d-icon { background-color: var(--secondary); position: absolute; diff --git a/plugins/chat/spec/system/navigation_spec.rb b/plugins/chat/spec/system/navigation_spec.rb index e487ecb1f8a..3a4ee506fe9 100644 --- a/plugins/chat/spec/system/navigation_spec.rb +++ b/plugins/chat/spec/system/navigation_spec.rb @@ -34,7 +34,7 @@ RSpec.describe "Navigation", type: :system, js: true do visit("/") chat_page.open_from_header - expect(page).to have_css(".topic-chat-container.expanded.visible") + expect(page).to have_css(".chat-drawer.is-expanded") end end @@ -62,12 +62,12 @@ RSpec.describe "Navigation", type: :system, js: true do chat_page.open chat_page.minimize_full_page - expect(page).to have_css(".topic-chat-container.expanded.visible") + expect(page).to have_css(".chat-drawer.is-expanded") visit("/") chat_page.open_from_header - expect(page).to have_css(".topic-chat-container.expanded.visible") + expect(page).to have_css(".chat-drawer.is-expanded") end end @@ -114,7 +114,7 @@ RSpec.describe "Navigation", type: :system, js: true do find("a", text: "foo").click expect(page).to have_css( - ".topic-chat-container.expanded.visible .chat-message-container.highlighted[data-id='#{message.id}']", + ".chat-drawer.is-expanded .chat-message-container.highlighted[data-id='#{message.id}']", ) end end @@ -156,7 +156,7 @@ RSpec.describe "Navigation", type: :system, js: true do sidebar_page.open_draft_channel expect(page).to have_current_path("/") - expect(page).to have_css(".topic-chat-container.expanded.visible .direct-message-creator") + expect(page).to have_css(".chat-drawer.is-expanded .direct-message-creator") end end @@ -167,7 +167,7 @@ RSpec.describe "Navigation", type: :system, js: true do chat_drawer_page.open_draft_channel expect(page).to have_current_path("/") - expect(page).to have_css(".topic-chat-container.expanded.visible .direct-message-creator") + expect(page).to have_css(".chat-drawer.is-expanded .direct-message-creator") end end @@ -180,7 +180,7 @@ RSpec.describe "Navigation", type: :system, js: true do sidebar_page.open_draft_channel expect(page).to have_current_path("/chat/draft-channel") - expect(page).not_to have_css(".topic-chat-container.expanded.visible") + expect(page).not_to have_css(".chat-drawer.is-expanded") end end @@ -191,7 +191,7 @@ RSpec.describe "Navigation", type: :system, js: true do chat_drawer_page.open_browse expect(page).to have_current_path("/chat/browse/open") - expect(page).not_to have_css(".topic-chat-container.expanded.visible") + expect(page).not_to have_css(".chat-drawer.is-expanded") end end @@ -202,7 +202,7 @@ RSpec.describe "Navigation", type: :system, js: true do sidebar_page.open_browse expect(page).to have_current_path("/chat/browse/open") - expect(page).not_to have_css(".topic-chat-container.expanded.visible") + expect(page).not_to have_css(".chat-drawer.is-expanded") end end @@ -216,7 +216,7 @@ RSpec.describe "Navigation", type: :system, js: true do chat_page.open_from_header expect(page).to have_current_path("/") - expect(page).to have_css(".topic-chat-container.expanded.visible") + expect(page).to have_css(".chat-drawer.is-expanded") expect(page).to have_content(category_channel_2.title) end end diff --git a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb index 5e2cae079d7..1fa4d9fcf2a 100644 --- a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb +++ b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb @@ -3,7 +3,7 @@ module PageObjects module Pages class ChatDrawer < PageObjects::Pages::Base - VISIBLE_DRAWER = ".topic-chat-container.expanded.visible" + VISIBLE_DRAWER = ".chat-drawer.is-expanded" def open_browse find("#{VISIBLE_DRAWER} .open-browse-page-btn").click end @@ -13,11 +13,11 @@ module PageObjects end def close - find("#{VISIBLE_DRAWER} .topic-chat-drawer-header__close-btn").click + find("#{VISIBLE_DRAWER} .chat-drawer-header__close-btn").click end def open_index - find("#{VISIBLE_DRAWER} .topic-chat-drawer-header__return-to-channels-btn").click + find("#{VISIBLE_DRAWER} .chat-drawer-header__return-to-channels-btn").click end def open_channel(channel) @@ -27,7 +27,7 @@ module PageObjects end def maximize - find("#{VISIBLE_DRAWER} .topic-chat-drawer-header__full-screen-btn").click + find("#{VISIBLE_DRAWER} .chat-drawer-header__full-screen-btn").click end end end diff --git a/plugins/chat/spec/system/shortcuts/drawer_spec.rb b/plugins/chat/spec/system/shortcuts/drawer_spec.rb new file mode 100644 index 00000000000..84f25675aa8 --- /dev/null +++ b/plugins/chat/spec/system/shortcuts/drawer_spec.rb @@ -0,0 +1,44 @@ +# frozen_string_literal: true + +RSpec.describe "Navigation", type: :system, js: true do + fab!(:user_1) { Fabricate(:admin) } + fab!(:category_channel_1) { Fabricate(:category_channel) } + fab!(:category_channel_2) { Fabricate(:category_channel) } + let(:chat_page) { PageObjects::Pages::Chat.new } + let(:chat_drawer_page) { PageObjects::Pages::ChatDrawer.new } + + before do + chat_system_bootstrap(user_1, [category_channel_1, category_channel_2]) + sign_in(user_1) + end + + context "when drawer is closed" do + before { visit("/") } + + context "when pressing dash" do + it "opens the drawer" do + find("body").send_keys("-") + + expect(page).to have_css(".chat-drawer.is-expanded") + end + end + end + + context "when drawer is opened" do + before do + visit("/") + chat_page.open_from_header + end + + context "when pressing escape" do + it "opens the drawer" do + expect(page).to have_css(".chat-drawer.is-expanded") + + chat_drawer_page.open_channel(category_channel_1) + find(".chat-composer-input").send_keys(:escape) + + expect(page).to_not have_css(".chat-drawer.is-expanded") + end + end + end +end diff --git a/plugins/chat/test/javascripts/acceptance/chat-channels-list-test.js b/plugins/chat/test/javascripts/acceptance/chat-channels-list-test.js index ec7ed3a1b3b..4646aaa446c 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-channels-list-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-channels-list-test.js @@ -15,6 +15,8 @@ acceptance( needs.settings({ chat_enabled: true, + enable_sidebar: false, + enable_experimental_sidebar_hamburger: false, }); needs.pretender((server, helper) => { diff --git a/plugins/chat/test/javascripts/acceptance/chat-composer-test.js b/plugins/chat/test/javascripts/acceptance/chat-composer-test.js index 4fd59c33341..ebe8af08dc6 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-composer-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-composer-test.js @@ -18,7 +18,7 @@ import { } from "../helpers/chat-pretenders"; acceptance("Discourse Chat - Composer", function (needs) { - needs.user({ id: 1, has_chat_enabled: true }); + needs.user({ has_chat_enabled: true }); needs.settings({ chat_enabled: true, enable_rich_text_paste: true }); needs.pretender((server, helper) => { baseChatPretenders(server, helper); diff --git a/plugins/chat/test/javascripts/acceptance/chat-keyboard-shortcuts-test.js b/plugins/chat/test/javascripts/acceptance/chat-keyboard-shortcuts-test.js index cde51fdd3ba..9c18a32ffa9 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-keyboard-shortcuts-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-keyboard-shortcuts-test.js @@ -5,7 +5,6 @@ import { loggedInUser, query, queryAll, - visible, } from "discourse/tests/helpers/qunit-helpers"; import { click, @@ -84,9 +83,9 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) { test("channel selector opens channel in float", async function (assert) { await visit("/latest"); - await showModal("chat-channel-selector-modal"); await settled(); + assert.ok(exists("#chat-channel-selector-modal-inner")); // All channels should show because the input is blank @@ -110,7 +109,8 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) { ); await triggerKeyEvent(document.body, "keyup", "Enter"); - assert.ok(exists(".topic-chat-container.visible")); + + assert.ok(exists(".chat-drawer.is-expanded")); assert.notOk(exists("#chat-channel-selector-modal-inner")); assert.equal(currentURL(), "/latest"); }); @@ -164,28 +164,24 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) { test("switching channel with alt+arrow keys in float", async function (assert) { await visit("/latest"); - this.chatService.set("sidebarActive", false); - await click(".header-dropdown-toggle.open-chat"); await click("#chat-channel-row-4"); - assert.ok(visible(".topic-chat-float-container"), "chat float is open"); - assert.ok(query(".topic-chat-container").classList.contains("channel-4")); + assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="4"]`)); await triggerKeyEvent(document.body, "keydown", "ArrowDown", { altKey: true, }); - assert.ok(query(".topic-chat-container").classList.contains("channel-10")); + assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="10`)); await triggerKeyEvent(document.body, "keydown", "ArrowUp", { altKey: true, }); - assert.ok(query(".topic-chat-container").classList.contains("channel-4")); + assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="4"]`)); }); test("simple composer formatting shortcuts", async function (assert) { - this.chatService.set("sidebarActive", false); await visit("/latest"); await click(".header-dropdown-toggle.open-chat"); await click(".chat-channel-row"); @@ -230,7 +226,6 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) { const stagedMessageText = "This is a test"; await visit("/latest"); - this.chatService.set("sidebarActive", false); await click(".header-dropdown-toggle.open-chat"); await click(".chat-channel-row"); await fillIn(".chat-composer-input", stagedMessageText); @@ -246,7 +241,6 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) { test("insert link shortcut", async function (assert) { await visit("/latest"); - this.chatService.set("sidebarActive", false); await click(".header-dropdown-toggle.open-chat"); await click(".chat-channel-row"); @@ -276,32 +270,7 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) { ); }); - test("Dash key (-) opens chat float", async function (assert) { - await visit("/latest"); - this.chatService.set("sidebarActive", false); - - await triggerKeyEvent(document.body, "keydown", "-"); - assert.ok(exists(".topic-chat-drawer-content"), "chat float is open"); - }); - - test("Pressing Escape when drawer is opened", async function (assert) { - this.chatService.set("sidebarActive", false); - await visit("/latest"); - await click(".header-dropdown-toggle.open-chat"); - await click(".chat-channel-row"); - - const composerInput = query(".chat-composer-input"); - await focus(composerInput); - await triggerKeyEvent(composerInput, "keydown", "Escape"); - - assert.ok( - exists(".topic-chat-float-container.hidden"), - "it closes the drawer" - ); - }); - test("Pressing Escape when full page is opened", async function (assert) { - this.chatService.set("sidebarActive", false); await visit("/chat/channel/75/@hawk"); const composerInput = query(".chat-composer-input"); await focus(composerInput); diff --git a/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js b/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js index 1a9fe0c3426..63569a12ad0 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js @@ -110,7 +110,7 @@ acceptance("Discourse Chat | Quoting in composer", async function (needs) { await visit("/t/internationalization-localization/280"); await click(".header-dropdown-toggle.open-chat"); - assert.ok(visible(".topic-chat-float-container"), "chat float is open"); + assert.ok(visible(".chat-drawer-container"), "chat drawer is open"); assert.ok(exists(".chat-message-container")); const firstMessage = query(".chat-message-container"); diff --git a/plugins/chat/test/javascripts/acceptance/chat-status-test.js b/plugins/chat/test/javascripts/acceptance/chat-status-test.js index 3b3e13274f3..4ba11d24d9e 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-status-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-status-test.js @@ -61,6 +61,7 @@ acceptance( needs.settings({ chat_enabled: true, chat_allow_archiving_channels: true, + enable_sidebar: false, }); needs.pretender((server, helper) => { diff --git a/plugins/chat/test/javascripts/acceptance/chat-test.js b/plugins/chat/test/javascripts/acceptance/chat-test.js index d1f6e5346fb..ee1093255fa 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-test.js @@ -65,6 +65,7 @@ acceptance("Discourse Chat - without unread", function (needs) { has_chat_enabled: true, }); needs.settings({ + enable_sidebar: false, chat_enabled: true, }); needs.pretender((server, helper) => { @@ -144,8 +145,8 @@ acceptance("Discourse Chat - without unread", function (needs) { await visit("/t/internationalization-localization/280"); await click(".header-dropdown-toggle.current-user"); await click("#quick-access-notifications .chat-mention"); - assert.ok(visible(".topic-chat-float-container"), "chat float is open"); - assert.ok(query(".topic-chat-container").classList.contains("channel-9")); + assert.ok(visible(".chat-drawer-container"), "drawer is open"); + assert.ok(query(".chat-drawer-container").classList.contains("channel-9")); }); test("notifications for current user and here/all are highlighted", async function (assert) { @@ -366,20 +367,18 @@ acceptance("Discourse Chat - without unread", function (needs) { }); test("Reply-to is stored in draft", async function (assert) { - this.chatService.set("sidebarActive", false); - await visit("/latest"); await click(".header-dropdown-toggle.open-chat"); await click(".chat-channel-row"); await settled(); - await click(".topic-chat-drawer-header__return-to-channels-btn"); + await click(".chat-drawer-header__return-to-channels-btn"); await click(".chat-channel-row.chat-channel-9"); await triggerEvent(".chat-message-container[data-id='174']", "mouseenter"); await click(".chat-message-actions-container[data-id='174'] .reply-btn"); // Reply-to line is present assert.ok(exists(".chat-composer-message-details .chat-reply")); - await click(".topic-chat-drawer-header__return-to-channels-btn"); + await click(".chat-drawer-header__return-to-channels-btn"); await click(".chat-channel-row.chat-channel-11"); // Reply-to line is gone since switching channels assert.notOk(exists(".chat-composer-message-details .chat-reply")); @@ -390,13 +389,13 @@ acceptance("Discourse Chat - without unread", function (needs) { await click(".cancel-message-action"); // Go back to channel 9 and check that reply-to is present - await click(".topic-chat-drawer-header__return-to-channels-btn"); + await click(".chat-drawer-header__return-to-channels-btn"); await click(".chat-channel-row.chat-channel-9"); // Now reply-to should be back and loaded from draft assert.ok(exists(".chat-composer-message-details .chat-reply")); // Go back one for time to channel 7 and make sure reply-to is gone - await click(".topic-chat-drawer-header__return-to-channels-btn"); + await click(".chat-drawer-header__return-to-channels-btn"); await click(".chat-channel-row.chat-channel-11"); assert.notOk(exists(".chat-composer-message-details .chat-reply")); }); @@ -725,7 +724,7 @@ Widget.triangulate(arg: "test") }); test("creating a new direct message channel from popup chat works", async function (assert) { - await visit("/t/internationalization-localization/280"); + await visit("/chat"); await click(".open-draft-channel-page-btn"); await fillIn(".filter-usernames", "hawk"); await click('.chat-user-avatar-container[data-user-card="hawk"]'); @@ -978,9 +977,8 @@ acceptance( test("Expand button takes you to full page chat on the correct channel", async function (assert) { await visit("/t/internationalization-localization/280"); - this.chatService.set("sidebarActive", false); await click(".header-dropdown-toggle.open-chat"); - await click(".topic-chat-drawer-header__full-screen-btn"); + await click(".chat-drawer-header__full-screen-btn"); assert.equal(currentURL(), `/chat/channel/11/another-category`); }); @@ -1032,7 +1030,7 @@ acceptance( ); acceptance( - "Discourse Chat - Expand and collapse chat drawer (topic-chat-float)", + "Discourse Chat - Expand and collapse drawer (chat-drawer)", function (needs) { needs.user({ admin: false, @@ -1061,62 +1059,59 @@ acceptance( }); }); - test("chat drawer can be collapsed and expanded", async function (assert) { + test("drawer can be collapsed and expanded", async function (assert) { await visit("/t/internationalization-localization/280"); - this.chatService.set("sidebarActive", false); await click(".header-dropdown-toggle.open-chat"); assert.ok( - visible(".topic-chat-drawer-header__top-line--expanded"), - "chat float is expanded" + visible(".chat-drawer-header__top-line--expanded"), + "drawer is expanded" ); - await click(".topic-chat-drawer-header__expand-btn"); + await click(".chat-drawer-header__expand-btn"); assert.ok( - visible(".topic-chat-drawer-header__top-line--collapsed"), - "chat float is collapsed" + visible(".chat-drawer-header__top-line--collapsed"), + "drawer is collapsed" ); - await click(".topic-chat-drawer-header__expand-btn"); + await click(".chat-drawer-header__expand-btn"); assert.ok( - visible(".topic-chat-drawer-header__top-line--expanded"), - "chat float is expanded" + visible(".chat-drawer-header__top-line--expanded"), + "drawer is expanded" ); }); - test("chat drawer title links to channel info when expanded", async function (assert) { + test("drawer title links to channel info when expanded", async function (assert) { await visit("/t/internationalization-localization/280"); - this.chatService.set("sidebarActive", false); await click(".header-dropdown-toggle.open-chat"); assert.ok( - visible(".topic-chat-drawer-header__top-line--expanded"), - "chat float is expanded" + visible(".chat-drawer-header__top-line--expanded"), + "drawer is expanded" ); await click("#chat-channel-row-9"); - await click(".topic-chat-drawer-header__title"); + await click(".chat-drawer-header__title"); assert.equal(currentURL(), `/chat/channel/9/site/info/members`); }); - test("chat drawer title expands the chat drawer when collapsed", async function (assert) { + test("drawer title expands the drawer when collapsed", async function (assert) { await visit("/t/internationalization-localization/280"); - this.chatService.set("sidebarActive", false); await click(".header-dropdown-toggle.open-chat"); await click(".chat-channel-row"); assert.ok( - visible(".topic-chat-drawer-header__top-line--expanded"), - "chat float is expanded" + visible(".chat-drawer-header__top-line--expanded"), + "drawer is expanded" ); - await click(".topic-chat-drawer-header__expand-btn"); + await click(".chat-drawer-header__expand-btn"); assert.ok( - visible(".topic-chat-drawer-header__top-line--collapsed"), - "chat float is collapsed" + visible(".chat-drawer-header__top-line--collapsed"), + "drawer is collapsed" ); - await click(".topic-chat-drawer-header__title"); + await click(".chat-drawer-header__title"); assert.ok( - visible(".topic-chat-drawer-header__top-line--expanded"), - "chat float is expanded" + visible(".chat-drawer-header__top-line--expanded"), + "drawer is expanded" ); }); } @@ -1164,14 +1159,12 @@ acceptance( ); }); - test("Chat float open to DM channel with unread messages with sidebar off", async function (assert) { + test("drawer open to DM channel with unread messages with sidebar off", async function (assert) { await visit("/t/internationalization-localization/280"); - this.chatService.set("sidebarActive", false); - await click(".header-dropdown-toggle.open-chat"); await click("#chat-channel-row-75"); - const chatContainer = query(".topic-chat-container"); - assert.ok(chatContainer.classList.contains("channel-75")); + const chatContainer = query(".chat-drawer"); + assert.strictEqual(chatContainer.dataset.chatChannelId, "75"); }); test("Chat full page open to DM channel with unread messages with sidebar on", async function (assert) { @@ -1400,10 +1393,10 @@ acceptance("Discourse Chat - image uploads", function (needs) { test("uploading files in chat works", async function (assert) { await visit("/t/internationalization-localization/280"); - this.container.lookup("service:chat").set("sidebarActive", false); await click(".header-dropdown-toggle.open-chat"); + await click(".chat-channel-row"); - assert.ok(visible(".topic-chat-float-container"), "chat float is open"); + assert.ok(exists(".chat-drawer.is-expanded"), "drawer is open"); const appEvents = loggedInUser().appEvents; const done = assert.async(); @@ -1462,7 +1455,7 @@ acceptance("Discourse Chat - image uploads", function (needs) { this.container.lookup("service:chat").set("sidebarActive", false); await click(".header-dropdown-toggle.open-chat"); await click(".chat-channel-row"); - assert.ok(visible(".topic-chat-float-container"), "chat float is open"); + assert.ok(visible(".chat-drawer-container"), "drawer is open"); const appEvents = loggedInUser().appEvents; const done = assert.async(); @@ -1811,34 +1804,6 @@ acceptance("Discourse Chat - Direct Message Creator", function (needs) { }); }); -acceptance("Discourse Chat - Drawer", function (needs) { - needs.user({ has_chat_enabled: true }); - needs.settings({ chat_enabled: true }); - needs.pretender((server, helper) => { - baseChatPretenders(server, helper); - chatChannelPretender(server, helper); - }); - - needs.hooks.beforeEach(function () { - Object.defineProperty(this, "chatService", { - get: () => this.container.lookup("service:chat"), - }); - }); - - test("Position after closing reduced composer", async function (assert) { - await visit("/t/internationalization-localization/280"); - await click(".btn.create"); - await click(".toggle-preview"); - await click(".header-dropdown-toggle.open-chat"); - await click(".save-or-cancel .cancel"); - const float = document.querySelector(".topic-chat-float-container"); - const key = "--composer-right"; - const value = getComputedStyle(float).getPropertyValue(key); - - assert.strictEqual(value, "15px"); - }); -}); - function createFile(name, type = "image/png") { // the blob content doesn't matter at all, just want it to be random-ish const file = new Blob([(Math.random() + 1).toString(36).substring(2)], { diff --git a/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js b/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js index 87ffc59ffdc..ea3381104ea 100644 --- a/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js +++ b/plugins/chat/test/javascripts/acceptance/core-sidebar-test.js @@ -418,7 +418,7 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) { await click(".sidebar-section-chat-dms .sidebar-section-header-button"); assert.ok(exists(".direct-message-creator")); - assert.ok(exists(".topic-chat-container.expanded.visible")); + assert.ok(exists(".chat-drawer.is-expanded")); assert.strictEqual(currentURL(), "/"); }); diff --git a/plugins/chat/test/javascripts/acceptance/user-card-chat-test.js b/plugins/chat/test/javascripts/acceptance/user-card-chat-test.js index a4750fea4e4..035bd8d1416 100644 --- a/plugins/chat/test/javascripts/acceptance/user-card-chat-test.js +++ b/plugins/chat/test/javascripts/acceptance/user-card-chat-test.js @@ -4,8 +4,6 @@ import { acceptance, exists, loggedInUser, - query, - visible, } from "discourse/tests/helpers/qunit-helpers"; import { click, visit } from "@ember/test-helpers"; import { @@ -82,7 +80,6 @@ acceptance("Discourse Chat - User card test", function (needs) { }); test("user card has chat button that opens the correct channel", async function (assert) { - this.chatService.set("sidebarActive", false); await visit("/"); await click(".header-dropdown-toggle.open-chat"); await click(".chat-channel-row.chat-channel-9"); @@ -92,8 +89,7 @@ acceptance("Discourse Chat - User card test", function (needs) { await click(".user-card-chat-btn"); - assert.ok(visible(".topic-chat-float-container"), "chat float is open"); - assert.ok(query(".topic-chat-container").classList.contains("channel-75")); + assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="75"]`)); }); }); diff --git a/plugins/chat/test/javascripts/components/sidebar-channels-test.js b/plugins/chat/test/javascripts/components/sidebar-channels-test.js index 053c662cfd6..52b4ee61f95 100644 --- a/plugins/chat/test/javascripts/components/sidebar-channels-test.js +++ b/plugins/chat/test/javascripts/components/sidebar-channels-test.js @@ -32,7 +32,7 @@ module("Discourse Chat | Component | sidebar-channels", function (hooks) { template: hbs`{{sidebar-channels}}`, beforeEach() { - setupChatStub(this, { fullScreenChatOpen: true }); + setupChatStub(this, {}); }, afterEach() { @@ -48,7 +48,7 @@ module("Discourse Chat | Component | sidebar-channels", function (hooks) { template: hbs`{{sidebar-channels}}`, beforeEach() { - setupChatStub(this, { userCanChat: false, fullScreenChatOpen: false }); + setupChatStub(this, { userCanChat: false }); }, afterEach() { diff --git a/plugins/chat/test/javascripts/helpers/chat-stub.js b/plugins/chat/test/javascripts/helpers/chat-stub.js index 7d9420b3c0b..ad2f8df2c35 100644 --- a/plugins/chat/test/javascripts/helpers/chat-stub.js +++ b/plugins/chat/test/javascripts/helpers/chat-stub.js @@ -4,12 +4,10 @@ import Service from "@ember/service"; let publicChannels; let userCanChat; -let fullScreenChatOpen; class ChatStub extends Service { userCanChat = userCanChat; publicChannels = publicChannels; - fullScreenChatOpen = fullScreenChatOpen; } export function setup(context, options = {}) { @@ -20,13 +18,9 @@ export function setup(context, options = {}) { ? options.publicChannels : [fabricators.chatChannel()]; userCanChat = isPresent(options.userCanChat) ? options.userCanChat : true; - fullScreenChatOpen = isPresent(options.fullScreenChatOpen) - ? options.fullScreenChatOpen - : false; } export function teardown() { publicChannels = []; userCanChat = true; - fullScreenChatOpen = false; } diff --git a/plugins/chat/test/javascripts/unit/services/chat-state-manager-test.js b/plugins/chat/test/javascripts/unit/services/chat-state-manager-test.js index 596d8dd5a21..cca77828a08 100644 --- a/plugins/chat/test/javascripts/unit/services/chat-state-manager-test.js +++ b/plugins/chat/test/javascripts/unit/services/chat-state-manager-test.js @@ -71,12 +71,63 @@ module( assert.strictEqual(this.subject.lastKnownAppURL, "/bar"); }); - test("isFullPage", function (assert) { + test("isFullPageActive", function (assert) { sinon.stub(this.subject.router, "currentRouteName").value("foo"); - assert.notOk(this.subject.isFullPage); + assert.notOk(this.subject.isFullPageActive); sinon.stub(this.subject.router, "currentRouteName").value("chat"); - assert.ok(this.subject.isFullPage); + assert.ok(this.subject.isFullPageActive); + }); + + test("didCollapseDrawer", function (assert) { + this.subject.didCollapseDrawer(); + + assert.strictEqual(this.subject.isDrawerExpanded, false); + assert.strictEqual(this.subject.isDrawerActive, true); + }); + + test("didExpandDrawer", function (assert) { + const stub = sinon.stub( + this.owner.lookup("service:chat"), + "updatePresence" + ); + + this.subject.didExpandDrawer(); + + assert.strictEqual(this.subject.isDrawerExpanded, true); + assert.strictEqual(this.subject.isDrawerActive, true); + sinon.assert.calledOnce(stub); + }); + + test("didCloseDrawer", function (assert) { + const stub = sinon.stub( + this.owner.lookup("service:chat"), + "updatePresence" + ); + + this.subject.didCloseDrawer(); + + assert.strictEqual(this.subject.isDrawerExpanded, false); + assert.strictEqual(this.subject.isDrawerActive, false); + sinon.assert.calledOnce(stub); + }); + + test("didOpenDrawer", function (assert) { + const stub = sinon.stub( + this.owner.lookup("service:chat"), + "updatePresence" + ); + + this.subject.didOpenDrawer(); + + assert.strictEqual(this.subject.isDrawerExpanded, true); + assert.strictEqual(this.subject.isDrawerActive, true); + assert.strictEqual(this.subject.lastKnownChatURL, "/chat"); + + this.subject.didOpenDrawer("/foo"); + + assert.strictEqual(this.subject.lastKnownChatURL, "/foo"); + sinon.assert.calledTwice(stub); }); } );