From b89df3ca9dd3db0d6bc100ffbf5f65549d935196 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 7 Feb 2023 13:59:32 +0100
Subject: [PATCH] DEV: refactors routes to simplify using outlet (#20179)

This work will allow us to have an {{outlet}} chat.channel route and use it for threads as a sidepanel.
---
 .../javascripts/discourse/chat-route-map.js   | 11 +++--
 .../components/chat-channel-card.hbs          |  2 +-
 .../discourse/components/chat-channel-row.hbs |  2 +-
 .../discourse/components/chat-drawer.js       |  4 +-
 .../discourse/components/chat-live-pane.hbs   |  2 +-
 .../discourse/components/chat-live-pane.js    |  3 +-
 .../discourse/components/full-page-chat.hbs   |  1 +
 .../discourse/controllers/chat-channel.js     |  2 +
 .../discourse/initializers/chat-sidebar.js    |  4 +-
 .../routes/chat-channel-decorator.js          | 42 +++++++++++++++++++
 .../routes/chat-channel-from-params.js        | 18 --------
 .../discourse/routes/chat-channel-info.js     |  2 +
 .../discourse/routes/chat-channel-legacy.js   | 11 ++---
 .../routes/chat-channel-near-message.js       | 37 +++-------------
 .../discourse/routes/chat-channel.js          | 28 ++-----------
 .../javascripts/discourse/routes/chat.js      |  2 +-
 .../javascripts/discourse/services/chat.js    |  7 +---
 .../templates/chat-channel-from-params.hbs    |  1 -
 .../discourse/templates/chat-channel-info.hbs |  2 +-
 .../discourse/templates/chat-channel.hbs      |  2 +-
 20 files changed, 80 insertions(+), 103 deletions(-)
 create mode 100644 plugins/chat/assets/javascripts/discourse/routes/chat-channel-decorator.js
 delete mode 100644 plugins/chat/assets/javascripts/discourse/routes/chat-channel-from-params.js
 delete mode 100644 plugins/chat/assets/javascripts/discourse/templates/chat-channel-from-params.hbs

diff --git a/plugins/chat/assets/javascripts/discourse/chat-route-map.js b/plugins/chat/assets/javascripts/discourse/chat-route-map.js
index d303778eae..a005be2715 100644
--- a/plugins/chat/assets/javascripts/discourse/chat-route-map.js
+++ b/plugins/chat/assets/javascripts/discourse/chat-route-map.js
@@ -6,15 +6,18 @@ export default function () {
     });
 
     this.route("channel", { path: "/c/:channelTitle/:channelId" }, function () {
-      this.route("from-params", { path: "/" });
       this.route("near-message", { path: "/:messageId" });
+    });
 
