From 6d126adb4f844e03659220e2b5e4747dab2b17b9 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Fri, 11 Nov 2022 10:30:10 +0000
Subject: [PATCH] DEV: Bind connector actions when made available under `this`
 (#18981)

Connector actions are already added as properties of the generated component, but they were not bound. Using them like `{{on "click" this.someAction"}}` and trying to access `this` would not work as expected. This commit binds all actions to the component generated component instance.
---
 .../discourse/app/components/plugin-connector.js         | 2 +-
 .../acceptance/plugin-outlet-connector-class-test.js     | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/plugin-connector.js b/app/assets/javascripts/discourse/app/components/plugin-connector.js
index abf6d89f119..22f5252e053 100644
--- a/app/assets/javascripts/discourse/app/components/plugin-connector.js
+++ b/app/assets/javascripts/discourse/app/components/plugin-connector.js
@@ -51,7 +51,7 @@ export default Component.extend({
     this.set("actions", connectorClass.actions);
 
     for (const [name, action] of Object.entries(this.actions)) {
-      this.set(name, action);
+      this.set(name, action.bind(this));
     }
 
     const merged = buildArgsWithDeprecations(args, deprecatedArgs);
diff --git a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-connector-class-test.js b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-connector-class-test.js
index 19e6c5d4015..712a07fa13d 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-connector-class-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-connector-class-test.js
@@ -18,7 +18,7 @@ acceptance("Plugin Outlet - Connector Class", function (needs) {
     extraConnectorClass("user-profile-primary/hello", {
       actions: {
         sayHello() {
-          this.set("hello", "hello!");
+          this.set("hello", `${this.hello || ""}hello!`);
         },
       },
     });
@@ -53,6 +53,7 @@ acceptance("Plugin Outlet - Connector Class", function (needs) {
       `${PREFIX}/user-profile-primary/hello`
     ] = hbs`<span class='hello-username'>{{model.username}}</span>
         <button class='say-hello' {{on "click" (action "sayHello")}}></button>
+        <button class='say-hello-using-this' {{on "click" this.sayHello}}></button>
         <span class='hello-result'>{{hello}}</span>`;
     Ember.TEMPLATES[
       `${PREFIX}/user-profile-primary/hi`
@@ -87,6 +88,12 @@ acceptance("Plugin Outlet - Connector Class", function (needs) {
       "hello!",
       "actions delegate properly"
     );
+    await click(".say-hello-using-this");
+    assert.strictEqual(
+      query(".hello-result").innerText,
+      "hello!hello!",
+      "actions are made available on `this` and are bound correctly"
+    );
 
     await click(".say-hi");
     assert.strictEqual(