From 4fdb2756836c3f5278e6293476b6a8102dccdb4f Mon Sep 17 00:00:00 2001 From: Osama Sayegh Date: Mon, 8 Aug 2022 17:24:04 +0300 Subject: [PATCH] DEV: Add bookmarks tab to the new user menu (#17814) Some of the changes in this commit are extracted from https://github.com/discourse/discourse/pull/17379. The bookmarks tab in the new user menu is different from the other tabs in that it can display a mixture of notifications and bookmarks. When there are unread bookmark reminder notifications, the tab displays all of these notifications at the top and fills the remaining space in the menu with the rest of the bookmarks. The bubble/badge count on the bookmarks tab indicates how many unread bookmark reminder notifications there are. On the technical aspect, since this commit introduces a new `bookmark-item` component, we've done some refactoring so that all 3 "item" components (`notification-item`, `reviewable-item` and the new `bookmark-item`) inherit from a base component and get identical HTML structure so they all look consistent. Internal tickets: t70584 and t65045. --- .../app/components/user-menu/bookmark-item.js | 36 +++++ .../user-menu/bookmark-notification-item.hbs | 1 + .../user-menu/bookmark-notification-item.js | 12 ++ .../user-menu/bookmarks-list-empty-state.hbs | 10 ++ .../components/user-menu/bookmarks-list.js | 72 +++++++++ .../user-menu/likes-notifications-list.js | 4 + .../user-menu/mentions-notifications-list.js | 4 + .../{notification-item.hbs => menu-item.hbs} | 7 +- .../app/components/user-menu/menu-item.js | 35 +++++ .../app/components/user-menu/menu.js | 19 +++ .../components/user-menu/notification-item.js | 20 ++- .../user-menu/notifications-list.js | 12 +- .../user-menu/replies-notifications-list.js | 4 + .../components/user-menu/reviewable-item.hbs | 9 -- .../components/user-menu/reviewable-item.js | 34 ++++- .../app/controllers/user-notifications.js | 7 +- .../discourse/app/initializers/badging.js | 12 +- .../subscribe-user-notifications.js | 2 + .../app/lib/notification-items/base.js | 8 +- .../lib/notification-items/group-mentioned.js | 2 +- .../app/lib/notification-items/liked.js | 2 +- .../discourse/app/lib/user-menu/tab.js | 9 ++ .../dismiss-notification-confirmation.hbs | 2 +- .../discourse/app/widgets/user-menu.js | 8 +- .../dismiss-notification-modal-test.js | 2 +- .../tests/acceptance/user-menu-test.js | 93 +++++++++++- .../discourse/tests/fixtures/user-menu.js | 66 +++++++++ .../user-menu/bookmark-item-test.js | 87 +++++++++++ .../user-menu/bookmarks-list-test.js | 90 +++++++++++ .../components/user-menu/menu-test.js | 20 +-- .../user-menu/notification-item-test.js | 37 ++--- .../user-menu/reviewable-item-test.js | 6 +- .../controllers/user-notifications-test.js | 6 +- .../stylesheets/common/base/menu-panel.scss | 27 +++- app/controllers/users_controller.rb | 60 +++++++- app/models/user.rb | 20 +++ app/models/user_bookmark_list.rb | 7 +- app/serializers/current_user_serializer.rb | 5 + .../user_bookmark_list_serializer.rb | 7 +- .../user_topic_bookmark_serializer.rb | 6 +- config/locales/client.en.yml | 10 +- config/routes.rb | 1 + lib/bookmark_query.rb | 6 +- spec/models/user_spec.rb | 25 +++- spec/requests/users_controller_spec.rb | 140 ++++++++++++++++++ .../user_post_bookmark_serializer_spec.rb | 35 +++-- .../user_topic_bookmark_serializer_spec.rb | 72 +++++---- 47 files changed, 1024 insertions(+), 135 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/bookmark-item.js create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/bookmark-notification-item.hbs create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/bookmark-notification-item.js create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/bookmarks-list-empty-state.hbs create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/bookmarks-list.js rename app/assets/javascripts/discourse/app/components/user-menu/{notification-item.hbs => menu-item.hbs} (60%) create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/menu-item.js delete mode 100644 app/assets/javascripts/discourse/app/components/user-menu/reviewable-item.hbs create mode 100644 app/assets/javascripts/discourse/tests/fixtures/user-menu.js create mode 100644 app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmark-item-test.js create mode 100644 app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js diff --git a/app/assets/javascripts/discourse/app/components/user-menu/bookmark-item.js b/app/assets/javascripts/discourse/app/components/user-menu/bookmark-item.js new file mode 100644 index 00000000000..4c0d2583eb2 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/bookmark-item.js @@ -0,0 +1,36 @@ +import UserMenuItem from "discourse/components/user-menu/menu-item"; +import { NO_REMINDER_ICON } from "discourse/models/bookmark"; + +export default class UserMenuBookmarkItem extends UserMenuItem { + get className() { + return "bookmark"; + } + + get linkHref() { + return this.bookmark.bookmarkable_url; + } + + get linkTitle() { + return this.bookmark.name; + } + + get icon() { + return NO_REMINDER_ICON; + } + + get label() { + return this.bookmark.user?.username; + } + + get description() { + return this.bookmark.title; + } + + get topicId() { + return this.bookmark.topic_id; + } + + get bookmark() { + return this.args.item; + } +} diff --git a/app/assets/javascripts/discourse/app/components/user-menu/bookmark-notification-item.hbs b/app/assets/javascripts/discourse/app/components/user-menu/bookmark-notification-item.hbs new file mode 100644 index 00000000000..e0829c1c076 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/bookmark-notification-item.hbs @@ -0,0 +1 @@ +{{component this.component item=@item}} diff --git a/app/assets/javascripts/discourse/app/components/user-menu/bookmark-notification-item.js b/app/assets/javascripts/discourse/app/components/user-menu/bookmark-notification-item.js new file mode 100644 index 00000000000..58dc4c66739 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/bookmark-notification-item.js @@ -0,0 +1,12 @@ +import GlimmerComponent from "discourse/components/glimmer"; +import Notification from "discourse/models/notification"; + +export default class UserMenuBookmarkNotificationItem extends GlimmerComponent { + get component() { + if (this.args.item.constructor === Notification) { + return "user-menu/notification-item"; + } else { + return "user-menu/bookmark-item"; + } + } +} diff --git a/app/assets/javascripts/discourse/app/components/user-menu/bookmarks-list-empty-state.hbs b/app/assets/javascripts/discourse/app/components/user-menu/bookmarks-list-empty-state.hbs new file mode 100644 index 00000000000..6e4528e070f --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/bookmarks-list-empty-state.hbs @@ -0,0 +1,10 @@ +
+ + {{i18n "user.no_bookmarks_title"}} + +
+

+ {{html-safe (i18n "user.no_bookmarks_body" icon=(d-icon "bookmark"))}} +

+
+
diff --git a/app/assets/javascripts/discourse/app/components/user-menu/bookmarks-list.js b/app/assets/javascripts/discourse/app/components/user-menu/bookmarks-list.js new file mode 100644 index 00000000000..639b30cc404 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/bookmarks-list.js @@ -0,0 +1,72 @@ +import UserMenuNotificationsList from "discourse/components/user-menu/notifications-list"; +import { ajax } from "discourse/lib/ajax"; +import Notification from "discourse/models/notification"; +import showModal from "discourse/lib/show-modal"; +import I18n from "I18n"; + +export default class UserMenuBookmarksList extends UserMenuNotificationsList { + get dismissTypes() { + return ["bookmark_reminder"]; + } + + get showAllHref() { + return `${this.currentUser.path}/activity/bookmarks`; + } + + get showAllTitle() { + return I18n.t("user_menu.view_all_bookmarks"); + } + + get showDismiss() { + return this.#unreadBookmarkRemindersCount > 0; + } + + get dismissTitle() { + return I18n.t("user.dismiss_bookmarks_tooltip"); + } + + get itemsCacheKey() { + return "user-menu-bookmarks-tab"; + } + + get itemComponent() { + return "user-menu/bookmark-notification-item"; + } + + get emptyStateComponent() { + return "user-menu/bookmarks-list-empty-state"; + } + + get #unreadBookmarkRemindersCount() { + const key = `grouped_unread_high_priority_notifications.${this.site.notification_types.bookmark_reminder}`; + // we're retrieving the value with get() so that Ember tracks the property + // and re-renders the UI when it changes. + // we can stop using `get()` when the User model is refactored into native + // class with @tracked properties. + return this.currentUser.get(key) || 0; + } + + fetchItems() { + return ajax(`/u/${this.currentUser.username}/user-menu-bookmarks`).then( + (data) => { + const content = []; + data.notifications.forEach((notification) => { + content.push(Notification.create(notification)); + }); + content.push(...data.bookmarks); + return content; + } + ); + } + + dismissWarningModal() { + const modalController = showModal("dismiss-notification-confirmation"); + modalController.set( + "confirmationMessage", + I18n.t("notifications.dismiss_confirmation.body.bookmarks", { + count: this.#unreadBookmarkRemindersCount, + }) + ); + return modalController; + } +} diff --git a/app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js index bf1b654adc9..3b936477a63 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js @@ -5,6 +5,10 @@ export default class UserMenuLikesNotificationsList extends UserMenuNotification return ["liked", "liked_consolidated"]; } + get dismissTypes() { + return this.filterByTypes; + } + dismissWarningModal() { return null; } diff --git a/app/assets/javascripts/discourse/app/components/user-menu/mentions-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/mentions-notifications-list.js index 8b8a2bad668..2a7a4396e87 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/mentions-notifications-list.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/mentions-notifications-list.js @@ -5,6 +5,10 @@ export default class UserMenuMentionsNotificationsList extends UserMenuNotificat return ["mentioned"]; } + get dismissTypes() { + return this.filterByTypes; + } + dismissWarningModal() { return null; } diff --git a/app/assets/javascripts/discourse/app/components/user-menu/notification-item.hbs b/app/assets/javascripts/discourse/app/components/user-menu/menu-item.hbs similarity index 60% rename from app/assets/javascripts/discourse/app/components/user-menu/notification-item.hbs rename to app/assets/javascripts/discourse/app/components/user-menu/menu-item.hbs index b9e155ad1c6..e5ca33d4ae7 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/notification-item.hbs +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu-item.hbs @@ -7,15 +7,12 @@ {{d-icon this.icon}}
{{#if this.label}} - + {{this.label}} {{/if}} {{#if this.description}} - + {{this.description}} {{/if}} diff --git a/app/assets/javascripts/discourse/app/components/user-menu/menu-item.js b/app/assets/javascripts/discourse/app/components/user-menu/menu-item.js new file mode 100644 index 00000000000..47ef43be914 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu-item.js @@ -0,0 +1,35 @@ +import GlimmerComponent from "discourse/components/glimmer"; +import { action } from "@ember/object"; + +export default class UserMenuItem extends GlimmerComponent { + get className() {} + + get linkHref() { + throw new Error("not implemented"); + } + + get linkTitle() { + throw new Error("not implemented"); + } + + get icon() { + throw new Error("not implemented"); + } + + get label() { + throw new Error("not implemented"); + } + + get labelClass() {} + + get description() { + throw new Error("not implemented"); + } + + get descriptionClass() {} + + get topicId() {} + + @action + onClick() {} +} diff --git a/app/assets/javascripts/discourse/app/components/user-menu/menu.js b/app/assets/javascripts/discourse/app/components/user-menu/menu.js index 6fec39d2c62..7fd6991cbce 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/menu.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu.js @@ -1,6 +1,7 @@ import GlimmerComponent from "discourse/components/glimmer"; import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; +import { NO_REMINDER_ICON } from "discourse/models/bookmark"; import UserMenuTab from "discourse/lib/user-menu/tab"; const DEFAULT_TAB_ID = "all-notifications"; @@ -69,6 +70,24 @@ const CORE_TOP_TABS = [ } }, + class extends UserMenuTab { + get id() { + return "bookmarks"; + } + + get icon() { + return NO_REMINDER_ICON; + } + + get panelComponent() { + return "user-menu/bookmarks-list"; + } + + get count() { + return this.getUnreadCountForType("bookmark_reminder"); + } + }, + class extends UserMenuTab { get id() { return REVIEW_QUEUE_TAB_ID; diff --git a/app/assets/javascripts/discourse/app/components/user-menu/notification-item.js b/app/assets/javascripts/discourse/app/components/user-menu/notification-item.js index 084c84962ce..d0febb11024 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/notification-item.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/notification-item.js @@ -1,11 +1,11 @@ -import GlimmerComponent from "discourse/components/glimmer"; +import UserMenuItem from "discourse/components/user-menu/menu-item"; import { setTransientHeader } from "discourse/lib/ajax"; import { action } from "@ember/object"; import { getRenderDirector } from "discourse/lib/notification-item"; import getURL from "discourse-common/lib/get-url"; import cookie from "discourse/lib/cookie"; -export default class UserMenuNotificationItem extends GlimmerComponent { +export default class UserMenuNotificationItem extends UserMenuItem { constructor() { super(...arguments); this.renderDirector = getRenderDirector( @@ -18,9 +18,11 @@ export default class UserMenuNotificationItem extends GlimmerComponent { } get className() { - const classes = []; + const classes = ["notification"]; if (this.notification.read) { classes.push("read"); + } else { + classes.push("unread"); } if (this.#notificationName) { classes.push(this.#notificationName.replace(/_/g, "-")); @@ -51,16 +53,20 @@ export default class UserMenuNotificationItem extends GlimmerComponent { return this.renderDirector.label; } - get labelWrapperClasses() { - return this.renderDirector.labelWrapperClasses?.join(" ") || ""; + get labelClass() { + return this.renderDirector.labelClasses?.join(" ") || ""; } get description() { return this.renderDirector.description; } - get descriptionWrapperClasses() { - return this.renderDirector.descriptionWrapperClasses?.join(" ") || ""; + get descriptionClass() { + return this.renderDirector.descriptionClasses?.join(" ") || ""; + } + + get topicId() { + return this.notification.topic_id; } get notification() { diff --git a/app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js index 79110e5bcd2..f9200599824 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js @@ -10,6 +10,10 @@ export default class UserMenuNotificationsList extends UserMenuItemsList { return null; } + get dismissTypes() { + return null; + } + get showAllHref() { return `${this.currentUser.path}/notifications`; } @@ -70,8 +74,10 @@ export default class UserMenuNotificationsList extends UserMenuItemsList { if (this.currentUser.unread_high_priority_notifications > 0) { const modalController = showModal("dismiss-notification-confirmation"); modalController.set( - "count", - this.currentUser.unread_high_priority_notifications + "confirmationMessage", + I18n.t("notifications.dismiss_confirmation.body.default", { + count: this.currentUser.unread_high_priority_notifications, + }) ); return modalController; } @@ -80,7 +86,7 @@ export default class UserMenuNotificationsList extends UserMenuItemsList { @action dismissButtonClick() { const opts = { type: "PUT" }; - const dismissTypes = this.filterByTypes; + const dismissTypes = this.dismissTypes; if (dismissTypes?.length > 0) { opts.data = { dismiss_types: dismissTypes.join(",") }; } diff --git a/app/assets/javascripts/discourse/app/components/user-menu/replies-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/replies-notifications-list.js index f747b81e919..b7d878be33f 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/replies-notifications-list.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/replies-notifications-list.js @@ -5,6 +5,10 @@ export default class UserMenuRepliesNotificationsList extends UserMenuNotificati return ["replied"]; } + get dismissTypes() { + return this.filterByTypes; + } + dismissWarningModal() { return null; } diff --git a/app/assets/javascripts/discourse/app/components/user-menu/reviewable-item.hbs b/app/assets/javascripts/discourse/app/components/user-menu/reviewable-item.hbs deleted file mode 100644 index 10db4fc1943..00000000000 --- a/app/assets/javascripts/discourse/app/components/user-menu/reviewable-item.hbs +++ /dev/null @@ -1,9 +0,0 @@ -
  • - - {{d-icon this.icon}} -
    - {{this.actor}} - {{this.description}} -
    -     -
    • diff --git a/app/assets/javascripts/discourse/app/components/user-menu/reviewable-item.js b/app/assets/javascripts/discourse/app/components/user-menu/reviewable-item.js index b08d973fbd0..eab3e3563a8 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/reviewable-item.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/reviewable-item.js @@ -1,7 +1,8 @@ -import GlimmerComponent from "discourse/components/glimmer"; +import UserMenuItem from "discourse/components/user-menu/menu-item"; +import getURL from "discourse-common/lib/get-url"; import { getRenderDirector } from "discourse/lib/reviewable-item"; -export default class UserMenuReviewableItem extends GlimmerComponent { +export default class UserMenuReviewableItem extends UserMenuItem { constructor() { super(...arguments); this.reviewable = this.args.item; @@ -14,15 +15,34 @@ export default class UserMenuReviewableItem extends GlimmerComponent { ); } - get actor() { + get className() { + const classes = ["reviewable"]; + if (this.reviewable.pending) { + classes.push("pending"); + } else { + classes.push("reviewed"); + } + return classes.join(" "); + } + + get linkHref() { + return getURL(`/review/${this.reviewable.id}`); + } + + get linkTitle() { + // TODO(osama): add title + return ""; + } + + get icon() { + return this.renderDirector.icon; + } + + get label() { return this.renderDirector.actor; } get description() { return this.renderDirector.description; } - - get icon() { - return this.renderDirector.icon; - } } diff --git a/app/assets/javascripts/discourse/app/controllers/user-notifications.js b/app/assets/javascripts/discourse/app/controllers/user-notifications.js index dda292f5889..3890d5a199d 100644 --- a/app/assets/javascripts/discourse/app/controllers/user-notifications.js +++ b/app/assets/javascripts/discourse/app/controllers/user-notifications.js @@ -63,7 +63,12 @@ export default Controller.extend({ if (unreadHighPriorityNotifications > 0) { showModal("dismiss-notification-confirmation").setProperties({ - count: unreadHighPriorityNotifications, + confirmationMessage: I18n.t( + "notifications.dismiss_confirmation.body.default", + { + count: unreadHighPriorityNotifications, + } + ), dismissNotifications: () => this.markRead(), }); } else { diff --git a/app/assets/javascripts/discourse/app/initializers/badging.js b/app/assets/javascripts/discourse/app/initializers/badging.js index 6ac623bdb87..38f6db84ade 100644 --- a/app/assets/javascripts/discourse/app/initializers/badging.js +++ b/app/assets/javascripts/discourse/app/initializers/badging.js @@ -15,8 +15,16 @@ export default { const appEvents = container.lookup("service:app-events"); appEvents.on("notifications:changed", () => { - const notifications = - user.unread_notifications + user.unread_high_priority_notifications; + let notifications; + if (user.redesigned_user_menu_enabled) { + notifications = user.all_unread_notifications_count; + if (user.unseen_reviewable_count) { + notifications += user.unseen_reviewable_count; + } + } else { + notifications = + user.unread_notifications + user.unread_high_priority_notifications; + } navigator.setAppBadge(notifications); }); diff --git a/app/assets/javascripts/discourse/app/initializers/subscribe-user-notifications.js b/app/assets/javascripts/discourse/app/initializers/subscribe-user-notifications.js index 90ed40130b7..0399ff9c1b1 100644 --- a/app/assets/javascripts/discourse/app/initializers/subscribe-user-notifications.js +++ b/app/assets/javascripts/discourse/app/initializers/subscribe-user-notifications.js @@ -51,6 +51,8 @@ export default { data.unread_high_priority_notifications, read_first_notification: data.read_first_notification, all_unread_notifications_count: data.all_unread_notifications_count, + grouped_unread_high_priority_notifications: + data.grouped_unread_high_priority_notifications, }); if ( diff --git a/app/assets/javascripts/discourse/app/lib/notification-items/base.js b/app/assets/javascripts/discourse/app/lib/notification-items/base.js index 455db134b0b..fb7a6961019 100644 --- a/app/assets/javascripts/discourse/app/lib/notification-items/base.js +++ b/app/assets/javascripts/discourse/app/lib/notification-items/base.js @@ -82,16 +82,16 @@ export default class NotificationItemBase { onClick() {} /** - * @returns {string[]} Include additional classes to the label's wrapper . + * @returns {string[]} Include additional classes to the label. */ - get labelWrapperClasses() { + get labelClasses() { return []; } /** - * @returns {string[]} Include additional classes to the description's wrapper . + * @returns {string[]} Include additional classes to the description. */ - get descriptionWrapperClasses() { + get descriptionClasses() { return []; } diff --git a/app/assets/javascripts/discourse/app/lib/notification-items/group-mentioned.js b/app/assets/javascripts/discourse/app/lib/notification-items/group-mentioned.js index 0333d6e44d8..b9ba3ee4c5b 100644 --- a/app/assets/javascripts/discourse/app/lib/notification-items/group-mentioned.js +++ b/app/assets/javascripts/discourse/app/lib/notification-items/group-mentioned.js @@ -5,7 +5,7 @@ export default class extends NotificationItemBase { return `${this.username} @${this.notification.data.group_name}`; } - get labelWrapperClasses() { + get labelClasses() { return ["mention-group", "notify"]; } } diff --git a/app/assets/javascripts/discourse/app/lib/notification-items/liked.js b/app/assets/javascripts/discourse/app/lib/notification-items/liked.js index 6cae82971b6..e41376b0dae 100644 --- a/app/assets/javascripts/discourse/app/lib/notification-items/liked.js +++ b/app/assets/javascripts/discourse/app/lib/notification-items/liked.js @@ -20,7 +20,7 @@ export default class extends NotificationItemBase { } } - get labelWrapperClasses() { + get labelClasses() { if (this.count === 2) { return ["double-user"]; } else if (this.count > 2) { diff --git a/app/assets/javascripts/discourse/app/lib/user-menu/tab.js b/app/assets/javascripts/discourse/app/lib/user-menu/tab.js index cc6999a7e4a..11d2cacef51 100644 --- a/app/assets/javascripts/discourse/app/lib/user-menu/tab.js +++ b/app/assets/javascripts/discourse/app/lib/user-menu/tab.js @@ -24,4 +24,13 @@ export default class UserMenuTab { get icon() { throw new Error("not implemented"); } + + getUnreadCountForType(type) { + const key = `grouped_unread_high_priority_notifications.${this.site.notification_types[type]}`; + // we're retrieving the value with get() so that Ember tracks the property + // and re-renders the UI when it changes. + // we can stop using `get()` when the User model is refactored into native + // class with @tracked properties. + return this.currentUser.get(key) || 0; + } } diff --git a/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs b/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs index 2e01e98bf42..d16c8b8ae1d 100644 --- a/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs +++ b/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs @@ -1,5 +1,5 @@ - {{i18n "notifications.dismiss_confirmation.body" count=this.count}} + {{this.confirmationMessage}}
    diff --git a/app/assets/javascripts/discourse/app/widgets/user-menu.js b/app/assets/javascripts/discourse/app/widgets/user-menu.js index 88dc1583d18..3e4efc53b6e 100644 --- a/app/assets/javascripts/discourse/app/widgets/user-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/user-menu.js @@ -2,6 +2,7 @@ import discourseLater from "discourse-common/lib/later"; import { createWidget } from "discourse/widgets/widget"; import { h } from "virtual-dom"; import showModal from "discourse/lib/show-modal"; +import I18n from "I18n"; const UserMenuAction = { QUICK_ACCESS: "quickAccess", @@ -256,7 +257,12 @@ export default createWidget("user-menu", { if (unreadHighPriorityNotifications > 0) { return showModal("dismiss-notification-confirmation").setProperties({ - count: unreadHighPriorityNotifications, + confirmationMessage: I18n.t( + "notifications.dismiss_confirmation.body.default", + { + count: unreadHighPriorityNotifications, + } + ), dismissNotifications: () => this.state.markRead(), }); } else { diff --git a/app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js b/app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js index 0e446fc8f58..f52e4cac171 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js @@ -34,7 +34,7 @@ acceptance("Dismiss notification confirmation", function (needs) { assert.strictEqual( query(".dismiss-notification-confirmation-modal .modal-body").innerText, - I18n.t("notifications.dismiss_confirmation.body", { count: 2 }) + I18n.t("notifications.dismiss_confirmation.body.default", { count: 2 }) ); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js index 1a26181412b..5e64d2b62d8 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js @@ -1,11 +1,15 @@ import { click, visit } from "@ember/test-helpers"; import { acceptance, + exists, + loggedInUser, + publishToMessageBus, query, - updateCurrentUser, } from "discourse/tests/helpers/qunit-helpers"; import { test } from "qunit"; import { cloneJSON } from "discourse-common/lib/object"; +import { NOTIFICATION_TYPES } from "discourse/tests/fixtures/concerns/notification-types"; +import UserMenuFixtures from "discourse/tests/fixtures/user-menu"; import TopicFixtures from "discourse/tests/fixtures/topic"; import I18n from "I18n"; @@ -46,19 +50,39 @@ acceptance("User menu - Dismiss button", function (needs) { needs.user({ redesigned_user_menu_enabled: true, unread_high_priority_notifications: 10, + grouped_unread_high_priority_notifications: { + [NOTIFICATION_TYPES.bookmark_reminder]: 103, + }, }); let markRead = false; + let markReadRequestBody; needs.pretender((server, helper) => { - server.put("/notifications/mark-read", () => { + server.put("/notifications/mark-read", (request) => { + markReadRequestBody = request.requestBody; markRead = true; return helper.response({ success: true }); }); + + server.get("/u/eviltrout/user-menu-bookmarks", () => { + if (markRead) { + const copy = cloneJSON( + UserMenuFixtures["/u/:username/user-menu-bookmarks"] + ); + copy.notifications = []; + return helper.response(copy); + } else { + return helper.response( + UserMenuFixtures["/u/:username/user-menu-bookmarks"] + ); + } + }); }); needs.hooks.afterEach(() => { markRead = false; + markReadRequestBody = null; }); test("shows confirmation modal for the all-notifications list", async function (assert) { @@ -68,14 +92,16 @@ acceptance("User menu - Dismiss button", function (needs) { await click(".user-menu .notifications-dismiss"); assert.strictEqual( query(".dismiss-notification-confirmation").textContent.trim(), - I18n.t("notifications.dismiss_confirmation.body", { count: 10 }), + I18n.t("notifications.dismiss_confirmation.body.default", { count: 10 }), "confirmation modal is shown when there are unread high pri notifications" ); assert.notOk(markRead, "mark-read request isn't sent"); await click(".modal-footer .btn-default"); // click cancel on the dismiss modal - updateCurrentUser({ unread_high_priority_notifications: 0 }); + await publishToMessageBus(`/notification/${loggedInUser().id}`, { + unread_high_priority_notifications: 0, + }); await click(".user-menu .notifications-dismiss"); assert.ok( markRead, @@ -83,7 +109,64 @@ acceptance("User menu - Dismiss button", function (needs) { ); }); - test("doesn't show confirmation modal for the likes notifications panel/list", async function (assert) { + test("shows confirmation modal for the bookmarks list", async function (assert) { + await visit("/"); + await click(".d-header-icons .current-user"); + + assert.strictEqual( + query("#user-menu-button-bookmarks .badge-notification").textContent, + "103", + "bookmarks tab has bubble with count" + ); + + await click("#user-menu-button-bookmarks"); + assert.ok( + exists("#quick-access-bookmarks ul li.notification"), + "bookmark reminder notifications are visible" + ); + assert.ok( + exists("#quick-access-bookmarks ul li.bookmark"), + "bookmarks are visible" + ); + + await click(".user-menu .notifications-dismiss"); + + assert.strictEqual( + query(".dismiss-notification-confirmation").textContent.trim(), + I18n.t("notifications.dismiss_confirmation.body.bookmarks", { + count: 103, + }), + "confirmation modal is shown when there are unread bookmark reminder notifications" + ); + assert.notOk(markRead, "mark-read request isn't sent"); + + await click(".modal-footer .btn-primary"); // confirm dismiss on the dismiss modal + await publishToMessageBus(`/notification/${loggedInUser().id}`, { + grouped_unread_high_priority_notifications: {}, + }); + + assert.notOk( + exists("#quick-access-bookmarks ul li.notification"), + "bookmark reminder notifications are gone" + ); + assert.ok( + exists("#quick-access-bookmarks ul li.bookmark"), + "bookmarks are still visible" + ); + assert.notOk( + exists("#user-menu-button-bookmarks .badge-notification"), + "bookmarks tab no longer has bubble" + ); + assert.ok(markRead, "mark-read request is sent"); + assert.strictEqual( + markReadRequestBody, + "dismiss_types=bookmark_reminder", + "mark-read request specifies bookmark_reminder types" + ); + assert.notOk(exists(".user-menu .notifications-dismiss")); + }); + + test("doesn't show confirmation modal for the likes notifications list", async function (assert) { await visit("/"); await click(".d-header-icons .current-user"); diff --git a/app/assets/javascripts/discourse/tests/fixtures/user-menu.js b/app/assets/javascripts/discourse/tests/fixtures/user-menu.js new file mode 100644 index 00000000000..a886c18e827 --- /dev/null +++ b/app/assets/javascripts/discourse/tests/fixtures/user-menu.js @@ -0,0 +1,66 @@ +export default { + "/u/:username/user-menu-bookmarks": { + notifications: [ + { + id: 1713, + user_id: 1, + notification_type: 24, + read: false, + high_priority: true, + created_at: "2022-08-05T17:27:24.873Z", + post_number: 1, + topic_id: 249, + fancy_title: "Test event hello world!", + slug: "test-event-hello-world", + data: { + title: "Test event hello world!", + bookmarkable_url: "/t/test-event-hello-world/249/1", + display_username: "osama", + bookmark_name: "", + bookmark_id: 11, + }, + }, + ], + bookmarks: [ + { + id: 6, + created_at: "2022-08-05T06:09:39.559Z", + updated_at: "2022-08-05T06:11:27.246Z", + name: "", + reminder_at: "2022-08-05T06:10:42.223Z", + reminder_at_ics_start: "20220805T061042Z", + reminder_at_ics_end: "20220805T071042Z", + pinned: false, + title: "Test poll topic hello world", + fancy_title: "Test poll topic hello world", + excerpt: "poll", + bookmarkable_id: 1009, + bookmarkable_type: "Post", + bookmarkable_url: + "http://localhost:4200/t/test-poll-topic-hello-world/227/1", + tags: [], + tags_descriptions: {}, + truncated: true, + topic_id: 227, + linked_post_number: 1, + deleted: false, + hidden: false, + category_id: 1, + closed: false, + archived: false, + archetype: "regular", + highest_post_number: 1, + last_read_post_number: 1, + bumped_at: "2022-04-21T15:14:37.359Z", + slug: "test-poll-topic-hello-world", + user: { + id: 1, + username: "osama", + name: "Osama", + avatar_template: + "/letter_avatar_proxy/v4/letter/o/f05b48/{size}.png", + }, + }, + ], + } +} diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmark-item-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmark-item-test.js new file mode 100644 index 00000000000..956802dbc0d --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmark-item-test.js @@ -0,0 +1,87 @@ +import { module, test } from "qunit"; +import { setupRenderingTest } from "discourse/tests/helpers/component-test"; +import { query } from "discourse/tests/helpers/qunit-helpers"; +import { render } from "@ember/test-helpers"; +import { deepMerge } from "discourse-common/lib/object"; +import Notification from "discourse/models/notification"; +import { hbs } from "ember-cli-htmlbars"; + +function getBookmark(overrides = {}) { + return Notification.create( + deepMerge( + { + id: 6, + created_at: "2022-08-05T06:09:39.559Z", + updated_at: "2022-08-05T06:11:27.246Z", + name: "", + reminder_at: "2022-08-05T06:10:42.223Z", + reminder_at_ics_start: "20220805T061042Z", + reminder_at_ics_end: "20220805T071042Z", + pinned: false, + title: "Test poll topic hello world", + fancy_title: "Test poll topic hello world", + excerpt: "poll", + bookmarkable_id: 1009, + bookmarkable_type: "Post", + bookmarkable_url: "http://localhost:4200/t/this-bookmarkable-url/227/1", + tags: [], + tags_descriptions: {}, + truncated: true, + topic_id: 227, + linked_post_number: 1, + deleted: false, + hidden: false, + category_id: 1, + closed: false, + archived: false, + archetype: "regular", + highest_post_number: 45, + last_read_post_number: 31, + bumped_at: "2022-04-21T15:14:37.359Z", + slug: "test-poll-topic-hello-world", + user: { + id: 1, + username: "somebody", + name: "Mr. Somebody", + avatar_template: "/letter_avatar_proxy/v4/letter/o/f05b48/{size}.png", + }, + }, + overrides + ) + ); +} + +module("Integration | Component | user-menu | bookmark-item", function (hooks) { + setupRenderingTest(hooks); + + const template = hbs``; + + test("uses bookmarkable_url for the href", async function (assert) { + this.set("bookmark", getBookmark()); + await render(template); + assert.ok( + query("li.bookmark a").href.endsWith("/t/this-bookmarkable-url/227/1") + ); + }); + + test("item label is the bookmarked post author", async function (assert) { + this.set( + "bookmark", + getBookmark({ user: { username: "bookmarkPostAuthor" } }) + ); + await render(template); + assert.strictEqual( + query("li.bookmark .item-label").textContent.trim(), + "bookmarkPostAuthor" + ); + }); + + test("item description is the bookmark title", async function (assert) { + this.set("bookmark", getBookmark({ title: "Custom bookmark title" })); + await render(template); + assert.strictEqual( + query("li.bookmark .item-description").textContent.trim(), + "Custom bookmark title" + ); + }); +}); diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js new file mode 100644 index 00000000000..cecb3ed6965 --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js @@ -0,0 +1,90 @@ +import { module, test } from "qunit"; +import { setupRenderingTest } from "discourse/tests/helpers/component-test"; +import { exists, query, queryAll } from "discourse/tests/helpers/qunit-helpers"; +import { render, settled } from "@ember/test-helpers"; +import { NOTIFICATION_TYPES } from "discourse/tests/fixtures/concerns/notification-types"; +import { hbs } from "ember-cli-htmlbars"; +import pretender, { response } from "discourse/tests/helpers/create-pretender"; +import I18n from "I18n"; + +module( + "Integration | Component | user-menu | bookmarks-list", + function (hooks) { + setupRenderingTest(hooks); + + const template = hbs``; + + test("renders notifications on top and bookmarks on bottom", async function (assert) { + await render(template); + const items = queryAll("ul li"); + + assert.strictEqual(items.length, 2); + + assert.ok(items[0].classList.contains("notification")); + assert.ok(items[0].classList.contains("unread")); + assert.ok(items[0].classList.contains("bookmark-reminder")); + + assert.ok(items[1].classList.contains("bookmark")); + }); + + test("show all link", async function (assert) { + await render(template); + const link = query(".panel-body-bottom .show-all"); + assert.ok( + link.href.endsWith("/u/eviltrout/activity/bookmarks"), + "links to the bookmarks page" + ); + assert.strictEqual( + link.title, + I18n.t("user_menu.view_all_bookmarks"), + "has a title" + ); + }); + + test("dismiss button", async function (assert) { + this.currentUser.set("grouped_unread_high_priority_notifications", { + [NOTIFICATION_TYPES.bookmark_reminder]: 72, + }); + await render(template); + const dismiss = query(".panel-body-bottom .notifications-dismiss"); + assert.ok( + dismiss, + "dismiss button is shown if the user has unread bookmark_reminder notifications" + ); + assert.strictEqual( + dismiss.title, + I18n.t("user.dismiss_bookmarks_tooltip"), + "dismiss button has a title" + ); + + this.currentUser.set("grouped_unread_high_priority_notifications", {}); + await settled(); + + assert.notOk( + exists(".panel-body-bottom .notifications-dismiss"), + "dismiss button is not shown if the user no unread bookmark_reminder notifications" + ); + }); + + test("empty state (aka blank page syndrome)", async function (assert) { + pretender.get("/u/eviltrout/user-menu-bookmarks", () => { + return response({ notifications: [], bookmarks: [] }); + }); + await render(template); + assert.strictEqual( + query(".empty-state-title").textContent.trim(), + I18n.t("user.no_bookmarks_title"), + "empty state title is shown" + ); + assert.strictEqual( + query(".empty-state-body").textContent.trim(), + I18n.t("user.no_bookmarks_body", { icon: "" }).trim(), + "empty state body is shown" + ); + assert.ok( + exists(".empty-state-body svg.d-icon-bookmark"), + "icon is correctly rendered in the empty state body" + ); + }); + } +); diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js index 0a668286ef0..73677f2c556 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js @@ -16,9 +16,9 @@ module("Integration | Component | user-menu", function (hooks) { const activeTab = query(".top-tabs.tabs-list .btn.active"); assert.strictEqual(activeTab.id, "user-menu-button-all-notifications"); const notifications = queryAll("#quick-access-all-notifications ul li"); - assert.strictEqual(notifications[0].className, "edited"); - assert.strictEqual(notifications[1].className, "replied"); - assert.strictEqual(notifications[2].className, "liked-consolidated"); + assert.ok(notifications[0].classList.contains("edited")); + assert.ok(notifications[1].classList.contains("replied")); + assert.ok(notifications[2].classList.contains("liked-consolidated")); }); test("notifications panel has a11y attributes", async function (assert) { @@ -48,7 +48,7 @@ module("Integration | Component | user-menu", function (hooks) { test("the menu has a group of tabs at the top", async function (assert) { await render(template); const tabs = queryAll(".top-tabs.tabs-list .btn"); - assert.strictEqual(tabs.length, 4); + assert.strictEqual(tabs.length, 5); ["all-notifications", "replies", "mentions", "likes"].forEach( (tab, index) => { assert.strictEqual(tabs[index].id, `user-menu-button-${tab}`); @@ -67,7 +67,7 @@ module("Integration | Component | user-menu", function (hooks) { assert.strictEqual(tabs.length, 1); const preferencesTab = tabs[0]; assert.ok(preferencesTab.href.endsWith("/u/eviltrout/preferences")); - assert.strictEqual(preferencesTab.dataset.tabNumber, "4"); + assert.strictEqual(preferencesTab.dataset.tabNumber, "5"); assert.strictEqual(preferencesTab.getAttribute("tabindex"), "-1"); }); @@ -77,11 +77,11 @@ module("Integration | Component | user-menu", function (hooks) { assert.ok(!exists("#user-menu-button-likes")); const tabs = Array.from(queryAll(".tabs-list .btn")); // top and bottom tabs - assert.strictEqual(tabs.length, 4); + assert.strictEqual(tabs.length, 5); assert.deepEqual( tabs.map((t) => t.dataset.tabNumber), - ["0", "1", "2", "3"], + ["0", "1", "2", "3", "4"], "data-tab-number of the tabs has no gaps when the likes tab is hidden" ); }); @@ -90,14 +90,14 @@ module("Integration | Component | user-menu", function (hooks) { this.currentUser.set("can_review", true); await render(template); const tab = query("#user-menu-button-review-queue"); - assert.strictEqual(tab.dataset.tabNumber, "4"); + assert.strictEqual(tab.dataset.tabNumber, "5"); const tabs = Array.from(queryAll(".tabs-list .btn")); // top and bottom tabs - assert.strictEqual(tabs.length, 6); + assert.strictEqual(tabs.length, 7); assert.deepEqual( tabs.map((t) => t.dataset.tabNumber), - ["0", "1", "2", "3", "4", "5"], + ["0", "1", "2", "3", "4", "5", "6"], "data-tab-number of the tabs has no gaps when the reviewables tab is show" ); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/notification-item-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/notification-item-test.js index 3198d73921a..c476644d059 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/user-menu/notification-item-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/notification-item-test.js @@ -43,12 +43,12 @@ module( const template = hbs``; - test("pushes `read` to the classList if the notification is read", async function (assert) { + test("pushes `read` to the classList if the notification is read and `unread` if it isn't", async function (assert) { this.set("notification", getNotification()); this.notification.read = false; await render(template); - assert.ok(!exists("li.read")); - assert.ok(exists("li")); + assert.notOk(exists("li.read")); + assert.ok(exists("li.unread")); this.notification.read = true; await settled(); @@ -57,13 +57,17 @@ module( exists("li.read"), "the item re-renders when the read property is updated" ); + assert.notOk( + exists("li.unread"), + "the item re-renders when the read property is updated" + ); }); test("pushes the notification type name to the classList", async function (assert) { this.set("notification", getNotification()); await render(template); let item = query("li"); - assert.strictEqual(item.className, "mentioned"); + assert.ok(item.classList.contains("mentioned")); this.set( "notification", @@ -128,8 +132,8 @@ module( test("has elements for label and description", async function (assert) { this.set("notification", getNotification()); await render(template); - const label = query("li a .notification-label"); - const description = query("li a .notification-description"); + const label = query("li a .item-label"); + const description = query("li a .item-description"); assert.strictEqual( label.textContent.trim(), @@ -152,7 +156,7 @@ module( }) ); await render(template); - const description = query("li a .notification-description"); + const description = query("li a .item-description"); assert.strictEqual( description.textContent.trim(), @@ -170,7 +174,7 @@ module( ); await render(template); assert.ok( - exists("li a .notification-description img.emoji"), + exists("li a .item-description img.emoji"), "emojis are unescaped when fancy_title is used for description" ); }); @@ -186,7 +190,7 @@ module( }) ); await render(template); - const description = query("li a .notification-description"); + const description = query("li a .item-description"); assert.strictEqual( description.textContent.trim(), @@ -226,11 +230,11 @@ module( return "notification description 123