From 3d5753c42b8b045eb2bfdf6d41c9dcb12cad32f1 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Mon, 14 Nov 2022 20:36:46 +1100
Subject: [PATCH] FIX: Allow sidebar links to register didInsert actions
 (#19010)

Previously `this.chatService.appEvents.on(
"chat:user-tracking-state-changed"...)` was registered on constructor and disabled on `willDestroy`. Constructor is evaluated only once, so when the section was collapsed and collapsed then the events were not observed anymore.

didInsert allows evaluating code each time a component is rendered.
---
 .../app/components/sidebar/section-link.hbs        |  2 +-
 .../app/components/sidebar/section-link.js         |  6 ++++++
 .../app/components/sidebar/user/sections.hbs       |  1 +
 .../tests/acceptance/sidebar-plugin-api-test.js    | 14 +++++++++++++-
 .../discourse/initializers/chat-sidebar.js         |  9 ++++++---
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs
index c29385e2c0c..6be1ab4512f 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs
@@ -1,5 +1,5 @@
 {{#if this.shouldDisplay}}
-  <div class="sidebar-section-link-wrapper">
+  <div class="sidebar-section-link-wrapper" {{did-insert this.didInsert this.args}}>
     {{#if @href}}
       <a href={{@href}} rel="noopener noreferrer" target="_blank" class={{this.classNames}} title={{@title}}>
         <Sidebar::SectionLinkPrefix
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
index e68e31c0d0d..620da26bd64 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
@@ -7,6 +7,12 @@ export default class SectionLink extends Component {
     }
   }
 
+  didInsert(_element, [args]) {
+    if (args.didInsert) {
+      args.didInsert();
+    }
+  }
+
   get shouldDisplay() {
     if (this.args.shouldDisplay === undefined) {
       return true;
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
index 0a47f551497..41dfff5a6da 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
@@ -43,6 +43,7 @@
           @hoverAction={{link.hoverAction}}
           @hoverTitle={{link.hoverTitle}}
           @currentWhen={{link.currentWhen}}
+          @didInsert={{link.didInsert}}
           @willDestroy={{link.willDestroy}}
           @content={{link.text}} />
       {{/each}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
index c6c79373a4e..511f6f1b297 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
@@ -19,11 +19,12 @@ acceptance("Sidebar - Plugin API", function (needs) {
   });
 
   needs.hooks.afterEach(() => {
+    linkDidInsert = undefined;
     linkDestroy = undefined;
     sectionDestroy = undefined;
   });
 
-  let linkDestroy, sectionDestroy;
+  let linkDidInsert, linkDestroy, sectionDestroy;
 
   test("Multiple header actions and links", async function (assert) {
     withPluginApi("1.3.0", (api) => {
@@ -117,6 +118,11 @@ acceptance("Sidebar - Plugin API", function (needs) {
                     return "unread";
                   }
 
+                  @bind
+                  didInsert() {
+                    linkDidInsert = "link test";
+                  }
+
                   @bind
                   willDestroy() {
                     linkDestroy = "link test";
@@ -201,6 +207,12 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     await visit("/");
 
+    assert.strictEqual(
+      linkDidInsert,
+      "link test",
+      "calls link didInsert function"
+    );
+
     assert.strictEqual(
       query(
         ".sidebar-section-test-chat-channels .sidebar-section-header-text"
diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
index 37790294a78..470e9212ea8 100644
--- a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
+++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
@@ -34,16 +34,19 @@ export default {
               super(...arguments);
               this.channel = channel;
               this.chatService = chatService;
+            }
 
-              this.chatService.appEvents.on(
+            @bind
+            willDestroy() {
+              this.chatService.appEvents.off(
                 "chat:user-tracking-state-changed",
                 this._refreshTrackingState
               );
             }
 
             @bind
-            willDestroy() {
-              this.chatService.appEvents.off(
+            didInsert() {
+              this.chatService.appEvents.on(
                 "chat:user-tracking-state-changed",
                 this._refreshTrackingState
               );