diff --git a/app/assets/javascripts/discourse/app/components/user-menu/likes-list-empty-state.hbs b/app/assets/javascripts/discourse/app/components/user-menu/likes-list-empty-state.hbs new file mode 100644 index 00000000000..9ba1bebe4a4 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/likes-list-empty-state.hbs @@ -0,0 +1,10 @@ +
+ + {{i18n "user.no_likes_title"}} + +
+

+ {{html-safe (i18n "user.no_likes_body" preferencesUrl=(get-url "/my/preferences/notifications"))}} +

+
+
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 2e2ad287efc..fd87ffe3e87 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 @@ -8,4 +8,8 @@ export default class UserMenuLikesNotificationsList extends UserMenuNotification dismissWarningModal() { return null; } + + get emptyStateComponent() { + return "user-menu/likes-list-empty-state"; + } } diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/likes-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/likes-list-test.js new file mode 100644 index 00000000000..8819b5efc8f --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/likes-list-test.js @@ -0,0 +1,32 @@ +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 { hbs } from "ember-cli-htmlbars"; +import pretender, { response } from "discourse/tests/helpers/create-pretender"; +import I18n from "I18n"; + +module( + "Integration | Component | user-menu | likes-notifications-list", + function (hooks) { + setupRenderingTest(hooks); + + const template = hbs``; + test("empty state (aka blank page syndrome)", async function (assert) { + pretender.get("/notifications", () => { + return response({ notifications: [] }); + }); + await render(template); + assert.strictEqual( + query(".empty-state-title").textContent.trim(), + I18n.t("user.no_likes_title"), + "empty state title for the likes tab is shown" + ); + const emptyStateBodyLink = query(".empty-state-body a"); + assert.ok( + emptyStateBodyLink.href.endsWith("/my/preferences/notifications"), + "link to /my/preferences/notification inside empty state body is rendered" + ); + }); + } +); diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 975f116aa50..8054f4086ff 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1132,6 +1132,11 @@ en: dismiss_notifications_tooltip: "Mark all unread notifications as read" dismiss_bookmarks_tooltip: "Mark all unread bookmark reminders as read" dismiss_messages_tooltip: "Mark all unread personal messages notifications as read" + no_likes_title: "You haven't received any likes yet" + no_likes_body: > + You will be notified here any time someone likes one of your posts so you can see what others are finding valuable. Others will see the same when you like their posts too! +

+ Notifications for likes are never emailed to you, but you can tune how you receive notifications about likes on the site in your notification preferences. no_messages_title: "You don’t have any messages" no_messages_body: > Need to have a direct personal conversation with someone, outside the normal conversational flow? Message them by selecting their avatar and using the %{icon} message button.