DEV: separates preferred-chat-mode service (#18883)

Also adds end to end system tests to ensure navigation scenarios are working correctly. This separation will make it easier to implement state in/out from chat.

plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js

@@ -74,6 +74,7 @@ export default Component.extend({
   router: service(),
   chatEmojiPickerManager: service(),
   chatComposerPresenceManager: service(),
+  chatPreferredMode: service(),
   fullPageChat: service(),
 
   getCachedChannelDetails: null,
@@ -1265,7 +1266,7 @@ export default Component.extend({
 
   @action
   onCloseFullScreen(channel) {
-    this.fullPageChat.isPreferred = false;
+    this.chatPreferredMode.setDrawer();
     this.appEvents.trigger("chat:open-channel", channel);
 
     const previousRouteInfo = this.fullPageChat.exit();

plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js

@@ -18,7 +18,7 @@ export default Component.extend({
   classNameBindings: [":topic-chat-float-container", "hidden"],
   chat: service(),
   router: service(),
-  fullPageChat: service(),
+  chatPreferredMode: service(),
   hidden: true,
   loading: false,
   expanded: true, // TODO - false when not first-load topic
@@ -237,12 +237,12 @@ export default Component.extend({
 
   @action
   openInFullPage(e) {
-    const channel = this.chat.activeChannel;
+    this.chatPreferredMode.setFullPage();
 
+    const channel = this.chat.activeChannel;
     this.set("expanded", false);
     this.set("hidden", true);
     this.chat.setActiveChannel(null);
-    this.fullPageChat.isPreferred = true;
 
     if (!channel) {
       return this.router.transitionTo("chat");

plugins/chat/assets/javascripts/discourse/services/chat-preferred-mode.js

@@ -0,0 +1,35 @@
+import KeyValueStore from "discourse/lib/key-value-store";
+import Service from "@ember/service";
+import Site from "discourse/models/site";
+
+const PREFERRED_MODE_KEY = "preferred_mode";
+const PREFERRED_MODE_STORE_NAMESPACE = "discourse_chat_";
+const FULL_PAGE_CHAT = "FULL_PAGE_CHAT";
+const DRAWER_CHAT = "DRAWER_CHAT";
+
+export default class ChatPreferredMode extends Service {
+  _store = new KeyValueStore(PREFERRED_MODE_STORE_NAMESPACE);
+
+  setFullPage() {
+    this._store.setObject({ key: PREFERRED_MODE_KEY, value: FULL_PAGE_CHAT });
+  }
+
+  setDrawer() {
+    this._store.setObject({ key: PREFERRED_MODE_KEY, value: DRAWER_CHAT });
+  }
+
+  get isFullPage() {
+    return !!(
+      Site.currentProp("mobileView") ||
+      this._store.getObject(PREFERRED_MODE_KEY) === FULL_PAGE_CHAT
+    );
+  }
+
+  get isDrawer() {
+    return !!(
+      !Site.currentProp("mobileView") &&
+      (!this._store.getObject(PREFERRED_MODE_KEY) ||
+        this._store.getObject(PREFERRED_MODE_KEY) === DRAWER_CHAT)
+    );
+  }
+}

plugins/chat/assets/javascripts/discourse/services/chat.js

@@ -35,6 +35,7 @@ const READ_INTERVAL = 1000;
 export default class Chat extends Service {
   @service appEvents;
   @service chatNotificationManager;
+  @service chatPreferredMode;
   @service fullPageChat;
   @service presence;
   @service router;
@@ -527,7 +528,7 @@ export default class Chat extends Service {
     if (
       this.fullPageChat.isActive ||
       this.site.mobileView ||
-      this.fullPageChat.isPreferred
+      this.chatPreferredMode.isFullPage
     ) {
       const queryParams = messageId ? { messageId } : {};
 

plugins/chat/assets/javascripts/discourse/services/full-page-chat.js

@@ -1,11 +1,6 @@
-import KeyValueStore from "discourse/lib/key-value-store";
 import Service from "@ember/service";
 
-const FULL_PAGE = "fullPage";
-const STORE_NAMESPACE_CHAT_WINDOW = "discourse_chat_window_";
-
 export default class FullPageChat extends Service {
-  store = new KeyValueStore(STORE_NAMESPACE_CHAT_WINDOW);
   _previousRouteInfo = null;
   _isActive = false;
 
@@ -22,12 +17,4 @@ export default class FullPageChat extends Service {
   get isActive() {
     return this._isActive;
   }
-
-  get isPreferred() {
-    return !!this.store.getObject(FULL_PAGE);
-  }
-
-  set isPreferred(value) {
-    this.store.setObject({ key: FULL_PAGE, value });
-  }
 }

plugins/chat/assets/javascripts/discourse/widgets/chat-header-icon.js

@@ -8,7 +8,7 @@ export default createWidget("header-chat-link", {
   chat: null,
   tagName: "li.header-dropdown-toggle.open-chat",
   title: "chat.title",
-  services: ["chat", "router", "fullPageChat"],
+  services: ["chat", "router", "chatPreferredMode", "fullPageChat"],
 
   html() {
     if (!this.chat.userCanChat) {
@@ -68,9 +68,9 @@ export default createWidget("header-chat-link", {
     if (
       this.chat.sidebarActive ||
       this.site.mobileView ||
-      this.fullPageChat.isPreferred
+      this.chatPreferredMode.isFullPage
     ) {
-      this.fullPageChat.isPreferred = true;
+      this.chatPreferredMode.setFullPage();
       return this.router.transitionTo("chat");
     } else {
       this.appEvents.trigger("chat:toggle-open");