UX: show blank page placeholder instead of the blue panel that says "No Activity" (#16293)

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

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

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

@@ -8,15 +8,20 @@ export default UserActivityStreamRoute.extend({
   userActionType: null,
 
   emptyState() {
+    const user = this.modelFor("user");
+
     const title = I18n.t("user_activity.no_activity_title");
-    const body = htmlSafe(
-      I18n.t("user_activity.no_activity_body", {
-        topUrl: getURL("/top"),
-        categoriesUrl: getURL("/categories"),
-        preferencesUrl: getURL("/my/preferences"),
-        heartIcon: iconHTML("heart"),
-      })
-    );
+    let body = "";
+    if (this.isCurrentUser(user)) {
+      body = htmlSafe(
+        I18n.t("user_activity.no_activity_body", {
+          topUrl: getURL("/top"),
+          categoriesUrl: getURL("/categories"),
+          preferencesUrl: getURL("/my/preferences"),
+          heartIcon: iconHTML("heart"),
+        })
+      );
+    }
 
     return { title, body };
   },

app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js

@@ -7,10 +7,15 @@ import { htmlSafe } from "@ember/template";
 
 export default UserActivityStreamRoute.extend({
   userActionType: UserAction.TYPES["likes_given"],
-  emptyStateOthers: I18n.t("user_activity.no_likes_others"),
 
   emptyState() {
-    const title = I18n.t("user_activity.no_likes_title");
+    const user = this.modelFor("user");
+
+    const title = this.isCurrentUser(user)
+      ? I18n.t("user_activity.no_likes_title")
+      : I18n.t("user_activity.no_likes_title_others", {
+          username: user.username,
+        });
     const body = htmlSafe(
       I18n.t("user_activity.no_likes_body", {
         heartIcon: iconHTML("heart"),

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

@@ -5,10 +5,15 @@ import { action } from "@ember/object";
 
 export default UserActivityStreamRoute.extend({
   userActionType: UserAction.TYPES["posts"],
-  emptyStateOthers: I18n.t("user_activity.no_replies_others"),
 
   emptyState() {
-    const title = I18n.t("user_activity.no_replies_title");
+    const user = this.modelFor("user");
+
+    const title = this.isCurrentUser(user)
+      ? I18n.t("user_activity.no_replies_title")
+      : I18n.t("user_activity.no_replies_title_others", {
+          username: user.username,
+        });
     const body = "";
     return { title, body };
   },

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

@@ -8,17 +8,13 @@ export default DiscourseRoute.extend(ViewingActionType, {
     acting_username: { refreshModel: true },
   },
 
-  emptyStateOthers: I18n.t("user_activity.no_activity_others"),
-
   model() {
     const user = this.modelFor("user");
     const stream = user.get("stream");
 
     return {
       stream,
-      isAnotherUsersPage: !this.isCurrentUser(user),
       emptyState: this.emptyState(),
-      emptyStateOthers: this.emptyStateOthers,
     };
   },
 

app/assets/javascripts/discourse/app/templates/user/stream.hbs

@@ -1,11 +1,7 @@
 {{#if this.model.stream.noContent}}
-  {{#if this.model.isAnotherUsersPage}}
-    <div class="alert alert-info">{{this.model.emptyStateOthers}}</div>
-  {{else}}
-    <EmptyState
-      @title={{this.model.emptyState.title}}
-      @body={{this.model.emptyState.body}}
-    />
-  {{/if}}
+  <EmptyState
+    @title={{this.model.emptyState.title}}
+    @body={{this.model.emptyState.body}}
+  />
 {{/if}}
 <UserStream @stream={{this.model.stream}} />

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

@@ -1,9 +1,11 @@
-import { acceptance, exists, query } from "../helpers/qunit-helpers";
+import { acceptance, query } from "../helpers/qunit-helpers";
 import { test } from "qunit";
 import { visit } from "@ember/test-helpers";
 import I18n from "I18n";
 
 acceptance("User Activity / All - empty state", function (needs) {
+  const currentUser = "eviltrout";
+  const anotherUser = "charlie";
   needs.user();
 
   needs.pretender((server, helper) => {
@@ -14,17 +16,19 @@ acceptance("User Activity / All - empty state", function (needs) {
     });
   });
 
-  test("When looking at own activity it renders the empty state panel", async function (assert) {
-    await visit("/u/eviltrout/activity");
-    assert.ok(exists("div.empty-state"));
-  });
-
-  test("When looking at another user activity it renders the 'No activity' message", async function (assert) {
-    await visit("/u/charlie/activity");
-    assert.ok(exists("div.alert-info"));
-    assert.strictEqual(
-      query("div.alert-info").innerText.trim(),
-      I18n.t("user_activity.no_activity_others")
+  test("When looking at own activity page", async function (assert) {
+    await visit(`/u/${currentUser}/activity`);
+    assert.equal(
+      query("div.empty-state span.empty-state-title").innerText,
+      I18n.t("user_activity.no_activity_title")
     );
   });
+
+  test("When looking at another user's activity page", async function (assert) {
+    await visit(`/u/${anotherUser}/activity`);
+    assert.equal(
+      query("div.empty-state span.empty-state-title").innerText,
+      I18n.t("user_activity.no_activity_title")
+    ); // the same title as when looking at own page
+  });
 });

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

@@ -1,9 +1,11 @@
-import { acceptance, exists, query } from "../helpers/qunit-helpers";
+import { acceptance, query } from "../helpers/qunit-helpers";
 import { test } from "qunit";
 import { visit } from "@ember/test-helpers";
 import I18n from "I18n";
 
 acceptance("User Activity / Likes - empty state", function (needs) {
+  const currentUser = "eviltrout";
+  const anotherUser = "charlie";
   needs.user();
 
   needs.pretender((server, helper) => {
@@ -14,17 +16,19 @@ acceptance("User Activity / Likes - empty state", function (needs) {
     });
   });
 
-  test("When looking at own activity it renders the empty state panel", async function (assert) {
-    await visit("/u/eviltrout/activity/likes-given");
-    assert.ok(exists("div.empty-state"));
+  test("When looking at own likes page", async function (assert) {
+    await visit(`/u/${currentUser}/activity/likes-given`);
+    assert.equal(
+      query("div.empty-state span.empty-state-title").innerText,
+      I18n.t("user_activity.no_likes_title")
+    );
   });
 
-  test("When looking at another user activity it renders the 'No activity' message", async function (assert) {
-    await visit("/u/charlie/activity/likes-given");
-    assert.ok(exists("div.alert-info"));
-    assert.strictEqual(
-      query("div.alert-info").innerText.trim(),
-      I18n.t("user_activity.no_likes_others")
+  test("When looking at another user's likes page", async function (assert) {
+    await visit(`/u/${anotherUser}/activity/likes-given`);
+    assert.equal(
+      query("div.empty-state span.empty-state-title").innerText,
+      I18n.t("user_activity.no_likes_title_others", { username: anotherUser })
     );
   });
 });

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

@@ -1,9 +1,12 @@
-import { acceptance, exists, query } from "../helpers/qunit-helpers";
+import { acceptance, query } from "../helpers/qunit-helpers";
 import { test } from "qunit";
 import { visit } from "@ember/test-helpers";
 import I18n from "I18n";
 
 acceptance("User Activity / Replies - empty state", function (needs) {
+  const currentUser = "eviltrout";
+  const anotherUser = "charlie";
+
   needs.user();
 
   needs.pretender((server, helper) => {
@@ -14,17 +17,19 @@ acceptance("User Activity / Replies - empty state", function (needs) {
     });
   });
 
-  test("When looking at own activity it renders the empty state panel", async function (assert) {
-    await visit("/u/eviltrout/activity/replies");
-    assert.ok(exists("div.empty-state"));
+  test("When looking at own replies page", async function (assert) {
+    await visit(`/u/${currentUser}/activity/replies`);
+    assert.equal(
+      query("div.empty-state span.empty-state-title").innerText,
+      I18n.t("user_activity.no_replies_title")
+    );
   });
 
-  test("When looking at another user activity it renders the 'No activity' message", async function (assert) {
-    await visit("/u/charlie/activity/replies");
-    assert.ok(exists("div.alert-info"));
-    assert.strictEqual(
-      query("div.alert-info").innerText.trim(),
-      I18n.t("user_activity.no_replies_others")
+  test("When looking at another user's replies page", async function (assert) {
+    await visit(`/u/${anotherUser}/activity/replies`);
+    assert.equal(
+      query("div.empty-state span.empty-state-title").innerText,
+      I18n.t("user_activity.no_replies_title_others", { username: anotherUser })
     );
   });
 });

config/locales/client.en.yml

@@ -4060,14 +4060,13 @@ en:
     user_activity:
       no_activity_title: "No activity yet"
       no_activity_body: "Welcome to our community! You are brand new here and have not yet contributed to discussions. As a first step, visit <a href='%{topUrl}'>Top</a> or <a href='%{categoriesUrl}'>Categories</a> and just start reading! Select %{heartIcon} on posts that you like or want to learn more about. As you participate, your activity will be listed here."
-      no_activity_others: "No activity."
       no_replies_title: "You have not replied to any topics yet"
-      no_replies_others: "No replies."
+      no_replies_title_others: "%{username} has not replied to any topics yet"
       no_drafts_title: "You haven’t started any drafts"
       no_drafts_body: "Not quite ready to post? We’ll automatically save a new draft and list it here whenever you start composing a topic, reply, or personal message. Select the cancel button to discard or save your draft to continue later."
       no_likes_title: "You haven’t liked any topics yet"
+      no_likes_title_others: "%{username} has not liked any topics yet"
       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_body: "It’s always best to <a href='%{searchUrl}'>search</a> for existing topics of conversation before starting a new one, but if you’re confident the topic you want isn’t out there already, go ahead and start a new topic of your very own. Look for the <kbd>+ New Topic</kbd> button at the top right of the topic list, category, or tag to begin creating a new topic in that area."
       no_topics_title_others: "%{username} has not started any topics yet"