DEV: Plugin API addQuickAccessProfileItem adds to revamped user menu (#21084)

app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.hbs

@@ -120,6 +120,19 @@
     </li>
   {{/if}}
 
+  {{#each this.extraItems as |item|}}
+    <li class={{item.className}}>
+      <a href={{item.href}}>
+        {{#if item.icon}}
+          {{d-icon item.icon}}
+        {{/if}}
+        <span class="item-label">
+          {{item.content}}
+        </span>
+      </a>
+    </li>
+  {{/each}}
+
   <li class="logout">
     <DButton
       @class="btn-flat profile-tab-btn"

app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js

@@ -4,6 +4,16 @@ import { action } from "@ember/object";
 import showModal from "discourse/lib/show-modal";
 import DoNotDisturb from "discourse/lib/do-not-disturb";
 
+const _extraItems = [];
+
+export function addUserMenuProfileTabItem(item) {
+  _extraItems.push(item);
+}
+
+export function resetUserMenuProfileTabItems() {
+  _extraItems.clear();
+}
+
 export default class UserMenuProfileTabContent extends Component {
   @service currentUser;
   @service siteSettings;
@@ -34,6 +44,10 @@ export default class UserMenuProfileTabContent extends Component {
     );
   }
 
+  get extraItems() {
+    return _extraItems;
+  }
+
   get #doNotDisturbUntilDate() {
     if (!this.currentUser.get("do_not_disturb_until")) {
       return;

app/assets/javascripts/discourse/app/lib/plugin-api.js

@@ -72,6 +72,7 @@ import { addTopicParticipantClassesCallback } from "discourse/widgets/topic-map"
 import { addTopicSummaryCallback } from "discourse/widgets/toggle-topic-summary";
 import { addTopicTitleDecorator } from "discourse/components/topic-title";
 import { addUserMenuGlyph } from "discourse/widgets/user-menu";
+import { addUserMenuProfileTabItem } from "discourse/components/user-menu/profile-tab-content";
 import { addUsernameSelectorDecorator } from "discourse/helpers/decorate-username-selector";
 import { addWidgetCleanCallback } from "discourse/components/mount-widget";
 import deprecated from "discourse-common/lib/deprecated";
@@ -1585,6 +1586,7 @@ class PluginApi {
    **/
   addQuickAccessProfileItem(item) {
     addQuickAccessProfileItem(item);
+    addUserMenuProfileTabItem(item);
   }
 
   addFeaturedLinkMetaDecorator(decorator) {

app/assets/javascripts/discourse/app/widgets/quick-access-profile.js

@@ -12,6 +12,10 @@ export function addQuickAccessProfileItem(item) {
   _extraItems.push(item);
 }
 
+export function resetQuickAccessProfileItems() {
+  _extraItems.clear();
+}
+
 createWidgetFrom(QuickAccessItem, "logout-item", {
   tagName: "li.logout",
 

app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js

@@ -667,6 +667,49 @@ acceptance("User menu", function (needs) {
     );
   });
 
+  test("Extra items added to profile tab via plugin API are rendered properly", async function (assert) {
+    withPluginApi("0.1", (api) => {
+      api.addQuickAccessProfileItem({
+        className: "test-1-item",
+        icon: "wrench",
+        content: "test 1",
+        href: "/test_1_path",
+      });
+
+      api.addQuickAccessProfileItem({
+        className: "test-2-item",
+        content: "test 2",
+        href: "/test_2_path",
+      });
+    });
+
+    await visit("/");
+    await click(".d-header-icons .current-user");
+    await click("#user-menu-button-profile");
+
+    const item1 = query("#quick-access-profile ul li.test-1-item");
+
+    assert.ok(
+      item1.querySelector(".d-icon-wrench"),
+      "The first item's icon is rendered"
+    );
+    assert.ok(
+      item1.querySelector("a").href.endsWith("/test_1_path"),
+      "The first item's link is present with correct href"
+    );
+
+    const item2 = query("#quick-access-profile ul li.test-2-item");
+
+    assert.notOk(
+      item2.querySelector(".d-icon"),
+      "The second item doesn't have an icon"
+    );
+    assert.ok(
+      item2.querySelector("a").href.endsWith("/test_2_path"),
+      "The second item's link is present with correct href"
+    );
+  });
+
   test("the active tab can be clicked again to navigate to a page", async function (assert) {
     updateCurrentUser({ reviewable_count: 1 });
     withPluginApi("0.1", (api) => {

app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js

@@ -35,7 +35,9 @@ import { resetWidgetCleanCallbacks } from "discourse/components/mount-widget";
 import { resetUserSearchCache } from "discourse/lib/user-search";
 import { resetCardClickListenerSelector } from "discourse/mixins/card-contents-base";
 import { resetComposerCustomizations } from "discourse/models/composer";
+import { resetQuickAccessProfileItems } from "discourse/widgets/quick-access-profile";
 import { resetQuickSearchRandomTips } from "discourse/widgets/search-menu-results";
+import { resetUserMenuProfileTabItems } from "discourse/components/user-menu/profile-tab-content";
 import sessionFixtures from "discourse/tests/fixtures/session-fixtures";
 import {
   resetHighestReadCache,
@@ -179,8 +181,10 @@ export function testCleanup(container, app) {
   resetHighestReadCache();
   resetCardClickListenerSelector();
   resetComposerCustomizations();
+  resetQuickAccessProfileItems();
   resetQuickSearchRandomTips();
   resetPostMenuExtraButtons();
+  resetUserMenuProfileTabItems();
   clearExtraKeyboardShortcutHelp();
   clearNavItems();
   setTopicList(null);