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.

app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list-empty-state.hbs

@@ -0,0 +1,10 @@
+<div class="empty-state">
+  <span class="empty-state-title">
+    {{i18n "user.no_other_notifications_title"}}
+  </span>
+  <div class="empty-state-body">
+    <p>
+      {{html-safe (i18n "user.no_other_notifications_body")}}
+    </p>
+  </div>
+</div>

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;
   }

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";
+  }
 }

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`<UserMenu::OtherNotificationsList/>`;
+
+    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")
+      );
+    });
+  }
+);

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`<UserMenu::RepliesNotificationsList/>`;
+
+    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")
+      );
+    });
+  }
+);

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 <b>@mentions</b> 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.
         <br><br>
         Look for the %{icon} to decide which specific topics, categories and tags you want to be notified about. For more, see your <a href='%{preferencesUrl}'>notification preferences</a>.
+      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 <b>@mentions</b> 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.