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