Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Andrei Prigorshnev 2022-08-18 17:24:52 +04:00 committed by GitHub
parent 6c46f4af71
commit d7c1ff3116
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 78 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -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"),

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

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

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

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

4
app/assets/javascripts/discourse/app/templates/user/stream.hbs
View File

@ -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}}
{{/if}}
<UserStream @stream={{this.model.stream}} />

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

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

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

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

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

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

5
config/locales/client.en.yml
View File

@ -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"