DEV: add anonymousOnly opt to registerTopicFooterButton (#25293)

Adds support to `anonymousOnly` as an option when using `registerTopicFooterButton`, rendering the buttons accordingly.
This commit is contained in:
Renato Atilio 2024-01-17 21:10:42 -03:00 committed by GitHub
parent e3f0c8682a
commit 89eae4c6e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 128 additions and 24 deletions

View File

@ -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>

View File

@ -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();
},
});

View File

@ -27,6 +27,7 @@ export default Component.extend({
function () { function () {
return this.inlineButtons return this.inlineButtons
.filterBy("dropdown", false) .filterBy("dropdown", false)
.filterBy("anonymousOnly", false)
.concat(this.inlineDropdowns) .concat(this.inlineDropdowns)
.sortBy("priority") .sortBy("priority")
.reverse(); .reverse();

View File

@ -51,6 +51,9 @@ export function registerTopicFooterButton(button) {
// display order, higher comes first // display order, higher comes first
priority: 0, priority: 0,
// is this button displayed for anonymous users ?
anonymousOnly: false,
}; };
const normalizedButton = Object.assign(defaultButton, button); const normalizedButton = Object.assign(defaultButton, button);
@ -126,6 +129,11 @@ export function getTopicFooterButtons() {
discourseComputedButton.dropdown = _compute(button, "dropdown"); discourseComputedButton.dropdown = _compute(button, "dropdown");
discourseComputedButton.priority = _compute(button, "priority"); discourseComputedButton.priority = _compute(button, "priority");
discourseComputedButton.anonymousOnly = _compute(
button,
"anonymousOnly"
);
if (_isFunction(button.action)) { if (_isFunction(button.action)) {
discourseComputedButton.action = () => button.action.apply(this); discourseComputedButton.action = () => button.action.apply(this);
} else { } else {

View File

@ -542,12 +542,7 @@
/> />
{{else}} {{else}}
<div id="topic-footer-buttons"> <div id="topic-footer-buttons">
<DButton <AnonymousTopicFooterButtons @topic={{this.model}} />
@icon="reply"
@action={{route-action "showLogin"}}
@label="topic.reply.title"
class="btn-primary"
/>
</div> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}

View File

@ -1,27 +1,82 @@
import { click, visit } from "@ember/test-helpers"; import { click, visit } from "@ember/test-helpers";
import { test } from "qunit"; import { test } from "qunit";
import { withPluginApi } from "discourse/lib/plugin-api"; 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) { acceptance(
needs.user(); "Topic - Plugin API - registerTopicFooterButton - logged in user",
function (needs) {
needs.user();
test("adds topic footer button through API", async function (assert) { test("adds topic footer button through API", async function (assert) {
const done = assert.async(); const done = assert.async();
withPluginApi("0.13.1", (api) => { withPluginApi("0.13.1", (api) => {
api.registerTopicFooterButton({ api.registerTopicFooterButton({
id: "my-button", id: "my-button",
icon: "cog", icon: "cog",
action() { action() {
assert.step("action called"); assert.step("action called");
done(); done();
}, },
});
}); });
await visit("/t/internationalization-localization/280");
await click("#topic-footer-button-my-button");
assert.verifySteps(["action called"]);
}); });
await visit("/t/internationalization-localization/280"); test("doesn't show footer button if anonymousOnly is true", async function (assert) {
await click("#topic-footer-button-my-button"); 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"));
});
}
);