From 84c1cc70d6ed9d1574b7769c3b6d5983fe0afbff Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 25 Nov 2022 14:15:38 +0100
Subject: [PATCH] REFACTOR: naming and state refactor (#19187)
- better handling of drawer state using chat state manager
- removes various float and topic occurrences to use drawer
- ensures user can chat before doing a lot of chat setup
- fixes a bug which was creating presence errors in tests
- removes dead code
---
.../tests/acceptance/bookmarks-test.js | 1 -
.../discourse/components/channels-list.js | 2 +-
.../components/chat-composer-uploads.js | 6 +-
.../discourse/components/chat-composer.js | 2 +-
.../{topic-chat-float.js => chat-drawer.js} | 56 +++------
.../discourse/components/chat-live-pane.js | 9 +-
.../below-footer/chat-drawer-outlet.hbs | 4 +
.../below-footer/topic-chat-outlet.hbs | 1 -
.../discourse/initializers/chat-decorators.js | 10 +-
.../initializers/chat-keyboard-shortcuts.js | 8 +-
.../initializers/chat-plugin-decorators.js | 10 +-
.../discourse/initializers/chat-setup.js | 12 +-
.../javascripts/discourse/routes/chat.js | 1 +
.../discourse/services/chat-state-manager.js | 38 +++++-
.../javascripts/discourse/services/chat.js | 34 ++----
.../javascripts/discourse/templates/chat.hbs | 4 +-
.../templates/components/channels-list.hbs | 2 +-
.../components/chat-draft-channel-screen.hbs | 2 -
.../templates/components/chat-drawer.hbs | 85 ++++++++++++++
.../templates/components/chat-live-pane.hbs | 18 ++-
.../chat-message-actions-desktop.hbs | 2 +-
.../templates/components/full-page-chat.hbs | 2 +-
.../templates/components/topic-chat-float.hbs | 86 --------------
.../discourse/widgets/chat-header-icon.js | 7 +-
.../common/chat-channel-title.scss | 2 -
.../stylesheets/common/chat-drawer.scss | 52 ++++----
.../stylesheets/common/chat-message.scss | 4 +-
.../common/chat-selection-manager.scss | 4 +-
.../assets/stylesheets/common/common.scss | 20 +---
plugins/chat/spec/system/navigation_spec.rb | 20 ++--
.../page_objects/chat_drawer/chat_drawer.rb | 8 +-
.../chat/spec/system/shortcuts/drawer_spec.rb | 44 +++++++
.../acceptance/chat-channels-list-test.js | 2 +
.../acceptance/chat-composer-test.js | 2 +-
.../chat-keyboard-shortcuts-test.js | 43 +------
.../acceptance/chat-quoting-test.js | 2 +-
.../acceptance/chat-status-test.js | 1 +
.../test/javascripts/acceptance/chat-test.js | 111 ++++++------------
.../acceptance/core-sidebar-test.js | 2 +-
.../acceptance/user-card-chat-test.js | 6 +-
.../components/sidebar-channels-test.js | 4 +-
.../test/javascripts/helpers/chat-stub.js | 6 -
.../unit/services/chat-state-manager-test.js | 57 ++++++++-
43 files changed, 401 insertions(+), 391 deletions(-)
rename plugins/chat/assets/javascripts/discourse/components/{topic-chat-float.js => chat-drawer.js} (86%)
create mode 100644 plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-drawer-outlet.hbs
delete mode 100644 plugins/chat/assets/javascripts/discourse/connectors/below-footer/topic-chat-outlet.hbs
create mode 100644 plugins/chat/assets/javascripts/discourse/templates/components/chat-drawer.hbs
delete mode 100644 plugins/chat/assets/javascripts/discourse/templates/components/topic-chat-float.hbs
create mode 100644 plugins/chat/spec/system/shortcuts/drawer_spec.rb
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 @@
+
+<div class="chat-drawer-outlet-container">
+ <ChatDrawer />
+</div>
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 @@
-<TopicChatFloat />
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))
}}
<ChannelsList @onSelect={{action "switchChannel"}} />
{{/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}}
<div class="chat-channel-divider public-channels-section">
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}}
<ChatLivePane
@chatChannel={{this.previewedChannel}}
- @expanded={{true}}
- @floatHidden={{false}}
@includeHeader={{false}}
@onSwitchChannel={{action "onSwitchFromDraftChannel"}}
/>
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}}
+ <div data-chat-channel-id={{this.chat.activeChannel.id}} class={{concat-class "chat-drawer" (if this.chatStateManager.isDrawerExpanded "is-expanded")}}>
+ <div class="chat-drawer-container">
+ <div
+ role="region"
+ aria-label={{i18n "chat.aria_roles.header"}}
+ class="chat-drawer-header"
+ >
+ {{#if (and this.draftChannelView this.chatStateManager.isDrawerExpanded)}}
+ <div class="chat-drawer-header__left-actions">
+ <div class="chat-drawer-header__top-line">
+ <LinkTo title={{i18n "chat.return_to_list"}} class="chat-drawer-header__return-to-channels-btn" @route="chat">
+ {{d-icon "chevron-left"}}
+ </LinkTo>
+ </div>
+ </div>
+
+ <span class="chat-drawer-header__title">
+ <div class="chat-drawer-header__top-line">
+ {{i18n "chat.direct_message_creator.title"}}
+ </div>
+ </span>
+ {{else if this.chatView}}
+ {{#if this.chatStateManager.isDrawerExpanded}}
+ <LinkTo title={{i18n "chat.return_to_list"}} class="chat-drawer-header__return-to-channels-btn" @route="chat">
+ {{d-icon "chevron-left"}}
+ </LinkTo>
+ {{/if}}
+
+ {{#if this.chat.activeChannel}}
+ {{#if this.chatStateManager.isDrawerExpanded}}
+ <LinkTo @route={{this.infoTabRoute}} @models={{array this.chat.activeChannel.id (slugify-channel this.chat.activeChannel)}} class="chat-drawer-header__title">
+ <div class="chat-drawer-header__top-line">
+ <ChatChannelTitle @channel={{this.chat.activeChannel}} />
+ </div>
+ </LinkTo>
+ {{else}}
+ <div role="button" {{on "click" (action "toggleExpand")}} class="chat-drawer-header__title">
+ <div class="chat-drawer-header__top-line">
+ <ChatChannelTitle @channel={{this.chat.activeChannel}}>
+ {{#if this.unreadCount}}
+ <span class="chat-unread-count">{{this.unreadCount}}</span>
+ {{/if}}
+ </ChatChannelTitle>
+ </div>
+ </div>
+ {{/if}}
+ {{/if}}
+ {{else}}
+ <span class="chat-drawer-header__title">
+ <div class="chat-drawer-header__top-line">
+ {{i18n "chat.heading"}}
+ </div>
+ </span>
+ {{/if}}
+
+ <div class="chat-drawer-header__right-actions">
+ <div class="chat-drawer-header__top-line {{this.topLineClass}}">
+ {{#if this.chatStateManager.isDrawerExpanded}}
+ <DButton @icon="discourse-expand" class="btn-flat btn-link chat-drawer-header__full-screen-btn" @title={{"chat.open_full_page"}} @action={{this.openInFullPage}} />
+ {{/if}}
+
+ <FlatButton @icon={{this.expandIcon}} @class="chat-drawer-header__expand-btn" @action={{action "toggleExpand"}} @title="chat.collapse" />
+
+ {{#if this.showClose}}
+ <FlatButton @icon="times" @action={{action "close"}} @title="chat.close" @class="chat-drawer-header__close-btn" />
+ {{/if}}
+ </div>
+ </div>
+ </div>
+
+ {{#if this.chatStateManager.isDrawerExpanded}}
+ <div class="chat-drawer-content">
+ {{#if (and this.chatView this.chat.activeChannel)}}
+ <ChatLivePane @chatChannel={{this.chat.activeChannel}} @onSwitchChannel={{action "switchChannel"}} />
+ {{else if this.draftChannelView}}
+ <ChatDraftChannelScreen @onSwitchChannel={{action "switchChannel"}} />
+ {{else}}
+ <ChannelsList @onOpenView={{action "openURL"}} @onSelect={{action "switchChannel"}} />
+ {{/if}}
+ </div>
+ {{/if}}
+ </div>
+ </div>
+{{/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)}}
<div
class="chat-full-page-header
{{unless this.chatChannel.isFollowing "-not-following"}}"
@@ -16,7 +16,7 @@
{{#if this.showCloseFullScreenBtn}}
<div class="chat-full-page-header__right-actions">
- <DButton @icon="discourse-compress" @title="chat.close_full_page" class="open-drawer-btn btn-flat no-text" @action={{action "onCloseFullScreen"}} />
+ <DButton @icon="discourse-compress" @title="chat.close_full_page" class="open-drawer-btn btn-flat no-text" @action={{action this.onCloseFullScreen}} />
</div>
{{/if}}
</div>
@@ -86,14 +86,12 @@
</div>
{{/if}}
-{{#if this.expanded}}
- {{#if this.selectingMessages}}
- <ChatSelectionManager @selectedMessageIds={{this.selectedMessageIds}} @chatChannel={{this.chatChannel}} @canModerate={{this.details.can_moderate}} @cancelSelecting={{action "cancelSelecting"}} />
+{{#if this.selectingMessages}}
+ <ChatSelectionManager @selectedMessageIds={{this.selectedMessageIds}} @chatChannel={{this.chatChannel}} @canModerate={{this.details.can_moderate}} @cancelSelecting={{action "cancelSelecting"}} />
+{{else}}
+ {{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}}
+ <ChatComposer @draft={{this.draft}} @details={{this.details}} @canInteractWithChat={{this.canInteractWithChat}} @sendMessage={{action "sendMessage"}} @editMessage={{action "editMessage"}} @setReplyTo={{action "setReplyTo"}} @loading={{this.sendingLoading}} @editingMessage={{readonly this.editingMessage}} @onCancelEditing={{this.cancelEditing}} @setInReplyToMsg={{this.setInReplyToMsg}} @onEditLastMessageRequested={{this.editLastMessageRequested}} @onValueChange={{action "composerValueChanged"}} @chatChannel={{this.chatChannel}} />
{{else}}
- {{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}}
- <ChatComposer @draft={{this.draft}} @details={{this.details}} @canInteractWithChat={{this.canInteractWithChat}} @sendMessage={{action "sendMessage"}} @editMessage={{action "editMessage"}} @setReplyTo={{action "setReplyTo"}} @loading={{this.sendingLoading}} @editingMessage={{readonly this.editingMessage}} @onCancelEditing={{this.cancelEditing}} @setInReplyToMsg={{this.setInReplyToMsg}} @onEditLastMessageRequested={{this.editLastMessageRequested}} @onValueChange={{action "composerValueChanged"}} @fullPage={{this.fullPage}} @chatChannel={{this.chatChannel}} />
- {{else}}
- <ChatChannelPreviewCard @channel={{this.chatChannel}} />
- {{/if}}
+ <ChatChannelPreviewCard @channel={{this.chatChannel}} />
{{/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 @@
<div class="chat-message-actions-container" data-id={{this.message.id}}>
<div class="chat-message-actions">
- {{#if this.chatStateManager.isFullPage}}
+ {{#if this.chatStateManager.isFullPageActive}}
{{#each this.emojiReactions as |reaction|}}
<ChatMessageReaction @reaction={{reaction}} @react={{this.messageActions.react}} @class="show" />
{{/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}}
- <ChatLivePane @chatChannel={{this.chat.activeChannel}} @expanded={{true}} @floatHidden={{false}} @onBackClick={{action "navigateToIndex"}} @onSwitchChannel={{action "switchChannel"}} />
+ <ChatLivePane @chatChannel={{this.chat.activeChannel}} @onBackClick={{action "navigateToIndex"}} @onSwitchChannel={{action "switchChannel"}} />
{{/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 @@
-<div class="chat-drawer">
- <div
- class={{this.containerClassNames}}
- data-chat-channel-id={{this.chat.activeChannel.id}}
- >
- <div
- role="region"
- aria-label={{i18n "chat.aria_roles.header"}}
- class="topic-chat-drawer-header"
- >
- {{#if (and this.draftChannelView this.expanded)}}
- <div class="topic-chat-drawer-header__left-actions">
- <div class="topic-chat-drawer-header__top-line">
- <LinkTo title={{i18n "chat.return_to_list"}} class="topic-chat-drawer-header__return-to-channels-btn" @route="chat">
- {{d-icon "chevron-left"}}
- </LinkTo>
- </div>
- </div>
-
- <span class="topic-chat-drawer-header__title">
- <div class="topic-chat-drawer-header__top-line">
- {{i18n "chat.direct_message_creator.title"}}
- </div>
- </span>
- {{else if this.chatView}}
- {{#if this.expanded}}
- <LinkTo title={{i18n "chat.return_to_list"}} class="topic-chat-drawer-header__return-to-channels-btn" @route="chat">
- {{d-icon "chevron-left"}}
- </LinkTo>
- {{/if}}
-
- {{#if this.chat.activeChannel}}
- {{#if this.expanded}}
- <LinkTo @route={{this.infoTabRoute}} @models={{array this.chat.activeChannel.id (slugify-channel this.chat.activeChannel)}} class="topic-chat-drawer-header__title">
- <div class="topic-chat-drawer-header__top-line">
- <ChatChannelTitle @channel={{this.chat.activeChannel}} />
- </div>
- </LinkTo>
- {{else}}
- <div role="button" {{on "click" (action "toggleExpand")}} class="topic-chat-drawer-header__title">
- <div class="topic-chat-drawer-header__top-line">
- <ChatChannelTitle @channel={{this.chat.activeChannel}}>
- {{#if this.unreadCount}}
- <span class="chat-unread-count">{{this.unreadCount}}</span>
- {{/if}}
- </ChatChannelTitle>
- </div>
- </div>
- {{/if}}
- {{/if}}
- {{else}}
- <span class="topic-chat-drawer-header__title">
- <div class="topic-chat-drawer-header__top-line">
- {{i18n "chat.heading"}}
- </div>
- </span>
- {{/if}}
-
- <div class="topic-chat-drawer-header__right-actions">
- <div class="topic-chat-drawer-header__top-line {{this.topLineClass}}">
- {{#if this.expanded}}
- <DButton @icon="discourse-expand" class="btn-flat btn-link topic-chat-drawer-header__full-screen-btn" @title={{"chat.open_full_page"}} @action={{this.openInFullPage}} />
- {{/if}}
-
- <FlatButton @icon={{this.expandIcon}} @class="topic-chat-drawer-header__expand-btn" @action={{action "toggleExpand"}} @title="chat.collapse" />
-
- {{#if this.showClose}}
- <FlatButton @icon="times" @action={{action "close"}} @title="chat.close" @class="topic-chat-drawer-header__close-btn" />
- {{/if}}
- </div>
- </div>
- </div>
-
- {{#if this.expanded}}
- <div class="topic-chat-drawer-content">
- {{#if (and this.chatView this.chat.activeChannel)}}
- <ChatLivePane @chatChannel={{this.chat.activeChannel}} @expanded={{this.expanded}} @floatHidden={{this.hidden}} @onSwitchChannel={{action "switchChannel"}} />
- {{else if this.draftChannelView}}
- <ChatDraftChannelScreen @onSwitchChannel={{action "switchChannel"}} />
- {{else}}
- <ChannelsList @floatHidden={{this.hidden}} @onOpenView={{action "openURL"}} @onSelect={{action "switchChannel"}} />
- {{/if}}
- </div>
- {{/if}}
- </div>
-</div>
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);
});
}
);