UX: cleaner messages for empty state on the user activity topics page (#16267)

app/assets/javascripts/discourse/app/routes/discourse.js

@@ -74,6 +74,7 @@ const DiscourseRoute = Route.extend({
     }
   },
 
+  // deprecated, use isCurrentUser() instead
   isAnotherUsersPage(user) {
     if (!this.currentUser) {
       return true;
@@ -82,6 +83,14 @@ const DiscourseRoute = Route.extend({
     return user.username !== this.currentUser.username;
   },
 
+  isCurrentUser(user) {
+    if (!this.currentUser) {
+      return false; // the current user is anonymous
+    }
+
+    return user.id === this.currentUser.id;
+  },
+
   isPoppedState(transition) {
     return !transition._discourse_intercepted && !!transition.intent.url;
   },

app/assets/javascripts/discourse/app/routes/user-activity-drafts.js

@@ -11,7 +11,7 @@ export default DiscourseRoute.extend({
     return draftsStream.findItems(this.site).then(() => {
       return {
         stream: draftsStream,
-        isAnotherUsersPage: this.isAnotherUsersPage(user),
+        isAnotherUsersPage: !this.isCurrentUser(user),
         emptyState: this.emptyState(),
       };
     });

app/assets/javascripts/discourse/app/routes/user-activity-stream.js

@@ -16,7 +16,7 @@ export default DiscourseRoute.extend(ViewingActionType, {
 
     return {
       stream,
-      isAnotherUsersPage: this.isAnotherUsersPage(user),
+      isAnotherUsersPage: !this.isCurrentUser(user),
       emptyState: this.emptyState(),
       emptyStateOthers: this.emptyStateOthers,
     };

app/assets/javascripts/discourse/app/routes/user-activity-topics.js

@@ -23,8 +23,15 @@ export default UserTopicListRoute.extend({
   },
 
   emptyState() {
+    const user = this.modelFor("user");
+    const title = this.isCurrentUser(user)
+      ? I18n.t("user_activity.no_topics_title")
+      : I18n.t("user_activity.no_topics_title_others", {
+          username: user.username,
+        });
+
     return {
-      title: I18n.t("user_activity.no_topics_title"),
+      title,
       body: "",
     };
   },

app/assets/javascripts/discourse/tests/acceptance/user-activity-topic-test.js

@@ -1,14 +1,18 @@
-import { acceptance, exists, queryAll } from "../helpers/qunit-helpers";
+import { acceptance, exists, query, queryAll } from "../helpers/qunit-helpers";
 import { test } from "qunit";
 import { click, visit } from "@ember/test-helpers";
 import userFixtures from "../fixtures/user-fixtures";
+import I18n from "I18n";
 
 acceptance("User Activity / Topics - bulk actions", function (needs) {
+  const currentUser = "eviltrout";
   needs.user();
 
   needs.pretender((server, helper) => {
-    server.get("/topics/created-by/:username.json", () => {
-      return helper.response(userFixtures["/topics/created-by/eviltrout.json"]);
+    server.get(`/topics/created-by/${currentUser}.json`, () => {
+      return helper.response(
+        userFixtures[`/topics/created-by/${currentUser}.json`]
+      );
     });
 
     server.put("/topics/bulk", () => {
@@ -17,7 +21,7 @@ acceptance("User Activity / Topics - bulk actions", function (needs) {
   });
 
   test("bulk topic closing works", async function (assert) {
-    await visit("/u/charlie/activity/topics");
+    await visit(`/u/${currentUser}/activity/topics`);
 
     await click("button.bulk-select");
     await click(queryAll("input.bulk-select")[0]);
@@ -34,6 +38,8 @@ acceptance("User Activity / Topics - bulk actions", function (needs) {
 });
 
 acceptance("User Activity / Topics - empty state", function (needs) {
+  const currentUser = "eviltrout";
+  const anotherUser = "charlie";
   needs.user();
 
   needs.pretender((server, helper) => {
@@ -43,13 +49,28 @@ acceptance("User Activity / Topics - empty state", function (needs) {
       },
     };
 
-    server.get("/topics/created-by/:username.json", () => {
+    server.get(`/topics/created-by/${currentUser}.json`, () => {
+      return helper.response(emptyResponse);
+    });
+
+    server.get(`/topics/created-by/${anotherUser}.json`, () => {
       return helper.response(emptyResponse);
     });
   });
 
-  test("It renders the empty state panel", async function (assert) {
-    await visit("/u/charlie/activity/topics");
-    assert.ok(exists("div.empty-state"));
+  test("When looking at the own activity page", async function (assert) {
+    await visit(`/u/${currentUser}/activity/topics`);
+    assert.equal(
+      query("div.empty-state span.empty-state-title").innerText,
+      I18n.t("user_activity.no_topics_title")
+    );
+  });
+
+  test("When looking at another user's activity page", async function (assert) {
+    await visit(`/u/${anotherUser}/activity/topics`);
+    assert.equal(
+      query("div.empty-state span.empty-state-title").innerText,
+      I18n.t("user_activity.no_topics_title_others", { username: anotherUser })
+    );
   });
 });

config/locales/client.en.yml

@@ -3982,6 +3982,7 @@ en:
       no_likes_body: "A great way to jump in and start contributing is to start reading conversations that have already taken place, and select the %{heartIcon} on posts that you like!"
       no_likes_others: "No liked posts."
       no_topics_title: "You have not started any topics yet"
+      no_topics_title_others: "%{username} has not started any topics yet"
       no_read_topics_title: "You haven’t read any topics yet"
       no_read_topics_body: "Once you start reading discussions, you’ll see a list here. To start reading, look for topics that interest you in <a href='%{topUrl}'>Top</a> or <a href='%{categoriesUrl}'>Categories</a> or search by keyword %{searchIcon}"