DEV: Add setUserMenuNotificationsLimit plugin-api method (#25119)

app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js

@@ -13,6 +13,22 @@ import Notification from "discourse/models/notification";
 import UserMenuReviewable from "discourse/models/user-menu-reviewable";
 import I18n from "discourse-i18n";
 
+const MAX_LIMIT = 60;
+const DEFAULT_LIMIT = 30;
+let limit = DEFAULT_LIMIT;
+
+export function setNotificationsLimit(newLimit) {
+  if (newLimit <= 0 || newLimit > MAX_LIMIT) {
+    // eslint-disable-next-line no-console
+    console.error(
+      `Error: Invalid limit of ${newLimit} passed to setNotificationsLimit. Must be greater than 0 and less than ${MAX_LIMIT}`
+    );
+    return;
+  }
+
+  limit = newLimit;
+}
+
 export default class UserMenuNotificationsList extends UserMenuItemsList {
   @service appEvents;
   @service currentUser;
@@ -82,7 +98,7 @@ export default class UserMenuNotificationsList extends UserMenuItemsList {
 
   async fetchItems() {
     const params = {
-      limit: 30,
+      limit,
       recent: true,
       bump_last_seen_reviewable: true,
     };

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

@@ -28,6 +28,7 @@ import { REFRESH_COUNTS_APP_EVENT_NAME as REFRESH_USER_SIDEBAR_CATEGORIES_SECTIO
 import { forceDropdownForMenuPanels } from "discourse/components/site-header";
 import { setDesktopScrollAreaHeight } from "discourse/components/topic-timeline/container";
 import { addTopicTitleDecorator } from "discourse/components/topic-title";
+import { setNotificationsLimit as setUserMenuNotificationsLimit } from "discourse/components/user-menu/notifications-list";
 import { addUserMenuProfileTabItem } from "discourse/components/user-menu/profile-tab-content";
 import { addDiscoveryQueryParam } from "discourse/controllers/discovery/list";
 import { registerFullPageSearchType } from "discourse/controllers/full-page-search";
@@ -144,7 +145,7 @@ import { modifySelectKit } from "select-kit/mixins/plugin-api";
 // docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md whenever you change the version
 // using the format described at https://keepachangelog.com/en/1.0.0/.
 
-export const PLUGIN_API_VERSION = "1.22.0";
+export const PLUGIN_API_VERSION = "1.23.0";
 
 // This helper prevents us from applying the same `modifyClass` over and over in test mode.
 function canModify(klass, type, resolverName, changes) {
@@ -1684,6 +1685,17 @@ class PluginApi {
     addTopicTitleDecorator(callback);
   }
 
+  /**
+   * Allows a different limit to be set for fetching recent notifications for the user menu
+   *
+   * Example setting limit to 5:
+   * api.setUserMenuNotificationsLimit(5);
+   *
+   **/
+  setUserMenuNotificationsLimit(limit) {
+    setUserMenuNotificationsLimit(limit);
+  }
+
   /**
    * Allows adding icons to the category-link html
    *

docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md

@@ -7,6 +7,12 @@ in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.22.0] - 2024-01-03
+
+### Added
+
+- Added `setUserMenuNotificationsLimit` function which is used to specify a new limit for the notifications query when the user menu is opened.
+
 ## [1.21.0] - 2023-12-22
 
 ### Added

spec/system/page_objects/components/user_menu.rb

@@ -43,6 +43,10 @@ module PageObjects
       def has_right_replies_button_count?(count)
         expect(find("#user-menu-button-replies").text).to eq(count.to_s)
       end
+
+      def has_notification_count_of?(count)
+        page.has_css?(".user-menu li.notification", count: count)
+      end
     end
   end
 end

spec/system/viewing_user_menu_spec.rb

@@ -5,6 +5,25 @@ RSpec.describe "Viewing User Menu", system: true do
 
   let(:user_menu) { PageObjects::Components::UserMenu.new }
 
+  describe "with notification limit set via plugin api" do
+    it "only displays as many notifications as the limit" do
+      sign_in(user)
+
+      visit("/latest")
+
+      3.times { Fabricate(:notification, user: user) }
+      page.execute_script <<~JS
+        require("discourse/lib/plugin-api").withPluginApi("1.22.0", (api) => {
+          api.setUserMenuNotificationsLimit(2);
+        })
+      JS
+
+      user_menu.open
+
+      expect(user_menu).to have_notification_count_of(2)
+    end
+  end
+
   describe "when viewing replies notifications tab" do
     fab!(:topic)