From 0bff95fcad88cd307de92852ddd35bc2a3add62b Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Fri, 26 May 2023 17:46:33 +0900 Subject: [PATCH] DEV: Support custom icon when adding custom link to sidebar via plugin API (#21760) --- .../javascripts/discourse/app/lib/plugin-api.js | 7 ++++--- .../lib/sidebar/custom-community-section-links.js | 11 ++++++++--- .../sidebar-user-community-section-test.js | 15 +++++++++++++++ 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/discourse/app/lib/plugin-api.js b/app/assets/javascripts/discourse/app/lib/plugin-api.js index 24d79e08c1c..a43744bffbc 100644 --- a/app/assets/javascripts/discourse/app/lib/plugin-api.js +++ b/app/assets/javascripts/discourse/app/lib/plugin-api.js @@ -1848,10 +1848,11 @@ class PluginApi { * * @param {(addCommunitySectionLinkCallback|Object)} arg - A callback function or an Object. * @param {string} arg.name - The name of the link. Needs to be dasherized and lowercase. - * @param {string=} arg.route - The Ember route name to generate the href attribute for the link. - * @param {string=} arg.href - The href attribute for the link. * @param {string} arg.title - The title attribute for the link. * @param {string} arg.text - The text to display for the link. + * @param {string} [arg.route] - The Ember route name to generate the href attribute for the link. + * @param {string} [arg.href] - The href attribute for the link. + * @param {string} [arg.icon] - The FontAwesome icon to display for the link. * @param {Boolean} [secondary] - Determines whether the section link should be added to the main or secondary section in the "More..." links drawer. */ addCommunitySectionLink(arg, secondary) { @@ -1904,7 +1905,7 @@ class PluginApi { * @param {Object} arg - An object * @param {string} arg.badgeTextFunction - Function used to generate the text for the badge displayed in the section link. * @param {string} arg.route - The Ember route name to generate the href attribute for the link. - * @param {Object=} arg.routeQuery - Object representing the query params that should be appended to the route generated. + * @param {Object} [arg.routeQuery] - Object representing the query params that should be appended to the route generated. * @param {shouldRegister} arg.shouldRegister - Function used to determine if the countable should be registered for the category. * @param {refreshCountFunction} arg.refreshCountFunction - Function used to calculate the value used to set the property for the count whenever the sidebar section link refreshes. * @param {prioritizeOverDefaults} args.prioritizeOverDefaults - Function used to determine whether the countable should be prioritized over the default countables of unread/new. diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/custom-community-section-links.js b/app/assets/javascripts/discourse/app/lib/sidebar/custom-community-section-links.js index 7e2e39d65a8..6d29113823e 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/custom-community-section-links.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/custom-community-section-links.js @@ -13,10 +13,11 @@ export let secondaryCustomSectionLinks = []; * * @param {(addSectionLinkCallback|Object)} args - A callback function or an Object. * @param {string} args.name - The name of the link. Needs to be dasherized and lowercase. - * @param {string=} args.route - The Ember route name to generate the href attribute for the link. - * @param {string=} args.href - The href attribute for the link. - * @param {string=} args.title - The title attribute for the link. * @param {string} args.text - The text to display for the link. + * @param {string} [args.route] - The Ember route name to generate the href attribute for the link. + * @param {string} [args.href] - The href attribute for the link. + * @param {string} [args.title] - The title attribute for the link. + * @param {string} [args.icon] - The FontAwesome 5 icon to display for the link. * @param {Boolean} [secondary] - Determines whether the section link should be added to the main or secondary section in the "More..." links drawer. */ export function addSectionLink(args, secondary) { @@ -65,6 +66,10 @@ export function addSectionLink(args, secondary) { get title() { return args.title; } + + get prefixValue() { + return args.icon || super.prefixValue; + } }; links.push(klass); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js index ed06c6dac5d..cd32940cfc9 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js @@ -1065,6 +1065,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) { route: "discovery.unread", text: "unread topics", title: "List of unread topics", + icon: "wrench", }); }); @@ -1088,6 +1089,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) { "displays the right title for the link" ); + assert.ok( + exists( + ".sidebar-section-link[data-link-name='unread'] .sidebar-section-link-prefix.icon .d-icon-wrench" + ), + "displays the wrench icon for the link" + ); + await click(".sidebar-section-link[data-link-name='unread']"); assert.strictEqual(currentURL(), "/unread", "links to the right URL"); @@ -1154,6 +1162,13 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) { "displays the right title for the link" ); + assert.ok( + exists( + ".sidebar-section-link[data-link-name='user-summary'] .sidebar-section-link-prefix.icon .d-icon-link" + ), + "displays the link icon for the link" + ); + await click(".btn-sidebar-toggle"); assert.ok(teardownCalled, "section link teardown callback was called");