From 89eae4c6e3644c839d937d71c814aa539964ce76 Mon Sep 17 00:00:00 2001
From: Renato Atilio <renato@discourse.org>
Date: Wed, 17 Jan 2024 21:10:42 -0300
Subject: [PATCH] DEV: add anonymousOnly opt to registerTopicFooterButton
 (#25293)

Adds support to `anonymousOnly` as an option when using `registerTopicFooterButton`, rendering the buttons accordingly.
---
 .../anonymous-topic-footer-buttons.hbs        | 24 +++++
 .../anonymous-topic-footer-buttons.js         | 21 +++++
 .../app/components/topic-footer-buttons.js    |  1 +
 .../app/lib/register-topic-footer-button.js   |  8 ++
 .../discourse/app/templates/topic.hbs         |  7 +-
 .../topic-footer-button-api-test.js           | 91 +++++++++++++++----
 6 files changed, 128 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/anonymous-topic-footer-buttons.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/anonymous-topic-footer-buttons.js

diff --git a/app/assets/javascripts/discourse/app/components/anonymous-topic-footer-buttons.hbs b/app/assets/javascripts/discourse/app/components/anonymous-topic-footer-buttons.hbs
new file mode 100644
index 00000000000..79c32e97f75
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/anonymous-topic-footer-buttons.hbs
@@ -0,0 +1,24 @@
+<div class="topic-footer-main-buttons">
+  {{#each this.buttons as |button|}}
+    <DButton
+      @action={{button.action}}
+      @icon={{button.icon}}
+      @translatedLabel={{button.label}}
+      @translatedTitle={{button.title}}
+      @translatedAriaLabel={{button.ariaLabel}}
+      @disabled={{button.disabled}}
+      id={{concat "topic-footer-button-" button.id}}
+      class={{concatClass
+        "btn-default"
+        "topic-footer-button"
+        button.classNames
+      }}
+    />
+  {{/each}}
+  <DButton
+    @icon="reply"
+    @action={{route-action "showLogin"}}
+    @label="topic.reply.title"
+    class="btn-primary"
+  />
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/anonymous-topic-footer-buttons.js b/app/assets/javascripts/discourse/app/components/anonymous-topic-footer-buttons.js
new file mode 100644
index 00000000000..40633df2881
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/anonymous-topic-footer-buttons.js
@@ -0,0 +1,21 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { getTopicFooterButtons } from "discourse/lib/register-topic-footer-button";
+
+export default Component.extend({
+  elementId: "topic-footer-buttons",
+
+  attributeBindings: ["role"],
+
+  role: "region",
+
+  allButtons: getTopicFooterButtons(),
+
+  @computed("allButtons.[]")
+  get buttons() {
+    return this.allButtons
+      .filterBy("anonymousOnly", true)
+      .sortBy("priority")
+      .reverse();
+  },
+});
diff --git a/app/assets/javascripts/discourse/app/components/topic-footer-buttons.js b/app/assets/javascripts/discourse/app/components/topic-footer-buttons.js
index c7ea827ec1d..3226581fee8 100644
--- a/app/assets/javascripts/discourse/app/components/topic-footer-buttons.js
+++ b/app/assets/javascripts/discourse/app/components/topic-footer-buttons.js
@@ -27,6 +27,7 @@ export default Component.extend({
     function () {
       return this.inlineButtons
         .filterBy("dropdown", false)
+        .filterBy("anonymousOnly", false)
         .concat(this.inlineDropdowns)
         .sortBy("priority")
         .reverse();
diff --git a/app/assets/javascripts/discourse/app/lib/register-topic-footer-button.js b/app/assets/javascripts/discourse/app/lib/register-topic-footer-button.js
index e16f7960d48..dee2a712e94 100644
--- a/app/assets/javascripts/discourse/app/lib/register-topic-footer-button.js
+++ b/app/assets/javascripts/discourse/app/lib/register-topic-footer-button.js
@@ -51,6 +51,9 @@ export function registerTopicFooterButton(button) {
 
     // display order, higher comes first
     priority: 0,
+
+    // is this button displayed for anonymous users ?
+    anonymousOnly: false,
   };
 
   const normalizedButton = Object.assign(defaultButton, button);
@@ -126,6 +129,11 @@ export function getTopicFooterButtons() {
           discourseComputedButton.dropdown = _compute(button, "dropdown");
           discourseComputedButton.priority = _compute(button, "priority");
 
+          discourseComputedButton.anonymousOnly = _compute(
+            button,
+            "anonymousOnly"
+          );
+
           if (_isFunction(button.action)) {
             discourseComputedButton.action = () => button.action.apply(this);
           } else {
diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs
index fb8aa188ce2..7a025c49098 100644
--- a/app/assets/javascripts/discourse/app/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/topic.hbs
@@ -542,12 +542,7 @@
           />
         {{else}}
           <div id="topic-footer-buttons">
-            <DButton
-              @icon="reply"
-              @action={{route-action "showLogin"}}
-              @label="topic.reply.title"
-              class="btn-primary"
-            />
+            <AnonymousTopicFooterButtons @topic={{this.model}} />
           </div>
         {{/if}}
       {{/if}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-footer-button-api-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-footer-button-api-test.js
index c17a82cb63c..7bdbb5c1d9a 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/topic-footer-button-api-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/topic-footer-button-api-test.js
@@ -1,27 +1,82 @@
 import { click, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import { withPluginApi } from "discourse/lib/plugin-api";
-import { acceptance } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
 
-acceptance("Topic - Plugin API - registerTopicFooterButton", function (needs) {
-  needs.user();
+acceptance(
+  "Topic - Plugin API - registerTopicFooterButton - logged in user",
+  function (needs) {
+    needs.user();
 
-  test("adds topic footer button through API", async function (assert) {
-    const done = assert.async();
-    withPluginApi("0.13.1", (api) => {
-      api.registerTopicFooterButton({
-        id: "my-button",
-        icon: "cog",
-        action() {
-          assert.step("action called");
-          done();
-        },
+    test("adds topic footer button through API", async function (assert) {
+      const done = assert.async();
+      withPluginApi("0.13.1", (api) => {
+        api.registerTopicFooterButton({
+          id: "my-button",
+          icon: "cog",
+          action() {
+            assert.step("action called");
+            done();
+          },
+        });
       });
+
+      await visit("/t/internationalization-localization/280");
+      await click("#topic-footer-button-my-button");
+
+      assert.verifySteps(["action called"]);
     });
 
-    await visit("/t/internationalization-localization/280");
-    await click("#topic-footer-button-my-button");
+    test("doesn't show footer button if anonymousOnly is true", async function (assert) {
+      withPluginApi("0.13.1", (api) => {
+        api.registerTopicFooterButton({
+          id: "my-button",
+          icon: "cog",
+          action() {},
+          anonymousOnly: true,
+        });
+      });
 
-    assert.verifySteps(["action called"]);
-  });
-});
+      await visit("/t/internationalization-localization/280");
+      assert.ok(!exists("#topic-footer-button-my-button"));
+    });
+  }
+);
+
+acceptance(
+  "Topic - Plugin API - registerTopicFooterButton - anonymous",
+  function () {
+    test("adds topic footer button through API", async function (assert) {
+      const done = assert.async();
+      withPluginApi("0.13.1", (api) => {
+        api.registerTopicFooterButton({
+          id: "my-button",
+          icon: "cog",
+          action() {
+            assert.step("action called");
+            done();
+          },
+          anonymousOnly: true,
+        });
+      });
+
+      await visit("/t/internationalization-localization/280");
+      await click("#topic-footer-button-my-button");
+
+      assert.verifySteps(["action called"]);
+    });
+
+    test("doesn't show footer button if anonymousOnly is false/unset", async function (assert) {
+      withPluginApi("0.13.1", (api) => {
+        api.registerTopicFooterButton({
+          id: "my-button",
+          icon: "cog",
+          action() {},
+        });
+      });
+
+      await visit("/t/internationalization-localization/280");
+      assert.ok(!exists("#topic-footer-button-my-button"));
+    });
+  }
+);