-      this.route("info", { path: "/info" }, function () {
+    this.route(
+      "channel.info",
+      { path: "/c/:channelTitle/:channelId/info" },
+      function () {
         this.route("about", { path: "/about" });
         this.route("members", { path: "/members" });
         this.route("settings", { path: "/settings" });
-      });
-    });
+      }
+    );
 
     this.route("draft-channel", { path: "/draft-channel" });
     this.route("browse", { path: "/browse" }, function () {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-card.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-card.hbs
index 0bc79af6c6..a7c4b39bb4 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-card.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-card.hbs
@@ -10,7 +10,7 @@
   >
     <div class="chat-channel-card__header">
       <LinkTo
-        @route="chat.channel.from-params"
+        @route="chat.channel"
         @models={{@channel.routeModels}}
         class="chat-channel-card__name-container"
       >
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-row.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-row.hbs
index 07d94994d7..3d1e442ae8 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-row.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-row.hbs
@@ -1,5 +1,5 @@
 <LinkTo
-  @route="chat.channel.from-params"
+  @route="chat.channel"
   @models={{@channel.routeModels}}
   class={{concat-class
     "chat-channel-row"
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
index ee4734d834..37c970688d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
@@ -236,9 +236,9 @@ export default Component.extend({
         this.set("view", DRAFT_CHANNEL_VIEW);
         this.appEvents.trigger("chat:float-toggled", false);
         return;
-      case "chat.channel.from-params":
+      case "chat.channel":
         return this._openChannel(
-          route.parent.params.channelId,
+          route.params.channelId,
           this._highlightCb(route.queryParams.messageId)
         );
       case "chat.channel.near-message":
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
index c979299974..972814fd1a 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
@@ -15,7 +15,7 @@
       {{/if}}
 
       <LinkTo
-        @route={{this.infoTabRoute}}
+        @route="chat.channel.info"
         @models={{this.chatChannel.routeModels}}
         class="chat-channel-title-wrapper"
       >
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 9fb539a0ea..fd5502163c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js
@@ -574,6 +574,8 @@ export default Component.extend({
       return;
     }
 
+    this.set("targetMessageId", messageId);
+
     if (this.messageLookup[messageId]) {
       // We have the message rendered. highlight and scrollTo
       this.scrollToMessage(messageId, {
@@ -582,7 +584,6 @@ export default Component.extend({
         autoExpand: true,
       });
     } else {
-      this.set("targetMessageId", messageId);
       this.fetchMessages(this.chatChannel);
     }
   },
diff --git a/plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs b/plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs
index eb443dabcd..eeb9687dff 100644
--- a/plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs
@@ -3,5 +3,6 @@
     @chatChannel={{this.chat.activeChannel}}
     @onBackClick={{action "navigateToIndex"}}
     @onSwitchChannel={{action "switchChannel"}}
+    @targetMessageId={{readonly @targetMessageId}}
   />
 {{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js
index 0e4cade32a..a92a3a2e4f 100644
--- a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js
+++ b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js
@@ -5,6 +5,8 @@ import { inject as service } from "@ember/service";
 export default class ChatChannelController extends Controller {
   @service chat;
 
+  targetMessageId = null;
+
   // Backwards-compatibility
   queryParams = ["messageId"];
 
diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
index 6098649435..1cb408dbab 100644
--- a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
+++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
@@ -52,7 +52,7 @@ export default {
             }
 
             get route() {
-              return "chat.channel.from-params";
+              return "chat.channel";
             }
 
             get models() {
@@ -215,7 +215,7 @@ export default {
             }
 
             get route() {
-              return "chat.channel.from-params";
+              return "chat.channel";
             }
 
             get models() {
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-decorator.js b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-decorator.js
new file mode 100644
index 0000000000..e502e9c1e3
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-decorator.js
@@ -0,0 +1,42 @@
+import { inject as service } from "@ember/service";
+
+export default function withChatChannel(extendedClass) {
+  return class WithChatChannel extends extendedClass {
+    @service chatChannelsManager;
+    @service chat;
+    @service router;
+
+    async model(params) {
+      return this.chatChannelsManager.find(params.channelId);
+    }
+
+    afterModel(model) {
+      this.controllerFor("chat-channel").set("targetMessageId", null);
+      this.chat.setActiveChannel(model);
+
+      let { messageId } = this.paramsFor(this.routeName);
+      // messageId query param backwards-compatibility
+      if (messageId) {
+        this.router.replaceWith(
+          "chat.channel",
+          ...model.routeModels,
+          messageId
+        );
+      }
+
+      const { channelTitle } = this.paramsFor("chat.channel");
+      if (channelTitle && channelTitle !== model.slugifiedTitle) {
+        const nearMessageParams = this.paramsFor("chat.channel.near-message");
+        if (nearMessageParams.messageId) {
+          this.router.replaceWith(
+            "chat.channel.near-message",
+            ...model.routeModels,
+            nearMessageParams.messageId
+          );
+        } else {
+          this.router.replaceWith("chat.channel", ...model.routeModels);
+        }
+      }
+    }
+  };
+}
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-from-params.js b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-from-params.js
deleted file mode 100644
index 134c7f14b1..0000000000
--- a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-from-params.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import DiscourseRoute from "discourse/routes/discourse";
-import { inject as service } from "@ember/service";
-
-export default class ChatChannelFromParamsRoute extends DiscourseRoute {
-  @service router;
-
-  async model() {
-    return this.modelFor("chat-channel");
-  }
-
-  afterModel(model) {
-    const { channelTitle } = this.paramsFor("chat.channel");
-
-    if (channelTitle !== model.slugifiedTitle) {
-      this.router.replaceWith("chat.channel.from-params", ...model.routeModels);
-    }
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-info.js b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-info.js
index 3a167c4890..82e0417a23 100644
--- a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-info.js
+++ b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-info.js
@@ -1,7 +1,9 @@
 import DiscourseRoute from "discourse/routes/discourse";
 import { inject as service } from "@ember/service";
 import { ORIGINS } from "discourse/plugins/chat/discourse/services/chat-channel-info-route-origin-manager";
+import withChatChannel from "./chat-channel-decorator";
 
+@withChatChannel
 export default class ChatChannelInfoRoute extends DiscourseRoute {
   @service chatChannelInfoRouteOriginManager;
 
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-legacy.js b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-legacy.js
index b256fc639d..29c5104d18 100644
--- a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-legacy.js
+++ b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-legacy.js
@@ -9,13 +9,8 @@ export default class ChatChannelLegacyRoute extends DiscourseRoute {
       this.routeName
     );
 
-    this.router.replaceWith(
-      "chat.channel.from-params",
-      channelTitle,
-      channelId,
-      {
-        queryParams: { messageId },
-      }
-    );
+    this.router.replaceWith("chat.channel", channelTitle, channelId, {
+      queryParams: { messageId },
+    });
   }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-near-message.js b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-near-message.js
index b400a7fb13..1b02c0ebcc 100644
--- a/plugins/chat/assets/javascripts/discourse/routes/chat-channel-near-message.js
+++ b/plugins/chat/assets/javascripts/discourse/routes/chat-channel-near-message.js
@@ -1,41 +1,16 @@
 import DiscourseRoute from "discourse/routes/discourse";
 import { inject as service } from "@ember/service";
-import { action } from "@ember/object";
-import { schedule } from "@ember/runloop";
 
+// This route is only here as a convience method for a clean `/c/:channelTitle/:channelId/:messageId` URL.
+// It's not a real route, it just redirects to the real route after setting a param on the controller.
 export default class ChatChannelNearMessage extends DiscourseRoute {
-  @service chat;
   @service router;
 
-  async model() {
-    return this.modelFor("chat-channel");
-  }
-
-  afterModel(model) {
+  beforeModel() {
+    const channel = this.modelFor("chat-channel");
     const { messageId } = this.paramsFor(this.routeName);
-    const { channelTitle } = this.paramsFor("chat.channel");
-
-    if (channelTitle !== model.slugifiedTitle) {
-      this.router.replaceWith(
-        "chat.channel.near-message",
-        ...model.routeModels,
-        messageId
-      );
-    }
-  }
-
-  @action
-  didTransition() {
     this.controllerFor("chat-channel").set("messageId", null);
-
-    const { messageId } = this.paramsFor(this.routeName);
-    const { channelId } = this.paramsFor("chat.channel");
-
-    if (channelId && messageId) {
-      schedule("afterRender", () => {
-        this.chat.openChannelAtMessage(channelId, messageId);
-      });
-    }
-    return true;
+    this.controllerFor("chat-channel").set("targetMessageId", messageId);
+    this.router.replaceWith("chat.channel", ...channel.routeModels);
   }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat-channel.js b/plugins/chat/assets/javascripts/discourse/routes/chat-channel.js
index daacc3bb74..96658d1ada 100644
--- a/plugins/chat/assets/javascripts/discourse/routes/chat-channel.js
+++ b/plugins/chat/assets/javascripts/discourse/routes/chat-channel.js
@@ -1,27 +1,5 @@
 import DiscourseRoute from "discourse/routes/discourse";
-import { inject as service } from "@ember/service";
+import withChatChannel from "./chat-channel-decorator";
 
-export default class ChatChannelRoute extends DiscourseRoute {
-  @service chatChannelsManager;
-  @service chat;
-  @service router;
-
-  async model(params) {
-    return this.chatChannelsManager.find(params.channelId);
-  }
-
-  afterModel(model) {
-    this.chat.setActiveChannel(model);
-
-    const { messageId } = this.paramsFor(this.routeName);
-
-    // messageId query param backwards-compatibility
-    if (messageId) {
-      this.router.replaceWith(
-        "chat.channel.near-message",
-        ...model.routeModels,
-        messageId
-      );
-    }
-  }
-}
+@withChatChannel
+export default class ChatChannelRoute extends DiscourseRoute {}
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat.js b/plugins/chat/assets/javascripts/discourse/routes/chat.js
index aa8dde44a3..5c3fc64bbe 100644
--- a/plugins/chat/assets/javascripts/discourse/routes/chat.js
+++ b/plugins/chat/assets/javascripts/discourse/routes/chat.js
@@ -22,7 +22,7 @@ export default class ChatRoute extends DiscourseRoute {
 
     const INTERCEPTABLE_ROUTES = [
       "chat.channel",
-      "chat.channel.from-params",
+      "chat.channel.index",
       "chat.channel.near-message",
       "chat.channel-legacy",
       "chat",
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat.js b/plugins/chat/assets/javascripts/discourse/services/chat.js
index 0cdde90a6a..0a400048ac 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat.js
@@ -277,7 +277,7 @@ export default class Chat extends Service {
 
   async _openFoundChannelAtMessage(channel, messageId = null) {
     if (
-      (this.router.currentRouteName === "chat.channel.from-params" ||
+      (this.router.currentRouteName === "chat.channel" ||
         this.router.currentRouteName === "chat.channel.near-message") &&
       this.activeChannel?.id === channel.id
     ) {
@@ -300,10 +300,7 @@ export default class Chat extends Service {
           messageId
         );
       } else {
-        return this.router.transitionTo(
-          "chat.channel.from-params",
-          ...channel.routeModels
-        );
+        return this.router.transitionTo("chat.channel", ...channel.routeModels);
       }
     } else {
       this._fireOpenFloatAppEvent(channel, messageId);
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-channel-from-params.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-channel-from-params.hbs
deleted file mode 100644
index d0459c0e1c..0000000000
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-channel-from-params.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<FullPageChat />
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-channel-info.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-channel-info.hbs
index 86979de4d2..e390f0a194 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-channel-info.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-channel-info.hbs
@@ -12,7 +12,7 @@
           </LinkTo>
         {{else}}
           <LinkTo
-            @route="chat.channel.from-params"
+            @route="chat.channel"
             @models={{this.model.routeModels}}
             class="chat-full-page-header__back-btn no-text btn-flat btn"
             title={{i18n "chat.channel_info.back_to_channel"}}
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-channel.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-channel.hbs
index e2147cab02..27155a709e 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-channel.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-channel.hbs
@@ -1 +1 @@
-{{outlet}}
\ No newline at end of file
+<FullPageChat @targetMessageId={{this.targetMessageId}} />
\ No newline at end of file