From ac9fbb56a4b47eb35f10cf62cea7bfb23f18d2e6 Mon Sep 17 00:00:00 2001 From: Osama Sayegh Date: Tue, 11 Oct 2022 18:33:09 +0300 Subject: [PATCH] DEV: Improve UX for user menu tabs when they're empty (#18520) This commit adds more helpful/education messages that show up in the replies and "other notifications" tabs when they're empty. Internal topic: t/76879. --- .../other-notifications-list-empty-state.hbs | 10 ++++++ .../user-menu/other-notifications-list.js | 9 +++--- .../user-menu/replies-notifications-list.js | 4 +++ .../other-notifications-list-test.js | 31 +++++++++++++++++++ .../replies-notifications-list-test.js | 31 +++++++++++++++++++ config/locales/client.en.yml | 3 ++ 6 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list-empty-state.hbs create mode 100644 app/assets/javascripts/discourse/tests/integration/components/user-menu/other-notifications-list-test.js create mode 100644 app/assets/javascripts/discourse/tests/integration/components/user-menu/replies-notifications-list-test.js diff --git a/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list-empty-state.hbs b/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list-empty-state.hbs new file mode 100644 index 00000000000..e9b156afac4 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list-empty-state.hbs @@ -0,0 +1,10 @@ +
+ + {{i18n "user.no_other_notifications_title"}} + +
+

+ {{html-safe (i18n "user.no_other_notifications_body")}} +

+
+
diff --git a/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list.js index 6b064e7f3cd..7cb132b5836 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list.js @@ -1,15 +1,14 @@ import UserMenuNotificationsList from "discourse/components/user-menu/notifications-list"; -import { inject as service } from "@ember/service"; export default class UserMenuOtherNotificationsList extends UserMenuNotificationsList { - @service currentUser; - @service siteSettings; - @service site; - get dismissTypes() { return this.filterByTypes; } + get emptyStateComponent() { + return "user-menu/other-notifications-list-empty-state"; + } + dismissWarningModal() { return null; } 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 8d4134c8703..1773d5651a9 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 @@ -8,4 +8,8 @@ export default class UserMenuRepliesNotificationsList extends UserMenuNotificati dismissWarningModal() { return null; } + + get emptyStateComponent() { + return "user-menu/notifications-list-empty-state"; + } } diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/other-notifications-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/other-notifications-list-test.js new file mode 100644 index 00000000000..0798714513a --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/other-notifications-list-test.js @@ -0,0 +1,31 @@ +import { module, test } from "qunit"; +import { setupRenderingTest } from "discourse/tests/helpers/component-test"; +import { exists, query } from "discourse/tests/helpers/qunit-helpers"; +import { render } from "@ember/test-helpers"; +import { hbs } from "ember-cli-htmlbars"; +import pretender, { response } from "discourse/tests/helpers/create-pretender"; +import I18n from "I18n"; + +module( + "Integration | Component | user-menu | other-notifications-list", + function (hooks) { + setupRenderingTest(hooks); + + hooks.beforeEach(() => { + pretender.get("/notifications", () => { + return response({ notifications: [] }); + }); + }); + + const template = hbs``; + + test("empty state when there are no notifications", async function (assert) { + await render(template); + assert.ok(exists(".empty-state .empty-state-body")); + assert.strictEqual( + query(".empty-state .empty-state-title").textContent.trim(), + I18n.t("user.no_other_notifications_title") + ); + }); + } +); diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/replies-notifications-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/replies-notifications-list-test.js new file mode 100644 index 00000000000..5763702fe9b --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/replies-notifications-list-test.js @@ -0,0 +1,31 @@ +import { module, test } from "qunit"; +import { setupRenderingTest } from "discourse/tests/helpers/component-test"; +import { exists, query } from "discourse/tests/helpers/qunit-helpers"; +import { render } from "@ember/test-helpers"; +import { hbs } from "ember-cli-htmlbars"; +import pretender, { response } from "discourse/tests/helpers/create-pretender"; +import I18n from "I18n"; + +module( + "Integration | Component | user-menu | replies-notifications-list", + function (hooks) { + setupRenderingTest(hooks); + + hooks.beforeEach(() => { + pretender.get("/notifications", () => { + return response({ notifications: [] }); + }); + }); + + const template = hbs``; + + test("empty state when there are no notifications", async function (assert) { + await render(template); + assert.ok(exists(".empty-state .empty-state-body")); + assert.strictEqual( + query(".empty-state .empty-state-title").textContent.trim(), + I18n.t("user.no_notifications_title") + ); + }); + } +); diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index f9459f5d469..3d391db95d7 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1141,6 +1141,9 @@ en: You will be notified in this panel about activity directly relevant to you, including replies to your topics and posts, when someone @mentions you or quotes you, and replies to topics you are watching. Notifications will also be sent to your email when you haven’t logged in for a while.

Look for the %{icon} to decide which specific topics, categories and tags you want to be notified about. For more, see your notification preferences. + no_other_notifications_title: "You don’t have any other notifications yet" + no_other_notifications_body: > + You will be notified in this panel about other kinds of activity that may be relevant to you - for example, when someone links to or edits one of your posts. no_notifications_page_title: "You don’t have any notifications yet" no_notifications_page_body: > You will be notified about activity directly relevant to you, including replies to your topics and posts, when someone @mentions you or quotes you, and replies to topics you are watching. Notifications will also be sent to your email when you haven’t logged in for a while.