From d7c1ff3116b5a7ec026a08da981e8dc29468937f Mon Sep 17 00:00:00 2001 From: Andrei Prigorshnev Date: Thu, 18 Aug 2022 17:24:52 +0400 Subject: [PATCH] UX: show blank page placeholder instead of the blue panel that says "No Activity" (#16293) --- .../app/routes/user-activity-drafts.js | 1 - .../app/routes/user-activity-index.js | 21 ++++++++------ .../app/routes/user-activity-likes-given.js | 9 ++++-- .../app/routes/user-activity-replies.js | 9 ++++-- .../app/routes/user-activity-stream.js | 4 --- .../discourse/app/templates/user/stream.hbs | 12 +++----- .../acceptance/user-activity-all-test.js | 28 +++++++++++-------- .../acceptance/user-activity-likes-test.js | 24 +++++++++------- .../acceptance/user-activity-replies-test.js | 25 ++++++++++------- config/locales/client.en.yml | 5 ++-- 10 files changed, 78 insertions(+), 60 deletions(-) diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-drafts.js b/app/assets/javascripts/discourse/app/routes/user-activity-drafts.js index 67b73d36348..5a5d30507bd 100644 --- a/app/assets/javascripts/discourse/app/routes/user-activity-drafts.js +++ b/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(), }; }); diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-index.js b/app/assets/javascripts/discourse/app/routes/user-activity-index.js index 313dcff0a43..88bb0b37cdb 100644 --- a/app/assets/javascripts/discourse/app/routes/user-activity-index.js +++ b/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 }; }, diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js b/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js index cec1907b8cb..901c890e245 100644 --- a/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js +++ b/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"), diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-replies.js b/app/assets/javascripts/discourse/app/routes/user-activity-replies.js index 621d4eb875f..c985d1850f7 100644 --- a/app/assets/javascripts/discourse/app/routes/user-activity-replies.js +++ b/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 }; }, diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-stream.js b/app/assets/javascripts/discourse/app/routes/user-activity-stream.js index fa12c7d036d..8195788a337 100644 --- a/app/assets/javascripts/discourse/app/routes/user-activity-stream.js +++ b/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, }; }, diff --git a/app/assets/javascripts/discourse/app/templates/user/stream.hbs b/app/assets/javascripts/discourse/app/templates/user/stream.hbs index 90788aa4ef1..a7fad6bd0fc 100644 --- a/app/assets/javascripts/discourse/app/templates/user/stream.hbs +++ b/app/assets/javascripts/discourse/app/templates/user/stream.hbs @@ -1,11 +1,7 @@ {{#if this.model.stream.noContent}} - {{#if this.model.isAnotherUsersPage}} -
{{this.model.emptyStateOthers}}
- {{else}} - - {{/if}} + {{/if}} diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-activity-all-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-activity-all-test.js index 701b9852e46..f0e6f9732a3 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-activity-all-test.js +++ b/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 + }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-activity-likes-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-activity-likes-test.js index fea8c445bed..56559f9bd02 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-activity-likes-test.js +++ b/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 }) ); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-activity-replies-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-activity-replies-test.js index b0b7690a988..a08ad5b914f 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-activity-replies-test.js +++ b/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 }) ); }); }); diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 901c0a8e59d..dcf54d9b30e 100644 --- a/config/locales/client.en.yml +++ b/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 Top or Categories 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 search 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 + New Topic 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"